diff --git a/CHANGELOG.md b/CHANGELOG.md index a149dff8e1..1eb1176ed6 100644 --- a/CHANGELOG.md +++ b/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](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) diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx index f10664ec4c..b92baa54a3 100644 --- a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx +++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx @@ -7,12 +7,12 @@ class RadioGroupVerticalExample extends React.Component { render() { const { selectedValue } = this.state return ( -
+
The selected value is: {selectedValue} @@ -22,7 +22,12 @@ 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', @@ -30,13 +35,29 @@ class RadioGroupVerticalExample extends React.Component { value: 'prosciutto', disabled: true, }, + { + name: 'pizza', + key: 'Pepperoni', + label: 'Pepperoni', + value: 'pepperoni', + }, { name: 'pizza', key: 'Custom', label: ( Choose your own{' '} - + ), value: 'custom', diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 83179faa63..c4692d6a5b 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/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' diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts new file mode 100644 index 0000000000..ca448b3af8 --- /dev/null +++ b/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 => ({ + textColorDefault: siteVars.gray02, + textColorDefaultHoverFocus: siteVars.colors.white, + textColorChecked: siteVars.colors.white, + + iconBorderColorDefaultHover: siteVars.colors.white, + iconBorderColorChecked: siteVars.brand06, + + iconBackgroundColorChecked: siteVars.brand06, +}) diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index 5fe7ad8df0..5603a6ebdd 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/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' diff --git a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts new file mode 100644 index 0000000000..1ecf19c5c8 --- /dev/null +++ b/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 => ({ + colorDisabled: siteVars.accessibleGreen, + + textColorDefault: siteVars.white, + textColorDefaultHoverFocus: siteVars.white, + textColorChecked: siteVars.white, + + iconBorderColorDefaultHover: siteVars.accessibleCyan, + iconBorderColorChecked: siteVars.accessibleCyan, + + iconBackgroundColorChecked: siteVars.accessibleCyan, +}) diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index cd209dd30c..03f3d45241 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/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' diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index c0be44d34e..3435e41220 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/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, + }), }), } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index ff52c50f32..0164ad894b 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/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)}`, })