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

• [x] Open UI Research
  • [link to https://open-ui.org/]
• [ ] Open GitHub issues related to component
  • [link to each issue]
• [x] Create react-* package and component from template
  • [link to package: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-(your-component)]
• [x] (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• [x] 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]
• [ ] 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