From a24acc3c784bc5d97601e8e7d7313fadc87437d2 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 13 Nov 2024 21:38:18 +0000 Subject: [PATCH 1/2] feat(TextInput): Convert TextInput (Part 4) - Update TextInputAction & TextInputInnerVisualSlot --- .../__snapshots__/Autocomplete.test.tsx.snap | 210 ++-- .../__snapshots__/TextInput.test.tsx.snap | 904 +++++++++--------- .../TextInputWithTokens.test.tsx.snap | 750 +++++++-------- .../TextInputInnerAction.module.css | 31 + .../components/TextInputInnerAction.tsx | 25 +- .../TextInputInnerVisualSlot.module.css | 19 + .../components/TextInputInnerVisualSlot.tsx | 57 +- 7 files changed, 1040 insertions(+), 956 deletions(-) create mode 100644 packages/react/src/internal/components/TextInputInnerAction.module.css create mode 100644 packages/react/src/internal/components/TextInputInnerVisualSlot.module.css diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index c3dd83b8058..550a5c7db31 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -2,7 +2,21 @@ exports[`snapshots renders a custom empty state message 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -95,20 +109,6 @@ exports[`snapshots renders a custom empty state message 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -177,7 +177,21 @@ exports[`snapshots renders a custom empty state message 1`] = ` exports[`snapshots renders a loading state 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -270,20 +284,6 @@ exports[`snapshots renders a loading state 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -409,7 +409,21 @@ exports[`snapshots renders a loading state 1`] = ` exports[`snapshots renders a menu that contains an item to add to the menu 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -502,20 +516,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -1260,7 +1260,21 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = exports[`snapshots renders a multiselect input 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -1353,20 +1367,6 @@ exports[`snapshots renders a multiselect input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -1989,7 +1989,21 @@ exports[`snapshots renders a multiselect input 1`] = ` exports[`snapshots renders a multiselect input with selected menu items 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -2082,20 +2096,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -2901,7 +2901,21 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` exports[`snapshots renders a single select input 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -2994,20 +3008,6 @@ exports[`snapshots renders a single select input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } @@ -4005,7 +4005,21 @@ exports[`snapshots renders with a custom text input component 1`] = ` exports[`snapshots renders with an input value 1`] = ` [ - .c0 { + .c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + +.c0 { font-size: 14px; line-height: 20px; color: var(--fgColor-default,var(--color-fg-default,#1F2328)); @@ -4098,20 +4112,6 @@ exports[`snapshots renders with an input value 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { } diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 36f7ae4f8bc..9c5e3b41c04 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1,6 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TextInput renders 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -94,20 +108,6 @@ exports[`TextInput renders 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -131,6 +131,20 @@ exports[`TextInput renders 1`] = ` `; exports[`TextInput renders block 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -232,20 +246,6 @@ exports[`TextInput renders block 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -269,6 +269,20 @@ exports[`TextInput renders block 1`] = ` `; exports[`TextInput renders contrast 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -363,20 +377,6 @@ exports[`TextInput renders contrast 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -400,6 +400,20 @@ exports[`TextInput renders contrast 1`] = ` `; exports[`TextInput renders error 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -500,20 +514,6 @@ exports[`TextInput renders error 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -538,6 +538,20 @@ exports[`TextInput renders error 1`] = ` `; exports[`TextInput renders large 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -637,20 +651,6 @@ exports[`TextInput renders large 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -675,6 +675,20 @@ exports[`TextInput renders large 1`] = ` `; exports[`TextInput renders leadingVisual 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -768,20 +782,6 @@ exports[`TextInput renders leadingVisual 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -834,6 +834,20 @@ exports[`TextInput renders leadingVisual 1`] = ` `; exports[`TextInput renders leadingVisual 2`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -927,20 +941,6 @@ exports[`TextInput renders leadingVisual 2`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -993,6 +993,20 @@ exports[`TextInput renders leadingVisual 2`] = ` `; exports[`TextInput renders leadingVisual 3`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1086,20 +1100,6 @@ exports[`TextInput renders leadingVisual 3`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1134,6 +1134,20 @@ exports[`TextInput renders leadingVisual 3`] = ` `; exports[`TextInput renders leadingVisual 4`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1227,20 +1241,6 @@ exports[`TextInput renders leadingVisual 4`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1275,6 +1275,20 @@ exports[`TextInput renders leadingVisual 4`] = ` `; exports[`TextInput renders monospace 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1369,20 +1383,6 @@ exports[`TextInput renders monospace 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1406,6 +1406,20 @@ exports[`TextInput renders monospace 1`] = ` `; exports[`TextInput renders placeholder 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1499,20 +1513,6 @@ exports[`TextInput renders placeholder 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1537,6 +1537,20 @@ exports[`TextInput renders placeholder 1`] = ` `; exports[`TextInput renders small 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1638,20 +1652,6 @@ exports[`TextInput renders small 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -2111,6 +2111,20 @@ exports[`TextInput renders trailingAction icon button 1`] = ` animation-delay: 0s; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2198,20 +2212,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -2638,6 +2638,20 @@ exports[`TextInput renders trailingAction text button 1`] = ` height: var(--inner-action-size); } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2725,20 +2739,6 @@ exports[`TextInput renders trailingAction text button 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -3244,6 +3244,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` animation-delay: 0s; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3331,20 +3345,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (forced-colors:active) { .c4:focus { outline: solid 1px transparent; @@ -3440,6 +3440,20 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` `; exports[`TextInput renders trailingVisual 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3533,20 +3547,6 @@ exports[`TextInput renders trailingVisual 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3599,6 +3599,20 @@ exports[`TextInput renders trailingVisual 1`] = ` `; exports[`TextInput renders trailingVisual 2`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3692,20 +3706,6 @@ exports[`TextInput renders trailingVisual 2`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3758,6 +3758,20 @@ exports[`TextInput renders trailingVisual 2`] = ` `; exports[`TextInput renders trailingVisual 3`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3851,20 +3865,6 @@ exports[`TextInput renders trailingVisual 3`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -3899,6 +3899,20 @@ exports[`TextInput renders trailingVisual 3`] = ` `; exports[`TextInput renders trailingVisual 4`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3992,20 +4006,6 @@ exports[`TextInput renders trailingVisual 4`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4068,6 +4068,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4161,20 +4175,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4294,6 +4294,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4387,20 +4401,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4558,6 +4558,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4651,20 +4665,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -4793,6 +4793,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4880,24 +4894,10 @@ exports[`TextInput renders with a loading indicator 1`] = ` flex-shrink: 0; } -.c1 > input, -.c1 > select { - padding-left: 0; - padding-right: 12px; -} - -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; +.c1 > input, +.c1 > select { + padding-left: 0; + padding-right: 12px; } @media (min-width:768px) { @@ -5102,6 +5102,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5195,20 +5209,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 12px; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5411,6 +5411,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5504,20 +5518,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5714,6 +5714,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5807,20 +5821,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -5979,6 +5979,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6072,20 +6086,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -6282,6 +6282,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6375,20 +6389,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -6556,6 +6556,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6657,20 +6671,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { } @@ -6917,6 +6917,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7010,20 +7024,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -7265,6 +7265,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` border-width: 0; } +.c5 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c5:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7364,20 +7378,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` padding-right: 0; } -.c5 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c5:focus { - outline: 0; -} - @media (min-width:768px) { } @@ -7573,6 +7573,20 @@ exports[`TextInput renders with a loading indicator 1`] = ` `; exports[`TextInput should render a password input 1`] = ` +.c2 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; +} + +.c2:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7666,20 +7680,6 @@ exports[`TextInput should render a password input 1`] = ` padding-right: 12px; } -.c2 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; -} - -.c2:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 27dcc81e3ad..2c2ba4e525d 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -52,6 +52,21 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -152,21 +167,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -880,6 +880,21 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -980,21 +995,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -1303,6 +1303,21 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1421,21 +1436,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; @@ -1519,6 +1519,21 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -1623,21 +1638,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -2263,6 +2263,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -2370,21 +2385,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -3020,6 +3020,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3127,21 +3142,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -3777,6 +3777,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -3877,21 +3892,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -4527,6 +4527,21 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -4627,21 +4642,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -5279,6 +5279,21 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -5381,21 +5396,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -6021,6 +6021,21 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6121,21 +6136,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -6478,6 +6478,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -6578,21 +6593,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -7290,6 +7290,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -7390,21 +7405,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -8139,6 +8139,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -8239,21 +8254,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -8960,6 +8960,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -9060,21 +9075,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -9854,6 +9854,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -9954,21 +9969,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 12px; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -10748,6 +10748,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -10848,21 +10863,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -11636,6 +11636,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -11736,21 +11751,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -12487,6 +12487,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c6 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c6:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -12587,21 +12602,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c6 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c6:focus { - outline: 0; -} - .c7 { -webkit-align-items: center; -webkit-box-align: center; @@ -13375,6 +13375,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -13475,21 +13490,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -14235,6 +14235,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -14342,21 +14357,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -15177,6 +15177,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -15277,21 +15292,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -16110,6 +16110,21 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` border-width: 0; } +.c7 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c7:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -16210,21 +16225,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` padding-right: 0; } -.c7 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c7:focus { - outline: 0; -} - .c8 { -webkit-align-items: center; -webkit-box-align: center; @@ -17007,6 +17007,21 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` border-width: 0; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -17107,21 +17122,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -17734,6 +17734,21 @@ exports[`TextInputWithTokens renders with tokens using a custom token component flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -17834,21 +17849,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - .c5 { -webkit-align-items: center; -webkit-box-align: center; @@ -18433,6 +18433,21 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` flex-grow: 1; } +.c4 { + border: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + -webkit-appearance: none; + color: inherit; + width: 100%; + height: 100%; +} + +.c4:focus { + outline: 0; +} + .c0 { font-size: 14px; line-height: 20px; @@ -18533,21 +18548,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` padding-right: 12px; } -.c4 { - border: 0; - font-size: inherit; - font-family: inherit; - background-color: transparent; - -webkit-appearance: none; - color: inherit; - width: 100%; - height: 100%; -} - -.c4:focus { - outline: 0; -} - @media (min-width:768px) { .c0 { font-size: 14px; diff --git a/packages/react/src/internal/components/TextInputInnerAction.module.css b/packages/react/src/internal/components/TextInputInnerAction.module.css new file mode 100644 index 00000000000..f312c132f3e --- /dev/null +++ b/packages/react/src/internal/components/TextInputInnerAction.module.css @@ -0,0 +1,31 @@ +.Invisible { + position: relative; + padding-top: var(--base-size-2); + padding-right: var(--base-size-4); + padding-bottom: var(--base-size-2); + padding-left: var(--base-size-4); + color: var(--fgColor-muted); + background-color: transparent; + + &:hover, + &:focus { + color: var(--fgColor-default); + } + + &[data-component='IconButton'] { + width: var(--inner-action-size); + height: var(--inner-action-size); + } + + @media (pointer: coarse) { + ::after { + position: absolute; + top: 50%; + right: 0; + left: 0; + min-height: 44px; + content: ''; + transform: translateY(-50%); + } + } +} diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx index 75fcb22349f..6a24a24f4c2 100644 --- a/packages/react/src/internal/components/TextInputInnerAction.tsx +++ b/packages/react/src/internal/components/TextInputInnerAction.tsx @@ -6,6 +6,11 @@ import {Tooltip} from '../../TooltipV2' import type {ButtonProps} from '../../Button' import type {BetterSystemStyleObject, SxProp} from '../../sx' import {merge} from '../../sx' +import {clsx} from 'clsx' + +import styles from './TextInputInnerAction.module.css' +import {useFeatureFlag} from '../../FeatureFlags' +import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput' type TextInputActionProps = Omit< React.ButtonHTMLAttributes, @@ -89,15 +94,23 @@ const TextInputAction = forwardRef( children, icon, sx: sxProp, + className, variant = 'invisible', ...rest }, forwardedRef, ) => { - const sx = - variant === 'invisible' - ? merge(invisibleButtonStyleOverrides, sxProp || {}) - : sxProp || {} + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + + const styleProps = enabled + ? {className: clsx(variant === 'invisible' && styles.Invisible, className), sx: sxProp || {}} + : { + className, + sx: + variant === 'invisible' + ? merge(invisibleButtonStyleOverrides, sxProp || {}) + : sxProp || {}, + } if ((icon && !ariaLabel) || (!children && !ariaLabel)) { // eslint-disable-next-line no-console @@ -122,13 +135,13 @@ const TextInputAction = forwardRef( type="button" icon={icon} size="small" - sx={sx} + {...styleProps} {...rest} ref={forwardedRef} /> ) : ( - diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css new file mode 100644 index 00000000000..acf4539155a --- /dev/null +++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.module.css @@ -0,0 +1,19 @@ +.Spinner { + position: absolute; + top: 0; + right: 0; + max-width: 100%; + height: 100%; +} + +.SpinnerLeading { + left: 0; +} + +.SpinnerHidden { + visibility: hidden; +} + +.SpinnerVisible { + visibility: visible; +} diff --git a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx index 13e6342a6fc..44cd3758c76 100644 --- a/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx +++ b/packages/react/src/internal/components/TextInputInnerVisualSlot.tsx @@ -1,8 +1,13 @@ import React from 'react' import Box from '../../Box' import Spinner from '../../Spinner' +import {clsx} from 'clsx' import type {TextInputNonPassthroughProps} from '../../TextInput' +import styles from './TextInputInnerVisualSlot.module.css' +import {useFeatureFlag} from '../../FeatureFlags' +import {TEXT_INPUT_CSS_MODULES_FEATURE_FLAG} from './UnstyledTextInput' + const TextInputInnerVisualSlot: React.FC< React.PropsWithChildren<{ /** Whether the input is expected to ever show a loading indicator */ @@ -15,7 +20,9 @@ const TextInputInnerVisualSlot: React.FC< id?: string }> > = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition, id}) => { - if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) { + const enabled = useFeatureFlag(TEXT_INPUT_CSS_MODULES_FEATURE_FLAG) + const isLeading = visualPosition === 'leading' + if ((!children && !hasLoadingIndicator) || (isLeading && !children && !showLoadingIndicator)) { return null } @@ -27,26 +34,40 @@ const TextInputInnerVisualSlot: React.FC< ) } + const boxStyleProps = enabled + ? {className: clsx(showLoadingIndicator ? styles.SpinnerHidden : styles.SpinnerVisible)} + : { + sx: { + visibility: showLoadingIndicator ? 'hidden' : 'visible', + }, + } + + const spinnerStyleProps = enabled + ? { + className: clsx( + showLoadingIndicator ? styles.SpinnerVisible : styles.SpinnerHidden, + children && styles.Spinner, + children && isLeading && styles.SpinnerLeading, + ), + } + : { + sx: children + ? { + position: 'absolute', + top: 0, + height: '100%', + maxWidth: '100%', + visibility: showLoadingIndicator ? 'visible' : 'hidden', + ...(isLeading ? {left: 0} : {right: 0}), + } + : {visibility: showLoadingIndicator ? 'visible' : 'hidden'}, + } + return ( - {children && {children}} - + {children && {children}} + ) From bd0c6e98958dffb15f9956a53b1626e10812b67d Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 13 Nov 2024 21:44:40 +0000 Subject: [PATCH 2/2] Changeset --- .changeset/tall-cameras-unite.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tall-cameras-unite.md diff --git a/.changeset/tall-cameras-unite.md b/.changeset/tall-cameras-unite.md new file mode 100644 index 00000000000..f42cd2a8bad --- /dev/null +++ b/.changeset/tall-cameras-unite.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Migrate TextInputAction & TextInputInnerVisualSlot to CSS Modules behind feature flag