Skip to content

Commit cf6bdfb

Browse files
rachethecreatorMitch-At-Work
rachethecreator
and
Mitch-At-Work
authored
add infolabel to semantic style hooks (#34856)
Co-authored-by: Mitch-At-Work <[email protected]>
1 parent 54dc2e6 commit cf6bdfb

File tree

14 files changed

+261
-17
lines changed

14 files changed

+261
-17
lines changed

‎packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import { FieldState } from '@fluentui/react-field';
2727
import { FlatTreeState } from '@fluentui/react-tree';
2828
import { FluentProviderCustomStyleHooks } from '@fluentui/react-provider';
2929
import { ImageState } from '@fluentui/react-image';
30+
import { InfoButtonState } from '@fluentui/react-infolabel';
31+
import { InfoLabelState } from '@fluentui/react-infolabel';
3032
import { InlineDrawerState } from '@fluentui/react-drawer';
3133
import { InputState } from '@fluentui/react-input';
3234
import { LabelState } from '@fluentui/react-label';
@@ -137,6 +139,12 @@ export const useSemanticFlatTreeStyles: (_state: unknown) => FlatTreeState;
137139
// @public (undocumented)
138140
export const useSemanticImageStyles: (_state: unknown) => ImageState;
139141

142+
// @public
143+
export const useSemanticInfoButtonStyles: (_state: unknown) => InfoButtonState;
144+
145+
// @public
146+
export const useSemanticInfoLabelStyles: (_state: unknown) => InfoLabelState;
147+
140148
// @public
141149
export const useSemanticInlineDrawerStyles: (_state: unknown) => InlineDrawerState;
142150

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@fluentui/react-input": "^9.5.6",
3838
"@fluentui/react-icons": "^2.0.245",
3939
"@fluentui/react-image": "^9.1.84",
40+
"@fluentui/react-infolabel": "^9.2.0",
4041
"@fluentui/react-jsx-runtime": "^9.0.54",
4142
"@fluentui/react-label": "^9.1.87",
4243
"@fluentui/react-link": "^9.4.6",

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

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

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
2+
import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
3+
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
4+
import { infoButtonClassNames, type InfoButtonState } from '@fluentui/react-infolabel';
5+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
6+
import * as semanticTokens from '@fluentui/semantic-tokens';
7+
8+
/**
9+
* Styles for the root slot
10+
*/
11+
const useButtonStyles = makeStyles({
12+
base: {
13+
alignItems: 'center',
14+
boxSizing: 'border-box',
15+
display: 'inline-flex',
16+
justifyContent: 'center',
17+
textDecorationLine: 'none',
18+
verticalAlign: 'middle',
19+
position: 'relative',
20+
21+
backgroundColor: semanticTokens.nullColor,
22+
color: semanticTokens.foregroundCtrlOnTransparentRest,
23+
24+
...shorthands.borderStyle('none'),
25+
borderRadius: semanticTokens.cornerCtrlRest,
26+
margin: '0',
27+
padding: semanticTokens.gapInsideCtrlSmDefault,
28+
29+
[`& .${iconFilledClassName}`]: {
30+
display: 'none',
31+
},
32+
[`& .${iconRegularClassName}`]: {
33+
display: 'inline-flex',
34+
},
35+
36+
':hover': {
37+
backgroundColor: semanticTokens.backgroundCtrlOutlineHover,
38+
color: semanticTokens.foregroundCtrlOnTransparentHover,
39+
cursor: 'pointer',
40+
41+
[`& .${iconFilledClassName}`]: {
42+
display: 'inline-flex',
43+
},
44+
[`& .${iconRegularClassName}`]: {
45+
display: 'none',
46+
},
47+
},
48+
':hover:active': {
49+
backgroundColor: semanticTokens.backgroundCtrlOutlinePressed,
50+
color: semanticTokens.foregroundCtrlOnTransparentPressed,
51+
},
52+
},
53+
54+
selected: {
55+
backgroundColor: semanticTokens.nullColor,
56+
color: semanticTokens._ctrlInfoLabelForegroundColorSelected,
57+
58+
[`& .${iconFilledClassName}`]: {
59+
display: 'inline-flex',
60+
},
61+
[`& .${iconRegularClassName}`]: {
62+
display: 'none',
63+
},
64+
65+
'@media (forced-colors: active)': {
66+
backgroundColor: 'Highlight',
67+
color: 'Canvas',
68+
},
69+
},
70+
71+
highContrast: {
72+
'@media (forced-colors: active)': {
73+
color: 'CanvasText',
74+
75+
':hover,:hover:active': {
76+
forcedColorAdjust: 'none',
77+
backgroundColor: 'Highlight',
78+
color: 'Canvas',
79+
},
80+
},
81+
},
82+
83+
focusIndicator: createFocusOutlineStyle(),
84+
85+
large: {
86+
padding: semanticTokens.gapBetweenContentXSmall,
87+
},
88+
});
89+
90+
const usePopoverSurfaceStyles = makeStyles({
91+
base: {
92+
maxWidth: '264px',
93+
},
94+
smallMedium: {
95+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
96+
fontSize: semanticTokens.textGlobalCaption1FontSize,
97+
fontWeight: semanticTokens.textStyleDefaultRegularWeight,
98+
lineHeight: semanticTokens.textGlobalCaption1LineHeight,
99+
},
100+
large: {
101+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
102+
fontSize: semanticTokens.textRampItemBodyFontSize,
103+
fontWeight: semanticTokens.textStyleDefaultRegularWeight,
104+
lineHeight: semanticTokens.textRampItemBodyLineHeight,
105+
},
106+
});
107+
108+
/**
109+
* Apply styling to the InfoButton slots based on the state
110+
*/
111+
export const useSemanticInfoButtonStyles = (_state: unknown): InfoButtonState => {
112+
'use no memo';
113+
114+
const state = _state as InfoButtonState;
115+
116+
const { size } = state;
117+
const { open } = state.popover;
118+
const buttonStyles = useButtonStyles();
119+
const popoverSurfaceStyles = usePopoverSurfaceStyles();
120+
121+
state.info.className = mergeClasses(
122+
state.info.className,
123+
infoButtonClassNames.info,
124+
popoverSurfaceStyles.base,
125+
size === 'large' ? popoverSurfaceStyles.large : popoverSurfaceStyles.smallMedium,
126+
getSlotClassNameProp_unstable(state.info),
127+
);
128+
129+
state.root.className = mergeClasses(
130+
state.root.className,
131+
infoButtonClassNames.root,
132+
buttonStyles.base,
133+
buttonStyles.highContrast,
134+
buttonStyles.focusIndicator,
135+
open && buttonStyles.selected,
136+
size === 'large' && buttonStyles.large,
137+
getSlotClassNameProp_unstable(state.root),
138+
);
139+
140+
return state;
141+
};

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
2+
import { makeStyles, mergeClasses } from '@griffel/react';
3+
import { infoLabelClassNames, type InfoLabelState } from '@fluentui/react-infolabel';
4+
import * as semanticTokens from '@fluentui/semantic-tokens';
5+
6+
const useLabelStyles = makeStyles({
7+
base: {
8+
verticalAlign: 'top',
9+
cursor: 'inherit',
10+
color: 'inherit',
11+
},
12+
});
13+
14+
const useInfoButtonStyles = makeStyles({
15+
base: {
16+
verticalAlign: 'top',
17+
18+
// Negative margin to align with the text
19+
marginTop: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`,
20+
marginBottom: `calc(0px - ${semanticTokens.gapBetweenContentXSmall})`,
21+
},
22+
23+
large: {
24+
// Negative margin to align with the text
25+
marginTop: '-1px',
26+
marginBottom: '-1px',
27+
},
28+
});
29+
30+
/**
31+
* Apply styling to the InfoLabel slots based on the state
32+
*/
33+
export const useSemanticInfoLabelStyles = (_state: unknown): InfoLabelState => {
34+
'use no memo';
35+
36+
const state = _state as InfoLabelState;
37+
38+
state.root.className = mergeClasses(
39+
state.root.className,
40+
infoLabelClassNames.root,
41+
getSlotClassNameProp_unstable(state.root),
42+
);
43+
44+
const labelStyles = useLabelStyles();
45+
state.label.className = mergeClasses(
46+
state.label.className,
47+
infoLabelClassNames.label,
48+
labelStyles.base,
49+
getSlotClassNameProp_unstable(state.label),
50+
);
51+
52+
const infoButtonStyles = useInfoButtonStyles();
53+
if (state.infoButton) {
54+
state.infoButton.className = mergeClasses(
55+
state.infoButton.className,
56+
infoLabelClassNames.infoButton,
57+
infoButtonStyles.base,
58+
state.size === 'large' && infoButtonStyles.large,
59+
getSlotClassNameProp_unstable(state.infoButton),
60+
);
61+
}
62+
63+
return state;
64+
};

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ import {
8080
useSemanticToolbarToggleButtonStyles,
8181
} from './Toolbar';
8282
import { useSemanticTooltipStyles } from './Tooltip';
83+
import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel';
8384

8485
export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
8586
// Accordion styles
@@ -179,4 +180,7 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
179180
useTabListStyles_unstable: useSemanticTabListStyles,
180181
//Tooltip styles
181182
useTooltipStyles_unstable: useSemanticTooltipStyles,
183+
// InfoLabel styles
184+
useInfoButtonStyles_unstable: useSemanticInfoButtonStyles,
185+
useInfoLabelStyles_unstable: useSemanticInfoLabelStyles,
182186
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,4 @@ export {
8383
useSemanticToolbarRadioButtonStyles,
8484
useSemanticToolbarToggleButtonStyles,
8585
} from './component-styles/Toolbar';
86+
export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel';

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,13 +263,13 @@ export const backgroundCtrlOutlineDisabled = "var(--smtc-background-ctrl-outline
263263
export const backgroundCtrlOutlineDisabledRaw = "--smtc-background-ctrl-outline-disabled";
264264

265265
// @public (undocumented)
266-
export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackground)))";
266+
export const backgroundCtrlOutlineHover = "var(--smtc-background-ctrl-outline-hover, var(--smtc-null-color, var(--colorTransparentBackgroundHover)))";
267267

268268
// @public (undocumented)
269269
export const backgroundCtrlOutlineHoverRaw = "--smtc-background-ctrl-outline-hover";
270270

271271
// @public (undocumented)
272-
export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackground)))";
272+
export const backgroundCtrlOutlinePressed = "var(--smtc-background-ctrl-outline-pressed, var(--smtc-null-color, var(--colorTransparentBackgroundPressed)))";
273273

274274
// @public (undocumented)
275275
export const backgroundCtrlOutlinePressedRaw = "--smtc-background-ctrl-outline-pressed";
@@ -1786,6 +1786,9 @@ export const ctrlFocusOuterStrokeWidth = "var(--smtc-ctrl-focus-outer-stroke-wid
17861786
// @public (undocumented)
17871787
export const ctrlFocusOuterStrokeWidthRaw = "--smtc-ctrl-focus-outer-stroke-width";
17881788

1789+
// @public
1790+
export const _ctrlInfoLabelForegroundColorSelected = "var(--smtc-foreground-ctrl-active-brand-rest, var(--smtc-foreground-ctrl-brand-rest, var(--colorNeutralForeground2BrandSelected)))";
1791+
17891792
// @public (undocumented)
17901793
export const ctrlInputBackgroundDisabled = "var(--smtc-ctrl-input-background-disabled, var(--smtc-background-ctrl-neutral-disabled, var(--colorNeutralBackgroundDisabled)))";
17911794

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,10 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = {
325325
f2Token: 'colorTransparentStrokeInteractive',
326326
originalToken: 'ctrlFocusOuterStroke',
327327
},
328+
_ctrlInfoLabelForegroundColorSelected: {
329+
f2Token: 'colorNeutralForeground2BrandSelected',
330+
originalToken: 'foregroundCtrlActiveBrandRest',
331+
},
328332
_ctrlInputBackgroundRestDarker: {
329333
f2Token: 'colorNeutralBackground3',
330334
originalToken: 'ctrlInputBackgroundRest',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export const fluentOverrides: FluentOverrides = {
2222
backgroundCtrlNeutralHover: { f2Token: 'colorNeutralBackground1Hover' },
2323
backgroundCtrlNeutralPressed: { f2Token: 'colorNeutralBackground1Pressed' },
2424
backgroundCtrlNeutralRest: { f2Token: 'colorNeutralBackground1' },
25-
backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackground' },
26-
backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackground' },
25+
backgroundCtrlOutlineHover: { f2Token: 'colorTransparentBackgroundHover' },
26+
backgroundCtrlOutlinePressed: { f2Token: 'colorTransparentBackgroundPressed' },
2727
backgroundCtrlOutlineRest: { f2Token: 'colorTransparentBackground' },
2828
backgroundCtrlShapeSafeNeutralDisabled: { f2Token: 'colorNeutralForegroundDisabled' },
2929
backgroundCtrlShapeSafeNeutralHover: { f2Token: 'colorNeutralStrokeAccessibleHover' },

0 commit comments

Comments
 (0)