From fe7f92daef975e9f273af481f03e5cf66cffe3c4 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 10 Jan 2024 15:18:41 -0500 Subject: [PATCH 1/6] updates Spinner to accept screen reader text --- src/Spinner/Spinner.tsx | 43 +- .../__snapshots__/Autocomplete.test.tsx.snap | 66 +- .../__snapshots__/Spinner.test.tsx.snap | 66 +- .../__snapshots__/TextInput.test.tsx.snap | 1654 +++++++----- .../TextInputWithTokens.test.tsx.snap | 2392 ++++++++++------- 5 files changed, 2453 insertions(+), 1768 deletions(-) diff --git a/src/Spinner/Spinner.tsx b/src/Spinner/Spinner.tsx index e3adf1c2537..34363d1fa7c 100644 --- a/src/Spinner/Spinner.tsx +++ b/src/Spinner/Spinner.tsx @@ -2,6 +2,7 @@ import React from 'react' import styled from 'styled-components' import sx, {SxProp} from '../sx' import {ComponentProps} from '../utils/types' +import {VisuallyHidden} from '../internal/components/VisuallyHidden' const sizeMap = { small: '16px', @@ -12,30 +13,34 @@ const sizeMap = { export interface SpinnerInternalProps { /** Sets the width and height of the spinner. */ size?: keyof typeof sizeMap + srText?: string } -function Spinner({size: sizeKey = 'medium', ...props}: SpinnerInternalProps) { +function Spinner({size: sizeKey = 'medium', srText = 'Loading', ...props}: SpinnerInternalProps) { const size = sizeMap[sizeKey] return ( - - - - + + + + + + {srText} + ) } diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index c569d6033de..7d812c64c75 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -324,6 +324,16 @@ exports[`snapshots renders a loading state 1`] = ` border-width: 0; } +.c3: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; +} + .c2 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -340,30 +350,40 @@ exports[`snapshots renders a loading state 1`] = ` className="c1" display="flex" > - - - - + + + + +
+ Loading +
+ , ] diff --git a/src/__tests__/__snapshots__/Spinner.test.tsx.snap b/src/__tests__/__snapshots__/Spinner.test.tsx.snap index 5c7f00dce0c..dfb599f3c81 100644 --- a/src/__tests__/__snapshots__/Spinner.test.tsx.snap +++ b/src/__tests__/__snapshots__/Spinner.test.tsx.snap @@ -1,33 +1,53 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Spinner renders consistently 1`] = ` +.c1: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; +} + .c0 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; } - - - - + + + + +
+ Loading +
+ `; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 0df3975bf7b..8168baebcc6 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -3987,6 +3987,16 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.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; @@ -4125,35 +4135,45 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > - - - - + + + + +
+ Loading +
+ , @@ -4165,13 +4185,23 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.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; visibility: visible; } -.c5 { +.c6 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -4262,7 +4292,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c4 { +.c5 { border: 0; font-size: inherit; font-family: inherit; @@ -4272,7 +4302,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c4:focus { +.c5:focus { outline: 0; } @@ -4302,39 +4332,49 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -4387,6 +4437,16 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } +.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; @@ -4525,35 +4585,45 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > - - - - + + + + +
+ Loading +
+ , @@ -4569,7 +4639,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } -.c6 { +.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; +} + +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -4671,7 +4751,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -4681,7 +4761,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -4737,44 +4817,54 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -4831,7 +4931,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } -.c6 { +.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; +} + +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -4933,7 +5043,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -4943,7 +5053,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -4999,44 +5109,54 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ - - - - + + + + +
+ Loading +
+ , @@ -5093,7 +5223,17 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } -.c6 { +.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; +} + +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -5195,7 +5335,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -5205,7 +5345,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -5261,48 +5401,58 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - - - - + + + +
+ Loading +
+ + + + - - - - + + + + +
+ Loading +
+ , @@ -5355,6 +5515,16 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.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; @@ -5524,40 +5694,50 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ , @@ -5569,17 +5749,27 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c5 { +.c6 { visibility: visible; } +.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; visibility: visible; } -.c6 { +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5675,7 +5865,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { +.c5 { border: 0; font-size: inherit; font-family: inherit; @@ -5685,7 +5875,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c4:focus { +.c5:focus { outline: 0; } @@ -5715,39 +5905,49 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -5835,6 +6045,16 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } +.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; @@ -6004,40 +6224,50 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+ , @@ -6053,10 +6283,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } -.c6 { +.c7 { visibility: visible; } +.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; @@ -6068,7 +6308,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6172,7 +6412,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -6182,7 +6422,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -6239,44 +6479,54 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -6364,10 +6624,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: hidden; } -.c6 { +.c7 { visibility: visible; } +.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; @@ -6379,7 +6649,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6475,7 +6745,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -6485,7 +6755,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -6541,44 +6811,54 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , @@ -6662,7 +6952,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c6 { +.c7 { visibility: hidden; } @@ -6670,6 +6960,16 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } +.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; @@ -6681,7 +6981,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c7 { +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6783,7 +7083,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -6793,7 +7093,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -6850,44 +7150,54 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> - - - - + + + + +
+ Loading +
+
- - - - + + + + +
+ Loading +
+ , diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index feaf7c79688..5a2fdd014dc 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -6263,6 +6263,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c11: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; +} + .c10 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -6949,39 +6959,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+ , - .c4 { + .c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -7001,7 +7021,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c4 > * { +.c5 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7009,7 +7029,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c5 { +.c6 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -7027,7 +7047,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c9 { +.c10 { position: absolute; width: 1px; height: 1px; @@ -7040,13 +7060,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; visibility: visible; } -.c11 { +.c12 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -7144,7 +7174,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -7155,11 +7185,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c6:focus { +.c7:focus { outline: 0; } -.c7 { +.c8 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7192,13 +7222,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7:hover { +.c8:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c10 { +.c11 { background-color: transparent; font-family: inherit; color: currentColor; @@ -7238,16 +7268,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c10:hover, -.c10:focus { +.c11:hover, +.c11:focus { background-color: rgba(175,184,193,0.2); } -.c10:active { +.c11:active { background-color: rgba(234,238,242,0.5); } -.c8 { +.c9 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -7272,11 +7302,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c8:is(a,button,[tabIndex='0']) { +.c9:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c8:is(a,button,[tabIndex='0']):after { +.c9:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -7307,47 +7337,57 @@ 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)
, @@ -7861,6 +7911,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c11: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; +} + .c10 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; @@ -8547,39 +8607,49 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > - + - - - + viewBox="0 0 16 16" + width="16px" + > + + + +
+ Loading +
+ , - .c5 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -8599,7 +8669,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -8607,7 +8677,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -8629,7 +8699,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -8642,7 +8712,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.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; +} + +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -8751,7 +8831,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -8762,11 +8842,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8799,13 +8879,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -8845,16 +8925,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -8879,11 +8959,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -8940,52 +9020,62 @@ 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 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9460,7 +9560,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -9468,7 +9568,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -9490,7 +9590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -9503,7 +9603,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.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; +} + +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -9612,7 +9722,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -9623,11 +9733,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -9660,13 +9770,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -9706,16 +9816,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -9740,11 +9850,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -9801,52 +9911,62 @@ 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 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10321,7 +10451,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -10329,7 +10459,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -10351,7 +10481,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -10364,7 +10494,17 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12 { +.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; +} + +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -10473,7 +10613,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -10484,11 +10624,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -10521,13 +10661,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -10567,16 +10707,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -10601,11 +10741,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -10662,52 +10802,62 @@ 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 +11385,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; @@ -11942,44 +12112,54 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+ , - .c4 { + .c5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -11999,7 +12179,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c4 > * { +.c5 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -12007,7 +12187,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c5 { +.c6 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -12025,11 +12205,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c11 { +.c12 { visibility: visible; } -.c9 { +.c10 { position: absolute; width: 1px; height: 1px; @@ -12042,13 +12222,23 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; visibility: visible; } -.c12 { +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -12151,7 +12341,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -12162,11 +12352,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c6:focus { +.c7:focus { outline: 0; } -.c7 { +.c8 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -12199,13 +12389,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7:hover { +.c8:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c10 { +.c11 { background-color: transparent; font-family: inherit; color: currentColor; @@ -12245,16 +12435,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c10:hover, -.c10:focus { +.c11:hover, +.c11:focus { background-color: rgba(175,184,193,0.2); } -.c10:active { +.c11:active { background-color: rgba(234,238,242,0.5); } -.c8 { +.c9 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -12279,11 +12469,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c8:is(a,button,[tabIndex='0']) { +.c9:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c8:is(a,button,[tabIndex='0']):after { +.c9:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -12314,47 +12504,57 @@ 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)
, @@ -12903,6 +13113,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; @@ -13620,44 +13840,54 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> - + - - - + viewBox="0 0 16 16" + width="32px" + > + + + +
+ Loading +
+ , - .c5 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -13677,7 +13907,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -13685,7 +13915,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -13707,11 +13937,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } -.c12 { +.c13 { visibility: visible; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -13724,6 +13954,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; @@ -13735,7 +13975,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13845,7 +14085,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -13856,11 +14096,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -13891,13 +14131,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -13937,16 +14177,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 16px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -13971,11 +14211,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -14032,52 +14272,62 @@ 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 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14583,7 +14843,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -14591,7 +14851,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -14613,11 +14873,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: hidden; } -.c12 { +.c13 { visibility: visible; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -14630,6 +14890,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; @@ -14641,7 +14911,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -14744,7 +15014,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -14755,11 +15025,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -14792,13 +15062,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -14838,16 +15108,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -14872,11 +15142,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -14933,52 +15203,62 @@ 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 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -15484,7 +15774,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -15492,7 +15782,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -15510,7 +15800,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c12 { +.c13 { visibility: hidden; } @@ -15518,7 +15808,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } -.c10 { +.c11 { position: absolute; width: 1px; height: 1px; @@ -15531,6 +15821,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.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; @@ -15542,7 +15842,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c13 { +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15645,7 +15945,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -15656,11 +15956,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -15691,13 +15991,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -15737,16 +16037,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 24px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -15771,11 +16071,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -15832,52 +16132,62 @@ 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)
, From edada79ff463de555d78ce94987d8a7282ac1da9 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 10 Jan 2024 15:35:40 -0500 Subject: [PATCH 2/6] restricts props, updates prop docs deprecates aria-label prop --- src/Spinner/Spinner.docs.json | 19 +++++++++++++++++++ src/Spinner/Spinner.tsx | 17 ++++++++++------- src/internal/internal-types.ts | 3 +++ 3 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 src/internal/internal-types.ts diff --git a/src/Spinner/Spinner.docs.json b/src/Spinner/Spinner.docs.json index 055f21dde2b..1be2bc0f512 100644 --- a/src/Spinner/Spinner.docs.json +++ b/src/Spinner/Spinner.docs.json @@ -9,6 +9,25 @@ "name": "size", "type": "'small' | 'medium' | 'large'", "description": "Sets the width and height of the spinner." + }, + { + "name": "srText", + "type": "string", + "description": "Sets the text conveyed by assistive technologies such as screen readers." + }, + { + "name": "aria-label", + "type": "string", + "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/src/Spinner/Spinner.tsx b/src/Spinner/Spinner.tsx index 34363d1fa7c..87bbd9314af 100644 --- a/src/Spinner/Spinner.tsx +++ b/src/Spinner/Spinner.tsx @@ -1,8 +1,8 @@ import React from 'react' import styled from 'styled-components' import sx, {SxProp} from '../sx' -import {ComponentProps} from '../utils/types' import {VisuallyHidden} from '../internal/components/VisuallyHidden' +import {HTMLDataAttributes} from '../internal/internal-types' const sizeMap = { small: '16px', @@ -10,13 +10,17 @@ 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. */ srText?: string -} + /** @deprecated Use `srText` instead. */ + 'aria-label'?: string +} & HTMLDataAttributes & + SxProp -function Spinner({size: sizeKey = 'medium', srText = 'Loading', ...props}: SpinnerInternalProps) { +function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) { const size = sizeMap[sizeKey] return ( @@ -39,12 +43,12 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', ...props}: Spinn vectorEffect="non-scaling-stroke" /> - {srText} + {srText || ariaLabel} ) } -const StyledSpinner = styled(Spinner)` +const StyledSpinner = styled(Spinner)` @keyframes rotate-keyframes { 100% { transform: rotate(360deg); @@ -58,5 +62,4 @@ const StyledSpinner = styled(Spinner)` StyledSpinner.displayName = 'Spinner' -export type SpinnerProps = ComponentProps export default StyledSpinner diff --git a/src/internal/internal-types.ts b/src/internal/internal-types.ts new file mode 100644 index 00000000000..5a58a90e110 --- /dev/null +++ b/src/internal/internal-types.ts @@ -0,0 +1,3 @@ +export type HTMLDataAttributes = { + [key: `data-${string}`]: unknown +} From 24a4eca164bcf8f1f4b34ac8e0d4d5d260d6e3c8 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 10 Jan 2024 17:55:41 -0500 Subject: [PATCH 3/6] adds stories and tests --- src/Spinner/Spinner.examples.stories.tsx | 79 ++++++++++++++++++++++++ src/Spinner/Spinner.features.stories.tsx | 8 +++ src/Spinner/Spinner.tsx | 11 ++-- src/__tests__/Spinner.test.tsx | 18 ++++++ 4 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 src/Spinner/Spinner.examples.stories.tsx diff --git a/src/Spinner/Spinner.examples.stories.tsx b/src/Spinner/Spinner.examples.stories.tsx new file mode 100644 index 00000000000..30090adffa1 --- /dev/null +++ b/src/Spinner/Spinner.examples.stories.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import {ComponentMeta} from '@storybook/react' +import Spinner from './Spinner' +import {Box, Button} from '..' +import {VisuallyHidden} from '../internal/components/VisuallyHidden' + +export default { + title: 'Components/Spinner/Examples', + component: Spinner, +} as ComponentMeta + +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 () => { + setIsLoading(true) + await wait(1000) + setLoadedContent('Some content that had to be loaded.') + setIsLoading(false) + } + + return ( + <> + {state === 'initial' && } + {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 () => { + setIsLoading(true) + await wait(1000) + setLoadedContent('Some content that had to be loaded.') + setIsLoading(false) + } + + return ( + <> + {state === 'initial' && } + {state === 'loading' && ( + + + Content is loading... + + )} +

{loadedContent}

+ {state === 'done' && 'Content finished loading'} + + ) +} diff --git a/src/Spinner/Spinner.features.stories.tsx b/src/Spinner/Spinner.features.stories.tsx index c3f9d640591..ece1e7f43e4 100644 --- a/src/Spinner/Spinner.features.stories.tsx +++ b/src/Spinner/Spinner.features.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import {ComponentMeta} from '@storybook/react' import Spinner from './Spinner' +import {Box} from '..' export default { title: 'Components/Spinner/Features', @@ -10,3 +11,10 @@ export default { export const Small = () => export const Large = () => + +export const SuppressScreenReaderText = () => ( + + + Loading... + +) diff --git a/src/Spinner/Spinner.tsx b/src/Spinner/Spinner.tsx index 87bbd9314af..bc7018c549e 100644 --- a/src/Spinner/Spinner.tsx +++ b/src/Spinner/Spinner.tsx @@ -13,18 +13,19 @@ const sizeMap = { 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. */ - srText?: string + /** 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 + 'aria-label'?: string | null } & HTMLDataAttributes & SxProp function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ariaLabel, ...props}: SpinnerProps) { const size = sizeMap[sizeKey] + const hasSrAnnouncement = Boolean(srText || ariaLabel) return ( - + - {srText || ariaLabel} + {hasSrAnnouncement ? {srText || ariaLabel} : null} ) } diff --git a/src/__tests__/Spinner.test.tsx b/src/__tests__/Spinner.test.tsx index dd121eb7c17..84b22cea626 100644 --- a/src/__tests__/Spinner.test.tsx +++ b/src/__tests__/Spinner.test.tsx @@ -15,6 +15,24 @@ describe('Spinner', () => { default: Spinner, }) + it('should render an ARIA live region with default loading text', async () => { + const {getByRole} = HTMLRender() + + expect(getByRole('status').textContent).toBe('Loading') + }) + + it('should render an ARIA live region with custom loading text', async () => { + const {getByRole} = HTMLRender() + + expect(getByRole('status').textContent).toBe('Custom loading text') + }) + + it('should not render an ARIA live region with loading text when `srText` is set to `null`', async () => { + const {queryByRole} = HTMLRender() + + expect(queryByRole('status')).not.toBeInTheDocument() + }) + it('should have no axe violations', async () => { const {container} = HTMLRender() const results = await axe(container) From 9a0308eac4efae19bbc7bc255b9f290ba565fd97 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 10 Jan 2024 17:59:48 -0500 Subject: [PATCH 4/6] adds changeset --- .changeset/dry-fans-sort.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/dry-fans-sort.md 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. + + From 9c4359ecb8b303053de63833a5cdba13624d6076 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Wed, 10 Jan 2024 18:00:38 -0500 Subject: [PATCH 5/6] updates prop docs --- src/Spinner/Spinner.docs.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Spinner/Spinner.docs.json b/src/Spinner/Spinner.docs.json index 1be2bc0f512..9f030ea2b2d 100644 --- a/src/Spinner/Spinner.docs.json +++ b/src/Spinner/Spinner.docs.json @@ -12,12 +12,13 @@ }, { "name": "srText", - "type": "string", - "description": "Sets the text conveyed by assistive technologies such as screen readers." + "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", + "type": "string | null", "description": "Sets the text conveyed by assistive technologies such as screen readers.", "deprecated": true }, From 7448154769a36a7f9b48a305d6db4689238581eb Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 11 Jan 2024 10:45:37 -0500 Subject: [PATCH 6/6] fixes visual regressions --- src/Spinner/Spinner.tsx | 6 +- .../__snapshots__/Autocomplete.test.tsx.snap | 20 +- .../__snapshots__/Spinner.test.tsx.snap | 20 +- .../__snapshots__/TextInput.test.tsx.snap | 392 +++--- .../TextInputWithTokens.test.tsx.snap | 1146 +++++++++-------- 5 files changed, 905 insertions(+), 679 deletions(-) diff --git a/src/Spinner/Spinner.tsx b/src/Spinner/Spinner.tsx index bc7018c549e..8bac35e7109 100644 --- a/src/Spinner/Spinner.tsx +++ b/src/Spinner/Spinner.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import sx, {SxProp} from '../sx' import {VisuallyHidden} from '../internal/components/VisuallyHidden' import {HTMLDataAttributes} from '../internal/internal-types' +import {Box} from '../' const sizeMap = { small: '16px', @@ -25,7 +26,8 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar const hasSrAnnouncement = Boolean(srText || ariaLabel) return ( - + /* inline-flex removes the extra line height */ + {hasSrAnnouncement ? {srText || ariaLabel} : null} - + ) } diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 7d812c64c75..593e8d1b873 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -311,6 +311,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; @@ -324,7 +331,7 @@ exports[`snapshots renders a loading state 1`] = ` border-width: 0; } -.c3:not(:focus):not(:active):not(:focus-within) { +.c4:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -334,7 +341,7 @@ exports[`snapshots renders a loading state 1`] = ` width: 1px; } -.c2 { +.c3 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; } @@ -350,12 +357,13 @@ exports[`snapshots renders a loading state 1`] = ` className="c1" display="flex" > -
Loading
- + , ] diff --git a/src/__tests__/__snapshots__/Spinner.test.tsx.snap b/src/__tests__/__snapshots__/Spinner.test.tsx.snap index dfb599f3c81..0854f1b043d 100644 --- a/src/__tests__/__snapshots__/Spinner.test.tsx.snap +++ b/src/__tests__/__snapshots__/Spinner.test.tsx.snap @@ -1,7 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Spinner renders consistently 1`] = ` -.c1:not(:focus):not(:active):not(:focus-within) { +.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c2:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -11,17 +18,18 @@ exports[`Spinner renders consistently 1`] = ` width: 1px; } -.c0 { +.c1 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; } -
Loading
- + `; diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 8168baebcc6..d4e6c4a4f5d 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -3987,7 +3987,14 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c5:not(:focus):not(:active):not(:focus-within) { +.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; @@ -3997,7 +4004,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -4135,12 +4142,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > -
Loading
- + , @@ -4185,7 +4193,14 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c4:not(:focus):not(:active):not(:focus-within) { +.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; @@ -4195,13 +4210,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c3 { +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c6 { +.c7 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -4292,7 +4307,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -4302,7 +4317,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -4332,12 +4347,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > -
Loading
- + -
Loading
- + , @@ -4437,7 +4454,14 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c5:not(:focus):not(:active):not(:focus-within) { +.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; @@ -4447,7 +4471,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -4585,12 +4609,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c3" display="flex" > -
Loading
- + , @@ -4635,11 +4660,18 @@ 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; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -4649,13 +4681,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c7 { +.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; @@ -4751,7 +4783,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -4761,7 +4793,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -4817,12 +4849,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- + -
Loading
- + , @@ -4927,11 +4961,18 @@ 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; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -4941,13 +4982,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c7 { +.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; @@ -5043,7 +5084,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -5053,7 +5094,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -5109,12 +5150,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- + -
Loading
- + , @@ -5219,11 +5262,18 @@ 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; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -5233,13 +5283,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c7 { +.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; @@ -5335,7 +5385,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -5345,7 +5395,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -5401,12 +5451,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- + -
Loading
- + , @@ -5511,11 +5563,18 @@ 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; } -.c6:not(:focus):not(:active):not(:focus-within) { +.c7:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -5525,7 +5584,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c5 { +.c6 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5694,12 +5753,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- + , @@ -5749,11 +5809,18 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c6 { +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c7 { visibility: visible; } -.c4:not(:focus):not(:active):not(:focus-within) { +.c5:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -5763,13 +5830,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c3 { +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c7 { +.c8 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -5865,7 +5932,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { +.c6 { border: 0; font-size: inherit; font-family: inherit; @@ -5875,7 +5942,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c5:focus { +.c6:focus { outline: 0; } @@ -5905,12 +5972,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` className="c2" display="flex" > -
Loading
- +
-
Loading
- + , @@ -6041,11 +6110,18 @@ 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; } -.c6:not(:focus):not(:active):not(:focus-within) { +.c7:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -6055,7 +6131,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c5 { +.c6 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6224,12 +6300,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- + , @@ -6279,15 +6356,22 @@ 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; } -.c7 { +.c8 { visibility: visible; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -6297,7 +6381,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6308,7 +6392,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c8 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6412,7 +6496,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -6422,7 +6506,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -6479,12 +6563,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- +
-
Loading
- + , @@ -6620,15 +6706,22 @@ 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; } -.c7 { +.c8 { visibility: visible; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -6638,7 +6731,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6649,7 +6742,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c8 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6745,7 +6838,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -6755,7 +6848,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -6811,12 +6904,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- +
-
Loading
- + , @@ -6952,7 +7047,14 @@ exports[`TextInput renders with a loading indicator 1`] = ` position: relative; } -.c7 { +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c8 { visibility: hidden; } @@ -6960,7 +7062,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` visibility: visible; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -6970,7 +7072,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -6981,7 +7083,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` left: 0; } -.c8 { +.c9 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -7083,7 +7185,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { +.c7 { border: 0; font-size: inherit; font-family: inherit; @@ -7093,7 +7195,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` width: 100%; } -.c6:focus { +.c7:focus { outline: 0; } @@ -7150,12 +7252,13 @@ exports[`TextInput renders with a loading indicator 1`] = ` /> -
Loading
- +
-
Loading
- + , diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 5a2fdd014dc..3ea8a133d68 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -6250,6 +6250,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; @@ -6263,7 +6270,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c11:not(:focus):not(:active):not(:focus-within) { +.c12:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -6273,7 +6280,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c10 { +.c11 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -6959,12 +6966,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > -
Loading
- + , - .c5 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -7021,7 +7029,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -7029,7 +7037,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -7047,7 +7055,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c10 { +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c11 { position: absolute; width: 1px; height: 1px; @@ -7060,7 +7075,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c4:not(:focus):not(:active):not(:focus-within) { +.c5:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -7070,13 +7085,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c3 { +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c12 { +.c13 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: hidden; @@ -7174,7 +7189,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -7185,11 +7200,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -7222,13 +7237,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -7268,16 +7283,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -7302,11 +7317,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -7337,12 +7352,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c2" display="flex" > -
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)
, @@ -7898,6 +7915,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; @@ -7911,7 +7935,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c11:not(:focus):not(:active):not(:focus-within) { +.c12:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -7921,7 +7945,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c10 { +.c11 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; @@ -8607,12 +8631,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c9" display="flex" > -
Loading
- + , - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -8669,7 +8694,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -8677,7 +8702,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -8695,11 +8720,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; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -8712,7 +8744,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -8722,13 +8754,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c13 { +.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; @@ -8831,7 +8863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -8842,11 +8874,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -8879,13 +8911,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -8925,16 +8957,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -8959,11 +8991,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -9020,12 +9052,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
, - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9560,7 +9594,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -9568,7 +9602,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -9586,11 +9620,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; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -9603,7 +9644,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -9613,13 +9654,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c13 { +.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; @@ -9722,7 +9763,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -9733,11 +9774,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -9770,13 +9811,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -9816,16 +9857,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -9850,11 +9891,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -9911,12 +9952,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
, - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -10451,7 +10494,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -10459,7 +10502,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -10477,11 +10520,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; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -10494,7 +10544,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -10504,13 +10554,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c13 { +.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; @@ -10613,7 +10663,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -10624,11 +10674,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -10661,13 +10711,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -10707,16 +10757,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -10741,11 +10791,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -10802,12 +10852,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
, @@ -11368,6 +11420,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; } @@ -11385,7 +11444,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12:not(:focus):not(:active):not(:focus-within) { +.c13:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -11395,7 +11454,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c11 { +.c12 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -12112,12 +12171,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
Loading
- + , - .c5 { + .c6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -12179,7 +12239,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c5 > * { +.c6 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -12187,7 +12247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c6 { +.c7 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -12205,11 +12265,18 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c12 { - visibility: visible; +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; } -.c10 { +.c13 { + visibility: visible; +} + +.c11 { position: absolute; width: 1px; height: 1px; @@ -12222,7 +12289,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c4:not(:focus):not(:active):not(:focus-within) { +.c5:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -12232,13 +12299,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c3 { +.c4 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; visibility: visible; } -.c13 { +.c14 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -12341,7 +12408,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { +.c8 { border: 0; font-size: inherit; font-family: inherit; @@ -12352,11 +12419,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c7:focus { +.c8:focus { outline: 0; } -.c8 { +.c9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -12389,13 +12456,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8:hover { +.c9:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c11 { +.c12 { background-color: transparent; font-family: inherit; color: currentColor; @@ -12435,16 +12502,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c11:hover, -.c11:focus { +.c12:hover, +.c12:focus { background-color: rgba(175,184,193,0.2); } -.c11:active { +.c12:active { background-color: rgba(234,238,242,0.5); } -.c9 { +.c10 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -12469,11 +12536,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c9:is(a,button,[tabIndex='0']) { +.c10:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c9:is(a,button,[tabIndex='0']):after { +.c10:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -12504,12 +12571,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` className="c2" display="flex" > -
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)
, @@ -13096,6 +13165,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; } @@ -13113,7 +13189,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c12:not(:focus):not(:active):not(:focus-within) { +.c13:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -13123,7 +13199,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c11 { +.c12 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13840,12 +13916,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
Loading
- + , - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -13907,7 +13984,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -13915,7 +13992,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -13933,15 +14010,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; } -.c13 { +.c14 { visibility: visible; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -13954,7 +14038,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -13964,7 +14048,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -13975,7 +14059,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c14 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -14085,7 +14169,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -14096,11 +14180,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -14131,13 +14215,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -14177,16 +14261,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 16px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -14211,11 +14295,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -14272,12 +14356,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
, - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14843,7 +14929,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -14851,7 +14937,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -14869,15 +14955,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; } -.c13 { +.c14 { visibility: visible; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -14890,7 +14983,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -14900,7 +14993,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -14911,7 +15004,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c14 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15014,7 +15107,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -15025,11 +15118,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -15062,13 +15155,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -15108,16 +15201,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 32px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -15142,11 +15235,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -15203,12 +15296,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
, - .c6 { + .c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -15774,7 +15869,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` flex-grow: 1; } -.c6 > * { +.c7 > * { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; @@ -15782,7 +15877,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` margin-bottom: 0.25rem; } -.c7 { +.c8 { -webkit-order: 1; -ms-flex-order: 1; order: 1; @@ -15800,7 +15895,14 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` position: relative; } -.c13 { +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c14 { visibility: hidden; } @@ -15808,7 +15910,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` visibility: visible; } -.c11 { +.c12 { position: absolute; width: 1px; height: 1px; @@ -15821,7 +15923,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } -.c5:not(:focus):not(:active):not(:focus-within) { +.c6:not(:focus):not(:active):not(:focus-within) { -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; @@ -15831,7 +15933,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 1px; } -.c4 { +.c5 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15842,7 +15944,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` left: 0; } -.c14 { +.c15 { -webkit-animation: rotate-keyframes 1s linear infinite; animation: rotate-keyframes 1s linear infinite; position: absolute; @@ -15945,7 +16047,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c8 { +.c9 { border: 0; font-size: inherit; font-family: inherit; @@ -15956,11 +16058,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` height: 100%; } -.c8:focus { +.c9:focus { outline: 0; } -.c9 { +.c10 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -15991,13 +16093,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c9:hover { +.c10:hover { background-color: rgba(175,184,193,0.2); box-shadow: 0 3px 6px rgba(140,149,159,0.15); color: #1F2328; } -.c12 { +.c13 { background-color: transparent; font-family: inherit; color: currentColor; @@ -16037,16 +16139,16 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` width: 24px; } -.c12:hover, -.c12:focus { +.c13:hover, +.c13:focus { background-color: rgba(175,184,193,0.2); } -.c12:active { +.c13:active { background-color: rgba(234,238,242,0.5); } -.c10 { +.c11 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -16071,11 +16173,11 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` text-decoration: none; } -.c10:is(a,button,[tabIndex='0']) { +.c11:is(a,button,[tabIndex='0']) { cursor: pointer; } -.c10:is(a,button,[tabIndex='0']):after { +.c11:is(a,button,[tabIndex='0']):after { content: ''; position: absolute; left: 0; @@ -16132,12 +16234,13 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` /> -
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)
,