fix(radio buttons): Update radio button styles #830

notandrew · 2019-02-01T23:52:29Z

Updating the radio buttons to match color redlines.

BEFORE

AFTER
Teams theme

Teams dark theme

Teams high contrast theme

codecov · 2019-02-02T00:00:20Z

Codecov Report

Merging #830 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #830   +/-   ##
=======================================
  Coverage   93.54%   93.54%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       69       69           
=======================================
  Hits          681      681           
  Misses         47       47

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update da0fc96...e75b9ba. Read the comment docs.

codecov · 2019-02-02T00:00:21Z

Codecov Report

Merging #830 into master will decrease coverage by <.01%.
The diff coverage is 53.84%.

@@            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

Impacted Files	Coverage Δ
...s/components/RadioGroup/radioGroupItemVariables.ts	`100% <ø> (ø)`	⬆️
...t/components/RadioGroup/radioGroupItemVariables.ts	`100% <100%> (ø)`
.../react/src/themes/teams-dark/componentVariables.ts	`100% <100%> (ø)`	⬆️
...c/themes/teams-high-contrast/componentVariables.ts	`100% <100%> (ø)`	⬆️
...k/components/RadioGroup/radioGroupItemVariables.ts	`100% <100%> (ø)`
...ct/src/themes/teams-high-contrast/siteVariables.ts	`100% <100%> (ø)`	⬆️
...eams/components/RadioGroup/radioGroupItemStyles.ts	`28.57% <25%> (+8.57%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 22f0841...3407906. Read the comment docs.

packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts

packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts

# 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

… feedback

codepretty · 2019-03-18T19:11:29Z

Waiting on the radio button html structure PR to complete to fix & finish this redlining PR.

layershifter · 2019-03-19T12:18:04Z

@codepretty @notandrew #1070 was merged 🎉

docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx

codepretty · 2019-03-22T17:31:03Z

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts

 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


todo: remove after #1057 gets checked in

codepretty · 2019-03-22T17:31:32Z

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts

-    ...(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


todo: remove after #1057 gets checked in

codepretty · 2019-03-22T17:32:57Z

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts

  colorDisabled: string

-  colorBorder: string
-  colorBorderChecked: string
+  // can these be global colors so we don't have to define for every component?


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?

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.

We can define the borderFocus and shadowFocus colors int he scheme.

mnajdova

Check comments before merging.

codecov · 2019-03-25T17:38:06Z

Codecov Report

Merging #830 into master will decrease coverage by <.01%.
The diff coverage is 53.84%.

@@            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

Impacted Files	Coverage Δ
...s/components/RadioGroup/radioGroupItemVariables.ts	`100% <ø> (ø)`	⬆️
...t/components/RadioGroup/radioGroupItemVariables.ts	`100% <100%> (ø)`
.../react/src/themes/teams-dark/componentVariables.ts	`100% <100%> (ø)`	⬆️
...c/themes/teams-high-contrast/componentVariables.ts	`100% <100%> (ø)`	⬆️
...k/components/RadioGroup/radioGroupItemVariables.ts	`100% <100%> (ø)`
...ct/src/themes/teams-high-contrast/siteVariables.ts	`100% <100%> (ø)`	⬆️
...eams/components/RadioGroup/radioGroupItemStyles.ts	`28.57% <25%> (+8.57%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 22f0841...3d43f60. Read the comment docs.

updating radio button styles

e75b9ba

notandrew added 🚧 WIP 💅 styling issue redlines Update of the redlines for the mentioned component labels Feb 1, 2019

notandrew requested review from dvdzkwsk, kuzhelov, layershifter, levithomason, miroslavstastny and mnajdova as code owners February 1, 2019 23:52

codepretty changed the title ~~updating radio button styles~~ fix(radio buttons): Update radio button styles Feb 6, 2019

notandrew added 7 commits February 6, 2019 14:02

radios

c3e4455

updating other themes

877069b

adding theme support for dark/high contrast

5e6bdb2

Merge branch 'master' into andmarti/radio-colors

44dd36b

updating styles for dark/high contrast themes

fa6d6a5

updating colors

dd955ed

fixing border colors and high contrast issues

9da7b9a

notandrew added 🚀 ready for review and removed 💅 styling issue 🚧 WIP labels Feb 12, 2019

bmdalex reviewed Feb 21, 2019

View reviewed changes

manajdov added 2 commits February 26, 2019 14:50

Merge branch 'master' into andmarti/radio-colors

c088a53

# 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

-addressed comments

6ec0927

bmdalex approved these changes Feb 26, 2019

View reviewed changes

mnajdova approved these changes Feb 26, 2019

View reviewed changes

Brigette Lundeen added 2 commits March 12, 2019 20:56

Merge branch 'master' into andmarti/radio-colors

856628c

added changelog entry & updated to use interface for variables per PR…

6cc4c92

… feedback

Brigette Lundeen and others added 7 commits March 19, 2019 21:32

merging in lastest and updating styles for new html structure

39edc9d

remove comments

2a80787

updated focus state & colors for all themes

3d8cd40

this will work once the pxToRem issues are fixed

7e0ac55

fixing merge conflicts

ac43832

cleaning up code that isn't needed anymore

dce4412

Merge branch 'master' into andmarti/radio-colors

316a1be

codepretty reviewed Mar 22, 2019

View reviewed changes

docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx Outdated Show resolved Hide resolved

codepretty reviewed Mar 22, 2019

View reviewed changes

mnajdova approved these changes Mar 22, 2019

View reviewed changes

Brigette Lundeen added 2 commits March 25, 2019 10:16

updating look of input in radio button example

023a22f

Merge branch 'master' into andmarti/radio-colors

3407906

update changelog

3d43f60

codepretty merged commit e62ce21 into master Mar 25, 2019

delete-merged-branch bot deleted the andmarti/radio-colors branch March 25, 2019 18:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(radio buttons): Update radio button styles #830

fix(radio buttons): Update radio button styles #830

notandrew commented Feb 1, 2019 •

edited by codepretty

Loading

codecov bot commented Feb 2, 2019

codecov bot commented Feb 2, 2019 •

edited

Loading

codepretty commented Mar 18, 2019

layershifter commented Mar 19, 2019

codepretty Mar 22, 2019

codepretty Mar 22, 2019

codepretty Mar 22, 2019

mnajdova Mar 22, 2019

mnajdova Mar 22, 2019 •

edited

Loading

mnajdova left a comment

codecov bot commented Mar 25, 2019 •

edited

Loading

fix(radio buttons): Update radio button styles #830

fix(radio buttons): Update radio button styles #830

Conversation

notandrew commented Feb 1, 2019 • edited by codepretty Loading

codecov bot commented Feb 2, 2019

Codecov Report

codecov bot commented Feb 2, 2019 • edited Loading

Codecov Report

codepretty commented Mar 18, 2019

layershifter commented Mar 19, 2019

codepretty Mar 22, 2019

Choose a reason for hiding this comment

codepretty Mar 22, 2019

Choose a reason for hiding this comment

codepretty Mar 22, 2019

Choose a reason for hiding this comment

mnajdova Mar 22, 2019

Choose a reason for hiding this comment

mnajdova Mar 22, 2019 • edited Loading

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

codecov bot commented Mar 25, 2019 • edited Loading

Codecov Report

notandrew commented Feb 1, 2019 •

edited by codepretty

Loading

codecov bot commented Feb 2, 2019 •

edited

Loading

mnajdova Mar 22, 2019 •

edited

Loading

codecov bot commented Mar 25, 2019 •

edited

Loading