From ab2a943375438a1c3475d17d2bf48c5346f68461 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:17:25 -0500 Subject: [PATCH 01/32] updating carousel docs. --- apps/website/src/pages/docs/carousel.mdx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 152cf6e533b..078dce6aaf8 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -14,8 +14,6 @@ import * as AllExamples from 'examples';

{frontmatter.description}

- - @@ -27,24 +25,22 @@ The currently shown slide can also be changed using the left/right arrow keys or ## Usage +### Controlled State + Carousels can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. -The subcomponents can be used outside of Carousel. The following example shows how `Carousel.DotsList` can be used without the `Carousel` component. Clicking on the right half of the slide will advance the carousel to the next slide, whereas clicking on the left half will go to the previous slide. +### Only Dots + +`Carousel.DotsList` can be used without the `Carousel` component. Clicking on the right half of the slide will advance the carousel to the next slide, whereas clicking on the left half will go to the previous slide. -## Props - -Properties table is to be defined. - - - ## Subcomponents This component uses a composition approach so it should be used with the provided subcomponents. @@ -76,3 +72,9 @@ The `Carousel.DotsList` component shows a list of `Carousel.Dot` components whic `Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of `Carousel.Dots`. + +## Props + +Properties table is to be defined. + + From 2faab585d27b67357d60a56133a42c6e8546aab5 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 6 Nov 2023 16:58:51 -0500 Subject: [PATCH 02/32] moving props back to original place. --- apps/website/src/pages/docs/carousel.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 078dce6aaf8..a01dc97ae74 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -41,6 +41,12 @@ Carousels can be controlled externally by using the properties `activeSlideIndex +## Props + +Properties table is to be defined. + + + ## Subcomponents This component uses a composition approach so it should be used with the provided subcomponents. @@ -72,9 +78,3 @@ The `Carousel.DotsList` component shows a list of `Carousel.Dot` components whic `Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of `Carousel.Dots`. - -## Props - -Properties table is to be defined. - - From 6498fb93e42a6b9efdc7d1ae2ba92d1c2f156a46 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 6 Nov 2023 17:00:06 -0500 Subject: [PATCH 03/32] Updated Carousel.DotsList text. Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index a01dc97ae74..9d069155682 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -35,7 +35,7 @@ Carousels can be controlled externally by using the properties `activeSlideIndex ### Only Dots -`Carousel.DotsList` can be used without the `Carousel` component. Clicking on the right half of the slide will advance the carousel to the next slide, whereas clicking on the left half will go to the previous slide. +`Carousel.DotsList` can be used without the `Carousel` component. Here is an example to demonstrate this where clicking on the right/left half of the slide will go one slide forward/backward. From 0bded06f4ea742c53a5394920c81dfe258e538e2 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 6 Nov 2023 17:01:41 -0500 Subject: [PATCH 04/32] updated subcomponets text. --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index a01dc97ae74..eb777cb0888 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -49,7 +49,7 @@ Properties table is to be defined. ## Subcomponents -This component uses a composition approach so it should be used with the provided subcomponents. +This component uses a composition approach, similar to most of the other components. ### Slider From 9f2cff3af537d0f57fa61cc7dde35496d7bdd285 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 7 Nov 2023 09:18:11 -0500 Subject: [PATCH 05/32] updated text. --- apps/website/src/pages/docs/carousel.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 18c6080ca0a..9c9f5fbf927 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -19,7 +19,7 @@ import * as AllExamples from 'examples'; The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is -located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides. +located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device. @@ -27,7 +27,7 @@ The currently shown slide can also be changed using the left/right arrow keys or ### Controlled State -Carousels can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. +By default, the carousel maintain their own state. it can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. From e141ca8dd6dd45c963d94a5afe518fe06a151075 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:29:35 -0500 Subject: [PATCH 06/32] Fixed comments. --- apps/website/src/pages/docs/carousel.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 9c9f5fbf927..95ed26f5e1e 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -19,7 +19,7 @@ import * as AllExamples from 'examples'; The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is -located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. +located below the slides, consisting of "dots" ([Carousel.DotsList](#dots-list)) and "previous"/"next" ([Carousel.Navigation](#navigation)) buttons, used for changing slides. The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device. @@ -27,7 +27,7 @@ The currently shown slide can also be changed using the left/right arrow keys or ### Controlled State -By default, the carousel maintain their own state. it can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. +By default, the carousel maintains its own state. It can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. @@ -43,8 +43,6 @@ By default, the carousel maintain their own state. it can be controlled external ## Props -Properties table is to be defined. - ## Subcomponents From 57033cd76a18f409741132be25fce6150724dfaa Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Wed, 8 Nov 2023 10:56:20 -0500 Subject: [PATCH 07/32] Updated controlled state text. Co-authored-by: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 95ed26f5e1e..d6ba03f8466 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -27,7 +27,7 @@ The currently shown slide can also be changed using the left/right arrow keys or ### Controlled State -By default, the carousel maintains its own state. It can be controlled externally by using the properties `activeSlideIndex` and `onSlideChange`. +By default, the carousel maintains its own state. But it can also be controlled externally using `activeSlideIndex` and `onSlideChange`. From 09f001db5d6f2eb13d1dac9c5814be89fcb04221 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Wed, 8 Nov 2023 14:06:03 -0500 Subject: [PATCH 08/32] Fixed comment related to adding info about order. --- apps/website/src/pages/docs/carousel.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 95ed26f5e1e..2cabd6afbd0 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -61,13 +61,13 @@ This component uses a composition approach, similar to most of the other compone ### Navigation -The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right, and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section. +The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. The navigation section must be present before the slides in DOM order.`children` can be specified to override what is shown in this navigation section. ### Dots List -The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. +The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. It must be present before the slides in DOM order. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. From c805eafac6a5373262abd0953f76e788e0083717 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Wed, 8 Nov 2023 14:39:59 -0500 Subject: [PATCH 09/32] Added important paragraph. --- apps/website/src/pages/docs/carousel.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 7b3ba943064..24e66f7a9ea 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -61,13 +61,17 @@ This component uses a composition approach, similar to most of the other compone ### Navigation -The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. The navigation section must be present before the slides in DOM order.`children` can be specified to override what is shown in this navigation section. +The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section. + +**Important**: The navigation section must always be present before the slides in DOM order. ### Dots List -The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. It must be present before the slides in DOM order. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. +The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. + +**Important**: The component must always be present before the slides in DOM order. From 65d864de067c2a2ee7b156822cea0930f72a3421 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 9 Nov 2023 10:03:22 -0500 Subject: [PATCH 10/32] Updated Carousel component text. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 24e66f7a9ea..d615d75d7cb 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -19,7 +19,7 @@ import * as AllExamples from 'examples'; The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is -located below the slides, consisting of "dots" ([Carousel.DotsList](#dots-list)) and "previous"/"next" ([Carousel.Navigation](#navigation)) buttons, used for changing slides. +located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device. From 66c7052a7595cb2f5141c495e3d5081c1e392a10 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:10:18 -0500 Subject: [PATCH 11/32] Updated and rearranged text related to comments, --- apps/website/src/pages/docs/carousel.mdx | 27 ++++++++++++------------ 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 24e66f7a9ea..186e3ab2f99 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -18,13 +18,14 @@ import * as AllExamples from 'examples'; -The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is -located below the slides, consisting of "dots" ([Carousel.DotsList](#dots-list)) and "previous"/"next" ([Carousel.Navigation](#navigation)) buttons, used for changing slides. +The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of "dots" ([Carousel.DotsList](#carouseldotslist)) and "previous"/"next" ([Carousel.Navigation](#carouselnavigation)) buttons, used for changing slides. -The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device. + ## Usage +By default, the usage of all subcomponents is not mandatory. We have taken extra care to reduce verbosity while designing the Carousel API. + ### Controlled State By default, the carousel maintains its own state. But it can also be controlled externally using `activeSlideIndex` and `onSlideChange`. @@ -41,25 +42,21 @@ By default, the carousel maintains its own state. But it can also be controlled -## Props - - - ## Subcomponents This component uses a composition approach, similar to most of the other components. -### Slider +### Carousel.Slider `Carousel.Slider` is the scrollable list that should consist of `Carousel.Slide` components. -### Slide +### Carousel.Slide `Carousel.Slide` is used for the actual slide content. The content can be specified through `children`. It is recommended that the slide content bring its own dimensions (esp. height) and that the dimensions should be the same for all slides. -### Navigation +### Carousel.Navigation The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section. @@ -67,16 +64,20 @@ The `Carousel.Navigation` component by default consists of the `PreviousButton` -### Dots List +### Carousel.DotsList The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. -**Important**: The component must always be present before the slides in DOM order. +**Important**: The `Carousel.DotsList` component must always be present before the slides in DOM order. In addition, this subcomponent is optional and can also be used standalone. -### Dot +### Carousel.Dot `Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of `Carousel.Dots`. + +## Accessibility + +The `Carousel` component is designed to provide visually appealing user interface for users with disabilities. Users can navigate through the carousel using the arrow keys (Left/Right) or by dragging on a touch screen device. From 03dfeb409234eb6597d1bb1f96a99e8c9e8dcfdd Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:05:41 -0500 Subject: [PATCH 12/32] Updated Carousel.DotsList text. --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 186e3ab2f99..e14fe3c9631 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -68,7 +68,7 @@ The `Carousel.Navigation` component by default consists of the `PreviousButton` The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. -**Important**: The `Carousel.DotsList` component must always be present before the slides in DOM order. In addition, this subcomponent is optional and can also be used standalone. +**Important**: When used standalone, this component must always be present before the slides in DOM order. From b53ce01a457a83c12f5d8d0fbe5f78569a57a06f Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:12:22 -0500 Subject: [PATCH 13/32] updated carousel main text. --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index e14fe3c9631..dca3be534cf 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -18,7 +18,7 @@ import * as AllExamples from 'examples'; -The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of "dots" ([Carousel.DotsList](#carouseldotslist)) and "previous"/"next" ([Carousel.Navigation](#carouselnavigation)) buttons, used for changing slides. +The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. From ef86b34161bf20210fd5d9493eb17769d514ed1f Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:21:08 -0500 Subject: [PATCH 14/32] updated subcomponents text. --- apps/website/src/pages/docs/carousel.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index dca3be534cf..e65ef5d5eae 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -24,8 +24,6 @@ The Carousel component consists of a set of slides, normally displayed one at a ## Usage -By default, the usage of all subcomponents is not mandatory. We have taken extra care to reduce verbosity while designing the Carousel API. - ### Controlled State By default, the carousel maintains its own state. But it can also be controlled externally using `activeSlideIndex` and `onSlideChange`. @@ -44,7 +42,7 @@ By default, the carousel maintains its own state. But it can also be controlled ## Subcomponents -This component uses a composition approach, similar to most of the other components. +This component uses a composition approach, similar to most of the other components. The usage of all subcomponents is not mandatory. We have taken extra care to reduce verbosity while designing the Carousel API. ### Carousel.Slider From 524a65d3cc592ed4e82be3bbbc11b06a16609b1c Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:59:30 -0500 Subject: [PATCH 15/32] Moved carousel props to bottom? --- apps/website/src/pages/docs/carousel.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index e65ef5d5eae..c7fbc47cf41 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -20,8 +20,6 @@ import * as AllExamples from 'examples'; The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. - - ## Usage ### Controlled State @@ -79,3 +77,7 @@ The `Carousel.DotsList` component shows a list of `Carousel.Dot` components whic ## Accessibility The `Carousel` component is designed to provide visually appealing user interface for users with disabilities. Users can navigate through the carousel using the arrow keys (Left/Right) or by dragging on a touch screen device. + +## Props + + From 8a7bf2cbcd437ea2d0261c67df8af4e6fca877f3 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 20 Nov 2023 13:56:06 -0500 Subject: [PATCH 16/32] Update accessibility text. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index c7fbc47cf41..3234868f2a7 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -76,7 +76,13 @@ The `Carousel.DotsList` component shows a list of `Carousel.Dot` components whic ## Accessibility -The `Carousel` component is designed to provide visually appealing user interface for users with disabilities. Users can navigate through the carousel using the arrow keys (Left/Right) or by dragging on a touch screen device. +The `Carousel` component is built with accessibility in mind and tested to work well with different input modalities. It includes support for keyboard users and touch-screen users. + +The component is loosely based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), where the dots are considered to be "tabs" and the slides are considered to be "panels". For this reason, it is important that the dots (navigation section) is present before the slides in DOM order. + +When a slide is changed, all inactive slides will become ["inert"](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) so that they cannot be interacted with by users of assistive technology. + +Lastly, the carousel does not support auto-rotating slides, because that can lead to many different [accessibility](https://www.boia.org/blog/carousels-and-accessibility-7-tips) and [usability](https://www.nngroup.com/articles/auto-forwarding/) issues. We do _not_ recommend implementing your own auto-rotating carousel unless you have done extensive research and testing with users (including users with disabilities). ## Props From dc75acc90ca4a0b29981fa4accc2e8cc559aec82 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 20 Nov 2023 13:57:33 -0500 Subject: [PATCH 17/32] Updating subcomponents text. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 3234868f2a7..389ab43aadc 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -40,7 +40,7 @@ By default, the carousel maintains its own state. But it can also be controlled ## Subcomponents -This component uses a composition approach, similar to most of the other components. The usage of all subcomponents is not mandatory. We have taken extra care to reduce verbosity while designing the Carousel API. +Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. ### Carousel.Slider From 46ce2669ebbfe9bada88ff3fbd91f9f4c899056a Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 20 Nov 2023 14:12:24 -0500 Subject: [PATCH 18/32] removed onlyDots example and heading. --- apps/website/src/pages/docs/carousel.mdx | 10 +-- examples/Carousel.onlyDots.tsx | 90 ------------------------ examples/index.tsx | 4 -- 3 files changed, 1 insertion(+), 103 deletions(-) delete mode 100644 examples/Carousel.onlyDots.tsx diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 389ab43aadc..d8db0d66750 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -30,14 +30,6 @@ By default, the carousel maintains its own state. But it can also be controlled -### Only Dots - -`Carousel.DotsList` can be used without the `Carousel` component. Here is an example to demonstrate this where clicking on the right/left half of the slide will go one slide forward/backward. - - - - - ## Subcomponents Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. @@ -64,7 +56,7 @@ The `Carousel.Navigation` component by default consists of the `PreviousButton` The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. -**Important**: When used standalone, this component must always be present before the slides in DOM order. +**Important**: When used standalone, this component must always be present before the slides in DOM order. It is also important to pay close attention to [accessibility](#accessibility), since you may be missing some parts that make the carousel pattern complete. For this reason, we do not recommend diverging from the standard usage unless you have a very strong need and are confident that you can implement it accessibly. diff --git a/examples/Carousel.onlyDots.tsx b/examples/Carousel.onlyDots.tsx deleted file mode 100644 index 1be94bff535..00000000000 --- a/examples/Carousel.onlyDots.tsx +++ /dev/null @@ -1,90 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Bentley Systems, Incorporated. All rights reserved. - * See LICENSE.md in the project root for license terms and full copyright notice. - *--------------------------------------------------------------------------------------------*/ -import * as React from 'react'; -import { Carousel } from '@itwin/itwinui-react'; - -export default () => { - const gradients = [ - { from: '#cc2b5e', to: '#753a88' }, - { from: '#00467f', to: '#a5cc82' }, - { from: '#2193b0', to: '#6dd5ed' }, - { from: '#ffe000', to: '#799f0c' }, - { from: '#e65c00', to: '#f9d423' }, - { from: '#1488cc', to: '#2b32b2' }, - { from: '#bbd2c5', to: '#536976' }, - { from: '#9796f0', to: '#fbc7d4' }, - { from: '#b79891', to: '#94716b' }, - { from: '#acb6e5', to: '#86fde8' }, - ]; - - const id = 'my-custom-carousel'; - const [current, setCurrent] = React.useState(0); - - return ( -
{ - const diff = key === 'ArrowRight' ? 1 : key === 'ArrowLeft' ? -1 : 0; - setCurrent( - (prev) => (gradients.length + prev + diff) % gradients.length, - ); - }} - style={{ display: 'inline-grid', width: 'min(200px, 50vw)' }} - > - setCurrent(_i)} - style={{ justifySelf: 'center', maxWidth: 'min(200px, 50vw)' }} - /> -
- {gradients.map(({ from, to }, index) => ( -
{ - const diff = clientWidth - offsetX > clientWidth / 2 ? -1 : +1; - setCurrent( - (prev) => (gradients.length + prev + diff) % gradients.length, - ); - }} - style={{ - gridArea: 'slide', - opacity: current === index ? 1 : 0, - pointerEvents: current === index ? 'auto' : 'none', - transition: 'opacity 0.5s', - cursor: 'pointer', - }} - > -
- {index + 1} -
-
- ))} -
-
- ); -}; diff --git a/examples/index.tsx b/examples/index.tsx index bac4b6721d1..5ac809c49c9 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -224,10 +224,6 @@ const CarouselControlledExample = withThemeProvider( ); export { CarouselControlledExample }; -import { default as CarouselOnlyDotsExampleRaw } from './Carousel.onlyDots'; -const CarouselOnlyDotsExample = withThemeProvider(CarouselOnlyDotsExampleRaw); -export { CarouselOnlyDotsExample }; - // ---------------------------------------------------------------------------- import { default as CheckboxMainExampleRaw } from './Checkbox.main'; From 0a3ec6b878dca20246a92002246e4f861b666f00 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:20:31 -0500 Subject: [PATCH 19/32] Added static example. --- apps/website/src/pages/docs/carousel.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index d8db0d66750..3b2df04a08b 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -20,6 +20,19 @@ import * as AllExamples from 'examples'; The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. +The Carousel component is made up of [customizable subcomponents](#component-api). Here's what the basic usage looks like: + +````tsx + + + + … + … + … + + +> ``` + ## Usage ### Controlled State @@ -79,3 +92,4 @@ Lastly, the carousel does not support auto-rotating slides, because that can lea ## Props +```` From 1bd6e580e425d5c0f459341c4def03a15456464f Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:28:54 -0500 Subject: [PATCH 20/32] removed props heading & shifted accessibility section. --- apps/website/src/pages/docs/carousel.mdx | 41 ++++++++++++------------ 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 3b2df04a08b..4479f6ad212 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -22,16 +22,16 @@ The Carousel component consists of a set of slides, normally displayed one at a The Carousel component is made up of [customizable subcomponents](#component-api). Here's what the basic usage looks like: -````tsx +```tsx - + … … … - - -> ``` + + +``` ## Usage @@ -43,7 +43,21 @@ By default, the carousel maintains its own state. But it can also be controlled -## Subcomponents +## Accessibility + +The `Carousel` component is built with accessibility in mind and tested to work well with different input modalities. It includes support for keyboard users and touch-screen users. + +The component is loosely based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), where the dots are considered to be "tabs" and the slides are considered to be "panels". For this reason, it is important that the dots (navigation section) is present before the slides in DOM order. + +When a slide is changed, all inactive slides will become ["inert"](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) so that they cannot be interacted with by users of assistive technology. + +Lastly, the carousel does not support auto-rotating slides, because that can lead to many different [accessibility](https://www.boia.org/blog/carousels-and-accessibility-7-tips) and [usability](https://www.nngroup.com/articles/auto-forwarding/) issues. We do _not_ recommend implementing your own auto-rotating carousel unless you have done extensive research and testing with users (including users with disabilities). + +## Component API + +### Carousel + + Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. @@ -78,18 +92,3 @@ The `Carousel.DotsList` component shows a list of `Carousel.Dot` components whic `Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of `Carousel.Dots`. - -## Accessibility - -The `Carousel` component is built with accessibility in mind and tested to work well with different input modalities. It includes support for keyboard users and touch-screen users. - -The component is loosely based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), where the dots are considered to be "tabs" and the slides are considered to be "panels". For this reason, it is important that the dots (navigation section) is present before the slides in DOM order. - -When a slide is changed, all inactive slides will become ["inert"](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) so that they cannot be interacted with by users of assistive technology. - -Lastly, the carousel does not support auto-rotating slides, because that can lead to many different [accessibility](https://www.boia.org/blog/carousels-and-accessibility-7-tips) and [usability](https://www.nngroup.com/articles/auto-forwarding/) issues. We do _not_ recommend implementing your own auto-rotating carousel unless you have done extensive research and testing with users (including users with disabilities). - -## Props - - -```` From aff0b290085e87a3263a92bf2216705b5afce065 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:09:21 -0500 Subject: [PATCH 21/32] removed placeholder import. --- apps/website/src/pages/docs/carousel.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 4479f6ad212..13ec95ee19d 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -9,7 +9,6 @@ group: core import PropsTable from '~/components/PropsTable.astro'; import LiveExample from '~/components/LiveExample.astro'; -import Placeholder from '~/components/Placeholder.astro'; import * as AllExamples from 'examples';

{frontmatter.description}

From 4d0026c237990e515361afc6e4a3868f2d6b8d05 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:12:56 -0500 Subject: [PATCH 22/32] Updated fragment links. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 13ec95ee19d..38569f53db7 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -17,7 +17,7 @@ import * as AllExamples from 'examples'; -The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#dots-list) and ["previous"/"next"](#navigation) buttons, used for changing slides. +The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#carouseldotslist) and ["previous"/"next"](#carouselnavigation) buttons, used for changing slides. The Carousel component is made up of [customizable subcomponents](#component-api). Here's what the basic usage looks like: From 8d6d4fba99b80b1c7c665832b6d42a12087d55a5 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:16:32 -0500 Subject: [PATCH 23/32] replacing propspath variable to inline. --- apps/website/src/pages/docs/carousel.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 38569f53db7..dcfb60be854 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -2,7 +2,6 @@ title: Carousel description: A slideshow component for cycling through elements. layout: ./_layout.astro -propsPath: '@itwin/itwinui-react/esm/core/Carousel/Carousel.d.ts' thumbnail: Carousel group: core --- @@ -56,7 +55,7 @@ Lastly, the carousel does not support auto-rotating slides, because that can lea ### Carousel - + Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. From b907ae653acbf9820f4f437398b4b70281b6dff1 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:22:20 -0500 Subject: [PATCH 24/32] moving text under carousel and usage sub heading, --- apps/website/src/pages/docs/carousel.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index dcfb60be854..cf34b921159 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -16,6 +16,8 @@ import * as AllExamples from 'examples'; +## Usage + The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#carouseldotslist) and ["previous"/"next"](#carouselnavigation) buttons, used for changing slides. The Carousel component is made up of [customizable subcomponents](#component-api). Here's what the basic usage looks like: @@ -31,8 +33,6 @@ The Carousel component is made up of [customizable subcomponents](#component-api ``` -## Usage - ### Controlled State By default, the carousel maintains its own state. But it can also be controlled externally using `activeSlideIndex` and `onSlideChange`. @@ -55,10 +55,10 @@ Lastly, the carousel does not support auto-rotating slides, because that can lea ### Carousel - - Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. + + ### Carousel.Slider `Carousel.Slider` is the scrollable list that should consist of `Carousel.Slide` components. From d364d81a19adf5ba6a67c9952c0cfa64a5126a31 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:55:08 -0500 Subject: [PATCH 25/32] text moved related to comments. --- apps/website/src/pages/docs/carousel.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index cf34b921159..71a150e91b1 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -16,10 +16,10 @@ import * as AllExamples from 'examples'; -## Usage - The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is located below the slides, consisting of ["dots"](#carouseldotslist) and ["previous"/"next"](#carouselnavigation) buttons, used for changing slides. +## Usage + The Carousel component is made up of [customizable subcomponents](#component-api). Here's what the basic usage looks like: ```tsx @@ -53,9 +53,11 @@ Lastly, the carousel does not support auto-rotating slides, because that can lea ## Component API +Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. + ### Carousel -Carousel exposes the following subcomponents. The usage of all subcomponents is not mandatory; some of them (e.g. `Carousel.Navigation`) will automatically include recommended children and props by default. +`Carousel` is the main component that orchestrates all other sub-components and maintains the overall state. From 80207efa9d77f712fc72afd5b2444a4af884e3a6 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 13:08:49 -0500 Subject: [PATCH 26/32] Updated Carousel.DotsList Text. --- apps/website/src/pages/docs/carousel.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 71a150e91b1..ef8bee14370 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -81,9 +81,11 @@ The `Carousel.Navigation` component by default consists of the `PreviousButton` ### Carousel.DotsList -The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. The props can be specified if this component is being used outside `Carousel`. `children` can be specified to override the individual dots that are shown. +The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. -**Important**: When used standalone, this component must always be present before the slides in DOM order. It is also important to pay close attention to [accessibility](#accessibility), since you may be missing some parts that make the carousel pattern complete. For this reason, we do not recommend diverging from the standard usage unless you have a very strong need and are confident that you can implement it accessibly. +If used as a descendant of `Carousel`, then this component does not need any props or `children`. `children` can be specified to override the individual dots that are shown. The props can be specified if this component is being used standalone (outside `Carousel`). + +When used standalone, it is important to pay close attention to [accessibility](#accessibility), since you may be missing some parts that make the carousel pattern complete. For this reason, we do not recommend diverging from the standard usage unless you have a very strong need and are confident that you can implement it accessibly. From 10a70f45ced4b94cd682c8910c6b6c0fe965f7fa Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 13:38:46 -0500 Subject: [PATCH 27/32] Added sub heading for previous and next button. --- apps/website/src/pages/docs/carousel.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index ef8bee14370..fa0996dfd2e 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -79,6 +79,14 @@ The `Carousel.Navigation` component by default consists of the `PreviousButton` +### Carousel.Navigation.PreviousButton + +The `Carousel.Navigation.PreviousButton` component facilitates navigation to the previous slide in the carousel. + +### Carousel.Navigation.NextButton + +The `Carousel.Navigation.NextButton` component enables navigation to the next slide in the carousel. + ### Carousel.DotsList The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. From 44154fb6cfd0aa4792bdaf8200d1563a1eb4499c Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:40:34 -0500 Subject: [PATCH 28/32] Added fragment link for Carousel.Slide. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index fa0996dfd2e..8023efc1aba 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -63,7 +63,7 @@ Carousel exposes the following subcomponents. The usage of all subcomponents is ### Carousel.Slider -`Carousel.Slider` is the scrollable list that should consist of `Carousel.Slide` components. +`Carousel.Slider` is the scrollable list that should consist of [`Carousel.Slide`](#carouselslide) components. ### Carousel.Slide From be6e036bc6c17ab465e8775be3831ef0bc4c2684 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:41:14 -0500 Subject: [PATCH 29/32] Added fragment link for Carousel.Dot Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 8023efc1aba..6a1ec73a7ec 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -89,7 +89,7 @@ The `Carousel.Navigation.NextButton` component enables navigation to the next sl ### Carousel.DotsList -The `Carousel.DotsList` component shows a list of `Carousel.Dot` components which can be used to choose a specific slide. +The `Carousel.DotsList` component shows a list of [`Carousel.Dot`](#carouseldot) components which can be used to choose a specific slide. If used as a descendant of `Carousel`, then this component does not need any props or `children`. `children` can be specified to override the individual dots that are shown. The props can be specified if this component is being used standalone (outside `Carousel`). From 230c30444af1e25f435ef6c57dbc9a59ba4496c2 Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:42:36 -0500 Subject: [PATCH 30/32] Updated link for navigation heading. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index 6a1ec73a7ec..fb8ad558273 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -73,7 +73,7 @@ Carousel exposes the following subcomponents. The usage of all subcomponents is ### Carousel.Navigation -The `Carousel.Navigation` component by default consists of the `PreviousButton` and `NextButton` shown on the left and right and the `Carousel.DotsList` component shown in the middle. `children` can be specified to override what is shown in this navigation section. +The `Carousel.Navigation` component by default consists of the [`PreviousButton`](#carouselnavigationpreviousbutton) and [`NextButton`](#carouselnavigationnextbutton) shown on the left and right and the [`Carousel.DotsList`](#carouseldotslist) component shown in the middle. `children` can be specified to override what is shown in this navigation section. **Important**: The navigation section must always be present before the slides in DOM order. From 73bc974d29806d077c0831fc0e0b6f3885f72fcb Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:45:50 -0500 Subject: [PATCH 31/32] Updated Carousel.Dot text. Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com> --- apps/website/src/pages/docs/carousel.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/carousel.mdx b/apps/website/src/pages/docs/carousel.mdx index fb8ad558273..ce10c1ae621 100644 --- a/apps/website/src/pages/docs/carousel.mdx +++ b/apps/website/src/pages/docs/carousel.mdx @@ -99,6 +99,6 @@ When used standalone, it is important to pay close attention to [accessibility]( ### Carousel.Dot -`Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of `Carousel.Dots`. +`Carousel.Dot` is the actual "dot" component used to activate a slide on clicking. It should be used as a child of [`Carousel.DotsList`](#carouseldotslist). From 5e5a0b6e425828644e1f0279f42cb392771bf9bc Mon Sep 17 00:00:00 2001 From: Siddhant Rawal <128523557+siddhantrawal@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:18:09 -0500 Subject: [PATCH 32/32] updated jsdocs. --- packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx index 6fafe10f9fa..c24ffb58dc6 100644 --- a/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx +++ b/packages/itwinui-react/src/core/Carousel/CarouselDotsList.tsx @@ -35,11 +35,11 @@ type CarouselDotsListProps = { * @example * * // ... - * + * * * * @example - *