Skip to content

Commit 34af3c9

Browse files
rachethecreatorMitch-At-Work
rachethecreator
and
Mitch-At-Work
authored
update message bar to use semantic tokens (#34657)
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
1 parent de23db2 commit 34af3c9

File tree

17 files changed

+557
-42
lines changed

17 files changed

+557
-42
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ import { LabelState } from '@fluentui/react-label';
2525
import { LinkState } from '@fluentui/react-link';
2626
import { ListItemState } from '@fluentui/react-list';
2727
import { MenuButtonState } from '@fluentui/react-button';
28+
import { MessageBarActionsState } from '@fluentui/react-message-bar';
29+
import { MessageBarBodyState } from '@fluentui/react-message-bar';
30+
import { MessageBarState } from '@fluentui/react-message-bar';
31+
import { MessageBarTitleState } from '@fluentui/react-message-bar';
2832
import { ProgressBarState } from '@fluentui/react-progress';
2933
import { RatingDisplayState } from '@fluentui/react-rating';
3034
import { RatingItemState } from '@fluentui/react-rating';
@@ -101,6 +105,18 @@ export const useSemanticListItemStyles: (_state: unknown) => ListItemState;
101105
// @public (undocumented)
102106
export const useSemanticMenuButtonStyles: (_state: unknown) => MenuButtonState;
103107

108+
// @public
109+
export const useSemanticMessageBarActionsStyles: (_state: unknown) => MessageBarActionsState;
110+
111+
// @public
112+
export const useSemanticMessageBarBodyStyles: (_state: unknown) => MessageBarBodyState;
113+
114+
// @public
115+
export const useSemanticMessageBarStyles: (_state: unknown) => MessageBarState;
116+
117+
// @public
118+
export const useSemanticMessageBarTitleStyles: (_state: unknown) => MessageBarTitleState;
119+
104120
// @public
105121
export const useSemanticOverlayDrawerSurfaceStyles: (_state: unknown) => DialogSurfaceState;
106122

‎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-link": "^9.4.6",
3838
"@fluentui/react-list": "^9.1.6",
3939
"@fluentui/react-motion": "^9.7.2",
40+
"@fluentui/react-message-bar": "^9.4.7",
4041
"@fluentui/react-progress": "^9.2.6",
4142
"@fluentui/react-provider": "^9.20.6",
4243
"@fluentui/react-rating": "^9.1.6",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { useSemanticMessageBarStyles } from './useSemanticMessageBarStyles.styles';
2+
export { useSemanticMessageBarBodyStyles } from './useSemanticMessageBarBodyStyles.styles';
3+
export { useSemanticMessageBarActionsStyles } from './useSemanticMessageBarActionsStyles.styles';
4+
export { useSemanticMessageBarTitleStyles } from './useSemanticMessageBarTitleStyles.styles';

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2+
import { messageBarActionsClassNames, type MessageBarActionsState } from '@fluentui/react-message-bar';
3+
import * as semanticTokens from '@fluentui/semantic-tokens';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
6+
/**
7+
* Styles for the root slot
8+
*/
9+
const useRootBaseStyles = makeResetStyles({
10+
gridArea: 'secondaryActions',
11+
display: 'flex',
12+
columnGap: semanticTokens.gapBetweenCtrlDefault,
13+
paddingRight: semanticTokens.gapBetweenCtrlDefault,
14+
});
15+
16+
const useContainerActionBaseStyles = makeResetStyles({
17+
gridArea: 'actions',
18+
});
19+
20+
const useMultilineStyles = makeStyles({
21+
root: {
22+
justifyContent: 'end',
23+
marginTop: semanticTokens._ctrlMessageBarSpacingTop,
24+
marginBottom: semanticTokens.paddingContentAlignDefault,
25+
marginRight: '0px',
26+
paddingRight: semanticTokens._ctrlMessageBarActionsMultilinePaddingRight,
27+
},
28+
29+
noActions: {
30+
display: 'none',
31+
},
32+
});
33+
34+
/**
35+
* Apply styling to the MessageBarActions slots based on the state
36+
*/
37+
export const useSemanticMessageBarActionsStyles = (_state: unknown): MessageBarActionsState => {
38+
'use no memo';
39+
40+
const state = _state as MessageBarActionsState;
41+
const rootBaseStyles = useRootBaseStyles();
42+
const containerActionBaseStyles = useContainerActionBaseStyles();
43+
const multilineStyles = useMultilineStyles();
44+
state.root.className = mergeClasses(
45+
state.root.className,
46+
messageBarActionsClassNames.root,
47+
rootBaseStyles,
48+
state.layout === 'multiline' && multilineStyles.root,
49+
!state.hasActions && multilineStyles.noActions,
50+
getSlotClassNameProp_unstable(state.root),
51+
);
52+
53+
if (state.containerAction) {
54+
state.containerAction.className = mergeClasses(
55+
state.containerAction.className,
56+
messageBarActionsClassNames.containerAction,
57+
containerActionBaseStyles,
58+
getSlotClassNameProp_unstable(state.containerAction),
59+
);
60+
}
61+
62+
return state;
63+
};

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { makeResetStyles, mergeClasses } from '@griffel/react';
2+
import { messageBarBodyClassNames, type MessageBarBodyState } from '@fluentui/react-message-bar';
3+
import * as semanticTokens from '@fluentui/semantic-tokens';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
6+
const useRootBaseStyles = makeResetStyles({
7+
fontFamily: semanticTokens.textStyleDefaultRegularFontFamily,
8+
fontSize: semanticTokens.textRampItemBodyFontSize,
9+
fontWeight: semanticTokens.textStyleDefaultRegularWeight,
10+
lineHeight: semanticTokens.textRampItemBodyLineHeight,
11+
gridArea: 'body',
12+
paddingRight: semanticTokens.gapBetweenCtrlDefault,
13+
});
14+
15+
/**
16+
* Apply styling to the MessageBarBody slots based on the state
17+
*/
18+
export const useSemanticMessageBarBodyStyles = (_state: unknown): MessageBarBodyState => {
19+
'use no memo';
20+
21+
const state = _state as MessageBarBodyState;
22+
const rootBaseStyles = useRootBaseStyles();
23+
state.root.className = mergeClasses(
24+
state.root.className,
25+
messageBarBodyClassNames.root,
26+
rootBaseStyles,
27+
getSlotClassNameProp_unstable(state.root),
28+
);
29+
30+
return state;
31+
};

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
2+
import { messageBarClassNames, type MessageBarState } from '@fluentui/react-message-bar';
3+
import * as semanticTokens from '@fluentui/semantic-tokens';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
6+
const useRootBaseStyles = makeResetStyles({
7+
whiteSpace: 'nowrap',
8+
display: 'grid',
9+
gridTemplateColumns: 'auto 1fr auto auto',
10+
gridTemplateRows: '1fr',
11+
gridTemplateAreas: '"icon body secondaryActions actions"',
12+
paddingLeft: semanticTokens._ctrlMessageBarPaddingContentAlignDefault,
13+
paddingRight: semanticTokens.paddingContentAlignOutdentIconOnSubtle,
14+
paddingTop: semanticTokens._ctrlMessageBarPaddingVertical,
15+
paddingBottom: semanticTokens._ctrlMessageBarPaddingVertical,
16+
border: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.statusInformativeTintStroke}`,
17+
borderRadius: semanticTokens.cornerCtrlRest,
18+
alignItems: 'center',
19+
minHeight: '36px',
20+
boxSizing: 'border-box',
21+
backgroundColor: semanticTokens.statusImportantTintBackground,
22+
});
23+
24+
const useIconBaseStyles = makeResetStyles({
25+
gridArea: 'icon',
26+
fontSize: semanticTokens.textGlobalBody1FontSize,
27+
marginRight: semanticTokens.gapInsideCtrlDefault,
28+
color: semanticTokens.foregroundCtrlIconOnNeutralRest,
29+
height: semanticTokens.textRampItemHeaderLineHeight,
30+
display: 'flex',
31+
alignItems: 'center',
32+
});
33+
34+
const useReflowSpacerBaseStyles = makeResetStyles({
35+
marginBottom: semanticTokens._ctrlMessageBarReflowSpacerMarginBottom,
36+
gridArea: 'secondaryActions',
37+
});
38+
39+
const useStyles = makeStyles({
40+
rootMultiline: {
41+
whiteSpace: 'normal',
42+
alignItems: 'start',
43+
paddingTop: semanticTokens._ctrlMessageBarSpacingTop,
44+
gridTemplateColumns: 'auto 1fr auto',
45+
gridTemplateAreas: `
46+
"icon body actions"
47+
"secondaryActions secondaryActions secondaryActions"
48+
`,
49+
},
50+
51+
square: {
52+
borderRadius: '0',
53+
},
54+
});
55+
56+
const useIconIntentStyles = makeStyles({
57+
info: {
58+
/** already in base reset styles */
59+
},
60+
error: {
61+
color: semanticTokens._ctrlMessageBarErrorIconColor,
62+
},
63+
warning: {
64+
color: semanticTokens.statusWarningTintForeground,
65+
},
66+
success: {
67+
color: semanticTokens.statusSuccessTintForeground,
68+
},
69+
});
70+
71+
const useRootIntentStyles = makeStyles({
72+
info: {
73+
/** already in base reset styles */
74+
},
75+
error: {
76+
backgroundColor: semanticTokens.statusDangerTintBackground,
77+
...shorthands.borderColor(semanticTokens.statusDangerTintStroke),
78+
},
79+
warning: {
80+
backgroundColor: semanticTokens.statusWarningTintBackground,
81+
...shorthands.borderColor(semanticTokens.statusWarningTintStroke),
82+
},
83+
success: {
84+
backgroundColor: semanticTokens.statusSuccessTintBackground,
85+
...shorthands.borderColor(semanticTokens.statusSuccessTintStroke),
86+
},
87+
});
88+
89+
/**
90+
* Apply styling to the MessageBar slots based on the state
91+
*/
92+
export const useSemanticMessageBarStyles = (_state: unknown): MessageBarState => {
93+
'use no memo';
94+
95+
const state = _state as MessageBarState;
96+
const rootBaseStyles = useRootBaseStyles();
97+
const iconBaseStyles = useIconBaseStyles();
98+
const iconIntentStyles = useIconIntentStyles();
99+
const rootIntentStyles = useRootIntentStyles();
100+
const reflowSpacerStyles = useReflowSpacerBaseStyles();
101+
const styles = useStyles();
102+
103+
state.root.className = mergeClasses(
104+
state.root.className,
105+
messageBarClassNames.root,
106+
rootBaseStyles,
107+
state.layout === 'multiline' && styles.rootMultiline,
108+
state.shape === 'square' && styles.square,
109+
rootIntentStyles[state.intent],
110+
state.transitionClassName,
111+
getSlotClassNameProp_unstable(state.root),
112+
);
113+
114+
if (state.icon) {
115+
state.icon.className = mergeClasses(
116+
state.icon.className,
117+
messageBarClassNames.icon,
118+
iconBaseStyles,
119+
iconIntentStyles[state.intent],
120+
getSlotClassNameProp_unstable(state.icon),
121+
);
122+
}
123+
124+
if (state.bottomReflowSpacer) {
125+
state.bottomReflowSpacer.className = mergeClasses(
126+
state.bottomReflowSpacer.className,
127+
messageBarClassNames.bottomReflowSpacer,
128+
reflowSpacerStyles,
129+
getSlotClassNameProp_unstable(state.bottomReflowSpacer),
130+
);
131+
}
132+
133+
return state;
134+
};

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { makeResetStyles, mergeClasses } from '@griffel/react';
2+
import { messageBarTitleClassNames, type MessageBarTitleState } from '@fluentui/react-message-bar';
3+
import * as semanticTokens from '@fluentui/semantic-tokens';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
6+
/**
7+
* Styles for the root slot
8+
*/
9+
const useRootBaseStyles = makeResetStyles({
10+
fontFamily: semanticTokens.textStyleDefaultHeaderFontFamily,
11+
fontSize: semanticTokens.textRampItemHeaderFontSize,
12+
fontWeight: semanticTokens.textStyleDefaultHeaderWeight,
13+
lineHeight: semanticTokens._ctrlMessageBarTitleLineHeight,
14+
15+
'::after': {
16+
content: '" "',
17+
},
18+
});
19+
20+
/**
21+
* Apply styling to the MessageBarTitle slots based on the state
22+
*/
23+
export const useSemanticMessageBarTitleStyles = (_state: unknown): MessageBarTitleState => {
24+
'use no memo';
25+
26+
const state = _state as MessageBarTitleState;
27+
const rootBaseStyles = useRootBaseStyles();
28+
state.root.className = mergeClasses(
29+
state.root.className,
30+
messageBarTitleClassNames.root,
31+
rootBaseStyles,
32+
getSlotClassNameProp_unstable(state.root),
33+
);
34+
35+
return state;
36+
};

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@ import {
4141
useSemanticDialogSurfaceStyles,
4242
useSemanticDialogTitleStyles,
4343
} from './Dialog';
44+
import {
45+
useSemanticMessageBarStyles,
46+
useSemanticMessageBarBodyStyles,
47+
useSemanticMessageBarActionsStyles,
48+
useSemanticMessageBarTitleStyles,
49+
} from './MessageBar';
4450

4551
export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
4652
// Accordion styles
@@ -94,4 +100,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
94100
useDialogContentStyles_unstable: useSemanticDialogContentStyles,
95101
useDialogSurfaceStyles_unstable: useSemanticDialogSurfaceStyles,
96102
useDialogTitleStyles_unstable: useSemanticDialogTitleStyles,
103+
// MessageBar styles
104+
useMessageBarStyles_unstable: useSemanticMessageBarStyles,
105+
useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles,
106+
useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles,
107+
useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles,
97108
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,9 @@ export {
3939
useSemanticDialogSurfaceStyles,
4040
useSemanticDialogTitleStyles,
4141
} from './component-styles/Dialog';
42+
export {
43+
useSemanticMessageBarStyles,
44+
useSemanticMessageBarBodyStyles,
45+
useSemanticMessageBarActionsStyles,
46+
useSemanticMessageBarTitleStyles,
47+
} from './component-styles/MessageBar';

0 commit comments

Comments
 (0)