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 / Button documentation #19290

Closed
wants to merge 267 commits into from

Conversation

PeterDraex
Copy link
Contributor

@PeterDraex PeterDraex commented Aug 6, 2021

Closed in favor of #19298

@PeterDraex PeterDraex requested review from dzearing, khmakoto and a team as code owners August 6, 2021 08:05
@PeterDraex PeterDraex self-assigned this Aug 6, 2021
@PeterDraex PeterDraex marked this pull request as draft August 6, 2021 08:07
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 6, 2021

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 8c30e55:

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link

size-auditor bot commented Aug 6, 2021

Asset size changes

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

Baseline commit: b3f9f26e2822631b7583c47495a7de0fbf80cf78 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 6, 2021

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-button
Button
24.886 kB
7.975 kB
24.91 kB
7.988 kB
-24 B
-13 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
176.902 kB
50.064 kB
176.93 kB
50.072 kB
-28 B
-8 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
75.578 kB
22.287 kB
react-avatar
Avatar
56.558 kB
15.66 kB
react-badge
Badge
24.343 kB
7.165 kB
react-badge
CounterBadge
27.156 kB
7.851 kB
react-badge
PresenseBadge
237 B
177 B
react-button
CompoundButton
30.226 kB
8.878 kB
react-button
MenuButton
26.521 kB
8.509 kB
react-button
ToggleButton
34.531 kB
8.637 kB
react-components
react-components: FluentProvider & webLightTheme
36.237 kB
11.596 kB
react-divider
Divider
15.889 kB
5.747 kB
react-image
Image
10.642 kB
4.264 kB
react-label
Label
9.397 kB
3.839 kB
react-link
Link
14.715 kB
6.012 kB
react-make-styles
makeStaticStyles (runtime)
7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)
22.135 kB
8.356 kB
react-make-styles
makeStyles + mergeClasses (build time)
2.557 kB
1.202 kB
react-menu
Menu (including children components)
114.61 kB
34.554 kB
react-menu
Menu (including selectable components)
116.71 kB
34.824 kB
react-popover
Popover
124.181 kB
36.121 kB
react-portal
Portal
7.78 kB
2.672 kB
react-positioning
usePopper
23.157 kB
7.942 kB
react-provider
FluentProvider
16.235 kB
5.972 kB
react-theme
Teams: all themes
32.941 kB
6.674 kB
react-theme
Teams: Light theme
20.247 kB
5.662 kB
react-tooltip
Tooltip
45.281 kB
15.45 kB
react-utilities
SSRProvider
213 B
170 B
🤖 This report was generated against b3f9f26e2822631b7583c47495a7de0fbf80cf78

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 6, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 871 845 5000
BaseButton mount 859 856 5000
Breadcrumb mount 2548 2491 1000
ButtonNext mount 403 398 5000
Checkbox mount 1443 1444 5000
CheckboxBase mount 1225 1253 5000
ChoiceGroup mount 4470 4593 5000
ComboBox mount 927 920 1000
CommandBar mount 9752 9806 1000
ContextualMenu mount 5831 6040 1000
DefaultButton mount 1086 1062 5000
DetailsRow mount 3542 3590 5000
DetailsRowFast mount 3603 3502 5000
DetailsRowNoStyles mount 3399 3377 5000
Dialog mount 2083 2100 1000
DocumentCardTitle mount 139 134 1000
Dropdown mount 3132 3095 5000
FluentProviderNext mount 7129 7179 5000
FocusTrapZone mount 1696 1717 5000
FocusZone mount 1710 1694 5000
IconButton mount 1710 1651 5000
Label mount 325 328 5000
Layer mount 1704 1749 5000
Link mount 450 432 5000
MakeStyles mount 1853 1780 50000
MenuButton mount 1407 1424 5000
MessageBar mount 1962 2045 5000
Nav mount 3175 3132 1000
OverflowSet mount 1064 1028 5000
Panel mount 1929 2051 1000
Persona mount 762 777 1000
Pivot mount 1357 1369 1000
PrimaryButton mount 1198 1215 5000
Rating mount 7231 7216 5000
SearchBox mount 1308 1239 5000
Shimmer mount 2408 2429 5000
Slider mount 1879 1836 5000
SpinButton mount 4704 4755 5000
Spinner mount 395 394 5000
SplitButton mount 2951 2985 5000
Stack mount 465 465 5000
StackWithIntrinsicChildren mount 1467 1442 5000
StackWithTextChildren mount 4228 4267 5000
SwatchColorPicker mount 9771 9770 5000
Tabs mount 1362 1348 1000
TagPicker mount 2443 2521 5000
TeachingBubble mount 11324 11190 5000
Text mount 391 388 5000
TextField mount 1305 1314 5000
ThemeProvider mount 1110 1126 5000
ThemeProvider virtual-rerender 578 577 5000
Toggle mount 752 751 5000
buttonNative mount 109 108 5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
AlertMinimalPerf.default 249 252 0.99:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 173 156 1.11:1
ButtonMinimalPerf.default 164 152 1.08:1
HeaderMinimalPerf.default 361 333 1.08:1
AvatarMinimalPerf.default 194 183 1.06:1
FormMinimalPerf.default 383 360 1.06:1
VideoMinimalPerf.default 613 581 1.06:1
SkeletonMinimalPerf.default 345 330 1.05:1
DatepickerMinimalPerf.default 5386 5181 1.04:1
FlexMinimalPerf.default 279 268 1.04:1
GridMinimalPerf.default 326 314 1.04:1
InputMinimalPerf.default 1213 1171 1.04:1
EmbedMinimalPerf.default 4065 3956 1.03:1
ProviderMinimalPerf.default 937 913 1.03:1
AnimationMinimalPerf.default 390 384 1.02:1
ButtonSlotsPerf.default 543 531 1.02:1
ItemLayoutMinimalPerf.default 1222 1202 1.02:1
PortalMinimalPerf.default 168 164 1.02:1
ProviderMergeThemesPerf.default 1621 1584 1.02:1
SegmentMinimalPerf.default 342 335 1.02:1
SplitButtonMinimalPerf.default 3799 3721 1.02:1
StatusMinimalPerf.default 650 637 1.02:1
TextMinimalPerf.default 335 329 1.02:1
CustomToolbarPrototype.default 3786 3722 1.02:1
ToolbarMinimalPerf.default 908 888 1.02:1
ButtonOverridesMissPerf.default 1652 1636 1.01:1
CardMinimalPerf.default 526 523 1.01:1
ChatWithPopoverPerf.default 340 336 1.01:1
CheckboxMinimalPerf.default 2678 2650 1.01:1
DialogMinimalPerf.default 735 727 1.01:1
DropdownMinimalPerf.default 3081 3037 1.01:1
HeaderSlotsPerf.default 726 720 1.01:1
LabelMinimalPerf.default 373 371 1.01:1
ListCommonPerf.default 591 587 1.01:1
ListNestedPerf.default 526 519 1.01:1
MenuMinimalPerf.default 813 804 1.01:1
RosterPerf.default 1162 1152 1.01:1
RadioGroupMinimalPerf.default 424 420 1.01:1
TableManyItemsPerf.default 1829 1814 1.01:1
TableMinimalPerf.default 387 382 1.01:1
BoxMinimalPerf.default 325 326 1:1
DropdownManyItemsPerf.default 631 630 1:1
LayoutMinimalPerf.default 350 350 1:1
ListMinimalPerf.default 495 494 1:1
TextAreaMinimalPerf.default 475 473 1:1
TreeMinimalPerf.default 763 760 1:1
AttachmentMinimalPerf.default 146 148 0.99:1
ChatMinimalPerf.default 624 628 0.99:1
ImageMinimalPerf.default 365 368 0.99:1
PopupMinimalPerf.default 568 574 0.99:1
ReactionMinimalPerf.default 355 360 0.99:1
RefMinimalPerf.default 220 222 0.99:1
IconMinimalPerf.default 573 577 0.99:1
AttachmentSlotsPerf.default 1013 1031 0.98:1
ChatDuplicateMessagesPerf.default 282 289 0.98:1
LoaderMinimalPerf.default 677 691 0.98:1
TooltipMinimalPerf.default 950 968 0.98:1
CarouselMinimalPerf.default 446 458 0.97:1
AccordionMinimalPerf.default 153 160 0.96:1
SliderMinimalPerf.default 1525 1582 0.96:1
ListWith60ListItems.default 604 635 0.95:1
MenuButtonMinimalPerf.default 1529 1635 0.94:1
DividerMinimalPerf.default 331 355 0.93:1

bheston and others added 19 commits August 6, 2021 15:43
…crosoft#18578)

* migrate DSP to design tokens
* convert PaletteRGB to Palette

Co-authored-by: nicholasrice <[email protected]>
Updated Card color handling for new design tokens
Updated fill-color handling in design-system-provider
Added neutral-fill-layer-rest-delta to design-system-provider
Updated use of fluent-design-system-provider in samples
Cleaned up styles and sorted imports
…soft#18716)

* update latest versions

* update typings for context and definition, export base classes

* Change files
Removed old color recipes and moved vNext.
…8730)

* fix horizontal scroll examples after default flipper update

* Change files
* fix typography token names

* Change files
* Fixed foregroundOnAccent recipe to work in all states

* Change files

* Revert change to yarn.lock
* update eslint for web components package

* update prettier for web components to v2

* Change files
…microsoft#18805)

* leverage dependencies of root for prettier and eslint where available

* Change files
* update dependencies and lint-staged config

* fix neutral fill layer spec

* Change files
Bumps [postcss](https://github.com/postcss/postcss) from 8.2.4 to 8.2.10.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.2.4...8.2.10)

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
…ng specificity and ordering issues (microsoft#18828)

* removes duplicate styles for expand-collapse-glyph on tree item causing specificity/ordering issues

* Change files
Initializes the auto-generated artifacts for the new
`@fluentui/keyboard-keys` package as proposed in microsoft#18587

**Does not publish the package immediately**
scharde and others added 27 commits August 6, 2021 15:59
* callout issue resolved by adding preventDismissOnLostFocus prop to callout props

* Change files

Co-authored-by: Sagar Charde <[email protected]>
* Accessibility change for Vertical Bar chart

* Change files

* test snapshots updated

Co-authored-by: Sagar Charde <[email protected]>
* upgrade to sb 6.3.6

* update addon-docs imports

* add lit and web-components to satisfied ignore list

* remove modumeNameMapper

* deduplicate

* update yarn file

* deduplicate ts-dedent and globby

* change satisfied ignore from web-components to @storybook/web-components
#### Pull request checklist
- [X] Include a change request file using `$ yarn change`

#### Description of changes
Copying the `useMount` and `useUnmount` hooks from **react-hooks** into the **react-utilities** package.
* Bold author font-weight in compact chat

* Add changelog entry
…icrosoft#19169)

Enable the `react-hooks/exhaustive-deps` lint rule for `useIsomorphicLayoutEffect`, and fix places where the new rule caused failures.
…icrosoft#19201)

* fix(Popup): prevent closing popup on finishing select text outside

* fix: tests

* fix: test

* fix popup

* update test

* fix test

Co-authored-by: Charles Assuncao <[email protected]>
@PeterDraex PeterDraex closed this Aug 6, 2021
@PeterDraex PeterDraex deleted the feature/button-docs branch August 6, 2021 14:35
@PeterDraex
Copy link
Contributor Author

Closed in favor of #19298

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.