From 1bbb753830028fbf133858d523ae2d56ceefeecf Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 30 Nov 2021 10:03:48 +0100 Subject: [PATCH] fix(react-tooltip): update styles to not use CSS shorthands (#20795) --- ...tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json | 7 +++++++ .../src/components/Tooltip/useTooltipStyles.ts | 12 +++++++----- .../src/stories/TooltipAria.stories.tsx | 9 +++++---- .../src/stories/TooltipControlled.stories.tsx | 2 +- .../src/stories/TooltipDefault.stories.tsx | 9 +++++---- .../src/stories/TooltipOnlyIfTruncated.stories.tsx | 2 +- .../src/stories/TooltipPositioning.stories.tsx | 9 +++++---- 7 files changed, 31 insertions(+), 19 deletions(-) create mode 100644 change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json diff --git a/change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json b/change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json new file mode 100644 index 00000000000000..b52e5768378022 --- /dev/null +++ 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": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts index 002efeabc0a70b..6f49493002178b 100644 --- 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 index 84647bc6d0d595..5fc29415985033 100644 --- 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 index 2b0311fc8bad3c..96f4888a7cf8d6 100644 --- 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 index d577a1703bf29e..c27284c1270c48 100644 --- 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 index 1d702ddcb55261..f486775ca2871b 100644 --- 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(null); diff --git a/packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx b/packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx index 134d45908ea183..eb146cec9e54e9 100644 --- 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'), }, });