feat(web-components): add tablist by davatron5000 · Pull Request #32098 · microsoft/fluentui

davatron5000 · 2024-07-24T15:12:58Z

Previous Behavior

Current Tabs web component is an assembly of three components (-tabs, -tab, and -tabpanel) which is very explicit but very DOM heavy and doesn't easily support scenarios like ajax'ing in content.

New Behavior

This new Tablist component is more on par with the React implementation and is much simpler in its approach, providing only the-tab and -tablist components and allowing the consumer to react to the change event (when the active tab changes) as necessary.

fabricteam · 2024-07-24T15:19:30Z

📊 Bundle size report

✅ No changes found

fabricteam · 2024-07-24T15:25:21Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

packages/web-components/src/tablist/tablist.styles.ts

packages/web-components/src/tablist/tablist.stories.ts

eljefe223 · 2024-07-24T16:18:11Z

Should we be removing old / unused tabs and tab panel as part of this PR?

packages/web-components/src/tablist/tablist.template.ts

packages/web-components/src/tablist/tablist.ts

chrisdholt · 2024-07-24T17:01:26Z

General question - should our stories provide examples on how to wire up panels?

davatron5000 · 2024-07-24T17:17:58Z

Should we be removing old / unused tabs and tab panel as part of this PR?

@eljefe223 I talked with @chrisdholt about this yesterday and old-tabs will probably be removed/deprecated but it's probably worth doing outside of this commit since this is additive (non-breaking change) and removing tabs would potentially be a breaking change for some consumers.

General question - should our stories provide examples on how to wire up panels?

@chrisdholt I think we probably should. Storybook in its current form doesn't really allow us to show event handlers and extra script, but I'll see what I can do.

davatron5000 · 2024-07-24T23:38:17Z

RTL story and fully wired tabpanel story added to primary story in 10dc1f7.

To get these all working I needed to update the tablist class and base class...

$emit('change') when its done setting up the tabs
Run the animation loop after the tabsChanged change handler to set the correct positioning for the active animation. (Without doing this the animation would start at the far left)
Update the left/right arrows to be direction sensitive. This matches the React implementation.

And fwiw, the React implementation infinitely loops the roving index whereas the web component implementation stops at the end of the list. IIRC, looping back to the beginning/end is the expected behavior. This change could happen now or be an improvement later on if needed. Let me know what to do.

chrisdholt · 2024-07-25T16:03:31Z

RTL story and fully wired tabpanel story added to primary story in 10dc1f7.

To get these all working I needed to update the tablist class and base class...

$emit('change') when its done setting up the tabs

Run the animation loop after the tabsChanged change handler to set the correct positioning for the active animation. (Without doing this the animation would start at the far left)

Update the left/right arrows to be direction sensitive. This matches the React implementation.

And fwiw, the React implementation infinitely loops the roving index whereas the web component implementation stops at the end of the list. IIRC, looping back to the beginning/end is the expected behavior. This change could happen now or be an improvement later on if needed. Let me know what to do.

@davatron5000 Let's look to wire up the keyboard behavior to properly loop. There's likely a couple ways this could be done. There is a utility from @microsoft/fast-web-utilities, wrapInBounds() which might make it relatively simple: https://www.npmjs.com/package/@microsoft/fast-web-utilities#wrapinbounds

packages/web-components/src/tablist/tablist.styles.ts

packages/web-components/src/tablist/tablist.ts

packages/web-components/src/tablist/readme.md

packages/web-components/src/tablist/tablist.ts

eljefe223

pending any open comments being resolved.

chrisdholt · 2024-08-05T22:06:56Z

/azp run

azure-pipelines · 2024-08-05T22:07:14Z

Azure Pipelines successfully started running 4 pipeline(s).

* master: (48 commits) chore: migrate to storybook v7 (microsoft#32018) release: applying package updates - react-components ci: make public-docsite-v9 deploy pipeline work and make it faster (microsoft#32248) fix(Toolbar): hardcode size of `ToolbarButton` (microsoft#32185) chore: deprecate @fluentui/react-motion-preview (microsoft#32190) release: applying package updates - web-components docs: add wrapping menu item example to ContextualMenu docs (microsoft#31289) docs: update title of v8 keyboard-accessible drag & drop example, add docs (microsoft#32216) release: applying package updates - react-components fix: Card does not override specified focusMode based on event listeners (microsoft#32200) Fix undefined reference in older browsers in useMessageBarReflow (microsoft#32238) feat: Add transparent appearance to ToolbarButton (microsoft#32205) fix(react-tabs): ignore ref for tab reserved space content slot (microsoft#31775) fix(Dialog): do not require ref forwarding (microsoft#32095) feat: add verify-packaging to react v8 release pipeline (microsoft#32212) chore(web-components): remove type-check definition and follow repo target defaults for consistency and type-check speeds (microsoft#32208) chore(react-tree): improve ImmutableSet and ImmutableMap internal implementation (microsoft#32167) release: applying package updates - web-components feat(web-components): add tablist (microsoft#32098) release: applying package updates - react-components ...

davatron5000 added the web-components label Jul 24, 2024

davatron5000 requested a review from a team as a code owner July 24, 2024 15:12