Overhaul v8 icon doc text and add search for SVG icons #21211
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 d991109:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 7d402050b2e4d487f70efc539837d50808dea92e (build) |
📊 Bundle size reportUnchanged fixtures
|
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | mount | 143 | 167 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 779 | 782 | 5000 | |
| BaseButton | mount | 810 | 800 | 5000 | |
| Breadcrumb | mount | 2255 | 2242 | 1000 | |
| ButtonNext | mount | 462 | 471 | 5000 | |
| Checkbox | mount | 1334 | 1340 | 5000 | |
| CheckboxBase | mount | 1135 | 1107 | 5000 | |
| ChoiceGroup | mount | 4157 | 4131 | 5000 | |
| ComboBox | mount | 840 | 869 | 1000 | |
| CommandBar | mount | 8733 | 8774 | 1000 | |
| ContextualMenu | mount | 14762 | 14609 | 1000 | |
| DefaultButton | mount | 979 | 988 | 5000 | |
| DetailsRow | mount | 3241 | 3256 | 5000 | |
| DetailsRowFast | mount | 3254 | 3274 | 5000 | |
| DetailsRowNoStyles | mount | 3114 | 3094 | 5000 | |
| Dialog | mount | 2196 | 2275 | 1000 | |
| DocumentCardTitle | mount | 167 | 156 | 1000 | |
| Dropdown | mount | 2753 | 2755 | 5000 | |
| FluentProviderNext | mount | 1753 | 1648 | 5000 | |
| FluentProviderWithTheme | mount | 143 | 167 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender | 91 | 103 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 168 | 148 | 10 | |
| FocusTrapZone | mount | 1579 | 1594 | 5000 | |
| FocusZone | mount | 1586 | 1587 | 5000 | |
| IconButton | mount | 1526 | 1514 | 5000 | |
| Label | mount | 318 | 325 | 5000 | |
| Layer | mount | 2521 | 2539 | 5000 | |
| Link | mount | 428 | 421 | 5000 | |
| MakeStyles | mount | 1644 | 1643 | 50000 | |
| MenuButton | mount | 1285 | 1282 | 5000 | |
| MessageBar | mount | 1734 | 1750 | 5000 | |
| Nav | mount | 2865 | 2836 | 1000 | |
| OverflowSet | mount | 984 | 962 | 5000 | |
| Panel | mount | 2168 | 2133 | 1000 | |
| Persona | mount | 734 | 734 | 1000 | |
| Pivot | mount | 1242 | 1232 | 1000 | |
| PrimaryButton | mount | 1117 | 1127 | 5000 | |
| Rating | mount | 6614 | 6618 | 5000 | |
| SearchBox | mount | 1162 | 1145 | 5000 | |
| Shimmer | mount | 2219 | 2209 | 5000 | |
| Slider | mount | 1731 | 1691 | 5000 | |
| SpinButton | mount | 4296 | 4338 | 5000 | |
| Spinner | mount | 393 | 398 | 5000 | |
| SplitButton | mount | 2731 | 2725 | 5000 | |
| Stack | mount | 480 | 475 | 5000 | |
| StackWithIntrinsicChildren | mount | 1999 | 1968 | 5000 | |
| StackWithTextChildren | mount | 4439 | 4441 | 5000 | |
| SwatchColorPicker | mount | 9851 | 9899 | 5000 | |
| TagPicker | mount | 2253 | 2266 | 5000 | |
| TeachingBubble | mount | 11153 | 11150 | 5000 | |
| Text | mount | 391 | 389 | 5000 | |
| TextField | mount | 1204 | 1188 | 5000 | |
| ThemeProvider | mount | 1018 | 1039 | 5000 | |
| ThemeProvider | virtual-rerender | 541 | 548 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1570 | 1606 | 5000 | |
| Toggle | mount | 716 | 734 | 5000 | |
| buttonNative | mount | 126 | 133 | 5000 |
Perf Analysis (@fluentui/react-northstar)
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| AccordionMinimalPerf.default | 144 | 127 | 1.13:1 |
| AttachmentMinimalPerf.default | 145 | 134 | 1.08:1 |
| ListCommonPerf.default | 546 | 510 | 1.07:1 |
| TreeWith60ListItems.default | 160 | 151 | 1.06:1 |
| LayoutMinimalPerf.default | 314 | 300 | 1.05:1 |
| CardMinimalPerf.default | 479 | 462 | 1.04:1 |
| ChatWithPopoverPerf.default | 333 | 319 | 1.04:1 |
| FormMinimalPerf.default | 349 | 337 | 1.04:1 |
| ListMinimalPerf.default | 443 | 426 | 1.04:1 |
| ReactionMinimalPerf.default | 330 | 317 | 1.04:1 |
| SegmentMinimalPerf.default | 307 | 294 | 1.04:1 |
| SkeletonMinimalPerf.default | 299 | 287 | 1.04:1 |
| TextMinimalPerf.default | 304 | 292 | 1.04:1 |
| TreeMinimalPerf.default | 693 | 669 | 1.04:1 |
| DividerMinimalPerf.default | 308 | 299 | 1.03:1 |
| HeaderSlotsPerf.default | 658 | 637 | 1.03:1 |
| MenuMinimalPerf.default | 719 | 701 | 1.03:1 |
| AttachmentSlotsPerf.default | 915 | 899 | 1.02:1 |
| ButtonMinimalPerf.default | 151 | 148 | 1.02:1 |
| ChatDuplicateMessagesPerf.default | 267 | 263 | 1.02:1 |
| CheckboxMinimalPerf.default | 2281 | 2238 | 1.02:1 |
| FlexMinimalPerf.default | 248 | 243 | 1.02:1 |
| GridMinimalPerf.default | 296 | 289 | 1.02:1 |
| HeaderMinimalPerf.default | 312 | 305 | 1.02:1 |
| InputMinimalPerf.default | 1112 | 1095 | 1.02:1 |
| ListNestedPerf.default | 472 | 463 | 1.02:1 |
| ListWith60ListItems.default | 554 | 545 | 1.02:1 |
| MenuButtonMinimalPerf.default | 1411 | 1388 | 1.02:1 |
| PortalMinimalPerf.default | 152 | 149 | 1.02:1 |
| RadioGroupMinimalPerf.default | 381 | 373 | 1.02:1 |
| SplitButtonMinimalPerf.default | 3700 | 3642 | 1.02:1 |
| IconMinimalPerf.default | 520 | 508 | 1.02:1 |
| TextAreaMinimalPerf.default | 429 | 419 | 1.02:1 |
| AnimationMinimalPerf.default | 460 | 456 | 1.01:1 |
| BoxMinimalPerf.default | 298 | 295 | 1.01:1 |
| ButtonSlotsPerf.default | 463 | 459 | 1.01:1 |
| CarouselMinimalPerf.default | 403 | 399 | 1.01:1 |
| ChatMinimalPerf.default | 627 | 618 | 1.01:1 |
| DatepickerMinimalPerf.default | 4742 | 4683 | 1.01:1 |
| DropdownMinimalPerf.default | 2570 | 2537 | 1.01:1 |
| EmbedMinimalPerf.default | 3492 | 3458 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 1008 | 995 | 1.01:1 |
| LoaderMinimalPerf.default | 580 | 575 | 1.01:1 |
| PopupMinimalPerf.default | 525 | 520 | 1.01:1 |
| StatusMinimalPerf.default | 582 | 579 | 1.01:1 |
| TableManyItemsPerf.default | 1601 | 1591 | 1.01:1 |
| TableMinimalPerf.default | 347 | 345 | 1.01:1 |
| ToolbarMinimalPerf.default | 799 | 792 | 1.01:1 |
| VideoMinimalPerf.default | 544 | 537 | 1.01:1 |
| DialogMinimalPerf.default | 650 | 650 | 1:1 |
| DropdownManyItemsPerf.default | 570 | 569 | 1:1 |
| ProviderMergeThemesPerf.default | 1454 | 1461 | 1:1 |
| ProviderMinimalPerf.default | 960 | 956 | 1:1 |
| SliderMinimalPerf.default | 1410 | 1410 | 1:1 |
| CustomToolbarPrototype.default | 3455 | 3468 | 1:1 |
| TooltipMinimalPerf.default | 882 | 884 | 1:1 |
| AlertMinimalPerf.default | 233 | 235 | 0.99:1 |
| ButtonOverridesMissPerf.default | 1422 | 1433 | 0.99:1 |
| LabelMinimalPerf.default | 328 | 332 | 0.99:1 |
| RefMinimalPerf.default | 201 | 204 | 0.99:1 |
| AvatarMinimalPerf.default | 167 | 172 | 0.97:1 |
| RosterPerf.default | 985 | 1028 | 0.96:1 |
| ImageMinimalPerf.default | 305 | 320 | 0.95:1 |
Hotell
reviewed
Jan 10, 2022
| this._iconRefs = {}; | ||
| for (const icon of props.icons) { | ||
| this._iconRefs[icon.name] = React.createRef(); | ||
| if (props.iconType !== 'react-svg') { |
There was a problem hiding this comment.
while adding/refactoring, shouldn't we refactor this to function component with hooks to lower our technical depth ?
There was a problem hiding this comment.
This website is basically in maintenance mode, with a replacement theoretically in progress, so I wouldn't consider function component conversions to be a priority (if we're going to spend any time on improvements here, there are other issues that would be much higher impact/priority). I guess with the level of rewriting I did here, I could have also converted to a function component, but at this point it's probably not worth the time to go back and do that.
There was a problem hiding this comment.
I see, well for me it would be easier to directly rewrite to function component heh. regarding maintenance mode - do we have End Of Life date ?
Hotell
reviewed
Jan 12, 2022
| @@ -14,7 +15,7 @@ | |||
| "noImplicitThis": true, | |||
| "noUnusedLocals": true, | |||
| "skipLibCheck": true, | |||
| "lib": ["es5", "dom"], | |||
| "lib": ["es2015", "dom"], | |||
There was a problem hiding this comment.
why this change? we are using es2015 features ? I thought this is for v8 which needs to support es5
There was a problem hiding this comment.
It's to allow async imports, to let webpack to split the icons into a separate bundle. This is just for the website, which does theoretically need to work in IE 11 (it's been broken for awhile now) but we automatically include some polyfills to handle it.
Hotell
approved these changes
Jan 12, 2022
| * Type of icons: | ||
| * - `core-font` is Fabric Core font icons, rendered in an `<i>` tag with classes | ||
| * - `react-font` is Fluent UI React font icons, rendered using `<FontIcon>` | ||
| * - `react-svg` is SVG icon components, rendered directly |
There was a problem hiding this comment.
react-svg appears to be in the next interface
There was a problem hiding this comment.
This one is a bit weird since IFontIconGridProps is never used directly, only in IIconGridProps (where iconType is the discriminant), and I wanted the full comment to show up on the final IIconGridProps type. At least in my editor, it was using the comment from the first type for the combined version, rather than merging the comments.
| @@ -1,7 +1,7 @@ | |||
| Fluent UI uses a custom font for its iconography. This font contains glyphs that you can scale, color, and style in any way. There are also mirrored icons available for right-to-left localization. You can also download and install the icon font to use it with various design apps like Sketch, Figma, or Adobe XD. | |||
| Fluent UI primarily uses a custom font for its iconography, released under the [Microsoft Fabric Assets License](https://aka.ms/fluentui-assets-license). As of Fluent UI React version 8, an SVG-based version of the same icon set is available under the MIT license. | |||
There was a problem hiding this comment.
Maybe say "in the past, Fluent UI has used a custom font", but as of Fluent UI 8 it uses SVG?
There was a problem hiding this comment.
Fluent UI has traditionally used a custom font for its iconography. This font is part of the MDL2 design system and contains glyphs that you can scale, color, and style in any way. You can also download and install the icon font to use it with various design apps like Sketch, Figma, or Adobe XD.
like this line from below. 'traditionally' works
There was a problem hiding this comment.
v8 still uses a font by default, the difference is that we also have SVG available
tomi-msft
approved these changes
Jan 12, 2022
ecraig12345
force-pushed
the
icon-docs
branch
from
4dd0b38
to
d991109
Compare
mlp73
pushed a commit
to mlp73/fluentui
that referenced
this pull request
Jan 17, 2022
spmonahan
added a commit
that referenced
this pull request
Jan 21, 2022
* applying package updates
* fix(react-tooltip): update styles to not use CSS shorthands (#20795)
* fix(react-button): update styles to not use CSS shorthands (#20815)
* fix(react-divider): update styles to not use CSS shorthands (#20817)
* fix(react-checkbox): update styles to not use CSS shorthands (#20816)
* fix(react-checkbox): update styles to not use CSS shorthands
* use shorthand
* fix: restore missing exports in v8 (#20824)
* fix: restore missing exports in v8
* Change files
* Update change/@fluentui-react-e62b6d7b-78cd-4608-875d-64734092f5fb.json
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* fix(react-image): update styles to not use CSS shorthands (#20818)
* react-theme: remove `themeToCSSVariables` function (#20828)
* Removes `themeToCSSVariables` from `react-theme`
* Change files
* Updates useThemeStyleTag test
* Update change/@fluentui-react-components-74056fd1-c660-4696-8c6d-4e88c982db5b.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-react-provider-e4a6f9f7-0251-4c29-a6fc-40271100354f.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-react-theme-963b299a-18df-4452-82a8-3f4f55dbbf3b.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* fix(react-avatar): update styles to not use CSS shorthands (#20801)
* fix(react-avatar): update stories to not use CSS shorthands in styles
* Update change/@fluentui-react-avatar-8bb1e8aa-bfd9-4c42-aa44-390bae8c5d03.json
* fix(react-link): update styles to not use CSS shorthands (#20819)
* fix(react-link): update styles to not use CSS shorthands
* Apply suggestions from code review
* fix: Label component to properly pass down ref to root slot (#20813)
* fix: Label component to properly pass down ref to root slot
* add changelog
* fix(codemods): Remove v9 make-styles dependency (#20836)
Refactors the current test to not require an import from v9. The import
itself is actually not important to the test.
* fix: Loader component to properly pass ref to root slot (#20814)
* fix: Loader component to properly pass ref to root slot
* add changelog
* fix: Loader
* fix: Form component to properly pass ref to root slot (#20809)
* fix: Form component to properly pass ref to root slot
* add changelog
* fix: Grid component to properly pass ref to root slot (#20810)
* fix: Grid component to properly pass ref to root slot
* add changelog
* fix(react-positioning,react-tabster): update styles to not use CSS shorthands (#20842)
* fix(react-text): update styles to not use CSS shorthands (#20841)
* Add missing permissions (#20840)
* fix: Header components to properly pass ref to root slots (#20811)
* fix: Header components to properly pass ref to root slots
* add changelog
* fix: image component to properly pass ref to root slot (#20812)
* fix: image component to properly pass ref to root slot
* add changelog
* fix: MenuButton to properly pass ref to root slot (#20837)
* fix: MenuButton to properly pass ref to root sloot
* add changelog
* fix(Popup): remove unsupported styling props (#20853)
* fix(Popup): remove unsupported styling props
* Update packages/fluentui/CHANGELOG.md
* fix(react-northstar): use native ARIA props (#20848)
* fix(react-northstar): use native ARIA props
* add changelog entry
* Update packages/fluentui/CHANGELOG.md
* fix tests
* chore: run migration for @fluentui/react-slider (#20856)
* Input: add interaction styling and vr-tests (#20648)
* fix: Pill components to properly pass down ref to root slot (#20838)
* fix: Pill components to properly pass down ref to root slot
* add changelog
* fix pill icon
* Add teams-prg and cxe-red as codeowners of `react-badge` (#20715)
* Add teams-prg and cxe-red as codeowners of `react-badge`
* Update .github/CODEOWNERS
* applying package updates
* fix: video component to properly pass ref to root slot (#20878)
* fix: video component to properly pass ref to root slot
* add changelog
* fix: tree components to proper pass ref to root slots (#20877)
* fix: tree components to proper pass ref to root slots
* add changelog
* Apply suggestions from code review
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* rfc(react-theme): Remove global color tokens (#19752)
* rfc(react-theme): Remove global color tokens
* Add perf analysis
* fix: text area component to properly pass ref to root slot (#20875)
* fix: text area component to properly pass ref to root slot
* add changelog
* Update packages/fluentui/CHANGELOG.md
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* fix: TooltipContent Ref to proper pass ref to root slot (#20876)
* fix: TooltipContent Ref to proper pass ref to root slot
* add changelog
* fix: Text component to properly pass down ref (#20874)
* fix: Text component to properly pass down ref
* add changelog
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
* fix: RadioGroup components to properly pass ref to root slots (#20867)
* fix: RadioGroup components to properly pass ref to root slots
* changelog
* fix: Reaction components to properly pass ref to root slots (#20868)
* fix: Reaction components to properly pass ref to root slots
* add changelog
* fix: slider component to pass ref to root slot (#20870)
* fix: slider component to pass ref to root slot
* add changelog
* fix: vertical tabs from jumping (#20641)
* fix: tabpanel shifting in vertical layout
* Change files
* react-avatar: migrate converged packages to TS Solution style config (#20843)
* Migration to new dx
* Change files
* chore: run migration for @fluentui/react-tooltip (#20858)
* chore: run migration for @fluentui/react-label (#20851)
* Migration to new tsconfig solution (#20880)
* chore: run migration for @fluentui/react-switch (#20857)
* chore: run migration for @fluentui/react-link (#20855)
* react-button: migrate converged packages to TS Solution style config (#20846)
* Migration to new tsconfig
* Change files
* fix: segment component to pass down ref to root slot (#20869)
* fix: segment component to pass down ref to root slot
* add changelog
* feat(make-styles): Add `unstable_filterCSSRule` option to default `createDOMRenderer` (#20827)
* feat(make-styles): Add `filterCssRule` option to default `createDOMRenderer`
Adds a new `CreateDOMRendererOptions` type and options configurations to
`createDOMRenderer`.
Initially adds `filterCssRule` option for the renderer, so that styles
can be systematically filtered at the renderer level which avoids
additional logic in both the runtime and babel plugin code paths.
* Change files
* pr issues
* update md
* fix export
* use serializer
* Update change/@fluentui-make-styles-e6ce655b-209a-44e5-be74-f6b79e841121.json
* use unstable_ prefix
* update changefile
* update md
* remove fake documents
* applying package updates
* fix: Popover, Tooltip: RTL arrow positioning broken (#20845)
* Adds @noflip annotation to data-popper-placement styles
* Change files
* docs(storybook): hide editors in ArgsTable (#20695)
* docs(storybook): hide editors in ArgsTable
* Change files
* move style overrides from a component to global styles
* docs(storybook): fix TOC anchor links with colons (#20676)
* docs(storybook): fix anchor links with colons
* Change files
* bundle-size: Adds missing dependencies (#20885)
* Adds missing dependencies to bundle-size
* Change files
* Dedupe ci-info
* fix: SplitButton component to pass ref to root slot (#20871)
* fix: SplitButton component to pass ref to root slot
* add changelo
* fix: status component to properly pass ref to root (#20872)
* fix: status component to properly pass ref to root
* add changelog
* fix status default props
* Migration to new tsconfig solution (#20854)
* Migration to new tsconfig solution (#20849)
* fix: Table components to properly pass ref to root slots (#20873)
* fix: Table components to properly pass ref to root slots
* add changelog
* Bugfix/choice group focus trap zone (#20859)
* update ChoiceGroup focus handling
This commit overrides focus handling for ChoiceGroup when focus comes
from outside the DOM tree of the ChoiceGroup (e.g., from a sibling of
ChoiceGroup). This addresses a bug raised in #20173 where a ChoiceGroup
wrapped in a FocusTrapZone would not correctly focus the selected option
in ChoiceGroup.
The issue arises when ChoiceGroup is the first child of FocusTrapZone and
the focus is wrapped from the end of the focus trap back to the begining.
In this case FocusTrapZone walks its DOM children looking for the first
tabbable child, calling `focus()` on it. In the case of ChoiceGroup this
is always the first option in the group.
The fix is to listen for focus events on ChoiceGroups `radiogroup` child
and override focus behavior when the focus event comes from outside of the
ChoiceGroup, like when FocusTrapZone wraps the focus. This provides the
correct behavior for ChoiceGroup without adding new focus logic to FocusTrapZone.
See: https://github.com/microsoft/fluentui/issues/20173
* Change files
* Refactor ChoiceGroup focus handling code.
Extracts code into a new function so it's more easily reusable in the
future and more self-documenting.
* Update ChoiceGroup snapshots
* test(date-time-utils): make test pass for every contributor (#20887)
* applying package updates
* fix(react-switch): update styles to not use CSS shorthands (#20844)
* Delete unused .storybook/babel.plugin.js (#20126)
* Update lage to prevent truncation of error summary logs (#20903)
* Remove converged useControllableValue hook (#20865)
* docs(colors): Adds system colors to the `Colors` guide in the docsite (#20723)
* docs(colors): Adds system colors to the `Colors` guide in the docsite
Adds a new section that explains systems colors in the context of
windows high contrast mode. The section contains color boxes for all the
available system colors.
Modifies `ColorBox` component not to crash on sytem colours because the
`color` package does not support them
* remove try catch
* react-card: Spec (#19410)
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
* chore: disable custom Storybook addon in react-components (#20895)
* disable storybook addon
* Change files
* Update packages/react-components/.storybook/main.js
* fix: getPointerStyles in RTL mode (#20915)
* fix: getPointerStyles in RTL mode
* chore: add pointing prop to tooltip
* add position to rtl example
* revert changes for top and bottom
* fix compatibility
* add changelog
* De-couple v8 and converged vr-tests and storybooks (#20907)
* Docs/getslots comment (#20919)
* Update getSlots() docs.
Clarfies that prop filtering is only done by the type system and not
by runtime code.
* Change files
* Update API docs.
* Positioning: Allow swapping anchor edge when on boundary and won't cause visual differences (#20769)
* applying package updates
* feat(react-theme): Extend brand ramp from 13 to 16 tokens (#20884)
* feat(react-theme): Extend brand ramp from 13 to 16 tokens
* Change files
* (fix): Update react-icons dependency to latest version (#20943)
* (fix): Update react-icons dependency to latest version
* Change files
* Change files
* fix(slider|input|radio): use CSS shorthands in styles (#20926)
* fix(Popup): handle events on trigger that is wrapped in `Ref` (#20911)
* fix event handler
* chglog
* merge ref
* Update fix
* chglog
* cleanup
* revert toolbarItem change
* new fix
* cleanup
* e2e
* no trigger fix
* chglog
* Improve error messages for ts-minbar tests (#20941)
* fix(Menu): Call `useCheckmarkStyles` in `useMenuItemStyles` (#20956)
* fix(Menu): Call `useCheckmarkStyles` in `useMenuItemStyles`
* Change files
* Fix react-input's storybook build command so it deploys
* SearchBox: disable pointer events when is focused (#20951)
* SearchBox: disable pointer events when is focused
* Change files
* fix hover behavior
* Cherry-pick from #20860: Azure-theme tooltip dark theme fix (#20861)
* Dark theme tooltip fix
* Change files
* RFC: Repo folder organization (#20831)
* applying package updates
* fix(Badge): use updated tokens for ghost and outline variants (#20893)
* fix(Badge): use updated tokens for ghost and outline variants
* Change files
* update badge styles
* update badge styles
* update badge styles
* update vr test background
* don't render informative on brand background
* fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly (#20957)
* fix(Menu): set `aria-expanded` and `aria-haspopup` values correctly
* Change files
* use aria-haspopup menu
* update md
* update e2e selectors
* chore: Bump tabster and keyborg versions (#20889)
* chore: Bump tabster and keyborg versions
* Change files
* update type import
* bump tp 1.1.0-alpha.2
* revert type hack
* revert
* bump to alpha.3
* update yarnlock
* bump to alpha.4
* feat(react-theme) Add border1 color token for shared colors (#20963)
* feat(react-theme) Add border1 color token for shared colors
* Change files
* fix: PopupContent to properly pass ref (#20866)
* fix: PopupContent to properly pass ref
* add changelog
* fix ref placement
* fix: ref placement
* handle inner ref for foxus components
* apply review
* fix proptype
* fix popup ref
* fix(Menu): Focus on first menu item on click (#20955)
* fix(Menu): Focus on first menu item on click
* Change files
* use single effect
* fix conditions
* Set borderRadius on ToolbarItem and icon-only MenuItem (#20422)
* Set borderRadius on toolbars
* Add changelog entry
* fix(makeStyles): correctly handle computed keys (#20969)
* fix(makeStyles): correctly handle computed keys
* Change files
* Update change/@fluentui-babel-make-styles-e24db7df-1613-42dd-aa1a-a4ddb5b85b83.json
* add fixtures for function
* feat(Accordion): Do not render inactive content (#20783)
* feat(Accordion): Do not render inactive content
* changelog
* ut
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
* Support ability to set a context menu item's event target to the Menu root (#20161)
* applying package updates
* fix(Badge): Add uniform padding and modify gaps (#20974)
* fix(Badge): Add uniform padding and modify gaps
Adds uniform padding around the badge to achieve the desired effect for
circular icon and one character badges.
The wider variants still look OK. I'm not sure if they are pixel
perfect, but it's the only way I could find that would achieve the
desired effect for icon only badges 🤷
* Change files
* revert bagde stories
* update counter badge styles
* update counter badge styles
* Add scaffold project for Converged SpinButton (#20940)
* Add scaffold project for Converged SpinButton
Just the basic setup for the SpinButton component.
* update SpinButton tsconfig
Updates the excludes in SpinButton's tsconfig.lib.json file to match
other converged components (e.g., react-button).
* add storybook config for SpinButton
The lint command was failing without the Storybook tsconfig.
* update default SpinButton tests.
Adds snapshots and adds some information to pass conformance tests.
* update API file.
* Update packages/react-spinbutton/README.md
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* Upgrade to typescript 4.3 (#20909)
* fix: z-index in accordion header renders above content (#20587)
* Change files
* Fixes z-index in headers above content region
* Shared style for position.
* applying package updates
* fix(bundle-size): incorrect promise test (#20982)
`buildFixture` was trying to test that the function would throw
asynchronously. However, the `expect` call was never awaited to the test
always passed and the jest was left with an unresolved promise error
* docs(Accessibility) Add more explanation links to V9 accessibility stories (#20975)
* docs(Accessibility): Add more explanation links to Accessibility storybook
* Change files
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
* applying package updates
* fix(makeStyles): improve return types for shorthand functions (#21001)
* fix(makeStyles): improve return types for shorthand functions
* Change files
* remove "s" suffix, fix type name
* react-tabs mvp (#20939)
* Create react-tabs packages and components
* Basic tab with selection
* Updated to use css after for indicator
* Added support for vertical
* Add support for verticalTabContent
* Add appearance and basic subtle style
* Supported icon slot
* Added content slot for layout
* Added badge tab
* Supported size for tablist and tab
* Added size stories
* Improved story descriptions
* Support small size defaults
* Support focus with arrow keys
* Improved props documentation
* Undo column update on overlap
* Added some initial tests
* Added initial vr-tests for tabs
* Reduced type complexity in TabList
* Merge fixes
* Removed unready features
* Simplified styling
* Support small style
* Migrated to TS solution
* Updated to latest padding figma changes
* Updates
* Updated vr-test stories
* Updated documentation and tests
* PR updates
* Revert to master yarn.lock
* Fixing synpack issue
* added tabs dependency
* Moving to make-styles shorthands.
* Refactor Checkbox to use `label` as a slot instead of the root (#20904)
Refactor/clean up the `Checkbox` component.
* Update label to be a slot instead of the root element. This changes the API from `<Checkbox>Example</Checkbox>` to `<Checkbox label="Example" />`
* Rework the structure of the control to not require wrapper div inside
* Rework the styling, and fix some small inconsistencies in the styling from the figma
* Refactor tests
* Update and clean up storybook stories
* Also fix a minor bug in the consistent-callback-args conformance test, where it wasn't properly handling string literal types.
* applying package updates
* Add support for Dialog to be zoomed up to 400% (#20722)
* update dialog styles to be responsive
* update dialog styles to be responsive
* update examples styles overrides
* update changelog
* update examples and styles
* update imports paths
* update flex styles
* remove context condition for rtl
* update best practices, fix exmaple with double scrollbars
* move examples to public section
Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
* fix: Animation to properly pass ref to root slot (#20972)
* fix: animation ref
* add changelog
* chore: remove findDomNode from FocusZone (#20946)
* chore: remove find dom node
* fix is conformant tests
* disbale tests
* fix: is conformant config
* disable as-renders-fc
* enable ref tests
* fix: label ref
* disabled specific tests
* disable test for animation
* Update packages/fluentui/react-bindings/src/FocusZone/FocusZone.tsx
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* fix: formatting
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* feat(Chat): Child behaviors for item and message (#20998)
* feat(Chat): Child behaviors for item and message
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
* Fix #20043 - Checkbox checkmark should have opacity 0 in indeterminate state (#21005)
* Made checkmark opacity 0 for indeterminate
* Change files
* Updated snapshot
* Upgrade to node 14 (i.e. revert "Revert to node 12") (#21021)
* Revert "fix: Revert to node 12 (#20781)"
This reverts commit 1fb5698fb5b996402373339e5f7698595f6a76d4.
* Change files
* Update change/@fluentui-eslint-plugin-85794a53-50f5-4b78-b297-dfc48bad0916.json
Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
* chore: Add `exclude` argument for version bump generator (#21019)
* chore: Add `exclude` argument for version bump generator
* Update tools/generators/version-bump/README.md
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* Update tools/generators/version-bump/schema.json
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* Update tools/generators/version-bump/schema.ts
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* use assertion for versions
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* fix: prevent disabled flipper from emitting event (#21003)
* fix: prevent disabled flipper from emitting event
* Change files
* babel-make-styles: Correctly handling sequence expressions (#21010)
* babel-make-styles: Correctly handling sequence expressions.
* Change files
* Update packages/babel-make-styles/src/plugin.ts
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Add aria-multiselectable to multiselect Combobox (#21024)
* Fixed typo (#21030)
* eslint-plugin: classify stories as examples not tests (#20681)
* chore: migrate to jest v25, v26 (#20716)
* applying package updates
* chore: prepare release react-northstar 0.60.0 (#21017)
* chore: prepare release react-northstar 0.60.0
* @fluentui/react-northstar_v0.60.0
* update npm registry url
* Revert "@fluentui/react-northstar_v0.60.0"
This reverts commit 87a64d543beef20c9b47bf7cdae90e478e048419.
* pin cra version
* diable cra tests
* Revert "pin cra version"
This reverts commit ca90ce12c984b905c9eabcf4a5566dfdbb7423bb.
* @fluentui/react-northstar_v0.60.0
* Update packages/fluentui/projects-test/src/index.ts
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
* Update packages/fluentui/projects-test/src/index.ts
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
* Update packages/cra-template/package.json
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
* chore: Remove enzyme from react-utilities tests (#21060)
* chore: Remove enzyme from react-utilities tests
* remove enzyme
* Change files
* Update just-scripts and remove some workarounds for customizing build tasks (#21023)
* Combobox: Provide a callback to listen to raw text input (#21069)
* Use a custom cache directory for each test that runs yarn (#20902)
* Fix test issues discovered while trying to test React 17 (take 2) (#21032)
* Input: implement primary slot (#20863)
* Add screener tests for react-checkbox (#21011)
* Add screener tests for react-checkbox
* Use icons from react-icons for the indicator
* Fix up some styling for Checkbox
* applying package updates
* Added missing descriptions to divider stories (#21067)
* Added missing descriptions to divider stories
* Change files
* breaking: MenuTrigger must be the first child of the `Menu` (#21096)
* breaking: MenuTrigger must be the first child of the `Menu`
In order to support different types of menu trigger such as split
items and have more flexibility with the component, the `Menu` component
no longer does a runtime check to find a `MenuTrigger`component.
Now the usage of the `Menu` must have `MenuTrigger` as the first child.
This is already implicitly the case in all the documentation examples.
Added a documentation snippet to state this explicitly in the `Menu`
docs.
Added a test to make sure that the usage of `Menu` without a
`MenuTrigger` is still possible and does not regress.
* Change files
* add docstring
* Update packages/react-menu/src/components/Menu/useMenu.tsx
* add splitbutton labels to commandbar example (#20683)
* Fixing React.Fragment wrapping StackItems inside a Stack. (#21090)
Co-authored-by: Angel Duran <aduran@microsoft.com>
* applying package updates
* Restructure RFC Folder (#21022)
* restructure rfc folder
* move files around, move assets folder back as subfolder of rfc
* update asset file imports
* rename theme shape png files
* move theme shape pngs to assets folder
* update file imports for theme shape RFC
* move a11y and testing files to react-components folder
* Add new css properties into `IRawStyleBase` (#18915)
* feat: Add new css properties into `IRawStyleBase`
- justify-items
- place-content
- place-items
- place-self
* Change files
* docs: Change merge-styles.api.md
* fix(SwatchColorPicker): use radio roles on single-row swatches (#20829)
* feat: MenuSplitItem component (#21095)
* feat: MenuSplitItem implementation
* Change files
* fix type
* add consistent styling
* 3 prototypes
* unstable menu split group
* add role presentation
* Change files
* add e2e tests
* fix tests
* handle single child
* add test for custom target
* remove unstable
* update changefiles
* use targetDocument
* update spec
* update stories
* add vr test
* don't call hook conditionally
* fix lint and add aria label
* pr suggestions
* use role="group"
* chore: update package name in readme (#21122)
* Input: add stories and restrict type prop (#21072)
* Fix disabled Input styles (#21139)
* feat: generated react-dialog package (#20954)
* feat: generated react-dialog package
* chore: run package migration
* fix: radio-dialog conformance
* docs: update react-dialog api docs
* applying package updates
* makeStyles: do not use shorthand expansion (#20539)
* fix: update types to disable shorthands
* address PR review comments
* fix useTabStyles.ts
* fix stories
* fix styles for checkbox
* do not use padding in tests
* Change files
* react-tabs small improvements (#21093)
* Improvements based on previous PR feedback
* Removed old imported type
* RFC: Standardize onChange handlers for input components (#20966)
* react-components: Stop generating a folder with a file inside and instead flatten to a single file for 'Migrating from @fluentui/react v8' storybook story (#21158)
* react-components: Stop generating a folder with a file inside and instead flatten to a single file for 'Migrating from @fluentui/react v8' storybook story.
* Change files
* Updating change file.
* Update Avatar to use resizable icons (#21160)
Update Avatar to use a resizable icon for its default Person icon.
* Publish react-input and add to react-components under unstable (#21142)
* Change radio team owner (#20950)
* Remove outdated boilerplate from vnext components (#21150)
* Slider refactor (#20657)
* init refactor of slider
* start bringing marks back in
* story cleanup
* cleanup
* update spec
* Change files
* update api
* Apply suggestions from code review
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
* move stateful styles into css variables
* add slider to react-components main export
* cleanup and add ticks
* change var name
* cleanup snaps
* remove ranged fixture
* fix package version
* fix prettier
* add primary slot
* api update
* react components api
* revert react components to remove slider
* merge conflicts
* update api md
* Delete @fluentui-react-components-2b36a74e-2147-4df0-a4f2-ab6c12c56033.json
* cleanup testing
* slider types
* simplify onChange prop
* update api
* move back to onChange with data
* remove unused stuff
* Update packages/react-slider/src/components/Slider/Slider.types.ts
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
* Update packages/react-slider/src/components/Slider/Slider.types.ts
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
* refactor css variables
* api update fix build
* fix RTL issues
* remove utils, cleanup tests, update ids
* remove unnecessary code
* new snaps
* fixed thumb alignment, moved input to bottom of DOM stack
* Update packages/react-slider/src/components/Slider/Slider.test.tsx
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
* Update packages/react-slider/src/components/Slider/Slider.types.ts
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
* updated stories with descriptions, fixed stateful bug
* updated tests
* fixed pretty
* api
* remove old snaps
* snaps
* update snaps
* test clean up
* remove unused methods
* change private to true
* add outline for HC
* cleanup linting
* snaps
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
* RFC: no functions in makeStyles() (#20651)
This RFC targets to solve extensibility of theme of customers and simplify `makeStyles()` itself. This was already briefly discussed sometime ago, https://github.com/microsoft/fluentui/pull/19752#discussion_r709513133.
---
[RFC Preview](https://github.com/microsoft/fluentui/blob/rfc/mk-drop-fn/rfcs/convergence/make-styles-no-functions.md)
* react-theme: Exporting token to css variable mapping (#21026)
* react-theme: Exporting token to css variable mapping.
* Change files
* Update change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Moving tokens.ts into src/ and out of src/global.
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* react-badge: Replacing use of functions in makeStyles with direct use of tokens (#21038)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-badge: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Fixing build error.
* react-avatar: Replacing use of functions in makeStyles with direct use of tokens (#21037)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-avatar: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* vr-tests: Replacing use of functions in makeStyles with direct use of tokens (#21028)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `vr-tests` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-components: Replacing use of functions in makeStyles with direct use of tokens (#21042)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-components` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-label: Replacing use of functions in makeStyles with direct use of tokens (#21046)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-label: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Fixing build error.
* docs: react-radio spec (#20555)
* docs: react-radio spec
* Added images for radio variants
* Updated spec: added info and restructured the doc
* Updated dom structure
Co-authored-by: tringakrasniqi <tkrasniqi@microsoft.com>
* RFC: Rename and move out `makeStyles` to a separate repo (#20882)
* RFC: Rename and move out `makeStyles` to a separate repo
* Apply suggestions from code review
Co-authored-by: ling1726 <lingfangao@hotmail.com>
* Update rfcs/convergence/move-out-n-rename-makestyles.md
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
* chore: bump react-transition-group from 4.3.0 to 4.4.1 (#21187)
* update react-transition-groupt from 4.3.0 to 4.4.1
* chglog
* feat(react-conformance): add tsconfigDir config + change tsconfig default dir to componentPath (#21113)
* add tsconfigDir + change tsconfig default path
* Change files
* update comment
* update comment
* fix(ChatMessage): use chat context as default value when user prop is explicitly undefined (#21189)
* fix input prop sequence
* chglog
* react-card: Replacing use of functions in makeStyles with direct use of tokens (#21040)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-card` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-divider: Replacing use of functions in makeStyles with direct use of tokens (#21043)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-divider` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-image: Replacing use of functions in makeStyles with direct use of tokens (#21044)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-image` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-link: Replacing use of functions in makeStyles with direct use of tokens (#21047)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-link` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* Ignore stories and tests when requiring change files (#21073)
* react-spinbutton: Replacing use of functions in makeStyles with direct use of tokens (#21055)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-spinbutton: Replacing use of functions in makeStyles with direct use of tokens.
* Moving tokens.ts into src/ and out of src/global.
* react-input: Replacing use of functions in makeStyles with direct use of tokens (#21045)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-input: Replacing use of functions in makeStyles with direct use of tokens.
* Extra changes.
* Extra changes.
* Change files
* remove old Input stories
* Updating change file
Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
* react-popover: Replacing use of functions in makeStyles with direct use of tokens (#21049)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-popover: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Update change/@fluentui-react-popover-06bae6cd-27f5-4e6b-90fa-9f12830ea985.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* react-portal: Replacing use of functions in makeStyles with direct use of tokens (#21050)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-portal: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-react-portal-3d88ca5d-d80e-40b2-9cb7-8bb39a62da74.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* react-positioning: Replacing use of functions in makeStyles with direct use of tokens (#21051)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-positioning: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Update @fluentui-react-positioning-269c73ba-d092-4c18-8b6a-dd47c0e3daab.json
* react-provider: Replacing use of functions in makeStyles with direct use of tokens (#21052)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-provider: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Fixing build error.
* Update change/@fluentui-react-provider-a155c5ae-911a-4b9c-b794-48e8f037db66.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Delete outdated Input stories again...?
* Restore proper Input stories file
* Tooltip: Add screener tests and fix high contrast border (#21086)
* Add screener stories for Tooltip
* Add a border to Tooltip using `colorTransparentStroke`, which is transparent in all themes except high contrast
* Fix `createArrowStyles`:
* Use `width` _and_ `height` to set the arrow's size instead of `aspectRatio`, which wasn't working as expected, and was producing a zero-size tooltip.
* Accept border styling parameters, and apply them to the arrow's border.
* feat: add `search` web component (#21177)
* feat: add search web component
* react-tabster: Replacing use of functions in makeStyles with direct use of tokens (#21035)
* react-theme: Exporting token to css variable mapping.
* Change files
* Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Removing change files for private packages.
* Readding unintended deleted file.
* Renaming rule parameter to style in createCustomFocusIndicatorStyle so that it better adheres to type name.
* react-tooltip: Replacing use of functions in makeStyles with direct use of tokens (#21058)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-tooltip: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Update @fluentui-react-tooltip-3983a8eb-9223-4f77-8e3f-30c0082715c6.json
* react-radio: Replacing use of functions in makeStyles with direct use of tokens (#21053)
* react-theme: Exporting token to css variable mapping.
* Change files
* Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster.
* Change files
* react-radio: Replacing use of functions in makeStyles with direct use of tokens.
* Moving tokens.ts into src/ and out of src/global.
* Moving tokens.ts into src/ and out of src/global.
* Removing change files for private packages.
* Readding unintended deleted file.
* Fixing build error.
* react-slider: Replacing use of functions in makeStyles with direct use of tokens (#21054)
* react-theme: Exporting token to css variable mapping.
* Change files
* Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster.
* Change files
* react-slider: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Moving tokens.ts into src/ and out of src/global.
* Removing change files for private packages.
* Readding unintended deleted file.
* Fixing build error.
* react-button: Replacing use of functions in makeStyles with direct use of tokens (#21039)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026 and #21035._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-button` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-switch: Replacing use of functions in makeStyles with direct use of tokens (#21056)
* react-theme: Exporting token to css variable mapping.
* Change files
* Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster.
* Change files
* react-switch: Replacing use of functions in makeStyles with direct use of tokens.
* Moving tokens.ts into src/ and out of src/global.
* Moving tokens.ts into src/ and out of src/global.
* Removing change files for private packages.
* Readding unintended deleted file.
* Updating API.
* Change files
* codemods: Removing makeStyles related codemods as they are not relevant anymore (#21201)
* Removing makeStyles related codemods as they are not relevant anymore.
* Change files
* applying package updates
* docs(.github): update PR template (#21175)
* docs(.github): update PR template
* fixup! docs(.github): update PR template
* react-accordion: Replacing use of functions in makeStyles with direct use of tokens (#21036)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026 and #21035._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-accordion` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-menu: Replacing use of functions in makeStyles with direct use of tokens (#21048)
#### Pull request checklist
- [x] Addresses an existing issue: Implements part of #20651
- [x] Include a change request file using `$ yarn change`
#### Description of changes
_This PR is part of a series of PRs that split #20918 into smaller PRs._
_This PR follows #21026 and #21035._
This PR replaces the use of functions in `makeStyles` calls in the `@fluentui/react-accordion` package with direct use of the `tokens` exported from `@fluentui/react-theme`.
* react-components: Cleaning up change file to indicate change as type none since the change was affecting just stories and not published code. (#21203)
* chore(deps): bump copy-props from 2.0.4 to 2.0.5 (#21202)
Bumps [copy-props](https://github.com/gulpjs/copy-props) from 2.0.4 to 2.0.5.
- [Release notes](https://github.com/gulpjs/copy-props/releases)
- [Changelog](https://github.com/gulpjs/copy-props/blob/master/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/copy-props/compare/2.0.4...2.0.5)
---
updated-dependencies:
- dependency-name: copy-props
dependency-type: indirect
...
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
* GroupedList: removes aria-label attribute when rowgroup is empty. (#21176)
* remove aria-label when role is removed
* Change files
* update snapshot
* Update react-icons usage to resizable icons (#21074)
* Update react-icons usage to resizable icons
* Change files
* Update Avatar snapshot
* Update Menu snapshots
* Revert Menu snapshots and icon
* revert avatar changes
* Tooltip: Move arrowHeight and tooltipBorderRadius into a common constants.ts file (#21204)
Move the arrowHeight and tooltipBorderRadius constants into ./private/constants.ts. They aren't exported from the package, but are exported for use within the component code.
* Remove outdated RFC: Improved type checking for component props (#21198)
Removing RFC: Improved type checking for component props #17232, as it was superseded by RFC: Simplify prop merging with slots #18642
* Add orient to slider input type (#21209)
* Add orient to slider input type
* update api
* removed slider change files now that slider is private
* address feedback
* snaps
* react-checkbox: Replacing use of functions in makeStyles with direct use of tokens (#21041)
* react-theme: Exporting token to css variable mapping.
* Change files
* Updating packages based on changes to focusIndicator functions to remove functions from makeStyles in @fluentui/react-tabster.
* Change files
* react-checkbox: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Removing change files for private packages.
* Readding unintended deleted file.
* Fixing build error.
* Change files
* Update @fluentui-react-checkbox-98de0bef-6373-4cbf-aa25-a2f8c808a0ac.json
* Removing makeStyles changes, replacing wrong values with shorthands in useCheckboxStyles.
* applying package updates
* chore: bump node-sass to v6 (#21112)
* chore: bump node-sass to v6
* use Webpack 5, bump sass-loader
* chore: update caniuse-lite (#21224)
* test changelog
* browserslist update
* Revert "test changelog"
This reverts commit f55fcb9702beeb16dbb758c975943c527392b1a5.
* fix prj test
* Revert "fix prj test"
This reverts commit 7028353a1e8443f4839c19b0c654cd92567384b4.
* fix(Animation): use `useMergedRefs` for Transition nodeRef (#21173)
* use merged refs
* chglog
* type+ref update
* fix test and add another ref
* fix changelog
* fix changelog
* fix changelog
* User/nojittip/fix focus bug (#20640)
* fix last point focus bug and draw ordering of points
* update snapshots
* Change files
* Pickers Suggestions: add searchForMoreText button to the suggestions listbox. (#21199)
* Stop exporting Commons types from react-components (#21195)
* react-text: Replacing use of functions in makeStyles with direct use of tokens (#21057)
* react-theme: Exporting token to css variable mapping.
* Change files
* react-text: Replacing use of functions in makeStyles with direct use of tokens.
* Change files
* Moving tokens.ts into src/ and out of src/global.
* Fixing build error.
* Update @fluentui-react-text-9e64c144-eefa-4b74-a9ae-1fe283204ee7.json
* Input: fix issues from a11y review (#21205)
* applying package updates
* Combobox(v8): adds check so it cannot be opened if disabled #17955 (#20973)
* Added check for disabled prop
* Change files
* Removing unnecessary check
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
* fix: MenuItemWrapper should not pass-through 'on' prop (#21170)
* fix: MenuItemWrapper should not pass-through 'on' prop
* Update packages/fluentui/CHANGELOG.md
* Add workaround for Cypress issue on Windows (non-WSL) (#21143)
* make-styles: Removing functions from makeStyles (#21239)
* make-styles: Removing functions from makeStyles.
* Change files
* Updating based on removal of functions from makeStyles.
* Change files
* Updating output with missed blank lines.
* Update change/@fluentui-jest-serializer-make-styles-85827bea-cbfa-43f7-960b-64286976e066.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-make-styles-578dffd4-f983-4e4b-b011-13b6e32d232b.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-make-styles-webpack-loader-7e71576a-78fa-49a0-97ea-49226e6b7fea.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* Update change/@fluentui-react-make-styles-fabf9f28-9def-489f-8068-06701c956ecf.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* (web-components) Update tab panel to base type size (#21180)
Update tab panel to base type size
* tokens: Removing need to cast fontWeight token as React.CSSProperties['fontWeight'] when using it inside of a makeStyles call (#21217)
* tokens: Removing need to cast fontWeight token as React.CSSProperties['fontWeight'] when using it inside of a makeStyles call.
* Change files
* Updating API.
* Making it so that fontWeight can handle string as a type in makeStyles calls.
* Change files
* Removing unnecessary changes in tokens.ts.
* Removing other casts as fontWeight that came in after the PR was originally published.
* react-button: remove fixed-size icons (#21221)
Remove the fixed-sized icons from react-button's stories. The Button's styles already apply a default size for the icons.
* react-menu: remove fixed-size icons (#21222)
Add fontSize styling to MenuItem's icon and submenuIndicator slots. This provides a default size for icons provided by the user.
* Remove fixed-size icons from TabList stories (#21223)
Replace fixed size icons in react-tabs with resizable icons
* react-badge: Apply fontSize styling to icon slot (#21219)
Add fontSize styling to Badge's icon slot. This provides a default size for user-defined icons.
* applying package updates
* Remove slotNames param from getSlots, and delete {component}ShorthandProps arrays (#21134)
Remove slotNames param from getSlots, and delete {component}ShorthandProps arrays
#### Issue
Currently, `getSlots` requires a second `slotNames` parameter, which is redundant with the keys of the `state.components` object. Not only is this unnecessary repetition of the same information, it's also not possible to use TypeScript to catch mistakes of accidentally leaving out one or more slot names from the array. This can lead to unexpected and hard to debug bugs.
#### Description of changes
* compose/getSlots.ts: `getSlots` uses the keys of `state.components` to get the list of slots, rather than a second `slotNames` param.
* compose/types.ts: The `components` property is now required on the ComponentState object. This is enforced to be an exhaustive list of every slot and its type (so it's not possible to accidentally miss a slot, or forget to include `components` at all).
* This required adding the components array to a few components that had previously omitted it because they only had a single `root` slot that's a `<div>`. IMO it's better to be explicit even for the simple case.
* Delete all of the now unnecessary `{component}ShorthandProps` arrays.
* Replace AccordionHeaderExpandIcon with ChevronRightRegular from react-icons (#21218)
Remove AccordionHeaderExpandIcon, and use the resizable ChevronRightRegular icon from react-icons instead. And add fontSize styling to AccordionHeader's icon slots, so custom resizable icons can be used.
* breaking: stop exporting useTheme() hook (#21257)
* breaking: stop exporting useTheme hook
* Change files
* update API
* Overhaul v8 icon doc text and add search for SVG icons (#21211)
* SearchBox: fix event handling regressions in v8 (#21268)
* Add eslint rule capability to ban exports of Commons types from react-components (#21196)
* applying package updates
* chore(react-theme) Add theme tokens bundle size fixture (#21186)
* chore(react-theme) Add theme tokens bundle size fixture
* Change files
* chore(deps): bump follow-redirects from 1.7.0 to 1.14.7 (#21273)
* docs(react-card): Add Alpha notice to docs (#21259)
* chore: re-enable react-storybook-addon and babel-make-styles for react-components (#21247)
* fix(react-storybook-addon): make devloop and package usage within storybook work
* chore(react-components): make sb start work with babel-make-styles and react-sb-addon
* Change files
* breaking: remove "unstable_cssPriority" from makeStyles() (#21263)
* breaking: remove "unstable_cssPriority" from makeStyles()
* Change files
* update API
* adopt API changes from makeStyles
* Change files
* remove wrapping functions
* update changelog entry
* refactor(babel-make-styles): simplify evaluation (#21144)
* refactor(babel-make-styles): simplify evaluation
* Update packages/babel-make-styles/src/plugin.ts
* Change files
* fix fixtures
Co-authored-by: KHMakoto <Humberto.Morimoto@microsoft.com>
* feat: add storybook runner wrapper for vNext packages consumption (#21265)
* feat(scripts): add vNext start-storybook wrapper runner
* feat(tools): update migrate-converged-pkg generator with modified storybook command
* fixup! feat(scripts): add vNext start-storybook wrapper runner
* fixup! fixup! feat(scripts): add vNext start-storybook wrapper runner
* Custom style for AreaLine, Point and Point Line in Area Chart (#21249)
* Custom Line data style implementation for Area chart
* circleData and crossLineData prop added for custom style to area chart selected circle and its line
* test snapshot file
* Change files
* Prop name changed and example updated in area chart styled example
* Area Chart styled example updated
Co-authored-by: Sagar Charde <v-scharde@microsoft.com>
* Remove fixed-size icons from vr-tests (#21272)
Replace the fixed sized icons with resizable versions in vr-tests
* fix an issue with ChoiceGroup and focus rectangles (#21215)
* fix an issue with ChoiceGroup and focus rectangles
When ChoiceGroup was the descendant of another element that had focus
it would incorrectly display a focus rect around the previously selected
option when using the mouse to select options.
This happened because a fix from #20859 that tested for sibling elements
of ChoiceGroup only tested if FocusEvent.relatedTargets were descendants
of the ChoiceGroup but did not test if the relatedTarget was an ancestor
of the ChoiceGroup.
This change updates the sibling test to ensure that the relatedTarget
is both not a descendant of the ChoiceGroup and not an ancestor.
* Change files
* Update custom ChoiceGroup example
This commit changes the custom ChoiceGroup example to use an Icon rather
than a Dropdown in the ChoiceGroup option as embedding a control like a
Dropdown (or something more complex) is not a pattern we want to
encourage.
* Update FocusTrapZone focus handling in ChoiceGroup
ChoiceGroup needs to implement special focus handling when used in a
FocusTrapZone to reimplement native browser behavior as detailed in 20859.
However, the change in 20859 introduced other issues when focusing ChoiceGroups.
Ultimately the issue with the ChoiceGroup behavior was that it was
inferring when FocusTrapZone was giving it focus and this inference was
not always correct.
This change makes the focus from FocusTrapZone explicit while testing for
it opt in so this change will not affect FocusTrapZone generally.
A data attribute is added to each of the bumpers in FocusTrapZone so
ChoiceGroup can easily test if it is receiving focus from FocusTrapZone.
* Update snapshots
* Update component snapshots
* Update packages/react/src/components/ChoiceGroup/ChoiceGroup.base.tsx
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
* Update styling in ChoiceGroup custom example.
* Update ChoiceGroup snapshot
* Run Prettier on ChoiceGroup.
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
* applying package updates
* feat: remove mergeThemes API (#21278)
* feat(react-theme): remove mergeThemes API
* feat(react-components): remove mergeThemes from public API
* refactor(react-provider): replace mergeThemes functionality from react-theme
* Change files
* Update change/@fluentui-react-theme-4896497c-3947-4f7c-b2af-97b5cbf1c335.json
* Update change/@fluentui-react-provider-d474a580-e643-4191-96db-4d4abf014352.json
* Update change/@fluentui-react-components-f34f712d-15c2-4cc9-be35-95c55efad70b.json
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
* feat: redo FluentProvider theme api (#21286)
* fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation
* fix(react-shared-contexts): make the ThemeContext TS API reflect runtime and remove redundant ThemeContextValue
* Change files
* fixup! fix(react-shared-contexts): make the ThemeContext TS API reflect runtime and remove redundant ThemeContextValue
* fixup! fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation
* fixup! fixup! fix(react-provider):make the Provider#theme TS API reflect runtime and add warning if there is a violation
* fix(MenuItemWrapper): selected items to have active styles (#21287)
* fix(MenuItemWrapper): selected items to have active styles
* add changelog
* use random port provided by express (#21283)
* non-repeated link names on Fluent home page (#21293)
* Properly pass menu target to submenu items (#21162)
* Properly pass menu target to submenu items
* Change files
* [web-components]: Remove unused declared variables in combobox (#21294)
* remove unused vars causing merge issues
* Change files
* Added aria-orientation to divider (#21292)
* Added aria-orientation to divider
* Change files
* Fixed vertical tests to be vertical
* fix(Accordion): removes children as slot from AccordionHeader (#21285)
* Removes children as a slot from AccordionHeader
* Change files
* Updates API
* Updates snapshot
* temp fix: resolve mini-css-extractor-plugin to an older version for cra-template & projects-test (#21295)
* temp fix: resolve mini-css-extractor-plugin to older version
* Change files
* add temp fix to northstar projects test
* remove console log
* refactor: remove unused theme-proxy functionality in makeStyles() (#21274)
* remove proxies
* Change files
* applying package updates
Co-authored-by: Fluent UI Build <fluentui-internal@service.microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: chassunc <86579954+chpalac@users.noreply.github.com>
Co-authored-by: ling1726 <lingfan.gao@microsoft.com>
Co-authored-by: André Dias (he/him) <andredias@microsoft.com>
Co-authored-by: Elizabeth Craig <elcraig@microsoft.com>
Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>
Co-authored-by: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Co-authored-by: Sean Monahan <93940821+spmonahan@users.noreply.github.com>
Co-authored-by: Martin Hochel <martinhochel@microsoft.com>
Co-authored-by: Peter Dräxler <peter@draxler.ml>
Co-authored-by: André Dias (he/him) <39736248+andrefcdias@users.noreply.github.com>
Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Co-authored-by: Owen Campbell <owcampbe@microsoft.com>
Co-authored-by: tomi-msft <66456876+tomi-msft@users.noreply.github.com>
Co-authored-by: Amber <yuanboxue@microsoft.com>
Co-authored-by: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Co-authored-by: Justin Slone <40304143+JustSlone@users.noreply.github.com>
Co-authored-by: Jan Pilzer <Hirse@users.noreply.github.com>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Thomas Michon <tmichon@microsoft.com>
Co-authored-by: Rob Barber <69695238+robarbms@users.noreply.github.com>
Co-authored-by: Geoff Cox (Microsoft) <gcox@microsoft.com>
Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
Co-authored-by: Anna Kellerstein <anna.kellerstein@microsoft.com>
Co-authored-by: Anna Kellerstein <annkelle@microsoft.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Co-authored-by: Romans Pokrovskis <motivated.it@gmail.com>
Co-authored-by: dennis-pg <dennisgeorge.mec@gmail.com>
Co-authored-by: Angel Duran <angeldm03@hotmail.com>
Co-authored-by: Angel Duran <aduran@microsoft.com>
Co-authored-by: Tristan <tristan.watanabe@gmail.com>
Co-authored-by: yifanwww <yifanw1101@gmail.com>
Co-authored-by: Peter Varholak <peter.varholak@gmail.com>
Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Norawit Jittipairoj <nojittip@microsoft.com>
Co-authored-by: Tobias Smolka <37370256+tosmolka@users.noreply.github.com>
Co-authored-by: Brian Heston <47367562+bheston@users.noreply.github.com>
Co-authored-by: Sagar Charde <scharde20293@gmail.com>
Co-authored-by: Sagar Charde <v-scharde@microsoft.com>
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Co-authored-by: Marion Le Pontois <marion.lepontois@skatteetaten.no>
2 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is a modified version of some work @tomi-msft and I started in #20862:
Background: today, the text of the v8 doc site page about icons is kind of confusing and outdated in places, and it would have gotten a lot more complex if we added the new
@fluentui/react-iconsSVG icon set to the same page (as we started to do in #20862). Even though we ultimately we decided to put the react-icons docs in the v9 storybook instead (NOT included in this PR), some of the text clarification I'd started working on for the other PR should still be helpful.I also reused some of the code we started working on in #20862 to display SVG icon sets in the icon grid/search at the bottom of the page, and modified it to use the existing
IconGridcomponent to show the icons from@fluentui/react-icons-mdl2and@fluentui/react-icons-mdl2-branded.