Skip to content
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

Storybook iframe update to match website design #21270

Merged
merged 29 commits into from
Feb 3, 2022

Conversation

micahgodbolt
Copy link
Member

@micahgodbolt micahgodbolt commented Jan 12, 2022

Various updates to react-components storybook design and layout to improve internal docs, and prepare the storybook docs for embedding in the new fluent website.

Preview updates at https://fluentuipr.z22.web.core.windows.net/pull/21270/react-components/storybook/index.html?path=/docs/components-menu--default

Note: docs-root.css was copied over into package to enable making some sweeping updates without affecting other packages. We could consider moving that back to the root storybook if we want these styles propagated all around.

Also, these styles are a WIP. There will inevitably be more updates as the website work evolves in prep for build.

fixes #21512

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 12, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3bb6d97:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 12, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
54.925 kB
17.57 kB
react-avatar
Avatar
43.056 kB
12.381 kB
react-badge
Badge
20.828 kB
6.533 kB
react-badge
CounterBadge
21.696 kB
6.832 kB
react-badge
PresenceBadge
21.79 kB
6.512 kB
react-button
Button
27.942 kB
8.023 kB
react-button
CompoundButton
33.192 kB
8.983 kB
react-button
MenuButton
29.596 kB
8.594 kB
react-button
SplitButton
35.682 kB
9.666 kB
react-button
ToggleButton
37.219 kB
8.634 kB
react-card
Card - All
48.488 kB
14.347 kB
react-card
Card
43.997 kB
13.195 kB
react-card
CardFooter
7.618 kB
3.232 kB
react-card
CardHeader
8.885 kB
3.673 kB
react-card
CardPreview
7.811 kB
3.361 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
165.697 kB
46.873 kB
react-components
react-components: FluentProvider & webLightTheme
32.489 kB
10.636 kB
react-divider
Divider
15.269 kB
5.523 kB
react-image
Image
10.075 kB
3.942 kB
react-input
Input
21.474 kB
7.118 kB
react-label
Label
8.323 kB
3.479 kB
react-link
Link
11.072 kB
4.496 kB
react-menu
Menu (including children components)
102.827 kB
31.706 kB
react-menu
Menu (including selectable components)
105.078 kB
32.072 kB
react-popover
Popover
95.348 kB
29.017 kB
react-portal
Portal
6.249 kB
2.163 kB
react-positioning
usePopper
22.808 kB
7.935 kB
react-provider
FluentProvider
13.972 kB
5.237 kB
react-slider
Slider
22.936 kB
7.751 kB
react-spinner
Spinner
6.787 kB
2.887 kB
react-switch
Switch
25.397 kB
8.208 kB
react-text
Text - Default
10.769 kB
4.224 kB
react-text
Text - Wrappers
14.077 kB
4.565 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
29.426 kB
6.551 kB
react-theme
Teams: Light theme
18.42 kB
5.27 kB
react-tooltip
Tooltip
42.289 kB
14.589 kB
react-utilities
SSRProvider
189 B
161 B
🤖 This report was generated against 0f3e58e289514a5b8dc1eddbb70a720112b48df0

@size-auditor
Copy link

size-auditor bot commented Jan 12, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 0f3e58e289514a5b8dc1eddbb70a720112b48df0 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 12, 2022

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
ContextualMenu mount 15519 8303 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 952 946 5000
BaseButton mount 956 963 5000
Breadcrumb mount 2594 2544 1000
ButtonNext mount 523 544 5000
Checkbox mount 1670 1604 5000
CheckboxBase mount 1316 1382 5000
ChoiceGroup mount 5011 5038 5000
ComboBox mount 1013 994 1000
CommandBar mount 9950 10165 1000
ContextualMenu mount 15519 8303 1000 Possible regression
DefaultButton mount 1220 1167 5000
DetailsRow mount 3823 3837 5000
DetailsRowFast mount 3828 3889 5000
DetailsRowNoStyles mount 3614 3642 5000
Dialog mount 2655 2625 1000
DocumentCardTitle mount 178 185 1000
Dropdown mount 3330 3340 5000
FluentProviderNext mount 1870 1766 5000
FluentProviderWithTheme mount 160 165 10
FluentProviderWithTheme virtual-rerender 118 98 10
FluentProviderWithTheme virtual-rerender-with-unmount 190 192 10
FocusTrapZone mount 1854 1827 5000
FocusZone mount 1738 1834 5000
IconButton mount 1852 1893 5000
Label mount 366 368 5000
Layer mount 3060 3056 5000
Link mount 508 527 5000
MakeStyles mount 1645 1669 50000
MenuButton mount 1595 1579 5000
MessageBar mount 2016 1983 5000
Nav mount 3376 3409 1000
OverflowSet mount 1165 1177 5000
Panel mount 2465 2515 1000
Persona mount 878 877 1000
Pivot mount 1452 1477 1000
PrimaryButton mount 1362 1336 5000
Rating mount 8012 8205 5000
SearchBox mount 1457 1416 5000
Shimmer mount 2695 2646 5000
Slider mount 2027 2018 5000
SpinButton mount 5097 5198 5000
Spinner mount 452 456 5000
SplitButton mount 3238 3219 5000
Stack mount 559 574 5000
StackWithIntrinsicChildren mount 2510 2514 5000
StackWithTextChildren mount 5723 5781 5000
SwatchColorPicker mount 11823 11851 5000
TagPicker mount 2767 2719 5000
TeachingBubble mount 12979 13111 5000
Text mount 467 471 5000
TextField mount 1413 1465 5000
ThemeProvider mount 1184 1188 5000
ThemeProvider virtual-rerender 632 614 5000
ThemeProvider virtual-rerender-with-unmount 1911 1992 5000
Toggle mount 850 858 5000
buttonNative mount 153 150 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@micahgodbolt micahgodbolt marked this pull request as ready for review January 31, 2022 18:38
@micahgodbolt micahgodbolt requested review from a team as code owners January 31, 2022 18:38
@micahgodbolt micahgodbolt requested a review from a team as a code owner January 31, 2022 18:38
@andrefcdias andrefcdias self-requested a review February 1, 2022 13:26
@andrefcdias
Copy link
Contributor

Please detail if there are any other visual details we should look out for in the URL you provided, apart from reviewing just the code.

@layershifter
Copy link
Member

image


Not sure if it's caused by this PR, but spacing in the red area looks really weird 🙃
IMO description should fill the whole area.

@micahgodbolt
Copy link
Member Author

image

Not sure if it's caused by this PR, but spacing in the red area looks really weird 🙃 IMO description should fill the whole area.

That space was intentional and already in there. It just reduces the line length of that text

@micahgodbolt micahgodbolt requested a review from a team as a code owner February 1, 2022 23:14
@micahgodbolt
Copy link
Member Author

Great feedback! Lots of updates and notes added to files.

@micahgodbolt
Copy link
Member Author

image
Not sure if it's caused by this PR, but spacing in the red area looks really weird 🙃 IMO description should fill the whole area.

That space was intentional and already in there. It just reduces the line length of that text

yeah, it's pretty ugly in places with that width restriction. I'll remove it

@micahgodbolt micahgodbolt merged commit 74f1403 into microsoft:master Feb 3, 2022
@micahgodbolt micahgodbolt deleted the storybook-iframe-update branch February 3, 2022 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fluent UI website and Storybook visual alignment
7 participants