chore: Clean up Input's interactive styles #26865

behowell · 2023-02-15T21:14:03Z

Previous Behavior

A previous PR #26815 refactored Input to use makeResetStyles to reduce the number of classes added to Inputs. In it, there were two different reset classes based on whether or not the input was enabled. This resulted in it conditionally calling one of two hooks:

const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;

As pointed out by @spmonahan in #26815 (comment), this technically breaks the rules of hooks by conditionally changing which hooks are called.

New Behavior

Have only a single useRootClassName, which applies the styles for enabled ("interactive") inputs. Merge in all of the interactive styles into their base classes as well.

Update the disabled class to override these hover/focus styles so that the disabled state does not inherit interactive styling.

Related Issue(s)

Follow up for chore: Update Input to use makeResetStyles #26815

size-auditor · 2023-02-15T21:27:13Z

Asset size changes

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

Baseline commit: 13ccc5915ca86262762f735456f7afe05bd9e537 (build)

codesandbox-ci · 2023-02-15T21:31:25Z

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 00947ba:

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

fabricteam · 2023-02-15T21:31:28Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1265	1284	5000
Button	mount	920	923	5000
Field	mount	1929	1971	5000
FluentProvider	mount	1521	1535	5000
FluentProviderWithTheme	mount	585	588	10
FluentProviderWithTheme	virtual-rerender	545	552	10
FluentProviderWithTheme	virtual-rerender-with-unmount	573	574	10
InfoButton	mount	511	516	5000
MakeStyles	mount	1954	1946	50000
Persona	mount	2807	2805	5000
SpinButton	mount	2302	2307	5000

fabricteam · 2023-02-15T21:34:05Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-input` Input	`23.89 kB` `7.246 kB`	`22.82 kB` `7.163 kB`	`-1.07 kB` `-83 B`
`react-input` InputField	`33.626 kB` `10.099 kB`	`32.699 kB` `10.06 kB`	`-927 B` `-39 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: Button, FluentProvider & webLightTheme	`64.09 kB` `17.544 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`201.979 kB` `56.265 kB`
`react-components` react-components: FluentProvider & webLightTheme	`35.049 kB` `11.533 kB`
`react-portal-compat` PortalCompatProvider	`6.324 kB` `2.129 kB`

_{🤖 This report was generated against 13ccc5915ca86262762f735456f7afe05bd9e537}

apps/vr-tests-react-components/src/stories/Input.stories.tsx

…d not all of the focus, etc. styles.

JustSlone · 2023-02-16T01:21:49Z

/azp run

azure-pipelines · 2023-02-16T01:22:09Z

Azure Pipelines successfully started running 4 pipeline(s).

JustSlone · 2023-02-16T01:39:32Z

/azp run

azure-pipelines · 2023-02-16T01:39:55Z

Azure Pipelines successfully started running 4 pipeline(s).

JustSlone · 2023-02-16T02:03:58Z

/azp run

azure-pipelines · 2023-02-16T02:04:25Z

Azure Pipelines successfully started running 4 pipeline(s).

JustSlone · 2023-02-16T03:16:21Z

/azp run

azure-pipelines · 2023-02-16T03:16:43Z

Azure Pipelines successfully started running 4 pipeline(s).

apps/vr-tests-react-components/src/stories/Input.stories.tsx

packages/react-components/react-input/src/components/Input/useInputStyles.ts

…nput/interactive-reset-styles

…ehowell/fluentui into input/interactive-reset-styles

* master: (93 commits) chore: migrate to jest 27 (microsoft#26835) chore: make lint task run without need of build (microsoft#26872) chore(react-table): exports UseTableSelectionOptions (microsoft#26892) applying package updates fix(react-card): allow elements to grow to fill the available space (microsoft#26616) fix: Popover without focus trap should not be aria-hidden (microsoft#26932) applying package updates applying package updates fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change (microsoft#26574) fix: v8 Combobox role and accname for non-hidden icon button (microsoft#26905) fix: Removing possible recursive loop in Coachmark (microsoft#26934) Combobox: Fix cursor jumping to the end of input (microsoft#26931) Fix missing icons on website (microsoft#26797) fix: Fix the width of Input's focus border with appearance=underline (microsoft#26881) chore: Clean up Input's interactive styles (microsoft#26865) Remove codeowners from change files (microsoft#26935) chore: add splitbutton error warning to docs, remove button ariaDescription example (microsoft#26904) docs: Remove testing code from MenuList example (microsoft#26929) chore: refactor SpinButton to use makeResetStyles (microsoft#26867) feat: Set overflow on positioned element when `autosize` is applied (microsoft#26868) ...

…r-component * feat/drawer-base-component: (141 commits) remove DrawerContainer feat: WIP add initial draft for Drawer and DrawerContainer chore: migrate to jest 27 (microsoft#26835) chore: make lint task run without need of build (microsoft#26872) chore(react-table): exports UseTableSelectionOptions (microsoft#26892) applying package updates fix(react-card): allow elements to grow to fill the available space (microsoft#26616) fix: Popover without focus trap should not be aria-hidden (microsoft#26932) applying package updates applying package updates fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change (microsoft#26574) fix: v8 Combobox role and accname for non-hidden icon button (microsoft#26905) fix: Removing possible recursive loop in Coachmark (microsoft#26934) Combobox: Fix cursor jumping to the end of input (microsoft#26931) Fix missing icons on website (microsoft#26797) fix: Fix the width of Input's focus border with appearance=underline (microsoft#26881) chore: Clean up Input's interactive styles (microsoft#26865) Remove codeowners from change files (microsoft#26935) chore: add splitbutton error warning to docs, remove button ariaDescription example (microsoft#26904) docs: Remove testing code from MenuList example (microsoft#26929) ...

behowell added 2 commits February 15, 2023 13:13

chore: Clean up Input's interactive styles

69866a1

change file

5bb1313

behowell self-assigned this Feb 15, 2023

github-actions bot added this to the February Project Cycle Q1 2023 milestone Feb 15, 2023

Change VR stories to keep existing disabled story

696c248

behowell added Fluent UI react-components (v9) Component: Input labels Feb 15, 2023

behowell mentioned this pull request Feb 15, 2023

chore: Update Input to use makeResetStyles #26815

Merged

fabricteam reviewed Feb 15, 2023

View reviewed changes

apps/vr-tests-react-components/src/stories/Input.stories.tsx Show resolved Hide resolved

Scale back the changes to interactive styles: only the root styles an…

3eb23b5

…d not all of the focus, etc. styles.

Merge branch 'master' into input/interactive-reset-styles

0b78979

behowell marked this pull request as ready for review February 16, 2023 19:08

behowell requested review from a team and spmonahan as code owners February 16, 2023 19:08

spmonahan approved these changes Feb 16, 2023

View reviewed changes

behowell mentioned this pull request Feb 16, 2023

chore: refactor SpinButton to use makeResetStyles #26867

Merged

khmakoto approved these changes Feb 16, 2023

View reviewed changes

behowell added 4 commits February 16, 2023 16:48

Revert changes to outline's border radius

18eb079

Rename disabled and invalid VR tests

0116bca

Merge branch 'master' of https://github.com/microsoft/fluentui into i…

56fb6cd

…nput/interactive-reset-styles

Merge branch 'input/interactive-reset-styles' of https://github.com/b…

e2ac807

…ehowell/fluentui into input/interactive-reset-styles

behowell mentioned this pull request Feb 17, 2023

fix: Fix the width of Input's focus border with appearance=underline #26881

Merged

Merge branch 'master' into input/interactive-reset-styles

df6da42

behowell closed this Feb 17, 2023

behowell reopened this Feb 17, 2023

Merge branch 'master' into input/interactive-reset-styles

00947ba

micahgodbolt approved these changes Feb 21, 2023

View reviewed changes

behowell merged commit fbee0f3 into microsoft:master Feb 21, 2023

behowell deleted the input/interactive-reset-styles branch February 21, 2023 22:20

chore: Clean up Input's interactive styles #26865

chore: Clean up Input's interactive styles #26865

Uh oh!

Conversation

behowell commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

size-auditor bot commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci bot commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Feb 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

JustSlone commented Feb 16, 2023

Uh oh!

azure-pipelines bot commented Feb 16, 2023

Uh oh!

JustSlone commented Feb 16, 2023

Uh oh!

azure-pipelines bot commented Feb 16, 2023

Uh oh!

JustSlone commented Feb 16, 2023

Uh oh!

azure-pipelines bot commented Feb 16, 2023

Uh oh!

JustSlone commented Feb 16, 2023

Uh oh!

azure-pipelines bot commented Feb 16, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

behowell commented Feb 15, 2023 •

edited

Loading

size-auditor bot commented Feb 15, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 15, 2023 •

edited

Loading

fabricteam commented Feb 15, 2023 •

edited

Loading

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

fabricteam commented Feb 15, 2023 •

edited

Loading