Skip to content

Commit f0364e4

Browse files
rachethecreatorMitch-At-Work
rachethecreator
and
Mitch-At-Work
committed
add teaching popover to semantic style hooks (#34898)
Co-authored-by: Mitch-At-Work <[email protected]>
1 parent d3bfa81 commit f0364e4

21 files changed

+843
-0
lines changed

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,18 @@ import { TableSelectionCellState } from '@fluentui/react-table';
7676
import { TableState } from '@fluentui/react-table';
7777
import { TabListState } from '@fluentui/react-tabs';
7878
import { TabState } from '@fluentui/react-tabs';
79+
import { TeachingPopoverBodyState } from '@fluentui/react-teaching-popover';
80+
import { TeachingPopoverCarouselCardState } from '@fluentui/react-teaching-popover';
81+
import { TeachingPopoverCarouselFooterButtonState } from '@fluentui/react-teaching-popover';
82+
import { TeachingPopoverCarouselFooterState } from '@fluentui/react-teaching-popover';
83+
import { TeachingPopoverCarouselNavButtonState } from '@fluentui/react-teaching-popover';
84+
import { TeachingPopoverCarouselNavState } from '@fluentui/react-teaching-popover';
85+
import { TeachingPopoverCarouselPageCountState } from '@fluentui/react-teaching-popover';
86+
import { TeachingPopoverCarouselState } from '@fluentui/react-teaching-popover';
87+
import { TeachingPopoverFooterState } from '@fluentui/react-teaching-popover';
88+
import { TeachingPopoverHeaderState } from '@fluentui/react-teaching-popover';
89+
import { TeachingPopoverSurfaceState } from '@fluentui/react-teaching-popover';
90+
import { TeachingPopoverTitleState } from '@fluentui/react-teaching-popover';
7991
import { TextareaState } from '@fluentui/react-textarea';
8092
import { TextState } from '@fluentui/react-text';
8193
import { ToastBodyState } from '@fluentui/react-toast';
@@ -321,6 +333,42 @@ export const useSemanticTabListStyles: (_state: unknown) => TabListState;
321333
// @public
322334
export const useSemanticTabStyles: (_state: unknown) => TabState;
323335

336+
// @public
337+
export const useSemanticTeachingPopoverBodyStyles: (_state: unknown) => TeachingPopoverBodyState;
338+
339+
// @public
340+
export const useSemanticTeachingPopoverCarouselCardStyles: (_state: unknown) => TeachingPopoverCarouselCardState;
341+
342+
// @public
343+
export const useSemanticTeachingPopoverCarouselFooterButtonStyles: (_state: unknown) => TeachingPopoverCarouselFooterButtonState;
344+
345+
// @public
346+
export const useSemanticTeachingPopoverCarouselFooterStyles: (_state: unknown) => TeachingPopoverCarouselFooterState;
347+
348+
// @public
349+
export const useSemanticTeachingPopoverCarouselNavButtonStyles: (_state: unknown) => TeachingPopoverCarouselNavButtonState;
350+
351+
// @public
352+
export const useSemanticTeachingPopoverCarouselNavStyles: (_state: unknown) => TeachingPopoverCarouselNavState;
353+
354+
// @public
355+
export const useSemanticTeachingPopoverCarouselPageCountStyles: (_state: unknown) => TeachingPopoverCarouselPageCountState;
356+
357+
// @public
358+
export const useSemanticTeachingPopoverCarouselStyles: (_state: unknown) => TeachingPopoverCarouselState;
359+
360+
// @public
361+
export const useSemanticTeachingPopoverFooterStyles: (_state: unknown) => TeachingPopoverFooterState;
362+
363+
// @public
364+
export const useSemanticTeachingPopoverHeaderStyles: (_state: unknown) => TeachingPopoverHeaderState;
365+
366+
// @public
367+
export const useSemanticTeachingPopoverSurfaceStyles: (_state: unknown) => TeachingPopoverSurfaceState;
368+
369+
// @public
370+
export const useSemanticTeachingPopoverTitleStyles: (_state: unknown) => TeachingPopoverTitleState;
371+
324372
// @public
325373
export const useSemanticTextareaStyles: (_state: unknown) => TextareaState;
326374

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@fluentui/react-message-bar": "^9.4.7",
4848
"@fluentui/react-positioning": "^9.16.7",
4949
"@fluentui/react-persona": "^9.3.6",
50+
"@fluentui/react-popover": "^9.10.6",
5051
"@fluentui/react-progress": "^9.2.6",
5152
"@fluentui/react-provider": "^9.20.6",
5253
"@fluentui/react-radio": "^9.3.6",
@@ -60,6 +61,7 @@
6061
"@fluentui/react-table": "^9.16.6",
6162
"@fluentui/react-tabs": "^9.7.6",
6263
"@fluentui/react-tabster": "^9.24.6",
64+
"@fluentui/react-teaching-popover": "^9.4.5",
6365
"@fluentui/react-text": "^9.4.36",
6466
"@fluentui/react-textarea": "^9.4.6",
6567
"@fluentui/react-theme": "^9.1.24",

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export { useSemanticTeachingPopoverBodyStyles } from './useSemanticTeachingPopoverBodyStyles.styles';
2+
export { useSemanticTeachingPopoverCarouselCardStyles } from './useSemanticTeachingPopoverCarouselCardStyles.styles';
3+
export { useSemanticTeachingPopoverCarouselFooterButtonStyles } from './useSemanticTeachingPopoverCarouselFooterButtonStyles.styles';
4+
export { useSemanticTeachingPopoverCarouselFooterStyles } from './useSemanticTeachingPopoverCarouselFooterStyles.styles';
5+
export { useSemanticTeachingPopoverCarouselNavButtonStyles } from './useSemanticTeachingPopoverCarouselNavButtonStyles.styles';
6+
export { useSemanticTeachingPopoverCarouselNavStyles } from './useSemanticTeachingPopoverCarouselNavStyles.styles';
7+
export { useSemanticTeachingPopoverCarouselPageCountStyles } from './useSemanticTeachingPopoverCarouselPageCountStyles.styles';
8+
export { useSemanticTeachingPopoverCarouselStyles } from './useSemanticTeachingPopoverCarouselStyles.styles';
9+
export { useSemanticTeachingPopoverFooterStyles } from './useSemanticTeachingPopoverFooterStyles.styles';
10+
export { useSemanticTeachingPopoverHeaderStyles } from './useSemanticTeachingPopoverHeaderStyles.styles';
11+
export { useSemanticTeachingPopoverSurfaceStyles } from './useSemanticTeachingPopoverSurfaceStyles.styles';
12+
export { useSemanticTeachingPopoverTitleStyles } from './useSemanticTeachingPopoverTitleStyles.styles';

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import { teachingPopoverBodyClassNames, type TeachingPopoverBodyState } from '@fluentui/react-teaching-popover';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
5+
const popoverBodyDimension = 288;
6+
7+
export const useMediaStyles = makeStyles({
8+
base: {
9+
gridArea: 'media',
10+
overflow: 'hidden',
11+
width: 'auto',
12+
marginBottom: '12px',
13+
verticalAlign: 'middle',
14+
justifyContent: 'center',
15+
display: 'flex',
16+
},
17+
short: {
18+
aspectRatio: popoverBodyDimension / 117,
19+
'@supports not (aspect-ratio)': {
20+
height: '117px',
21+
},
22+
},
23+
medium: {
24+
aspectRatio: popoverBodyDimension / 176,
25+
'@supports not (aspect-ratio)': {
26+
height: '176px',
27+
},
28+
},
29+
tall: {
30+
aspectRatio: 1,
31+
'@supports not (aspect-ratio)': {
32+
height: `${popoverBodyDimension}px`,
33+
},
34+
},
35+
});
36+
37+
const useStyles = makeStyles({
38+
root: {
39+
display: 'flex',
40+
flexDirection: 'column',
41+
paddingBottom: '12px',
42+
},
43+
});
44+
45+
/** Applies style classnames to slots */
46+
export const useSemanticTeachingPopoverBodyStyles = (_state: unknown) => {
47+
'use no memo';
48+
49+
const state = _state as TeachingPopoverBodyState;
50+
51+
const { mediaLength } = state;
52+
const styles = useStyles();
53+
const mediaStyles = useMediaStyles();
54+
55+
state.root.className = mergeClasses(
56+
state.root.className,
57+
teachingPopoverBodyClassNames.root,
58+
styles.root,
59+
getSlotClassNameProp_unstable(state.root),
60+
);
61+
62+
if (state.media) {
63+
state.media.className = mergeClasses(
64+
state.media.className,
65+
teachingPopoverBodyClassNames.media,
66+
mediaStyles.base,
67+
mediaStyles[mediaLength],
68+
getSlotClassNameProp_unstable(state.media),
69+
);
70+
}
71+
72+
return state;
73+
};

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import {
3+
teachingPopoverCarouselCardClassNames,
4+
type TeachingPopoverCarouselCardState,
5+
} from '@fluentui/react-teaching-popover';
6+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
7+
8+
const useStyles = makeStyles({
9+
root: {},
10+
});
11+
12+
/** Applies style classnames to slots */
13+
export const useSemanticTeachingPopoverCarouselCardStyles = (_state: unknown) => {
14+
'use no memo';
15+
16+
const state = _state as TeachingPopoverCarouselCardState;
17+
18+
const styles = useStyles();
19+
20+
state.root.className = mergeClasses(
21+
state.root.className,
22+
teachingPopoverCarouselCardClassNames.root,
23+
styles.root,
24+
getSlotClassNameProp_unstable(state.root),
25+
);
26+
27+
return state;
28+
};

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
2+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
3+
import {
4+
teachingPopoverCarouselFooterButtonClassNames,
5+
type TeachingPopoverCarouselFooterButtonState,
6+
} from '@fluentui/react-teaching-popover';
7+
import { useSemanticButtonStyles } from '../Button';
8+
import * as semanticTokens from '@fluentui/semantic-tokens';
9+
10+
const useStyles = makeStyles({
11+
root: {
12+
minWidth: '96px',
13+
},
14+
brandNext: {
15+
color: semanticTokens.foregroundContentBrandPrimary,
16+
backgroundColor: semanticTokens.foregroundCtrlOnBrandRest,
17+
...shorthands.borderColor(semanticTokens.nullColor),
18+
':hover': {
19+
color: semanticTokens.foregroundCtrlActiveBrandHover,
20+
backgroundColor: semanticTokens.foregroundCtrlOnBrandHover,
21+
},
22+
':hover:active': {
23+
color: semanticTokens.foregroundCtrlActiveBrandPressed,
24+
backgroundColor: semanticTokens.foregroundCtrlOnBrandPressed,
25+
},
26+
},
27+
brandPrevious: {
28+
// In brand, this is always 'NeutralForegroundOnBrand'
29+
color: semanticTokens.foregroundCtrlOnBrandRest,
30+
backgroundColor: semanticTokens.backgroundCtrlBrandRest,
31+
...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
32+
':hover': {
33+
color: semanticTokens.foregroundCtrlOnBrandHover,
34+
...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
35+
backgroundColor: semanticTokens.backgroundCtrlBrandHover,
36+
},
37+
':hover:active': {
38+
color: semanticTokens.foregroundCtrlOnBrandPressed,
39+
...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandRest),
40+
backgroundColor: semanticTokens.backgroundCtrlBrandPressed,
41+
},
42+
},
43+
});
44+
45+
/**
46+
* Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
47+
*/
48+
export const useSemanticTeachingPopoverCarouselFooterButtonStyles = (
49+
_state: unknown,
50+
): TeachingPopoverCarouselFooterButtonState => {
51+
'use no memo';
52+
53+
let state = _state as TeachingPopoverCarouselFooterButtonState;
54+
55+
const styles = useStyles();
56+
const { navType, popoverAppearance } = state;
57+
58+
// Apply underlying fluent Button styles
59+
state = {
60+
...state,
61+
...useSemanticButtonStyles(state),
62+
};
63+
64+
state.root.className = mergeClasses(
65+
state.root.className,
66+
teachingPopoverCarouselFooterButtonClassNames.root,
67+
styles.root,
68+
navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious,
69+
navType === 'next' && popoverAppearance === 'brand' && styles.brandNext,
70+
getSlotClassNameProp_unstable(state.root),
71+
);
72+
73+
return state;
74+
};

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import {
3+
teachingPopoverCarouselFooterClassNames,
4+
type TeachingPopoverCarouselFooterState,
5+
} from '@fluentui/react-teaching-popover';
6+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
7+
8+
// Todo: Page change animation & styles
9+
const useStyles = makeStyles({
10+
root: {
11+
display: 'flex',
12+
flexDirection: 'row',
13+
},
14+
rootCentered: {
15+
justifyContent: 'space-between',
16+
gap: '8px',
17+
},
18+
rootRightAligned: {
19+
gap: '8px',
20+
'& :first-child': {
21+
marginInlineEnd: 'auto',
22+
},
23+
},
24+
});
25+
26+
/** Applies style classnames to slots */
27+
export const useSemanticTeachingPopoverCarouselFooterStyles = (_state: unknown) => {
28+
'use no memo';
29+
30+
const state = _state as TeachingPopoverCarouselFooterState;
31+
32+
const styles = useStyles();
33+
const { layout } = state;
34+
35+
state.root.className = mergeClasses(
36+
state.root.className,
37+
teachingPopoverCarouselFooterClassNames.root,
38+
styles.root,
39+
layout === 'centered' ? styles.rootCentered : styles.rootRightAligned,
40+
getSlotClassNameProp_unstable(state.root),
41+
);
42+
43+
if (state.previous) {
44+
state.previous.className = mergeClasses(
45+
state.previous.className,
46+
teachingPopoverCarouselFooterClassNames.previous,
47+
getSlotClassNameProp_unstable(state.previous),
48+
);
49+
}
50+
51+
state.next.className = mergeClasses(
52+
state.next.className,
53+
teachingPopoverCarouselFooterClassNames.next,
54+
getSlotClassNameProp_unstable(state.next),
55+
);
56+
57+
return state;
58+
};

0 commit comments

Comments
 (0)