Borders: Update border color for multiple components #2023
Conversation
| @@ -71,7 +71,7 @@ export default function Switch({ | |||
| const sliderStyles = classnames( | |||
| styles.slider, | |||
| switched ? styles.sliderRight : styles.sliderLeft, | |||
| switched && !disabled ? styles.sliderDark : styles.sliderLight, | |||
| !disabled ? styles.sliderDark : styles.sliderLight, | |||
There was a problem hiding this comment.
Intentional change to help our default switch look active, and our disabled switch to look more disabled
There was a problem hiding this comment.
They still don't read as "disabled" enough to me, but this is an improvement! 😅 And that's beyond the scope of this PR
✅ Deploy Preview for gestalt ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
@ayeshakmaz Intended? |
|
These changes should have triggered the vis diff Integration test to fail... I wonder how it did pass it. |
|
@AlbertCarreras made some updates and fixed that issue - thanks for taking a look! |
|
Hey Ayesha - they may be a discrepancy between design and prod related to our disabled state. Just noting this as something we should align on in the future - it shouldn't block this PR. |
| @@ -71,7 +71,7 @@ export default function Switch({ | |||
| const sliderStyles = classnames( | |||
| styles.slider, | |||
| switched ? styles.sliderRight : styles.sliderLeft, | |||
| switched && !disabled ? styles.sliderDark : styles.sliderLight, | |||
| !disabled ? styles.sliderDark : styles.sliderLight, | |||
There was a problem hiding this comment.
They still don't read as "disabled" enough to me, but this is an improvement! 😅 And that's beyond the scope of this PR
Summary
What changed?
Update Form Fields and Tables to use new border design Token. The main noticeable differences are in Switch, Checkbox, and RadioButton.
Switch
Before
After
Checkbox
Before
After
RadioButton
Before
After
Why?
In order to create consistent borders that are more accessible, this PR updates our form fields and tables to use our border design token colors. The main change in Controls components is designed to help out switches look more intentional, and to make disabled switches look more disabled. It also improves the accessibility because our previous color was not accessible against either our light ro dark backgrounds.
Links
Checklist