Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Carousel: Storybook updates and fixing exports/focus #32457

Merged
merged 25 commits into from
Sep 11, 2024
Merged

Carousel: Storybook updates and fixing exports/focus #32457

merged 25 commits into from
Sep 11, 2024

Conversation

Mitch-At-Work
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work commented Sep 4, 2024 •
edited
Loading

Previous Behavior

  • Storybook was a basic default example
  • Focus was not updated by navigation when using tabster group for multiple cards
  • Some context classes missing from export
  • No container for nav elements
  • CarouselNav could not be used without a Carousel wrapper

New Behavior

  • CarouselNavContainer provides an easy layout system for nav components
  • Storybook updated to match more hi-fidelity designs
  • Initial focus is now set correctly on page change or external index control to prevent page jumping back to memoized item.
  • Added missing context classes to export list.
  • CarouselNav now accepts an override property for number of slides.
  • Prevented focus from getting stuck on disabled buttons or tabster elements.

Related Issue(s)

@Mitch-At-Work Mitch-At-Work requested review from a team and mltejera as code owners September 4, 2024 17:16
@fabricteam
Copy link
Collaborator

fabricteam commented Sep 4, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

mltejera
mltejera previously requested changes Sep 4, 2024
View reviewed changes
...ponents/react-carousel-preview/library/src/components/CarouselButton/CarouselButton.types.ts Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselDescription.md Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselDescription.md Outdated Show resolved Hide resolved
...t-carousel-preview/library/src/components/CarouselNavContainer/CarouselNavContainer.types.ts Show resolved Hide resolved
...react-components/react-carousel-preview/stories/src/Carousel/CarouselActionCards.stories.tsx Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselBestPractices.md Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/CarouselBestPractices.md Outdated Show resolved Hide resolved
...ct-components/react-carousel-preview/library/src/components/CarouselNav/CarouselNav.types.ts Outdated Show resolved Hide resolved
layershifter
layershifter requested changes Sep 5, 2024
View reviewed changes
...-preview/library/src/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.ts Outdated Show resolved Hide resolved
...view/library/src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/library/src/components/useEmblaCarousel.ts Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/CarouselNav/index.stories.tsx Outdated Show resolved Hide resolved
...act-components/react-carousel-preview/stories/src/CarouselNav/CarouselNavDefault.stories.tsx Outdated Show resolved Hide resolved
.../react-components/react-carousel-preview/stories/src/Carousel/CarouselResponsive.stories.tsx Outdated Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/index.stories.tsx Show resolved Hide resolved
...es/react-components/react-carousel-preview/stories/src/Carousel/CarouselImageBox.stories.tsx Show resolved Hide resolved
...react-components/react-carousel-preview/stories/src/Carousel/CarouselActionCards.stories.tsx Show resolved Hide resolved
packages/react-components/react-carousel-preview/stories/src/Carousel/index.stories.tsx Outdated Show resolved Hide resolved
@Mitch-At-Work
Copy link
Contributor Author

Two tasks left (to resolve tomorrow morning):

  • Setup test for custom tabster attribute
  • Autoplay/No Autoplay story (toggle?)

Mitch-At-Work and others added 2 commits September 6, 2024 13:53
@Mitch-At-Work @layershifter
Update packages/react-components/react-carousel-preview/library/src/c…
e85b869 
…omponents/useEmblaCarousel.ts

Co-authored-by: Oleksandr Fediashov <[email protected]>
@Mitch-At-Work
Fix
65a7a04
@layershifter layershifter merged commit 5a5fbd3 into microsoft:master Sep 11, 2024
18 checks passed
@gouttierre gouttierre mentioned this pull request Sep 11, 2024
Open
28 tasks
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 12, 2024
@marcosmoura
Merge branch 'master' into feat/tokens/add-zindexes
861193e 
* master: (77 commits)
  fix(react-drawer): update scroll state when children changes (microsoft#32818)
  feat(react-storybook-addon): improve addon to more readable names (microsoft#32815)
  chore: cleanup react-carousel-preview (microsoft#32475)
  feat(storybook): add rtl/ltr toggle storybook addon (microsoft#32814)
  Carousel: Storybook updates and fixing exports/focus (microsoft#32457)
  release: applying package updates - react v8
  release: applying package updates - web-components
  Update d3 dependency versions to 3.x.x and 4.x.x (microsoft#32463)
  RFC: Extended Design Tokens for Fluent UI React (microsoft#32058)
  update doc to reflect setTheme function change (microsoft#32490)
  fix (react-dialog): Use consistent rounding for clientHeight and innerHeight (microsoft#32480)
  fix(public-doscite-v9): global styles should not be applied to story elements (microsoft#32472)
  feat(workspace-plugin): implement verify-packaging executor (microsoft#32403)
  release: applying package updates - react-components
  Add strokeDasharray property when optimizeLargeData is true (microsoft#32494)
  fix(TreeItemLayout): Actions should not unmount between successive mouse events (microsoft#32477)
  release: applying package updates - react v8
  bugfix(react-tree): recover from tabIndex=-1 when TreeItem is removed (microsoft#32442)
  Fix onResolveSuggestions not being called after component is remounted in react 18 strict mode (microsoft#28227)
  fix(codeowners): update most packages owned by cxe-red with cxe-prg (microsoft#32445)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

@mltejera mltejera Awaiting requested review from mltejera

Assignees
No one assigned
Labels
Component: Carousel
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Carousel: Documentation
4 participants
@Mitch-At-Work @fabricteam @layershifter @mltejera