From de8118d071983fdc372b1ea24535c38f85e474b9 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 13 Sep 2024 13:33:44 -0300 Subject: [PATCH] feat(tokens): add z-index tokens with fallback values (#32356) --- ...-6453c666-41f3-4fb9-bba7-ca79fa23508d.json | 7 +++ .../src/Theme/colors/ThemeColors.stories.tsx | 19 ++++--- packages/tokens/etc/tokens.api.md | 14 ++++- packages/tokens/src/index.ts | 1 + .../tokens/src/themeToTokensObject.test.ts | 16 +++++- packages/tokens/src/tokens.test.ts | 5 +- packages/tokens/src/tokens.ts | 54 +++++++++++++++++++ packages/tokens/src/types.ts | 17 +++++- 8 files changed, 120 insertions(+), 13 deletions(-) create mode 100644 change/@fluentui-tokens-6453c666-41f3-4fb9-bba7-ca79fa23508d.json diff --git a/change/@fluentui-tokens-6453c666-41f3-4fb9-bba7-ca79fa23508d.json b/change/@fluentui-tokens-6453c666-41f3-4fb9-bba7-ca79fa23508d.json new file mode 100644 index 0000000000000..35544b20be835 --- /dev/null +++ b/change/@fluentui-tokens-6453c666-41f3-4fb9-bba7-ca79fa23508d.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: add z-index tokens", + "packageName": "@fluentui/tokens", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx b/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx index 1962efa5e5d78..ed023f3275d1b 100644 --- a/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx +++ b/packages/react-components/react-theme/stories/src/Theme/colors/ThemeColors.stories.tsx @@ -52,15 +52,18 @@ export const Colors = () => { // It returns tokens matching the input value. const searchToken = React.useCallback( newSearchValue => { - const tokensFoundBySearch = tokens.filter( - token => + const tokensFoundBySearch = tokens.filter(token => { + const tokensMatchSearchValue = (tokenItem?: string | number) => tokenItem?.toString().includes(newSearchValue); + + return ( token.toLowerCase().includes(newSearchValue) || - theme.webLight[token].toString().includes(newSearchValue) || - theme.webDark[token].toString().includes(newSearchValue) || - theme.teamsLight[token].toString().includes(newSearchValue) || - theme.teamsDark[token].toString().includes(newSearchValue) || - theme.teamsHighContrast[token].toString().includes(newSearchValue), - ); + tokensMatchSearchValue(theme.webLight[token]) || + tokensMatchSearchValue(theme.webDark[token]) || + tokensMatchSearchValue(theme.teamsLight[token]) || + tokensMatchSearchValue(theme.teamsDark[token]) || + tokensMatchSearchValue(theme.teamsHighContrast[token]) + ); + }); setTokensSearchResult(tokensFoundBySearch); }, [setTokensSearchResult], diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index 9751ab22c08f6..1d9035d6e0d77 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -449,7 +449,7 @@ export const teamsHighContrastTheme: Theme; export const teamsLightTheme: Theme; // @public (undocumented) -export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens; +export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & ZIndexTokens; // @public export function themeToTokensObject(theme: TTheme): Record; @@ -510,6 +510,18 @@ export const webDarkTheme: Theme; // @public (undocumented) export const webLightTheme: Theme; +// @public +export type ZIndexTokens = { + zIndexBackground?: string; + zIndexContent?: string; + zIndexOverlay?: string; + zIndexPopup?: string; + zIndexMessages?: string; + zIndexFloating?: string; + zIndexPriority?: string; + zIndexDebug?: string; +}; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts index 63ce55b2c1f19..84028a6bb30ec 100644 --- a/packages/tokens/src/index.ts +++ b/packages/tokens/src/index.ts @@ -62,4 +62,5 @@ export type { Theme, TypographyStyle, TypographyStyles, + ZIndexTokens, } from './types'; diff --git a/packages/tokens/src/themeToTokensObject.test.ts b/packages/tokens/src/themeToTokensObject.test.ts index c1cdd6d73d7d6..127c179381926 100644 --- a/packages/tokens/src/themeToTokensObject.test.ts +++ b/packages/tokens/src/themeToTokensObject.test.ts @@ -1,11 +1,22 @@ import { webLightTheme } from './themes/web/lightTheme'; import { themeToTokensObject } from './themeToTokensObject'; import { tokens } from './tokens'; +import { Theme } from './types'; + +function assertKeys(generatedTokens: Record, expectedTokens = tokens) { + Object.keys(generatedTokens).forEach(token => { + expect(expectedTokens).toHaveProperty(token); + expect.objectContaining({ + [token]: expect.stringMatching(`var\\(--${token}(, .+)?\\)`), + }); + }); +} describe('themeToTokensObject', () => { it('passing any of our default themes to the function generates the default tokens object', () => { const generatedTokens = themeToTokensObject(webLightTheme); - expect(generatedTokens).toEqual(tokens); + + assertKeys(generatedTokens); }); it('passing a custom theme with custom tokens on top of a default theme generates the correct tokens object', () => { @@ -17,6 +28,7 @@ describe('themeToTokensObject', () => { customColor3: 'var(--customColor3)', }; const generatedTokens = themeToTokensObject(customTheme); - expect(generatedTokens).toEqual(expectedTokens); + + assertKeys(generatedTokens, expectedTokens); }); }); diff --git a/packages/tokens/src/tokens.test.ts b/packages/tokens/src/tokens.test.ts index 2458c31189d5e..1783cf21ec114 100644 --- a/packages/tokens/src/tokens.test.ts +++ b/packages/tokens/src/tokens.test.ts @@ -4,7 +4,10 @@ import { tokens } from './tokens'; describe('tokens', () => { it('CSS variables match expected format', () => { (Object.keys(tokens) as (keyof Theme)[]).forEach(token => { - expect(tokens[token]).toBe(`var(--${token})`); + const tokenValue = tokens[token]; + const tokenRegex = new RegExp(`var\\(--${token}(, .+)?\\)`); + + expect(tokenValue).toMatch(tokenRegex); }); }); }); diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 6cf29213fcdbd..4036e4e9b4f95 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -539,4 +539,58 @@ export const tokens: Record = { curveEasyEaseMax: 'var(--curveEasyEaseMax)', curveEasyEase: 'var(--curveEasyEase)', curveLinear: 'var(--curveLinear)', + + /** + * ZIndexes + * Special case where the tokens contain default values + * ZIndexes are not mandatory, so they are not included in the theme, but can be used as tokens with default values + */ + + /** + * Elevation 0 + * Can be used for background elements, like surfaces + */ + zIndexBackground: 'var(--zIndexBackground, 0)', + + /** + * Elevation 2 + * Can be used content that is on top of the background, like cards + */ + zIndexContent: 'var(--zIndexContent, 1)', + + /** + * Elevation 4 + * Can be used for overlays, like the backdrop of a modal + */ + zIndexOverlay: 'var(--zIndexOverlay, 1000)', + + /** + * Elevation 8 + * Can be used for popups, like modals and drawers + */ + zIndexPopup: 'var(--zIndexPopup, 2000)', + + /** + * Elevation 16 + * Can be used for messages, like snackbars and toasts + */ + zIndexMessages: 'var(--zIndexMessages, 3000)', + + /** + * Elevation 28 + * Can be used for floating elements, like dropdowns + */ + zIndexFloating: 'var(--zIndexFloating, 4000)', + + /** + * Elevation 64 + * Can be used for high priority floating elements, like tooltips + */ + zIndexPriority: 'var(--zIndexPriority, 5000)', + + /** + * Special elevation + * Can be used for elements that need to be above everything else, like debug overlays + */ + zIndexDebug: 'var(--zIndexDebug, 6000)', }; diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index a33593769759f..5d4646ca3bbac 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -683,6 +683,20 @@ export type CurveTokens = { curveLinear: string; }; +/** + * Design tokens for z-index groups and levels + */ +export type ZIndexTokens = { + zIndexBackground?: string; + zIndexContent?: string; + zIndexOverlay?: string; + zIndexPopup?: string; + zIndexMessages?: string; + zIndexFloating?: string; + zIndexPriority?: string; + zIndexDebug?: string; +}; + /** * Design tokens for shadow levels */ @@ -773,6 +787,7 @@ export type Theme = FontSizeTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & - ColorTokens; + ColorTokens & + ZIndexTokens; export type PartialTheme = Partial;