Add overrides context to allow Input appearance overrides

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

@@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
 import { Input } from '@fluentui/react-input';
 import { SearchRegular, DismissRegular } from '@fluentui/react-icons';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
+import { FluentProvider } from '@fluentui/react-provider';
 
 storiesOf('Input Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
@@ -65,4 +66,12 @@ storiesOf('Input Converged', module)
     'contentAfter',
     () => <Input contentAfter={<DismissRegular style={{ fontSize: '20px' }} />} placeholder="Placeholder" />,
     { includeRtl: true },
-  );
+  )
+  .addStory('With appearance override', () => (
+    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Input placeholder="Default overriden appearance" />
+        <Input appearance="outline" placeholder="Outline appearance" />
+      </div>
+    </FluentProvider>
+  ));

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

@@ -3,6 +3,7 @@ import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Select } from '@fluentui/react-select';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
+import { FluentProvider } from '@fluentui/react-provider';
 
 storiesOf('Select Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
@@ -102,4 +103,16 @@ storiesOf('Select Converged', module)
     <Select icon="+">
       <option>text</option>
     </Select>
+  ))
+  .addStory('With appearance override', () => (
+    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Select>
+          <option>Default overriden appearance</option>
+        </Select>
+        <Select appearance="outline">
+          <option>Outline appearance</option>
+        </Select>
+      </div>
+    </FluentProvider>
   ));

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

@@ -3,6 +3,7 @@ import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { SpinButton, spinButtonClassNames } from '@fluentui/react-spinbutton';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
+import { FluentProvider } from '@fluentui/react-provider';
 
 const cropTo = '.testWrapper';
 
@@ -172,4 +173,12 @@ storiesOf('SpinButton Converged', module)
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Size: medium (default)', () => <SpinButton value={10} />, { includeRtl: true });
+  .addStory('Size: medium (default)', () => <SpinButton value={10} />, { includeRtl: true })
+  .addStory('With appearance override', () => (
+    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <SpinButton value={10} />
+        <SpinButton value={10} appearance="outline" />
+      </div>
+    </FluentProvider>
+  ));

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

@@ -3,6 +3,7 @@ import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
 import { Textarea } from '@fluentui/react-textarea';
 import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
+import { FluentProvider } from '@fluentui/react-provider';
 
 storiesOf('Textarea Converged', module)
   .addDecorator(TestWrapperDecoratorFixedWidth)
@@ -47,4 +48,12 @@ storiesOf('Textarea Converged', module)
   ))
   .addStory('Size: small', () => <Textarea size="small" placeholder="Placeholder" />)
   .addStory('Size: medium', () => <Textarea size="medium" placeholder="Placeholder" />)
-  .addStory('Size: large', () => <Textarea size="large" placeholder="Placeholder" />);
+  .addStory('Size: large', () => <Textarea size="large" placeholder="Placeholder" />)
+  .addStory('With appearance override', () => (
+    <FluentProvider overrides_unstable={{ inputDefaultAppearance: 'filled-darker' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        <Textarea placeholder="Default overriden appearance" />
+        <Textarea appearance="outline" placeholder="Outline appearance" />
+      </div>
+    </FluentProvider>
+  ));

change/@fluentui-react-components-a0044760-9cac-456d-b748-7fe4ba0802ae.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support for appearance overrides (unstable)",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-context-selector-e15ee4a6-fa19-42f0-9f11-f84a14a57ab9.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: fix a typo in jsdoc",
+  "packageName": "@fluentui/react-context-selector",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-input-c8b8ede9-cfd9-47de-8c13-eca4f6c72797.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Allow default appearance override",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-1d522e45-92ff-4aaa-8f80-0d6aa88b3fd8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Lint based re-format",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-provider-ea932e89-e206-4ea6-81dc-ba918be05393.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add support for overrides (unstable)",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-select-9227eb92-f238-441d-9a44-e311026f50e5.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Allow default appearance override",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-cf45a4fd-ebcd-4623-8d35-ee8813910004.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Overrides context",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-spinbutton-c02b94ea-c41f-49cf-8024-e513da3c3a3d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Allow default appearance override",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-textarea-a7574993-8632-461c-8f9b-51df664a3dc8.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Allow default appearance override",
+  "packageName": "@fluentui/react-textarea",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx

@@ -23,7 +23,7 @@ try {
   felaDevMode = !!window.localStorage.felaDevMode;
 } catch {}
 
-if (typeof window !== "undefined" && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
+if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
   if (felaDevMode) {
     /* eslint-disable-next-line no-console */
     console.warn(

packages/react-components/react-context-selector/src/useContextSelector.ts

@@ -16,7 +16,7 @@ type ContextReducer<Value, SelectedValue> = React.Reducer<
  * @internal
  * This hook returns context selected value by selector.
  * It will only accept context created by `createContext`.
- * It will trigger re-render if only the selected value is referencially changed.
+ * It will trigger re-render if only the selected value is referentially changed.
  */
 export const useContextSelector = <Value, SelectedValue>(
   context: Context<Value>,

packages/react-components/react-input/package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@fluentui/react-field": "9.0.0-alpha.16",
+    "@fluentui/react-shared-contexts": "^9.1.5",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.4.0",
     "@griffel/react": "^1.5.2",

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

@@ -6,6 +6,7 @@ import {
   useEventCallback,
 } from '@fluentui/react-utilities';
 import type { InputProps, InputState } from './Input.types';
+import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 
 /**
  * Create the state required to render Input.
@@ -17,7 +18,9 @@ import type { InputProps, InputState } from './Input.types';
  * @param ref - reference to `<input>` element of Input
  */
 export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {
-  const { size = 'medium', appearance = 'outline', onChange } = props;
+  const overrides = useOverrides();
+
+  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;
 
   if (
     process.env.NODE_ENV !== 'production' &&

packages/react-components/react-portal/src/components/Portal/usePortal.ts

@@ -27,7 +27,9 @@ export const usePortal_unstable = (props: PortalProps): PortalState => {
       setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
     }
     return () => {
-      if (state.mountNode) {setVirtualParent(state.mountNode, undefined);}
+      if (state.mountNode) {
+        setVirtualParent(state.mountNode, undefined);
+      }
     };
   }, [state.virtualParentRootRef, state.mountNode]);
 

packages/react-components/react-provider/etc/react-provider.api.md

@@ -6,6 +6,7 @@
 
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
@@ -22,13 +23,14 @@ export const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentPro
     dir?: "ltr" | "rtl" | undefined;
     targetDocument?: Document | undefined;
     theme?: Partial<Theme> | undefined;
+    overrides_unstable?: OverridesContextValue_unstable | undefined;
 } & React_2.RefAttributes<HTMLElement>>;
 
 // @public (undocumented)
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
 
 // @public (undocumented)
-export type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
+export type FluentProviderContextValues = Pick<FluentProviderState, 'theme' | 'overrides_unstable'> & {
     provider: ProviderContextValue_unstable;
     themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
@@ -41,6 +43,7 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
     dir?: 'ltr' | 'rtl';
     targetDocument?: Document;
     theme?: PartialTheme;
+    overrides_unstable?: OverridesContextValue_unstable;
 };
 
 // @public (undocumented)
@@ -49,7 +52,7 @@ export type FluentProviderSlots = {
 };
 
 // @public (undocumented)
-export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir'>> & {
+export type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue_unstable;
     themeClassName: string;
 };

packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts

@@ -1,4 +1,5 @@
 import type {
+  OverridesContextValue_unstable as OverridesContextValue,
   ProviderContextValue_unstable as ProviderContextValue,
   TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,
   ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,
@@ -26,16 +27,19 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
 
   /** Sets the theme used in a scope. */
   theme?: PartialTheme;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  overrides_unstable?: OverridesContextValue;
 };
 
 export type FluentProviderState = ComponentState<FluentProviderSlots> &
   Pick<FluentProviderProps, 'targetDocument'> &
-  Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir'>> & {
+  Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir' | 'overrides_unstable'>> & {
     theme: ThemeContextValue;
     themeClassName: string;
   };
 
-export type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {
+export type FluentProviderContextValues = Pick<FluentProviderState, 'theme' | 'overrides_unstable'> & {
   provider: ProviderContextValue;
   themeClassName: ThemeClassNameContextValue;
   textDirection: 'ltr' | 'rtl';

packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextDirectionProvider } from '@griffel/react';
 import {
+  OverridesProvider_unstable as OverridesProvider,
   Provider_unstable as Provider,
   TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,
   ThemeProvider_unstable as ThemeProvider,
@@ -24,7 +25,9 @@ export const renderFluentProvider_unstable = (
         <ThemeClassNameProvider value={contextValues.themeClassName}>
           <TooltipVisibilityProvider value={contextValues.tooltip}>
             <TextDirectionProvider dir={contextValues.textDirection}>
-              <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+              <OverridesProvider value={contextValues.overrides_unstable}>
+                <slots.root {...slotProps.root}>{state.root.children}</slots.root>
+              </OverridesProvider>
             </TextDirectionProvider>
           </TooltipVisibilityProvider>
         </ThemeClassNameProvider>

packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.test.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { FluentProvider } from './FluentProvider';
 import { useFluentProvider_unstable } from './useFluentProvider';
 import type { PartialTheme } from '@fluentui/react-theme';
+import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 
 describe('useFluentProvider_unstable', () => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -50,4 +51,34 @@ describe('useFluentProvider_unstable', () => {
       }
     `);
   });
+
+  it('should merge overrides', () => {
+    const overridesA: OverridesContextValue_unstable = {
+      inputDefaultAppearance: 'filled-lighter',
+      // currently the overrides object contains a single value, adding one more to test the merging
+      customValue: 'shouldNotBeOverridden',
+    } as OverridesContextValue_unstable;
+    const overridesB: OverridesContextValue_unstable = {
+      inputDefaultAppearance: 'filled-darker',
+    };
+
+    const Wrapper: React.FC = ({ children }) => (
+      <FluentProvider overrides_unstable={overridesA}>{children}</FluentProvider>
+    );
+
+    const { result } = renderHook(
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      () => useFluentProvider_unstable({ overrides_unstable: overridesB }, React.createRef()),
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.overrides_unstable).toMatchInlineSnapshot(`
+      Object {
+        "customValue": "shouldNotBeOverridden",
+        "inputDefaultAppearance": "filled-darker",
+      }
+    `);
+  });
 });

packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts

@@ -2,6 +2,7 @@ import { useFocusVisible } from '@fluentui/react-tabster';
 import {
   ThemeContext_unstable as ThemeContext,
   useFluent_unstable as useFluent,
+  useOverrides_unstable as useOverrides,
 } from '@fluentui/react-shared-contexts';
 import type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';
 import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
@@ -24,6 +25,7 @@ export const useFluentProvider_unstable = (
 ): FluentProviderState => {
   const parentContext = useFluent();
   const parentTheme = useTheme();
+  const parentOverrides = useOverrides();
 
   /**
    * TODO: add merge functions to "dir" merge,
@@ -35,8 +37,11 @@ export const useFluentProvider_unstable = (
     dir = parentContext.dir,
     targetDocument = parentContext.targetDocument,
     theme,
+    overrides_unstable: overrides = {},
   } = props;
-  const mergedTheme = mergeThemes(parentTheme, theme);
+  const mergedTheme = shallowMerge(parentTheme, theme);
+
+  const mergedOverrides = shallowMerge(parentOverrides, overrides);
 
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
@@ -55,6 +60,8 @@ export const useFluentProvider_unstable = (
     dir,
     targetDocument,
     theme: mergedTheme,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    overrides_unstable: mergedOverrides,
     themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),
 
     components: {
@@ -69,7 +76,7 @@ export const useFluentProvider_unstable = (
   };
 };
 
-function mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {
+function shallowMerge<T>(a: T, b: T): T {
   // Merge impacts perf: we should like to avoid it if it's possible
   if (a && b) {
     return { ...a, ...b };