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

* updating radio button styles

* radios

* updating other themes

* adding theme support for dark/high contrast

* updating styles for dark/high contrast themes

* updating colors

* fixing border colors and high contrast issues

* -addressed comments

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

* remove comments

* updated focus state & colors for all themes

* this will work once the pxToRem issues are fixed

* cleaning up code that isn't needed anymore

* updating look of input in radio button example

* update changelog

Author: notandrew

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Fix `RadioButtonGroup` Teams theme styles to be correct @notandrew ([#830](https://github.com/stardust-ui/react/pull/830))
+
 <!--------------------------------[ v0.24.0 ]------------------------------- -->
 ## [v0.24.0](https://github.com/stardust-ui/react/tree/v0.24.0) (2019-03-25)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.1...v0.24.0)

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

@@ -7,12 +7,12 @@ class RadioGroupVerticalExample extends React.Component {
   render() {
     const { selectedValue } = this.state
     return (
-      <div>
+      <div style={{ maxWidth: '400px' }}>
         The selected value is: {selectedValue}
         <Divider />
         <RadioGroup
           vertical
-          defaultCheckedValue="capricciosa"
+          defaultCheckedValue="prosciutto"
           items={this.getItems()}
           checkedValueChanged={this.handleChange}
         />
@@ -22,21 +22,42 @@ class RadioGroupVerticalExample extends React.Component {
 
   getItems() {
     return [
-      { name: 'pizza', key: 'Capricciosa', label: 'Capricciosa', value: 'capricciosa' },
+      {
+        name: 'pizza',
+        key: 'Capricciosa',
+        label: 'Capricciosa',
+        value: 'capricciosa',
+      },
       {
         name: 'pizza',
         key: 'Prosciutto',
         label: 'Prosciutto',
         value: 'prosciutto',
         disabled: true,
       },
+      {
+        name: 'pizza',
+        key: 'Pepperoni',
+        label: 'Pepperoni',
+        value: 'pepperoni',
+      },
       {
         name: 'pizza',
         key: 'Custom',
         label: (
           <Text>
             Choose your own{' '}
-            <Input input={{ tabIndex: this.state.inputTabIndex }} inline placeholder="flavour" />
+            <Input
+              input={{ tabIndex: this.state.inputTabIndex }}
+              inline
+              styles={{
+                fontSize: '12px',
+                '& .ui-input__input': {
+                  padding: '2px 8px',
+                },
+              }}
+              placeholder="flavour"
+            />
           </Text>
         ),
         value: 'custom',

packages/react/src/themes/teams-dark/componentVariables.ts

@@ -4,6 +4,7 @@ export { default as ChatMessage } from './components/Chat/chatMessageVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'
+export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 export { default as Menu } from './components/Menu/menuVariables'

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

@@ -0,0 +1,12 @@
+import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables'
+
+export default (siteVars: any): Partial<RadioGroupItemVariables> => ({
+  textColorDefault: siteVars.gray02,
+  textColorDefaultHoverFocus: siteVars.colors.white,
+  textColorChecked: siteVars.colors.white,
+
+  iconBorderColorDefaultHover: siteVars.colors.white,
+  iconBorderColorChecked: siteVars.brand06,
+
+  iconBackgroundColorChecked: siteVars.brand06,
+})

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -6,5 +6,6 @@ export { default as Divider } from './components/Divider/dividerVariables'
 export { default as Header } from './components/Header/headerVariables'
 export { default as Input } from './components/Input/inputVariables'
 export { default as Menu } from './components/Menu/menuVariables'
+export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'

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

@@ -0,0 +1,14 @@
+import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables'
+
+export default (siteVars: any): Partial<RadioGroupItemVariables> => ({
+  colorDisabled: siteVars.accessibleGreen,
+
+  textColorDefault: siteVars.white,
+  textColorDefaultHoverFocus: siteVars.white,
+  textColorChecked: siteVars.white,
+
+  iconBorderColorDefaultHover: siteVars.accessibleCyan,
+  iconBorderColorChecked: siteVars.accessibleCyan,
+
+  iconBackgroundColorChecked: siteVars.accessibleCyan,
+})

packages/react/src/themes/teams-high-contrast/siteVariables.ts

@@ -7,7 +7,7 @@ export const black = '#000'
 export const white = '#fff'
 
 export const accessibleYellow = '#ffff01'
-export const accessibleGreen = '#3ff23f'
+export const accessibleGreen = '#3ff23f' // always disabled color in high contrast
 export const accessibleCyan = '#1aebff'
 
 export const red = '#f00'

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

@@ -4,36 +4,95 @@ import {
   RadioGroupItemState,
 } from '../../../../components/RadioGroup/RadioGroupItem'
 import { RadioGroupItemVariables } from './radioGroupItemVariables'
+import Icon from '../../../../components/Icon/Icon'
 import { pxToRem } from '../../../../lib'
 
+const restHoverFocusTextColor = textColor => ({
+  color: textColor,
+
+  ':hover': {
+    color: textColor,
+  },
+
+  ':focus': {
+    color: textColor,
+  },
+})
+
 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
+    boxSizing: 'border-box',
+
+    alignItems: 'center',
+    borderStyle: 'solid',
+    borderWidth: `${pxToRem(1)}`,
+    borderColor: 'transparent',
+    borderRadius: `${pxToRem(2)}`,
+    color: v.textColorDefault,
     cursor: 'pointer',
     display: p.vertical ? 'flex' : 'inline-flex',
-    fontWeight: 400,
-    minHeight: '2.5rem',
-    outline: 0,
+    fontSize: v.textFontSize,
     padding: v.padding,
+    outline: 0,
+
+    ':hover': {
+      color: v.textColorDefaultHoverFocus,
+
+      [`& .${Icon.className}`]: {
+        color: v.iconBorderColorDefaultHover,
+      },
+    },
+
+    ':focus': {
+      color: v.textColorDefaultHoverFocus,
+    },
+
+    ...(p.checked && {
+      ...restHoverFocusTextColor(v.textColorChecked),
+    }),
+
     ...(p.disabled && {
-      color: v.colorDisabled,
+      ...restHoverFocusTextColor(v.colorDisabled),
+    }),
+
+    ...(p.isFromKeyboard && {
+      borderColor: v.focusInnerBorderColor,
+      boxShadow: `0 0 0 ${pxToRem(1)} ${v.focusOuterBorderColor}`,
     }),
   }),
 
   icon: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    margin: `0 ${pxToRem(10)} 0 0`,
-    color: p.checked ? v.colorChecked : v.color,
-    backgroundColor: p.checked ? v.colorBackgroundChecked : v.colorBackground,
-    borderColor: p.checked ? v.colorBorderChecked : v.colorBorder,
-    outlineColor: v.color,
+    // overrides from icon styles
+    backgroundColor: 'transparent',
+    boxShadow: 'none',
 
-    ...(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
+    boxSizing: 'border-box',
+
+    borderStyle: 'solid',
+    borderWidth: `${pxToRem(1)}`,
+    borderColor: 'currentColor',
+    margin: `0 ${pxToRem(12)} 0 0`,
+    height: `${pxToRem(12)}`,
+    width: `${pxToRem(12)}`,
+
+    ...(p.checked && {
+      backgroundColor: v.iconBackgroundColorChecked,
+      borderColor: v.iconBorderColorChecked,
     }),
+
+    ...(p.disabled && {
+      borderColor: v.colorDisabled,
+    }),
+
+    ...(p.checked &&
+      p.disabled && {
+        backgroundColor: v.colorDisabled,
+      }),
   }),
 }
 

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

@@ -1,29 +1,41 @@
 import { pxToRem } from '../../../../lib'
 
 export type RadioGroupItemVariables = {
-  color: string
-  colorChecked: string
   colorDisabled: string
 
-  colorBorder: string
-  colorBorderChecked: string
+  // can these be global colors so we don't have to define for every component?
+  focusInnerBorderColor: string
+  focusOuterBorderColor: string
 
-  colorBackground: string
-  colorBackgroundChecked: string
+  textFontSize: string
+
+  textColorDefault: string
+  textColorDefaultHoverFocus: string
+  textColorChecked: string
+
+  iconBorderColorDefaultHover: string
+  iconBorderColorChecked: string
+
+  iconBackgroundColorChecked: string
 
   padding: string
 }
 
 export default (siteVars: any): RadioGroupItemVariables => ({
-  color: siteVars.colors.primary[500],
-  colorChecked: siteVars.colors.white,
   colorDisabled: siteVars.gray06,
+  focusInnerBorderColor: siteVars.colors.white,
+  focusOuterBorderColor: siteVars.colors.black,
+
+  textFontSize: siteVars.fontSizes.medium,
+
+  textColorDefault: siteVars.gray02,
+  textColorDefaultHoverFocus: siteVars.colors.grey[900],
+  textColorChecked: siteVars.colors.grey[900],
 
-  colorBorder: siteVars.colors.primary[500],
-  colorBorderChecked: siteVars.colors.white,
+  iconBorderColorDefaultHover: siteVars.colors.grey[900],
+  iconBorderColorChecked: siteVars.colors.primary[500],
 
-  colorBackground: siteVars.colors.white,
-  colorBackgroundChecked: siteVars.colors.primary[500],
+  iconBackgroundColorChecked: siteVars.colors.primary[500],
 
   padding: `0 ${pxToRem(4)}`,
 })