From 5c5d08de925e85508acc63ce78186242d0d55056 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Thu, 23 Nov 2023 15:51:36 +0100 Subject: [PATCH 1/4] Adjust focus styling --- src/internal/components/TextInputWrapper.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/internal/components/TextInputWrapper.tsx b/src/internal/components/TextInputWrapper.tsx index 3d2be80211e..f79afeec918 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: none; - box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; + outline: 2px solid ${get('colors.accent.fg')}; + outline-offset: -1px; ` ) } return css` &:focus-within { border-color: ${get('colors.accent.fg')}; - outline: none; - box-shadow: inset 0 0 0 1px ${get('colors.accent.fg')}; + outline: 2px solid ${get('colors.accent.fg')}; + outline-offset: -1px; } ` } @@ -103,6 +103,7 @@ export const TextInputBaseWrapper = styled.span` display: inline-flex; align-items: stretch; min-height: 32px; + overflow: hidden; input, textarea { From 8a155eb8e60179af3df40d8835bbc8f704b33057 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Fri, 24 Nov 2023 08:41:33 +0100 Subject: [PATCH 2/4] Update tests --- .../__snapshots__/Autocomplete.test.tsx.snap | 35 ++-- .../__snapshots__/TextInput.test.tsx.snap | 157 +++++++++++------- .../TextInputWithTokens.test.tsx.snap | 125 ++++++++------ .../__snapshots__/Textarea.test.tsx.snap | 5 +- 4 files changed, 194 insertions(+), 128 deletions(-) diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 27d4c2f6d55..a1944410067 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -21,6 +21,7 @@ exports[`snapshots renders a custom empty state message 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -50,8 +51,8 @@ exports[`snapshots renders a custom empty state message 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -187,6 +188,7 @@ exports[`snapshots renders a loading state 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -216,8 +218,8 @@ exports[`snapshots renders a loading state 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -388,6 +390,7 @@ 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, @@ -417,8 +420,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1165,6 +1168,7 @@ exports[`snapshots renders a multiselect input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1194,8 +1198,8 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1829,6 +1833,7 @@ 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, @@ -1858,8 +1863,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2641,6 +2646,7 @@ exports[`snapshots renders a single select input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2670,8 +2676,8 @@ exports[`snapshots renders a single select input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3664,6 +3670,7 @@ exports[`snapshots renders with an input value 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3693,8 +3700,8 @@ exports[`snapshots renders with an input value 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 9fff506b6ce..1a431197282 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -20,6 +20,7 @@ exports[`TextInput renders 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -49,8 +50,8 @@ exports[`TextInput renders 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -141,6 +142,7 @@ 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; @@ -178,8 +180,8 @@ exports[`TextInput renders block 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -270,6 +272,7 @@ exports[`TextInput renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -299,8 +302,8 @@ exports[`TextInput renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -390,6 +393,7 @@ exports[`TextInput renders contrast 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; background-color: #f6f8fa; } @@ -420,8 +424,8 @@ exports[`TextInput renders contrast 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -512,6 +516,7 @@ exports[`TextInput renders error 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; border-color: #cf222e; } @@ -542,8 +547,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -552,8 +557,8 @@ exports[`TextInput renders error 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c1 { @@ -640,6 +645,7 @@ 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; @@ -675,8 +681,8 @@ exports[`TextInput renders large 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -768,6 +774,7 @@ exports[`TextInput renders leadingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -797,8 +804,8 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -916,6 +923,7 @@ exports[`TextInput renders leadingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -945,8 +953,8 @@ exports[`TextInput renders leadingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1064,6 +1072,7 @@ exports[`TextInput renders leadingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1093,8 +1102,8 @@ exports[`TextInput renders leadingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1193,6 +1202,7 @@ exports[`TextInput renders leadingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1222,8 +1232,8 @@ exports[`TextInput renders leadingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1322,6 +1332,7 @@ 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; } @@ -1352,8 +1363,8 @@ exports[`TextInput renders monospace 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1444,6 +1455,7 @@ exports[`TextInput renders placeholder 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -1473,8 +1485,8 @@ exports[`TextInput renders placeholder 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1566,6 +1578,7 @@ 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; @@ -1603,8 +1616,8 @@ exports[`TextInput renders small 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1937,6 +1950,7 @@ exports[`TextInput renders trailingAction icon button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2586,6 +2600,7 @@ exports[`TextInput renders trailingAction text button 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -2990,6 +3005,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3381,6 +3397,7 @@ exports[`TextInput renders trailingVisual 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3410,8 +3427,8 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3529,6 +3546,7 @@ exports[`TextInput renders trailingVisual 2`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3558,8 +3576,8 @@ exports[`TextInput renders trailingVisual 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3677,6 +3695,7 @@ exports[`TextInput renders trailingVisual 3`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3706,8 +3725,8 @@ exports[`TextInput renders trailingVisual 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3806,6 +3825,7 @@ exports[`TextInput renders trailingVisual 4`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3835,8 +3855,8 @@ exports[`TextInput renders trailingVisual 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3950,6 +3970,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -3979,8 +4000,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4133,6 +4154,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4162,8 +4184,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4348,6 +4370,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4377,8 +4400,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4540,6 +4563,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4569,8 +4593,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4801,6 +4825,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -4830,8 +4855,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5062,6 +5087,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5091,8 +5117,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5317,6 +5343,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5346,8 +5373,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5540,6 +5567,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5569,8 +5597,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5795,6 +5823,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -5824,8 +5853,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6027,6 +6056,7 @@ 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; @@ -6064,8 +6094,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6337,6 +6367,7 @@ exports[`TextInput renders with a loading indicator 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -6366,8 +6397,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6638,6 +6669,7 @@ 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; @@ -6673,8 +6705,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6912,6 +6944,7 @@ exports[`TextInput should render a password input 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -6941,8 +6974,8 @@ exports[`TextInput should render a password input 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 613f21788ff..feaf7c79688 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -71,6 +71,7 @@ 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); @@ -104,8 +105,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -851,6 +852,7 @@ 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); @@ -884,8 +886,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1263,6 +1265,7 @@ 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; @@ -1309,8 +1312,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -1470,6 +1473,7 @@ 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); @@ -1505,8 +1509,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2197,6 +2201,7 @@ 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; @@ -2237,8 +2242,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -2925,6 +2930,7 @@ 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; @@ -2965,8 +2971,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -3653,6 +3659,7 @@ 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); @@ -3686,8 +3693,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -4378,6 +4385,7 @@ 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); @@ -4411,8 +4419,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5105,6 +5113,7 @@ 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); @@ -5139,8 +5148,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -5830,6 +5839,7 @@ 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); @@ -5863,8 +5873,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -6278,6 +6288,7 @@ 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); @@ -6311,8 +6322,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -7060,6 +7071,7 @@ 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); @@ -7093,8 +7105,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -7874,6 +7886,7 @@ 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); @@ -7907,8 +7920,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -8665,6 +8678,7 @@ 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); @@ -8698,8 +8712,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -9525,6 +9539,7 @@ 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); @@ -9558,8 +9573,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -10385,6 +10400,7 @@ 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); @@ -10418,8 +10434,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -11239,6 +11255,7 @@ 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); @@ -11272,8 +11289,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -12061,6 +12078,7 @@ 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); @@ -12094,8 +12112,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -12915,6 +12933,7 @@ 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); @@ -12948,8 +12967,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -13746,6 +13765,7 @@ 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; @@ -13786,8 +13806,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -14651,6 +14671,7 @@ 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); @@ -14684,8 +14705,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -15551,6 +15572,7 @@ 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); @@ -15584,8 +15606,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -16415,6 +16437,7 @@ 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); @@ -16448,8 +16471,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -17125,6 +17148,7 @@ 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); @@ -17158,8 +17182,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { @@ -17807,6 +17831,7 @@ 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); @@ -17840,8 +17865,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap index 991912f521a..db666d23df8 100644 --- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap +++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap @@ -20,6 +20,7 @@ exports[`Textarea renders consistently 1`] = ` -ms-flex-align: stretch; align-items: stretch; min-height: 32px; + overflow: hidden; } .c0 input, @@ -49,8 +50,8 @@ exports[`Textarea renders consistently 1`] = ` .c0:focus-within { border-color: #0969da; - outline: none; - box-shadow: inset 0 0 0 1px #0969da; + outline: 2px solid #0969da; + outline-offset: -1px; } .c0 > textarea { From 4a1fd371947fc10430c29c9cd28b9f433361e2f6 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Sun, 3 Dec 2023 11:09:31 +0100 Subject: [PATCH 3/4] Fix MarkdownEditor focus overwrite --- src/drafts/MarkdownEditor/MarkdownEditor.tsx | 1 + src/drafts/MarkdownEditor/_MarkdownInput.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx index 03bcd6017b0..ad36ce2d674 100644 --- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx +++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx @@ -405,6 +405,7 @@ const MarkdownEditor = forwardRef( ? { outline: '2px solid', outlineColor: 'accent.emphasis', + outlineOffset: '-1px', } : {}, ...sx, diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index e22a0858590..305fa9290e6 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -162,6 +162,7 @@ export const MarkdownInput = forwardRef display: visible ? undefined : 'none', '&: focus-within': { boxShadow: 'none', + outline: 'none', }, '& textarea': { lineHeight: 1.2, From a9b9f5baeecc63a179b9a4e1a99c1a8803f0e4f8 Mon Sep 17 00:00:00 2001 From: Daniel Adams Date: Mon, 4 Dec 2023 09:44:35 +0100 Subject: [PATCH 4/4] Add changeset --- .changeset/itchy-jokes-compare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-jokes-compare.md diff --git a/.changeset/itchy-jokes-compare.md b/.changeset/itchy-jokes-compare.md new file mode 100644 index 00000000000..38e3a73b545 --- /dev/null +++ b/.changeset/itchy-jokes-compare.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Changes the focus styling of input components such as `Textarea`, `TextInput`, `TextInputWithTokens` and `Select` from using `border` and `box-shadow` to use `outline` only for better border rendering and scrollbar support.