Skip to content

Use control CSS var with fallback for form component border-color #3654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
langermank merged 7 commits into from
Aug 22, 2023
Merged

Use control CSS var with fallback for form component border-color #3654

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e31611d
use css var with fallback
langermank Aug 22, 2023
20d03a8
Create lazy-eyes-bow.md
langermank Aug 22, 2023
bb1a486
syntax
langermank Aug 22, 2023
e131fa0
Merge branch 'main' into use-control-var-form-borders
langermank Aug 22, 2023
f56400f
Merge branch 'main' into use-control-var-form-borders
langermank Aug 22, 2023
90e6515
Merge branch 'main' into use-control-var-form-borders
langermank Aug 22, 2023
2c7f21b
test(vrt): update snapshots
langermank Aug 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/lazy-eyes-bow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@primer/react": patch
---

Use `control` CSS var with fallback for form component border-color

<!-- Changed components: _none_ -->
14 changes: 7 additions & 7 deletions src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`snapshots renders a loading state 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -361,7 +361,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1318,7 +1318,7 @@ exports[`snapshots renders a multiselect input 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -2185,7 +2185,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3063,7 +3063,7 @@ exports[`snapshots renders a single select input 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4071,7 +4071,7 @@ exports[`snapshots renders with an input value 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down
68 changes: 34 additions & 34 deletions src/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`TextInput renders 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -125,7 +125,7 @@ exports[`TextInput renders block 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -251,7 +251,7 @@ exports[`TextInput renders consistently 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -368,7 +368,7 @@ exports[`TextInput renders contrast 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -487,7 +487,7 @@ exports[`TextInput renders error 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -612,7 +612,7 @@ exports[`TextInput renders large 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -737,7 +737,7 @@ exports[`TextInput renders leadingVisual 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -882,7 +882,7 @@ exports[`TextInput renders leadingVisual 2`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1027,7 +1027,7 @@ exports[`TextInput renders leadingVisual 3`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1153,7 +1153,7 @@ exports[`TextInput renders leadingVisual 4`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1279,7 +1279,7 @@ exports[`TextInput renders monospace 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1398,7 +1398,7 @@ exports[`TextInput renders placeholder 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1517,7 +1517,7 @@ exports[`TextInput renders small 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -1885,7 +1885,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -2534,7 +2534,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -2937,7 +2937,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3324,7 +3324,7 @@ exports[`TextInput renders trailingVisual 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3469,7 +3469,7 @@ exports[`TextInput renders trailingVisual 2`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3614,7 +3614,7 @@ exports[`TextInput renders trailingVisual 3`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3740,7 +3740,7 @@ exports[`TextInput renders trailingVisual 4`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -3866,7 +3866,7 @@ exports[`TextInput renders warning 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4006,7 +4006,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4178,7 +4178,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4382,7 +4382,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4563,7 +4563,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -4813,7 +4813,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -5063,7 +5063,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -5307,7 +5307,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -5519,7 +5519,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -5763,7 +5763,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -5984,7 +5984,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -6283,7 +6283,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -6573,7 +6573,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down Expand Up @@ -6836,7 +6836,7 @@ exports[`TextInput should render a password input 1`] = `
color: #1F2328;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #d0d7de;
border: 1px solid var(--control-borderColor-rest,#d0d7de);
border-radius: 6px;
outline: none;
box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
Expand Down
Loading