fix(react-divider): update styles to not use CSS shorthands

layershifter · layershifter · commit 588decbcab10 · 2021-11-29T09:50:08.000+01:00
diff --git a/change/@fluentui-react-divider-11cbcc30-fbbe-4089-9bd0-cbefce7b1147.json b/change/@fluentui-react-divider-11cbcc30-fbbe-4089-9bd0-cbefce7b1147.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-divider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,4 +1,4 @@
-import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';
+import { mergeClasses, shorthands, makeStyles } from '@fluentui/react-make-styles';
 import { DividerState } from './Divider.types';
 
 export const dividerClassName = 'fui-Divider';
@@ -29,15 +29,15 @@ const useBaseStyles = makeStyles({
       display: 'flex',
       flexGrow: 1,
 
-      borderColor: theme.colorNeutralStroke2,
+      ...shorthands.borderColor(theme.colorNeutralStroke2),
     },
 
     ':after': {
       boxSizing: 'border-box',
       display: 'flex',
       flexGrow: 1,
 
-      borderColor: theme.colorNeutralStroke2,
+      ...shorthands.borderColor(theme.colorNeutralStroke2),
     },
   }),
 
@@ -79,29 +79,29 @@ const useBaseStyles = makeStyles({
     color: theme.colorBrandForeground1,
 
     ':before': {
-      borderColor: theme.colorBrandStroke1,
+      ...shorthands.borderColor(theme.colorBrandStroke1),
     },
 
     ':after': {
-      borderColor: theme.colorBrandStroke1,
+      ...shorthands.borderColor(theme.colorBrandStroke1),
     },
   }),
   subtle: theme => ({
     ':before': {
-      borderColor: theme.colorNeutralStroke3,
+      ...shorthands.borderColor(theme.colorNeutralStroke3),
     },
 
     ':after': {
-      borderColor: theme.colorNeutralStroke3,
+      ...shorthands.borderColor(theme.colorNeutralStroke3),
     },
   }),
   strong: theme => ({
     ':before': {
-      borderColor: theme.colorNeutralStroke1,
+      ...shorthands.borderColor(theme.colorNeutralStroke1),
     },
 
     ':after': {
-      borderColor: theme.colorNeutralStroke1,
+      ...shorthands.borderColor(theme.colorNeutralStroke1),
     },
   }),
 });
diff --git a/packages/react-divider/src/stories/DividerAlignContent.stories.tsx b/packages/react-divider/src/stories/DividerAlignContent.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
diff --git a/packages/react-divider/src/stories/DividerAppearance.stories.tsx b/packages/react-divider/src/stories/DividerAppearance.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
diff --git a/packages/react-divider/src/stories/DividerCustomStyles.stories.tsx b/packages/react-divider/src/stories/DividerCustomStyles.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
-    background: 'white',
+    backgroundColor: 'white',
     minHeight: '192px',
   },
   customWidth: {
@@ -35,14 +35,14 @@ const useStyles = makeStyles({
   },
   customLineColor: {
     ':before': {
-      borderColor: '#FF00FF',
+      ...shorthands.borderColor('#FF00FF'),
     },
     ':after': {
-      borderColor: '#FF00FF',
+      ...shorthands.borderColor('#FF00FF'),
     },
   },
   customLineStyle: {
-    borderWidth: '2px',
+    ...shorthands.borderWidth('2px'),
     ':before': {
       borderTopStyle: 'dashed',
       borderTopWidth: '2px',
diff --git a/packages/react-divider/src/stories/DividerDefault.stories.tsx b/packages/react-divider/src/stories/DividerDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
diff --git a/packages/react-divider/src/stories/DividerInset.stories.tsx b/packages/react-divider/src/stories/DividerInset.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
diff --git a/packages/react-divider/src/stories/DividerVertical.stories.tsx b/packages/react-divider/src/stories/DividerVertical.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
-import { Divider } from '../Divider'; // codesandbox-dependency: @fluentui/react-divider ^9.0.0-beta
+import { Divider } from '../Divider';
 
 const useStyles = makeStyles({
   root: {
