chore: Clean up Input's interactive styles

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

@@ -31,16 +31,28 @@ storiesOf('Input Converged', module)
       <Input appearance="filled-lighter" placeholder="Placeholder" />
     </div>
   ))
-  .addStory('Invalid: outline', () => <Input aria-invalid placeholder="Placeholder" />)
-  .addStory('Invalid: underline', () => <Input aria-invalid appearance="underline" placeholder="Placeholder" />)
-  .addStory('Invalid: filled-darker', () => <Input aria-invalid appearance="filled-darker" placeholder="Placeholder" />)
-  .addStory('Invalid: filled-lighter', () => (
+  .addStory('Invalid, appearance: outline', () => <Input aria-invalid placeholder="Placeholder" />)
+  .addStory('Invalid, appearance: underline', () => (
+    <Input aria-invalid appearance="underline" placeholder="Placeholder" />
+  ))
+  .addStory('Invalid, appearance: filled-darker', () => (
+    <Input aria-invalid appearance="filled-darker" placeholder="Placeholder" />
+  ))
+  .addStory('Invalid, appearance: filled-lighter', () => (
     // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
     <div style={{ background: '#f5f5f5', padding: '10px' }}>
       <Input aria-invalid appearance="filled-lighter" placeholder="Placeholder" />
     </div>
   ))
-  .addStory('Disabled', () => <Input disabled />)
+  .addStory('Disabled, appearance: outline', () => <Input disabled value="Disabled" />)
+  .addStory('Disabled, appearance: underline', () => <Input disabled appearance="underline" value="Disabled" />)
+  .addStory('Disabled, appearance: filled-darker', () => <Input disabled appearance="filled-darker" value="Disabled" />)
+  .addStory('Disabled, appearance: filled-lighter', () => (
+    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+    <div style={{ background: '#f5f5f5', padding: '10px' }}>
+      <Input disabled appearance="filled-lighter" value="Disabled" />
+    </div>
+  ))
   .addStory('With value', () => <Input defaultValue="Value!" />);
 
 // Non-interactive stories

change/@fluentui-react-input-80b38eae-aa0c-4ba8-b5c8-6f523ded4190.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Clean up Input's interactive styles",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,6 +1,5 @@
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { GriffelResetStyle } from '@griffel/react';
 import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { InputSlots, InputState } from './Input.types';
 
@@ -18,7 +17,7 @@ const fieldHeights = {
   large: '40px',
 };
 
-const rootBaseStyles: GriffelResetStyle = {
+const useRootClassName = makeResetStyles({
   display: 'inline-flex',
   alignItems: 'center',
   flexWrap: 'nowrap',
@@ -36,9 +35,7 @@ const rootBaseStyles: GriffelResetStyle = {
   backgroundColor: tokens.colorNeutralBackground1,
   border: `1px solid ${tokens.colorNeutralStroke1}`,
   borderBottomColor: tokens.colorNeutralStrokeAccessible,
-};
 
-const rootInteractiveStyles: GriffelResetStyle = {
   // This is all for the bottom focus border.
   // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
   '::after': {
@@ -94,10 +91,7 @@ const rootInteractiveStyles: GriffelResetStyle = {
   ':focus-within': {
     outline: '2px solid transparent',
   },
-};
-
-const useRootNonInteractiveClassName = makeResetStyles(rootBaseStyles);
-const useRootInteractiveClassName = makeResetStyles({ ...rootBaseStyles, ...rootInteractiveStyles });
+});
 
 const useRootStyles = makeStyles({
   small: {
@@ -184,6 +178,14 @@ const useRootStyles = makeStyles({
     '@media (forced-colors: active)': {
       ...shorthands.borderColor('GrayText'),
     },
+    // remove the focus border
+    '::after': {
+      content: 'unset',
+    },
+    // remove the focus outline
+    ':focus-within': {
+      outlineStyle: 'none',
+    },
   },
 });
 
@@ -260,10 +262,6 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   const invalid = `${state.input['aria-invalid']}` === 'true';
   const filled = appearance.startsWith('filled');
 
-  // Call exactly one of the two base className hooks. Each of these hooks is functionally identical, but with
-  // different styles applied, which makes it ok to conditionally change which hook is called.
-  const useRootClassName = disabled ? useRootNonInteractiveClassName : useRootInteractiveClassName;
-
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();