Carousel

[paulgildea]

💡 When you create a PR for any of the checklist items, add a link to this Epic under the PR's Related Issues section.

Preparation

• Open UI Research
  • [link to https://open-ui.org/]
• Open GitHub issues related to component
  • [link to each issue]
• Create react-* package and component from template
  • [link to package: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-(your-component)]
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored and reviewed

Implementation

• Component implementation
• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
  • MIGRATION.md guide (include v8 and v0)
• Component released as unstable from @fluentui/react-components/unstable

Validation

• Add tests
  • Unit and conformance tests
  • VR tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue(https://github.com/[Carousel] Manual Accessibility Checklist #32863)]
• Validate with partners
• Run a bug bash with other FUI crews
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
• Component released as stable from @fluentui/react-components
  • Ensure exports are removed from from @fluentui/react-components/unstable
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

[briandrouin]

Design contact: Karina

Will likely begin in December. There are currently numerous ADO tasks for Carousel, Brian to align with Karina to consolidate (identify duplicates) & track most appropriately.

[gouttierre]

📢"A teams chat was started. Start to follow up with partners.

• Office.com/Harmony - for their home page experience
• Any new App Start page work coming out of the WXP - Pri 4 shown at the last MBR.

Karina is the design support but has limited bandwidth until December. Kari wants to hold until we are clear on who will lead this."

[gouttierre]

📢"Jhonatan started the design spec, and Karina will take over the work only in the December Sprint."

[briandrouin]

Karina to meet with Jhonatan to try and carry out Carousel work by EOY. @briandrouin to work with karina to consolidate ADO tasks.

[gouttierre]

📢 "A lot of the initial design work was done by Jhonatan. Karina will be taking over the rest of the work going forward. Karina will be tackling both Coachmark and Carousel’s design spec in unison during the December sprint. Brian will help clean up the associated ADO tasks. "

cc: @JustSlone we will need to allocate an engineer to this task

[gouttierre]

📢

• Karina has started looking at the spec. The component is being utilized in a few places FRE and TeachingPopover which helps design with investigating and pick out the functional pieces for further elaborations. The guidance has started already.
• Needs dev allocation.

[gouttierre]

📢
"Ben talked to Mitch and it sounds like he will be able to work on Carousel after he finishes with TeachingPopover."
cc @JustSlone , @tudorpopams , @behowell , @brandonthomas , @Mitch-At-Work

[gouttierre]

📢

• Karina is working on creating compound components as variants for the carousel and would like to chat further with the Viva Insights team about their designs. Viva Insights are following up on the carousel component designs and inquiring about the implementation plan and timeline.
• Karina has a 1:1 with Mitch to chat about carousel.
• Important for Teams to migrate end of Q3 (End of March)

[gouttierre]

📢

• Karina will look into the requirements for pause motion and how it affects the card design for BizChat
• Karina will work with Mitch to figure out the best way to build the carousel and provide logical variants for different scenarios
• Petar will send the design contact from their side to Karina
• Rares and Petar will try out the carousel component when it is ready and provide feedback

cc @Mitch-At-Work , @JustSlone , @tudorpopams , @micahgodbolt

[gouttierre]

📢

• Design said the guidance is done and she is working on the accessibility spec for complex cards (Karina) .
• Dev will start building the carousel as soon as teaching popover is in stable. (Mitch)

cc @Mitch-At-Work

[Mitch-At-Work]

We are updating TeachingPopover to use an independent Carousel - this logic can be moved to an independent Carousel component which will give us a head start on Carousel component while also keeping TeachingPopover aligned to new Carousel updates.

Hoping to land TeachingPopover this upcoming week, and then will immediately begin on Carousel unstable release - goal is to have an unstable component merged near the beginning of May, with stable release TBD.

[gouttierre]

We are updating TeachingPopover to use an independent Carousel - this logic can be moved to an independent Carousel component which will give us a head start on Carousel component while also keeping TeachingPopover aligned to new Carousel updates.

Hoping to land TeachingPopover this upcoming week, and then will immediately begin on Carousel unstable release - goal is to have an unstable component merged near the beginning of April, with stable release TBD.

➕ 📢

• Component is high priority for ZP and GPT work.

[gouttierre]

📢

• Discussed with Mitch and Ling. The ETA has been shifted by 2 weeks for Carousel to give the developers extra PR review time for TeachingPopover.
• The Carousel code should mostly be ready by moving over what the developers have in TeachingPopover.

cc @ling1726 , @Mitch-At-Work , @tudorpopams , @JustSlone , @miroslavstastny

[gouttierre]

📢

• According to Mitch, teams can use unstable by the 15th if they have urgent needs, but stable will take until the end of June.
• Mitch will work on adding features like peeking cards and animations for stable, but the core functionality is almost done.
• This week, Mitch plans to merge this PR that integrates the core functionality in unstable: Carousel: Buttons and Navigation by Mitch-At-Work · Pull Request #31249 · microsoft/fluentui (github.com)
• PM updated the ETA to Stable to end of June.

cc @JustSlone , @miroslavstastny , @ling1726 , @paulgildea , @tudorpopams , @Mitch-At-Work

[gouttierre]

📢

• The engineering team is almost done with a preview version.
• They have implemented the peeking cards feature and are now working on the motion and autoplay functionality.
• After that, they will create the React Storybooks stories/examples and help other teams adopt the component.
• Taking the remaining work left for the component; the ETA is shifted to July.

cc @brandonthomas , @Mitch-At-Work , @tudorpopams , @JustSlone , @paulgildea

[gouttierre]

📢

• The component is almost preview ready by engineering, but they found some challenges with the card animations that have peeking/loop features.
• They are working on improving the animation/placement logic, which will make the component easier to use and more adaptable. This
  approach will also allow Teams team to create the component scenarios to meet their use cases, if required. However, the team suggests following Design guidance for accessibility reasons which will be documented with the control.
• Mitch is aiming for July for stable, but will need a week to test and verify the new design before signing off to stable.

cc @jurokapsiar , @tudorpopams , @paulgildea , @Mitch-At-Work

[SuzanneTocco]

I am currently working on updating the Carousel design for Adaptive Cards. Design is due EOW. I wanted to check in to see if you have some visuals that I can look at (or any code we may be able to use).

My Figma

[gouttierre]

📢

• @SuzanneTocco is updating the Carousel design for Adaptive Cards. The design is due EOW. @Mitch-At-Work and Karina will take a look at the shared Figma
• Due to these complexities, there are further design aspects the team will need to reevaluate, leading to a postponement of the stable release until the end of July, with an additional month for validation. This means the new ETA for stable is tentatively set for the end of August.

cc @paulgildea , @tudorpopams , @Mitch-At-Work , @SuzanneTocco , @JustSlone , @jurokapsiar

[SuzanneTocco]

I have a few inquires before handing off the design spec. @Mitch-At-Work @gouttierre

1) Grey color token
What I see in your Figma for the "steppers" uses a transparency percentage. I do not believe this will work for High Contrast mode as the icon should be white (see my Interaction spec in my Figma).

2) Stepper padding
I see 8px called out between each as spacing. These are buttons I believe so I called out the padding for each in my Figma to match your spec. So they would have 4px to each side of the circle= 16px hit target. Also want to confirm that 16px is adequate for a touch target. And if so, there would be 8px between the buttons and steppers.

3) Selected page button
a) I added padding to this in my spec as well
b) Styling and behavior: Trying to understand how this is treated (is it an interactive button even though if you click on it nothing will happen or is it a static image, in which case would it take the disabled color in high contrast mode, etc?).

Also, please clarify which complexities you are referring to that is pushing this launch out, thanks

[gouttierre]

📢

• Mitch pushed out the public preview release so users can begin testing and working on remaining implementations.
• Mitch will update the carousel's touch target spacing and interaction colors based on Suz feedback.
• Mitch agreed to update High Contrast colors to all white based on Karina's guidance.
• Suz updated Figma to match Mitch's response regarding interaction styles.
• A meeting was scheduled for Thursday to discuss design specifications with David , Karina, and Suz .
• Mitch will send a demo recording on the public preview by next week.

cc @paulgildea , @JustSlone , @jurokapsiar , @SuzanneTocco , @Mitch-At-Work , @tudorpopams

[gouttierre]

📢

• Mitch has two PRs open: one for keyboard accessibility and another for button styles.
• After these PR's are merged, he'll conduct a bug bash and prepare for the stable release.
• The team is targeting the next two weeks to stable.

cc~ @Mitch-At-Work , @paulgildea , @tudorpopams , @JustSlone

[Mitch-At-Work]

Updating documentation task:
#32447

[gouttierre]

📢

• Currently; in bug bash with the teams.
• Lead engineer is finalizing Storybooks to match design spec options and updating docs.
• The finalizing Storybook PR will be fast-followed by the stabilization PR later this week.
• Lead engineer is aiming to finish before Friday, but there may be slight delays to get the PR out for stabilization [1-3 days]. Once the Stabilization PR is out; an alternative supporting developer must take over the stabilization PR while the lead engineering is out of the office.
• Team is targeting to get stable by next week [2nd week of September]

cc~ @paulgildea , @Mitch-At-Work , @tudorpopams , @JustSlone , @brandonthomas

[gouttierre]

📢

• The Carousel is nearing stability.
• Recently, two PRs were merged:

• Pull Request Carousel: Storybook updates and fixing exports/focus #32457 · microsoft/fluentui (github.com).
• Pull Request chore: cleanup react-carousel-preview #32475 · microsoft/fluentui (github.com).

• Developers will focus on the stabilization PR next.
• The estimated time of stable is by the EOF this week or EOF next week at the latest, barring any unforeseen issues.

cc @paulgildea , @micahgodbolt , @tudorpopams , @JustSlone , @Mitch-At-Work , @brandonthomas

[eikawata]

Hi, are we going to have slots for the left/right buttons and the navigation dots? We want to uptake this component, but our usage requires the dots to be positioned at the left and right sides of the cards, not at the bottom of the cards, so without a slot, we won't be able to render them into a different position.

[Mitch-At-Work]

Hi Eigo, We provide the CarouselNavContainer with currently approved layout variants as well as next/prev & root (CarouselNav) slots that can be overridden with custom props or styles. The composable nav components (CarouselNav/CarouselNavButton and CarouselButton) can also be used directly within the Carousel wrapper for further customized layout and functionality. Regards, Mitch.

…

________________________________