RadioGroup Style Fixes

apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx

@@ -38,7 +38,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => {
   const [marginRight, setMarginRight] = React.useState<number>(6);
   const [marginBottom, setMarginBottom] = React.useState<number>(6);
   const [marginLeft, setMarginLeft] = React.useState<number>(4);
-  const [labelMarginTop, setLabelMarginTop] = React.useState<number>(5);
+  const [labelMarginVertical, setLabelMarginVertical] = React.useState<number>(4);
   const [labelMarginRight, setLabelMarginRight] = React.useState<number>(2);
   const [labelMarginLeft, setLabelMarginLeft] = React.useState<number>(0);
   const [subtextMarginTop, setSubtextMarginTop] = React.useState<number>(2);
@@ -71,7 +71,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => {
       marginRight,
       marginBottom,
       marginLeft,
-      labelMarginTop,
+      labelMarginVertical,
       labelMarginRight,
       labelMarginLeft,
       subtextMarginTop,
@@ -138,7 +138,7 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => {
     marginRight,
     marginBottom,
     marginLeft,
-    labelMarginTop,
+    labelMarginVertical,
     labelMarginRight,
     labelMarginLeft,
     subtextMarginTop,
@@ -315,12 +315,12 @@ export const CustomizedRadioGroup: React.FunctionComponent = () => {
             }}
           />
           <TextInput
-            accessibilityLabel="Radio label margin top"
+            accessibilityLabel="Radio label margin vertical"
             style={commonStyles.textBox}
-            placeholder="marginTop"
+            placeholder="marginVertical"
             blurOnSubmit={true}
             onSubmitEditing={(e) => {
-              setLabelMarginTop(parseInt(e.nativeEvent.text.toString()));
+              setLabelMarginVertical(parseInt(e.nativeEvent.text.toString()));
             }}
           />
           <TextInput

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"
+}

change/@fluentui-react-native-tester-40bf90bc-8cef-42c0-9e71-e0f8601e330b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "polish bug fixes",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "gulnazsayed@microsoft.com",
+  "dependentChangeType": "patch"
+}

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<IFocusable>;
-
-  /**
-   * Whether to use native focus visuals for the component
-   * @default true
-   */
-  enableFocusRing?: boolean;
 }
 ```
 

packages/experimental/RadioGroup/src/Radio/Radio.styling.ts

@@ -13,23 +13,22 @@ export const stylingSettings: UseStylingOptions<RadioProps, RadioSlotProps, Radi
   states: radioStates,
   slotProps: {
     root: buildProps(
-      (tokens: RadioTokens, theme: Theme) => ({
+      (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) => ({
         style: {
-          backgroundColor: 'transparent',
+          backgroundColor: tokens.radioOuterCircleBackground,
           width: tokens.radioOuterCircleSize,
           height: tokens.radioOuterCircleSize,
           alignItems: 'center',
@@ -46,6 +45,7 @@ export const stylingSettings: UseStylingOptions<RadioProps, RadioSlotProps, Radi
         android_ripple: { color: tokens.rippleColor, radius: tokens.rippleRadius, borderless: true },
       }),
       [
+        'radioOuterCircleBackground',
         'radioBorderWidth',
         'radioBorderStyle',
         'radioOuterCircleSize',
@@ -71,34 +71,38 @@ export const stylingSettings: UseStylingOptions<RadioProps, RadioSlotProps, Radi
       ['radioInnerCircleSize', 'radioVisibility', 'radioFill'],
     ),
     labelContent: buildProps(
-      (tokens: RadioTokens) => ({
+      (tokens: RadioTokens, theme: Theme) => ({
         style: {
           alignItems: tokens.labelAlignItems,
           flexDirection: 'column',
           marginRight: tokens.labelMarginRight,
           marginLeft: tokens.labelMarginLeft,
           padding: tokens.labelPadding,
+          paddingRight: 0,
+          ...borderStyles.from(tokens, theme),
         },
       }),
-      ['labelAlignItems', 'labelMarginRight', 'labelMarginLeft', 'labelPadding'],
+      ['labelAlignItems', 'labelMarginRight', 'labelMarginLeft', 'labelPadding', ...borderStyles.keys],
     ),
     label: buildProps(
       (tokens: RadioTokens, theme: Theme) => ({
         variant: tokens.variant,
         style: {
-          marginTop: tokens.labelMarginTop,
+          marginVertical: tokens.labelMarginVertical,
+          marginHorizontal: 2,
           color: tokens.color,
           ...fontStyles.from(tokens, theme),
         },
       }),
-      ['variant', 'labelMarginTop', 'color', ...fontStyles.keys],
+      ['variant', 'labelMarginVertical', 'color', ...fontStyles.keys],
     ),
     subtext: buildProps(
       (tokens: RadioTokens) => ({
         variant: tokens.subtextVariant,
         style: {
           marginTop: tokens.subtextMarginTop,
           marginBottom: tokens.subtextMarginBottom,
+          marginHorizontal: 2,
           color: tokens.color,
         },
       }),

packages/experimental/RadioGroup/src/Radio/Radio.tsx

@@ -41,7 +41,7 @@ export const Radio = compose<RadioType>({
     // now return the handler for finishing render
     return (final: RadioProps) => {
       const { label, subtext, ...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<RadioType>({
 
       return (
         <Slots.root {...mergedProps} {...(isMobile && { accessible: !disabled, focusable: !disabled })}>
-          <Slots.button accessible={false} onPress={onPress} disabled={disabled} focusable={false}>
+          <Slots.button
+            accessible={false}
+            onPress={onPress}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            disabled={disabled}
+            focusable={false}
+          >
             <Slots.innerCircle />
           </Slots.button>
           {labelComponent}

packages/experimental/RadioGroup/src/Radio/Radio.types.ts

@@ -60,6 +60,11 @@ export interface RadioTokens extends FontTokens, IColorTokens, IForegroundColorT
    */
   radioBorderWidth?: number;
 
+  /**
+   * Background color of outer circle
+   */
+  radioOuterCircleBackground?: ColorValue;
+
   /**
    * The flex direction of the root
    */
@@ -98,7 +103,7 @@ export interface RadioTokens extends FontTokens, IColorTokens, IForegroundColorT
   /**
    * Label's top margin.
    */
-  labelMarginTop?: ViewStyle['marginTop'];
+  labelMarginVertical?: ViewStyle['marginVertical'];
 
   /**
    * Label's right margin.

packages/experimental/RadioGroup/src/Radio/RadioTokens.ts

@@ -17,14 +17,14 @@ export const defaultRadioTokens: TokenSettings<RadioTokens, Theme> = (t: Theme)
     radioBorderStyle: 'solid',
     radioBorder: t.colors.neutralStrokeAccessible,
     color: t.colors.neutralForeground3,
-    radioOuterCircleSize: 20,
-    radioInnerCircleSize: 10,
-    labelMarginTop: globalTokens.size40 + 1,
+    radioOuterCircleSize: globalTokens.size200,
+    radioInnerCircleSize: globalTokens.size100,
+    labelMarginVertical: globalTokens.size40,
     labelMarginRight: globalTokens.size20,
     labelMarginLeft: globalTokens.sizeNone,
     subtextVariant: 'caption1',
-    subtextMarginTop: globalTokens.size20,
-    subtextMarginBottom: globalTokens.size20,
+    subtextMarginTop: globalTokens.sizeNone,
+    subtextMarginBottom: globalTokens.size40 + 1,
     marginTop: globalTokens.size60,
     marginRight: globalTokens.size60,
     marginBottom: globalTokens.size60,
@@ -77,8 +77,6 @@ export const defaultRadioTokens: TokenSettings<RadioTokens, Theme> = (t: Theme)
     },
 
     focused: {
-      borderColor: t.colors.focusBorder,
-
       selected: {
         // Checked, Focused
         radioVisibility: 1,

packages/experimental/RadioGroup/src/Radio/RadioTokens.win32.ts

@@ -0,0 +1,111 @@
+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';
+
+import type { RadioTokens } from './Radio.types';
+
+export const defaultRadioTokens: TokenSettings<RadioTokens, Theme> = (t: Theme) =>
+  ({
+    rootHorizontalPadding: globalTokens.size40,
+    borderColor: t.colors.transparentStroke,
+    borderStyle: 'solid',
+    borderWidth: globalTokens.stroke.width20,
+    borderRadius: globalTokens.corner.radius40,
+    radioBorderWidth: globalTokens.stroke.width10,
+    radioVisibility: 0,
+    variant: 'subheaderStandard',
+    radioBorderStyle: 'solid',
+    radioBorder: t.colors.neutralStrokeAccessible,
+    color: t.colors.neutralForeground1,
+    radioOuterCircleSize: globalTokens.size160,
+    radioInnerCircleSize: globalTokens.size80,
+    radioOuterCircleBackground: t.colors.neutralBackground1,
+    labelMarginVertical: globalTokens.size20,
+    labelMarginRight: globalTokens.sizeNone,
+    labelMarginLeft: globalTokens.sizeNone,
+    subtextVariant: 'caption1',
+    subtextMarginTop: globalTokens.sizeNone,
+    subtextMarginBottom: globalTokens.size40 + 1,
+    marginTop: globalTokens.size60,
+    marginRight: globalTokens.size40,
+    marginBottom: globalTokens.size60,
+    marginLeft: globalTokens.size40,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    labelAlignItems: 'flex-start',
+
+    labelPositionBelow: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      labelAlignItems: 'center',
+      labelMarginRight: globalTokens.sizeNone,
+      labelMarginVertical: globalTokens.size20,
+      labelPadding: globalTokens.size20,
+      marginLeft: globalTokens.size60,
+      marginRight: globalTokens.size60,
+    },
+
+    disabled: {
+      // Unchecked, Disabled
+      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.neutralForeground1,
+
+      selected: {
+        // Checked, Hover
+        radioOuterCircleBackground: t.colors.brandBackgroundHover,
+        radioBorder: t.colors.compoundBrandStroke1Hover,
+        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.neutralForegroundOnBrand,
+        color: t.colors.neutralForeground1,
+        radioVisibility: 1,
+        radioInnerCircleSize: 6,
+      },
+    },
+
+    focused: {
+      borderColor: t.colors.strokeFocus2,
+      selected: {
+        // Checked, Focused
+        radioVisibility: 1,
+      },
+    },
+
+    selected: {
+      // Checked, Rest
+      radioOuterCircleBackground: t.colors.brandBackground,
+      radioBorder: t.colors.compoundBrandStroke1,
+      radioFill: t.colors.neutralForegroundOnBrand,
+      color: t.colors.neutralForeground1,
+      radioVisibility: 1,
+
+      disabled: {
+        // Checked, Disabled
+        radioFill: t.colors.neutralForegroundDisabled,
+      },
+    },
+  } as RadioTokens);