feat(web-components): add tablist #32098
Conversation
📊 Bundle size report✅ No changes found |
🕵 fluentui-web-components-v3 No visual regressions between this PR and main |
|
Should we be removing old / unused tabs and tab panel as part of this PR? |
|
General question - should our stories provide examples on how to wire up panels? |
@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.
@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. |
|
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...
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 |
davatron5000
force-pushed
the
feat/tablist
branch
2 times, most recently
from
cc1d9a8
to
e2a75db
Compare
davatron5000
force-pushed
the
feat/tablist
branch
from
e2a75db
to
23ef88b
Compare
|
/azp run |
|
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 ...
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
Tablistcomponent is more on par with the React implementation and is much simpler in its approach, providing only the-taband-tablistcomponents and allowing the consumer to react to thechangeevent (when the active tab changes) as necessary.