|
| 1 | +import { makeStyles, mergeClasses } from '@griffel/react'; |
| 2 | +import * as semanticTokens from '@fluentui/semantic-tokens'; |
| 3 | +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; |
| 4 | +import type { TooltipState } from '@fluentui/react-tooltip'; |
| 5 | +import { tokens } from '@fluentui/react-theme'; |
| 6 | +import { createArrowStyles } from '@fluentui/react-positioning'; |
| 7 | + |
| 8 | +const useStyles = makeStyles({ |
| 9 | + root: { |
| 10 | + display: 'none', |
| 11 | + boxSizing: 'border-box', |
| 12 | + maxWidth: '240px', |
| 13 | + cursor: 'default', |
| 14 | + overflowWrap: 'break-word', |
| 15 | + |
| 16 | + borderRadius: semanticTokens.ctrlTooltipCorner, |
| 17 | + border: `1px solid ${semanticTokens.strokeLayer}`, |
| 18 | + |
| 19 | + paddingTop: semanticTokens._ctrlTooltipPaddingTop, |
| 20 | + paddingBottom: semanticTokens._ctrlTooltipPaddingBottom, |
| 21 | + paddingLeft: semanticTokens._ctrlTooltipPaddingLeft, |
| 22 | + paddingRight: semanticTokens._ctrlTooltipPaddingRight, |
| 23 | + |
| 24 | + backgroundColor: semanticTokens.ctrlTooltipBackground, |
| 25 | + color: semanticTokens.ctrlTooltipForeground, |
| 26 | + |
| 27 | + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, |
| 28 | + fontSize: semanticTokens.textRampMetadataFontSize, |
| 29 | + lineHeight: semanticTokens.textRampMetadataLineHeight, |
| 30 | + |
| 31 | + filter: semanticTokens.ctrlTooltipShadow, |
| 32 | + }, |
| 33 | + visible: { |
| 34 | + display: 'block', |
| 35 | + }, |
| 36 | + |
| 37 | + // Semantic-tokens does not include inverted tokens, use existing tokens for now. |
| 38 | + inverted: { |
| 39 | + backgroundColor: tokens.colorNeutralBackgroundStatic, |
| 40 | + color: tokens.colorNeutralForegroundStaticInverted, |
| 41 | + }, |
| 42 | + |
| 43 | + // 6 is defined by a constant internal to tooltip |
| 44 | + // I don't know if any tokens for it, or if it should be a token. |
| 45 | + arrow: createArrowStyles({ arrowHeight: 6, borderColor: semanticTokens.strokeLayer }), |
| 46 | +}); |
| 47 | + |
| 48 | +export const useSemanticTooltipStyles = (_state: unknown): TooltipState => { |
| 49 | + 'use no memo'; |
| 50 | + |
| 51 | + const state = _state as TooltipState; |
| 52 | + |
| 53 | + const styles = useStyles(); |
| 54 | + const { appearance, visible } = state; |
| 55 | + |
| 56 | + state.content.className = mergeClasses( |
| 57 | + state.content.className, |
| 58 | + styles.root, |
| 59 | + appearance === 'inverted' && styles.inverted, |
| 60 | + visible && styles.visible, |
| 61 | + getSlotClassNameProp_unstable(state.content), |
| 62 | + ); |
| 63 | + |
| 64 | + state.arrowClassName = styles.arrow; |
| 65 | + |
| 66 | + return state; |
| 67 | +}; |
0 commit comments