From e75b9ba98d63cac3d243ca9b2ca70b838861664d Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Fri, 1 Feb 2019 15:50:59 -0800 Subject: [PATCH 01/15] updating radio button styles --- .../RadioGroup/radioGroupItemStyles.ts | 46 +++++++++++++------ .../RadioGroup/radioGroupItemVariables.ts | 8 ++-- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index 9b920a075b..ced5620e5d 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -12,33 +12,53 @@ const radioStyles: ComponentSlotStylesInput< > = { root: ({ props }): ICSSInJSStyle => ({ outline: 0, + display: 'inline-flex', + alignItems: 'center', + cursor: props.disabled ? 'default' : 'pointer', ...(!props.vertical && { display: 'inline-block', }), }), label: ({ props: p, variables: v }): ICSSInJSStyle => ({ - cursor: 'pointer', - display: 'inline-flex', - alignItems: 'baseline', - fontWeight: 400, - minHeight: '2.5rem', backgroundColor: 'transparent', + color: p.checked ? v.colorChecked : v.color, + ':hover': { + color: v.colorChecked, + }, + ':focus': { + color: v.colorChecked, + }, ...(p.disabled && { color: v.colorDisabled, + ':hover': { + color: v.colorDisabled, + }, }), }), 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, - + margin: `0 ${pxToRem(12)} 0 0`, + backgroundColor: p.checked ? v.colorBackgroundChecked : 'transparent', + height: `${pxToRem(12)}`, + width: `${pxToRem(12)}`, + boxShadow: 'none', + border: `${pxToRem(1)} solid ${p.checked ? v.colorBorderChecked : v.colorBorder}`, + ':hover': { + borderColor: v.colorChecked, + }, + ':focus': { + borderColor: v.colorChecked, + }, + ...(p.disabled && { + borderColor: v.colorDisabled, + ':hover': { + borderColor: v.colorDisabled, + }, + }), ...(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`, + borderColor: v.colorBorderChecked, + boxShadow: `0 0 0 ${pxToRem(2)} ${v.colorFocusShadow}`, }), }), } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 7445b00362..a65b6fe94f 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -8,16 +8,18 @@ export type RadioGroupItemVariables = { colorBackground: string colorBackgroundChecked: string + colorFocusShadow: string } export default (siteVars: any): RadioGroupItemVariables => ({ - color: siteVars.brand, - colorChecked: siteVars.white, + color: siteVars.gray02, + colorChecked: siteVars.black, colorDisabled: siteVars.gray06, colorBorder: siteVars.brand, - colorBorderChecked: siteVars.white, + colorBorderChecked: siteVars.brand, colorBackground: siteVars.white, colorBackgroundChecked: siteVars.brand, + colorFocusShadow: '#a6a7dc', // brand06 dark theme }) From c3e44551d5185a581c1bdf7687c4a5c42e566240 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Wed, 6 Feb 2019 14:02:21 -0800 Subject: [PATCH 02/15] radios --- packages/react/src/themes/teams-dark/siteVariables.ts | 4 ++-- packages/react/src/themes/teams/siteVariables.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 378a7d9602..ba0ae3bc0d 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -1,10 +1,10 @@ -import { white, green } from '../teams/siteVariables' +import { green } from '../teams/siteVariables' // // COLORS // export const black = '#201f1f' - +export const white = '#fff' export const gray02 = '#c8c6c4' export const gray03 = '#b3b0ad' export const gray04 = '#8a8886' diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index f7cf0aac2f..b6d10fef2a 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -21,7 +21,7 @@ export const gray09 = '#EDEBE9' export const gray10 = '#F3F2F1' export const gray14 = '#FAF9F8' -export const white = colors.white +export const white = '#fff' export const brand = colors.primary[500] export const brand02 = colors.primary[900] From 877069b853d25fe22c384645ffc5fbae41a7a5e4 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Wed, 6 Feb 2019 15:01:07 -0800 Subject: [PATCH 03/15] updating other themes --- .../RadioGroup/radioGroupItemVariables.ts | 23 +++++++++++++++++++ .../RadioGroup/radioGroupItemVariables.ts | 23 +++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts create mode 100644 packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts 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..7445b00362 --- /dev/null +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -0,0 +1,23 @@ +export type RadioGroupItemVariables = { + color: string + colorChecked: string + colorDisabled: string + + colorBorder: string + colorBorderChecked: string + + colorBackground: string + colorBackgroundChecked: string +} + +export default (siteVars: any): RadioGroupItemVariables => ({ + color: siteVars.brand, + colorChecked: siteVars.white, + colorDisabled: siteVars.gray06, + + colorBorder: siteVars.brand, + colorBorderChecked: siteVars.white, + + colorBackground: siteVars.white, + colorBackgroundChecked: siteVars.brand, +}) 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..7445b00362 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -0,0 +1,23 @@ +export type RadioGroupItemVariables = { + color: string + colorChecked: string + colorDisabled: string + + colorBorder: string + colorBorderChecked: string + + colorBackground: string + colorBackgroundChecked: string +} + +export default (siteVars: any): RadioGroupItemVariables => ({ + color: siteVars.brand, + colorChecked: siteVars.white, + colorDisabled: siteVars.gray06, + + colorBorder: siteVars.brand, + colorBorderChecked: siteVars.white, + + colorBackground: siteVars.white, + colorBackgroundChecked: siteVars.brand, +}) From 5e6bdb20a6d70bdde61fd2087bb829d980eb21d8 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Wed, 6 Feb 2019 16:14:39 -0800 Subject: [PATCH 04/15] adding theme support for dark/high contrast --- .../react/src/themes/teams-dark/componentVariables.ts | 1 + .../components/RadioGroup/radioGroupItemVariables.ts | 2 +- .../src/themes/teams-high-contrast/componentVariables.ts | 1 + .../components/RadioGroup/radioGroupItemVariables.ts | 8 +++++--- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index ce9d65749a..11b22b2aff 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -4,5 +4,6 @@ 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' diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 7445b00362..71c4037605 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -12,7 +12,7 @@ export type RadioGroupItemVariables = { export default (siteVars: any): RadioGroupItemVariables => ({ color: siteVars.brand, - colorChecked: siteVars.white, + colorChecked: siteVars.gray02, colorDisabled: siteVars.gray06, colorBorder: siteVars.brand, 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 index 7445b00362..8d2e1c674f 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -8,6 +8,7 @@ export type RadioGroupItemVariables = { colorBackground: string colorBackgroundChecked: string + colorFocusShadow: string } export default (siteVars: any): RadioGroupItemVariables => ({ @@ -15,9 +16,10 @@ export default (siteVars: any): RadioGroupItemVariables => ({ colorChecked: siteVars.white, colorDisabled: siteVars.gray06, - colorBorder: siteVars.brand, - colorBorderChecked: siteVars.white, + colorBorder: siteVars.white, + colorBorderChecked: siteVars.accessibleCyan, colorBackground: siteVars.white, - colorBackgroundChecked: siteVars.brand, + colorBackgroundChecked: siteVars.accessibleCyan, + colorFocusShadow: siteVars.accessibleYellow, }) From fa6d6a5b8bbae7853c7ccca7fb11a8686b07f8c2 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Fri, 8 Feb 2019 11:27:02 -0800 Subject: [PATCH 05/15] updating styles for dark/high contrast themes --- .../RadioGroup/radioGroupItemVariables.ts | 32 +++++++---------- .../RadioGroup/radioGroupItemVariables.ts | 34 +++++++------------ .../RadioGroup/radioGroupItemStyles.ts | 20 ++++++----- .../RadioGroup/radioGroupItemVariables.ts | 34 ++++++++++--------- 4 files changed, 53 insertions(+), 67 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 71c4037605..e5f9b547bb 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,23 +1,15 @@ -export type RadioGroupItemVariables = { - color: string - colorChecked: string - colorDisabled: string +export default (siteVars: any) => { + return { + labelColorDefault: siteVars.gray02, + labelColorChecked: siteVars.white, - colorBorder: string - colorBorderChecked: string + iconColorBorderDefault: siteVars.brand, + iconColorBorderChecked: siteVars.brand, - colorBackground: string - colorBackgroundChecked: string -} - -export default (siteVars: any): RadioGroupItemVariables => ({ - color: siteVars.brand, - colorChecked: siteVars.gray02, - colorDisabled: siteVars.gray06, + iconcolorBackgroundDefault: siteVars.white, + iconColorBackgroundChecked: siteVars.brand, + iconColorBoxShadowFocus: '#a6a7dc', // brand06 dark theme - colorBorder: siteVars.brand, - colorBorderChecked: siteVars.white, - - colorBackground: siteVars.white, - colorBackgroundChecked: siteVars.brand, -}) + colorDisabled: siteVars.gray06, + } +} 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 index 8d2e1c674f..f9345e0927 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -1,25 +1,15 @@ -export type RadioGroupItemVariables = { - color: string - colorChecked: string - colorDisabled: string +export default (siteVars: any) => { + return { + labelColorDefault: siteVars.brand, + labelColorChecked: siteVars.white, - colorBorder: string - colorBorderChecked: string + iconColorBorderDefault: siteVars.white, + iconColorBorderChecked: siteVars.accessibleCyan, - colorBackground: string - colorBackgroundChecked: string - colorFocusShadow: string -} - -export default (siteVars: any): RadioGroupItemVariables => ({ - color: siteVars.brand, - colorChecked: siteVars.white, - colorDisabled: siteVars.gray06, + iconcolorBackgroundDefault: siteVars.white, + iconColorBackgroundChecked: siteVars.accessibleCyan, + iconColorBoxShadowFocus: siteVars.accessibleYellow, - colorBorder: siteVars.white, - colorBorderChecked: siteVars.accessibleCyan, - - colorBackground: siteVars.white, - colorBackgroundChecked: siteVars.accessibleCyan, - colorFocusShadow: siteVars.accessibleYellow, -}) + colorDisabled: siteVars.gray06, + } +} diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index ced5620e5d..d07a88cfd5 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -22,12 +22,12 @@ const radioStyles: ComponentSlotStylesInput< label: ({ props: p, variables: v }): ICSSInJSStyle => ({ backgroundColor: 'transparent', - color: p.checked ? v.colorChecked : v.color, + color: p.checked ? v.labelColorChecked : v.labelColorDefault, ':hover': { - color: v.colorChecked, + color: v.labelColorChecked, }, ':focus': { - color: v.colorChecked, + color: v.labelColorChecked, }, ...(p.disabled && { color: v.colorDisabled, @@ -39,16 +39,18 @@ const radioStyles: ComponentSlotStylesInput< icon: ({ props: p, variables: v }): ICSSInJSStyle => ({ margin: `0 ${pxToRem(12)} 0 0`, - backgroundColor: p.checked ? v.colorBackgroundChecked : 'transparent', + backgroundColor: p.checked ? v.iconColorBackgroundChecked : 'transparent', height: `${pxToRem(12)}`, width: `${pxToRem(12)}`, boxShadow: 'none', - border: `${pxToRem(1)} solid ${p.checked ? v.colorBorderChecked : v.colorBorder}`, + border: `${pxToRem(1)} solid ${ + p.checked ? v.iconColorBorderChecked : v.iconColorBorderDefault + }`, ':hover': { - borderColor: v.colorChecked, + borderColor: v.iconColorBorderChecked, }, ':focus': { - borderColor: v.colorChecked, + borderColor: v.iconColorBorderChecked, }, ...(p.disabled && { borderColor: v.colorDisabled, @@ -57,8 +59,8 @@ const radioStyles: ComponentSlotStylesInput< }, }), ...(p.isFromKeyboard && { - borderColor: v.colorBorderChecked, - boxShadow: `0 0 0 ${pxToRem(2)} ${v.colorFocusShadow}`, + borderColor: v.iconColorBorderChecked, + boxShadow: `0 0 0 ${pxToRem(2)} ${v.iconColorBoxShadowFocus}`, }), }), } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index a65b6fe94f..0eed4c5ce8 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -1,25 +1,27 @@ export type RadioGroupItemVariables = { - color: string - colorChecked: string - colorDisabled: string + labelColorDefault: string + labelColorChecked: string + + iconColorBorderDefault: string + iconColorBorderChecked: string - colorBorder: string - colorBorderChecked: string + iconcolorBackgroundDefault: string + iconColorBackgroundChecked: string + iconColorBoxShadowFocus: string - colorBackground: string - colorBackgroundChecked: string - colorFocusShadow: string + colorDisabled: string } export default (siteVars: any): RadioGroupItemVariables => ({ - color: siteVars.gray02, - colorChecked: siteVars.black, - colorDisabled: siteVars.gray06, + labelColorDefault: siteVars.gray02, + labelColorChecked: siteVars.black, + + iconColorBorderDefault: siteVars.brand, + iconColorBorderChecked: siteVars.brand, - colorBorder: siteVars.brand, - colorBorderChecked: siteVars.brand, + iconcolorBackgroundDefault: siteVars.white, + iconColorBackgroundChecked: siteVars.brand, + iconColorBoxShadowFocus: '#a6a7dc', // brand06 dark theme - colorBackground: siteVars.white, - colorBackgroundChecked: siteVars.brand, - colorFocusShadow: '#a6a7dc', // brand06 dark theme + colorDisabled: siteVars.gray06, }) From dd955ed1d186ad9e4f339a18f931076ee4af3375 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Tue, 12 Feb 2019 11:38:25 -0800 Subject: [PATCH 06/15] updating colors --- .../teams/components/RadioGroup/radioGroupItemVariables.ts | 2 +- packages/react/src/themes/teams/siteVariables.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 0eed4c5ce8..ceb0857f83 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -21,7 +21,7 @@ export default (siteVars: any): RadioGroupItemVariables => ({ iconcolorBackgroundDefault: siteVars.white, iconColorBackgroundChecked: siteVars.brand, - iconColorBoxShadowFocus: '#a6a7dc', // brand06 dark theme + iconColorBoxShadowFocus: siteVars.brand07, colorDisabled: siteVars.gray06, }) diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 61fa50f6e0..9acfb2064d 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -27,6 +27,7 @@ export const brand = colors.primary[500] export const brand02 = colors.primary[900] export const brand04 = '#464775' export const brand06 = colors.primary[500] +export const brand07 = '#a6a7dc' export const brand08 = '#8B8CC7' export const brand12 = colors.primary[200] export const brand14 = colors.primary[100] From 9da7b9a34fafc8643acab9e6bee67ced05b39ddb Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Tue, 12 Feb 2019 12:29:04 -0800 Subject: [PATCH 07/15] fixing border colors and high contrast issues --- .../components/RadioGroup/radioGroupItemVariables.ts | 2 +- .../components/RadioGroup/radioGroupItemVariables.ts | 2 +- .../teams/components/RadioGroup/radioGroupItemStyles.ts | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index e5f9b547bb..85866b4e54 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -8,7 +8,7 @@ export default (siteVars: any) => { iconcolorBackgroundDefault: siteVars.white, iconColorBackgroundChecked: siteVars.brand, - iconColorBoxShadowFocus: '#a6a7dc', // brand06 dark theme + iconColorBoxShadowFocus: siteVars.brand06, colorDisabled: siteVars.gray06, } 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 index f9345e0927..cda958837e 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -1,6 +1,6 @@ export default (siteVars: any) => { return { - labelColorDefault: siteVars.brand, + labelColorDefault: siteVars.white, labelColorChecked: siteVars.white, iconColorBorderDefault: siteVars.white, diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index d07a88cfd5..49119f4214 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -43,9 +43,9 @@ const radioStyles: ComponentSlotStylesInput< height: `${pxToRem(12)}`, width: `${pxToRem(12)}`, boxShadow: 'none', - border: `${pxToRem(1)} solid ${ - p.checked ? v.iconColorBorderChecked : v.iconColorBorderDefault - }`, + borderStyle: 'solid', + borderWidth: `${pxToRem(1)}`, + borderColor: p.checked ? v.iconColorBorderChecked : v.iconColorBorderDefault, ':hover': { borderColor: v.iconColorBorderChecked, }, From 6ec0927f0a9b60cc1a11afb7626aaaafcf1847ee Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 26 Feb 2019 15:55:20 +0100 Subject: [PATCH 08/15] -addressed comments --- .../RadioGroup/radioGroupItemVariables.ts | 4 ++- .../RadioGroup/radioGroupItemVariables.ts | 4 ++- .../RadioGroup/radioGroupItemStyles.ts | 33 ++++++++++++++----- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 85866b4e54..f85ca4c0b8 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,4 +1,6 @@ -export default (siteVars: any) => { +import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' + +export default (siteVars: any): Partial => { return { labelColorDefault: siteVars.gray02, labelColorChecked: siteVars.white, 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 index cda958837e..f9390a5705 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -1,4 +1,6 @@ -export default (siteVars: any) => { +import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' + +export default (siteVars: any): Partial => { return { labelColorDefault: siteVars.white, labelColorChecked: siteVars.white, diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index 49119f4214..d056e4a634 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -6,6 +6,22 @@ import { import { RadioGroupItemVariables } from './radioGroupItemVariables' import { pxToRem } from '../../../../lib' +const disabledIconStyles = v => ({ + borderColor: v.colorDisabled, +}) + +const enabledHoverAndFocusIconStyles = v => ({ + borderColor: v.iconColorBorderChecked, +}) + +const disabledLabelStyles = v => ({ + color: v.colorDisabled, +}) + +const enabledHoverAndFocusLabelStyles = v => ({ + color: v.labelColorChecked, +}) + const radioStyles: ComponentSlotStylesInput< RadioGroupItemProps & RadioGroupItemState, RadioGroupItemVariables @@ -24,20 +40,21 @@ const radioStyles: ComponentSlotStylesInput< backgroundColor: 'transparent', color: p.checked ? v.labelColorChecked : v.labelColorDefault, ':hover': { - color: v.labelColorChecked, + ...enabledHoverAndFocusLabelStyles(v), }, ':focus': { - color: v.labelColorChecked, + ...enabledHoverAndFocusLabelStyles(v), }, ...(p.disabled && { - color: v.colorDisabled, + ...disabledLabelStyles(v), ':hover': { - color: v.colorDisabled, + ...disabledLabelStyles(v), }, }), }), icon: ({ props: p, variables: v }): ICSSInJSStyle => ({ + boxSizing: 'border-box', margin: `0 ${pxToRem(12)} 0 0`, backgroundColor: p.checked ? v.iconColorBackgroundChecked : 'transparent', height: `${pxToRem(12)}`, @@ -47,15 +64,15 @@ const radioStyles: ComponentSlotStylesInput< borderWidth: `${pxToRem(1)}`, borderColor: p.checked ? v.iconColorBorderChecked : v.iconColorBorderDefault, ':hover': { - borderColor: v.iconColorBorderChecked, + ...enabledHoverAndFocusIconStyles(v), }, ':focus': { - borderColor: v.iconColorBorderChecked, + ...enabledHoverAndFocusIconStyles(v), }, ...(p.disabled && { - borderColor: v.colorDisabled, + ...disabledIconStyles(v), ':hover': { - borderColor: v.colorDisabled, + ...disabledIconStyles(v), }, }), ...(p.isFromKeyboard && { From 6cc4c92c8b2325bf51b9b091166100a6e73f50d4 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 12 Mar 2019 22:04:55 -0700 Subject: [PATCH 09/15] added changelog entry & updated to use interface for variables per PR feedback --- CHANGELOG.md | 1 + .../RadioGroup/radioGroupItemVariables.ts | 22 +++++++++---------- .../RadioGroup/radioGroupItemVariables.ts | 22 +++++++++---------- .../RadioGroup/radioGroupItemVariables.ts | 2 +- 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e740959562..220edf1ee3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Narrate the first adding/selection of a `Dropdown` item using aria live @silviuavram ([#1032](https://github.com/stardust-ui/react/pull/1032)) - `*Props` interfaces accept additional props @layershifter ([#1042](https://github.com/stardust-ui/react/pull/1042)) - `chatBehavior` - Use `FocusZone`'s Embed mode instead of Wrap mode @sophieH29 ([#1044](https://github.com/stardust-ui/react/pull/1044)) +- Fix `RadioButtonGroup` Teams theme styles to be correct @notandrew ([#830](https://github.com/stardust-ui/react/pull/830)) ### Features - Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017)) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index f85ca4c0b8..2e4390c018 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,17 +1,15 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' -export default (siteVars: any): Partial => { - return { - labelColorDefault: siteVars.gray02, - labelColorChecked: siteVars.white, +export default (siteVars: any): Partial => ({ + labelColorDefault: siteVars.gray02, + labelColorChecked: siteVars.white, - iconColorBorderDefault: siteVars.brand, - iconColorBorderChecked: siteVars.brand, + iconColorBorderDefault: siteVars.brand, + iconColorBorderChecked: siteVars.brand, - iconcolorBackgroundDefault: siteVars.white, - iconColorBackgroundChecked: siteVars.brand, - iconColorBoxShadowFocus: siteVars.brand06, + iconcolorBackgroundDefault: siteVars.white, + iconColorBackgroundChecked: siteVars.brand, + iconColorBoxShadowFocus: siteVars.brand06, - colorDisabled: siteVars.gray06, - } -} + colorDisabled: siteVars.gray06, +}) 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 index f9390a5705..ce0ec59199 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -1,17 +1,15 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' -export default (siteVars: any): Partial => { - return { - labelColorDefault: siteVars.white, - labelColorChecked: siteVars.white, +export default (siteVars: any): RadioGroupItemVariables => ({ + labelColorDefault: siteVars.white, + labelColorChecked: siteVars.white, - iconColorBorderDefault: siteVars.white, - iconColorBorderChecked: siteVars.accessibleCyan, + iconColorBorderDefault: siteVars.white, + iconColorBorderChecked: siteVars.accessibleCyan, - iconcolorBackgroundDefault: siteVars.white, - iconColorBackgroundChecked: siteVars.accessibleCyan, - iconColorBoxShadowFocus: siteVars.accessibleYellow, + iconcolorBackgroundDefault: siteVars.white, + iconColorBackgroundChecked: siteVars.accessibleCyan, + iconColorBoxShadowFocus: siteVars.accessibleYellow, - colorDisabled: siteVars.gray06, - } -} + colorDisabled: siteVars.gray06, +}) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index ad1c567db2..02f69f4a45 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -1,4 +1,4 @@ -export type RadioGroupItemVariables = { +export interface RadioGroupItemVariables { labelColorDefault: string labelColorChecked: string From 2a80787e3edfa738e6e977ac6dbf9a9c2d8676d2 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Tue, 19 Mar 2019 22:18:23 -0700 Subject: [PATCH 10/15] remove comments --- .../RadioGroup/radioGroupItemStyles.ts | 17 ++--------------- .../RadioGroup/radioGroupItemVariables.ts | 1 - 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index b381cfdd99..0558294e5e 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -6,19 +6,6 @@ import { import { RadioGroupItemVariables } from './radioGroupItemVariables' import { pxToRem } from '../../../../lib' -/// Disabled styles -const iconBorderStyles = iconBorderColor => ({ - borderColor: iconBorderColor, - - // ':hover': { - // borderColor: iconBorderColor, - // }, - - // ':focus': { - // borderColor: iconBorderColor, - // }, -}) - const restHoverTextColor = textColor => ({ color: textColor, @@ -75,11 +62,11 @@ const radioStyles: ComponentSlotStylesInput< ...(p.checked && { backgroundColor: v.iconBackgroundColorChecked, - ...iconBorderStyles(v.iconBorderColorChecked), + borderColor: v.iconBorderColorChecked, }), ...(p.disabled && { - ...iconBorderStyles(v.colorDisabled), + borderColor: v.colorDisabled, }), ...(p.checked && diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index f47f4c30ff..12d1a61d13 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -9,7 +9,6 @@ export type RadioGroupItemVariables = { textColorDefaultHoverFocus: string textColorChecked: string - // iconBorderColorDefault: string iconBorderColorDefaultHover: string iconBorderColorChecked: string From 3d8cd40a719835db049bfe681f320584e17b9be9 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 20 Mar 2019 15:43:30 -0700 Subject: [PATCH 11/15] updated focus state & colors for all themes --- .../RadioGroupVerticalExample.shorthand.tsx | 12 ++++--- .../RadioGroup/radioGroupItemVariables.ts | 3 +- .../RadioGroup/radioGroupItemVariables.ts | 3 ++ .../teams-high-contrast/siteVariables.ts | 2 +- .../RadioGroup/radioGroupItemStyles.ts | 33 ++++++++++++++----- .../RadioGroup/radioGroupItemVariables.ts | 11 +++++-- 6 files changed, 46 insertions(+), 18 deletions(-) diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx index cd75eff09a..32263baec2 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} @@ -40,7 +40,6 @@ class RadioGroupVerticalExample extends React.Component { key: 'Pepperoni', label: 'Pepperoni', value: 'pepperoni', - disabled: true, }, { name: 'pizza', @@ -48,7 +47,12 @@ class RadioGroupVerticalExample extends React.Component { label: ( Choose your own{' '} - + ), value: 'custom', diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index f55a26fff8..60a39b70b9 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,10 +1,11 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' export default (siteVars: any): Partial => ({ - textColorDefault: siteVars.white, + textColorDefault: siteVars.gray02, textColorDefaultHoverFocus: siteVars.white, textColorChecked: siteVars.white, + iconBorderColorDefaultHover: siteVars.white, iconBorderColorChecked: siteVars.brand06, iconBackgroundColorDefault: siteVars.white, 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 index 0fcc519c15..07e28e5ad8 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -1,10 +1,13 @@ 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, iconBackgroundColorDefault: siteVars.white, 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 0558294e5e..3435e41220 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts @@ -4,14 +4,19 @@ import { RadioGroupItemState, } from '../../../../components/RadioGroup/RadioGroupItem' import { RadioGroupItemVariables } from './radioGroupItemVariables' +import Icon from '../../../../components/Icon/Icon' import { pxToRem } from '../../../../lib' -const restHoverTextColor = textColor => ({ +const restHoverFocusTextColor = textColor => ({ color: textColor, ':hover': { color: textColor, }, + + ':focus': { + color: textColor, + }, }) const radioStyles: ComponentSlotStylesInput< @@ -19,17 +24,27 @@ const radioStyles: ComponentSlotStylesInput< RadioGroupItemVariables > = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ + // 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', fontSize: v.textFontSize, padding: v.padding, - margin: v.margin, outline: 0, ':hover': { color: v.textColorDefaultHoverFocus, + + [`& .${Icon.className}`]: { + color: v.iconBorderColorDefaultHover, + }, }, ':focus': { @@ -37,11 +52,16 @@ const radioStyles: ComponentSlotStylesInput< }, ...(p.checked && { - ...restHoverTextColor(v.textColorChecked), + ...restHoverFocusTextColor(v.textColorChecked), }), ...(p.disabled && { - ...restHoverTextColor(v.colorDisabled), + ...restHoverFocusTextColor(v.colorDisabled), + }), + + ...(p.isFromKeyboard && { + borderColor: v.focusInnerBorderColor, + boxShadow: `0 0 0 ${pxToRem(1)} ${v.focusOuterBorderColor}`, }), }), @@ -73,11 +93,6 @@ const radioStyles: ComponentSlotStylesInput< p.disabled && { backgroundColor: v.colorDisabled, }), - - ...(p.isFromKeyboard && { - borderColor: v.iconBorderColorChecked, - boxShadow: `0 0 0 ${pxToRem(2)} ${v.iconColorBoxShadowFocus}`, - }), }), } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 12d1a61d13..364b2f9821 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -3,6 +3,10 @@ import { pxToRem } from '../../../../lib' export type RadioGroupItemVariables = { colorDisabled: string + // can these be global colors so we don't have to define for every component? + focusInnerBorderColor: string + focusOuterBorderColor: string + textFontSize: string textColorDefault: string @@ -18,13 +22,15 @@ export type RadioGroupItemVariables = { iconColorBoxShadowFocus: string padding: string - margin: string } export default (siteVars: any): RadioGroupItemVariables => ({ colorDisabled: siteVars.gray06, + focusInnerBorderColor: siteVars.colors.white, + focusOuterBorderColor: siteVars.colors.black, - textFontSize: siteVars.fontSizes.medium, + // revert back when pxToRem fix goes in + textFontSize: '14px', // siteVars.fontSizes.medium, textColorDefault: siteVars.gray02, textColorDefaultHoverFocus: siteVars.colors.grey[900], @@ -39,5 +45,4 @@ export default (siteVars: any): RadioGroupItemVariables => ({ iconColorBoxShadowFocus: siteVars.brand07, padding: `0 ${pxToRem(4)}`, - margin: `${pxToRem(4)} 0`, }) From 7e0ac552076e6ef580fd7f573aad9ea5f5efb9c7 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 20 Mar 2019 15:54:32 -0700 Subject: [PATCH 12/15] this will work once the pxToRem issues are fixed --- .../teams/components/RadioGroup/radioGroupItemVariables.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 364b2f9821..0edcc396bd 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -29,8 +29,7 @@ export default (siteVars: any): RadioGroupItemVariables => ({ focusInnerBorderColor: siteVars.colors.white, focusOuterBorderColor: siteVars.colors.black, - // revert back when pxToRem fix goes in - textFontSize: '14px', // siteVars.fontSizes.medium, + textFontSize: siteVars.fontSizes.medium, textColorDefault: siteVars.gray02, textColorDefaultHoverFocus: siteVars.colors.grey[900], From dce4412721144f32f46d192d26490646bb02fb43 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 20 Mar 2019 16:16:16 -0700 Subject: [PATCH 13/15] cleaning up code that isn't needed anymore --- .../components/RadioGroup/radioGroupItemVariables.ts | 9 +++------ packages/react/src/themes/teams-dark/siteVariables.ts | 2 +- .../components/RadioGroup/radioGroupItemVariables.ts | 3 --- .../components/RadioGroup/radioGroupItemVariables.ts | 6 ------ packages/react/src/themes/teams/siteVariables.ts | 1 - 5 files changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 60a39b70b9..ca448b3af8 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -2,14 +2,11 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/ export default (siteVars: any): Partial => ({ textColorDefault: siteVars.gray02, - textColorDefaultHoverFocus: siteVars.white, - textColorChecked: siteVars.white, + textColorDefaultHoverFocus: siteVars.colors.white, + textColorChecked: siteVars.colors.white, - iconBorderColorDefaultHover: siteVars.white, + iconBorderColorDefaultHover: siteVars.colors.white, iconBorderColorChecked: siteVars.brand06, - iconBackgroundColorDefault: siteVars.white, iconBackgroundColorChecked: siteVars.brand06, - - iconColorBoxShadowFocus: siteVars.brand, }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index a7ad11e164..6064d903db 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -4,7 +4,7 @@ import { colors, naturalColors } from '../teams/siteVariables' // COLORS // export const black = '#201f1f' // no mapping color -export const white = '#fff' + export const gray02 = '#c8c6c4' // light theme gray06 export const gray03 = '#b3b0ad' // no mapping color export const gray04 = '#8a8886' // no mapping color 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 index 07e28e5ad8..1ecf19c5c8 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -10,8 +10,5 @@ export default (siteVars: any): Partial => ({ iconBorderColorDefaultHover: siteVars.accessibleCyan, iconBorderColorChecked: siteVars.accessibleCyan, - iconBackgroundColorDefault: siteVars.white, iconBackgroundColorChecked: siteVars.accessibleCyan, - - iconColorBoxShadowFocus: siteVars.accessibleYellow, }) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 0edcc396bd..0164ad894b 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -16,11 +16,8 @@ export type RadioGroupItemVariables = { iconBorderColorDefaultHover: string iconBorderColorChecked: string - iconBackgroundColorDefault: string iconBackgroundColorChecked: string - iconColorBoxShadowFocus: string - padding: string } @@ -38,10 +35,7 @@ export default (siteVars: any): RadioGroupItemVariables => ({ iconBorderColorDefaultHover: siteVars.colors.grey[900], iconBorderColorChecked: siteVars.colors.primary[500], - iconBackgroundColorDefault: siteVars.colors.white, iconBackgroundColorChecked: siteVars.colors.primary[500], - iconColorBoxShadowFocus: siteVars.brand07, - padding: `0 ${pxToRem(4)}`, }) diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 530eeb1093..36f46dec74 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -21,7 +21,6 @@ export const gray10 = '#F3F2F1' // no mapping color export const gray14 = '#FAF9F8' // no mapping color export const brand04 = '#464775' // no mapping color -export const brand07 = '#a6a7dc' export const brand08 = '#8B8CC7' // no mapping color export const magenta = '#B24782' // no mapping color From 023a22f500d7eee638005389d62e6bedf0f55a72 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 25 Mar 2019 10:16:27 -0700 Subject: [PATCH 14/15] updating look of input in radio button example --- .../Types/RadioGroupVerticalExample.shorthand.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx index 32263baec2..b92baa54a3 100644 --- a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx +++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx @@ -50,7 +50,12 @@ class RadioGroupVerticalExample extends React.Component { From 3d43f6075c7c3b7250a16e6dfa06e62bf6a8a0c5 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 25 Mar 2019 10:39:42 -0700 Subject: [PATCH 15/15] update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 46fcaf3e60..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) @@ -28,7 +31,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066)) -- Fix `RadioButtonGroup` Teams theme styles to be correct @notandrew ([#830](https://github.com/stardust-ui/react/pull/830)) - Fix applying accessibility key handlers @layershifter ([#1072](https://github.com/stardust-ui/react/pull/1072)) - Fix `shrink` prop behavior for `Flex.Item` @kuzhelov ([#1086](https://github.com/stardust-ui/react/pull/1086)) - Disable `devMode` for Fela by default @layershifter ([#1090](https://github.com/stardust-ui/react/pull/1090))