From ad07d31518a0483d8050e93efa9036fa3446c0b6 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Tue, 24 Jan 2023 23:36:51 -0500 Subject: [PATCH 01/31] changed transparentStroke token to background to fix HC border bug --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 9e40acf25e..d911d4c3fb 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -6,7 +6,7 @@ import { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => ({ rootHorizontalPadding: globalTokens.size40, - borderColor: t.colors.transparentStroke, + borderColor: t.colors.background, // t.colors.transparentStroke borderStyle: 'solid', borderWidth: globalTokens.stroke.width10, borderRadius: globalTokens.corner.radius40, From f41555a4ff70d8eb66965b93e5843d9e62940035 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 25 Jan 2023 13:33:32 -0500 Subject: [PATCH 02/31] matched subtext bottom margin to label top margin --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index d911d4c3fb..7639a6ae5c 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -23,7 +23,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) labelMarginLeft: globalTokens.sizeNone, subtextVariant: 'caption1', subtextMarginTop: globalTokens.size20, - subtextMarginBottom: globalTokens.size20, + subtextMarginBottom: globalTokens.size40 + 1, marginTop: globalTokens.size60, marginRight: globalTokens.size60, marginBottom: globalTokens.size60, From f5e8b2416f2888947c8a52b54f040ca94a319699 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 25 Jan 2023 14:04:22 -0500 Subject: [PATCH 03/31] updated margin between labels --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 7639a6ae5c..725f87e91a 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -22,7 +22,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) labelMarginRight: globalTokens.size20, labelMarginLeft: globalTokens.sizeNone, subtextVariant: 'caption1', - subtextMarginTop: globalTokens.size20, + subtextMarginTop: globalTokens.sizeNone, subtextMarginBottom: globalTokens.size40 + 1, marginTop: globalTokens.size60, marginRight: globalTokens.size60, From 17b8775da82ab48bacf41e5f662b22fd2f63984d Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 25 Jan 2023 14:05:13 -0500 Subject: [PATCH 04/31] Change files --- ...l-radio-group-a3ba623f-13c9-4e3d-8dac-8564b0f79a2e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-experimental-radio-group-a3ba623f-13c9-4e3d-8dac-8564b0f79a2e.json diff --git a/change/@fluentui-react-native-experimental-radio-group-a3ba623f-13c9-4e3d-8dac-8564b0f79a2e.json b/change/@fluentui-react-native-experimental-radio-group-a3ba623f-13c9-4e3d-8dac-8564b0f79a2e.json new file mode 100644 index 0000000000..457fd92e09 --- /dev/null +++ b/change/@fluentui-react-native-experimental-radio-group-a3ba623f-13c9-4e3d-8dac-8564b0f79a2e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "polish bug fixes", + "packageName": "@fluentui-react-native/experimental-radio-group", + "email": "gulnazsayed@microsoft.com", + "dependentChangeType": "patch" +} From 8a782a823be06074d25151dce291f71b0cf76043 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 1 Feb 2023 11:57:01 -0500 Subject: [PATCH 05/31] text margin adjustment --- .../RadioGroup/src/Radio/Radio.styling.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index 14f5629bac..eb61fb8eeb 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -2,6 +2,7 @@ import { radioName, RadioTokens, RadioSlotProps, RadioProps } from './Radio.type import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework'; import { defaultRadioTokens } from './RadioTokens'; import { fontStyles, borderStyles } from '@fluentui-react-native/tokens'; +import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; export const radioStates: (keyof RadioTokens)[] = ['labelPositionBelow', 'focused', 'hovered', 'pressed', 'selected', 'disabled']; @@ -18,6 +19,7 @@ export const stylingSettings: UseStylingOptions { +// const textAdjustment = getTextMarginAdjustment(); +// const spacingIconContentBefore = tokens.spacingIconContentBefore +// ? { +// marginStart: textAdjustment.marginStart + tokens.spacingIconContentBefore, +// } +// : {}; +// const spacingIconContentAfter = tokens.spacingIconContentAfter +// ? { +// marginEnd: textAdjustment.marginEnd + tokens.spacingIconContentAfter, +// } +// : {}; +// return { +// color: contentColor, +// ...getTextMarginAdjustment(), +// ...spacingIconContentBefore, +// ...spacingIconContentAfter, +// ...fontStyles.from(fontStylesTokens, theme), +// }; +// }; From 65539e6e47b4cd62ffbca31627d4d89037003fcb Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 1 Feb 2023 11:57:58 -0500 Subject: [PATCH 06/31] code cleanup --- .../RadioGroup/src/Radio/Radio.styling.ts | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index eb61fb8eeb..58dcae2b00 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -105,24 +105,3 @@ export const stylingSettings: UseStylingOptions { -// const textAdjustment = getTextMarginAdjustment(); -// const spacingIconContentBefore = tokens.spacingIconContentBefore -// ? { -// marginStart: textAdjustment.marginStart + tokens.spacingIconContentBefore, -// } -// : {}; -// const spacingIconContentAfter = tokens.spacingIconContentAfter -// ? { -// marginEnd: textAdjustment.marginEnd + tokens.spacingIconContentAfter, -// } -// : {}; -// return { -// color: contentColor, -// ...getTextMarginAdjustment(), -// ...spacingIconContentBefore, -// ...spacingIconContentAfter, -// ...fontStyles.from(fontStylesTokens, theme), -// }; -// }; From ce3586f829e4b50805e301fdff45a017004deeb9 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 1 Feb 2023 11:58:41 -0500 Subject: [PATCH 07/31] code cleanup --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 725f87e91a..2ba90acd7f 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -6,7 +6,7 @@ import { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => ({ rootHorizontalPadding: globalTokens.size40, - borderColor: t.colors.background, // t.colors.transparentStroke + borderColor: t.colors.background, borderStyle: 'solid', borderWidth: globalTokens.stroke.width10, borderRadius: globalTokens.corner.radius40, From ee11d5a69175b77f1ec0e10d302f04ac373ffa45 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 9 Feb 2023 17:23:48 -0500 Subject: [PATCH 08/31] fixed horizontal-stacked alignment and focus rect --- packages/experimental/RadioGroup/src/Radio/Radio.styling.ts | 5 ++++- packages/experimental/RadioGroup/src/Radio/Radio.tsx | 4 ++-- packages/experimental/RadioGroup/src/Radio/Radio.types.ts | 2 +- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 4 ++-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index 58dcae2b00..8aebeeae10 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -74,6 +74,7 @@ export const stylingSettings: UseStylingOptions ({ variant: tokens.variant, style: { - marginTop: tokens.labelMarginTop, + marginVertical: tokens.labelMarginVertical, + marginHorizontal: 2, color: tokens.color, ...fontStyles.from(tokens, theme), }, @@ -98,6 +100,7 @@ export const stylingSettings: UseStylingOptions({ // now return the handler for finishing render return (final: RadioProps) => { - const { label, subtext, ...mergedProps } = mergeProps(radio.props, final); + const { label, subtext, enableFocusRing, ...mergedProps } = mergeProps(radio.props, final); const { onPress, disabled } = mergedProps; const labelComponent = ( - + {label} {!!subtext && {subtext}} diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts index 29ab0e5118..f0b5f26fd7 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts @@ -91,7 +91,7 @@ export interface RadioTokens extends FontTokens, IColorTokens, IForegroundColorT /** * Label's top margin. */ - labelMarginTop?: ViewStyle['marginTop']; + labelMarginVertical?: ViewStyle['marginVertical']; /** * Label's right margin. diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 2ba90acd7f..473abe900b 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -18,7 +18,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) color: t.colors.neutralForeground3, radioOuterCircleSize: 20, radioInnerCircleSize: 10, - labelMarginTop: globalTokens.size40 + 1, + labelMarginVertical: globalTokens.size40, labelMarginRight: globalTokens.size20, labelMarginLeft: globalTokens.sizeNone, subtextVariant: 'caption1', @@ -76,7 +76,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) }, focused: { - borderColor: t.colors.focusBorder, + // borderColor: t.colors.focusBorder, selected: { // Checked, Focused From 63943d78b15e3464f89f3fce625cbba8ec103c93 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 9 Feb 2023 17:26:42 -0500 Subject: [PATCH 09/31] code cleanup --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 473abe900b..406ce17bca 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -76,8 +76,6 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) }, focused: { - // borderColor: t.colors.focusBorder, - selected: { // Checked, Focused radioVisibility: 1, From f939a999b3b2ea1f527515b4f63e885df5f4634e Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 9 Feb 2023 17:34:55 -0500 Subject: [PATCH 10/31] replaced labelMarginTop with labelMarginVertical --- .../RadioGroupV1/CustomizedRadioGroup.tsx | 12 ++++++------ .../RadioGroup/src/Radio/Radio.styling.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx index e2e0e506ff..4a1c4f3e6f 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx @@ -35,7 +35,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => { const [marginRight, setMarginRight] = React.useState(6); const [marginBottom, setMarginBottom] = React.useState(6); const [marginLeft, setMarginLeft] = React.useState(4); - const [labelMarginTop, setLabelMarginTop] = React.useState(5); + const [labelMarginVertical, setLabelMarginVertical] = React.useState(4); const [labelMarginRight, setLabelMarginRight] = React.useState(2); const [labelMarginLeft, setLabelMarginLeft] = React.useState(0); const [subtextMarginTop, setSubtextMarginTop] = React.useState(2); @@ -68,7 +68,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => { marginRight, marginBottom, marginLeft, - labelMarginTop, + labelMarginVertical, labelMarginRight, labelMarginLeft, subtextMarginTop, @@ -135,7 +135,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => { marginRight, marginBottom, marginLeft, - labelMarginTop, + labelMarginVertical, labelMarginRight, labelMarginLeft, subtextMarginTop, @@ -312,12 +312,12 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => { }} /> { - setLabelMarginTop(parseInt(e.nativeEvent.text.toString())); + setLabelMarginVertical(parseInt(e.nativeEvent.text.toString())); }} /> ({ From d057d491160efae2f3ef2c6973d2fee70465ebde Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 9 Feb 2023 18:11:07 -0500 Subject: [PATCH 11/31] made win32 specific tokens --- .../RadioGroup/src/Radio/RadioTokens.win32.ts | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts new file mode 100644 index 0000000000..406ce17bca --- /dev/null +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -0,0 +1,97 @@ +import { Theme } from '@fluentui-react-native/framework'; +import { TokenSettings } from '@fluentui-react-native/use-styling'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { RadioTokens } from './Radio.types'; + +export const defaultRadioTokens: TokenSettings = (t: Theme) => + ({ + rootHorizontalPadding: globalTokens.size40, + borderColor: t.colors.background, + borderStyle: 'solid', + borderWidth: globalTokens.stroke.width10, + borderRadius: globalTokens.corner.radius40, + radioBorderWidth: globalTokens.stroke.width10, + radioVisibility: 0, + variant: 'subheaderStandard', + radioBorderStyle: 'solid', + radioBorder: t.colors.neutralStrokeAccessible, + color: t.colors.neutralForeground3, + radioOuterCircleSize: 20, + radioInnerCircleSize: 10, + labelMarginVertical: globalTokens.size40, + labelMarginRight: globalTokens.size20, + labelMarginLeft: globalTokens.sizeNone, + subtextVariant: 'caption1', + subtextMarginTop: globalTokens.sizeNone, + subtextMarginBottom: globalTokens.size40 + 1, + marginTop: globalTokens.size60, + marginRight: globalTokens.size60, + marginBottom: globalTokens.size60, + marginLeft: globalTokens.size40, + flexDirection: 'row', + alignItems: 'flex-start', + labelAlignItems: 'flex-start', + + labelPositionBelow: { + flexDirection: 'column', + alignItems: 'center', + labelAlignItems: 'center', + labelMarginLeft: globalTokens.size20, + marginLeft: globalTokens.size60, + }, + + disabled: { + // Unchecked, Disabled + radioBorder: t.colors.neutralForegroundDisabled, + color: t.colors.neutralForegroundDisabled, + radioVisibility: 0, + }, + + hovered: { + // Unchecked, Hover + radioBorder: t.colors.neutralStrokeAccessibleHover, + color: t.colors.neutralForeground2, + + selected: { + // Checked, Hover + radioBorder: t.colors.compoundBrandStroke1Hover, + radioFill: t.colors.compoundBrandBackground1Hover, + color: t.colors.neutralForeground2, + radioVisibility: 1, + }, + }, + + pressed: { + // Unchecked, Pressed + radioBorder: t.colors.neutralStrokeAccessiblePressed, + color: t.colors.neutralForeground1, + + selected: { + // Checked, Pressed + radioBorder: t.colors.compoundBrandStroke1Pressed, + radioFill: t.colors.compoundBrandBackground1Pressed, + color: t.colors.neutralForeground1, + radioVisibility: 1, + }, + }, + + focused: { + selected: { + // Checked, Focused + radioVisibility: 1, + }, + }, + + selected: { + // Checked, Rest + radioBorder: t.colors.compoundBrandStroke1, + radioFill: t.colors.compoundBrandStroke1, + color: t.colors.neutralForeground3, + radioVisibility: 1, + + disabled: { + // Checked, Disabled + radioFill: t.colors.neutralForegroundDisabled, + }, + }, + } as RadioTokens); From 3925b559d75f2b0a807d63a5a49dcd903f1566ce Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Wed, 15 Feb 2023 13:07:08 -0500 Subject: [PATCH 12/31] implementing new indicator for win32 --- apps/fluent-tester/src/theme/applyTheme.ts | 2 +- .../RadioGroup/src/Radio/Radio.styling.ts | 4 +-- .../RadioGroup/src/Radio/Radio.types.ts | 5 ++++ .../RadioGroup/src/Radio/RadioTokens.win32.ts | 29 ++++++++++++------- 4 files changed, 27 insertions(+), 13 deletions(-) diff --git a/apps/fluent-tester/src/theme/applyTheme.ts b/apps/fluent-tester/src/theme/applyTheme.ts index a0f5032a7d..d5c6cfb6b3 100644 --- a/apps/fluent-tester/src/theme/applyTheme.ts +++ b/apps/fluent-tester/src/theme/applyTheme.ts @@ -55,7 +55,7 @@ const themingModule = getThemingModule()[0]; export function applyTheme(parent: Theme, name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme { switch (name) { case 'Office': - return themingModule ? createOfficeTheme({ appearance, paletteName: 'WhiteColors' }).theme : {}; + return themingModule ? createOfficeTheme({ appearance, paletteName: 'LowerRibbon_FluentSV' }).theme : {}; case 'Caterpillar': return applyCaterpillarTheme(parent); default: diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index 6ac87132fb..55fe5471fa 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -28,7 +28,7 @@ export const stylingSettings: UseStylingOptions ({ style: { - backgroundColor: 'transparent', + backgroundColor: tokens.radioOuterCircleBackground, width: tokens.radioOuterCircleSize, height: tokens.radioOuterCircleSize, alignItems: 'center', @@ -45,6 +45,7 @@ export const stylingSettings: UseStylingOptions = (t: Theme) variant: 'subheaderStandard', radioBorderStyle: 'solid', radioBorder: t.colors.neutralStrokeAccessible, - color: t.colors.neutralForeground3, - radioOuterCircleSize: 20, - radioInnerCircleSize: 10, + color: t.colors.neutralForeground1, + radioOuterCircleSize: 16, + radioInnerCircleSize: 8, + radioOuterCircleBackground: t.colors.neutralBackground1, labelMarginVertical: globalTokens.size40, labelMarginRight: globalTokens.size20, labelMarginLeft: globalTokens.sizeNone, @@ -42,36 +43,43 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) disabled: { // Unchecked, Disabled - radioBorder: t.colors.neutralForegroundDisabled, + radioOuterCircleBackground: t.colors.neutralBackgroundDisabled, + radioBorder: t.colors.neutralStrokeDisabled, color: t.colors.neutralForegroundDisabled, radioVisibility: 0, }, hovered: { // Unchecked, Hover + radioOuterCircleBackground: t.colors.neutralBackground1, radioBorder: t.colors.neutralStrokeAccessibleHover, - color: t.colors.neutralForeground2, + color: t.colors.neutralForeground1, selected: { // Checked, Hover + radioOuterCircleBackground: t.colors.brandBackgroundHover, radioBorder: t.colors.compoundBrandStroke1Hover, - radioFill: t.colors.compoundBrandBackground1Hover, - color: t.colors.neutralForeground2, + radioFill: t.colors.neutralForegroundOnBrand, + color: t.colors.neutralForeground1, radioVisibility: 1, + radioInnerCircleSize: 10, }, }, pressed: { // Unchecked, Pressed + radioOuterCircleBackground: t.colors.neutralBackground1, radioBorder: t.colors.neutralStrokeAccessiblePressed, color: t.colors.neutralForeground1, selected: { // Checked, Pressed + radioOuterCircleBackground: t.colors.brandBackgroundPressed, radioBorder: t.colors.compoundBrandStroke1Pressed, - radioFill: t.colors.compoundBrandBackground1Pressed, + radioFill: t.colors.neutralForegroundOnBrand, color: t.colors.neutralForeground1, radioVisibility: 1, + radioInnerCircleSize: 6, }, }, @@ -84,9 +92,10 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) selected: { // Checked, Rest + radioOuterCircleBackground: t.colors.brandBackground, radioBorder: t.colors.compoundBrandStroke1, - radioFill: t.colors.compoundBrandStroke1, - color: t.colors.neutralForeground3, + radioFill: t.colors.neutralForegroundOnBrand, + color: t.colors.neutralForeground1, radioVisibility: 1, disabled: { From 23fb6e35069115c542a688bc8819690bdaccbf58 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Tue, 21 Feb 2023 12:26:43 -0500 Subject: [PATCH 13/31] fixed merge conflict: --- apps/fluent-tester/src/theme/applyTheme.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/fluent-tester/src/theme/applyTheme.ts b/apps/fluent-tester/src/theme/applyTheme.ts index f5ee1824c5..1606640379 100644 --- a/apps/fluent-tester/src/theme/applyTheme.ts +++ b/apps/fluent-tester/src/theme/applyTheme.ts @@ -55,13 +55,7 @@ const themingModule = getThemingModule()[0]; export function applyTheme(parent: Theme, name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme { switch (name) { case 'Office': -<<<<<<< HEAD - return themingModule ? createOfficeTheme({ appearance, paletteName: 'LowerRibbon_FluentSV' }).theme : {}; -||||||| f939a999b - return themingModule ? createOfficeTheme({ appearance, paletteName: 'WhiteColors' }).theme : {}; -======= return themingModule ? createOfficeTheme({ appearance, paletteName: 'Dialogs_FluentSV' }).theme : {}; ->>>>>>> 8c7680d94c8ff5ca3d800ba0d1d0a92147e15af4 case 'Caterpillar': return applyCaterpillarTheme(parent); default: From 38c0a22a6e3361627d6009e463bfeeee5bf65384 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 27 Feb 2023 14:14:24 -0500 Subject: [PATCH 14/31] fixed pressed state bug --- packages/experimental/RadioGroup/src/Radio/Radio.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.tsx b/packages/experimental/RadioGroup/src/Radio/Radio.tsx index 3ccb8086f0..392fdb807e 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.tsx +++ b/packages/experimental/RadioGroup/src/Radio/Radio.tsx @@ -41,7 +41,7 @@ export const Radio = compose({ // now return the handler for finishing render return (final: RadioProps) => { const { label, subtext, enableFocusRing, ...mergedProps } = mergeProps(radio.props, final); - const { onPress, disabled } = mergedProps; + const { onPress, disabled, onPressIn, onPressOut } = mergedProps; const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; const labelComponent = ( @@ -53,7 +53,14 @@ export const Radio = compose({ return ( - + {labelComponent} From a9b6b7a0632f536c708925c0e76ef0ddeae70105 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 27 Feb 2023 15:02:36 -0500 Subject: [PATCH 15/31] Change files --- ...native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json diff --git a/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json b/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json new file mode 100644 index 0000000000..937b8a7919 --- /dev/null +++ b/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fixed pressed state bug", + "packageName": "@fluentui-react-native/tester", + "email": "gulnazsayed@microsoft.com", + "dependentChangeType": "patch" +} From 1fe68c0dfd10ca72042bb9bb9769c59bdca4c49e Mon Sep 17 00:00:00 2001 From: Gulnaz Sayed <30990970+gulnazsayed@users.noreply.github.com> Date: Mon, 27 Feb 2023 15:03:21 -0500 Subject: [PATCH 16/31] Update @fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json --- ...eact-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json b/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json index 937b8a7919..10260acbdb 100644 --- a/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json +++ b/change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fixed pressed state bug", + "comment": "polish bug fixes", "packageName": "@fluentui-react-native/tester", "email": "gulnazsayed@microsoft.com", "dependentChangeType": "patch" From 7455dbadfcdf25e2238692069885a005f3c7bae8 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 13 Mar 2023 08:17:31 -0700 Subject: [PATCH 17/31] added dependency for text margin adjustment --- packages/experimental/RadioGroup/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/experimental/RadioGroup/package.json b/packages/experimental/RadioGroup/package.json index a69ab91700..a62591ce77 100644 --- a/packages/experimental/RadioGroup/package.json +++ b/packages/experimental/RadioGroup/package.json @@ -30,6 +30,7 @@ "@fluentui-react-native/focus-zone": ">=0.11.32 <1.0.0", "@fluentui-react-native/framework": "0.9.3", "@fluentui-react-native/interactive-hooks": ">=0.22.20 <1.0.0", + "@fluentui-react-native/styling-utils": ">=0.4.4 <1.0.0", "@fluentui-react-native/text": ">=0.19.22 <1.0.0", "@fluentui-react-native/theme-tokens": ">=0.24.3 <1.0.0", "@fluentui-react-native/tokens": ">=0.20.10 <1.0.0", From 618185840cd75263f1d5e26b0a9747b15617b002 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 13 Mar 2023 10:53:24 -0700 Subject: [PATCH 18/31] fixed padding issue for horizontal --- packages/experimental/RadioGroup/package.json | 1 - packages/experimental/RadioGroup/src/Radio/Radio.styling.ts | 4 +--- .../experimental/RadioGroup/src/Radio/RadioTokens.win32.ts | 2 ++ 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/experimental/RadioGroup/package.json b/packages/experimental/RadioGroup/package.json index a62591ce77..a69ab91700 100644 --- a/packages/experimental/RadioGroup/package.json +++ b/packages/experimental/RadioGroup/package.json @@ -30,7 +30,6 @@ "@fluentui-react-native/focus-zone": ">=0.11.32 <1.0.0", "@fluentui-react-native/framework": "0.9.3", "@fluentui-react-native/interactive-hooks": ">=0.22.20 <1.0.0", - "@fluentui-react-native/styling-utils": ">=0.4.4 <1.0.0", "@fluentui-react-native/text": ">=0.19.22 <1.0.0", "@fluentui-react-native/theme-tokens": ">=0.24.3 <1.0.0", "@fluentui-react-native/tokens": ">=0.20.10 <1.0.0", diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index c73bf2f9a3..5194eeba6b 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -1,8 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { fontStyles, borderStyles } from '@fluentui-react-native/tokens'; -import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; - import type { RadioTokens, RadioSlotProps, RadioProps } from './Radio.types'; import { radioName } from './Radio.types'; import { defaultRadioTokens } from './RadioTokens'; @@ -22,7 +20,6 @@ export const stylingSettings: UseStylingOptions = (t: Theme) alignItems: 'center', labelAlignItems: 'center', labelMarginLeft: globalTokens.size20, + labelMarginVertical: globalTokens.size20, + labelPadding: globalTokens.size20, marginLeft: globalTokens.size60, }, From 1e25a8c0475bd2206e96ae9d739a112f3cb93206 Mon Sep 17 00:00:00 2001 From: Gulnaz Sayed <30990970+gulnazsayed@users.noreply.github.com> Date: Mon, 13 Mar 2023 14:02:48 -0400 Subject: [PATCH 19/31] Update package.json --- packages/experimental/RadioGroup/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/experimental/RadioGroup/package.json b/packages/experimental/RadioGroup/package.json index 0807731cdb..76bb604e89 100644 --- a/packages/experimental/RadioGroup/package.json +++ b/packages/experimental/RadioGroup/package.json @@ -27,12 +27,12 @@ }, "dependencies": { "@fluentui-react-native/adapters": ">=0.10.2 <1.0.0", - "@fluentui-react-native/focus-zone": ">=0.11.32 <1.0.0", - "@fluentui-react-native/framework": "0.9.3", - "@fluentui-react-native/interactive-hooks": ">=0.22.20 <1.0.0", - "@fluentui-react-native/text": ">=0.19.22 <1.0.0", - "@fluentui-react-native/theme-tokens": ">=0.24.3 <1.0.0", - "@fluentui-react-native/tokens": ">=0.20.10 <1.0.0", + "@fluentui-react-native/focus-zone": ">=0.11.36 <1.0.0", + "@fluentui-react-native/framework": "0.9.5", + "@fluentui-react-native/interactive-hooks": ">=0.22.24 <1.0.0", + "@fluentui-react-native/text": ">=0.19.26 <1.0.0", + "@fluentui-react-native/theme-tokens": ">=0.24.4 <1.0.0", + "@fluentui-react-native/tokens": ">=0.20.11 <1.0.0", "@fluentui-react-native/use-styling": ">=0.9.4 <1.0.0", "tslib": "^2.3.1" }, From 818bf1a2d516c88fc597a96a80eb5e3a7cf5a598 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 13 Mar 2023 11:25:28 -0700 Subject: [PATCH 20/31] added empty line --- packages/experimental/RadioGroup/src/Radio/Radio.styling.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index 5194eeba6b..c325f7e337 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -1,6 +1,7 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { fontStyles, borderStyles } from '@fluentui-react-native/tokens'; + import type { RadioTokens, RadioSlotProps, RadioProps } from './Radio.types'; import { radioName } from './Radio.types'; import { defaultRadioTokens } from './RadioTokens'; From f1c900ce1366900c59d047021b869bf40538f641 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 13 Mar 2023 11:31:26 -0700 Subject: [PATCH 21/31] fixed imports and added labelPadding --- .../RadioGroup/src/Radio/RadioTokens.win32.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts index 22e3f03d03..845cf0f57d 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -1,7 +1,8 @@ import { Theme } from '@fluentui-react-native/framework'; -import { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; -import { RadioTokens } from './Radio.types'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => ({ @@ -19,14 +20,15 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) radioOuterCircleSize: 16, radioInnerCircleSize: 8, radioOuterCircleBackground: t.colors.neutralBackground1, - labelMarginVertical: globalTokens.size40, - labelMarginRight: globalTokens.size20, + labelPadding: globalTokens.size20, + labelMarginVertical: globalTokens.size20, + labelMarginRight: globalTokens.sizeNone, labelMarginLeft: globalTokens.sizeNone, subtextVariant: 'caption1', subtextMarginTop: globalTokens.sizeNone, subtextMarginBottom: globalTokens.size40 + 1, marginTop: globalTokens.size60, - marginRight: globalTokens.size60, + marginRight: globalTokens.size40, marginBottom: globalTokens.size60, marginLeft: globalTokens.size40, flexDirection: 'row', @@ -37,9 +39,9 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) flexDirection: 'column', alignItems: 'center', labelAlignItems: 'center', - labelMarginLeft: globalTokens.size20, + labelMarginRight: globalTokens.sizeNone, labelMarginVertical: globalTokens.size20, - labelPadding: globalTokens.size20, + // labelPadding: globalTokens.size20, marginLeft: globalTokens.size60, }, From 544ddd1f1872b7b0aadc366093b24a1e27d88ce9 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Mon, 13 Mar 2023 12:03:44 -0700 Subject: [PATCH 22/31] replaced spec images --- .../assets/controlled_radiogroup.png | Bin 5329 -> 4772 bytes .../RadioGroup/assets/disabled_item.png | Bin 6645 -> 6112 bytes .../RadioGroup/assets/disabled_radiogroup.png | Bin 4222 -> 3830 bytes .../assets/horizontal_radiogroup.png | Bin 4313 -> 3915 bytes .../assets/horizontal_stacked_radiogroup.png | Bin 4685 -> 4459 bytes .../RadioGroup/assets/required_radiogroup.png | Bin 5372 -> 4852 bytes .../RadioGroup/assets/subtext_radiogroup.png | Bin 5520 -> 5423 bytes .../assets/uncontrolled_radiogroup.png | Bin 7157 -> 6520 bytes .../RadioGroup/src/Radio/RadioTokens.win32.ts | 2 +- 9 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental/RadioGroup/assets/controlled_radiogroup.png b/packages/experimental/RadioGroup/assets/controlled_radiogroup.png index 3418c9f06acc922d3893f5ea2bf45702da52926d..f9aba0f269f19e65ef173c3919536cdd49b86d78 100644 GIT binary patch literal 4772 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 literal 5329 zcma)AXHZjHyQV0p7zolqMNpbx5RfKKKsrc~F1;RFsFB_~p`-MoG(iwTZ!xrl8j45= zy%!;%G=Wg$hVy;r&Yk)0+_^v2UVFVWd#}CT@;uMGW3^r>0d6thA|fIJs3^bGADgtxz9?^`&kylL?R{PBO)Q{=s7dF84558e*&r zQkYv>!Cm2=f?#J1g)|$pvd{8^#fXrwvKV%RC=GRsEICQoHjc=%0Dgx5773vWJoPd- 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 diff --git a/packages/experimental/RadioGroup/assets/disabled_item.png b/packages/experimental/RadioGroup/assets/disabled_item.png index bfd5ed664e8d3075e357dc01fd70913e0555d51c..2eb565f70cd4ee12c5fe342d9270af79d4136abe 100644 GIT binary patch literal 6112 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 OplPVQR)#2ANBtKd-_+#* diff --git a/packages/experimental/RadioGroup/assets/disabled_radiogroup.png b/packages/experimental/RadioGroup/assets/disabled_radiogroup.png index 8fdc69944371afb505e997216fb09b8ece27e141..87144b6aa92cca6264ea540ab2588ba291a7d757 100644 GIT binary patch literal 3830 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
Mp#X{x7K8HReN} z_I$qZxCcc#pf2p`SZ8#yVY7c1TtkE}4sZvQl5(iVqZ>us7&wBU#q~5tR<3g!*u*aJ zuq|_^i}Fa82|(qdNb#(!$Mnct2d%+1s+xP3aPIH5VlzDy8fY9Hq>j}auf{)HAr1OD z`_MW^b=d`#OWgvtbFsPmz5H>Bj>XJpvEKc`PvKj*VsKEA!H9TiC#{&F4NH4H^O^%I zt7yKk9k;B_^pOxtmI$MAO@b(*z-_>rHXjsR1cJ3jM;7J;XvI@pWUg zx^Dfu>HD2!Ac$uiZ2w0R8a%iMv}H|_M7u0k$deLz6u3&nWy~qJqAs$?)u_sNUGK76 zyneb$pc+h93{n|t;~qder{s#7t*hAAQ-%N?WUiC_pDGTxyoi4n0EDNXl;!H_>s|N$ zLAuAiu&T{fLrzytQ6x1RU}CxmmfOl4HrIP=ovPW9vIqR%c>QGHa1BK!UWE_$;n}Hn zR}h%~0{&F-U~xSuZ$VII$oe}2H(fx(Msvs^VR|$+K&yS<^nT9l0>$=z*&|9qjuy z3X({j*gk}J;=7))3=VUE6(ZW~y_hM$)%d=uJCu)Ce}-isrn3d;*_Ck5bg+O?jVGR8 zIsv06C37bJ4a>6F%|rkeb$w5#GS}p2f*>&YP;2vGSX3o^op(;P2sc(u=A=-68_Da} z=?G#JVe=d#OXLMw=i??oY$fufShtbxB4<{5I&c&7KC-HDik=OUtxtJ)DPnEupn_>A z=0;zs^wfNTX)zOFzZ&+brKM%^%DEO@T;TVyfAlMif}h{YkbdRhI>HH~ufyCdW`8bq zf!4|~=H>?F6;a?l0DXUfv=jI)g%$<(n51-2{|_1d!!6p65~8eL9WRQISh!#U+!<~) zW^%EiI|RXAOrZ-B@Z@18+`=zP7|zCB^D4<-+P@nl&{++Qt6)f=Mi}<1JiI=6XG&Rv z_UFloy?*Ay9l7MUC*Oc@^nX*qqHpr1bM+!(xIjPeZ@s;s$);8EYh7c&)&+|Ag9apgF#+0+GNV-~n@SVl#eJM0ZHgES&@zw_QkUyRd|6%5 zvatLM?NI8qen7hh+G0vGSe#~`BJIdE(HVkf%9_UT-(-1CI0Z_5)#=TriFztH%4ifu?d?qliFTor3QWvDR%~@#_2l`8OI)VXsxYQ@Saw$3RSDMLN1l@YJMp zk|G$XICANG!$HqOr`$yt*&H1)(Bt}Nr`tfbOoh=K?Ng7aWpmR#5jiN9xg9*PTlJME z_eXUhPjD4dbh+Wwn|WtoaAX7%viNv9&Q~6jg7H4gtbO?DjiZH~A5+J2ebIvIIT=4# zE9Wxt(LV7OO^Sqt@hLoCK}{W0Jnbm|45;*U4RtED9MJy)oX^?K diff --git a/packages/experimental/RadioGroup/assets/horizontal_radiogroup.png b/packages/experimental/RadioGroup/assets/horizontal_radiogroup.png index 74898c198d8530dbcaa9d130866bf8ec7671f49d..91a561089b02a01818b00d0bf64b6d6f02fb5d93 100644 GIT binary patch delta 3902 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 M07*qoM6N<$g89j`O#lD@ literal 4313 zcmZ`-byyQ#)Fvb(q(fQ}L}H^9kdjnV5s(;+l5%v2$Z33cOWtHHkxqCzAe&Lo4;mR(7T**I2l8#v}P4dMw= z?}d6mQxa{cNH+>?%BvJNqj(-XNu{EGZlS^bAco_$hA|DxL;P_Bsuvl&2Sx{y}ZEuT)Fnv)dAx8m+3lbcOh1m70q?Y|hyl^YdB z0lYOg8@4xG8n`hv2X1WN#~P$7ptF{YA`+0dZkMEg)_41k)B*Q-TZ*LpwiKNxH~ltI zV>dse+*wETS72Y;#5HtqFJ{D_i4C@GqYT(PI_9?VZGw}`VhODLbq&R?Bl+%xQG_>- zyxT&oHf7dry1Sr(GVl3L!gkwE);th>hMk38o?DqrYl>V0^mo5X$Nat$!=Hz?(TN#HbtlieQzk|AFdNqdfw!KlSCoL5xNHN`iYGh6LvfdXmr{(t;KJ*w zA&nk1*Z5LZ*h&O5%`2Yu1E(GJU`$6Zq-?91xUQU*)7}(jU%EIyHA)ds#rkFZ9R%Qs zv|q|hKIrdUw^L4bD@`s&@>%?mHIO|y*f@g3ufPL9Ej~p(Qj(IH=U#YJKa~F4RY66c z_gq8}>iGB=+{fb4BKQj?)?^oYur6}C(mx2k&2U|IxlB5AE)m!%cFL*X$*msI-m}Ct zfC49~8b=g+?yacJHfF3W%~cF8rKkfIx9_%1FBPtq?!Zluq0J84F3!$-K7#-^u>H9I zE<6n?I8|c@bl@}1w7F3$l6*HBw&rE&4}eTnrrDv|s&%HCAQs0)6RO{C8dFUHI60E8 z%jrf8X24acE!Q-DG`OY&)UEktO#6?j-d@zv(IN6?u8n_8_IbvaHZ99jKXDc4QgVic4ELWO`DtSfooM;kQ6(}UuXart8Ks9X>EO>Afn4wLI zS+?@C5(mvCpK&9Foc@g4i4cnGKQzz*ck12_|H335UW8L0en^Uu3dCQi`?k>4`*p z7aD4pv}`EGWXfA8{oIdcm@08x?o0Dawvk8>H&<)n@JSoX>*Cksb1{+@gC_+HICVvm zr_(V0f?0s?tg*q*qFT7H{fS}rWA8OsQ&a|?Vi^uuLgU0I+48qO7KVJXoGYgl7p`=-u^f_ATFEpm?iK8u+8LJ4W+Df39zOyD=+}ts~X<@nwv>Gd>@5PD|sS-;-#>D;W zmLK%3P1r?x%O3v||M^&*%=9D@kUiYy*aW1Qj4rGZDW;!f@_)EQ_k*z*45q$oBufhP z+)3v2YaCPFi^)&@6iSk&IHV5!c&&rh4ui<`xQG*shtyej*ggX9(!Gu^wFjl)ptV2D z)ayPeRXH&F?<}}5bfp$P_2DzoVQiB73%Ix}tr}m4MQ3=Zv` zC^OMQA;SvAx1&`|rrNaq)=4l~d~nm)tVd2gaNTT=v{}y9O!HtwN65j@@hSqr=KN$! zMyc39*39hr&(EG4m;rud1VJXN3@)EEVL(~C)>qlKF6%OL3& zg9^K{RIzQrdoJEUB}BwYc_Y#?{H(@sf$)1%%;uHrn(-b{*)H!FB4ulz`EY$x%BA1bqAp+HB zYZgH{F;&8{pNn%E3%9#8Za$*4vk+H1`=iAo zl)%2|U<9;o>{CABWv3P%rOn~wdi@xoW@{soCFE=4L2lv>hMpf_>7EwGwM!myaO9zy z-gzn0cPb&JGZs_6MhXuo+irF!yqFMMIj^=ug9+_7mG6lwa!kbTm6zoUmR?G)hpfs% zrXXKKLYn?O-dz9yjKyzp)6zA5ro8mW` zB~(wg&fQDJ$?e_}s4yV^j>g0L-KiLT=umI0_J7&5rt(D4M4TRONnA?d##pXPtYsMA zzvF3ei={pJ`TSFHdX$w|dbKSyuPIW9e5032XDM!KQYu@>SF$mt@dulzp;)*ju0_Cl zwzf~A4jG&=R${f3JBO}U`tUuinOO=%&(sfDD))hn4g%4Vwu&K~8ryJU7f(@zqQ?*E z_>J3XNneEqLTLJ80aCmTcCTKwdK)lXwe(U+%TZhhA@xb=%L=zr1^I+VWRc=E#r<6E zUgxE!e4pj9_BIJ7uMjmTWSX76bP~b(dWZXo=rb~{Hw-M@mDWxA@2uR6*cRW=#4p7G zlAydYjxj;<{s1r2%WS2QX)v}$I~ehMi{D^)ebNw-$Qv5^(4Gf8L$(pzG7uM9mlcD7 z)_BYUVG$%)M=mP|ZA(s3y8qP^9W;DfKSzG_`T+9=wtTIY8m1%rD_xhFbjkI)+s+4> zubp~)t306v^rirfb$zQ*!{B~PJ-Gp1-PbaX`2*`n2@QoS!LgqwPC+uKPj3>XNBFj(V0~07nPzE~Sj#-qmjNU1yym@%6h1=}T*V$$_3;h7=+x z#;tZURO$mhiwm6Srx4f08>^kT7K`-+ems*Fr>~wct;v7@Ws)neLH23Aa~JfBV%CcX z_ZeF4%a^YCB50uZaafij20kKzh5lnEO&Dkp4un%#rzdmEMSoRej~C*5ZOP2Z#7T8L zVft7v8+zX;RS_^Wc}tLv++wiBcS-yE45z%L?g8XZqR8>$@R#`LnH=E7q|UvI)A@VL z$rv=c!|GX&!4b?)y?-0-Q>q|?8kV63;c?eYm~}cD#=d@;?t7zBmKaUVnC|4zcN5@# zMMNC8C#iP4oI$K4hRw(>s2}n4Br|8(`1lr;?-7SN$?(_KexVp zP>`Jta&dMn`|3ea991-Bz=!mvT8&?3w~mr+C8D9@0`5Dp#ne>8!3^Al0SW`(PeHA3 z1}^&SZzSv9gMXyOq`whR4e1+rW?E`^b%GID@wEca&MEcDPab&9O}GMg?*4=5WFr{g z)zKZoFXmSH+eYJmd4z(?Qg8Avzy7SKH%ZgmK1%2N<0}w`_QzZtOv!nhONR2F4IeD&0D%=RpKQezRQy;CZ%iS zS#pr@Gyf@0xr_5E0%6-|cwr+qk4I#6nbo&EsPz$`ztGB=^jPFc)eIy5ifeF9q^Ck3 zTe%jjVCWEIv;2U+JNG<(2%$ssAFoYRfh l|D&7_|6j^khsnOAjH4c{h`gMMBz;Ga>FF42S8Liw{SP0XgmVA@ diff --git a/packages/experimental/RadioGroup/assets/horizontal_stacked_radiogroup.png b/packages/experimental/RadioGroup/assets/horizontal_stacked_radiogroup.png index 50e2af20134abe82918d897fc59c1b632214ea9d..c6445d9c01b1036dc66849014e2605b52502b404 100644 GIT binary patch literal 4459 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 V7gcd?S6@IRst`@Z5(U%X{{a*%Rp0;s diff --git a/packages/experimental/RadioGroup/assets/required_radiogroup.png b/packages/experimental/RadioGroup/assets/required_radiogroup.png index 9a5de775ccd92d60104fe01865706384ff691db1..b8deefccca6ba405a4795d8fb714aba52b51d9a4 100644 GIT binary patch literal 4852 zcmZ`-XH=6>(gr1dk-KT=}n4&AWcxDiu4W%2n0bo z(t8O-lp+K+?%D6h?zj8nzH{b1bMBov=ef@_b6;s|Dp66gQj(C6P^l=(>k@4>aiv`& zCw~3vMwE$$)LmCemZTiVwn=ozY-BWKNJy#@fajI~qJP~*8SYL(aqFAV^5) zUa82-==qr8bEq5)^xt5qY*?ML$rUv;aShM$29(Cn4^QmSJBFc$q>d*+tZ(bzIk)^a(9Yl9 zn5nC1*vO9w(Odt{aC|q*{$e4NdLRS<-0A07_wVPg^O)-2l3ku7pbo;*r+nE)j8~d= z8~an!(xy*&bJ14pejD!u7!I?XTWvpl{5aSid^I$?yr5=RLu}%FB}MDa*cIWZha)R_1{YTpw5==M|_3UM(3YJOg-PoP1b?V3SzT95#<1K+tL1)He?TQm_vh8*TwXB%m%ox2YQ#pg3rQtnDN+!;P& zUNEYg5q+Ddi>7G-i`v}WodW(?zI?hqx-aT8hW*=8~ z1%>dOl(!F&s)tq9SO=Ch-Ma%}*Xei2bQMQBM~c)OVP}lWBH>AgFAiv*7XefzMn}mc z8>A~BuDeuW>5C2PZ);XFn%Jb#gNyjiv-OKa>7a{qgU$WGJAzLX_Uu2LWo#O8oB_Gd zV%gKKzL9W+qPnt+}wVP|M9fscA=f6-HR8M^vanm zBB;p*p}_MKi+kd+w;zicZ8aa-?aj3tng<~5Nj~U&K-pbu4^Z|y-}hRyu8kVR6*!qs z>a#rYsjLmLB0Njlf?=c#Oc4GH4ed(c0K~dZ_v_vj-D|et>b1>|Gh#C%s}_qN;1;)6 z^PlYa<8V!98}C*kAjZroh`y5pq1|KZFCEVNG{O5sFjJ@< z^sP0U_}?Cx1;xiD`0ceE8!x*2z+e=cZYHyvmw)>3;VTXxS^h%~2MkJMjbehJwU+6Q zjTV0Hbhg&+#E7X2K(4Lfb2`F+y?&|1`V}>* z*YWj#Gw4qjtTT8^IOtqXMm|cIB#Ud+3>}Al8guz*e30d`r=~>P&-FmHwLsRO`Du8W zPjLLyv*xG#|DsC0-e{(hL1>Bq!5} zpif-B*Vqi@73O=e!LMfuHlHlLa&|l2`WSS1AqKWQwB-Wl9wH|zExR0A^F4083UBs3 zL_OYjTkH%k*2;y+I6XHgGqNP7Vnv{E*(@s%)m@bpZtx?IUgKGHF7mHXQPIplfBtar z1}!w1z?=*lrE#(__qA9;y&o=Hl0|`UAWM9x3|@nA+P-4F-08~Ds8;`8sNTRt?p6fB zMWZyL>lq9uA-(!IJ3JQIvKRrfieZNImyo7gpp8_o#Hr`P2tO8d1|1!A?Fi1C} z;geqOLhNtsOw|lVP=R*#vxrR01G!E8Mdjg5q32FSDR~@pNjS!vl$4i$iCfu!VUy_A zz?$mYy1=(GJ#8#v(f*QSmHaCG@>8werJk7QaW(YJ2@%NR*q6T*&-K33-H&M?V??yv z$hajAKr{)JcFKp_(@jONa`1Sk<1sZM1it!eD0D!Q~q)c*}l2bm-4B%i<1t*H|IMY&*id&6g{;%JVFpHeCW0x_@q4gPRXZ0#UNBBl7O7&L=$@BNId$8H^YB|q zqp5`FR_auXzjv7;SKOnJmtnIJkg|eUBUJr^5#d&pJ(*k*Y?i>Sh zp2Vp7X6_Ot?uTP+c>u+%cGDp0q}{) zt^%$#-LX6g4kK6`I5%$Iop~O75_SF-C|@`%q>~Ne!hG6*Oklj-ezMq@n&uF~+_CYu zi}Ui@joJ8wo>iE&ge2dlXd&-ri!rucJ@1IAXS|Q#sj`0uISr$PA6yYM0V?Rk5En6bq8B`u3|OkE2&V^+$?P zFVGM#TH);IFeR6mMD7*1ElL;^WHPm;^h3o%3n41XE8Le$_^!3z<~EGN+ADf2bL`5Z4p^9YoJ2p>6pVK`MZumAP`D?pdIFKeb-o?85@7#!qF0$mxlId$-7eP@(%sm!TL(1?X>ukm()$(u17nAEZ>lc$K{XZ% zjt^+%regCa=S@!-!I`XK?ij~Kg?CI>3z_8l*ljrFHdFftwaW4Hssni8z+XMZ9$Tw2 z_eENJl!`A|kL8a#s)&K6u|E=(d)ozlFQGQ|4Gs$c8O?gNd}PC_`C>abBX{t=*hke0 zuRpjD3cMN`VJ3jKGI=HR%W6T;W(%*qlyp+S*%632%~E{!Jg9T$e8>KfU^XuzeSgcQ z{N9#*@!X_juIq?>o+Wa~xth@pM$~z_CdTMwt-r#*-&w1DtM<@`@SqeRLGDwY?pheJ-=ieMVI1p=?QOCElS-5#EBRaNonVOi}ysNk>zQ zlOXSegl0q^o&Q|v0?(GyL`vO)alN*o;e?64K11PBml!`)C&%l|2KRNbx|7*KenAa) zPtV#Mvw+`YYuD-TLbWm<7M)I3Sq}ox#(99o7mRYUFKWy zp7X`3BzE?t@Z!I?mXwrKQnMT=EOu}!f31J%LZfF`>9IK?CP*vzVOtck>FULAXKz3F zlJsgwD(JEI?v1o*Y~4w(ye3!v`>`eT6)5x64}cM_0y& zq=YEs8f5^kr>BRAxy`b>y^XuK!0@t%!&|O~sXvzZ5bUh_bwJ{<{IJP;PmEhB{)XGg zvOOA+Cw8?K(}4Xa@LvpbZL49Bgg?Jg<7Mz-@4Y!0%`+m_;hR3hEGdCN4ILdFMPch# z6XmA%{*sEZ%(N>g46!OzYzh(7b@WE?r3<>cjQ_7kUy1aix}KOaB(c4) zOJEXHsJB^YJL|>b63RRn;Md{H+z(D=tvHDl^W+k_{;!>PVXVd|d4&p*yIqvtUE+N( zwY+1DKAN&Y5mAl$^J`N^^9l1;twPT8O$m#8wojL=58K~WRSn-9<5dL6{W8tJLR*ku zRyLq#Xhx+NAM)bcTJiGO1f*dnZHiqk4BRCoWG87zjF<$?ltnS-xy!=D~W47``P z9UP6|dlWY~GNKE5WZ1`#lU;jfi$-`GRG2y1U!&R{6P5rHi){+6ttcz|ED$~-e8+Cb z7QJ#(2{wr)&dG4|=j95;M|SKyFn9p8dk81kdXiu32fY$`^R`{j*=oAEaqh`NN9a)` zJ&ZN_yEQGq(uz2ftYdE-@tWFRiQ~_Ar316{N47<~&}dH*7I-&3x5uZD-2yY==9KYp zeSIV=D{I;F&cKr3?p5Vls*sgz-P7OaZgsB97>+SU^qJnlTLy7rU-2HJWYGAgEIgaK yB=NO8tU7-M^!G)l*@gd>!vC0Ap0sCNQWTn9?Ay)MSA7{ literal 5372 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 SQ^5YQ#8FXDmoJes3;YkOC1Do; diff --git a/packages/experimental/RadioGroup/assets/subtext_radiogroup.png b/packages/experimental/RadioGroup/assets/subtext_radiogroup.png index e9af7ec04a4c323478d00cbba77e39b3486fa5d2..e7d79c6d400badc2ab342a3c43030164df387504 100644 GIT binary patch literal 5423 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 diff --git a/packages/experimental/RadioGroup/assets/uncontrolled_radiogroup.png b/packages/experimental/RadioGroup/assets/uncontrolled_radiogroup.png index 56f77ec3db897c83b98b4fcd04c6200073557825..4c68d230218e424e379fd0e6af81c0763cddccbf 100644 GIT binary patch literal 6520 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 literal 7157 zcmaKxbyO5#qsHm(M(L16x>0&zrG=$SWI;frL%La{lw6SRlol!Jr5jNRS-KlRSYU~} ze)s#n^PPL|xqr;enK|#AnRDKEp6B;G6QlcFm6YfK5e5bZsk)kq9{Sje-m(br(EH^= zAz}0Z(^F3sh*2}aw2MB$u~*Vo!oa9cAija%qR$E4)J#1wFv!q%k@aE@x|YAfz<9`@ zuA*e%Yk8RCP(=&M3f07Phv-vU=(>Ztm2eFd=e;ae^i|Z;tzbAxG&~Uj224uspj(P7 zOiEhnSw%Qc?1$W3k(GAZGx6=R}@)7)gP}Eq^L|gBuofHZHYD8Ce#5d%d+1 zLGJB1oG#&*#whwK+7QsXbT%PV`-?`NP+~;PYMdgsOSy+<^K?{5N($i?aeKQKCp0F| zjL@Tr^gV2x9cw%8bbKJ?a?sSb-Gk36K5H3JEq4#oe?Dw+3|3{ft!+hAfJf@w*Pn@n z+yyopHSEkcl(qgIcsS0PAZzW?b?e=B_(5u^u4}VfY*N-HH{{N*631eeSg1X*)$%TZ zRbh$Qv~#0`WDQO)WSM=Hph;rJKjVJ5CV6!%<}h8XfpTwXG0(H`t0%3*Ss(b&fa+Hs z`n?f>vU?Go;=@FNR}&>Z#5pDddBPpI@*w!`%D$P0ktZ+k^X>U$nMI3tD|t<1z*$U6 z7c5mLThxEAqD(6Sk94eIQr_|T(_OA+iR{31f zwr)`EC$CmDOni38aUWpxe&Kty`EmTu?)U1F@M1qzB}|2jIUC94vb^A5maIg(^s;_2 zn_NOb{F(1{uZF2mn)2|2`3CLYcckM(Nt}m3KTlT=R)@0${bvL#P0kBrSKE1cfcD2T zXD6-4ohVVH){E$EDsd{to%mJHpN7VVHFdHs)uK*F z&P^z098;cw^vBYAKSaR+(e^vjC2=VGF-ldY)jP%puifb?x`^9Q^FK&Ue~63h<67x2 z&I>cQnjd`_k|!!_J2Tyv`F#cGPR>qu5v>iVj}NB@KmCrwFD%@DiA+$qdo4%Fj(N3G zvGVa{uzF6&wCL%qpQMS+Zy#qtuZc&WpA6a!Z^4u?^H>I-!d7#p9=OLYrx zUy&UQ-d|{T9njY2Eu7vswr9OsB`bTLlPN94%Fo5*HKk-Xm9KOWk_g91cFUR*38&EgdF~Qwu9>F9z)^NfMCyy**yrUWsh$+$z?VmJPPZ)1=(qrn7|_Ew4?H16AmS$ zJ{aT~S<<$)&1b2z>cNs(1L=VtZS-;PWl1}NZTbYgraA~bT+;g9`Z>p?~ zNQ#Z31o_WMapzy+&71eDm-RM-UnNTBxQy_so-P+(v%cnu6plH&ik7E0IbamCOaHE; zuo#R#I^7ZA!>2+px;37)nDl!^7B*~uveJ{$QyGg(ioYC;a!%cUQEwf2%f0buRXTna zFKRl;gz+`w+QZpEho$z`E40NS%%n|1aIhe@iea7;PX+})TKZSC?$@-99e3TkC`9XE ztrOh-`L5$q?d7#I)pIwIB{g|R1kH+K4Q{zTPg)no(r{3#A~E65)IE!wDJ!QW#lZ=G z`Yc`XWC@FWm6+ZV2bW```&v`&{9?h?{z8lnpf-f-kxTAyS-=R1SFjJuRwfu!Jz(l> z0_gOgbNuPVUoj!ULWWtdH{!(iTJ4}R{=TwrL0V}I1ysB|L?z6MjZM7&Sx;v^1q4FL zg;&)dz@|&W7tTgaG@Qsu&GY<=CIi6}mNJ{cc)K6vV7r~E0&f{kbrk%$rLW+?*#?8` zbGLS0R@g7(JAg;gvkzmq^cGgMn<+Z-?g8)R1Q$B^B6;dXVMK7oA<0*92PrnVI4ME= zH_IXSx8sOb&&4G~v?>QvuPA39HXcb`>~;VLThNntx&Vfw%k03@VIzo&U;j0Bmxo~N zs5?_FEWU4~4m}aJjXUnEAG~VZKd>!$X?(6#PkD4fuhJ4&*J*MhEez!Z3W;>GLC6-h zq4}Go;84#ZMMw)>g*fMpo|4Pr*SDqNt`RKZmy%(!b`LAwM=ibwRdO3^f>KQ!Fct4O|Z(E=G?r;eO=*T3&O zf~4v-b)c=)kl$C=Pns<5Ve_<5fqLEI%V~9)*^KVDYzKL0TA-Z-`b{Cmf}QmQQnV(PcoDYb}iqxvKaT!**-}@i6ZddiwmOyR{ z6X{CXd~xDIgkXZ{9dSmja;?X*vkdlqL8Q()J;Zn=qibP_r^Yyc%z{18;D} z@2F*+Y~ckqrd|F5kWGUk+f>bLaPDQ5uy%}H-WTR`28WDehMhbbdYUj727~OlZ{P&) zU>x2Z0UB-D#S_L{KdYYe)B}< z)=uw*RE`<5li>bTU$(!~5d=b0@^sjoaf|=<8%c z`0|N)M%`Rq&_xFGk4necno{S5CT|R@XT@1hJWH8#l%Ea9VFP1MUU+>2xx|T}O{c+u zp1Q{Gd#Sc}rj?z{x$1?D9S2RM4Q!9I-kwc%Z--E_UH(``?Bcw3yhfqYNMTO$ZoJWM z4{?l0le0k7xPx*yQNEfcAva!eQd$RIgbt8oszA5`f@jFU`ikiQJ0e)k5K@277?s%;$_Z69YpS`zs-E2Ng@4G5fKcSLC!a{D$Q$AbEbcT>sQ zcIU_G%Hv~#8tF2J$mAdHj)qU_Tm-(i>FYN);V-E*PfRBp=-VH$%K`}r)^%HW^-B$i zI{wausF&0H(2Z+8ZMn~2>DG0wYFpzclB>aQTd|>{Q;$J$dXfZk(Tly%Nav8|jDV9@ zKd1?MbR{2euvKenoF|(w?z~nlli_ch)b7a2;`Pac2uc^#KPe7oZbR!_Pp4XYv`wqD zYDj6Oq$jxp#T)ep8#zQ`5M@tkRRpKF~u%}y{o?P__c;VBm>jM$bV2aR*K@Ul8jir02@M2;mK za_v|G7I%#p4(`=sdc_8;6*7C@a>6x)Z&TL7Iow!ix2?T?5L4@dVl?+ke~QdDe(BJ; z51I>q%&yM>1^qDrQC`+4p+D;%BN!$~Mw-JQF zZ!O&>zW$$Vcd3?_R6=>m89yX1_Y)1bdMMBH5Rcx>GbZJm$a1OocyXjAlc z4r=*PCA^?J|k zi9R9&0*0bg@YmUD^X;aCuwnhz{_-oKBSkP`i%N051Lx>(e6%s!Ug){VaQOMj@Ds%_ z{&6@T30dP#gYR!^PxK@%tiB9SRA7IYW;op)C;UoQ87OG_xli&c7O50AFC>P{SK&8# z^<*+npOiQrbcbflLwDc4>+^kksL=!j1&<_lZe{!8TUY*BiM{jYRI{>gjZsAKaG^Ot zHfr7HU=A{hz*p{R9F{w3UJlL(=sv?cjW|ej;EEs1;Fpi{bDvk&?Fhy+PZl4G)C--v!`p^E!amdB z_RP&U(8h|~aU}9sDQE5^%#^Psa zE3O0kMa+XR=5(@m2Y0a+UT5@-T;r^3#`kUxR)-GX5cfRNRp;6DGKuU)_O0Pon4nf1 zJj242czsb_!MFZxA7&m@iGP1b`N>Vo#7up}a75Vm128$DI|UZoH^LSf$*oRIEBP0a zUn?nH)>*W;Blw8#=id>Nnu){=`k6q%P`s9x?!#Y96n{j(%^>VxAWgUz0iT-cBLQA+ zlUM#&#J)<_u8(Uy$ZznnoPq#iBhb^8U^N~7uP}UDBCx~eV`Elc<@*P`$`jjW$q4Kb z#YLT<2=KFa>wmwRp(_TVenV03L1P^FKpe5X!BUg~k2T;+z2F{aWO-7EnHHkF@cC4zWOC4r`N%2v6lODrY*+bM_`01i~KACb*1)d~bt_i~kZ(Wo%e zlsrl_PDghUg#Yd${#WzxFTeU{Is6}pKGZh*m^I~0TOjDrbZ1~(`kB}4mZuz}yOKOo zALhaBYP*s(k6aE}4$hv8k|*d2Y#5QMJ=m6+LzCwG>JC~y9gw^ltw|q6h3_UZB^;{~ z?NMyZmj@}3pNubn?;H(a9vqFL(Hwt{78m>@TeNbX{tUhy0Q`#8dtUrWaWoyMPK)XP zX9uFpGYz1Bq?K; zJC8bQ(=kVU%IJeo#p*`aJL%$NNOKWE=|Bv!zID3`&9%(ru+3>rAqk(ww;!2LDM~c3 ziiSlr%qx_pHm_|VqGU9y=!V=F1i+>Wz{7!k1$M5#q;lyvffJi5mppW7>G5ZSD!h02 zUTSK~@RxxHRfGq2{rhIO`Rh&Xw_Tc_dy$OHz<(8ot5Q z{{20pSe5l>`By`UbK!DMbHV{+BQ*vJF>=^KKa!0yd)Y{7IM8JP4*!B;*Fg%VJ1)OK zwFLq95;i2@{HO8wNGhLmj@3$c*o8DKl$(Txh1RybU>zf zr7KInP1F zjaok;`jZtK@t)#2?l0BpVS5wbb~1J<0UM30zrBr+VswP94zX)~(WCy80uS|QF?7|5 zS|f#6uPQ9e(SNBkuqITdu!NVR`D4P&8vGzrEKFSr-p%R8uMrJQB*W5rx41U3ufTs!H&$)V=1|nGp+B4FY zSrkkb4dWt;VizF;B?Bjm>{qGug4aj?*Db8y&q++5H!bKA% zxE!nJf=@~o zkRtd{y#I8b=Pa2!Cta5JKY-d2l3e(M>tCWnXLCos&;7X+Baw|A{o@Qn9rRqK251%j zii=7S(9Rmp2PK~@lhNl-i+FNes*~r!YR?M*OsQ_9ih`aUrLi9MjqbOZ&>fYZz2hi? z{J~$FD9R<=bK#wTRLKE`ovIBSr4_<_47g&c!eUjx9J)yW4Zy&SLVk12V`(^Z?SDS; FzW{h_-3tH! diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts index 845cf0f57d..e7564b9f0a 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -1,4 +1,4 @@ -import { Theme } from '@fluentui-react-native/framework'; +import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; From 72aa473b078797172ff262c83325fb3c753f443e Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 11:34:52 -0700 Subject: [PATCH 23/31] fixed focus border and spacing --- .../experimental/RadioGroup/src/Radio/Radio.styling.ts | 10 +++++----- .../RadioGroup/src/Radio/RadioTokens.win32.ts | 7 ++++--- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index c325f7e337..62e622f77d 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -13,18 +13,17 @@ export const stylingSettings: UseStylingOptions ({ + (tokens: RadioTokens) => ({ style: { display: 'flex', alignItems: tokens.alignItems, flexDirection: tokens.flexDirection, paddingHorizontal: tokens.rootHorizontalPadding, paddingVertical: tokens.rootVerticalPadding, - ...borderStyles.from(tokens, theme), }, android_ripple: { color: tokens.rippleColor }, }), - ['flexDirection', 'rootHorizontalPadding', 'rootVerticalPadding', 'rippleColor', 'alignItems', ...borderStyles.keys], + ['flexDirection', 'rootHorizontalPadding', 'rootVerticalPadding', 'rippleColor', 'alignItems'], ), button: buildProps( (tokens: RadioTokens) => ({ @@ -72,7 +71,7 @@ export const stylingSettings: UseStylingOptions ({ + (tokens: RadioTokens, theme: Theme) => ({ style: { alignItems: tokens.labelAlignItems, flexDirection: 'column', @@ -80,9 +79,10 @@ export const stylingSettings: UseStylingOptions ({ diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts index e7564b9f0a..d15fdbcca2 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -9,7 +9,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) rootHorizontalPadding: globalTokens.size40, borderColor: t.colors.background, borderStyle: 'solid', - borderWidth: globalTokens.stroke.width10, + borderWidth: globalTokens.stroke.width20, borderRadius: globalTokens.corner.radius40, radioBorderWidth: globalTokens.stroke.width10, radioVisibility: 0, @@ -20,7 +20,6 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) radioOuterCircleSize: 16, radioInnerCircleSize: 8, radioOuterCircleBackground: t.colors.neutralBackground1, - labelPadding: globalTokens.size20, labelMarginVertical: globalTokens.size20, labelMarginRight: globalTokens.sizeNone, labelMarginLeft: globalTokens.sizeNone, @@ -41,8 +40,9 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) labelAlignItems: 'center', labelMarginRight: globalTokens.sizeNone, labelMarginVertical: globalTokens.size20, - // labelPadding: globalTokens.size20, + labelPadding: globalTokens.size20, marginLeft: globalTokens.size60, + marginRight: globalTokens.size60, }, disabled: { @@ -88,6 +88,7 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) }, focused: { + borderColor: t.colors.strokeFocus2, selected: { // Checked, Focused radioVisibility: 1, From 0c25f331d10e6c2ba834ec7f5909f9442f7aedbe Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 11:43:08 -0700 Subject: [PATCH 24/31] removed enableFocusRing --- packages/experimental/RadioGroup/src/Radio/Radio.tsx | 4 ++-- packages/experimental/RadioGroup/src/Radio/Radio.types.ts | 6 ------ 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.tsx b/packages/experimental/RadioGroup/src/Radio/Radio.tsx index 392fdb807e..6c38fdd1c3 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.tsx +++ b/packages/experimental/RadioGroup/src/Radio/Radio.tsx @@ -40,12 +40,12 @@ export const Radio = compose({ // now return the handler for finishing render return (final: RadioProps) => { - const { label, subtext, enableFocusRing, ...mergedProps } = mergeProps(radio.props, final); + const { label, subtext, ...mergedProps } = mergeProps(radio.props, final); const { onPress, disabled, onPressIn, onPressOut } = mergedProps; const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; const labelComponent = ( - + {label} {!!subtext && {subtext}} diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts index a13602f5eb..aa59fa92b4 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts @@ -204,12 +204,6 @@ export interface RadioProps extends PressablePropsExtended { * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. */ componentRef?: React.RefObject; - - /** - * Whether to use native focus visuals for the component - * @default true - */ - enableFocusRing?: boolean; } export interface RadioInfo { From 950103cfa770ddac29fb06f603c4bdc3b325fc0f Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 11:43:16 -0700 Subject: [PATCH 25/31] updated spec --- packages/experimental/RadioGroup/SPEC.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/experimental/RadioGroup/SPEC.md b/packages/experimental/RadioGroup/SPEC.md index 5da4632a74..8f85ff52ac 100644 --- a/packages/experimental/RadioGroup/SPEC.md +++ b/packages/experimental/RadioGroup/SPEC.md @@ -333,12 +333,6 @@ export interface RadioProps extends PressablePropsExtended { * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. */ componentRef?: React.RefObject; - - /** - * Whether to use native focus visuals for the component - * @default true - */ - enableFocusRing?: boolean; } ``` From 0770e34777ef9a9b5841803e793a7bfee34a1ac5 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 12:42:22 -0700 Subject: [PATCH 26/31] updated snapshots and removed enableFocusRing from useRadio --- .../RadioExperimental.test.tsx.snap | 64 +-- .../RadioGroup/src/Radio/useRadio.ts | 2 - .../RadioGroupExperimental.test.tsx.snap | 398 ++++++++++-------- 3 files changed, 245 insertions(+), 219 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap b/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap index 4da94d4dbc..1b71180024 100644 --- a/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap +++ b/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap @@ -56,10 +56,6 @@ exports[`Radio component tests Radio default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -87,18 +83,18 @@ exports[`Radio component tests Radio default 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -106,10 +102,10 @@ exports[`Radio component tests Radio default 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -118,10 +114,15 @@ exports[`Radio component tests Radio default 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -131,12 +132,13 @@ exports[`Radio component tests Radio default 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -202,10 +204,6 @@ exports[`Radio component tests Radio disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -238,18 +236,18 @@ exports[`Radio component tests Radio disabled 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "#bdbdbd", - "borderRadius": 10, + "backgroundColor": "#f0f0f0", + "borderColor": "#e0e0e0", + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -257,10 +255,10 @@ exports[`Radio component tests Radio disabled 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -269,10 +267,15 @@ exports[`Radio component tests Radio disabled 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -287,7 +290,8 @@ exports[`Radio component tests Radio disabled 1`] = ` "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > diff --git a/packages/experimental/RadioGroup/src/Radio/useRadio.ts b/packages/experimental/RadioGroup/src/Radio/useRadio.ts index d2bf91ed54..693aab80d8 100644 --- a/packages/experimental/RadioGroup/src/Radio/useRadio.ts +++ b/packages/experimental/RadioGroup/src/Radio/useRadio.ts @@ -28,7 +28,6 @@ export const useRadio = (props: RadioProps): RadioInfo => { componentRef = defaultComponentRef, accessibilityPositionInSet, accessibilitySetSize, - enableFocusRing, ...rest } = props; @@ -105,7 +104,6 @@ export const useRadio = (props: RadioProps): RadioInfo => { accessibilitySetSize: accessibilitySetSize ?? radioGroupContext.values.length, focusable: !state.disabled, disabled: isDisabled, - enableFocusRing: enableFocusRing ?? true, onAccessibilityAction: onAccessibilityAction, }, state: state, diff --git a/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap b/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap index a19c673916..437364951f 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap +++ b/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap @@ -115,10 +115,6 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -146,18 +142,18 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -165,10 +161,10 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -177,10 +173,15 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -190,12 +191,13 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -258,10 +260,6 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -289,29 +287,29 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#0078d4", "borderColor": "#0078d4", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -320,10 +318,15 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -333,12 +336,13 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -466,10 +470,6 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -497,18 +497,18 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -516,10 +516,10 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -528,10 +528,15 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -541,12 +546,13 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -609,10 +615,6 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -640,29 +642,29 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#0078d4", "borderColor": "#0078d4", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -671,10 +673,15 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -684,12 +691,13 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -817,10 +825,6 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -853,18 +857,18 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "#bdbdbd", - "borderRadius": 10, + "backgroundColor": "#f0f0f0", + "borderColor": "#e0e0e0", + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -872,10 +876,10 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -884,10 +888,15 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -902,7 +911,8 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -965,10 +975,6 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -1001,18 +1007,18 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", - "borderColor": "#bdbdbd", - "borderRadius": 10, + "backgroundColor": "#f0f0f0", + "borderColor": "#e0e0e0", + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1020,10 +1026,10 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -1032,10 +1038,15 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -1050,7 +1061,8 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -1179,10 +1191,6 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -1210,18 +1218,18 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1229,10 +1237,10 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -1241,10 +1249,15 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -1254,12 +1267,13 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -1322,10 +1336,6 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -1353,29 +1363,29 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#0078d4", "borderColor": "#0078d4", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1384,10 +1394,15 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -1397,12 +1412,13 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -1531,10 +1547,6 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "column", "paddingHorizontal": 4, @@ -1562,18 +1574,18 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 6, "marginRight": 6, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1581,10 +1593,10 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -1593,10 +1605,15 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", - "marginLeft": 2, - "marginRight": 2, - "padding": undefined, + "marginLeft": 0, + "marginRight": 0, + "padding": 2, + "paddingRight": 0, } } > @@ -1606,12 +1623,13 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -1674,10 +1692,6 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "column", "paddingHorizontal": 4, @@ -1705,29 +1719,29 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#0078d4", "borderColor": "#0078d4", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 6, "marginRight": 6, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1736,10 +1750,15 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", - "marginLeft": 2, - "marginRight": 2, - "padding": undefined, + "marginLeft": 0, + "marginRight": 0, + "padding": 2, + "paddingRight": 0, } } > @@ -1749,12 +1768,13 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -1899,10 +1919,6 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -1930,18 +1946,18 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#ffffff", "borderColor": "#616161", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -1949,10 +1965,10 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "backgroundColor": undefined, - "borderRadius": 5, - "height": 10, + "borderRadius": 4, + "height": 8, "opacity": 0, - "width": 10, + "width": 8, } } /> @@ -1961,10 +1977,15 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -1974,12 +1995,13 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > @@ -2042,10 +2064,6 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "transparent", - "borderRadius": 4, - "borderStyle": "solid", - "borderWidth": 1, "display": "flex", "flexDirection": "row", "paddingHorizontal": 4, @@ -2073,29 +2091,29 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "transparent", + "backgroundColor": "#0078d4", "borderColor": "#0078d4", - "borderRadius": 10, + "borderRadius": 8, "borderStyle": "solid", "borderWidth": 1, - "height": 20, + "height": 16, "justifyContent": "center", "marginBottom": 6, "marginLeft": 4, - "marginRight": 6, + "marginRight": 4, "marginTop": 6, - "width": 20, + "width": 16, } } > @@ -2104,10 +2122,15 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", + "borderColor": "#ffffff", + "borderRadius": 4, + "borderStyle": "solid", + "borderWidth": 2, "flexDirection": "column", "marginLeft": 0, - "marginRight": 2, + "marginRight": 0, "padding": undefined, + "paddingRight": 0, } } > @@ -2117,12 +2140,13 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` onAccessibilityTap={[Function]} style={ Object { - "color": "#616161", + "color": "#242424", "fontFamily": "Segoe UI", "fontSize": 16, "fontWeight": "400", "margin": 0, - "marginTop": 5, + "marginHorizontal": 2, + "marginVertical": 2, } } > From a2dd41f239b6308e0e680e04a6fd95731b767a35 Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 12:43:19 -0700 Subject: [PATCH 27/31] removed enableFocusRing from win32 useRadio --- packages/experimental/RadioGroup/src/Radio/useRadio.ts | 2 ++ packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/useRadio.ts b/packages/experimental/RadioGroup/src/Radio/useRadio.ts index 693aab80d8..d2bf91ed54 100644 --- a/packages/experimental/RadioGroup/src/Radio/useRadio.ts +++ b/packages/experimental/RadioGroup/src/Radio/useRadio.ts @@ -28,6 +28,7 @@ export const useRadio = (props: RadioProps): RadioInfo => { componentRef = defaultComponentRef, accessibilityPositionInSet, accessibilitySetSize, + enableFocusRing, ...rest } = props; @@ -104,6 +105,7 @@ export const useRadio = (props: RadioProps): RadioInfo => { accessibilitySetSize: accessibilitySetSize ?? radioGroupContext.values.length, focusable: !state.disabled, disabled: isDisabled, + enableFocusRing: enableFocusRing ?? true, onAccessibilityAction: onAccessibilityAction, }, state: state, diff --git a/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts b/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts index d9f52b99a2..6b53859ae8 100644 --- a/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts @@ -37,7 +37,6 @@ export const useRadio = (props: RadioProps): RadioInfo => { componentRef = defaultComponentRef, accessibilityPositionInSet, accessibilitySetSize, - enableFocusRing, ...rest } = props; @@ -170,7 +169,6 @@ export const useRadio = (props: RadioProps): RadioInfo => { accessibilitySetSize: accessibilitySetSize ?? radioGroupContext.values.length, focusable: !state.disabled, disabled: isDisabled, - enableFocusRing: enableFocusRing ?? true, onAccessibilityAction: onAccessibilityAction, ...onKeyDownProps, }, From 2948cf1e47b398850990af61a5b3cc633e996eaf Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Thu, 16 Mar 2023 12:45:06 -0700 Subject: [PATCH 28/31] added enableFocusRing prop from other platforms --- packages/experimental/RadioGroup/src/Radio/Radio.types.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts index aa59fa92b4..a13602f5eb 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts @@ -204,6 +204,12 @@ export interface RadioProps extends PressablePropsExtended { * A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. */ componentRef?: React.RefObject; + + /** + * Whether to use native focus visuals for the component + * @default true + */ + enableFocusRing?: boolean; } export interface RadioInfo { From e0fa2ae7d10c0d10871ee234409640f2e654d99a Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Tue, 21 Mar 2023 10:07:04 -0700 Subject: [PATCH 29/31] reverted back to transparentStroke token --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 2 +- packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 3f3bacb337..84d338b072 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -7,7 +7,7 @@ import type { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => ({ rootHorizontalPadding: globalTokens.size40, - borderColor: t.colors.background, + borderColor: t.colors.transparentStroke, borderStyle: 'solid', borderWidth: globalTokens.stroke.width10, borderRadius: globalTokens.corner.radius40, diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts index d15fdbcca2..662d8b2bec 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -7,7 +7,7 @@ import type { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => ({ rootHorizontalPadding: globalTokens.size40, - borderColor: t.colors.background, + borderColor: t.colors.transparentStroke, borderStyle: 'solid', borderWidth: globalTokens.stroke.width20, borderRadius: globalTokens.corner.radius40, From 6a779d930a008aac43cf5f840f71e558a3a8b53b Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Tue, 21 Mar 2023 10:41:11 -0700 Subject: [PATCH 30/31] added tokens for radio size --- packages/experimental/RadioGroup/src/Radio/RadioTokens.ts | 4 ++-- .../experimental/RadioGroup/src/Radio/RadioTokens.win32.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 84d338b072..7775be09fa 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -17,8 +17,8 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) radioBorderStyle: 'solid', radioBorder: t.colors.neutralStrokeAccessible, color: t.colors.neutralForeground3, - radioOuterCircleSize: 20, - radioInnerCircleSize: 10, + radioOuterCircleSize: globalTokens.size200, + radioInnerCircleSize: globalTokens.size100, labelMarginVertical: globalTokens.size40, labelMarginRight: globalTokens.size20, labelMarginLeft: globalTokens.sizeNone, diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts index 662d8b2bec..f5a899eec4 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts @@ -17,8 +17,8 @@ export const defaultRadioTokens: TokenSettings = (t: Theme) radioBorderStyle: 'solid', radioBorder: t.colors.neutralStrokeAccessible, color: t.colors.neutralForeground1, - radioOuterCircleSize: 16, - radioInnerCircleSize: 8, + radioOuterCircleSize: globalTokens.size160, + radioInnerCircleSize: globalTokens.size80, radioOuterCircleBackground: t.colors.neutralBackground1, labelMarginVertical: globalTokens.size20, labelMarginRight: globalTokens.sizeNone, From f06377a048e3611be2bcd9189115b990a126cb8f Mon Sep 17 00:00:00 2001 From: "REDMOND\\gulnazsayed" Date: Tue, 21 Mar 2023 10:50:28 -0700 Subject: [PATCH 31/31] updated snapshots --- .../RadioExperimental.test.tsx.snap | 6 ++-- .../RadioGroupExperimental.test.tsx.snap | 36 +++++++------------ 2 files changed, 14 insertions(+), 28 deletions(-) diff --git a/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap b/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap index 1b71180024..3a9a3b7713 100644 --- a/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap +++ b/packages/experimental/RadioGroup/src/Radio/__snapshots__/RadioExperimental.test.tsx.snap @@ -20,7 +20,6 @@ exports[`Radio component tests Radio default 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -114,7 +113,7 @@ exports[`Radio component tests Radio default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -168,7 +167,6 @@ exports[`Radio component tests Radio disabled 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={false} keyDownEvents={ Array [ @@ -267,7 +265,7 @@ exports[`Radio component tests Radio disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, diff --git a/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap b/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap index 437364951f..e4acea8aba 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap +++ b/packages/experimental/RadioGroup/src/RadioGroup/__snapshots__/RadioGroupExperimental.test.tsx.snap @@ -79,7 +79,6 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -173,7 +172,7 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -224,7 +223,6 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -318,7 +316,7 @@ exports[`RadioGroup component tests Radio not direct child of radio group 1`] = style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -434,7 +432,6 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -528,7 +525,7 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -579,7 +576,6 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -673,7 +669,7 @@ exports[`RadioGroup component tests RadioGroup default 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -789,7 +785,6 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={false} keyDownEvents={ Array [ @@ -888,7 +883,7 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -939,7 +934,6 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={false} keyDownEvents={ Array [ @@ -1038,7 +1032,7 @@ exports[`RadioGroup component tests RadioGroup disabled 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -1155,7 +1149,6 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -1249,7 +1242,7 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -1300,7 +1293,6 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -1394,7 +1386,7 @@ exports[`RadioGroup component tests RadioGroup horizontal 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -1511,7 +1503,6 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -1605,7 +1596,7 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -1656,7 +1647,6 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -1750,7 +1740,7 @@ exports[`RadioGroup component tests RadioGroup horizontal-stacked 1`] = ` style={ Object { "alignItems": "center", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -1883,7 +1873,6 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -1977,7 +1966,7 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2, @@ -2028,7 +2017,6 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` } } accessible={true} - enableFocusRing={true} focusable={true} keyDownEvents={ Array [ @@ -2122,7 +2110,7 @@ exports[`RadioGroup component tests RadioGroup required 1`] = ` style={ Object { "alignItems": "flex-start", - "borderColor": "#ffffff", + "borderColor": "transparent", "borderRadius": 4, "borderStyle": "solid", "borderWidth": 2,