@fluentui/react-tabs 9.0.0-beta.10 → 9.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +72 -1
- package/CHANGELOG.md +23 -6
- package/dist/{react-tabs.d.ts → index.d.ts} +0 -0
- package/lib/components/Tab/useTab.js +3 -0
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.js +6 -6
- package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib/components/Tab/useTabStyles.js +171 -170
- package/lib/components/Tab/useTabStyles.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +3 -0
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +7 -7
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.js +170 -170
- package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
- package/package.json +8 -8
- package/lib/tab.constants.d.ts +0 -62
- package/lib/tab.constants.js +0 -68
- package/lib/tab.constants.js.map +0 -1
- package/lib-commonjs/tab.constants.d.ts +0 -62
- package/lib-commonjs/tab.constants.js +0 -75
- package/lib-commonjs/tab.constants.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport {\n pendingContentSizeTokens,\n pendingSpacingTokens,\n tabIndicatorPadding,\n tabIndicatorStrokeWidths,\n} from '../../tab.constants';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n// TODO temporary export to pass conformance test.\nexport const tabClassName = tabClassNames.root;\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n mediumHorizontal: {\n columnGap: pendingSpacingTokens.sNudge,\n justifyContent: 'center',\n ...shorthands.padding(pendingSpacingTokens.m, pendingSpacingTokens.mNudge),\n },\n mediumVertical: {\n columnGap: pendingSpacingTokens.sNudge,\n justifyContent: 'flex-start',\n minWidth: '120px',\n ...shorthands.padding(pendingSpacingTokens.sNudge, pendingSpacingTokens.mNudge),\n },\n smallHorizontal: {\n columnGap: pendingSpacingTokens.xxs,\n ...shorthands.padding(pendingSpacingTokens.sNudge, pendingSpacingTokens.sNudge),\n },\n smallVertical: {\n columnGap: pendingSpacingTokens.xxs,\n ...shorthands.padding(pendingSpacingTokens.xxs, pendingSpacingTokens.sNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an :after pseudo-element on the root. Since the selection\n // indicator uses an :after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover:before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n ':active:before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n },\n disabled: {\n ':hover:before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n ':active:before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n mediumHorizontal: {\n ':before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.mediumHorizontal,\n left: tabIndicatorPadding.mediumHorizontal,\n right: tabIndicatorPadding.mediumHorizontal,\n },\n },\n mediumVertical: {\n ':before': {\n bottom: tabIndicatorPadding.mediumVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.mediumVertical,\n width: tabIndicatorStrokeWidths.mediumVertical,\n },\n },\n smallHorizontal: {\n ':before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.smallHorizontal,\n left: tabIndicatorPadding.smallHorizontal,\n right: tabIndicatorPadding.smallHorizontal,\n },\n },\n smallVertical: {\n ':before': {\n bottom: tabIndicatorPadding.smallVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.smallVertical,\n width: tabIndicatorStrokeWidths.smallVertical,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n ':after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n ':after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n },\n ':hover:after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n },\n ':active:after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n },\n },\n disabled: {\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n },\n mediumHorizontal: {\n ':after': {\n bottom: '0',\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.mediumHorizontal,\n left: tabIndicatorPadding.mediumHorizontal,\n right: tabIndicatorPadding.mediumHorizontal,\n },\n },\n mediumVertical: {\n ':after': {\n bottom: tabIndicatorPadding.mediumVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.mediumVertical} / 2.0)`),\n left: 0,\n top: tabIndicatorPadding.mediumVertical,\n width: tabIndicatorStrokeWidths.mediumVertical,\n },\n },\n smallHorizontal: {\n ':after': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallHorizontal} / 2.0)`),\n height: tabIndicatorStrokeWidths.smallHorizontal,\n left: tabIndicatorPadding.smallHorizontal,\n right: tabIndicatorPadding.smallHorizontal,\n },\n },\n smallVertical: {\n ':after': {\n bottom: tabIndicatorPadding.smallVertical,\n ...shorthands.borderWidth(`calc(${tabIndicatorStrokeWidths.smallVertical} / 2.0)`),\n left: '0',\n top: tabIndicatorPadding.smallVertical,\n width: tabIndicatorStrokeWidths.smallVertical,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...pendingContentSizeTokens.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(0, pendingSpacingTokens.xxs),\n },\n selected: {\n ...pendingContentSizeTokens.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabSlots, TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTabAnimatedIndicatorStyles_unstable } from './useTabAnimatedIndicator';\n\nexport const tabClassNames: SlotClassNames<TabSlots> = {\n root: 'fui-Tab',\n icon: 'fui-Tab__icon',\n content: 'fui-Tab__content',\n};\n\n// TODO temporary export to pass conformance test.\nexport const tabClassName = tabClassNames.root;\n\n/**\n * Styles for the root slot\n */\n/* eslint-disable @typescript-eslint/naming-convention */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n ...shorthands.borderColor('none'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderWidth(0),\n cursor: 'pointer',\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n fontFamily: tokens.fontFamilyBase,\n lineHeight: tokens.lineHeightBase300,\n outlineStyle: 'none',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n textTransform: 'none',\n },\n mediumHorizontal: {\n columnGap: tokens.spacingHorizontalSNudge,\n justifyContent: 'center',\n ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),\n },\n mediumVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalSNudge,\n justifyContent: 'flex-start',\n minWidth: '120px',\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),\n },\n smallHorizontal: {\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),\n },\n smallVertical: {\n // horizontal spacing is deliberate. This is the gap between icon and content.\n columnGap: tokens.spacingHorizontalXXS,\n ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground2,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n\n '& .fui-Tab__icon': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n cursor: 'not-allowed',\n },\n selected: {\n '& .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1,\n },\n ':hover .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active .fui-Tab__icon': {\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '& .fui-Tab__content': {\n color: tokens.colorNeutralForeground1,\n },\n ':hover .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Hover,\n },\n ':active .fui-Tab__content': {\n color: tokens.colorNeutralForeground1Pressed,\n },\n },\n});\n/* eslint-enable @typescript-eslint/naming-convention */\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n // Tab creates a custom focus indicator because the default focus indicator\n // is applied using an ::after pseudo-element on the root. Since the selection\n // indicator uses an ::after pseudo-element on the root, there is a conflict.\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineWidth: tokens.strokeWidthThick,\n outlineColor: 'transparent',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\n/** Indicator styles for when pending selection */\nconst usePendingIndicatorStyles = makeStyles({\n base: {\n ':hover::before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n ':active::before': {\n backgroundColor: 'none',\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n },\n },\n disabled: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n ':active::before': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n mediumHorizontal: {\n '::before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::before': {\n bottom: tokens.spacingVerticalS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalS,\n width: 0,\n },\n },\n smallHorizontal: {\n '::before': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThick} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::before': {\n bottom: tokens.spacingVerticalXS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalXS,\n width: 0,\n },\n },\n});\n\nconst useActiveIndicatorStyles = makeStyles({\n base: {\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n zIndex: 1,\n },\n },\n selected: {\n '::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n },\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n },\n },\n disabled: {\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralForegroundDisabled),\n },\n },\n mediumHorizontal: {\n '::after': {\n bottom: '0',\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalM,\n right: tokens.spacingHorizontalM,\n },\n },\n mediumVertical: {\n '::after': {\n bottom: tokens.spacingVerticalS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: 0,\n top: tokens.spacingVerticalS,\n width: 0,\n },\n },\n smallHorizontal: {\n '::after': {\n bottom: 0,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThick} / 2.0)`),\n height: 0,\n left: tokens.spacingHorizontalSNudge,\n right: tokens.spacingHorizontalSNudge,\n },\n },\n smallVertical: {\n '::after': {\n bottom: tokens.spacingVerticalXS,\n ...shorthands.borderWidth(`calc(${tokens.strokeWidthThicker} / 2.0)`),\n left: '0',\n top: tokens.spacingVerticalXS,\n width: 0,\n },\n },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n },\n // per design, the small and medium font sizes are the same.\n // the size prop only affects spacing.\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n ...shorthands.overflow('hidden'),\n // content padding is the same for medium & small, horiztonal & vertical\n ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalXXS),\n },\n selected: {\n ...typographyStyles.body1Strong,\n },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n const pendingIndicatorStyles = usePendingIndicatorStyles();\n const activeIndicatorStyles = useActiveIndicatorStyles();\n const iconStyles = useIconStyles();\n const contentStyles = useContentStyles();\n\n const { appearance, disabled, selected, size, vertical } = state;\n\n state.root.className = mergeClasses(\n tabClassNames.root,\n rootStyles.base,\n size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),\n size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),\n focusStyles.base,\n !disabled && appearance === 'subtle' && rootStyles.subtle,\n !disabled && appearance === 'transparent' && rootStyles.transparent,\n !disabled && selected && rootStyles.selected,\n disabled && rootStyles.disabled,\n\n // pending indicator (before pseudo element)\n pendingIndicatorStyles.base,\n size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),\n size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),\n disabled && pendingIndicatorStyles.disabled,\n\n // active indicator (after pseudo element)\n selected && activeIndicatorStyles.base,\n selected && !disabled && activeIndicatorStyles.selected,\n selected &&\n size !== 'small' &&\n (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),\n selected &&\n size === 'small' &&\n (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),\n selected && disabled && activeIndicatorStyles.disabled,\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n state.content.className = mergeClasses(\n tabClassNames.content,\n contentStyles.base,\n selected && contentStyles.selected,\n state.content.className,\n );\n\n useTabAnimatedIndicatorStyles_unstable(state);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.11",
|
|
4
4
|
"description": "Fluent UI React tabs components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,23 +20,23 @@
|
|
|
20
20
|
"start": "yarn storybook",
|
|
21
21
|
"test": "jest --passWithNoTests",
|
|
22
22
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
23
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node
|
|
24
|
-
"storybook": "node
|
|
23
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-tabs/src && yarn docs",
|
|
24
|
+
"storybook": "node ../../../scripts/storybook/runner",
|
|
25
25
|
"type-check": "tsc -b tsconfig.json"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
30
|
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
31
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
31
|
+
"@fluentui/react-context-selector": "9.0.0-rc.7",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@griffel/react": "1.0.3",
|
|
36
|
-
"@fluentui/react-context-selector": "9.0.0-rc.
|
|
37
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
38
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
39
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
36
|
+
"@fluentui/react-context-selector": "9.0.0-rc.7",
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.8",
|
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.6",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.7",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
package/lib/tab.constants.d.ts
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
export declare const pendingContentSizeTokens: {
|
|
2
|
-
body1: {
|
|
3
|
-
fontSize: string;
|
|
4
|
-
fontWeight: string;
|
|
5
|
-
lineHeight: string;
|
|
6
|
-
};
|
|
7
|
-
body1Strong: {
|
|
8
|
-
fontSize: string;
|
|
9
|
-
fontWeight: string;
|
|
10
|
-
lineHeight: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export declare const pendingSpacingTokens: {
|
|
14
|
-
none: string;
|
|
15
|
-
xxs: string;
|
|
16
|
-
xs: string;
|
|
17
|
-
sNudge: string;
|
|
18
|
-
s: string;
|
|
19
|
-
mNudge: string;
|
|
20
|
-
m: string;
|
|
21
|
-
l: string;
|
|
22
|
-
xl: string;
|
|
23
|
-
xxl: string;
|
|
24
|
-
xxxl: string;
|
|
25
|
-
};
|
|
26
|
-
export declare const pendingAnimationDurationTokens: {
|
|
27
|
-
ultraFast: string;
|
|
28
|
-
faster: string;
|
|
29
|
-
fast: string;
|
|
30
|
-
normal: string;
|
|
31
|
-
slow: string;
|
|
32
|
-
slower: string;
|
|
33
|
-
ultraSlow: string;
|
|
34
|
-
};
|
|
35
|
-
export declare const pendingAnimationEasingTokens: {
|
|
36
|
-
accelerateMax: string;
|
|
37
|
-
accelerateMid: string;
|
|
38
|
-
accelerateMin: string;
|
|
39
|
-
declerateMax: string;
|
|
40
|
-
decelerateMid: string;
|
|
41
|
-
decelarateMin: string;
|
|
42
|
-
maxEasyEase: string;
|
|
43
|
-
easyEase: string;
|
|
44
|
-
linear: string;
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Provides shared values between tab style hooks
|
|
48
|
-
* useTabStyles
|
|
49
|
-
* useTabAnimatedIndicator
|
|
50
|
-
*/
|
|
51
|
-
export declare const tabIndicatorPadding: {
|
|
52
|
-
mediumHorizontal: string;
|
|
53
|
-
mediumVertical: string;
|
|
54
|
-
smallHorizontal: string;
|
|
55
|
-
smallVertical: string;
|
|
56
|
-
};
|
|
57
|
-
export declare const tabIndicatorStrokeWidths: {
|
|
58
|
-
mediumHorizontal: string;
|
|
59
|
-
mediumVertical: string;
|
|
60
|
-
smallHorizontal: string;
|
|
61
|
-
smallVertical: string;
|
|
62
|
-
};
|
package/lib/tab.constants.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
// TODO: Constants prefixed with pending should be replaced with design tokens
|
|
2
|
-
// These values were taken from the design token superset figma
|
|
3
|
-
import { tokens } from '@fluentui/react-theme';
|
|
4
|
-
export const pendingContentSizeTokens = {
|
|
5
|
-
// Only body sizes are defined here currently
|
|
6
|
-
body1: {
|
|
7
|
-
fontSize: tokens.fontSizeBase300,
|
|
8
|
-
fontWeight: tokens.fontWeightRegular,
|
|
9
|
-
lineHeight: tokens.lineHeightBase300
|
|
10
|
-
},
|
|
11
|
-
body1Strong: {
|
|
12
|
-
fontSize: tokens.fontSizeBase300,
|
|
13
|
-
fontWeight: tokens.fontWeightSemibold,
|
|
14
|
-
lineHeight: tokens.lineHeightBase300
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
export const pendingSpacingTokens = {
|
|
18
|
-
none: '0',
|
|
19
|
-
xxs: '2px',
|
|
20
|
-
xs: '4px',
|
|
21
|
-
sNudge: '6px',
|
|
22
|
-
s: '8px',
|
|
23
|
-
mNudge: '10px',
|
|
24
|
-
m: '12px',
|
|
25
|
-
l: '16px',
|
|
26
|
-
xl: '20px',
|
|
27
|
-
xxl: '24px',
|
|
28
|
-
xxxl: '32px'
|
|
29
|
-
};
|
|
30
|
-
export const pendingAnimationDurationTokens = {
|
|
31
|
-
ultraFast: '50ms',
|
|
32
|
-
faster: '100ms',
|
|
33
|
-
fast: '150ms',
|
|
34
|
-
normal: '200ms',
|
|
35
|
-
slow: '300ms',
|
|
36
|
-
slower: '400ms',
|
|
37
|
-
ultraSlow: '500ms'
|
|
38
|
-
};
|
|
39
|
-
export const pendingAnimationEasingTokens = {
|
|
40
|
-
accelerateMax: 'cubic-bezier(1,0,1,1)',
|
|
41
|
-
accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
|
|
42
|
-
accelerateMin: 'cubic-bezier(0.8,0,1,1)',
|
|
43
|
-
declerateMax: 'cubic-bezier(0,0,0,1)',
|
|
44
|
-
decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',
|
|
45
|
-
decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',
|
|
46
|
-
maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',
|
|
47
|
-
easyEase: 'cubic-bezier(0.33,0,0.67,1)',
|
|
48
|
-
linear: 'cubic-bezier(0,0,1,1)'
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* Provides shared values between tab style hooks
|
|
52
|
-
* useTabStyles
|
|
53
|
-
* useTabAnimatedIndicator
|
|
54
|
-
*/
|
|
55
|
-
|
|
56
|
-
export const tabIndicatorPadding = {
|
|
57
|
-
mediumHorizontal: pendingSpacingTokens.m,
|
|
58
|
-
mediumVertical: pendingSpacingTokens.s,
|
|
59
|
-
smallHorizontal: pendingSpacingTokens.sNudge,
|
|
60
|
-
smallVertical: pendingSpacingTokens.xs
|
|
61
|
-
};
|
|
62
|
-
export const tabIndicatorStrokeWidths = {
|
|
63
|
-
mediumHorizontal: tokens.strokeWidthThicker,
|
|
64
|
-
mediumVertical: tokens.strokeWidthThicker,
|
|
65
|
-
smallHorizontal: tokens.strokeWidthThick,
|
|
66
|
-
smallVertical: tokens.strokeWidthThicker
|
|
67
|
-
};
|
|
68
|
-
//# sourceMappingURL=tab.constants.js.map
|
package/lib/tab.constants.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":"AAAA;AACA;AAEA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,OAAO,MAAM,wBAAwB,GAAG;AACtC;AACA,EAAA,KAAK,EAAE;AACL,IAAA,QAAQ,EAAE,MAAM,CAAC,eADZ;AAEL,IAAA,UAAU,EAAE,MAAM,CAAC,iBAFd;AAGL,IAAA,UAAU,EAAE,MAAM,CAAC;AAHd,GAF+B;AAOtC,EAAA,WAAW,EAAE;AACX,IAAA,QAAQ,EAAE,MAAM,CAAC,eADN;AAEX,IAAA,UAAU,EAAE,MAAM,CAAC,kBAFR;AAGX,IAAA,UAAU,EAAE,MAAM,CAAC;AAHR;AAPyB,CAAjC;AAcP,OAAO,MAAM,oBAAoB,GAAG;AAClC,EAAA,IAAI,EAAE,GAD4B;AAElC,EAAA,GAAG,EAAE,KAF6B;AAGlC,EAAA,EAAE,EAAE,KAH8B;AAIlC,EAAA,MAAM,EAAE,KAJ0B;AAKlC,EAAA,CAAC,EAAE,KAL+B;AAMlC,EAAA,MAAM,EAAE,MAN0B;AAOlC,EAAA,CAAC,EAAE,MAP+B;AAQlC,EAAA,CAAC,EAAE,MAR+B;AASlC,EAAA,EAAE,EAAE,MAT8B;AAUlC,EAAA,GAAG,EAAE,MAV6B;AAWlC,EAAA,IAAI,EAAE;AAX4B,CAA7B;AAcP,OAAO,MAAM,8BAA8B,GAAG;AAC5C,EAAA,SAAS,EAAE,MADiC;AAE5C,EAAA,MAAM,EAAE,OAFoC;AAG5C,EAAA,IAAI,EAAE,OAHsC;AAI5C,EAAA,MAAM,EAAE,OAJoC;AAK5C,EAAA,IAAI,EAAE,OALsC;AAM5C,EAAA,MAAM,EAAE,OANoC;AAO5C,EAAA,SAAS,EAAE;AAPiC,CAAvC;AAUP,OAAO,MAAM,4BAA4B,GAAG;AAC1C,EAAA,aAAa,EAAE,uBAD2B;AAE1C,EAAA,aAAa,EAAE,2BAF2B;AAG1C,EAAA,aAAa,EAAE,yBAH2B;AAI1C,EAAA,YAAY,EAAE,uBAJ4B;AAK1C,EAAA,aAAa,EAAE,6BAL2B;AAM1C,EAAA,aAAa,EAAE,4BAN2B;AAO1C,EAAA,WAAW,EAAE,2BAP6B;AAQ1C,EAAA,QAAQ,EAAE,6BARgC;AAS1C,EAAA,MAAM,EAAE;AATkC,CAArC;AAYP;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG;AACjC,EAAA,gBAAgB,EAAE,oBAAoB,CAAC,CADN;AAEjC,EAAA,cAAc,EAAE,oBAAoB,CAAC,CAFJ;AAGjC,EAAA,eAAe,EAAE,oBAAoB,CAAC,MAHL;AAIjC,EAAA,aAAa,EAAE,oBAAoB,CAAC;AAJH,CAA5B;AAOP,OAAO,MAAM,wBAAwB,GAAG;AACtC,EAAA,gBAAgB,EAAE,MAAM,CAAC,kBADa;AAEtC,EAAA,cAAc,EAAE,MAAM,CAAC,kBAFe;AAGtC,EAAA,eAAe,EAAE,MAAM,CAAC,gBAHc;AAItC,EAAA,aAAa,EAAE,MAAM,CAAC;AAJgB,CAAjC","sourcesContent":["// TODO: Constants prefixed with pending should be replaced with design tokens\n// These values were taken from the design token superset figma\n\nimport { tokens } from '@fluentui/react-theme';\n\nexport const pendingContentSizeTokens = {\n // Only body sizes are defined here currently\n body1: {\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase300,\n },\n body1Strong: {\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n};\n\nexport const pendingSpacingTokens = {\n none: '0',\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n l: '16px',\n xl: '20px',\n xxl: '24px',\n xxxl: '32px',\n};\n\nexport const pendingAnimationDurationTokens = {\n ultraFast: '50ms',\n faster: '100ms',\n fast: '150ms',\n normal: '200ms',\n slow: '300ms',\n slower: '400ms',\n ultraSlow: '500ms',\n};\n\nexport const pendingAnimationEasingTokens = {\n accelerateMax: 'cubic-bezier(1,0,1,1)',\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n accelerateMin: 'cubic-bezier(0.8,0,1,1)',\n declerateMax: 'cubic-bezier(0,0,0,1)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',\n maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',\n easyEase: 'cubic-bezier(0.33,0,0.67,1)',\n linear: 'cubic-bezier(0,0,1,1)',\n};\n\n/**\n * Provides shared values between tab style hooks\n * useTabStyles\n * useTabAnimatedIndicator\n */\nexport const tabIndicatorPadding = {\n mediumHorizontal: pendingSpacingTokens.m,\n mediumVertical: pendingSpacingTokens.s,\n smallHorizontal: pendingSpacingTokens.sNudge,\n smallVertical: pendingSpacingTokens.xs,\n};\n\nexport const tabIndicatorStrokeWidths = {\n mediumHorizontal: tokens.strokeWidthThicker,\n mediumVertical: tokens.strokeWidthThicker,\n smallHorizontal: tokens.strokeWidthThick,\n smallVertical: tokens.strokeWidthThicker,\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
export declare const pendingContentSizeTokens: {
|
|
2
|
-
body1: {
|
|
3
|
-
fontSize: string;
|
|
4
|
-
fontWeight: string;
|
|
5
|
-
lineHeight: string;
|
|
6
|
-
};
|
|
7
|
-
body1Strong: {
|
|
8
|
-
fontSize: string;
|
|
9
|
-
fontWeight: string;
|
|
10
|
-
lineHeight: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export declare const pendingSpacingTokens: {
|
|
14
|
-
none: string;
|
|
15
|
-
xxs: string;
|
|
16
|
-
xs: string;
|
|
17
|
-
sNudge: string;
|
|
18
|
-
s: string;
|
|
19
|
-
mNudge: string;
|
|
20
|
-
m: string;
|
|
21
|
-
l: string;
|
|
22
|
-
xl: string;
|
|
23
|
-
xxl: string;
|
|
24
|
-
xxxl: string;
|
|
25
|
-
};
|
|
26
|
-
export declare const pendingAnimationDurationTokens: {
|
|
27
|
-
ultraFast: string;
|
|
28
|
-
faster: string;
|
|
29
|
-
fast: string;
|
|
30
|
-
normal: string;
|
|
31
|
-
slow: string;
|
|
32
|
-
slower: string;
|
|
33
|
-
ultraSlow: string;
|
|
34
|
-
};
|
|
35
|
-
export declare const pendingAnimationEasingTokens: {
|
|
36
|
-
accelerateMax: string;
|
|
37
|
-
accelerateMid: string;
|
|
38
|
-
accelerateMin: string;
|
|
39
|
-
declerateMax: string;
|
|
40
|
-
decelerateMid: string;
|
|
41
|
-
decelarateMin: string;
|
|
42
|
-
maxEasyEase: string;
|
|
43
|
-
easyEase: string;
|
|
44
|
-
linear: string;
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Provides shared values between tab style hooks
|
|
48
|
-
* useTabStyles
|
|
49
|
-
* useTabAnimatedIndicator
|
|
50
|
-
*/
|
|
51
|
-
export declare const tabIndicatorPadding: {
|
|
52
|
-
mediumHorizontal: string;
|
|
53
|
-
mediumVertical: string;
|
|
54
|
-
smallHorizontal: string;
|
|
55
|
-
smallVertical: string;
|
|
56
|
-
};
|
|
57
|
-
export declare const tabIndicatorStrokeWidths: {
|
|
58
|
-
mediumHorizontal: string;
|
|
59
|
-
mediumVertical: string;
|
|
60
|
-
smallHorizontal: string;
|
|
61
|
-
smallVertical: string;
|
|
62
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
"use strict"; // TODO: Constants prefixed with pending should be replaced with design tokens
|
|
2
|
-
// These values were taken from the design token superset figma
|
|
3
|
-
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.tabIndicatorStrokeWidths = exports.tabIndicatorPadding = exports.pendingAnimationEasingTokens = exports.pendingAnimationDurationTokens = exports.pendingSpacingTokens = exports.pendingContentSizeTokens = void 0;
|
|
8
|
-
|
|
9
|
-
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
10
|
-
|
|
11
|
-
exports.pendingContentSizeTokens = {
|
|
12
|
-
// Only body sizes are defined here currently
|
|
13
|
-
body1: {
|
|
14
|
-
fontSize: react_theme_1.tokens.fontSizeBase300,
|
|
15
|
-
fontWeight: react_theme_1.tokens.fontWeightRegular,
|
|
16
|
-
lineHeight: react_theme_1.tokens.lineHeightBase300
|
|
17
|
-
},
|
|
18
|
-
body1Strong: {
|
|
19
|
-
fontSize: react_theme_1.tokens.fontSizeBase300,
|
|
20
|
-
fontWeight: react_theme_1.tokens.fontWeightSemibold,
|
|
21
|
-
lineHeight: react_theme_1.tokens.lineHeightBase300
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
exports.pendingSpacingTokens = {
|
|
25
|
-
none: '0',
|
|
26
|
-
xxs: '2px',
|
|
27
|
-
xs: '4px',
|
|
28
|
-
sNudge: '6px',
|
|
29
|
-
s: '8px',
|
|
30
|
-
mNudge: '10px',
|
|
31
|
-
m: '12px',
|
|
32
|
-
l: '16px',
|
|
33
|
-
xl: '20px',
|
|
34
|
-
xxl: '24px',
|
|
35
|
-
xxxl: '32px'
|
|
36
|
-
};
|
|
37
|
-
exports.pendingAnimationDurationTokens = {
|
|
38
|
-
ultraFast: '50ms',
|
|
39
|
-
faster: '100ms',
|
|
40
|
-
fast: '150ms',
|
|
41
|
-
normal: '200ms',
|
|
42
|
-
slow: '300ms',
|
|
43
|
-
slower: '400ms',
|
|
44
|
-
ultraSlow: '500ms'
|
|
45
|
-
};
|
|
46
|
-
exports.pendingAnimationEasingTokens = {
|
|
47
|
-
accelerateMax: 'cubic-bezier(1,0,1,1)',
|
|
48
|
-
accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',
|
|
49
|
-
accelerateMin: 'cubic-bezier(0.8,0,1,1)',
|
|
50
|
-
declerateMax: 'cubic-bezier(0,0,0,1)',
|
|
51
|
-
decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',
|
|
52
|
-
decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',
|
|
53
|
-
maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',
|
|
54
|
-
easyEase: 'cubic-bezier(0.33,0,0.67,1)',
|
|
55
|
-
linear: 'cubic-bezier(0,0,1,1)'
|
|
56
|
-
};
|
|
57
|
-
/**
|
|
58
|
-
* Provides shared values between tab style hooks
|
|
59
|
-
* useTabStyles
|
|
60
|
-
* useTabAnimatedIndicator
|
|
61
|
-
*/
|
|
62
|
-
|
|
63
|
-
exports.tabIndicatorPadding = {
|
|
64
|
-
mediumHorizontal: exports.pendingSpacingTokens.m,
|
|
65
|
-
mediumVertical: exports.pendingSpacingTokens.s,
|
|
66
|
-
smallHorizontal: exports.pendingSpacingTokens.sNudge,
|
|
67
|
-
smallVertical: exports.pendingSpacingTokens.xs
|
|
68
|
-
};
|
|
69
|
-
exports.tabIndicatorStrokeWidths = {
|
|
70
|
-
mediumHorizontal: react_theme_1.tokens.strokeWidthThicker,
|
|
71
|
-
mediumVertical: react_theme_1.tokens.strokeWidthThicker,
|
|
72
|
-
smallHorizontal: react_theme_1.tokens.strokeWidthThick,
|
|
73
|
-
smallVertical: react_theme_1.tokens.strokeWidthThicker
|
|
74
|
-
};
|
|
75
|
-
//# sourceMappingURL=tab.constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["tab.constants.ts"],"names":[],"mappings":"cAAA;AACA;;;;;;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,wBAAA,GAA2B;AACtC;AACA,EAAA,KAAK,EAAE;AACL,IAAA,QAAQ,EAAE,aAAA,CAAA,MAAA,CAAO,eADZ;AAEL,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO,iBAFd;AAGL,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;AAHd,GAF+B;AAOtC,EAAA,WAAW,EAAE;AACX,IAAA,QAAQ,EAAE,aAAA,CAAA,MAAA,CAAO,eADN;AAEX,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFR;AAGX,IAAA,UAAU,EAAE,aAAA,CAAA,MAAA,CAAO;AAHR;AAPyB,CAA3B;AAcA,OAAA,CAAA,oBAAA,GAAuB;AAClC,EAAA,IAAI,EAAE,GAD4B;AAElC,EAAA,GAAG,EAAE,KAF6B;AAGlC,EAAA,EAAE,EAAE,KAH8B;AAIlC,EAAA,MAAM,EAAE,KAJ0B;AAKlC,EAAA,CAAC,EAAE,KAL+B;AAMlC,EAAA,MAAM,EAAE,MAN0B;AAOlC,EAAA,CAAC,EAAE,MAP+B;AAQlC,EAAA,CAAC,EAAE,MAR+B;AASlC,EAAA,EAAE,EAAE,MAT8B;AAUlC,EAAA,GAAG,EAAE,MAV6B;AAWlC,EAAA,IAAI,EAAE;AAX4B,CAAvB;AAcA,OAAA,CAAA,8BAAA,GAAiC;AAC5C,EAAA,SAAS,EAAE,MADiC;AAE5C,EAAA,MAAM,EAAE,OAFoC;AAG5C,EAAA,IAAI,EAAE,OAHsC;AAI5C,EAAA,MAAM,EAAE,OAJoC;AAK5C,EAAA,IAAI,EAAE,OALsC;AAM5C,EAAA,MAAM,EAAE,OANoC;AAO5C,EAAA,SAAS,EAAE;AAPiC,CAAjC;AAUA,OAAA,CAAA,4BAAA,GAA+B;AAC1C,EAAA,aAAa,EAAE,uBAD2B;AAE1C,EAAA,aAAa,EAAE,2BAF2B;AAG1C,EAAA,aAAa,EAAE,yBAH2B;AAI1C,EAAA,YAAY,EAAE,uBAJ4B;AAK1C,EAAA,aAAa,EAAE,6BAL2B;AAM1C,EAAA,aAAa,EAAE,4BAN2B;AAO1C,EAAA,WAAW,EAAE,2BAP6B;AAQ1C,EAAA,QAAQ,EAAE,6BARgC;AAS1C,EAAA,MAAM,EAAE;AATkC,CAA/B;AAYb;;;;AAIG;;AACU,OAAA,CAAA,mBAAA,GAAsB;AACjC,EAAA,gBAAgB,EAAE,OAAA,CAAA,oBAAA,CAAqB,CADN;AAEjC,EAAA,cAAc,EAAE,OAAA,CAAA,oBAAA,CAAqB,CAFJ;AAGjC,EAAA,eAAe,EAAE,OAAA,CAAA,oBAAA,CAAqB,MAHL;AAIjC,EAAA,aAAa,EAAE,OAAA,CAAA,oBAAA,CAAqB;AAJH,CAAtB;AAOA,OAAA,CAAA,wBAAA,GAA2B;AACtC,EAAA,gBAAgB,EAAE,aAAA,CAAA,MAAA,CAAO,kBADa;AAEtC,EAAA,cAAc,EAAE,aAAA,CAAA,MAAA,CAAO,kBAFe;AAGtC,EAAA,eAAe,EAAE,aAAA,CAAA,MAAA,CAAO,gBAHc;AAItC,EAAA,aAAa,EAAE,aAAA,CAAA,MAAA,CAAO;AAJgB,CAA3B","sourcesContent":["// TODO: Constants prefixed with pending should be replaced with design tokens\n// These values were taken from the design token superset figma\n\nimport { tokens } from '@fluentui/react-theme';\n\nexport const pendingContentSizeTokens = {\n // Only body sizes are defined here currently\n body1: {\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase300,\n },\n body1Strong: {\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n};\n\nexport const pendingSpacingTokens = {\n none: '0',\n xxs: '2px',\n xs: '4px',\n sNudge: '6px',\n s: '8px',\n mNudge: '10px',\n m: '12px',\n l: '16px',\n xl: '20px',\n xxl: '24px',\n xxxl: '32px',\n};\n\nexport const pendingAnimationDurationTokens = {\n ultraFast: '50ms',\n faster: '100ms',\n fast: '150ms',\n normal: '200ms',\n slow: '300ms',\n slower: '400ms',\n ultraSlow: '500ms',\n};\n\nexport const pendingAnimationEasingTokens = {\n accelerateMax: 'cubic-bezier(1,0,1,1)',\n accelerateMid: 'cubic-bezier(0.7,0,1,0.5)',\n accelerateMin: 'cubic-bezier(0.8,0,1,1)',\n declerateMax: 'cubic-bezier(0,0,0,1)',\n decelerateMid: 'cubic-bezier(0.1,0.9,0.2,1)',\n decelarateMin: 'cubic-bezier(0.33,0,0.1,1)',\n maxEasyEase: 'cubic-bezier(0.8,0,0.1,1)',\n easyEase: 'cubic-bezier(0.33,0,0.67,1)',\n linear: 'cubic-bezier(0,0,1,1)',\n};\n\n/**\n * Provides shared values between tab style hooks\n * useTabStyles\n * useTabAnimatedIndicator\n */\nexport const tabIndicatorPadding = {\n mediumHorizontal: pendingSpacingTokens.m,\n mediumVertical: pendingSpacingTokens.s,\n smallHorizontal: pendingSpacingTokens.sNudge,\n smallVertical: pendingSpacingTokens.xs,\n};\n\nexport const tabIndicatorStrokeWidths = {\n mediumHorizontal: tokens.strokeWidthThicker,\n mediumVertical: tokens.strokeWidthThicker,\n smallHorizontal: tokens.strokeWidthThick,\n smallVertical: tokens.strokeWidthThicker,\n};\n"],"sourceRoot":"../src/"}
|