feat: add extra-tiny size value to size prop

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

@@ -13,81 +13,69 @@ const InvertedWrapper: React.FC = ({ children }) => {
 
 storiesOf('Spinner converged', module)
   .addDecorator(TestWrapperDecoratorNoAnimation)
-  .addStory('Primary', () => <Spinner className="test-class" />, {
+  .addStory('Primary', () => <Spinner />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Label', () => <Spinner className="test-class" label="Loading" />, {
+  .addStory('Primary with Label', () => <Spinner label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory(
-    'Primary with Label Before',
-    () => <Spinner className="test-class" labelPosition="before" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Primary with Label After',
-    () => <Spinner className="test-class" labelPosition="after" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Primary with Label Above',
-    () => <Spinner className="test-class" labelPosition="above" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Primary with Label Below',
-    () => <Spinner className="test-class" labelPosition="below" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('Primary with Size Tiny', () => <Spinner className="test-class" size="tiny" />, {
+  .addStory('Primary with Label Before', () => <Spinner labelPosition="before" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
+    includeRtl: true,
   })
-  .addStory('Primary with Size Extra Small', () => <Spinner className="test-class" size="extra-small" />, {
+  .addStory('Primary with Label After', () => <Spinner labelPosition="after" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
+    includeRtl: true,
   })
-  .addStory('Primary with Size Small', () => <Spinner className="test-class" size="small" />, {
+  .addStory('Primary with Label Above', () => <Spinner labelPosition="above" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Medium', () => <Spinner className="test-class" size="medium" />, {
+  .addStory('Primary with Label Below', () => <Spinner labelPosition="below" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Large', () => <Spinner className="test-class" size="large" />, {
+  .addStory('Primary with Size Extra Tiny', () => <Spinner size="extra-tiny" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Extra Large', () => <Spinner className="test-class" size="extra-large" />, {
+  .addStory('Primary with Size Tiny', () => <Spinner size="tiny" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Huge', () => <Spinner className="test-class" size="huge" />, {
+  .addStory('Primary with Size Extra Small', () => <Spinner size="extra-small" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Small', () => <Spinner size="small" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Medium', () => <Spinner size="medium" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Large', () => <Spinner size="large" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Extra Large', () => <Spinner size="extra-large" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Huge', () => <Spinner size="huge" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
   .addStory(
     'Inverted',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" />
+        <Spinner appearance="inverted" />
       </InvertedWrapper>
     ),
     {
@@ -99,7 +87,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" label="Loading" />
+        <Spinner appearance="inverted" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -111,7 +99,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Before',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="before" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -123,7 +111,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label After',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="after" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -135,7 +123,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Above',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="above" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -147,7 +135,19 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Below',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="below" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Extra Tiny',
+    () => (
+      <InvertedWrapper>
+        <Spinner appearance="inverted" size="extra-tiny" />
       </InvertedWrapper>
     ),
     {
@@ -156,10 +156,10 @@ storiesOf('Spinner converged', module)
     },
   )
   .addStory(
-    'Primary with Size Tiny',
+    'Inverted with Size Tiny',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="tiny" />
+        <Spinner appearance="inverted" size="tiny" />
       </InvertedWrapper>
     ),
     {
@@ -171,7 +171,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Extra Small',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="extra-small" />
+        <Spinner appearance="inverted" size="extra-small" />
       </InvertedWrapper>
     ),
     {
@@ -183,7 +183,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Small',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="small" />
+        <Spinner appearance="inverted" size="small" />
       </InvertedWrapper>
     ),
     {
@@ -195,7 +195,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Medium',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="medium" />
+        <Spinner appearance="inverted" size="medium" />
       </InvertedWrapper>
     ),
     {
@@ -207,7 +207,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Large',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="large" />
+        <Spinner appearance="inverted" size="large" />
       </InvertedWrapper>
     ),
     {
@@ -219,7 +219,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Extra Large',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="extra-large" />
+        <Spinner appearance="inverted" size="extra-large" />
       </InvertedWrapper>
     ),
     {
@@ -231,7 +231,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Huge',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="huge" />
+        <Spinner appearance="inverted" size="huge" />
       </InvertedWrapper>
     ),
     {

change/@fluentui-react-spinner-9496bc33-4385-4b1b-9f2d-c66f178d2355.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add extra-tiny value to size prop of Spinner",
+  "packageName": "@fluentui/react-spinner",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -21,12 +21,18 @@ export const Spinner: ForwardRefComponent<SpinnerProps>;
 // @public (undocumented)
 export const spinnerClassNames: SlotClassNames<SpinnerSlots>;
 
+// @internal (undocumented)
+export const SpinnerContextProvider: React_2.Provider<SpinnerContextValue | undefined>;
+
+// @internal (undocumented)
+export type SpinnerContextValue = Pick<SpinnerProps, 'size'>;
+
 // @public
 export type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
     appearance?: 'primary' | 'inverted';
     delay?: number;
     labelPosition?: 'above' | 'below' | 'before' | 'after';
-    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+    size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
 };
 
 // @public (undocumented)
@@ -44,6 +50,9 @@ export type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerP
 // @public
 export const useSpinner_unstable: (props: SpinnerProps, ref: React_2.Ref<HTMLElement>) => SpinnerState;
 
+// @internal (undocumented)
+export const useSpinnerContext: () => SpinnerContextValue;
+
 // @public
 export const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;
 

packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts

@@ -46,7 +46,7 @@ export type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
    * The size of the spinner.
    * @default 'medium'
    */
-  size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+  size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
 };
 
 /**

packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx

@@ -3,6 +3,7 @@ import { getNativeElementProps, resolveShorthand, useId, useTimeout } from '@flu
 import type { SpinnerProps, SpinnerState } from './Spinner.types';
 import { Label } from '@fluentui/react-label';
 import { DefaultSvg } from './DefaultSvg';
+import { useSpinnerContext } from '../../contexts/SpinnerContext';
 
 /**
  * Create the state required to render Spinner.
@@ -15,7 +16,8 @@ import { DefaultSvg } from './DefaultSvg';
  */
 export const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {
   // Props
-  const { appearance = 'primary', labelPosition = 'after', size = 'medium', delay = 0 } = props;
+  const { size: contextSize } = useSpinnerContext();
+  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;
   const baseId = useId('spinner');
 
   const { role = 'progressbar', tabIndex, ...rest } = props;

packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts

@@ -14,6 +14,7 @@ export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {
  * Radii for the Spinner circles
  */
 const rValues = {
+  extraTiny: '7px',
   tiny: '9px',
   extraSmall: '11px',
   small: '13px',
@@ -28,6 +29,7 @@ const rValues = {
  * Sizes for the Spinner
  */
 const spinnnerSizes = {
+  extraTiny: '16px',
   tiny: '20px',
   extraSmall: '24px',
   small: '28px',
@@ -96,6 +98,17 @@ const useLoaderStyles = makeStyles({
     },
   },
 
+  'extra-tiny': {
+    ['& > svg']: {
+      height: spinnnerSizes.extraTiny,
+      width: spinnnerSizes.extraTiny,
+    },
+    ['& > svg > circle']: {
+      strokeWidth: tokens.strokeWidthThick,
+      r: rValues.extraTiny,
+    },
+  },
+
   tiny: {
     ['& > svg']: {
       height: spinnnerSizes.tiny,
@@ -261,6 +274,10 @@ const useLabelStyles = makeStyles({
 
   primary: {}, // no change
 
+  'extra-tiny': {
+    ...typographyStyles.body1,
+  },
+
   tiny: {
     ...typographyStyles.body1,
   },

packages/react-components/react-spinner/src/contexts/SpinnerContext.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SpinnerProps } from '../components/Spinner/Spinner.types';
+
+const SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);
+
+/**
+ * @internal
+ */
+export type SpinnerContextValue = Pick<SpinnerProps, 'size'>;
+
+const SpinnerContextDefaultValue: SpinnerContextValue = {};
+
+/**
+ * @internal
+ */
+export const SpinnerContextProvider = SpinnerContext.Provider;
+
+/**
+ * @internal
+ */
+export const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;

packages/react-components/react-spinner/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './SpinnerContext';

packages/react-components/react-spinner/src/index.ts

@@ -6,3 +6,5 @@ export {
   useSpinnerStyles_unstable,
 } from './Spinner';
 export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';
+export { SpinnerContextProvider, useSpinnerContext } from './contexts/index';
+export type { SpinnerContextValue } from './contexts/index';

packages/react-components/react-spinner/stories/Spinner/SpinnerSize.stories.tsx

@@ -12,6 +12,8 @@ export const Size = () => {
 
   return (
     <div className={styles.container}>
+      <Spinner size="extra-tiny" label="Extra Tiny Spinner" />
+
       <Spinner size="tiny" label="Tiny Spinner" />
 
       <Spinner size="extra-small" label="Extra Small Spinner" />