diff --git a/change/@fluentui-fluent2-theme-92034fcd-61f0-459e-933b-c0457183fd4c.json b/change/@fluentui-fluent2-theme-92034fcd-61f0-459e-933b-c0457183fd4c.json new file mode 100644 index 0000000000000..ae775635d5438 --- /dev/null +++ b/change/@fluentui-fluent2-theme-92034fcd-61f0-459e-933b-c0457183fd4c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "[FIX] Recenters selection dot in choice group with icon.", + "packageName": "@fluentui/fluent2-theme", + "email": "matejera@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/fluent2-theme/src/componentStyles/ChoiceGroupOption.styles.ts b/packages/fluent2-theme/src/componentStyles/ChoiceGroupOption.styles.ts index 06d24f74d7074..3069ad2c0b3bb 100644 --- a/packages/fluent2-theme/src/componentStyles/ChoiceGroupOption.styles.ts +++ b/packages/fluent2-theme/src/componentStyles/ChoiceGroupOption.styles.ts @@ -86,7 +86,6 @@ export const getDefaultChoiceGroupOptionStyles = ( color: getChoiceGroupTextColor(props), '.ms-ChoiceFieldLabel': { color: getChoiceGroupTextColor(props), - paddingLeft: '32px', }, '&:hover .ms-ChoiceFieldLabel': { color: getTextHoverColor(props), @@ -99,9 +98,8 @@ export const getDefaultChoiceGroupOptionStyles = ( height: '17px', margin: '2px', }, + // the inner dot '::after': { - top: '5px', - left: '5px', width: '11px', height: '11px', background: getInnerCircleColor(props, false),