Cherry picked from 7.0 branch: reducing ChoiceGroup radio button to 1…

…8px (#22230)
microsoft · Mar 29, 2022 · 7562094 · 7562094
1 parent f2ce28f
commit 7562094
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/change/@fluentui-azure-themes-e723c0d2-b2be-4910-97f8-61da88c187ef.json b/change/@fluentui-azure-themes-e723c0d2-b2be-4910-97f8-61da88c187ef.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Cherry picked from 7.0 branch: reducing choicegroup radio button to 18px from 20px",
+  "packageName": "@fluentui/azure-themes",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/azure-themes/src/azure/Constants.ts b/packages/azure-themes/src/azure/Constants.ts
@@ -18,6 +18,7 @@ export const fontFamily =
 export const fontWeightRegular = '400';
 export const fontWeightBold = '700';
 export const inputControlHeight = '24px';
+export const choiceGroupDimensions = '18px';
 export const inputControlPadding = '12px';
 export const inputControlHeightInner = '20px';
 export const textAlignCenter = 'center';

diff --git a/packages/azure-themes/src/azure/styles/ChoiceGroupOptions.styles.ts b/packages/azure-themes/src/azure/styles/ChoiceGroupOptions.styles.ts
@@ -37,6 +37,8 @@ export const ChoiceGroupOptionStyles = (props: IChoiceGroupOptionStyleProps): Pa
           // The circle
           ':before': [
             {
+              width: StyleConstants.choiceGroupDimensions,
+              height: StyleConstants.choiceGroupDimensions,
               borderColor: semanticColors.bodyText,
             },
             checked && {
@@ -57,6 +59,8 @@ export const ChoiceGroupOptionStyles = (props: IChoiceGroupOptionStyleProps): Pa
           ':after': [
             {
               borderColor: extendedSemanticColors.checkboxBorderChecked,
+              top: 4,
+              left: 4,
             },
             checked &&
               disabled && {
@@ -78,6 +82,8 @@ export const ChoiceGroupOptionStyles = (props: IChoiceGroupOptionStyleProps): Pa
                 ':after': {
                   borderColor: extendedSemanticColors.checkboxBorderChecked,
                   backgroundColor: extendedSemanticColors.choiceGroupUncheckedDotHover,
+                  top: 4,
+                  left: 4,
                 },
               },
             },