Component: Popover

[krmarko]

Popover

Description

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• [List all inputs into the component]
• [e.g. @attr public paused: boolean | false]

Outputs

• [List all outputs from the component]

Events

• [List all inputs into the component]

Slots

• [List all named and unnamed slots for the component]
• [e.g. Indeterminate: The slot for a custom indeterminate indicator]

CSS Variables

• [Any component-specific CSS variables that allow the user to change the appearance of the component]

Accessibility

• [ ] Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
• [ ] Are there any accessibility elements unique to this component?
• [ ] List ARIA attributes
  • [ ] ARIA attribute
• [ ] Does the component support 400% zoom?

Preparation

• [ ] Find the base FAST Component this component will inherit from and document
  • No FAST component available
• [ ] Check the Fluent UI React V9 Component Spec for differences and document
  • Difference 1
• [ ] Fluent UI React V9 Storybook for implementation differences and document
  • Difference 1
• [ ] Open GitHub issues related to component
  • [link to each issue]
• [ ] (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• [ ] Component Spec authored and reviewed

Implementation

• [ ] Initial conformance and unit tests (validate basic functionality)
• [ ] Initial documentation
  • [ ] Storybook stories
  • [ ] README.md covering basic usage
• [ ] Component released as unstable from @fluentui/web-components/unstable
• [ ] Uses design tokens for styling
• [ ] Renders correctly in High Contrast mode

Validation

• [ ] Add tests
  • [ ] Unit and conformance tests
  • [ ] Bundle size fixtures
  • [ ] Performance test scenario
  • [ ] Accessibility behavior tests
  • [ ] Create an issue and run manual accessibility tests: [link to issue]
• [ ] Validate with partners
• [ ] Finalize documentation
  • [ ] Review and add any missing storybook stories
  • [ ] Finalize migration guide
  • [ ] 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"

[krmarko]

.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[gouttierre]

📢"Michael on Ryan's team has started the implementations (taken over from Miro) and should resume in the new sprint. The spec has already been reviewed with Chris and his team."

[gouttierre]

📢"on track with development. Michael is working on the draft PR this week, or next for folks to take a look at."

[gouttierre]

📢

• Chris had the developers look at this in their repo. Chris is working with Michael on a suggested spec. ETA moved out to EOM. - @procload , @chrisdholt

[JustSlone]

In progress, @chrisdholt work on. Question? is this an element itself or a mixin for other controls.

[gouttierre]

📢

• Chris reported that the team has made progress on the popover component by refactoring the menu to utilize popover with absolute positioning. This has resulted in significant improvements, although the assignment of the task remains uncertain, with the possibility of it being delegated to another team member depending on the duration of the polyfill PR

cc @chrisdholt , @procload

[gouttierre]

📢

• Chris Holt is waiting for a PR in a Polyfill to be merged.
• Post that PR being merged the team could probably move the component into preview, but it won't work in non chromium browsers.
• Chris doesn't want to have a shadow root for popover. He is currently focusing on the details of Tooltip implementation. The plan is to identify elements common with the Popover API and consolidate them into a unified class.

cc @chrisdholt , @procload

[gouttierre]

📢

• Chris Holt is waiting for a PR in a Polyfill to be merged.
• Team will prioritizing the tooltip and then will do the popover abstraction

cc @chrisdholt , @procload