fix: z-index in accordion header renders above content #20587

robarbms · 2021-11-11T22:54:53Z

Pull request checklist

Addresses an existing issue: Fixes fix: Wrong z-axis order for fluent-accordion in @fluentui/webcomponents #20376
Include a change request file using $ yarn change

Description of changes

Using position: relative to pop start, end and icon elements above button::before element.

Focus areas to test

Using a fluent-select inside of the content region of fluent-accordion.

<fluent-accordion>
  <fluent-accordion-item expanded>
    <div slot="heading">Content 1</div>
    <fluent-select>
      <fluent-option>Option 1</fluent-option>
      <fluent-option>Option 2</fluent-option>
      <fluent-option>Option 3</fluent-option>
    </fluent-select>
  </fluent-accordion-item>
  <fluent-accordion-item>
    <div slot="heading">Content 2</div>
  </fluent-accordion-item>
</fluent-accordion>

This will cause the select drop down to fall under the Content 2 heading.

fabricteam · 2021-11-11T23:03:09Z

📊 Bundle size report

_{🤖 This report was generated against 3360b45ec159250b1346c91afad7dce138e6bc20}

size-auditor · 2021-11-11T23:07:07Z

Asset size changes

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

Baseline commit: 3360b45ec159250b1346c91afad7dce138e6bc20 (build)

codesandbox-ci · 2021-11-11T23:22:51Z

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 99a47c7:

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

fabricteam · 2021-11-11T23:27:46Z

Perf Analysis (`@fluentui/react`)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	mount	120	151	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	699	801	5000
BaseButton	mount	759	816	5000
Breadcrumb	mount	2284	2285	1000
ButtonNext	mount	451	420	5000
Checkbox	mount	1317	1344	5000
CheckboxBase	mount	1122	1144	5000
ChoiceGroup	mount	3636	4027	5000
ComboBox	mount	797	831	1000
CommandBar	mount	8798	8737	1000
ContextualMenu	mount	6930	7193	1000
DefaultButton	mount	1022	947	5000
DetailsRow	mount	3145	2962	5000
DetailsRowFast	mount	3139	3032	5000
DetailsRowNoStyles	mount	2921	2891	5000
Dialog	mount	2085	2210	1000
DocumentCardTitle	mount	144	149	1000
Dropdown	mount	2670	2777	5000
FluentProviderNext	mount	1550	1515	5000
FluentProviderWithTheme	mount	120	151	10	Possible regression
FluentProviderWithTheme	virtual-rerender	99	109	10
FluentProviderWithTheme	virtual-rerender-with-unmount	165	197	10
FocusTrapZone	mount	1569	1574	5000
FocusZone	mount	1488	1607	5000
IconButton	mount	1479	1490	5000
Label	mount	332	328	5000
Layer	mount	2535	2554	5000
Link	mount	417	449	5000
MakeStyles	mount	1636	1601	50000
MenuButton	mount	1281	1279	5000
MessageBar	mount	1699	1767	5000
Nav	mount	2848	2848	1000
OverflowSet	mount	953	989	5000
Panel	mount	2094	2086	1000
Persona	mount	747	676	1000
Pivot	mount	1246	1273	1000
PrimaryButton	mount	1116	1127	5000
Rating	mount	6643	6780	5000
SearchBox	mount	1133	1187	5000
Shimmer	mount	2168	2197	5000
Slider	mount	1699	1584	5000
SpinButton	mount	4262	4557	5000
Spinner	mount	400	400	5000
SplitButton	mount	2765	2736	5000
Stack	mount	456	450	5000
StackWithIntrinsicChildren	mount	1486	1490	5000
StackWithTextChildren	mount	3821	3850	5000
SwatchColorPicker	mount	8958	9760	5000
TagPicker	mount	2313	2268	5000
TeachingBubble	mount	11179	11234	5000
Text	mount	396	395	5000
TextField	mount	1212	1243	5000
ThemeProvider	mount	1042	1071	5000
ThemeProvider	virtual-rerender	540	546	5000
ThemeProvider	virtual-rerender-with-unmount	1606	1608	5000
Toggle	mount	721	718	5000
buttonNative	mount	134	407	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AlertMinimalPerf.default	238	201	1.18:1
RefMinimalPerf.default	214	183	1.17:1
TextAreaMinimalPerf.default	443	378	1.17:1
AttachmentMinimalPerf.default	142	123	1.15:1
ButtonSlotsPerf.default	511	443	1.15:1
TableMinimalPerf.default	353	307	1.15:1
IconMinimalPerf.default	527	467	1.13:1
DropdownManyItemsPerf.default	587	543	1.08:1
FlexMinimalPerf.default	261	242	1.08:1
AccordionMinimalPerf.default	146	137	1.07:1
ChatWithPopoverPerf.default	307	288	1.07:1
ItemLayoutMinimalPerf.default	1049	993	1.06:1
AttachmentSlotsPerf.default	922	878	1.05:1
ReactionMinimalPerf.default	296	281	1.05:1
AvatarMinimalPerf.default	176	169	1.04:1
DatepickerMinimalPerf.default	5125	4915	1.04:1
DividerMinimalPerf.default	321	308	1.04:1
BoxMinimalPerf.default	306	298	1.03:1
ChatDuplicateMessagesPerf.default	268	261	1.03:1
InputMinimalPerf.default	1115	1087	1.03:1
SplitButtonMinimalPerf.default	3497	3384	1.03:1
TextMinimalPerf.default	274	265	1.03:1
ToolbarMinimalPerf.default	760	736	1.03:1
VideoMinimalPerf.default	549	532	1.03:1
GridMinimalPerf.default	301	294	1.02:1
HeaderMinimalPerf.default	311	306	1.02:1
LayoutMinimalPerf.default	315	308	1.02:1
ListCommonPerf.default	555	544	1.02:1
RadioGroupMinimalPerf.default	351	343	1.02:1
StatusMinimalPerf.default	565	554	1.02:1
CustomToolbarPrototype.default	3453	3382	1.02:1
TreeWith60ListItems.default	164	161	1.02:1
CarouselMinimalPerf.default	407	401	1.01:1
AnimationMinimalPerf.default	369	369	1:1
ImageMinimalPerf.default	321	322	1:1
MenuMinimalPerf.default	716	716	1:1
SegmentMinimalPerf.default	273	273	1:1
SkeletonMinimalPerf.default	306	307	1:1
ButtonMinimalPerf.default	148	150	0.99:1
FormMinimalPerf.default	344	346	0.99:1
ListWith60ListItems.default	551	556	0.99:1
LoaderMinimalPerf.default	581	585	0.99:1
MenuButtonMinimalPerf.default	1350	1367	0.99:1
PortalMinimalPerf.default	149	151	0.99:1
ProviderMergeThemesPerf.default	1367	1375	0.99:1
ProviderMinimalPerf.default	936	945	0.99:1
CheckboxMinimalPerf.default	2215	2252	0.98:1
EmbedMinimalPerf.default	3459	3522	0.98:1
RosterPerf.default	934	952	0.98:1
PopupMinimalPerf.default	488	498	0.98:1
DropdownMinimalPerf.default	2514	2584	0.97:1
HeaderSlotsPerf.default	644	664	0.97:1
CardMinimalPerf.default	446	464	0.96:1
ChatMinimalPerf.default	531	553	0.96:1
TooltipMinimalPerf.default	791	827	0.96:1
ButtonOverridesMissPerf.default	1382	1460	0.95:1
ListMinimalPerf.default	421	445	0.95:1
TableManyItemsPerf.default	1488	1573	0.95:1
TreeMinimalPerf.default	618	648	0.95:1
SliderMinimalPerf.default	1293	1386	0.93:1
LabelMinimalPerf.default	301	329	0.91:1
DialogMinimalPerf.default	588	650	0.9:1
ListNestedPerf.default	443	495	0.89:1

brookdozer · 2021-11-19T23:29:50Z

Looks just like the FAST version which has already gone in - LGTM!

packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts

…on-z-index

* Change files * Fixes z-index in headers above content region * Shared style for position.

* 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>

Rob Barber added 2 commits November 11, 2021 14:42

Change files

69a186a

Fixes z-index in headers above content region

c7d4246

robarbms requested review from chrisdholt, EisenbergEffect and nicholasrice as code owners November 11, 2021 22:54

msft-fluent-ui-bot added the web-components label Nov 11, 2021

msft-fluent-ui-bot assigned khmakoto Nov 11, 2021

chrisdholt approved these changes Dec 2, 2021

View reviewed changes

packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts Show resolved Hide resolved

Rob Barber added 2 commits December 9, 2021 15:02

Merge https://github.com/microsoft/fluentui into users/robarb/accordi…

e62ff96

…on-z-index

Shared style for position.

99a47c7

chrisdholt enabled auto-merge (squash) December 9, 2021 23:46

chrisdholt merged commit 89deee5 into microsoft:master Dec 10, 2021

mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022

fix: z-index in accordion header renders above content (microsoft#20587)

ec69a88

* Change files * Fixes z-index in headers above content region * Shared style for position.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: z-index in accordion header renders above content #20587

fix: z-index in accordion header renders above content #20587

robarbms commented Nov 11, 2021

fabricteam commented Nov 11, 2021 •

edited

Loading

size-auditor bot commented Nov 11, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 11, 2021 •

edited

Loading

fabricteam commented Nov 11, 2021 •

edited

Loading

brookdozer commented Nov 19, 2021

fix: z-index in accordion header renders above content #20587

fix: z-index in accordion header renders above content #20587

Conversation

robarbms commented Nov 11, 2021

Pull request checklist

Description of changes

Focus areas to test

fabricteam commented Nov 11, 2021 • edited Loading

📊 Bundle size report

size-auditor bot commented Nov 11, 2021 • edited Loading

Asset size changes

codesandbox-ci bot commented Nov 11, 2021 • edited Loading

fabricteam commented Nov 11, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

brookdozer commented Nov 19, 2021

fabricteam commented Nov 11, 2021 •

edited

Loading

size-auditor bot commented Nov 11, 2021 •

edited

Loading

codesandbox-ci bot commented Nov 11, 2021 •

edited

Loading

fabricteam commented Nov 11, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)