From 96f5f9be5eba6e2840a81ddc5e37a515fc90b932 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 6 Mar 2025 23:14:46 -0500 Subject: [PATCH 1/3] fix: user red focus state for inputs when in error state --- .../__snapshots__/Autocomplete.test.tsx.snap | 28 ++-- .../__snapshots__/TextInput.test.tsx.snap | 128 +++++++++--------- .../TextInputWithTokens.test.tsx.snap | 100 +++++++------- .../components/TextInputWrapper.module.css | 5 +- .../internal/components/TextInputWrapper.tsx | 4 +- 5 files changed, 132 insertions(+), 133 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 937b3215dde..a69251c0332 100644 --- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -111,8 +111,8 @@ exports[`snapshots renders a custom empty state message 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -392,8 +392,8 @@ exports[`snapshots renders a loading state 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -725,8 +725,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] = .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1687,8 +1687,8 @@ exports[`snapshots renders a multiselect input 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2529,8 +2529,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -3559,8 +3559,8 @@ exports[`snapshots renders a single select input 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -4783,8 +4783,8 @@ exports[`snapshots renders with an input value 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index 97468370ac9..3d19d97cca1 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -110,8 +110,8 @@ exports[`TextInput renders 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -346,8 +346,8 @@ exports[`TextInput renders block 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -583,8 +583,8 @@ exports[`TextInput renders contrast 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -820,8 +820,8 @@ exports[`TextInput renders error 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1058,8 +1058,8 @@ exports[`TextInput renders large 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1295,8 +1295,8 @@ exports[`TextInput renders leadingVisual 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1560,8 +1560,8 @@ exports[`TextInput renders leadingVisual 2`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1825,8 +1825,8 @@ exports[`TextInput renders leadingVisual 3`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2073,8 +2073,8 @@ exports[`TextInput renders leadingVisual 4`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2321,8 +2321,8 @@ exports[`TextInput renders monospace 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2558,8 +2558,8 @@ exports[`TextInput renders placeholder 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2795,8 +2795,8 @@ exports[`TextInput renders small 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -3164,8 +3164,8 @@ exports[`TextInput renders trailingAction icon button 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -3507,8 +3507,8 @@ exports[`TextInput renders trailingAction text button 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -3931,8 +3931,8 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -4236,8 +4236,8 @@ exports[`TextInput renders trailingVisual 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -4501,8 +4501,8 @@ exports[`TextInput renders trailingVisual 2`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -4766,8 +4766,8 @@ exports[`TextInput renders trailingVisual 3`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -5014,8 +5014,8 @@ exports[`TextInput renders trailingVisual 4`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -5288,8 +5288,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -5601,8 +5601,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -5954,8 +5954,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -6276,8 +6276,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -6671,8 +6671,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -7066,8 +7066,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -7458,8 +7458,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -7809,8 +7809,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -8201,8 +8201,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -8561,8 +8561,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -8996,8 +8996,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -9430,8 +9430,8 @@ exports[`TextInput renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -9822,8 +9822,8 @@ exports[`TextInput should render a password input 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } diff --git a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index a980c8904d9..611393e259e 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -162,8 +162,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1093,8 +1093,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1625,8 +1625,8 @@ exports[`TextInputWithTokens renders as block layout 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -1945,8 +1945,8 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -2793,8 +2793,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -3634,8 +3634,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -4475,8 +4475,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -5316,8 +5316,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -6159,8 +6159,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -7005,8 +7005,8 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -7571,8 +7571,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -8471,8 +8471,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -9410,8 +9410,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -10319,8 +10319,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -11300,8 +11300,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -12281,8 +12281,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -13259,8 +13259,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -14197,8 +14197,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -15175,8 +15175,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -16122,8 +16122,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -17140,8 +17140,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -18160,8 +18160,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -19148,8 +19148,8 @@ exports[`TextInputWithTokens renders with tokens 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -19978,8 +19978,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } @@ -20780,8 +20780,8 @@ exports[`TextInputWithTokens renders without tokens 1`] = ` .c0:where([data-validation='error']):where([data-trailing-action][data-focused]), .c0:where([data-validation='error']):where(:not([data-trailing-action])):focus-within { - border-color: var(--fgColor-accent,var(--color-accent-fg,#0969da)); - outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da)); + border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); + outline: 2px solid var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e)); outline-offset: -1px; } diff --git a/packages/react/src/internal/components/TextInputWrapper.module.css b/packages/react/src/internal/components/TextInputWrapper.module.css index 5b56245955e..ab07b9c1ac0 100644 --- a/packages/react/src/internal/components/TextInputWrapper.module.css +++ b/packages/react/src/internal/components/TextInputWrapper.module.css @@ -69,9 +69,8 @@ &:where([data-trailing-action][data-focused]), &:where(:not([data-trailing-action])):focus-within { - /* stylelint-disable-next-line primer/colors */ - border-color: var(--fgColor-accent); - outline: 2px solid var(--fgColor-accent); + border-color: var(--borderColor-danger-emphasis); + outline: 2px solid var(--borderColor-danger-emphasis); outline-offset: -1px; } } diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx index 7b6df098850..797a0ac69fd 100644 --- a/packages/react/src/internal/components/TextInputWrapper.tsx +++ b/packages/react/src/internal/components/TextInputWrapper.tsx @@ -115,8 +115,8 @@ const StyledTextInputBaseWrapper = toggleStyledComponent( &:where([data-trailing-action][data-focused]), &:where(:not([data-trailing-action])):focus-within { - border-color: ${get('colors.accent.fg')}; - outline: 2px solid ${get('colors.accent.fg')}; + border-color: ${get('colors.danger.emphasis')}; + outline: 2px solid ${get('colors.danger.emphasis')}; outline-offset: -1px; } } From e693771fd1dd175ea547800ed14012ef0b2d53a0 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Thu, 6 Mar 2025 23:16:28 -0500 Subject: [PATCH 2/3] Create seven-chairs-act.md --- .changeset/seven-chairs-act.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-chairs-act.md diff --git a/.changeset/seven-chairs-act.md b/.changeset/seven-chairs-act.md new file mode 100644 index 00000000000..3b0d356259a --- /dev/null +++ b/.changeset/seven-chairs-act.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix: user red focus state for inputs when in error state From 78e17788efda386f42fc99d71948e09af1974d4e Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 7 Mar 2025 21:04:26 -0500 Subject: [PATCH 3/3] update token --- .../react/src/internal/components/TextInputWrapper.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/internal/components/TextInputWrapper.module.css b/packages/react/src/internal/components/TextInputWrapper.module.css index ab07b9c1ac0..98bb187e91b 100644 --- a/packages/react/src/internal/components/TextInputWrapper.module.css +++ b/packages/react/src/internal/components/TextInputWrapper.module.css @@ -69,8 +69,8 @@ &:where([data-trailing-action][data-focused]), &:where(:not([data-trailing-action])):focus-within { - border-color: var(--borderColor-danger-emphasis); - outline: 2px solid var(--borderColor-danger-emphasis); + border-color: var(--control-borderColor-danger); + outline: 2px solid var(--control-borderColor-danger); outline-offset: -1px; } }