diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index cf9f329f976935..01d55a6def018c 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -61,6 +61,7 @@ "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", "@fluentui/react-toolbar": "^9.4.5", + "@fluentui/react-tooltip": "^9.6.6", "@fluentui/react-tree": "^9.10.9", "@fluentui/react-utilities": "^9.19.0", "@fluentui/semantic-tokens": "0.0.0-alpha.1", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts new file mode 100644 index 00000000000000..6aeb457bbf1cf2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/index.ts @@ -0,0 +1 @@ +export { useSemanticTooltipStyles } from './useSemanticTooltipStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts new file mode 100644 index 00000000000000..b3304ad5a60fe0 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Tooltip/useSemanticTooltipStyles.styles.ts @@ -0,0 +1,67 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import * as semanticTokens from '@fluentui/semantic-tokens'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import type { TooltipState } from '@fluentui/react-tooltip'; +import { tokens } from '@fluentui/react-theme'; +import { createArrowStyles } from '@fluentui/react-positioning'; + +const useStyles = makeStyles({ + root: { + display: 'none', + boxSizing: 'border-box', + maxWidth: '240px', + cursor: 'default', + overflowWrap: 'break-word', + + borderRadius: semanticTokens.ctrlTooltipCorner, + border: `1px solid ${semanticTokens.strokeLayer}`, + + paddingTop: semanticTokens._ctrlTooltipPaddingTop, + paddingBottom: semanticTokens._ctrlTooltipPaddingBottom, + paddingLeft: semanticTokens._ctrlTooltipPaddingLeft, + paddingRight: semanticTokens._ctrlTooltipPaddingRight, + + backgroundColor: semanticTokens.ctrlTooltipBackground, + color: semanticTokens.ctrlTooltipForeground, + + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textRampMetadataFontSize, + lineHeight: semanticTokens.textRampMetadataLineHeight, + + filter: semanticTokens.ctrlTooltipShadow, + }, + visible: { + display: 'block', + }, + + // Semantic-tokens does not include inverted tokens, use existing tokens for now. + inverted: { + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundStaticInverted, + }, + + // 6 is defined by a constant internal to tooltip + // I don't know if any tokens for it, or if it should be a token. + arrow: createArrowStyles({ arrowHeight: 6, borderColor: semanticTokens.strokeLayer }), +}); + +export const useSemanticTooltipStyles = (_state: unknown): TooltipState => { + 'use no memo'; + + const state = _state as TooltipState; + + const styles = useStyles(); + const { appearance, visible } = state; + + state.content.className = mergeClasses( + state.content.className, + styles.root, + appearance === 'inverted' && styles.inverted, + visible && styles.visible, + getSlotClassNameProp_unstable(state.content), + ); + + state.arrowClassName = styles.arrow; + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 9aead4e2d0f70a..cf5528ccdd4531 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -79,6 +79,7 @@ import { useSemanticToolbarRadioButtonStyles, useSemanticToolbarToggleButtonStyles, } from './Toolbar'; +import { useSemanticTooltipStyles } from './Tooltip'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -142,9 +143,6 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useMessageBarBodyStyles_unstable: useSemanticMessageBarBodyStyles, useMessageBarActionsStyles_unstable: useSemanticMessageBarActionsStyles, useMessageBarTitleStyles_unstable: useSemanticMessageBarTitleStyles, - // Tabs styles - useTabStyles_unstable: useSemanticTabStyles, - useTabListStyles_unstable: useSemanticTabListStyles, // Slider styles useSliderStyles_unstable: useSemanticSliderStyles, // Menu styles @@ -176,4 +174,9 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles, useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles, useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles, + // Tabs styles + useTabStyles_unstable: useSemanticTabStyles, + useTabListStyles_unstable: useSemanticTabListStyles, + //Tooltip styles + useTooltipStyles_unstable: useSemanticTooltipStyles, }; diff --git a/packages/semantic-tokens/etc/semantic-tokens.api.md b/packages/semantic-tokens/etc/semantic-tokens.api.md index d8be2aa2fdbd3b..dc9974f6476aed 100644 --- a/packages/semantic-tokens/etc/semantic-tokens.api.md +++ b/packages/semantic-tokens/etc/semantic-tokens.api.md @@ -3224,25 +3224,37 @@ export const _ctrlTabSmGapInsideDefault = "var(--smtc-gap-inside-ctrl-default, v export const _ctrlTabSmPaddingHorizontalDefault = "var(--smtc-padding-ctrl-horizontal-default, var(--spacingHorizontalSNudge))"; // @public (undocumented) -export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background)"; +export const ctrlTooltipBackground = "var(--smtc-ctrl-tooltip-background, var(--colorNeutralBackground1))"; // @public (undocumented) export const ctrlTooltipBackgroundRaw = "--smtc-ctrl-tooltip-background"; // @public (undocumented) -export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest))"; +export const ctrlTooltipCorner = "var(--smtc-ctrl-tooltip-corner, var(--smtc-corner-ctrl-rest, var(--borderRadiusMedium)))"; // @public (undocumented) export const ctrlTooltipCornerRaw = "--smtc-ctrl-tooltip-corner"; // @public (undocumented) -export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground)"; +export const ctrlTooltipForeground = "var(--smtc-ctrl-tooltip-foreground, var(--colorNeutralForeground1))"; // @public (undocumented) export const ctrlTooltipForegroundRaw = "--smtc-ctrl-tooltip-foreground"; +// @public +export const _ctrlTooltipPaddingBottom = "var(--smtc-padding-ctrl-text-bottom, var(--smtc-padding-ctrl-text-top, 6px))"; + +// @public +export const _ctrlTooltipPaddingLeft = "var(--smtc-padding-ctrl-horizontal-default, 11px )"; + +// @public +export const _ctrlTooltipPaddingRight = "var(--smtc-padding-ctrl-horizontal-default, 11px)"; + +// @public +export const _ctrlTooltipPaddingTop = "var(--smtc-padding-ctrl-text-top, 4px)"; + // @public (undocumented) -export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest))"; +export const ctrlTooltipShadow = "var(--smtc-ctrl-tooltip-shadow, var(--smtc-ctrl-fab-shadow-rest, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))"; // @public (undocumented) export const ctrlTooltipShadowRaw = "--smtc-ctrl-tooltip-shadow"; diff --git a/packages/semantic-tokens/src/components/tooltip/tokens.ts b/packages/semantic-tokens/src/components/tooltip/tokens.ts index 447e1286986fdd..c329641175f045 100644 --- a/packages/semantic-tokens/src/components/tooltip/tokens.ts +++ b/packages/semantic-tokens/src/components/tooltip/tokens.ts @@ -1,5 +1,6 @@ // THIS FILE IS GENERATED AS PART OF THE BUILD PROCESS. DO NOT MANUALLY MODIFY THIS FILE import { cornerCtrlRestRaw } from '../../control/variables'; +import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1 } from '../../legacy/tokens'; import { ctrlFabShadowRestRaw } from '../fab/variables'; import { ctrlTooltipCornerRaw, @@ -8,7 +9,7 @@ import { ctrlTooltipShadowRaw, } from './variables'; -export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}))`; -export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw})`; -export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw})`; -export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}))`; +export const ctrlTooltipCorner = `var(${ctrlTooltipCornerRaw}, var(${cornerCtrlRestRaw}, ${borderRadiusMedium}))`; +export const ctrlTooltipBackground = `var(${ctrlTooltipBackgroundRaw}, ${colorNeutralBackground1})`; +export const ctrlTooltipForeground = `var(${ctrlTooltipForegroundRaw}, ${colorNeutralForeground1})`; +export const ctrlTooltipShadow = `var(${ctrlTooltipShadowRaw}, var(${ctrlFabShadowRestRaw}, drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey))))`; diff --git a/packages/semantic-tokens/src/fluentLegacyVariants.ts b/packages/semantic-tokens/src/fluentLegacyVariants.ts index 79ef9f0cd9309c..aa4c7c894e7967 100644 --- a/packages/semantic-tokens/src/fluentLegacyVariants.ts +++ b/packages/semantic-tokens/src/fluentLegacyVariants.ts @@ -713,6 +713,22 @@ export const legacyFluentVariantsValues: LegacyFluentVariants = { f2Token: 'spacingHorizontalSNudge', originalToken: 'paddingCtrlHorizontalDefault', }, + _ctrlTooltipPaddingBottom: { + originalToken: 'paddingCtrlTextBottom', + rawValue: '6px', + }, + _ctrlTooltipPaddingLeft: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px ', + }, + _ctrlTooltipPaddingRight: { + originalToken: 'paddingCtrlHorizontalDefault', + rawValue: '11px', + }, + _ctrlTooltipPaddingTop: { + originalToken: 'paddingCtrlTextTop', + rawValue: '4px', + }, _ctrlTreeGapInsideDefault: { f2Token: 'spacingVerticalXXS', originalToken: 'gapInsideCtrlDefault', diff --git a/packages/semantic-tokens/src/fluentOverrides.ts b/packages/semantic-tokens/src/fluentOverrides.ts index 42d6c0bbde31d0..5e947f8e058ae8 100644 --- a/packages/semantic-tokens/src/fluentOverrides.ts +++ b/packages/semantic-tokens/src/fluentOverrides.ts @@ -154,6 +154,19 @@ export const fluentOverrides: FluentOverrides = { ctrlSliderThumbSizePressed: { rawValue: '20px' }, ctrlSliderThumbSizeRest: { rawValue: '20px' }, ctrlSpinnerStrokeWidth: { f2Token: 'strokeWidthThicker' }, + ctrlTooltipBackground: { + f2Token: 'colorNeutralBackground1', + }, + ctrlTooltipCorner: { + f2Token: 'borderRadiusMedium', + }, + ctrlTooltipForeground: { + f2Token: 'colorNeutralForeground1', + }, + ctrlTooltipShadow: { + rawValue: + `drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) ` + `drop-shadow(0 4px 8px var(--colorNeutralShadowKey))`, + }, foregroundContentBrandPrimary: { f2Token: 'colorBrandForeground1' }, foregroundContentNeutralPrimary: { f2Token: 'colorNeutralForeground1' }, foregroundContentNeutralSecondary: { f2Token: 'colorNeutralForeground2' }, diff --git a/packages/semantic-tokens/src/index.ts b/packages/semantic-tokens/src/index.ts index 5a8d4dc37dd0b9..b5554c0afab905 100644 --- a/packages/semantic-tokens/src/index.ts +++ b/packages/semantic-tokens/src/index.ts @@ -1957,6 +1957,10 @@ export { _ctrlTabSizeDefault, _ctrlTabSmGapInsideDefault, _ctrlTabSmPaddingHorizontalDefault, + _ctrlTooltipPaddingBottom, + _ctrlTooltipPaddingLeft, + _ctrlTooltipPaddingRight, + _ctrlTooltipPaddingTop, _ctrlTreeGapInsideDefault, _ctrlTreeIconOnSubtle, _ctrlTreeIconOnSubtleHover, diff --git a/packages/semantic-tokens/src/legacyVariant/tokens.ts b/packages/semantic-tokens/src/legacyVariant/tokens.ts index 1fa7cdc2ede187..d44da7777df174 100644 --- a/packages/semantic-tokens/src/legacyVariant/tokens.ts +++ b/packages/semantic-tokens/src/legacyVariant/tokens.ts @@ -1430,6 +1430,34 @@ export const _ctrlTabSmGapInsideDefault = `var(${gapInsideCtrlDefaultRaw}, ${spa * please use paddingCtrlHorizontalDefault instead. */ export const _ctrlTabSmPaddingHorizontalDefault = `var(${paddingCtrlHorizontalDefaultRaw}, ${spacingHorizontalSNudge})`; +/** + * This is a legacy variant for paddingCtrlTextBottom to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextBottom instead. + */ +export const _ctrlTooltipPaddingBottom = `var(${paddingCtrlTextBottomRaw}, var(${paddingCtrlTextTopRaw}, 6px))`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingLeft = `var(${paddingCtrlHorizontalDefaultRaw}, 11px )`; +/** + * This is a legacy variant for paddingCtrlHorizontalDefault to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlHorizontalDefault instead. + */ +export const _ctrlTooltipPaddingRight = `var(${paddingCtrlHorizontalDefaultRaw}, 11px)`; +/** + * This is a legacy variant for paddingCtrlTextTop to enable backwards compatibility. + * It's purpose is to support Fluent UI legacy fallback variants only. + * This token is not intended for use in new semantic theme implementations + * please use paddingCtrlTextTop instead. + */ +export const _ctrlTooltipPaddingTop = `var(${paddingCtrlTextTopRaw}, 4px)`; /** * This is a legacy variant for gapInsideCtrlDefault to enable backwards compatibility. * It's purpose is to support Fluent UI legacy fallback variants only.