fix(radio buttons): Update radio button styles #830
Conversation
notandrew
added
🚧 WIP
💅 styling issue
redlines
notandrew
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
Codecov Report
@@ Coverage Diff @@
## master #830 +/- ##
=======================================
Coverage 93.54% 93.54%
=======================================
Files 21 21
Lines 728 728
Branches 69 69
=======================================
Hits 681 681
Misses 47 47Continue to review full report at Codecov.
|
Codecov Report
@@ Coverage Diff @@
## master #830 +/- ##
==========================================
- Coverage 82.09% 82.08% -0.01%
==========================================
Files 711 713 +2
Lines 8528 8536 +8
Branches 1224 1226 +2
==========================================
+ Hits 7001 7007 +6
- Misses 1511 1513 +2
Partials 16 16
Continue to review full report at Codecov.
|
codepretty
changed the title
packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
Outdated
Show resolved
Hide resolved
packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts
Show resolved
Hide resolved
# Conflicts: # packages/react/src/themes/teams-dark/siteVariables.ts # packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts # packages/react/src/themes/teams/siteVariables.ts
|
Waiting on the radio button html structure PR to complete to fix & finish this redlining PR. |
|
@codepretty @notandrew #1070 was merged 🎉 |
docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx
Outdated
Show resolved
Hide resolved
| const radioStyles: ComponentSlotStylesInput< | ||
| RadioGroupItemProps & RadioGroupItemState, | ||
| RadioGroupItemVariables | ||
| > = { | ||
| root: ({ props: p, variables: v }): ICSSInJSStyle => ({ | ||
| alignItems: 'baseline', | ||
| // can remove this after global style for border-box goes in |
There was a problem hiding this comment.
todo: remove after #1057 gets checked in
| ...(p.isFromKeyboard && { | ||
| // this creates both inset and outset box shadow that some readers (NVDA) show when radio is not checked but it is focused | ||
| boxShadow: `0 0 0 ${pxToRem(1)} ${v.color},` + `0 0 0 ${pxToRem(2)} ${v.color} inset`, | ||
| // can remove this after global style for border-box goes in |
There was a problem hiding this comment.
todo: remove after #1057 gets checked in
| colorDisabled: string | ||
|
|
||
| colorBorder: string | ||
| colorBorderChecked: string | ||
| // can these be global colors so we don't have to define for every component? |
There was a problem hiding this comment.
Any suggestions? Almost every component will need focusInnerBorderColor and focusOuterBorderColor, is there a better way to define so it's not added to all the variables?
There was a problem hiding this comment.
After the color scheme this will be aligned with the color scheme used per theme. Let's restrain for making some changes at this moment.
There was a problem hiding this comment.
We can define the borderFocus and shadowFocus colors int he scheme.
Codecov Report
@@ Coverage Diff @@
## master #830 +/- ##
==========================================
- Coverage 82.09% 82.08% -0.01%
==========================================
Files 711 713 +2
Lines 8528 8536 +8
Branches 1224 1161 -63
==========================================
+ Hits 7001 7007 +6
- Misses 1511 1513 +2
Partials 16 16
Continue to review full report at Codecov.
|
Updating the radio buttons to match color redlines.
BEFORE
AFTER
Teams theme
Teams dark theme
Teams high contrast theme
