From ad1f6aa708e25c923230c692574cf08b8e79ce6a Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 24 Mar 2023 14:26:18 -0700 Subject: [PATCH] fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked --- ...eact-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json | 7 +++++++ .../src/components/Checkbox/useCheckboxStyles.ts | 1 + 2 files changed, 8 insertions(+) create mode 100644 change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json diff --git a/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json b/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json new file mode 100644 index 0000000000000..b128033116e48 --- /dev/null +++ b/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 0eb3cffda9e34..cccbf7712cd8d 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -19,6 +19,7 @@ const useRootBaseClassName = makeResetStyles({ position: 'relative', display: 'inline-flex', cursor: 'pointer', + verticalAlign: 'middle', color: tokens.colorNeutralForeground3, ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), });