From 2d27607369e5a90b66940ba4070c917152e07fab Mon Sep 17 00:00:00 2001 From: Simon Jentsch Date: Sat, 21 Dec 2024 22:43:48 +0100 Subject: [PATCH 1/3] feat(theme): Introduce micro spacing for components and named spacing --- src/Box/interpolations/position.ts | 12 +- src/Box/interpolations/spacing.spec.ts | 174 ++++++++++++++----------- src/Box/interpolations/spacing.ts | 51 +++++--- src/Box/system.ts | 22 +++- src/theme/spacing.ts | 51 +++++++- 5 files changed, 206 insertions(+), 104 deletions(-) diff --git a/src/Box/interpolations/position.ts b/src/Box/interpolations/position.ts index 4c63293..8709b72 100644 --- a/src/Box/interpolations/position.ts +++ b/src/Box/interpolations/position.ts @@ -3,7 +3,7 @@ import { identityTransform, InterpolationTransformFn, ResponsiveValue, - spacingTransform, + macroSpacingTransform, system, } from '../system'; @@ -17,6 +17,8 @@ export interface PositionProps { left?: ResponsiveValue; } +const transform = macroSpacingTransform; + export const position = system([ { properties: ['position'], @@ -29,18 +31,18 @@ export const position = system([ }, { properties: ['top'], - transform: spacingTransform, + transform, }, { properties: ['right'], - transform: spacingTransform, + transform, }, { properties: ['bottom'], - transform: spacingTransform, + transform, }, { properties: ['left'], - transform: spacingTransform, + transform, }, ]); diff --git a/src/Box/interpolations/spacing.spec.ts b/src/Box/interpolations/spacing.spec.ts index 4b00961..d03da79 100644 --- a/src/Box/interpolations/spacing.spec.ts +++ b/src/Box/interpolations/spacing.spec.ts @@ -1,6 +1,6 @@ import { defaultTheme } from '../../theme'; import { PabloThemeableProps } from '../../theme/types'; -import { margin, padding } from './spacing'; +import { margin, microMargin, microPadding, padding } from './spacing'; let props: PabloThemeableProps = { theme: defaultTheme, @@ -12,93 +12,113 @@ beforeEach(() => { } as any; }); -test('Margin system', () => { - expect(margin({ m: 10, ...props })).toEqual({ - margin: '80px', +describe.each([ + ['macro margin', margin, 'margin', 0.5, 'm'], + ['macro padding', padding, 'padding', 0.5, 'p'], + ['micro margin', microMargin, 'margin', 0.25, 'mm'], + ['micro padding', microPadding, 'padding', 0.25, 'mp'], +])('%s system', (name, systemFn, property, base, shorthand) => { + test(`${name} system`, () => { + expect(systemFn({ [shorthand]: 10, ...props })).toEqual({ + [property]: `${10 * base}rem`, + }); }); -}); -test('Margin system single props', () => { - expect(margin({ mt: 1, mr: 2, mb: 3, ml: 4, ...props })).toEqual({ - marginTop: '8px', - marginRight: '16px', - marginBottom: '24px', - marginLeft: '32px', + test(`${name} system single props`, () => { + expect( + systemFn({ + [`${shorthand}t`]: 1, + [`${shorthand}r`]: 2, + [`${shorthand}b`]: 3, + [`${shorthand}l`]: 4, + ...props, + }) + ).toEqual({ + [`${property}Top`]: `${1 * base}rem`, + [`${property}Right`]: `${2 * base}rem`, + [`${property}Bottom`]: `${3 * base}rem`, + [`${property}Left`]: `${4 * base}rem`, + }); }); -}); -test('Margin system with x and y props', () => { - expect(margin({ mx: 10, my: 20, ...props })).toEqual({ - marginLeft: '80px', - marginRight: '80px', - marginTop: '160px', - marginBottom: '160px', + test(`${name} system with x and y props`, () => { + expect(systemFn({ [`${shorthand}x`]: 10, [`${shorthand}y`]: 20, ...props })).toEqual({ + [`${property}Left`]: `${10 * base}rem`, + [`${property}Right`]: `${10 * base}rem`, + [`${property}Top`]: `${20 * base}rem`, + [`${property}Bottom`]: `${20 * base}rem`, + }); }); -}); -test('Padding system', () => { - expect(padding({ p: 10, ...props })).toEqual({ - padding: '80px', - }); -}); + test('named spacing', () => { + const namedSpacings = [ + ['xxxs', 0.25], + ['xxs', 0.5], + ['xs', 0.75], + ['sm', 1], + ['md', 1.5], + ['lg', 2], + ['xl', 3], + ['xxl', 4], + ['xxxl', 6], + ] as const; -test('Padding system single props', () => { - expect(padding({ pt: 1, pr: 2, pb: 3, pl: 4, ...props })).toEqual({ - paddingTop: '8px', - paddingRight: '16px', - paddingBottom: '24px', - paddingLeft: '32px', + namedSpacings.forEach(([name, multiplier]) => { + expect(systemFn({ [`${shorthand}`]: name, ...props })).toEqual({ + [property]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}t`]: name, ...props })).toEqual({ + [`${property}Top`]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}r`]: name, ...props })).toEqual({ + [`${property}Right`]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}b`]: name, ...props })).toEqual({ + [`${property}Bottom`]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}l`]: name, ...props })).toEqual({ + [`${property}Left`]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}x`]: name, ...props })).toEqual({ + [`${property}Left`]: `${multiplier * base}rem`, + [`${property}Right`]: `${multiplier * base}rem`, + }); + expect(systemFn({ [`${shorthand}y`]: name, ...props })).toEqual({ + [`${property}Top`]: `${multiplier * base}rem`, + [`${property}Bottom`]: `${multiplier * base}rem`, + }); + }); }); -}); - -test('Padding system with x and y props', () => { - expect(padding({ px: 10, py: 20, ...props })).toEqual({ - paddingLeft: '80px', - paddingRight: '80px', - paddingTop: '160px', - paddingBottom: '160px', - }); -}); -test('Padding system with gap', () => { - expect(padding({ gap: 10, ...props })).toEqual({ - gap: '80px 80px', - }); - expect(padding({ gap: [[10, 1]], ...props })).toEqual({ - gap: '80px 8px', + test(`styled interpolation functions for ${name}`, () => { + expect(systemFn.all(10)(props)).toEqual({ + [property]: `${10 * base}rem`, + }); + expect(systemFn.top(1)(props)).toEqual({ + [`${property}Top`]: `${1 * base}rem`, + }); + expect(systemFn.x(10)(props)).toEqual({ + [`${property}Left`]: `${10 * base}rem`, + [`${property}Right`]: `${10 * base}rem`, + }); + expect(systemFn.y(10)(props)).toEqual({ + [`${property}Top`]: `${10 * base}rem`, + [`${property}Bottom`]: `${10 * base}rem`, + }); }); }); -test('styled interpolation functions', () => { - expect(margin.all(10)(props)).toEqual({ - margin: '80px', - }); - expect(margin.top(1)(props)).toEqual({ - marginTop: '8px', - }); - expect(margin.x(10)(props)).toEqual({ - marginLeft: '80px', - marginRight: '80px', - }); - expect(margin.y(10)(props)).toEqual({ - marginTop: '80px', - marginBottom: '80px', - }); - expect(padding.all(10)(props)).toEqual({ - padding: '80px', - }); - expect(padding.top(1)(props)).toEqual({ - paddingTop: '8px', - }); - expect(padding.x(10)(props)).toEqual({ - paddingLeft: '80px', - paddingRight: '80px', - }); - expect(padding.y(10)(props)).toEqual({ - paddingTop: '80px', - paddingBottom: '80px', - }); - expect(padding.gap(10)(props)).toEqual({ - gap: '80px 80px', +test.each([ + ['macro', 0.5, padding], + ['micro', 0.25, microPadding], +])('%s gap spacing', (_, base, systemFn) => { + expect(systemFn({ gap: 10, ...props })).toEqual({ + gap: `${10 * base}rem ${10 * base}rem`, + }); + expect(systemFn({ gap: [[10, 1]], ...props })).toEqual({ + gap: `${10 * base}rem ${1 * base}rem`, + }); + expect(systemFn.gap(10)(props)).toEqual({ + gap: `${10 * base}rem ${10 * base}rem`, }); }); diff --git a/src/Box/interpolations/spacing.ts b/src/Box/interpolations/spacing.ts index 3b5dee1..ad4c0f6 100644 --- a/src/Box/interpolations/spacing.ts +++ b/src/Box/interpolations/spacing.ts @@ -1,11 +1,20 @@ import { PabloTheme } from '../../theme/types'; -import { ResponsiveValue, spacingTransform, system } from '../system'; +import { + InterpolationReturn, + InterpolationTransformFn, + microSpacingTransform, + macroSpacingTransform, + ResponsiveValue, + system, +} from '../system'; -const getGapSpacing = (value: any, theme: PabloTheme) => { +type SpacingTransformFn = InterpolationTransformFn; + +const getGapSpacing = (transformFn: SpacingTransformFn) => (value: any, theme: PabloTheme) => { if (Array.isArray(value)) { - return value.map((val) => spacingTransform(val, theme)).join(' '); + return value.map((val) => transformFn(val, theme)).join(' '); } - const spacing = spacingTransform(value, theme); + const spacing = transformFn(value, theme); return [spacing, spacing].join(' '); }; @@ -30,56 +39,66 @@ interface PaddingProps { gap?: ResponsiveValue>; } -const getConfig =

(property: P, shortHand: S) => +const getConfig =

( + property: P, + shortHand: S, + transform: SpacingTransformFn +) => [ { properties: [property], - transform: spacingTransform, + transform, fromProps: [shortHand], as: 'all', }, { properties: [`${property}Top`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}t`], as: 'top', }, { properties: [`${property}Right`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}r`], as: 'right', }, { properties: [`${property}Bottom`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}b`], as: 'bottom', }, { properties: [`${property}Left`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}l`], as: 'left', }, { properties: [`${property}Left`, `${property}Right`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}x`], as: 'x', }, { properties: [`${property}Top`, `${property}Bottom`], - transform: spacingTransform, + transform, fromProps: [`${shortHand}y`], as: 'y', }, ] as const; -const margin = system([...getConfig('margin', 'm')]); +const margin = system([...getConfig('margin', 'm', macroSpacingTransform)]); +const microMargin = system([...getConfig('margin', 'mm', microSpacingTransform)]); const padding = system([ - ...getConfig('padding', 'p'), - { properties: ['gap'], transform: getGapSpacing }, + ...getConfig('padding', 'p', macroSpacingTransform), + { properties: ['gap'], transform: getGapSpacing(macroSpacingTransform) }, +]); + +const microPadding = system([ + ...getConfig('padding', 'mp', microSpacingTransform), + { properties: ['gap'], transform: getGapSpacing(microSpacingTransform) }, ]); -export { margin, padding, MarginProps, PaddingProps }; +export { margin, padding, microMargin, microPadding, MarginProps, PaddingProps }; diff --git a/src/Box/system.ts b/src/Box/system.ts index c5c4ca0..875fbfd 100644 --- a/src/Box/system.ts +++ b/src/Box/system.ts @@ -7,6 +7,7 @@ import { enforceArray } from '../utils/enforceArray'; import { getByPath } from '../utils/getByPath'; import { Colors } from '../theme/colors'; import { KeyMap } from '../types'; +import { spacingNames } from '../theme/spacing'; type InterpolationReturn = string | number | null | undefined; type IdentityTransformFn = InterpolationTransformFn; @@ -118,9 +119,20 @@ const identityTransform: IdentityTransformFn = (value: T): T => value; const pixelTransform: InterpolationTransformFn = stringableTransform( (value) => `${value}px` ); -const spacingTransform: InterpolationTransformFn = stringableTransform( - (value, theme) => `${value * theme.spacing}px` -); +const spacingTransform = + (name: string): InterpolationTransformFn => + (value, theme) => { + if (typeof value === 'string' && spacingNames.includes(value as any)) { + return `${theme.spacing.sizes[value] * theme.spacing[name]}${theme.spacing.unit}`; + } + if (typeof value === 'string') { + return value; + } + return `${value * theme.spacing[name]}${theme.spacing.unit}`; + }; + +const macroSpacingTransform = spacingTransform('macro'); +const microSpacingTransform = spacingTransform('micro'); const colorTransform: InterpolationTransformFn> = (value) => (getByPath(themeVars.colors as Colors, value) as InterpolationReturn) || value; @@ -226,6 +238,7 @@ const system = ( export type { ResponsiveValue, + InterpolationReturn, InterpolationTransformFn, InterpolationFunction, IdentityTransformFn, @@ -236,7 +249,8 @@ export { system, systemInterpolation, pixelTransform, - spacingTransform, + macroSpacingTransform, + microSpacingTransform, identityTransform, colorTransform, }; diff --git a/src/theme/spacing.ts b/src/theme/spacing.ts index 4ee14e8..cef5fa2 100644 --- a/src/theme/spacing.ts +++ b/src/theme/spacing.ts @@ -1,3 +1,50 @@ -export type Spacing = number; +export interface SpacingSizes { + xxxs: number; + xxs: number; + xs: number; + sm: number; + md: number; + lg: number; + xl: number; + xxl: number; + xxxl: number; +} -export const spacing: Spacing = 8; +export interface Spacing { + unit: 'rem' | 'em' | 'px'; + macro: number; + micro: number; + sizes: SpacingSizes; +} + +export const spacingNames: Array = [ + 'xxxs', + 'xxs', + 'xs', + 'sm', + 'md', + 'lg', + 'xl', + 'xxl', + 'xxxl', +]; + +export const spacing: Spacing = { + unit: 'rem', + // Spacing for layouts + macro: 0.5, + // Spacing for components + micro: 0.25, + // Sizes with multipliers for unit + sizes: { + xxxs: 0.25, + xxs: 0.5, + xs: 0.75, + sm: 1, + md: 1.5, + lg: 2, + xl: 3, + xxl: 4, + xxxl: 6, + }, +}; From 44369abe20b63f2910d7e6036a932992acdb5116 Mon Sep 17 00:00:00 2001 From: Simon Jentsch Date: Sun, 22 Dec 2024 00:34:24 +0100 Subject: [PATCH 2/3] Fix tests --- benchmark/button/SimpleThemedButton.tsx | 2 +- src/Box/Box.tsx | 8 +- src/Box/interpolations/position.spec.ts | 8 +- src/Box/interpolations/spacing.spec.ts | 43 +++- src/Box/interpolations/spacing.ts | 29 ++- src/Box/system.ts | 21 +- src/Button/Button.spec.tsx | 4 +- src/Button/__snapshots__/Button.spec.tsx.snap | 108 ++++---- src/Button/styles.ts | 2 +- src/ButtonBar/ButtonBar.spec.tsx | 2 +- .../__snapshots__/ButtonBar.spec.tsx.snap | 12 +- src/Card/__snapshots__/Card.spec.tsx.snap | 4 +- src/Checkbox/Checkbox.spec.tsx | 32 ++- .../__snapshots__/Checkbox.spec.tsx.snap | 22 +- src/Input/__snapshots__/Input.spec.tsx.snap | 14 +- src/Modal/Modal.spec.tsx | 6 +- src/Modal/__snapshots__/Modal.spec.tsx.snap | 16 +- .../__snapshots__/NativeSelect.spec.tsx.snap | 30 +-- src/Radio/Radio.spec.tsx | 23 +- src/Radio/RadioGroup.spec.tsx | 12 +- src/Radio/__snapshots__/Radio.spec.tsx.snap | 22 +- .../__snapshots__/RadioGroup.spec.tsx.snap | 28 +-- .../__snapshots__/SidebarNav.spec.tsx.snap | 22 +- src/Slider/__snapshots__/Slider.spec.tsx.snap | 8 +- src/Switch/Switch.spec.tsx | 24 +- src/Switch/__snapshots__/Switch.spec.tsx.snap | 18 +- src/Tabs/__snapshots__/Tabs.spec.tsx.snap | 230 +++++++++--------- .../__snapshots__/TextArea.spec.tsx.snap | 14 +- .../__snapshots__/ToastCard.spec.tsx.snap | 38 +-- .../__snapshots__/ToastProvider.spec.tsx.snap | 2 +- .../__snapshots__/Toolbar.spec.tsx.snap | 10 +- src/styleHelpers/getSpacing.spec.ts | 14 +- src/styleHelpers/getSpacing.ts | 7 +- src/theme/defaultTheme.ts | 4 +- src/theme/spacing.ts | 5 +- src/theme/types.ts | 4 + 36 files changed, 467 insertions(+), 381 deletions(-) diff --git a/benchmark/button/SimpleThemedButton.tsx b/benchmark/button/SimpleThemedButton.tsx index 4592a92..2c24883 100644 --- a/benchmark/button/SimpleThemedButton.tsx +++ b/benchmark/button/SimpleThemedButton.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styled from '@emotion/styled'; import { PabloThemeProvider } from '../../src/theme'; import { themeVars } from '../../src/theme/themeVars'; -import { getSpacing } from '../../src/utils/styleHelpers'; +import { getSpacing } from '../../src/styleHelpers'; const color = 'brand'; const SimpleThemedButton = styled.button` diff --git a/src/Box/Box.tsx b/src/Box/Box.tsx index f8ec9c1..3dd61ab 100644 --- a/src/Box/Box.tsx +++ b/src/Box/Box.tsx @@ -3,7 +3,7 @@ import { color, ColorProps } from './interpolations/color'; import { CssFunctionReturn } from '../types'; import { baseStyle } from '../shared/baseStyle'; import { interpolateCssProp } from '../utils/interpolateCssProp'; -import { margin, MarginProps, PaddingProps, padding } from './interpolations/spacing'; +import { margin, padding, spacing, SpacingProps } from './interpolations/spacing'; import { layout, LayoutProps } from './interpolations/layout'; import { svg, SvgProps } from './interpolations/svg'; import { position, PositionProps } from './interpolations/position'; @@ -13,8 +13,7 @@ export interface BoxCssProps { css?: CssFunctionReturn; } -export type BoxProps = MarginProps & - PaddingProps & +export type BoxProps = SpacingProps & ColorProps & LayoutProps & FlexItemProps & @@ -32,8 +31,7 @@ export const Box = styled.div` ${boxInterpolateFn} `; -export type LayoutBoxProps = MarginProps & - PaddingProps & +export type LayoutBoxProps = SpacingProps & FlexItemProps & LayoutProps & PositionProps & diff --git a/src/Box/interpolations/position.spec.ts b/src/Box/interpolations/position.spec.ts index 8865ea3..e5c7cf0 100644 --- a/src/Box/interpolations/position.spec.ts +++ b/src/Box/interpolations/position.spec.ts @@ -23,7 +23,7 @@ test('position', () => { test('top', () => { expect(position({ ...props, top: 2 })).toEqual({ - top: '16px', + top: '1rem', }); expect(position({ ...props, top: '100%' })).toEqual({ top: '100%', @@ -32,7 +32,7 @@ test('top', () => { test('right', () => { expect(position({ ...props, right: 2 })).toEqual({ - right: '16px', + right: '1rem', }); expect(position({ ...props, right: '100%' })).toEqual({ right: '100%', @@ -41,7 +41,7 @@ test('right', () => { test('bottom', () => { expect(position({ ...props, bottom: 2 })).toEqual({ - bottom: '16px', + bottom: '1rem', }); expect(position({ ...props, bottom: '100%' })).toEqual({ bottom: '100%', @@ -50,7 +50,7 @@ test('bottom', () => { test('left', () => { expect(position({ ...props, left: 2 })).toEqual({ - left: '16px', + left: '1rem', }); expect(position({ ...props, left: '100%' })).toEqual({ left: '100%', diff --git a/src/Box/interpolations/spacing.spec.ts b/src/Box/interpolations/spacing.spec.ts index d03da79..1597601 100644 --- a/src/Box/interpolations/spacing.spec.ts +++ b/src/Box/interpolations/spacing.spec.ts @@ -17,7 +17,7 @@ describe.each([ ['macro padding', padding, 'padding', 0.5, 'p'], ['micro margin', microMargin, 'margin', 0.25, 'mm'], ['micro padding', microPadding, 'padding', 0.25, 'mp'], -])('%s system', (name, systemFn, property, base, shorthand) => { +])('%s system', (name, systemFn: any, property, base, shorthand) => { test(`${name} system`, () => { expect(systemFn({ [shorthand]: 10, ...props })).toEqual({ [property]: `${10 * base}rem`, @@ -111,7 +111,7 @@ describe.each([ test.each([ ['macro', 0.5, padding], ['micro', 0.25, microPadding], -])('%s gap spacing', (_, base, systemFn) => { +])('%s gap spacing', (_, base, systemFn: typeof padding) => { expect(systemFn({ gap: 10, ...props })).toEqual({ gap: `${10 * base}rem ${10 * base}rem`, }); @@ -122,3 +122,42 @@ test.each([ gap: `${10 * base}rem ${10 * base}rem`, }); }); + +test('getSpacing', () => { + expect(margin.get('xxxs')(props)).toEqual('0.125rem'); + expect(margin.get('xxs')(props)).toEqual('0.25rem'); + expect(margin.get('xs')(props)).toEqual('0.375rem'); + expect(margin.get('sm')(props)).toEqual('0.5rem'); + expect(margin.get('md')(props)).toEqual('0.75rem'); + expect(margin.get('lg')(props)).toEqual('1rem'); + expect(margin.get('xl')(props)).toEqual('1.5rem'); + expect(margin.get('xxl')(props)).toEqual('2rem'); + expect(margin.get('xxxl')(props)).toEqual('3rem'); + expect(padding.get('xxxs')(props)).toEqual('0.125rem'); + expect(padding.get('xxs')(props)).toEqual('0.25rem'); + expect(padding.get('xs')(props)).toEqual('0.375rem'); + expect(padding.get('sm')(props)).toEqual('0.5rem'); + expect(padding.get('md')(props)).toEqual('0.75rem'); + expect(padding.get('lg')(props)).toEqual('1rem'); + expect(padding.get('xl')(props)).toEqual('1.5rem'); + expect(padding.get('xxl')(props)).toEqual('2rem'); + expect(padding.get('xxxl')(props)).toEqual('3rem'); + expect(microMargin.get('xxxs')(props)).toEqual('0.0625rem'); + expect(microMargin.get('xxs')(props)).toEqual('0.125rem'); + expect(microMargin.get('xs')(props)).toEqual('0.1875rem'); + expect(microMargin.get('sm')(props)).toEqual('0.25rem'); + expect(microMargin.get('md')(props)).toEqual('0.375rem'); + expect(microMargin.get('lg')(props)).toEqual('0.5rem'); + expect(microMargin.get('xl')(props)).toEqual('0.75rem'); + expect(microMargin.get('xxl')(props)).toEqual('1rem'); + expect(microMargin.get('xxxl')(props)).toEqual('1.5rem'); + expect(microPadding.get('xxxs')(props)).toEqual('0.0625rem'); + expect(microPadding.get('xxs')(props)).toEqual('0.125rem'); + expect(microPadding.get('xs')(props)).toEqual('0.1875rem'); + expect(microPadding.get('sm')(props)).toEqual('0.25rem'); + expect(microPadding.get('md')(props)).toEqual('0.375rem'); + expect(microPadding.get('lg')(props)).toEqual('0.5rem'); + expect(microPadding.get('xl')(props)).toEqual('0.75rem'); + expect(microPadding.get('xxl')(props)).toEqual('1rem'); + expect(microPadding.get('xxxl')(props)).toEqual('1.5rem'); +}); diff --git a/src/Box/interpolations/spacing.ts b/src/Box/interpolations/spacing.ts index ad4c0f6..4ad1c8b 100644 --- a/src/Box/interpolations/spacing.ts +++ b/src/Box/interpolations/spacing.ts @@ -1,3 +1,4 @@ +import { SpacingNames } from '../../theme/spacing'; import { PabloTheme } from '../../theme/types'; import { InterpolationReturn, @@ -39,6 +40,8 @@ interface PaddingProps { gap?: ResponsiveValue>; } +type SpacingProps = MarginProps & PaddingProps; + const getConfig =

( property: P, shortHand: S, @@ -89,16 +92,26 @@ const getConfig =

( }, ] as const; -const margin = system([...getConfig('margin', 'm', macroSpacingTransform)]); -const microMargin = system([...getConfig('margin', 'mm', microSpacingTransform)]); -const padding = system([ +const marginConfig = getConfig('margin', 'm', macroSpacingTransform); +const paddingConfig = [ ...getConfig('padding', 'p', macroSpacingTransform), { properties: ['gap'], transform: getGapSpacing(macroSpacingTransform) }, -]); - -const microPadding = system([ +] as const; +const microMarginConfig = getConfig('margin', 'mm', microSpacingTransform); +const microPaddingConfig = [ ...getConfig('padding', 'mp', microSpacingTransform), { properties: ['gap'], transform: getGapSpacing(microSpacingTransform) }, -]); +] as const; + +const macroGetter = (value: number | SpacingNames) => (props) => + macroSpacingTransform(value, props.theme); + +const microGetter = (value: number | SpacingNames) => (props) => + microSpacingTransform(value, props.theme); + +const margin = system([...marginConfig], macroGetter); +const microMargin = system([...microMarginConfig], microGetter); +const padding = system([...paddingConfig], macroGetter); +const microPadding = system([...microPaddingConfig], microGetter); -export { margin, padding, microMargin, microPadding, MarginProps, PaddingProps }; +export { margin, padding, microMargin, microPadding, MarginProps, PaddingProps, SpacingProps }; diff --git a/src/Box/system.ts b/src/Box/system.ts index 875fbfd..28919fb 100644 --- a/src/Box/system.ts +++ b/src/Box/system.ts @@ -2,7 +2,7 @@ import type { CSSObject } from '@emotion/react'; import { mediaQueryAbove } from '../breakpoints/mediaQueryFns'; import { themeVars } from '../theme'; import { Breakpoint } from '../theme/breakpoints'; -import { PabloTheme, PabloThemeableProps } from '../theme/types'; +import { PabloTheme, PabloThemeableProps, ThemeValueGetter } from '../theme/types'; import { enforceArray } from '../utils/enforceArray'; import { getByPath } from '../utils/getByPath'; import { Colors } from '../theme/colors'; @@ -97,13 +97,16 @@ type ArrayStyledInterpolationFunctions[] | SystemPropertyConfig, + A extends ThemeValueGetter = any, T = any, > = InterpolationFunction> & (C extends readonly SystemPropertyConfig[] ? ArrayStyledInterpolationFunctions : C extends SystemPropertyConfig ? StyledInterpolationFunctions - : never); + : never) & { + get: A extends ThemeValueGetter ? A : never; + }; type InterpolateReturnTuple = readonly [string, InterpolationReturn, Breakpoint | null]; @@ -229,11 +232,17 @@ const createSystemProperties = (configs: T): S return interpolationFn as SystemFn; }; -const system = ( - config: T -): SystemFn => { +const system = < + const T extends SystemPropertyConfig | SystemPropertyConfig[], + const A extends ThemeValueGetter, +>( + config: T, + getterFn?: A +): SystemFn => { const arrayConfig = enforceArray(config); - return createSystemProperties(arrayConfig) as SystemFn; + const properties = createSystemProperties(arrayConfig); + properties.get = getterFn; + return properties as SystemFn; }; export type { diff --git a/src/Button/Button.spec.tsx b/src/Button/Button.spec.tsx index dcf40ac..a8010a0 100644 --- a/src/Button/Button.spec.tsx +++ b/src/Button/Button.spec.tsx @@ -363,14 +363,14 @@ test('render button with start icon', () => { const { container, getByTestId } = renderComponent({ startIcon:

myIcon
}); expect(container).toMatchSnapshot(); expect(getByTestId('pbl-button-icon')).toBeDefined(); - expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-right', '8px'); + expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-right', '0.5rem'); }); test('render button with end icon', () => { const { container, getByTestId } = renderComponent({ endIcon:
myIcon
}); expect(container).toMatchSnapshot(); expect(getByTestId('pbl-button-icon')).toBeDefined(); - expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-left', '8px'); + expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-left', '0.5rem'); }); test('disable button element when disabled prop is true', () => { diff --git a/src/Button/__snapshots__/Button.spec.tsx.snap b/src/Button/__snapshots__/Button.spec.tsx.snap index 588e705..cb510f2 100644 --- a/src/Button/__snapshots__/Button.spec.tsx.snap +++ b/src/Button/__snapshots__/Button.spec.tsx.snap @@ -19,7 +19,7 @@ exports[`render button with end icon 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -43,7 +43,7 @@ exports[`render button with end icon 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -82,7 +82,7 @@ exports[`render button with end icon 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - margin-left: 8px; + margin-left: 0.5rem; } .emotion-2, @@ -133,7 +133,7 @@ exports[`render button with start icon 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -157,7 +157,7 @@ exports[`render button with start icon 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -185,7 +185,7 @@ exports[`render button with start icon 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - margin-right: 8px; + margin-right: 0.5rem; } .emotion-1, @@ -247,7 +247,7 @@ exports[`render primary brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -271,7 +271,7 @@ exports[`render primary brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -331,7 +331,7 @@ exports[`render primary negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -355,7 +355,7 @@ exports[`render primary negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -415,7 +415,7 @@ exports[`render primary plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -439,7 +439,7 @@ exports[`render primary plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -499,7 +499,7 @@ exports[`render primary positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -523,7 +523,7 @@ exports[`render primary positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { @@ -583,7 +583,7 @@ exports[`render primaryInverted brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -607,7 +607,7 @@ exports[`render primaryInverted brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -667,7 +667,7 @@ exports[`render primaryInverted negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -691,7 +691,7 @@ exports[`render primaryInverted negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -751,7 +751,7 @@ exports[`render primaryInverted plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -775,7 +775,7 @@ exports[`render primaryInverted plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -835,7 +835,7 @@ exports[`render primaryInverted positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -859,7 +859,7 @@ exports[`render primaryInverted positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { @@ -919,7 +919,7 @@ exports[`render secondary brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -943,7 +943,7 @@ exports[`render secondary brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -1003,7 +1003,7 @@ exports[`render secondary negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1027,7 +1027,7 @@ exports[`render secondary negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -1087,7 +1087,7 @@ exports[`render secondary plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1111,7 +1111,7 @@ exports[`render secondary plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -1171,7 +1171,7 @@ exports[`render secondary positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1195,7 +1195,7 @@ exports[`render secondary positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { @@ -1255,7 +1255,7 @@ exports[`render secondaryInverted brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1279,7 +1279,7 @@ exports[`render secondaryInverted brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -1339,7 +1339,7 @@ exports[`render secondaryInverted negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1363,7 +1363,7 @@ exports[`render secondaryInverted negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -1423,7 +1423,7 @@ exports[`render secondaryInverted plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1447,7 +1447,7 @@ exports[`render secondaryInverted plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -1507,7 +1507,7 @@ exports[`render secondaryInverted positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1531,7 +1531,7 @@ exports[`render secondaryInverted positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { @@ -1591,7 +1591,7 @@ exports[`render text brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1615,7 +1615,7 @@ exports[`render text brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -1675,7 +1675,7 @@ exports[`render text negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1699,7 +1699,7 @@ exports[`render text negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -1759,7 +1759,7 @@ exports[`render text plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1783,7 +1783,7 @@ exports[`render text plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -1843,7 +1843,7 @@ exports[`render text positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1867,7 +1867,7 @@ exports[`render text positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { @@ -1927,7 +1927,7 @@ exports[`render textInverted brand color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -1951,7 +1951,7 @@ exports[`render textInverted brand color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-0:hover:enabled { @@ -2011,7 +2011,7 @@ exports[`render textInverted negative color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -2035,7 +2035,7 @@ exports[`render textInverted negative color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-negative-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-negative-lightest); } .emotion-0:hover:enabled { @@ -2095,7 +2095,7 @@ exports[`render textInverted plain color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -2119,7 +2119,7 @@ exports[`render textInverted plain color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-gray-50); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-gray-50); } .emotion-0:hover:enabled { @@ -2179,7 +2179,7 @@ exports[`render textInverted positive color button 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -2203,7 +2203,7 @@ exports[`render textInverted positive color button 1`] = ` } .emotion-0:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-positive-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-positive-lightest); } .emotion-0:hover:enabled { diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 197065d..544ea3a 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -92,7 +92,7 @@ const gray = themeVars.colors.gray; export const buttonStyles: ButtonStyles = { base: { - borderRadius: getSpacing(0.5), + borderRadius: '0.25rem', icon: { gap: getSpacing(1), size: { diff --git a/src/ButtonBar/ButtonBar.spec.tsx b/src/ButtonBar/ButtonBar.spec.tsx index f163da8..5a0ac1a 100644 --- a/src/ButtonBar/ButtonBar.spec.tsx +++ b/src/ButtonBar/ButtonBar.spec.tsx @@ -12,7 +12,7 @@ test('Render button bar', () => { ); expect(container).toMatchSnapshot(); - expect(getByTestId('pbl-buttonbar')).toHaveStyleRule('gap', '4px 4px'); + expect(getByTestId('pbl-buttonbar')).toHaveStyleRule('gap', '0.25rem 0.25rem'); const allButtons = getAllByTestId('pbl-button'); expect(allButtons).toBeArrayOfSize(2); }); diff --git a/src/ButtonBar/__snapshots__/ButtonBar.spec.tsx.snap b/src/ButtonBar/__snapshots__/ButtonBar.spec.tsx.snap index 0fefa46..8df73c1 100644 --- a/src/ButtonBar/__snapshots__/ButtonBar.spec.tsx.snap +++ b/src/ButtonBar/__snapshots__/ButtonBar.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Render button bar 1`] = ` .emotion-0 { box-sizing: border-box; - gap: 4px 4px; + gap: 0.25rem 0.25rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -40,7 +40,7 @@ exports[`Render button bar 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -64,7 +64,7 @@ exports[`Render button bar 1`] = ` } .emotion-1:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-1:hover:enabled { @@ -124,7 +124,7 @@ exports[`Render button bar 1`] = ` exports[`Render button bar with one item 1`] = ` .emotion-0 { box-sizing: border-box; - gap: 4px 4px; + gap: 0.25rem 0.25rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -161,7 +161,7 @@ exports[`Render button bar with one item 1`] = ` padding: 10px 14px; border: 1px solid transparent; background: transparent; - border-radius: 4px; + border-radius: 0.25rem; -webkit-transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,-webkit-transform,0.15s; transition: background-color,0.3s,color 0.3s,border-color 0.3s,box-shadow 0.3s ease-in-out,transform,0.15s; outline: none; @@ -185,7 +185,7 @@ exports[`Render button bar with one item 1`] = ` } .emotion-1:focus { - box-shadow: 0 0 0 4px var(--pbl-theme-colors-brand-lightest); + box-shadow: 0 0 0 0.25rem var(--pbl-theme-colors-brand-lightest); } .emotion-1:hover:enabled { diff --git a/src/Card/__snapshots__/Card.spec.tsx.snap b/src/Card/__snapshots__/Card.spec.tsx.snap index 4c744e1..0d04ea7 100644 --- a/src/Card/__snapshots__/Card.spec.tsx.snap +++ b/src/Card/__snapshots__/Card.spec.tsx.snap @@ -3,11 +3,11 @@ exports[`Render card 1`] = ` .emotion-0 { box-sizing: border-box; - padding: 16px; + padding: 1rem; background-color: var(--pbl-theme-colors-common-white); color: var(--pbl-theme-colors-common-whiteContrastText); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1),0px 4px 10px rgba(0, 0, 0, 0.05); - border-radius: 8px; + border-radius: 0.5rem; }
diff --git a/src/Checkbox/Checkbox.spec.tsx b/src/Checkbox/Checkbox.spec.tsx index ca79c00..9b3a290 100644 --- a/src/Checkbox/Checkbox.spec.tsx +++ b/src/Checkbox/Checkbox.spec.tsx @@ -72,11 +72,17 @@ test('Render medium checkbox', () => { size: 'medium', label: 'medium label', }); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('width', 'calc(12px + 2 * (6px + 1px))'); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('height', 'calc(12px + 2 * (6px + 1px))'); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('padding', '6px'); - expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('width', '12px'); - expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('height', '12px'); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule( + 'width', + 'calc(0.75rem + 2 * (0.375rem + 1px))' + ); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule( + 'height', + 'calc(0.75rem + 2 * (0.375rem + 1px))' + ); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule('padding', '0.375rem'); + expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('width', '0.75rem'); + expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('height', '0.75rem'); // Uses subtitle typography expect(getByTestId('pbl-checkbox-label')).toHaveStyleRule( 'font-size', @@ -89,11 +95,17 @@ test('Render small checkbox', () => { size: 'small', label: 'small label', }); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('width', 'calc(8px + 2 * (4px + 1px))'); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('height', 'calc(8px + 2 * (4px + 1px))'); - expect(getByTestId('pbl-checkbox')).toHaveStyleRule('padding', '4px'); - expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('width', '8px'); - expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('height', '8px'); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule( + 'width', + 'calc(0.5rem + 2 * (0.25rem + 1px))' + ); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule( + 'height', + 'calc(0.5rem + 2 * (0.25rem + 1px))' + ); + expect(getByTestId('pbl-checkbox')).toHaveStyleRule('padding', '0.25rem'); + expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('width', '0.5rem'); + expect(getByTestId('pbl-checkbox-handle')).toHaveStyleRule('height', '0.5rem'); // Uses paragraph typography expect(getByTestId('pbl-checkbox-label')).toHaveStyleRule( 'font-size', diff --git a/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap index 38666f8..461d223 100644 --- a/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap +++ b/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap @@ -16,10 +16,10 @@ exports[`Render checkbox checked 1`] = ` .emotion-1 { box-sizing: border-box; position: relative; - width: calc(12px + 2 * (6px + 1px)); - height: calc(12px + 2 * (6px + 1px)); + width: calc(0.75rem + 2 * (0.375rem + 1px)); + height: calc(0.75rem + 2 * (0.375rem + 1px)); border-radius: 4px; - padding: 6px; + padding: 0.375rem; background-color: var(--pbl-theme-colors-common-white); border: 1px solid var(--pbl-theme-colors-borders-main); opacity: 1; @@ -29,8 +29,8 @@ exports[`Render checkbox checked 1`] = ` .emotion-2 { box-sizing: border-box; - width: 12px; - height: 12px; + width: 0.75rem; + height: 0.75rem; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); @@ -97,10 +97,10 @@ exports[`Render checkbox unchecked 1`] = ` .emotion-1 { box-sizing: border-box; position: relative; - width: calc(12px + 2 * (6px + 1px)); - height: calc(12px + 2 * (6px + 1px)); + width: calc(0.75rem + 2 * (0.375rem + 1px)); + height: calc(0.75rem + 2 * (0.375rem + 1px)); border-radius: 4px; - padding: 6px; + padding: 0.375rem; background-color: var(--pbl-theme-colors-common-white); border: 1px solid var(--pbl-theme-colors-borders-main); opacity: 1; @@ -110,8 +110,8 @@ exports[`Render checkbox unchecked 1`] = ` .emotion-2 { box-sizing: border-box; - width: 12px; - height: 12px; + width: 0.75rem; + height: 0.75rem; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); @@ -171,7 +171,7 @@ exports[`Render checkbox with label 1`] = ` font-size: var(--pbl-theme-typography-subtitle-fontSize); line-height: var(--pbl-theme-typography-subtitle-lineHeight); margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom); - margin-left: 8px; + margin-left: 0.5rem; }