From b16c1329d95cbdb4162db1893a8f199f6b756bfc Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 16 Jun 2023 17:10:48 -0700 Subject: [PATCH 01/11] feat: add extra-tiny size value to size prop --- .../src/components/Spinner/Spinner.types.ts | 7 +++++- .../src/components/Spinner/useSpinner.tsx | 4 +++- .../Spinner/useSpinnerStyles.styles.ts | 13 +++++++++++ .../src/contexts/SpinnerContext.ts | 23 +++++++++++++++++++ .../react-spinner/src/contexts/index.ts | 1 + .../react-spinner/src/index.ts | 4 +++- .../stories/Spinner/SpinnerSize.stories.tsx | 2 ++ 7 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 packages/react-components/react-spinner/src/contexts/SpinnerContext.ts create mode 100644 packages/react-components/react-spinner/src/contexts/index.ts diff --git a/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts b/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts index 8e3a8230b58a1a..c6ba16402a65e2 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts @@ -1,6 +1,11 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import { Label } from '@fluentui/react-label'; +/** + * Sizes for the Spinner + */ +export type SpinnerSize = 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; + export type SpinnerSlots = { /** * The root of the Spinner. @@ -46,7 +51,7 @@ export type SpinnerProps = Omit, 'size'> & { * The size of the spinner. * @default 'medium' */ - size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; + size?: SpinnerSize; }; /** diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx b/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx index 79126d742ebc2c..28158c4502b6a1 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx +++ b/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): 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; diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts index 040b2919dc6dec..f355c9e4525228 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts @@ -14,6 +14,7 @@ export const spinnerClassNames: SlotClassNames = { * 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, diff --git a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts new file mode 100644 index 00000000000000..49edb25cd12886 --- /dev/null +++ b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts @@ -0,0 +1,23 @@ +import * as React from 'react'; +import type { SpinnerSize } from '../components/Spinner/Spinner.types'; + +const SpinnerContext = React.createContext(undefined); + +/** + * @internal + */ +export interface SpinnerContextValue { + size?: SpinnerSize; +} + +const SpinnerContextDefaultValue: SpinnerContextValue = {}; + +/** + * @internal + */ +export const SpinnerContextProvider = SpinnerContext.Provider; + +/** + * @internal + */ +export const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue; diff --git a/packages/react-components/react-spinner/src/contexts/index.ts b/packages/react-components/react-spinner/src/contexts/index.ts new file mode 100644 index 00000000000000..20de77b28439be --- /dev/null +++ b/packages/react-components/react-spinner/src/contexts/index.ts @@ -0,0 +1 @@ +export * from './SpinnerContext'; diff --git a/packages/react-components/react-spinner/src/index.ts b/packages/react-components/react-spinner/src/index.ts index 9aa0dbaa3627cf..8b0e1372f88149 100644 --- a/packages/react-components/react-spinner/src/index.ts +++ b/packages/react-components/react-spinner/src/index.ts @@ -5,4 +5,6 @@ export { useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner'; -export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner'; +export type { SpinnerSize, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner'; +export { SpinnerContextProvider, useSpinnerContext } from './contexts/index'; +export type { SpinnerContextValue } from './contexts/index'; diff --git a/packages/react-components/react-spinner/stories/Spinner/SpinnerSize.stories.tsx b/packages/react-components/react-spinner/stories/Spinner/SpinnerSize.stories.tsx index 43310495a53b87..5cb8c802a6ba07 100644 --- a/packages/react-components/react-spinner/stories/Spinner/SpinnerSize.stories.tsx +++ b/packages/react-components/react-spinner/stories/Spinner/SpinnerSize.stories.tsx @@ -12,6 +12,8 @@ export const Size = () => { return (
+ + From 8db4d0c7376d469dd258abd40ef6731f8ab4c23c Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 16 Jun 2023 17:14:10 -0700 Subject: [PATCH 02/11] change files --- ...react-spinner-9496bc33-4385-4b1b-9f2d-c66f178d2355.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-spinner-9496bc33-4385-4b1b-9f2d-c66f178d2355.json diff --git a/change/@fluentui-react-spinner-9496bc33-4385-4b1b-9f2d-c66f178d2355.json b/change/@fluentui-react-spinner-9496bc33-4385-4b1b-9f2d-c66f178d2355.json new file mode 100644 index 00000000000000..83baca05632996 --- /dev/null +++ b/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" +} From 542e4be0fe2784e464303fe8be047c0e8aba4381 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 16 Jun 2023 17:30:59 -0700 Subject: [PATCH 03/11] api update --- .../react-spinner/etc/react-spinner.api.md | 23 +++++++++++++------ .../Spinner/useSpinnerStyles.styles.ts | 4 ++++ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-spinner/etc/react-spinner.api.md b/packages/react-components/react-spinner/etc/react-spinner.api.md index 5e598b54c19507..3ea70ccde44176 100644 --- a/packages/react-components/react-spinner/etc/react-spinner.api.md +++ b/packages/react-components/react-spinner/etc/react-spinner.api.md @@ -4,13 +4,7 @@ ```ts -import type { ComponentProps } from '@fluentui/react-utilities'; -import type { ComponentState } from '@fluentui/react-utilities'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { Label } from '@fluentui/react-label'; import * as React_2 from 'react'; -import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; // @public export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element; @@ -21,14 +15,26 @@ export const Spinner: ForwardRefComponent; // @public (undocumented) export const spinnerClassNames: SlotClassNames; +// @internal (undocumented) +export const SpinnerContextProvider: React_2.Provider; + +// @internal (undocumented) +export interface SpinnerContextValue { + // (undocumented) + size?: SpinnerSize; +} + // @public export type SpinnerProps = Omit, 'size'> & { appearance?: 'primary' | 'inverted'; delay?: number; labelPosition?: 'above' | 'below' | 'before' | 'after'; - size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; + size?: SpinnerSize; }; +// @public +export type SpinnerSize = 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; + // @public (undocumented) export type SpinnerSlots = { root: NonNullable>; @@ -44,6 +50,9 @@ export type SpinnerState = ComponentState & Required) => SpinnerState; +// @internal (undocumented) +export const useSpinnerContext: () => SpinnerContextValue; + // @public export const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState; diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts index f355c9e4525228..8022ead553b075 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.styles.ts @@ -274,6 +274,10 @@ const useLabelStyles = makeStyles({ primary: {}, // no change + 'extra-tiny': { + ...typographyStyles.body1, + }, + tiny: { ...typographyStyles.body1, }, From 316782c47ebb65f06e9c2f3c65d89359589817a7 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Fri, 16 Jun 2023 19:48:21 -0700 Subject: [PATCH 04/11] api update --- .../react-components/react-spinner/etc/react-spinner.api.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-components/react-spinner/etc/react-spinner.api.md b/packages/react-components/react-spinner/etc/react-spinner.api.md index 3ea70ccde44176..323fa2af532da0 100644 --- a/packages/react-components/react-spinner/etc/react-spinner.api.md +++ b/packages/react-components/react-spinner/etc/react-spinner.api.md @@ -4,7 +4,13 @@ ```ts +import type { ComponentProps } from '@fluentui/react-utilities'; +import type { ComponentState } from '@fluentui/react-utilities'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { Label } from '@fluentui/react-label'; import * as React_2 from 'react'; +import type { Slot } from '@fluentui/react-utilities'; +import type { SlotClassNames } from '@fluentui/react-utilities'; // @public export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element; From 28e8ddeeb172c8809176c898eda4ba625f9f7de6 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Mon, 26 Jun 2023 11:46:46 -0700 Subject: [PATCH 05/11] Update spinner vr stories --- .../src/stories/Spinner.stories.tsx | 18 +++++++++++++++++- .../src/contexts/SpinnerContext.ts | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index 7f7b414ca35533..397834ef0bce8d 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -55,6 +55,10 @@ storiesOf('Spinner converged', module) includeDarkMode: true, }, ) + .addStory('Primary with Size Extra Tiny', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) .addStory('Primary with Size Tiny', () => , { includeHighContrast: true, includeDarkMode: true, @@ -156,7 +160,19 @@ storiesOf('Spinner converged', module) }, ) .addStory( - 'Primary with Size Tiny', + 'Inverted with Size Extra Tiny', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Inverted with Size Tiny', () => ( diff --git a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts index 49edb25cd12886..663bf42b8ce880 100644 --- a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts +++ b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts @@ -10,7 +10,7 @@ export interface SpinnerContextValue { size?: SpinnerSize; } -const SpinnerContextDefaultValue: SpinnerContextValue = {}; +const SpinnerContextDefaultValue: SpinnerContextValue = { size: 'medium' }; /** * @internal From ca5879a18cd037ba598fb6bbf7f08fe54c14b6a4 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko <66456876+tomi-msft@users.noreply.github.com> Date: Tue, 11 Jul 2023 12:58:19 -0700 Subject: [PATCH 06/11] Apply suggestions from code review Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com> --- .../react-spinner/src/contexts/SpinnerContext.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts index 663bf42b8ce880..e3d921e27c0aec 100644 --- a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts +++ b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts @@ -6,11 +6,9 @@ const SpinnerContext = React.createContext(unde /** * @internal */ -export interface SpinnerContextValue { - size?: SpinnerSize; -} +export type SpinnerContextValue = Pick; -const SpinnerContextDefaultValue: SpinnerContextValue = { size: 'medium' }; +const SpinnerContextDefaultValue: SpinnerContextValue = {}; /** * @internal From fd5dff0824e1ffbf53088fd6ff7f9053cdb495d4 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Tue, 11 Jul 2023 13:33:37 -0700 Subject: [PATCH 07/11] update api and remove SpinnerSize from files --- .../react-spinner/etc/react-spinner.api.md | 10 ++-------- .../src/components/Spinner/Spinner.types.ts | 7 +------ .../react-spinner/src/contexts/SpinnerContext.ts | 2 +- packages/react-components/react-spinner/src/index.ts | 2 +- 4 files changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/react-components/react-spinner/etc/react-spinner.api.md b/packages/react-components/react-spinner/etc/react-spinner.api.md index 323fa2af532da0..45a8b184a71d9f 100644 --- a/packages/react-components/react-spinner/etc/react-spinner.api.md +++ b/packages/react-components/react-spinner/etc/react-spinner.api.md @@ -25,22 +25,16 @@ export const spinnerClassNames: SlotClassNames; export const SpinnerContextProvider: React_2.Provider; // @internal (undocumented) -export interface SpinnerContextValue { - // (undocumented) - size?: SpinnerSize; -} +export type SpinnerContextValue = Pick; // @public export type SpinnerProps = Omit, 'size'> & { appearance?: 'primary' | 'inverted'; delay?: number; labelPosition?: 'above' | 'below' | 'before' | 'after'; - size?: SpinnerSize; + size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; }; -// @public -export type SpinnerSize = 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; - // @public (undocumented) export type SpinnerSlots = { root: NonNullable>; diff --git a/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts b/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts index c6ba16402a65e2..01dae06876411d 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/Spinner.types.ts @@ -1,11 +1,6 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import { Label } from '@fluentui/react-label'; -/** - * Sizes for the Spinner - */ -export type SpinnerSize = 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; - export type SpinnerSlots = { /** * The root of the Spinner. @@ -51,7 +46,7 @@ export type SpinnerProps = Omit, 'size'> & { * The size of the spinner. * @default 'medium' */ - size?: SpinnerSize; + size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge'; }; /** diff --git a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts index e3d921e27c0aec..6db778a28dbe10 100644 --- a/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts +++ b/packages/react-components/react-spinner/src/contexts/SpinnerContext.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { SpinnerSize } from '../components/Spinner/Spinner.types'; +import { SpinnerProps } from '../components/Spinner/Spinner.types'; const SpinnerContext = React.createContext(undefined); diff --git a/packages/react-components/react-spinner/src/index.ts b/packages/react-components/react-spinner/src/index.ts index 8b0e1372f88149..d760203242beb4 100644 --- a/packages/react-components/react-spinner/src/index.ts +++ b/packages/react-components/react-spinner/src/index.ts @@ -5,6 +5,6 @@ export { useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner'; -export type { SpinnerSize, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner'; +export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner'; export { SpinnerContextProvider, useSpinnerContext } from './contexts/index'; export type { SpinnerContextValue } from './contexts/index'; From 010e0068a3c294f46dcfb3c25fedca2652b051a2 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Tue, 11 Jul 2023 14:25:30 -0700 Subject: [PATCH 08/11] crop Spinner vr stories --- apps/vr-tests-react-components/src/stories/Spinner.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index 397834ef0bce8d..d94c34a49fb8e2 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { Spinner } from '@fluentui/react-spinner'; import { tokens } from '@fluentui/react-theme'; -import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator'; +import { TestWrapperDecoratorNoAnimation, TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; // Inverted Spinners are meant to be used over a dark background // or photo. This wrapper ensures a dark background so the Spinners @@ -12,6 +12,7 @@ const InvertedWrapper: React.FC = ({ children }) => { }; storiesOf('Spinner converged', module) + .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(TestWrapperDecoratorNoAnimation) .addStory('Primary', () => , { includeHighContrast: true, From 7a1801de1a95e4894e143add4f59a623534b2f14 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Tue, 11 Jul 2023 18:31:29 -0700 Subject: [PATCH 09/11] crop vr stories for Spinner --- .../vr-tests-react-components/src/stories/Spinner.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index d94c34a49fb8e2..5376190a52ba9c 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Spinner } from '@fluentui/react-spinner'; import { tokens } from '@fluentui/react-theme'; @@ -13,6 +14,9 @@ const InvertedWrapper: React.FC = ({ children }) => { storiesOf('Spinner converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(story => ( + {story} + )) .addDecorator(TestWrapperDecoratorNoAnimation) .addStory('Primary', () => , { includeHighContrast: true, From 97909e064f423545232d65991dcf690413fca1a3 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 12 Jul 2023 14:34:13 -0700 Subject: [PATCH 10/11] Spinner vr stories cleanup --- .../src/stories/Spinner.stories.tsx | 102 ++++++++---------- 1 file changed, 43 insertions(+), 59 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index 5376190a52ba9c..56b61c7241995d 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -14,81 +14,65 @@ const InvertedWrapper: React.FC = ({ children }) => { storiesOf('Spinner converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(TestWrapperDecoratorNoAnimation) .addDecorator(story => ( {story} )) - .addDecorator(TestWrapperDecoratorNoAnimation) - .addStory('Primary', () => , { + .addStory('Primary', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Label', () => , { + .addStory('Primary with Label', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory( - 'Primary with Label Before', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - includeRtl: true, - }, - ) - .addStory( - 'Primary with Label After', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - includeRtl: true, - }, - ) - .addStory( - 'Primary with Label Above', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Primary with Label Below', - () => , - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('Primary with Size Extra Tiny', () => , { + .addStory('Primary with Label Before', () => , { + includeHighContrast: true, + includeDarkMode: true, + includeRtl: true, + }) + .addStory('Primary with Label After', () => , { + includeHighContrast: true, + includeDarkMode: true, + includeRtl: true, + }) + .addStory('Primary with Label Above', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Primary with Label Below', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('Primary with Size Extra Tiny', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Tiny', () => , { + .addStory('Primary with Size Tiny', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Extra Small', () => , { + .addStory('Primary with Size Extra Small', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Small', () => , { + .addStory('Primary with Size Small', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Medium', () => , { + .addStory('Primary with Size Medium', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Large', () => , { + .addStory('Primary with Size Large', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Size Extra Large', () => , { + .addStory('Primary with Size Extra Large', () => , { includeHighContrast: true, includeDarkMode: true, }) - .addStory('Primary with Huge', () => , { + .addStory('Primary with Huge', () => , { includeHighContrast: true, includeDarkMode: true, }) @@ -96,7 +80,7 @@ storiesOf('Spinner converged', module) 'Inverted', () => ( - + ), { @@ -108,7 +92,7 @@ storiesOf('Spinner converged', module) 'Inverted with Label', () => ( - + ), { @@ -120,7 +104,7 @@ storiesOf('Spinner converged', module) 'Inverted with Label Before', () => ( - + ), { @@ -132,7 +116,7 @@ storiesOf('Spinner converged', module) 'Inverted with Label After', () => ( - + ), { @@ -144,7 +128,7 @@ storiesOf('Spinner converged', module) 'Inverted with Label Above', () => ( - + ), { @@ -156,7 +140,7 @@ storiesOf('Spinner converged', module) 'Inverted with Label Below', () => ( - + ), { @@ -168,7 +152,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Extra Tiny', () => ( - + ), { @@ -180,7 +164,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Tiny', () => ( - + ), { @@ -192,7 +176,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Extra Small', () => ( - + ), { @@ -204,7 +188,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Small', () => ( - + ), { @@ -216,7 +200,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Medium', () => ( - + ), { @@ -228,7 +212,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Large', () => ( - + ), { @@ -240,7 +224,7 @@ storiesOf('Spinner converged', module) 'Inverted with Size Extra Large', () => ( - + ), { @@ -252,7 +236,7 @@ storiesOf('Spinner converged', module) 'Inverted with Huge', () => ( - + ), { From c9b9deedb5a08cd439c455e9e75d5513b93b37ac Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Mon, 17 Jul 2023 11:22:41 -0700 Subject: [PATCH 11/11] revert Spinner vr stories --- .../src/stories/Spinner.stories.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index 56b61c7241995d..1c821c88a8755e 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; import { storiesOf } from '@storybook/react'; import { Spinner } from '@fluentui/react-spinner'; import { tokens } from '@fluentui/react-theme'; -import { TestWrapperDecoratorNoAnimation, TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; +import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator'; // Inverted Spinners are meant to be used over a dark background // or photo. This wrapper ensures a dark background so the Spinners @@ -13,11 +12,7 @@ const InvertedWrapper: React.FC = ({ children }) => { }; storiesOf('Spinner converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(TestWrapperDecoratorNoAnimation) - .addDecorator(story => ( - {story} - )) .addStory('Primary', () => , { includeHighContrast: true, includeDarkMode: true,