Skip to content

Commit 4df21a3

Browse files
etudieMitch-At-Work
etudie
and
Mitch-At-Work
committed
Semantic Tokens: Popover (#34907)
Co-authored-by: Mitch-At-Work <[email protected]>
1 parent f0364e4 commit 4df21a3

File tree

10 files changed

+133
-15
lines changed

10 files changed

+133
-15
lines changed

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

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

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import { createArrowHeightStyles, createArrowStyles, createSlideStyles } from '@fluentui/react-positioning';
3+
import { tokens } from '@fluentui/react-theme';
4+
import type { PopoverSize, PopoverSurfaceState } from '@fluentui/react-popover';
5+
import { popoverSurfaceClassNames } from '@fluentui/react-popover';
6+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
7+
import * as semanticTokens from '@fluentui/semantic-tokens';
8+
9+
export const arrowHeights: Record<PopoverSize, number> = {
10+
small: 6,
11+
medium: 8,
12+
large: 8,
13+
};
14+
15+
/**
16+
* Styles for the root slot
17+
*/
18+
const useStyles = makeStyles({
19+
root: {
20+
color: semanticTokens.foregroundContentNeutralPrimary,
21+
backgroundColor: semanticTokens.backgroundFlyoutSolid,
22+
borderRadius: semanticTokens.cornerCtrlRest,
23+
border: `1px solid ${semanticTokens.strokeLayer}`,
24+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
25+
fontSize: semanticTokens.textGlobalBody3FontSize,
26+
fontWeight: semanticTokens.textStyleDefaultRegularWeight,
27+
lineHeight: semanticTokens.textGlobalBody3LineHeight,
28+
...createSlideStyles(10),
29+
30+
// TODO need to add versions of tokens.alias.shadow.shadow16, etc. that work with filter
31+
filter: semanticTokens._ctrlPopoverShadowFilter,
32+
},
33+
34+
inline: {
35+
// When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.
36+
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
37+
zIndex: 1,
38+
},
39+
40+
inverted: {
41+
backgroundColor: tokens.colorNeutralBackgroundStatic,
42+
color: tokens.colorNeutralForegroundStaticInverted,
43+
},
44+
45+
brand: {
46+
backgroundColor: semanticTokens.backgroundCtrlBrandRest,
47+
color: semanticTokens.foregroundCtrlOnBrandRest,
48+
},
49+
50+
smallPadding: { padding: semanticTokens.paddingContentSmall },
51+
52+
mediumPadding: { padding: semanticTokens.paddingContentMedium },
53+
54+
largePadding: { padding: semanticTokens._ctrlPopoverPaddingContentLarge },
55+
56+
smallArrow: createArrowHeightStyles(arrowHeights.small),
57+
mediumLargeArrow: createArrowHeightStyles(arrowHeights.medium),
58+
arrow: createArrowStyles({ arrowHeight: undefined }),
59+
});
60+
61+
/**
62+
* Apply styling to the PopoverSurface slots based on the state
63+
*/
64+
export const useSemanticPopoverSurfaceStyles = (_state: unknown): PopoverSurfaceState => {
65+
'use no memo';
66+
67+
const state = _state as PopoverSurfaceState;
68+
69+
const styles = useStyles();
70+
state.root.className = mergeClasses(
71+
state.root.className,
72+
popoverSurfaceClassNames.root,
73+
styles.root,
74+
state.inline && styles.inline,
75+
state.size === 'small' && styles.smallPadding,
76+
state.size === 'medium' && styles.mediumPadding,
77+
state.size === 'large' && styles.largePadding,
78+
state.appearance === 'inverted' && styles.inverted,
79+
state.appearance === 'brand' && styles.brand,
80+
getSlotClassNameProp_unstable(state.root),
81+
);
82+
83+
state.arrowClassName = mergeClasses(
84+
state.arrowClassName,
85+
styles.arrow,
86+
state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,
87+
);
88+
89+
return state;
90+
};

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { makeStyles, mergeClasses } from '@griffel/react';
22
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
33
import { teachingPopoverSurfaceClassNames, type TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover';
4-
import { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';
5-
// import { useSemanticPopoverSurfaceStyles } from '../Popover';
4+
import { useSemanticPopoverSurfaceStyles } from '../Popover';
65
import * as semanticTokens from '@fluentui/semantic-tokens';
76

87
const useStyles = makeStyles({
@@ -32,8 +31,7 @@ export const useSemanticTeachingPopoverSurfaceStyles = (_state: unknown): Teachi
3231
getSlotClassNameProp_unstable(state.root),
3332
);
3433

35-
const updatedState = usePopoverSurfaceStyles_unstable(state);
36-
// const updatedState = useSemanticPopoverSurfaceStyles(state);
34+
const updatedState = useSemanticPopoverSurfaceStyles(state);
3735

3836
return updatedState;
3937
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import {
7070
useSemanticBreadcrumbItemStyles,
7171
} from './Breadcrumb';
7272
import { useSemanticSpinButtonStyles } from './SpinButton';
73+
import { useSemanticPopoverSurfaceStyles } from './Popover';
7374
import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles';
7475
import {
7576
useSemanticToolbarStyles,
@@ -198,6 +199,8 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
198199
useRadioStyles_unstable: useSemanticRadioStyles,
199200
// Persona styles
200201
usePersonaStyles_unstable: useSemanticPersonaStyles,
202+
// Popover styles
203+
usePopoverSurfaceStyles_unstable: useSemanticPopoverSurfaceStyles,
201204
// Search styles
202205
useSearchBoxStyles_unstable: useSemanticSearchBoxStyles,
203206
// Checkbox styles

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2491,6 +2491,12 @@ export const _ctrlMessageBarTitleLineHeight = "var(--smtc-text-ramp-item-header-
24912491
// @public
24922492
export const _ctrlPersonaTreeIconOnSubtlePressed = "var(--smtc-foreground-ctrl-on-subtle-pressed, var(--smtc-foreground-ctrl-neutral-primary-pressed, var(--colorNeutralForeground3Pressed)))";
24932493

2494+
// @public
2495+
export const _ctrlPopoverPaddingContentLarge = "var(--smtc-padding-content-large, 20px)";
2496+
2497+
// @public
2498+
export const _ctrlPopoverShadowFilter = "var(--smtc-shadow-flyout, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey)))";
2499+
24942500
// @public (undocumented)
24952501
export const ctrlProgressBackgroundEmpty = "var(--smtc-ctrl-progress-background-empty, var(--colorNeutralBackground6))";
24962502

@@ -4603,7 +4609,7 @@ export const paddingContentLarge = "var(--smtc-padding-content-large, var(--spac
46034609
export const paddingContentLargeRaw = "--smtc-padding-content-large";
46044610

46054611
// @public (undocumented)
4606-
export const paddingContentMedium = "var(--smtc-padding-content-medium)";
4612+
export const paddingContentMedium = "var(--smtc-padding-content-medium, 16px)";
46074613

46084614
// @public (undocumented)
46094615
export const paddingContentMediumRaw = "--smtc-padding-content-medium";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export const paddingContentAlignOutdentTextOnSubtle = `var(${paddingContentAlign
323323
export const paddingContentXxSmall = `var(${paddingContentXxSmallRaw})`;
324324
export const paddingContentXSmall = `var(${paddingContentXSmallRaw})`;
325325
export const paddingContentSmall = `var(${paddingContentSmallRaw}, 12px)`;
326-
export const paddingContentMedium = `var(${paddingContentMediumRaw})`;
326+
export const paddingContentMedium = `var(${paddingContentMediumRaw}, 16px)`;
327327
export const paddingContentLarge = `var(${paddingContentLargeRaw}, ${spacingHorizontalXXL})`;
328328
export const paddingContentXLarge = `var(${paddingContentXLargeRaw})`;
329329
export const paddingContentXxLarge = `var(${paddingContentXxLargeRaw})`;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,14 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
481481
f2Token: 'colorNeutralForeground3Pressed',
482482
originalToken: 'foregroundCtrlOnSubtlePressed',
483483
},
484+
_ctrlPopoverPaddingContentLarge: {
485+
originalToken: 'paddingContentLarge',
486+
rawValue: '20px',
487+
},
488+
_ctrlPopoverShadowFilter: {
489+
originalToken: 'shadowFlyout',
490+
rawValue: `drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey))`,
491+
},
484492
_ctrlRadioBackgroundActiveBrandHover: {
485493
f2Token: 'colorTransparentBackground',
486494
originalToken: 'backgroundCtrlActiveBrandHover',

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -155,15 +155,9 @@ export const fluentOverrides: FluentOverrides = {
155155
ctrlSliderThumbSizePressed: { rawValue: '20px' },
156156
ctrlSliderThumbSizeRest: { rawValue: '20px' },
157157
ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' },
158-
ctrlTooltipBackground: {
159-
f2Token: 'colorNeutralBackground1',
160-
},
161-
ctrlTooltipCorner: {
162-
f2Token: 'borderRadiusMedium',
163-
},
164-
ctrlTooltipForeground: {
165-
f2Token: 'colorNeutralForeground1',
166-
},
158+
ctrlTooltipBackground: { f2Token: 'colorNeutralBackground1' },
159+
ctrlTooltipCorner: { f2Token: 'borderRadiusMedium' },
160+
ctrlTooltipForeground: { f2Token: 'colorNeutralForeground1' },
167161
ctrlTooltipShadow: {
168162
rawValue:
169163
`drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) ` + `drop-shadow(0 4px 8px var(--colorNeutralShadowKey))`,
@@ -224,6 +218,7 @@ export const fluentOverrides: FluentOverrides = {
224218
paddingContentAlignDefault: { f2Token: 'spacingVerticalS' },
225219
paddingContentAlignOutdentIconOnSubtle: { f2Token: 'spacingHorizontalM' },
226220
paddingContentLarge: { f2Token: 'spacingHorizontalXXL' },
221+
paddingContentMedium: { rawValue: '16px' },
227222
paddingContentNone: { f2Token: 'spacingHorizontalNone' },
228223
paddingContentSmall: { rawValue: '12px' },
229224
paddingCtrlHorizontalDefault: { f2Token: 'spacingHorizontalM' },

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1899,6 +1899,8 @@ export {
18991899
_ctrlMessageBarSpacingTop,
19001900
_ctrlMessageBarTitleLineHeight,
19011901
_ctrlPersonaTreeIconOnSubtlePressed,
1902+
_ctrlPopoverPaddingContentLarge,
1903+
_ctrlPopoverShadowFilter,
19021904
_ctrlRadioBackgroundActiveBrandHover,
19031905
_ctrlRadioBackgroundActiveBrandPressed,
19041906
_ctrlRadioBackgroundActiveBrandRest,

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import {
7070
gapBetweenCtrlDefaultRaw,
7171
paddingContentAlignOutdentIconOnSubtleRaw,
7272
textGlobalBody2LineHeightRaw,
73+
paddingContentLargeRaw,
7374
backgroundCtrlBrandDisabledRaw,
7475
sizeCtrlIconRaw,
7576
foregroundCtrlOnBrandRestRaw,
@@ -1042,6 +1043,20 @@ export const _ctrlMessageBarTitleLineHeight = `var(${textRampItemHeaderLineHeigh
10421043
* please use foregroundCtrlOnSubtlePressed instead.
10431044
*/
10441045
export const _ctrlPersonaTreeIconOnSubtlePressed = `var(${foregroundCtrlOnSubtlePressedRaw}, var(${foregroundCtrlNeutralPrimaryPressedRaw}, ${colorNeutralForeground3Pressed}))`;
1046+
/**
1047+
* This is a legacy variant for paddingContentLarge to enable backwards compatibility.
1048+
* It's purpose is to support Fluent UI legacy fallback variants only.
1049+
* This token is not intended for use in new semantic theme implementations
1050+
* please use paddingContentLarge instead.
1051+
*/
1052+
export const _ctrlPopoverPaddingContentLarge = `var(${paddingContentLargeRaw}, 20px)`;
1053+
/**
1054+
* This is a legacy variant for shadowFlyout to enable backwards compatibility.
1055+
* It's purpose is to support Fluent UI legacy fallback variants only.
1056+
* This token is not intended for use in new semantic theme implementations
1057+
* please use shadowFlyout instead.
1058+
*/
1059+
export const _ctrlPopoverShadowFilter = `var(${shadowFlyoutRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey)))`;
10451060
/**
10461061
* This is a legacy variant for backgroundCtrlActiveBrandHover to enable backwards compatibility.
10471062
* It's purpose is to support Fluent UI legacy fallback variants only.

0 commit comments

Comments
 (0)