Skip to content

Commit 01b7dcc

Browse files
mltejeraMitch-At-Work
mltejera
authored and
Mitch-At-Work
committed
Semantic Tokens: Tooltip (#34845)
1 parent c2e54d0 commit 01b7dcc

File tree

10 files changed

+157
-11
lines changed

10 files changed

+157
-11
lines changed

‎packages/react-components/semantic-style-hooks-preview/library/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"@fluentui/react-textarea": "^9.4.6",
6262
"@fluentui/react-theme": "^9.1.24",
6363
"@fluentui/react-toolbar": "^9.4.5",
64+
"@fluentui/react-tooltip": "^9.6.6",
6465
"@fluentui/react-tree": "^9.10.9",
6566
"@fluentui/react-utilities": "^9.19.0",
6667
"@fluentui/semantic-tokens": "0.0.0-alpha.1",

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { useSemanticTooltipStyles } from './useSemanticTooltipStyles.styles';

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import * as semanticTokens from '@fluentui/semantic-tokens';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import type { TooltipState } from '@fluentui/react-tooltip';
5+
import { tokens } from '@fluentui/react-theme';
6+
import { createArrowStyles } from '@fluentui/react-positioning';
7+
8+
const useStyles = makeStyles({
9+
root: {
10+
display: 'none',
11+
boxSizing: 'border-box',
12+
maxWidth: '240px',
13+
cursor: 'default',
14+
overflowWrap: 'break-word',
15+
16+
borderRadius: semanticTokens.ctrlTooltipCorner,
17+
border: `1px solid ${semanticTokens.strokeLayer}`,
18+
19+
paddingTop: semanticTokens._ctrlTooltipPaddingTop,
20+
paddingBottom: semanticTokens._ctrlTooltipPaddingBottom,
21+
paddingLeft: semanticTokens._ctrlTooltipPaddingLeft,
22+
paddingRight: semanticTokens._ctrlTooltipPaddingRight,
23+
24+
backgroundColor: semanticTokens.ctrlTooltipBackground,
25+
color: semanticTokens.ctrlTooltipForeground,
26+
27+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
28+
fontSize: semanticTokens.textRampMetadataFontSize,
29+
lineHeight: semanticTokens.textRampMetadataLineHeight,
30+
31+
filter: semanticTokens.ctrlTooltipShadow,
32+
},
33+
visible: {
34+
display: 'block',
35+
},
36+
37+
// Semantic-tokens does not include inverted tokens, use existing tokens for now.
38+
inverted: {
39+
backgroundColor: tokens.colorNeutralBackgroundStatic,
40+
color: tokens.colorNeutralForegroundStaticInverted,
41+
},
42+
43+
// 6 is defined by a constant internal to tooltip
44+
// I don't know if any tokens for it, or if it should be a token.
45+
arrow: createArrowStyles({ arrowHeight: 6, borderColor: semanticTokens.strokeLayer }),
46+
});
47+
48+
export const useSemanticTooltipStyles = (_state: unknown): TooltipState => {
49+
'use no memo';
50+
51+
const state = _state as TooltipState;
52+
53+
const styles = useStyles();
54+
const { appearance, visible } = state;
55+
56+
state.content.className = mergeClasses(
57+
state.content.className,
58+
styles.root,
59+
appearance === 'inverted' && styles.inverted,
60+
visible && styles.visible,
61+
getSlotClassNameProp_unstable(state.content),
62+
);
63+
64+
state.arrowClassName = styles.arrow;
65+
66+
return state;
67+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ import {
7979
useSemanticToolbarRadioButtonStyles,
8080
useSemanticToolbarToggleButtonStyles,
8181
} from './Toolbar';
82+
import { useSemanticTooltipStyles } from './Tooltip';
8283

8384
export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
8485
// Accordion styles
@@ -142,9 +143,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
142143
useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles,
143144
useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles,
144145
useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles,
145-
// Tabs styles
146-
useTabStyles_unstable: useSemanticTabStyles,
147-
useTabListStyles_unstable: useSemanticTabListStyles,
148146
// Slider styles
149147
useSliderStyles_unstable: useSemanticSliderStyles,
150148
// Menu styles
@@ -176,4 +174,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
176174
useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles,
177175
useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles,
178176
useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles,
177+
// Tabs styles
178+
useTabStyles_unstable: useSemanticTabStyles,
179+
useTabListStyles_unstable: useSemanticTabListStyles,
180+
//Tooltip styles
181+
useTooltipStyles_unstable: useSemanticTooltipStyles,
179182
};

‎packages/semantic-tokens/etc/semantic-tokens.api.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3224,25 +3224,37 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v
32243224
export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))";
32253225

32263226
// @public (undocumented)
3227-
export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)";
3227+
export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background, var(--colorNeutralBackground1))";
32283228

32293229
// @public (undocumented)
32303230
export const ctrlTooltipBackgroundRaw = "--smtc-ctrl-tooltip-background";
32313231

32323232
// @public (undocumented)
3233-
export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest))";
3233+
export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))";
32343234

32353235
// @public (undocumented)
32363236
export const ctrlTooltipCornerRaw = "--smtc-ctrl-tooltip-corner";
32373237

32383238
// @public (undocumented)
3239-
export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground)";
3239+
export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground, var(--colorNeutralForeground1))";
32403240

32413241
// @public (undocumented)
32423242
export const ctrlTooltipForegroundRaw = "--smtc-ctrl-tooltip-foreground";
32433243

3244+
// @public
3245+
export const _ctrlTooltipPaddingBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 6px))";
3246+
3247+
// @public
3248+
export const _ctrlTooltipPaddingLeft = "var(--smtc-padding-ctrl-horizontal-default, 11px )";
3249+
3250+
// @public
3251+
export const _ctrlTooltipPaddingRight = "var(--smtc-padding-ctrl-horizontal-default, 11px)";
3252+
3253+
// @public
3254+
export const _ctrlTooltipPaddingTop = "var(--smtc-padding-ctrl-text-top, 4px)";
3255+
32443256
// @public (undocumented)
3245-
export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest))";
3257+
export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))";
32463258

32473259
// @public (undocumented)
32483260
export const ctrlTooltipShadowRaw = "--smtc-ctrl-tooltip-shadow";

‎packages/semantic-tokens/src/components/tooltip/tokens.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE
22
import { cornerCtrlRestRaw } from '../../control/variables';
3+
import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1 } from '../../legacy/tokens';
34
import { ctrlFabShadowRestRaw } from '../fab/variables';
45
import {
56
ctrlTooltipCornerRaw,
@@ -8,7 +9,7 @@ import {
89
ctrlTooltipShadowRaw,
910
} from './variables';
1011

11-
export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`;
12-
export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`;
13-
export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`;
14-
export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}))`;
12+
export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`;
13+
export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw}, ${colorNeutralBackground1})`;
14+
export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw}, ${colorNeutralForeground1})`;
15+
export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))`;

‎packages/semantic-tokens/src/fluentLegacyVariants.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -713,6 +713,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
713713
f2Token: 'spacingHorizontalSNudge',
714714
originalToken: 'paddingCtrlHorizontalDefault',
715715
},
716+
_ctrlTooltipPaddingBottom: {
717+
originalToken: 'paddingCtrlTextBottom',
718+
rawValue: '6px',
719+
},
720+
_ctrlTooltipPaddingLeft: {
721+
originalToken: 'paddingCtrlHorizontalDefault',
722+
rawValue: '11px ',
723+
},
724+
_ctrlTooltipPaddingRight: {
725+
originalToken: 'paddingCtrlHorizontalDefault',
726+
rawValue: '11px',
727+
},
728+
_ctrlTooltipPaddingTop: {
729+
originalToken: 'paddingCtrlTextTop',
730+
rawValue: '4px',
731+
},
716732
_ctrlTreeGapInsideDefault: {
717733
f2Token: 'spacingVerticalXXS',
718734
originalToken: 'gapInsideCtrlDefault',

‎packages/semantic-tokens/src/fluentOverrides.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,19 @@ export const fluentOverrides: FluentOverrides = {
154154
ctrlSliderThumbSizePressed: { rawValue: '20px' },
155155
ctrlSliderThumbSizeRest: { rawValue: '20px' },
156156
ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' },
157+
ctrlTooltipBackground: {
158+
f2Token: 'colorNeutralBackground1',
159+
},
160+
ctrlTooltipCorner: {
161+
f2Token: 'borderRadiusMedium',
162+
},
163+
ctrlTooltipForeground: {
164+
f2Token: 'colorNeutralForeground1',
165+
},
166+
ctrlTooltipShadow: {
167+
rawValue:
168+
`drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) ` + `drop-shadow(0 4px 8px var(--colorNeutralShadowKey))`,
169+
},
157170
foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' },
158171
foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' },
159172
foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' },

‎packages/semantic-tokens/src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1957,6 +1957,10 @@ export {
19571957
_ctrlTabSizeDefault,
19581958
_ctrlTabSmGapInsideDefault,
19591959
_ctrlTabSmPaddingHorizontalDefault,
1960+
_ctrlTooltipPaddingBottom,
1961+
_ctrlTooltipPaddingLeft,
1962+
_ctrlTooltipPaddingRight,
1963+
_ctrlTooltipPaddingTop,
19601964
_ctrlTreeGapInsideDefault,
19611965
_ctrlTreeIconOnSubtle,
19621966
_ctrlTreeIconOnSubtleHover,

‎packages/semantic-tokens/src/legacyVariant/tokens.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1430,6 +1430,34 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa
14301430
* please use paddingCtrlHorizontalDefault instead.
14311431
*/
14321432
export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`;
1433+
/**
1434+
* This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility.
1435+
* It's purpose is to support Fluent UI legacy fallback variants only.
1436+
* This token is not intended for use in new semantic theme implementations
1437+
* please use paddingCtrlTextBottom instead.
1438+
*/
1439+
export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`;
1440+
/**
1441+
* This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility.
1442+
* It's purpose is to support Fluent UI legacy fallback variants only.
1443+
* This token is not intended for use in new semantic theme implementations
1444+
* please use paddingCtrlHorizontalDefault instead.
1445+
*/
1446+
export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`;
1447+
/**
1448+
* This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility.
1449+
* It's purpose is to support Fluent UI legacy fallback variants only.
1450+
* This token is not intended for use in new semantic theme implementations
1451+
* please use paddingCtrlHorizontalDefault instead.
1452+
*/
1453+
export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`;
1454+
/**
1455+
* This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility.
1456+
* It's purpose is to support Fluent UI legacy fallback variants only.
1457+
* This token is not intended for use in new semantic theme implementations
1458+
* please use paddingCtrlTextTop instead.
1459+
*/
1460+
export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`;
14331461
/**
14341462
* This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility.
14351463
* It's purpose is to support Fluent UI legacy fallback variants only.

0 commit comments

Comments
 (0)