fix(react-tooltip): update styles to not use CSS shorthands (#20795)

microsoft · Nov 30, 2021 · 1bbb753 · 1bbb753
1 parent 7493faf
commit 1bbb753
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 19 deletions.
diff --git a/change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json b/change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createArrowStyles } from '@fluentui/react-positioning';
 import type { TooltipState } from './Tooltip.types';
 
@@ -10,15 +10,17 @@ export const tooltipClassName = 'fui-Tooltip';
 const useStyles = makeStyles({
   root: theme => ({
     display: 'none',
-    padding: '5px 12px 7px 12px',
+    ...shorthands.padding('5px', '12px', '7px', '12px'),
     maxWidth: '240px',
     cursor: 'default',
     fontFamily: theme.fontFamilyBase,
     fontSize: theme.fontSizeBase200,
     lineHeight: theme.lineHeightBase200,
-    borderRadius: theme.borderRadiusMedium, // Update tooltipBorderRadius in useTooltip.tsx if this changes
 
-    background: theme.colorNeutralBackground1,
+    // Update tooltipBorderRadius in useTooltip.tsx if this changes
+    ...shorthands.borderRadius(theme.borderRadiusMedium),
+
+    backgroundColor: theme.colorNeutralBackground1,
     color: theme.colorNeutralForeground1,
 
     // TODO need to add versions of theme.alias.shadow.shadow8, etc. that work with filter
@@ -32,7 +34,7 @@ const useStyles = makeStyles({
   },
 
   inverted: theme => ({
-    background: theme.colorNeutralForeground2, // TODO should be neutralBackgroundInverted
+    backgroundColor: theme.colorNeutralBackgroundInverted,
     color: theme.colorNeutralForegroundInverted,
   }),
 

diff --git a/packages/react-tooltip/src/stories/TooltipAria.stories.tsx b/packages/react-tooltip/src/stories/TooltipAria.stories.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
-import { makeStyles } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+
+import { Tooltip } from '../Tooltip';
 
 const useStyles = makeStyles({
   exampleList: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
-    margin: '16px 0',
-    gap: '16px',
+    ...shorthands.margin('16px', '0'),
+    ...shorthands.gap('16px'),
   },
 });
 

diff --git a/packages/react-tooltip/src/stories/TooltipControlled.stories.tsx b/packages/react-tooltip/src/stories/TooltipControlled.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+import { Tooltip } from '../Tooltip';
 
 export const Controlled = () => {
   const [tooltipVisible, setTooltipVisible] = React.useState(false);

diff --git a/packages/react-tooltip/src/stories/TooltipDefault.stories.tsx b/packages/react-tooltip/src/stories/TooltipDefault.stories.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
-import { makeStyles } from '@fluentui/react-make-styles'; // codesandbox-dependency: @fluentui/react-make-styles ^9.0.0-beta
+import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+
+import { Tooltip } from '../Tooltip';
 
 const useStyles = makeStyles({
   exampleList: {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
-    margin: '16px 0',
-    gap: '16px',
+    ...shorthands.margin('16px', '0'),
+    ...shorthands.gap('16px'),
   },
 });
 

diff --git a/packages/react-tooltip/src/stories/TooltipOnlyIfTruncated.stories.tsx b/packages/react-tooltip/src/stories/TooltipOnlyIfTruncated.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
+import { Tooltip } from '../Tooltip';
 
 export const OnlyIfTruncated = () => {
   const textContainerRef = React.useRef<HTMLDivElement>(null);

diff --git a/packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx b/packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
-import { makeStyles } from '@fluentui/react-make-styles'; // codesandbox-dependency: @fluentui/react-make-styles ^9.0.0-beta
+import { shorthands, makeStyles } from '@fluentui/react-make-styles';
+
+import { Tooltip } from '../Tooltip';
 
 const useStyles = makeStyles({
   targetContainer: {
     display: 'inline-grid',
     gridTemplateColumns: 'repeat(5, 1fr)',
     gridTemplateRows: 'repeat(5, 64px)',
-    gap: '4px',
-    margin: '16px 128px',
+    ...shorthands.gap('4px'),
+    ...shorthands.margin('16px 128px'),
   },
 });