Skip to content

Commit c4b4fbc

Browse files
layershifterlayershifter
committed
fix(react-tooltip): update styles to not use CSS shorthands
1 parent bd3e92b commit c4b4fbc

7 files changed

Lines changed: 31 additions & 19 deletions

‎change/@fluentui-react-tooltip-581f9543-2c4c-43f4-99ea-f593d94eb064.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "update styles to not use CSS shorthands",
4+
"packageName": "@fluentui/react-tooltip",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
1+
import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
22
import { createArrowStyles } from '@fluentui/react-positioning';
33
import type { TooltipState } from './Tooltip.types';
44

@@ -10,15 +10,17 @@ export const tooltipClassName = 'fui-Tooltip';
1010
const useStyles = makeStyles({
1111
root: theme => ({
1212
display: 'none',
13-
padding: '5px 12px 7px 12px',
13+
...shorthands.padding('5px', '12px', '7px', '12px'),
1414
maxWidth: '240px',
1515
cursor: 'default',
1616
fontFamily: theme.fontFamilyBase,
1717
fontSize: theme.fontSizeBase200,
1818
lineHeight: theme.lineHeightBase200,
19-
borderRadius: theme.borderRadiusMedium, // Update tooltipBorderRadius in useTooltip.tsx if this changes
2019

21-
background: theme.colorNeutralBackground1,
20+
// Update tooltipBorderRadius in useTooltip.tsx if this changes
21+
...shorthands.borderRadius(theme.borderRadiusMedium),
22+
23+
backgroundColor: theme.colorNeutralBackground1,
2224
color: theme.colorNeutralForeground1,
2325

2426
// TODO need to add versions of theme.alias.shadow.shadow8, etc. that work with filter
@@ -32,7 +34,7 @@ const useStyles = makeStyles({
3234
},
3335

3436
inverted: theme => ({
35-
background: theme.colorNeutralForeground2, // TODO should be neutralBackgroundInverted
37+
backgroundColor: theme.colorNeutralBackgroundInverted,
3638
color: theme.colorNeutralForegroundInverted,
3739
}),
3840

‎packages/react-tooltip/src/stories/TooltipAria.stories.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from 'react';
2-
import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
3-
import { makeStyles } from '@fluentui/react-make-styles';
2+
import { shorthands, makeStyles } from '@fluentui/react-make-styles';
3+
4+
import { Tooltip } from '../Tooltip';
45

56
const useStyles = makeStyles({
67
exampleList: {
78
display: 'flex',
89
flexDirection: 'row',
910
alignItems: 'flex-start',
10-
margin: '16px 0',
11-
gap: '16px',
11+
...shorthands.margin('16px', '0'),
12+
...shorthands.gap('16px'),
1213
},
1314
});
1415

‎packages/react-tooltip/src/stories/TooltipControlled.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
2+
import { Tooltip } from '../Tooltip';
33

44
export const Controlled = () => {
55
const [tooltipVisible, setTooltipVisible] = React.useState(false);

‎packages/react-tooltip/src/stories/TooltipDefault.stories.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from 'react';
2-
import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
3-
import { makeStyles } from '@fluentui/react-make-styles'; // codesandbox-dependency: @fluentui/react-make-styles ^9.0.0-beta
2+
import { shorthands, makeStyles } from '@fluentui/react-make-styles';
3+
4+
import { Tooltip } from '../Tooltip';
45

56
const useStyles = makeStyles({
67
exampleList: {
78
display: 'flex',
89
flexDirection: 'row',
910
alignItems: 'flex-start',
10-
margin: '16px 0',
11-
gap: '16px',
11+
...shorthands.margin('16px', '0'),
12+
...shorthands.gap('16px'),
1213
},
1314
});
1415

‎packages/react-tooltip/src/stories/TooltipOnlyIfTruncated.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
2+
import { Tooltip } from '../Tooltip';
33

44
export const OnlyIfTruncated = () => {
55
const textContainerRef = React.useRef<HTMLDivElement>(null);

‎packages/react-tooltip/src/stories/TooltipPositioning.stories.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import * as React from 'react';
2-
import { Tooltip } from '../Tooltip'; // codesandbox-dependency: @fluentui/react-tooltip ^9.0.0-beta
3-
import { makeStyles } from '@fluentui/react-make-styles'; // codesandbox-dependency: @fluentui/react-make-styles ^9.0.0-beta
2+
import { shorthands, makeStyles } from '@fluentui/react-make-styles';
3+
4+
import { Tooltip } from '../Tooltip';
45

56
const useStyles = makeStyles({
67
targetContainer: {
78
display: 'inline-grid',
89
gridTemplateColumns: 'repeat(5, 1fr)',
910
gridTemplateRows: 'repeat(5, 64px)',
10-
gap: '4px',
11-
margin: '16px 128px',
11+
...shorthands.gap('4px'),
12+
...shorthands.margin('16px 128px'),
1213
},
1314
});
1415

0 commit comments

Comments
 (0)