-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(react-tabs): add rounded tab appearance variants #32944
base: master
Are you sure you want to change the base?
Conversation
📊 Bundle size report
Unchanged fixtures
|
Perf Analysis (
|
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
FluentProviderWithTheme | virtual-rerender | 41 | 41 | 10 | Possible regression |
FluentProviderWithTheme | virtual-rerender-with-unmount | 73 | 78 | 10 | Possible regression |
All results
Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
---|---|---|---|---|---|
Avatar | mount | 637 | 646 | 5000 | |
Button | mount | 299 | 302 | 5000 | |
Field | mount | 1190 | 1167 | 5000 | |
FluentProvider | mount | 715 | 722 | 5000 | |
FluentProviderWithTheme | mount | 82 | 87 | 10 | |
FluentProviderWithTheme | virtual-rerender | 41 | 41 | 10 | Possible regression |
FluentProviderWithTheme | virtual-rerender-with-unmount | 73 | 78 | 10 | Possible regression |
MakeStyles | mount | 873 | 874 | 50000 | |
Persona | mount | 1787 | 1744 | 5000 | |
SpinButton | mount | 1407 | 1379 | 5000 | |
SwatchPicker | mount | 1656 | 1655 | 5000 |
@@ -206,3 +206,31 @@ export const WithIconOnlyAndVertical = () => ( | |||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🕵🏾♀️ visual regressions to review in the fluentuiv9 Visual Regression Report
Avatar Converged 2 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Avatar Converged.badgeMask.chromium.png | 9 | Changed |
Avatar Converged.Badge Mask RTL.chromium.png | 13 | Changed |
Drawer 3 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
Drawer.Full Overlay Dark Mode.chromium.png | 992 | Changed |
Drawer.overlay drawer full.chromium.png | 1139 | Changed |
Drawer.Full Overlay High Contrast.chromium.png | 4940 | Changed |
TabList and Tab Converged 6 screenshots
Image Name | Diff(in Pixels) | Image Type |
---|---|---|
TabList and Tab Converged.Filled Rounded Appearance Dark Mode.chromium.png | 0 | Added |
TabList and Tab Converged.Filled Rounded Appearance High Contrast.chromium.png | 0 | Added |
TabList and Tab Converged.Filled Rounded Appearance.chromium.png | 0 | Added |
TabList and Tab Converged.Subtle Rounded Appearance Dark Mode.chromium.png | 0 | Added |
TabList and Tab Converged.Subtle Rounded Appearance High Contrast.chromium.png | 0 | Added |
TabList and Tab Converged.Subtle Rounded Appearance.chromium.png | 0 | Added |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, few small suggestions
packages/react-components/react-tabs/stories/src/Tabs/TabListCircular.stories.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-tabs/stories/src/Tabs/TabListCircular.stories.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the api design is miss-leading ( not referring to your PR -> we need to talk to design ) more context #32951 (comment)
in terms of actual api implementation, we should not introduce another property rather provide discriminant union of variants. any kind of new property addition = hard to maintain property bag
75a68d3
to
c2984d5
Compare
c2984d5
to
7dacf5f
Compare
I appreciate the feedback, updated PR to use existing prop with new variants. |
ef9412e
to
ccef21a
Compare
ccef21a
to
bad6025
Compare
New Behavior
Adds a new
appearance="subtle-roudned"
andappearance="filled-rounded"
variants toTabList
andTab
components.Screen.Recording.2024-10-01.at.10.44.45.mov
Figma - https://www.figma.com/design/dK5AnDvvnSTWV9lduQWeDk/TabList?node-id=11485-46208&t=mGEm2A0P5LNHTYUs-1
Related Issue(s)