From cd26f88053e038d663c3a2c1ccb4ccb96abf83a1 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 31 Jan 2025 19:51:40 +0100 Subject: [PATCH 1/2] label --- docs/examples/spinner/dontLabel.tsx | 6 +- .../{variantGrayscale.tsx => grayscale.tsx} | 0 docs/examples/spinner/label.tsx | 16 ++ .../spinner/{variantWhite.tsx => white.tsx} | 0 docs/pages/web/spinner.tsx | 74 ++++---- packages/gestalt/src/Icon/InternalIcon.tsx | 12 +- packages/gestalt/src/Spinner.tsx | 50 ++++-- packages/gestalt/src/Spinner/VRSpinner.tsx | 46 +++-- packages/gestalt/src/Text.tsx | 6 + packages/gestalt/src/TextUI.tsx | 6 + .../src/__snapshots__/Spinner.test.tsx.snap | 164 ++++++++++++------ 11 files changed, 252 insertions(+), 128 deletions(-) rename docs/examples/spinner/{variantGrayscale.tsx => grayscale.tsx} (100%) create mode 100644 docs/examples/spinner/label.tsx rename docs/examples/spinner/{variantWhite.tsx => white.tsx} (100%) diff --git a/docs/examples/spinner/dontLabel.tsx b/docs/examples/spinner/dontLabel.tsx index 518e83f9ed..80d16d4574 100644 --- a/docs/examples/spinner/dontLabel.tsx +++ b/docs/examples/spinner/dontLabel.tsx @@ -1,12 +1,10 @@ -import { Flex, Spinner, Text } from 'gestalt'; +import { Flex, Spinner } from 'gestalt'; export default function Example() { return ( - - - Loading… + ); diff --git a/docs/examples/spinner/variantGrayscale.tsx b/docs/examples/spinner/grayscale.tsx similarity index 100% rename from docs/examples/spinner/variantGrayscale.tsx rename to docs/examples/spinner/grayscale.tsx diff --git a/docs/examples/spinner/label.tsx b/docs/examples/spinner/label.tsx new file mode 100644 index 0000000000..bef394013b --- /dev/null +++ b/docs/examples/spinner/label.tsx @@ -0,0 +1,16 @@ +import { Box, Flex, Spinner, useReducedMotion } from 'gestalt'; + +export default function Example() { + const reduced = useReducedMotion(); + return ( + + + + + + ); +} diff --git a/docs/examples/spinner/variantWhite.tsx b/docs/examples/spinner/white.tsx similarity index 100% rename from docs/examples/spinner/variantWhite.tsx rename to docs/examples/spinner/white.tsx diff --git a/docs/pages/web/spinner.tsx b/docs/pages/web/spinner.tsx index 08c783816b..50172d4128 100644 --- a/docs/pages/web/spinner.tsx +++ b/docs/pages/web/spinner.tsx @@ -1,4 +1,3 @@ -import { useAppContext } from 'docs/docs-components/appContext'; import AccessibilitySection from '../../docs-components/AccessibilitySection'; import docGen, { DocGen } from '../../docs-components/docgen'; import GeneratedPropTable from '../../docs-components/GeneratedPropTable'; @@ -15,15 +14,13 @@ import dontMultiple from '../../examples/spinner/dontMultiple'; import dontWait from '../../examples/spinner/dontWait'; import doOverlay from '../../examples/spinner/doOverlay'; import doWait from '../../examples/spinner/doWait'; +import grayscale from '../../examples/spinner/grayscale'; +import label from '../../examples/spinner/label'; import localizationLabels from '../../examples/spinner/localizationLabels'; import main from '../../examples/spinner/main'; -import variantGrayscale from '../../examples/spinner/variantGrayscale'; -import variantWhite from '../../examples/spinner/variantWhite'; +import white from '../../examples/spinner/white'; export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) { - const { experiments } = useAppContext(); - const isVREnabled = experiments === 'Tokens'; - return ( @@ -147,7 +144,13 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen @@ -155,10 +158,40 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen + + + } + title="Grayscale" + /> + } + title="White" + /> + + + + } + /> + + } /> - - {isVREnabled && ( - - - } - title="Grayscale" - /> - - } - title="White" - /> - - )} diff --git a/packages/gestalt/src/Icon/InternalIcon.tsx b/packages/gestalt/src/Icon/InternalIcon.tsx index 60de26c722..eb7e34f9e4 100644 --- a/packages/gestalt/src/Icon/InternalIcon.tsx +++ b/packages/gestalt/src/Icon/InternalIcon.tsx @@ -24,6 +24,7 @@ export type IconColor = type IconName = keyof typeof icons | keyof typeof compactIconsVR; type Props = { + accessibilityDescribedby?: string; accessibilityLabel: string; color?: IconColor; dataTestId?: string; @@ -38,16 +39,8 @@ type Props = { // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'. const IconNames: ReadonlyArray = Object.keys(icons); -/** - * [Icons](https://gestalt.pinterest.systems/web/icon) are the symbolic representation of an action or information, providing visual context and improving usability. - * - * See the [Iconography and SVG guidelines](https://gestalt.pinterest.systems/foundations/iconography/library) to explore the full icon library. - * - * ![Icon light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list.spec.ts-snapshots/Icon-list-chromium-darwin.png) - * ![Icon dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Icon-list-dark.spec.ts-snapshots/Icon-list-dark-chromium-darwin.png) - * - */ function InternalIcon({ + accessibilityDescribedby, accessibilityLabel, color = 'subtle', dangerouslySetSvgPath, @@ -133,6 +126,7 @@ function InternalIcon({ return ( // @ts-expect-error - TS2322 - Type '{ children: Element; "aria-hidden": true | null; "aria-label": string; className: string; height: string | number; role: "img"; viewBox: string; width: string | number; }' is not assignable to type 'SVGProps'. ); } return show ? ( - -
- -
+ + + +
+ +
+ + {label && ( + + + {label} + + + )} + {' '} ) : (
diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx index c7cad75b68..4b36fe15c0 100644 --- a/packages/gestalt/src/Spinner/VRSpinner.tsx +++ b/packages/gestalt/src/Spinner/VRSpinner.tsx @@ -1,9 +1,11 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useId, useState } from 'react'; import classnames from 'classnames'; import vrLightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme/variables-light.json'; import styles from './VRSpinner.css'; import Box from '../Box'; import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider'; +import Flex from '../Flex'; +import TextUI from '../TextUI'; const SIZE_NAME_TO_PIXEL = { sm: 32, @@ -11,6 +13,7 @@ const SIZE_NAME_TO_PIXEL = { } as const; type SpinnerBodyProps = { + accessibilityDescribedby?: string; accessibilityLabel: string; delay: boolean; show: boolean; @@ -20,6 +23,7 @@ type SpinnerBodyProps = { }; function SpinnerBody({ + accessibilityDescribedby, accessibilityLabel, delay, show, @@ -41,7 +45,6 @@ function SpinnerBody({ return (
- + { if (!showProp) setShow(false); @@ -108,14 +120,26 @@ export default function Spinner({ if (!show) return null; return ( - + + + + {label && ( + + + {label} + + + )} + + ); } diff --git a/packages/gestalt/src/Text.tsx b/packages/gestalt/src/Text.tsx index 500d87695c..3b4a572655 100644 --- a/packages/gestalt/src/Text.tsx +++ b/packages/gestalt/src/Text.tsx @@ -42,6 +42,10 @@ type Props = { * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop. */ dataTestId?: string; + /** + * A unique identifier for the element. + */ + id?: string; /** * Indicates how the text should flow with the surrounding content. See the [block vs inline variant](https://gestalt.pinterest.systems/web/text#Block-vs.-inline) for more details. */ @@ -92,6 +96,7 @@ const TextWithForwardRef = forwardRef(function Text( children, color = 'default', dataTestId, + id, inline = false, italic = false, lineClamp, @@ -170,6 +175,7 @@ const TextWithForwardRef = forwardRef(function Text( (function Text( overflow = 'breakWord', size = 'md', title, + id, }: Props, ref, ): ReactElement { @@ -148,6 +153,7 @@ const TextUIWithForwardRef = forwardRef(function Text( `; exports[`Spinner renders when passed show 1`] = `
- - - +
+
+ + + +
+
+
+
`; exports[`Spinner renders with medium size 1`] = `
- - - +
+
+ + + +
+
+
+
`; exports[`Spinner renders with no delay 1`] = `
- - - +
+
+ + + +
+
+
+ `; exports[`Spinner renders with small size 1`] = `
- - - +
+
+ + + +
+
+
+ `; From 4be11ce79c6d1de9d4dc2b23e684c581154393e6 Mon Sep 17 00:00:00 2001 From: acarreras Date: Fri, 31 Jan 2025 20:08:18 +0100 Subject: [PATCH 2/2] mlore --- packages/gestalt/src/Spinner.test.tsx | 5 + packages/gestalt/src/Spinner.tsx | 34 ++-- packages/gestalt/src/Spinner/VRSpinner.tsx | 27 ++- .../src/__snapshots__/Spinner.test.tsx.snap | 174 +++++++++--------- 4 files changed, 133 insertions(+), 107 deletions(-) diff --git a/packages/gestalt/src/Spinner.test.tsx b/packages/gestalt/src/Spinner.test.tsx index 0851cde136..37aa5092b3 100644 --- a/packages/gestalt/src/Spinner.test.tsx +++ b/packages/gestalt/src/Spinner.test.tsx @@ -16,6 +16,11 @@ test('Spinner renders when passed show', () => { expect(tree).toMatchSnapshot(); }); +test('Spinner renders label', () => { + const tree = create().toJSON(); + expect(tree).toMatchSnapshot(); +}); + test('Spinner renders with no delay', () => { const tree = create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/gestalt/src/Spinner.tsx b/packages/gestalt/src/Spinner.tsx index adef404993..6f246aa73c 100644 --- a/packages/gestalt/src/Spinner.tsx +++ b/packages/gestalt/src/Spinner.tsx @@ -77,13 +77,15 @@ export default function Spinner({ ); } - return show ? ( - + if (!show) return null; + + return label ? ( +
- {label && ( - - - {label} - - - )} - {' '} + + + {label} + + + ) : ( -
+ +
+ +
+ ); } diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx index 4b36fe15c0..fe97fa1f26 100644 --- a/packages/gestalt/src/Spinner/VRSpinner.tsx +++ b/packages/gestalt/src/Spinner/VRSpinner.tsx @@ -119,11 +119,11 @@ export default function Spinner({ if (!show) return null; - return ( - + return label ? ( + - {label && ( - - - {label} - - - )} + + + {label} + + + ) : ( + ); } diff --git a/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap b/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap index 5ad12f6c92..836c83b311 100644 --- a/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap +++ b/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Spinner does not render by default 1`] = `
`; +exports[`Spinner does not render by default 1`] = `null`; -exports[`Spinner renders when passed show 1`] = ` +exports[`Spinner renders label 1`] = `
-
- -
-`; - -exports[`Spinner renders with medium size 1`] = ` -
-
- - - + Label
- +
+`; + +exports[`Spinner renders when passed show 1`] = ` +
+
+ + + +
+
+`; + +exports[`Spinner renders with medium size 1`] = ` +
+
+ + + +
`; exports[`Spinner renders with no delay 1`] = `
-
-
-
- - - -
-
-
+ +
-
`; exports[`Spinner renders with small size 1`] = `
-
-
-
- - - -
-
-
+ +
-
`;