From 1ca0c639df36becb0044c9a2cd8fc6eec640dcd2 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 18 Nov 2024 10:33:39 -0800 Subject: [PATCH] Fix tests --- packages/@react-spectrum/s2/src/Accordion.tsx | 2 +- packages/@react-spectrum/s2/src/Button.tsx | 6 +++--- .../@react-spectrum/s2/src/ColorSwatchPicker.tsx | 6 +++--- .../@react-spectrum/s2/src/ContextualHelp.tsx | 4 ++-- packages/@react-spectrum/s2/src/Disclosure.tsx | 8 ++++---- packages/@react-spectrum/s2/src/TableView.tsx | 2 +- packages/@react-spectrum/s2/style/index.ts | 16 +++++++++++++++- .../@react-spectrum/s2/style/spectrum-theme.ts | 10 +++------- 8 files changed, 32 insertions(+), 22 deletions(-) diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx index 999630de525..4634215e48a 100644 --- a/packages/@react-spectrum/s2/src/Accordion.tsx +++ b/packages/@react-spectrum/s2/src/Accordion.tsx @@ -15,7 +15,7 @@ import {DisclosureContext} from './Disclosure'; import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared'; import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' }; import React, {createContext, forwardRef} from 'react'; -import {style} from '../style/spectrum-theme' with { type: 'macro' }; +import {style} from '../style' with { type: 'macro' }; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx index ade2e8ac5d4..712a9ee3f58 100644 --- a/packages/@react-spectrum/s2/src/Button.tsx +++ b/packages/@react-spectrum/s2/src/Button.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {baseColor, focusRing, fontRelative, size as sizeValue, style} from '../style' with {type: 'macro'}; +import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'}; import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components'; import {centerBaseline} from './CenterBaseline'; import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; @@ -378,8 +378,8 @@ function Button(props: ButtonProps, ref: FocusableRef) { styles={style({ size: { size: { - S: sizeValue(14), - M: sizeValue(18), + S: 14, + M: 18, L: 20, XL: 24 } diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx index 5d2fe73ede8..b31648930ba 100644 --- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx +++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx @@ -15,7 +15,7 @@ import {Color} from '@react-types/color'; import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch'; import {createContext, forwardRef, ReactElement, ReactNode} from 'react'; import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared'; -import {focusRing, size as sizeValue, style} from '../style' with {type: 'macro'}; +import {focusRing, space, style} from '../style' with {type: 'macro'}; import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'}; import {useDOMRef} from '@react-spectrum/utils'; import {useSpectrumContextProps} from './useSpectrumContextProps'; @@ -61,9 +61,9 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx index 4b357b81e64..881e5f312f7 100644 --- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx @@ -12,7 +12,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; import intlMessages from '../intl/*.json'; import {mergeStyles} from '../style/runtime'; import {Popover, PopoverProps} from './Popover'; -import {style, size as styleSize} from '../style' with {type: 'macro'}; +import {space, style} from '../style' with {type: 'macro'}; import {StyleProps} from './style-utils' with { type: 'macro' }; import {useLocalizedStringFormatter} from '@react-aria/i18n'; import {useSpectrumContextProps} from './useSpectrumContextProps'; @@ -112,7 +112,7 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef) { @@ -319,9 +319,9 @@ const panelStyles = style({ isExpanded: { size: { S: 8, - M: sizeValue(9), + M: 9, L: 12, - XL: sizeValue(15) + XL: 15 } } } diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx index 4d27aca4f63..91f64e0b3ec 100644 --- a/packages/@react-spectrum/s2/src/TableView.tsx +++ b/packages/@react-spectrum/s2/src/TableView.tsx @@ -45,7 +45,7 @@ import { import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {Checkbox} from './Checkbox'; import Chevron from '../ui-icons/Chevron'; -import {colorMix, fontRelative, lightDark, space, style} from '../style/spectrum-theme' with {type: 'macro'}; +import {colorMix, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'}; import {ColumnSize} from '@react-types/table'; import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared'; import {GridNode} from '@react-types/grid'; diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts index ddaf1e5de36..d1bfaae8bd2 100644 --- a/packages/@react-spectrum/s2/style/index.ts +++ b/packages/@react-spectrum/s2/style/index.ts @@ -10,9 +10,23 @@ * governing permissions and limitations under the License. */ -export {baseColor, edgeToText, fontRelative, lightDark, size, space, style} from './spectrum-theme'; +import {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme'; +export {baseColor, edgeToText, lightDark, colorMix, style} from './spectrum-theme'; export type {StyleString} from './types'; +// Wrap these functions in arbitrary value syntax when called from the outside. +export function size(px: number): `[${string}]` { + return `[${internalSize(px)}]`; +} + +export function space(px: number): `[${string}]` { + return `[${internalSpace(px)}]`; +} + +export function fontRelative(base: number, baseFontSize?: number): `[${string}]` { + return `[${internalFontRelative(base, baseFontSize)}]`; +} + export const focusRing = () => ({ outlineStyle: { default: 'none', diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts index 02f4be54483..eec5f20d5b0 100644 --- a/packages/@react-spectrum/s2/style/spectrum-theme.ts +++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts @@ -191,12 +191,8 @@ const negativeSpacing = generateSpacing([ -384 ] as const); -function arbitrary(ctx: MacroContext | void, value: string): `[${string}]` { - return ctx ? `[${value}]` : value as any; -} - export function fontRelative(this: MacroContext | void, base: number, baseFontSize = 14) { - return arbitrary(this, (base / baseFontSize) + 'em'); + return (base / baseFontSize) + 'em'; } export function edgeToText(this: MacroContext | void, height: keyof typeof baseSpacing) { @@ -204,7 +200,7 @@ export function edgeToText(this: MacroContext | void, height: keyof typeof baseS } export function space(this: MacroContext | void, px: number) { - return arbitrary(this, pxToRem(px)); + return pxToRem(px); } const spacing = { @@ -222,7 +218,7 @@ const spacing = { }; export function size(this: MacroContext | void, px: number) { - return arbitrary(this, `calc(${pxToRem(px)} * var(--s2-scale))`); + return `calc(${pxToRem(px)} * var(--s2-scale))`; } const sizing = {