From 910a9dce8eff7612e664b4532aee63cc01cfd224 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 8 Nov 2021 12:17:42 +0100 Subject: [PATCH] fix(react-checkbox): update styles to not use CSS shorthands --- ...-1926d5fc-dbae-49e2-8f36-cee7a92f42ed.json | 7 +++++++ .../components/Checkbox/useCheckboxStyles.ts | 19 ++++++++++--------- 2 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 change/@fluentui-react-checkbox-1926d5fc-dbae-49e2-8f36-cee7a92f42ed.json diff --git a/change/@fluentui-react-checkbox-1926d5fc-dbae-49e2-8f36-cee7a92f42ed.json b/change/@fluentui-react-checkbox-1926d5fc-dbae-49e2-8f36-cee7a92f42ed.json new file mode 100644 index 00000000000000..2ce9ce8bed5323 --- /dev/null +++ b/change/@fluentui-react-checkbox-1926d5fc-dbae-49e2-8f36-cee7a92f42ed.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "update styles to not use CSS shorthands", + "packageName": "@fluentui/react-checkbox", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 7962c2db1dcf39..70a25fa7eaac91 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { CheckboxState } from './Checkbox.types'; @@ -13,7 +13,7 @@ const useStyles = makeStyles({ position: 'relative', alignSelf: 'flex-start', alignItems: 'center', - padding: '4px', + ...shorthands.padding('4px'), userSelect: 'none', cursor: 'pointer', }), @@ -155,8 +155,8 @@ const useInputStyles = makeStyles({ input: { opacity: 0, position: 'absolute', - margin: 0, - padding: 0, + ...shorthands.margin(0), + ...shorthands.padding(0), cursor: 'pointer', }, @@ -170,19 +170,20 @@ const useIndicatorStyles = makeStyles({ width: '100%', height: '100%', fill: 'currentColor', - overflow: 'hidden', + overflowX: 'hidden', + overflowY: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', boxSizing: 'border-box', - borderStyle: 'solid', - borderRadius: theme.borderRadiusSmall, - borderWidth: theme.strokeWidthThin, + ...shorthands.borderStyle('solid'), + ...shorthands.borderWidth(theme.strokeWidthThin), + ...shorthands.borderRadius(theme.borderRadiusSmall), }), circular: theme => ({ - borderRadius: theme.borderRadiusCircular, + ...shorthands.borderRadius(theme.borderRadiusCircular), }), });