-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e414490
commit 4da01b9
Showing
149 changed files
with
597 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-carousel-6afdd01f-3f50-44e0-ba84-7d5289bdcbba.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "feat: Stable release react-carousel", | ||
| "packageName": "@fluentui/react-carousel", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
7 changes: 7 additions & 0 deletions
7
change/@fluentui-react-components-c730f2d8-5835-43c6-9c65-3d01ea110c42.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "feat: Stable release of react-carousel", | ||
| "packageName": "@fluentui/react-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 0 additions & 5 deletions
5
packages/react-components/react-carousel-preview/library/README.md
This file was deleted.
Oops, something went wrong.
106 changes: 0 additions & 106 deletions
106
packages/react-components/react-carousel-preview/library/docs/Spec.md
This file was deleted.
Oops, something went wrong.
17 changes: 0 additions & 17 deletions
17
packages/react-components/react-carousel-preview/stories/README.md
This file was deleted.
Oops, something went wrong.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...ts/react-carousel-preview/library/LICENSE → ...components/react-carousel/library/LICENSE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| @fluentui/react-carousel-preview | ||
| @fluentui/react-carousel | ||
|
|
||
| Copyright (c) Microsoft Corporation | ||
|
|
||
|
|
||
33 changes: 33 additions & 0 deletions
33
packages/react-components/react-carousel/library/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # @fluentui/react-carousel | ||
|
|
||
| **React Carousel components for [Fluent UI React](https://react.fluentui.dev/)** | ||
|
|
||
| A Carousel is a sliding viewport that enables a list of tab panels to be hidden offscreen while still remaining accessible via rotating controls or keyboard interactions. | ||
|
|
||
| For full screen banners, hidden cards will be set to inert and can be accessed via the underlying nav controls (prev/next/pagination), while smaller responsive CarouselCards can be explored with keyboard navigation (left/right arrow keys) and group focus (Enter/Esc) to void lengthy tabIndex sequences. | ||
|
|
||
| The React Carousel uses direct DOM manipulation to ensure that state can be updated without driving a react render cycle of the CarouselCards themselves, users may subscribe to visibility event callbacks or activeIndex supplied via context for updating local state on carousel movement. | ||
|
|
||
| A CarouselAnnouncer class is provided that will announce page changes when context is updated for accessibility users. | ||
|
|
||
| ## Sample Code | ||
|
|
||
| ```jsx | ||
| <Carousel groupSize={1} circular> | ||
| <CarouselSlider> | ||
| {Cards.map((card, index) => ( | ||
| <CarouselCard key={`image-${index}`} index={index}> | ||
| Card {index + 1} | ||
| </CarouselCard> | ||
| ))} | ||
| </CarouselSlider> | ||
| <CarouselNavContainer next={{ 'aria-label': 'go to next' }} prev={{ 'aria-label': 'go to prev' }}> | ||
| <CarouselNav>{index => <CarouselNavButton aria-label={`Carousel Nav Button ${index}`} />}</CarouselNav> | ||
| </CarouselNavContainer> | ||
| <CarouselAnnouncer> | ||
| {(currentIndex, totalSlides, _slideGroupList) => { | ||
| return `Slide ${currentIndex + 1} of ${totalSlides}`; | ||
| }} | ||
| </CarouselAnnouncer> | ||
| </Carousel> | ||
| ``` |
File renamed without changes.
File renamed without changes.
46 changes: 46 additions & 0 deletions
46
packages/react-components/react-carousel/library/docs/Migration.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| # Carousel Migration Guide | ||
|
|
||
| ## Migration from react-northstar | ||
|
|
||
| The northstar carousel utilized a single wrapper with data props, in v9, composable Carousel pieces can be used to fit together, the number, order and styles of CarouselCards within a CarouselSlider is what will drive the majority of Carousel logic, stored and accessed via context provided in the Carousel wrapper. | ||
|
|
||
| ### Prop mapping | ||
|
|
||
| - `items` prop => CarouselCard elements | ||
| - `navigation` on the control => CarouselNav/CarouselNavButton/CarouselButton are utilized independently for carousel control, this can also be overwritten externally via the controlled index props - a CarouselNavContainer is provided to simplify this process. | ||
|
|
||
| ### Example | ||
|
|
||
| #### northstar | ||
|
|
||
| ```jsx | ||
| <Carousel | ||
| navigation={{ | ||
| items: carouselItems.map((item, index) => ({ | ||
| key: item.id, | ||
| })), | ||
| }} | ||
| items={carouselItems} | ||
| /> | ||
| ``` | ||
|
|
||
| #### v9 | ||
|
|
||
| ```jsx | ||
| <Carousel> | ||
| <CarouselSlider> | ||
| {Cards.map((_cardProps, index) => ( | ||
| <CarouselCard> | ||
| Card {index + 1} | ||
| </BannerCard> | ||
| ))} | ||
| </CarouselSlider> | ||
| <CarouselNavContainer> | ||
| <CarouselNav>{index => <CarouselNavButton/>}</CarouselNav> | ||
| </CarouselNavContainer> | ||
| </Carousel> | ||
| ``` | ||
|
|
||
| ### Aria props | ||
|
|
||
| Aria props can be directly passed to their intended elements, or to sub-components via the slot props, a similar pattern to react-northstar aria should be implemented |
Oops, something went wrong.