From dd285e2ac83eb282ae7c111fd44e2dffaf15ccb2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 1 Dec 2023 14:44:16 -0600 Subject: [PATCH] Revert "Adjust focus styling of `textarea` and `input`" (#3998) * Revert "Adjust focus styling of `textarea` and `input` (#3965)" This reverts commit c4216ef306f8c013c6f81a18dbc6823a7f42e562. * chore: add changeset --------- Co-authored-by: Josh Black --- .changeset/chilly-spies-warn.md | 5 + .../__snapshots__/Autocomplete.test.tsx.snap | 35 ++-- .../__snapshots__/TextInput.test.tsx.snap | 157 +++++++----------- .../TextInputWithTokens.test.tsx.snap | 125 ++++++-------- .../__snapshots__/Textarea.test.tsx.snap | 5 +- src/internal/components/TextInputWrapper.tsx | 9 +- 6 files changed, 137 insertions(+), 199 deletions(-) create mode 100644 .changeset/chilly-spies-warn.md diff --git a/.changeset/chilly-spies-warn.md b/.changeset/chilly-spies-warn.md new file mode 100644 index 00000000000..280f7f7d7d8 --- /dev/null +++ b/.changeset/chilly-spies-warn.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Remove changes to focus outline to prevent double focus rings from showing diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index a1944410067..27d4c2f6d55 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -21,7 +21,6 @@ exports[`snapshots renders a custom empty state message 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -51,8 +50,8 @@ exports[`snapshots renders a custom empty state message 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -188,7 +187,6 @@ exports[`snapshots renders a loading state 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -218,8 +216,8 @@ exports[`snapshots renders a loading state 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -390,7 +388,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -420,8 +417,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1168,7 +1165,6 @@ exports[`snapshots renders a multiselect input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -1198,8 +1194,8 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1833,7 +1829,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -1863,8 +1858,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -2646,7 +2641,6 @@ exports[`snapshots renders a single select input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -2676,8 +2670,8 @@ exports[`snapshots renders a single select input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3670,7 +3664,6 @@ exports[`snapshots renders with an input value 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3700,8 +3693,8 @@ exports[`snapshots renders with an input value 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 1a431197282..9fff506b6ce 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -20,7 +20,6 @@ exports[`TextInput renders 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -50,8 +49,8 @@ exports[`TextInput renders 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -142,7 +141,6 @@ exports[`TextInput renders block 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -180,8 +178,8 @@ exports[`TextInput renders block 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -272,7 +270,6 @@ exports[`TextInput renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -302,8 +299,8 @@ exports[`TextInput renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -393,7 +390,6 @@ exports[`TextInput renders contrast 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; background-color: #f6f8fa; } @@ -424,8 +420,8 @@ exports[`TextInput renders contrast 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -516,7 +512,6 @@ exports[`TextInput renders error 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; border-color: #cf222e; } @@ -547,8 +542,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -557,8 +552,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c1 { @@ -645,7 +640,6 @@ exports[`TextInput renders large 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 28px; padding-left: 8px; padding-right: 8px; @@ -681,8 +675,8 @@ exports[`TextInput renders large 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -774,7 +768,6 @@ exports[`TextInput renders leadingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -804,8 +797,8 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -923,7 +916,6 @@ exports[`TextInput renders leadingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -953,8 +945,8 @@ exports[`TextInput renders leadingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1072,7 +1064,6 @@ exports[`TextInput renders leadingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -1102,8 +1093,8 @@ exports[`TextInput renders leadingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1202,7 +1193,6 @@ exports[`TextInput renders leadingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -1232,8 +1222,8 @@ exports[`TextInput renders leadingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1332,7 +1322,6 @@ exports[`TextInput renders monospace 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace; } @@ -1363,8 +1352,8 @@ exports[`TextInput renders monospace 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1455,7 +1444,6 @@ exports[`TextInput renders placeholder 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -1485,8 +1473,8 @@ exports[`TextInput renders placeholder 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1578,7 +1566,6 @@ exports[`TextInput renders small 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -1616,8 +1603,8 @@ exports[`TextInput renders small 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1950,7 +1937,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -2600,7 +2586,6 @@ exports[`TextInput renders trailingAction text button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3005,7 +2990,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3397,7 +3381,6 @@ exports[`TextInput renders trailingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3427,8 +3410,8 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3546,7 +3529,6 @@ exports[`TextInput renders trailingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3576,8 +3558,8 @@ exports[`TextInput renders trailingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3695,7 +3677,6 @@ exports[`TextInput renders trailingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3725,8 +3706,8 @@ exports[`TextInput renders trailingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3825,7 +3806,6 @@ exports[`TextInput renders trailingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -3855,8 +3835,8 @@ exports[`TextInput renders trailingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3970,7 +3950,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -4000,8 +3979,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -4154,7 +4133,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -4184,8 +4162,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -4370,7 +4348,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -4400,8 +4377,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -4563,7 +4540,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -4593,8 +4569,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -4825,7 +4801,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -4855,8 +4830,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5087,7 +5062,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -5117,8 +5091,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5343,7 +5317,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -5373,8 +5346,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5567,7 +5540,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -5597,8 +5569,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5823,7 +5795,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -5853,8 +5824,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -6056,7 +6027,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -6094,8 +6064,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -6367,7 +6337,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -6397,8 +6366,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -6669,7 +6638,6 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 28px; padding-left: 8px; padding-right: 8px; @@ -6705,8 +6673,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -6944,7 +6912,6 @@ exports[`TextInput should render a password input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -6974,8 +6941,8 @@ exports[`TextInput should render a password input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index feaf7c79688..613f21788ff 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -71,7 +71,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -105,8 +104,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -852,7 +851,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -886,8 +884,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1265,7 +1263,6 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; @@ -1312,8 +1309,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -1473,7 +1470,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -1509,8 +1505,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -2201,7 +2197,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -2242,8 +2237,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -2930,7 +2925,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -2971,8 +2965,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -3659,7 +3653,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -3693,8 +3686,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -4385,7 +4378,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -4419,8 +4411,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5113,7 +5105,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -5148,8 +5139,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -5839,7 +5830,6 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -5873,8 +5863,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -6288,7 +6278,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -6322,8 +6311,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -7071,7 +7060,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -7105,8 +7093,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -7886,7 +7874,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -7920,8 +7907,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -8678,7 +8665,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -8712,8 +8698,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -9539,7 +9525,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -9573,8 +9558,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -10400,7 +10385,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -10434,8 +10418,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -11255,7 +11239,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -11289,8 +11272,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -12078,7 +12061,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -12112,8 +12094,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -12933,7 +12915,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -12967,8 +12948,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -13765,7 +13746,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 20px; min-height: 28px; padding-left: 8px; @@ -13806,8 +13786,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -14671,7 +14651,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -14705,8 +14684,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -15572,7 +15551,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -15606,8 +15584,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -16437,7 +16415,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -16471,8 +16448,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -17148,7 +17125,6 @@ exports[`TextInputWithTokens renders with tokens using a custom token component -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -17182,8 +17158,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { @@ -17831,7 +17807,6 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; --inner-action-size: 24px; padding-left: 12px; padding-top: calc(12px / 2); @@ -17865,8 +17840,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index db666d23df8..991912f521a 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -20,7 +20,6 @@ exports[`Textarea renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; - overflow: hidden; } .c0 input, @@ -50,8 +49,8 @@ exports[`Textarea renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: 2px solid #0969da; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px #0969da; } .c0 > textarea { diff --git a/src/internal/components/TextInputWrapper.tsx b/src/internal/components/TextInputWrapper.tsx index f79afeec918..3d2be80211e 100644 --- a/src/internal/components/TextInputWrapper.tsx +++ b/src/internal/components/TextInputWrapper.tsx @@ -76,16 +76,16 @@ const renderFocusStyles = (hasTrailingAction: boolean, isInputFocused: boolean) isInputFocused && css` border-color: ${get('colors.accent.fg')}; - outline: 2px solid ${get('colors.accent.fg')}; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; ` ) } return css` &:focus-within { border-color: ${get('colors.accent.fg')}; - outline: 2px solid ${get('colors.accent.fg')}; - outline-offset: -1px; + outline: none; + box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; } ` } @@ -103,7 +103,6 @@ export const TextInputBaseWrapper = styled.span` display: inline-flex; align-items: stretch; min-height: 32px; - overflow: hidden; input, textarea {