From c093411ec6caa4d4ce1720a68a22e492d5f39458 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Mon, 17 Jun 2024 15:00:38 -0400 Subject: [PATCH] Convey Spinner to assistive technologies (#4140) * updates Spinner to accept screen reader text * restricts props, updates prop docs deprecates aria-label prop * adds stories and tests * adds changeset * updates prop docs * fixes visual regressions * improve Storybook examples for announcing compoleted loading * uses live regions, adapts SelectPanel.Loading * attempt to resolve circular dependency * updates Spinner example stories to use live-region-element via Status component * updates Spinner example stories to use live-region-element via Status component * removes live region * updates Storybook imports --- .changeset/dry-fans-sort.md | 7 + packages/react/src/Spinner/Spinner.docs.json | 20 + .../src/Spinner/Spinner.examples.stories.tsx | 96 + .../src/Spinner/Spinner.features.stories.tsx | 9 + packages/react/src/Spinner/Spinner.tsx | 72 +- packages/react/src/__tests__/Spinner.test.tsx | 20 +- .../__snapshots__/Autocomplete.test.tsx.snap | 75 +- .../__snapshots__/TextInput.test.tsx.snap | 1758 +++++++----- .../TextInputWithTokens.test.tsx.snap | 2516 ++++++++++------- .../src/drafts/SelectPanel2/SelectPanel.tsx | 2 +- packages/react/src/internal/internal-types.ts | 3 + 11 files changed, 2834 insertions(+), 1744 deletions(-) create mode 100644 .changeset/dry-fans-sort.md create mode 100644 packages/react/src/Spinner/Spinner.examples.stories.tsx create mode 100644 packages/react/src/internal/internal-types.ts diff --git a/.changeset/dry-fans-sort.md b/.changeset/dry-fans-sort.md new file mode 100644 index 00000000000..9e09682fb2a --- /dev/null +++ b/.changeset/dry-fans-sort.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Adds a prop, `srText`, to the Spinner component to convey a loading message to assistive technologies such as screen readers. + + diff --git a/packages/react/src/Spinner/Spinner.docs.json b/packages/react/src/Spinner/Spinner.docs.json index 0137c6f4faa..7d7bd6d014a 100644 --- a/packages/react/src/Spinner/Spinner.docs.json +++ b/packages/react/src/Spinner/Spinner.docs.json @@ -10,6 +10,26 @@ "name": "size", "type": "'small' | 'medium' | 'large'", "description": "Sets the width and height of the spinner." + }, + { + "name": "srText", + "type": "string | null", + "defaultValue": "Loading", + "description": "Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page." + }, + { + "name": "aria-label", + "type": "string | null", + "description": "Sets the text conveyed by assistive technologies such as screen readers.", + "deprecated": true + }, + { + "name": "data-*", + "type": "string" + }, + { + "name": "sx", + "type": "SystemStyleObject" } ], "subcomponents": [] diff --git a/packages/react/src/Spinner/Spinner.examples.stories.tsx b/packages/react/src/Spinner/Spinner.examples.stories.tsx new file mode 100644 index 00000000000..ed0c578942a --- /dev/null +++ b/packages/react/src/Spinner/Spinner.examples.stories.tsx @@ -0,0 +1,96 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import Spinner from './Spinner' +import {Box, Button} from '..' +import {VisuallyHidden} from '../internal/components/VisuallyHidden' +import {Status} from '../internal/components/Status' + +export default { + title: 'Components/Spinner/Examples', + component: Spinner, +} as Meta + +type LoadingState = 'initial' | 'loading' | 'done' + +async function wait(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)) +} + +// There should be an announcement when loading is completed or if there was an error loading +export const FullLifecycle = () => { + const [isLoading, setIsLoading] = React.useState(false) + const [loadedContent, setLoadedContent] = React.useState('') + let state: LoadingState = 'initial' + + if (isLoading) { + state = 'loading' + } else if (loadedContent) { + state = 'done' + } + + const initiateLoading = async () => { + if (state === 'done') { + return + } + + setIsLoading(true) + await wait(1000) + setLoadedContent('Some content that had to be loaded.') + setIsLoading(false) + } + + return ( + <> + + {state === 'loading' && } +

{loadedContent}

+ + {state === 'done' && 'Content finished loading'} + + + ) +} + +// We should avoid duplicate loading announcements +export const FullLifecycleVisibleLoadingText = () => { + const [isLoading, setIsLoading] = React.useState(false) + const [loadedContent, setLoadedContent] = React.useState('') + let state: LoadingState = 'initial' + + if (isLoading) { + state = 'loading' + } else if (loadedContent) { + state = 'done' + } + + const initiateLoading = async () => { + if (state === 'done') { + return + } + + setIsLoading(true) + await wait(1000) + setLoadedContent('Some content that had to be loaded.') + setIsLoading(false) + } + + return ( + + + {state !== 'done' && ( + + {state === 'loading' && } + {state === 'loading' ? 'Content is loading...' : ''} + + )} +

{loadedContent}

+ + {state === 'done' && 'Content finished loading'} + + + ) +} diff --git a/packages/react/src/Spinner/Spinner.features.stories.tsx b/packages/react/src/Spinner/Spinner.features.stories.tsx index 50f722a4035..9e4ffa46a57 100644 --- a/packages/react/src/Spinner/Spinner.features.stories.tsx +++ b/packages/react/src/Spinner/Spinner.features.stories.tsx @@ -1,6 +1,8 @@ import React from 'react' import type {Meta} from '@storybook/react' import Spinner from './Spinner' +import {Box} from '..' +import {Status} from '../internal/components/Status' export default { title: 'Components/Spinner/Features', @@ -10,3 +12,10 @@ export default { export const Small = () => export const Large = () => + +export const SuppressScreenReaderText = () => ( + + + Loading... + +) diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 52fe378508f..5cb003acebc 100644 --- a/packages/react/src/Spinner/Spinner.tsx +++ b/packages/react/src/Spinner/Spinner.tsx @@ -1,8 +1,10 @@ import React from 'react' import styled from 'styled-components' -import type {SxProp} from '../sx' -import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import sx, {type SxProp} from '../sx' +import {VisuallyHidden} from '../internal/components/VisuallyHidden' +import type {HTMLDataAttributes} from '../internal/internal-types' +import Box from '../Box' +import {useId} from '../hooks' const sizeMap = { small: '16px', @@ -10,37 +12,56 @@ const sizeMap = { large: '64px', } -export interface SpinnerInternalProps { +export type SpinnerProps = { /** Sets the width and height of the spinner. */ size?: keyof typeof sizeMap -} + /** Sets the text conveyed by assistive technologies such as screen readers. Set to `null` if the loading state is displayed in a text node somewhere else on the page. */ + srText?: string | null + /** @deprecated Use `srText` instead. */ + 'aria-label'?: string | null +} & HTMLDataAttributes & + SxProp -function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) { +function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) { const size = sizeMap[sizeKey] + const hasSrAnnouncement = Boolean(srText || ariaLabel) + const ariaLabelId = useId() return ( - - - - + /* inline-flex removes the extra line height */ + + + + + + {hasSrAnnouncement ? {srText || ariaLabel} : null} + ) } -const StyledSpinner = styled(Spinner)` +const StyledSpinner = styled(Spinner)` @keyframes rotate-keyframes { 100% { transform: rotate(360deg); @@ -54,5 +75,4 @@ const StyledSpinner = styled(Spinner)` StyledSpinner.displayName = 'Spinner' -export type SpinnerProps = ComponentProps export default StyledSpinner diff --git a/packages/react/src/__tests__/Spinner.test.tsx b/packages/react/src/__tests__/Spinner.test.tsx index 8284b670ee1..47151e13b4d 100644 --- a/packages/react/src/__tests__/Spinner.test.tsx +++ b/packages/react/src/__tests__/Spinner.test.tsx @@ -1,9 +1,9 @@ import React from 'react' +import axe from 'axe-core' import type {SpinnerProps} from '..' import {Spinner} from '..' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender} from '@testing-library/react' -import axe from 'axe-core' describe('Spinner', () => { behavesAsComponent({ @@ -14,6 +14,24 @@ describe('Spinner', () => { default: Spinner, }) + it('should label the spinner with default loading text', async () => { + const {getByLabelText} = HTMLRender() + + expect(getByLabelText('Loading')).toBeInTheDocument() + }) + + it('should label the spinner with with custom loading text', async () => { + const {getByLabelText} = HTMLRender() + + expect(getByLabelText('Custom loading text')).toBeInTheDocument() + }) + + it('should not label the spinner with with loading text when `srText` is set to `null`', async () => { + const {getByLabelText} = HTMLRender() + + expect(() => getByLabelText('Loading')).toThrow() + }) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe.run(container) diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 0a6cc2ab235..be8b5ad1be1 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -327,6 +327,13 @@ exports[`snapshots renders a loading state 1`] = ` justify-content: center; } +.c2 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c0 { position: absolute; width: 1px; @@ -340,7 +347,17 @@ exports[`snapshots renders a loading state 1`] = ` border-width: 0; } -.c2 { +.c4:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; } @@ -356,30 +373,42 @@ exports[`snapshots renders a loading state 1`] = ` className="c1" display="flex" > - - - - + + + + +
+ Loading +
+ , ] diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index f3e4be334ce..950abfd0af7 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -3932,6 +3932,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` } .c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -4077,35 +4094,47 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > - - - - + + + + +
+ Loading +
+ , @@ -4118,12 +4147,29 @@ exports[`TextInput renders with a loading indicator 1`] = ` } .c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c5:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c5 { +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -4222,7 +4268,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c4 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -4232,7 +4278,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c4:focus { +.c6:focus { outline: 0; } @@ -4262,39 +4308,51 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -4348,6 +4418,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` } .c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -4493,35 +4580,47 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > - - - - + + + + +
+ Loading +
+ , @@ -4533,17 +4632,34 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c6 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -4647,7 +4763,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -4657,7 +4773,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -4712,44 +4828,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -4802,17 +4942,34 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c6 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -4916,7 +5073,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -4926,7 +5083,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -4981,44 +5138,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -5071,17 +5252,34 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: visible; } -.c6 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5185,7 +5383,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -5195,7 +5393,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -5250,44 +5448,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -5340,11 +5562,28 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c4 { visibility: hidden; } -.c5 { +.c7:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c6 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5520,40 +5759,52 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ , @@ -5565,17 +5816,34 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c5 { +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c7 { visibility: visible; } -.c3 { +.c5:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c6 { +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5679,7 +5947,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -5689,7 +5957,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c4:focus { +.c6:focus { outline: 0; } @@ -5719,39 +5987,51 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -5834,11 +6126,28 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c5 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c4 { visibility: hidden; } -.c5 { +.c7:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c6 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6014,40 +6323,52 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ , @@ -6059,15 +6380,32 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c6 { +.c8 { visibility: visible; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6078,7 +6416,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6190,7 +6528,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -6200,7 +6538,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -6256,44 +6594,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -6376,15 +6738,32 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c6 { +.c8 { visibility: visible; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6395,7 +6774,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6499,7 +6878,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -6509,7 +6888,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -6564,44 +6943,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -6684,7 +7087,14 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c6 { +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c8 { visibility: hidden; } @@ -6692,7 +7102,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6703,7 +7123,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6813,7 +7233,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -6823,7 +7243,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c7:focus { outline: 0; } @@ -6879,44 +7299,56 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index ff996c61206..21b8a0695d4 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -6270,6 +6270,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c10 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c7 { position: absolute; width: 1px; @@ -6283,7 +6290,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c10 { +.c12:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c11 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -6969,39 +6986,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+ , - .c4 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -7021,7 +7050,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c4 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7029,7 +7058,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c5 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -7047,7 +7076,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c9 { +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c11 { position: absolute; width: 1px; height: 1px; @@ -7060,13 +7096,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c3 { +.c5:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c11 { +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -7172,7 +7218,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -7183,11 +7229,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c6:focus { +.c8:focus { outline: 0; } -.c7 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7220,13 +7266,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7:hover { +.c9:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c10 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -7266,16 +7312,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c10:hover, -.c10:focus { +.c12:hover, +.c12:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c10:active { +.c12:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c8 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -7300,11 +7346,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c8:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c8:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -7335,47 +7381,59 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c2" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, @@ -7868,6 +7938,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c10 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c7 { position: absolute; width: 1px; @@ -7881,7 +7958,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c10 { +.c12:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c11 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -8567,39 +8654,51 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+ , - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -8619,7 +8718,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -8627,7 +8726,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -8645,11 +8744,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -8662,13 +8768,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -8779,7 +8895,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -8790,11 +8906,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8827,13 +8943,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -8873,16 +8989,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -8907,11 +9023,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -8967,52 +9083,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9479,7 +9619,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -9487,7 +9627,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -9505,11 +9645,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -9522,13 +9669,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -9639,7 +9796,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -9650,11 +9807,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -9687,13 +9844,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -9733,16 +9890,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -9767,11 +9924,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -9827,52 +9984,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10339,7 +10520,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -10347,7 +10528,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -10365,11 +10546,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: visible; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -10382,13 +10570,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -10499,7 +10697,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -10510,11 +10708,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -10547,13 +10745,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -10593,16 +10791,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -10627,11 +10825,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -10687,52 +10885,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, @@ -11225,6 +11447,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c11 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c10 { visibility: hidden; } @@ -11242,7 +11471,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c11 { +.c13:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c12 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -11958,44 +12197,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+ , - .c4 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -12015,7 +12266,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c4 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -12023,7 +12274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c5 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -12041,11 +12292,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c11 { +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c13 { visibility: visible; } -.c9 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -12058,13 +12316,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c3 { +.c5:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c12 { +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -12175,7 +12443,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -12186,11 +12454,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c6:focus { +.c8:focus { outline: 0; } -.c7 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -12223,13 +12491,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7:hover { +.c9:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c10 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -12269,16 +12537,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c10:hover, -.c10:focus { +.c12:hover, +.c12:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c10:active { +.c12:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c8 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -12303,11 +12571,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c8:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c8:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -12338,47 +12606,59 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c2" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, @@ -12901,6 +13193,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c11 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c10 { visibility: hidden; } @@ -12918,7 +13217,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c11 { +.c13:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c12 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13634,44 +13943,56 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+ , - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -13691,7 +14012,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -13699,7 +14020,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -13717,15 +14038,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c12 { +.c14 { visibility: visible; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -13738,7 +14066,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13749,7 +14087,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13867,7 +14205,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -13878,11 +14216,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -13913,13 +14251,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -13959,16 +14297,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 16px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -13993,11 +14331,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -14053,52 +14391,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14595,7 +14957,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -14603,7 +14965,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -14621,15 +14983,22 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + .c3 { visibility: hidden; } -.c12 { +.c14 { visibility: visible; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -14642,7 +15011,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -14653,7 +15032,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -14764,7 +15143,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -14775,11 +15154,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -14812,13 +15191,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -14858,16 +15237,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -14892,11 +15271,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -14952,52 +15331,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, - .c5 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -15494,7 +15897,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -15502,7 +15905,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -15520,7 +15923,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c12 { +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c14 { visibility: hidden; } @@ -15528,7 +15938,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } -.c10 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -15541,7 +15951,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c4 { +.c6:not(:focus):not(:active):not(:focus-within) { + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15552,7 +15972,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15663,7 +16083,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -15674,11 +16094,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c9:focus { outline: 0; } -.c8 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -15709,13 +16129,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c10:hover { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium,0 3px 6px rgba(140,149,159,0.15))); color: var(--fgColor-default,var(--color-fg-default,#1F2328)); } -.c11 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -15755,16 +16175,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 24px; } -.c11:hover, -.c11:focus { +.c13:hover, +.c13:focus { background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2))); } -.c11:active { +.c13:active { background-color: var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))); } -.c9 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -15789,11 +16209,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -15849,52 +16269,64 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+
zero (press backspace or delete to remove) one (press backspace or delete to remove) two (press backspace or delete to remove) three (press backspace or delete to remove) four (press backspace or delete to remove) five (press backspace or delete to remove) six (press backspace or delete to remove) seven (press backspace or delete to remove)
, diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx index ab99dbbe433..48853b46e09 100644 --- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx +++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx @@ -616,7 +616,7 @@ const SelectPanelLoading = ({children = 'Fetching items...'}: React.PropsWithChi // maxHeight of dialog - (header & footer) }} > - + {children} ) diff --git a/packages/react/src/internal/internal-types.ts b/packages/react/src/internal/internal-types.ts new file mode 100644 index 00000000000..5a58a90e110 --- /dev/null +++ b/packages/react/src/internal/internal-types.ts @@ -0,0 +1,3 @@ +export type HTMLDataAttributes = { + [key: `data-${string}`]: unknown +}