diff --git a/packages/gamut-styles/src/GamutProvider.tsx b/packages/gamut-styles/src/GamutProvider.tsx index 98b4bc84202..4cc22d73f1a 100644 --- a/packages/gamut-styles/src/GamutProvider.tsx +++ b/packages/gamut-styles/src/GamutProvider.tsx @@ -27,6 +27,10 @@ export interface GamutProviderProps { * Pass a nonce to the cache to prevent CSP errors */ nonce?: string; + /** + * Whether to use logical properties for the theme + */ + useLogicalProperties?: boolean; } export const GamutContext = React.createContext<{ @@ -47,6 +51,7 @@ export const GamutProvider: React.FC = ({ useGlobals = true, useCache = true, nonce, + useLogicalProperties = true, }) => { const { hasGlobals, hasCache } = useContext(GamutContext); const shouldCreateCache = useCache && !hasCache; @@ -60,6 +65,7 @@ export const GamutProvider: React.FC = ({ const contextValue = { hasGlobals: shouldInsertGlobals, hasCache: shouldCreateCache, + useLogicalProperties, }; const globals = shouldInsertGlobals && ( @@ -71,12 +77,20 @@ export const GamutProvider: React.FC = ({ ); + // Merge useLogicalProperties into theme so variance can access it via props.theme + const themeWithLogicalProperties = { + ...theme, + useLogicalProperties, + }; + if (activeCache.current) { return ( {globals} - {children} + + {children} + ); @@ -85,7 +99,9 @@ export const GamutProvider: React.FC = ({ return ( {globals} - {children} + + {children} + ); }; diff --git a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx index e32357589e1..7086e7f0fbf 100644 --- a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx +++ b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx @@ -56,7 +56,7 @@ describe(GamutProvider, () => { ), }); - screen.getByText(JSON.stringify(theme)); + screen.getByText(JSON.stringify({ ...theme, useLogicalProperties: true })); }); it('it can have another GamutProvider as a child with creating multiple caches or globals', () => { renderView({ diff --git a/packages/gamut-styles/src/variance/config.ts b/packages/gamut-styles/src/variance/config.ts index 4ba51362f45..e179fdf74a8 100644 --- a/packages/gamut-styles/src/variance/config.ts +++ b/packages/gamut-styles/src/variance/config.ts @@ -1,4 +1,4 @@ -import { transformSize } from '@codecademy/variance'; +import { getPropertyMode, transformSize } from '@codecademy/variance'; export const color = { color: { property: 'color', scale: 'colors' }, @@ -7,18 +7,42 @@ export const color = { borderColor: { property: 'borderColor', scale: 'colors' }, borderColorX: { property: 'borderColor', - properties: ['borderLeftColor', 'borderRightColor'], + properties: { + physical: ['borderLeftColor', 'borderRightColor'], + logical: ['borderInlineStartColor', 'borderInlineEndColor'], + }, + resolveProperty: getPropertyMode, scale: 'colors', }, borderColorY: { property: 'borderColor', - properties: ['borderTopColor', 'borderBottomColor'], + properties: { + physical: ['borderTopColor', 'borderBottomColor'], + logical: ['borderBlockStartColor', 'borderBlockEndColor'], + }, + resolveProperty: getPropertyMode, + scale: 'colors', + }, + borderColorLeft: { + property: 'borderLeftColor', + resolveProperty: getPropertyMode, + scale: 'colors', + }, + borderColorRight: { + property: 'borderRightColor', + resolveProperty: getPropertyMode, + scale: 'colors', + }, + borderColorTop: { + property: 'borderTopColor', + resolveProperty: getPropertyMode, + scale: 'colors', + }, + borderColorBottom: { + property: 'borderBottomColor', + resolveProperty: getPropertyMode, scale: 'colors', }, - borderColorLeft: { property: 'borderLeftColor', scale: 'colors' }, - borderColorRight: { property: 'borderRightColor', scale: 'colors' }, - borderColorTop: { property: 'borderTopColor', scale: 'colors' }, - borderColorBottom: { property: 'borderBottomColor', scale: 'colors' }, } as const; export const border = { @@ -26,84 +50,186 @@ export const border = { border: { property: 'border', scale: 'borders' }, borderX: { property: 'border', - properties: ['borderLeft', 'borderRight'], + properties: { + physical: ['borderLeft', 'borderRight'], + logical: ['borderInlineStart', 'borderInlineEnd'], + }, + resolveProperty: getPropertyMode, scale: 'borders', }, borderY: { property: 'border', - properties: ['borderTop', 'borderBottom'], + properties: { + physical: ['borderTop', 'borderBottom'], + logical: ['borderBlockStart', 'borderBlockEnd'], + }, + resolveProperty: getPropertyMode, + scale: 'borders', + }, + borderTop: { + property: { physical: 'borderTop', logical: 'borderBlockStart' }, + resolveProperty: getPropertyMode, + scale: 'borders', + }, + borderRight: { + property: { physical: 'borderRight', logical: 'borderInlineEnd' }, + resolveProperty: getPropertyMode, + scale: 'borders', + }, + borderBottom: { + property: { physical: 'borderBottom', logical: 'borderBlockEnd' }, + resolveProperty: getPropertyMode, + scale: 'borders', + }, + borderLeft: { + property: { physical: 'borderLeft', logical: 'borderInlineStart' }, + resolveProperty: getPropertyMode, scale: 'borders', }, - borderTop: { property: 'borderTop', scale: 'borders' }, - borderRight: { property: 'borderRight', scale: 'borders' }, - borderBottom: { property: 'borderBottom', scale: 'borders' }, - borderLeft: { property: 'borderLeft', scale: 'borders' }, // Width borderWidth: { property: 'borderWidth' }, borderWidthX: { property: 'borderWidth', - properties: ['borderLeftWidth', 'borderRightWidth'], + properties: { + physical: ['borderLeftWidth', 'borderRightWidth'], + logical: ['borderInlineStartWidth', 'borderInlineEndWidth'], + }, + resolveProperty: getPropertyMode, }, borderWidthY: { property: 'borderWidth', - properties: ['borderTopWidth', 'borderBottomWidth'], + properties: { + physical: ['borderTopWidth', 'borderBottomWidth'], + logical: ['borderBlockStartWidth', 'borderBlockEndWidth'], + }, + resolveProperty: getPropertyMode, + }, + borderWidthLeft: { + property: { + physical: 'borderLeftWidth', + logical: 'borderInlineStartWidth', + }, + resolveProperty: getPropertyMode, + }, + borderWidthRight: { + property: { physical: 'borderRightWidth', logical: 'borderInlineEndWidth' }, + resolveProperty: getPropertyMode, + }, + borderWidthTop: { + property: { physical: 'borderTopWidth', logical: 'borderBlockStartWidth' }, + resolveProperty: getPropertyMode, + }, + borderWidthBottom: { + property: { physical: 'borderBottomWidth', logical: 'borderBlockEndWidth' }, + resolveProperty: getPropertyMode, }, - borderWidthLeft: { property: 'borderLeftWidth' }, - borderWidthRight: { property: 'borderRightWidth' }, - borderWidthTop: { property: 'borderTopWidth' }, - borderWidthBottom: { property: 'borderBottomWidth' }, // Radius borderRadius: { property: 'borderRadius', scale: 'borderRadii' }, borderRadiusLeft: { property: 'borderRadius', - properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'], + properties: { + physical: ['borderTopLeftRadius', 'borderBottomLeftRadius'], + logical: ['borderStartStartRadius', 'borderEndStartRadius'], + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusTop: { property: 'borderRadius', - properties: ['borderTopLeftRadius', 'borderTopRightRadius'], + properties: { + physical: ['borderTopLeftRadius', 'borderTopRightRadius'], + logical: ['borderStartStartRadius', 'borderStartEndRadius'], + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusBottom: { property: 'borderRadius', - properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'], + properties: { + physical: ['borderBottomLeftRadius', 'borderBottomRightRadius'], + logical: ['borderEndStartRadius', 'borderEndEndRadius'], + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusRight: { property: 'borderRadius', - properties: ['borderTopRightRadius', 'borderBottomRightRadius'], + properties: { + physical: ['borderTopRightRadius', 'borderBottomRightRadius'], + logical: ['borderStartEndRadius', 'borderEndEndRadius'], + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusTopLeft: { - property: 'borderTopLeftRadius', + property: { + physical: 'borderTopLeftRadius', + logical: 'borderStartStartRadius', + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusTopRight: { - property: 'borderTopRightRadius', + property: { + physical: 'borderTopRightRadius', + logical: 'borderStartEndRadius', + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusBottomRight: { - property: 'borderBottomRightRadius', + property: { + physical: 'borderBottomRightRadius', + logical: 'borderEndEndRadius', + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, borderRadiusBottomLeft: { - property: 'borderBottomLeftRadius', + property: { + physical: 'borderBottomLeftRadius', + logical: 'borderEndStartRadius', + }, + resolveProperty: getPropertyMode, scale: 'borderRadii', }, // Style borderStyle: { property: 'borderStyle' }, borderStyleX: { property: 'borderStyle', - properties: ['borderLeftStyle', 'borderRightStyle'], + properties: { + physical: ['borderLeftStyle', 'borderRightStyle'], + logical: ['borderInlineStartStyle', 'borderInlineEndStyle'], + }, + resolveProperty: getPropertyMode, }, borderStyleY: { property: 'borderStyle', - properties: ['borderTopStyle', 'borderBottomStyle'], + properties: { + physical: ['borderTopStyle', 'borderBottomStyle'], + logical: ['borderBlockStartStyle', 'borderBlockEndStyle'], + }, + resolveProperty: getPropertyMode, + }, + borderStyleLeft: { + property: { + physical: 'borderLeftStyle', + logical: 'borderInlineStartStyle', + }, + resolveProperty: getPropertyMode, + }, + borderStyleRight: { + property: { physical: 'borderRightStyle', logical: 'borderInlineEndStyle' }, + resolveProperty: getPropertyMode, + }, + borderStyleTop: { + property: { physical: 'borderTopStyle', logical: 'borderBlockStartStyle' }, + resolveProperty: getPropertyMode, + }, + borderStyleBottom: { + property: { physical: 'borderBottomStyle', logical: 'borderBlockEndStyle' }, + resolveProperty: getPropertyMode, }, - borderStyleLeft: { property: 'borderLeftStyle' }, - borderStyleRight: { property: 'borderRightStyle' }, - borderStyleTop: { property: 'borderTopStyle' }, - borderStyleBottom: { property: 'borderBottomStyle' }, } as const; const selfAlignments = { @@ -233,36 +359,108 @@ export const margin = { m: { property: 'margin', scale: 'spacing' }, mx: { property: 'margin', - properties: ['marginLeft', 'marginRight'], + properties: { + physical: ['marginLeft', 'marginRight'], + logical: ['marginInlineStart', 'marginInlineEnd'], + }, + resolveProperty: getPropertyMode, scale: 'spacing', }, my: { property: 'margin', - properties: ['marginTop', 'marginBottom'], + properties: { + physical: ['marginTop', 'marginBottom'], + logical: ['marginBlockStart', 'marginBlockEnd'], + }, + resolveProperty: getPropertyMode, + scale: 'spacing', + }, + mt: { + property: { + physical: 'marginTop', + logical: 'marginBlockStart', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + mb: { + property: { + physical: 'marginBottom', + logical: 'marginBlockEnd', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + mr: { + property: { + physical: 'marginRight', + logical: 'marginInlineEnd', + }, scale: 'spacing', + resolveProperty: getPropertyMode, + }, + ml: { + property: { + physical: 'marginLeft', + logical: 'marginInlineStart', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, }, - mt: { property: 'marginTop', scale: 'spacing' }, - mb: { property: 'marginBottom', scale: 'spacing' }, - mr: { property: 'marginRight', scale: 'spacing' }, - ml: { property: 'marginLeft', scale: 'spacing' }, } as const; export const padding = { p: { property: 'padding', scale: 'spacing' }, px: { property: 'padding', - properties: ['paddingLeft', 'paddingRight'], + properties: { + physical: ['paddingLeft', 'paddingRight'], + logical: ['paddingInlineStart', 'paddingInlineEnd'], + }, scale: 'spacing', + resolveProperty: getPropertyMode, }, py: { property: 'padding', - properties: ['paddingTop', 'paddingBottom'], + properties: { + physical: ['paddingTop', 'paddingBottom'], + logical: ['paddingBlockStart', 'paddingBlockEnd'], + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + pt: { + property: { + physical: 'paddingTop', + logical: 'paddingBlockStart', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + pb: { + property: { + physical: 'paddingBottom', + logical: 'paddingBlockEnd', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + pr: { + property: { + physical: 'paddingRight', + logical: 'paddingInlineEnd', + }, + scale: 'spacing', + resolveProperty: getPropertyMode, + }, + pl: { + property: { + physical: 'paddingLeft', + logical: 'paddingInlineStart', + }, scale: 'spacing', + resolveProperty: getPropertyMode, }, - pt: { property: 'paddingTop', scale: 'spacing' }, - pb: { property: 'paddingBottom', scale: 'spacing' }, - pr: { property: 'paddingRight', scale: 'spacing' }, - pl: { property: 'paddingLeft', scale: 'spacing' }, } as const; export const space = { diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index 72005789548..700132e1cd4 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -6,13 +6,19 @@ import { import overArgs from 'lodash/overArgs'; import * as React from 'react'; -// See https://www.notion.so/codecademy/Frontend-Unit-Tests-1cbf4e078a6647559b4583dfb6d3cb18 for more info +// See https://skillsoftdev.atlassian.net/wiki/spaces/779a16d9c7ea452eab11b39cbbe771ce/pages/4441315387/Frontend+Unit+Tests for more info -export const MockGamutProvider: React.FC<{ children?: React.ReactNode }> = ({ - children, -}) => { +export const MockGamutProvider: React.FC<{ + children?: React.ReactNode; + useLogicalProperties?: boolean; +}> = ({ children, useLogicalProperties }) => { return ( - + {children} ); diff --git a/packages/gamut/package.json b/packages/gamut/package.json index dda7b640ec6..d8d6ed45dbf 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -1,10 +1,10 @@ { "name": "@codecademy/gamut", "description": "Styleguide & Component library for Codecademy", - "version": "68.0.1", + "version": "68.0.0", "author": "Codecademy Engineering ", "dependencies": { - "@codecademy/gamut-icons": "9.55.0", + "@codecademy/gamut-icons": "9.54.2", "@codecademy/gamut-illustrations": "0.58.2", "@codecademy/gamut-patterns": "0.10.21", "@codecademy/gamut-styles": "17.11.2", diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx index 95301bddba8..0bff6d9164e 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/ConnectedNestedCheckboxes.test.tsx @@ -100,10 +100,10 @@ describe('ConnectedNestedCheckboxes', () => { const nodeCheckbox = view.getByLabelText('Node.js').closest('li'); const expressCheckbox = view.getByLabelText('Express.js').closest('li'); - expect(frontendCheckbox).toHaveStyle({ marginLeft: '0' }); - expect(reactCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); - expect(nodeCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); - expect(expressCheckbox).toHaveStyle({ marginLeft: '3rem' }); + expect(frontendCheckbox).toHaveStyle({ marginInlineStart: 0 }); + expect(reactCheckbox).toHaveStyle({ marginInlineStart: '1.5rem' }); + expect(nodeCheckbox).toHaveStyle({ marginInlineStart: '1.5rem' }); + expect(expressCheckbox).toHaveStyle({ marginInlineStart: '3rem' }); }); it('should render with unique IDs for each checkbox', () => { diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx index 8f9259fb9c4..227d2240091 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx @@ -522,7 +522,7 @@ describe('ConnectedNestedCheckboxes utils', () => { }); it('should render an unchecked checkbox with correct props', () => { - const state = { checked: false }; + const state = { checked: false, indeterminate: false }; const result = renderCheckbox({ option: mockOption, @@ -562,7 +562,7 @@ describe('ConnectedNestedCheckboxes utils', () => { const { container } = render(result); const listItem = container.querySelector('li'); - expect(listItem).toHaveStyle({ marginLeft: '48px' }); // 2 * 24px + expect(listItem).toHaveStyle({ marginInlineStart: '48px' }); // 2 * 24px }); it('should handle disabled state', () => { diff --git a/packages/gamut/src/GridForm/GridFormInputGroup/GridFormNestedCheckboxInput/__tests__/GridFormNestedCheckboxInput.test.tsx b/packages/gamut/src/GridForm/GridFormInputGroup/GridFormNestedCheckboxInput/__tests__/GridFormNestedCheckboxInput.test.tsx index 7c92c4bd4b7..af7647b8505 100644 --- a/packages/gamut/src/GridForm/GridFormInputGroup/GridFormNestedCheckboxInput/__tests__/GridFormNestedCheckboxInput.test.tsx +++ b/packages/gamut/src/GridForm/GridFormInputGroup/GridFormNestedCheckboxInput/__tests__/GridFormNestedCheckboxInput.test.tsx @@ -99,10 +99,10 @@ describe('GridFormNestedCheckboxInput', () => { const nodeCheckbox = view.getByLabelText('Node.js').closest('li'); const expressCheckbox = view.getByLabelText('Express.js').closest('li'); - expect(frontendCheckbox).toHaveStyle({ marginLeft: '0' }); - expect(reactCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); - expect(nodeCheckbox).toHaveStyle({ marginLeft: '1.5rem' }); - expect(expressCheckbox).toHaveStyle({ marginLeft: '3rem' }); + expect(frontendCheckbox).toHaveStyle({ marginInlineStart: 0 }); + expect(reactCheckbox).toHaveStyle({ marginInlineStart: '1.5rem' }); + expect(nodeCheckbox).toHaveStyle({ marginInlineStart: '1.5rem' }); + expect(expressCheckbox).toHaveStyle({ marginInlineStart: '3rem' }); }); it('should render with unique IDs for each checkbox', () => { diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx index 71f2e500f36..d1d419eb060 100644 --- a/packages/gamut/src/List/__tests__/List.test.tsx +++ b/packages/gamut/src/List/__tests__/List.test.tsx @@ -50,13 +50,11 @@ describe('List', () => { it('configures columns with the correct variants', () => { const { view } = renderView(); - const colEl = view.getByText('Hello'); expect(colEl).not.toHaveStyle({ py: 16 }); - expect(colEl).toHaveStyle({ paddingLeft: theme.spacing[8] }); - expect(colEl).toHaveStyle({ paddingRight: theme.spacing[8] }); - + expect(colEl).toHaveStyle({ paddingInlineStart: theme.spacing[8] }); + expect(colEl).toHaveStyle({ paddingInlineEnd: theme.spacing[8] }); expect(colEl).not.toHaveStyle({ position: 'sticky' }); }); diff --git a/packages/styleguide/.storybook/components/Elements/DocsContainer.tsx b/packages/styleguide/.storybook/components/Elements/DocsContainer.tsx index 525723c2a4e..0c6a47dd78d 100644 --- a/packages/styleguide/.storybook/components/Elements/DocsContainer.tsx +++ b/packages/styleguide/.storybook/components/Elements/DocsContainer.tsx @@ -52,6 +52,9 @@ export const DocsContainer: React.FC<{ const globalTheme = (context as any).store.userGlobals?.globals?.theme || 'core'; + const globalLogicalProps = (context as any).store.userGlobals?.globals + ?.logicalProps; + const useLogicalProperties = globalLogicalProps !== 'false'; const { currentTheme } = useMemo(() => { const findThemeStory: keyof typeof themeSpecificStories | undefined = @@ -77,6 +80,7 @@ export const DocsContainer: React.FC<{ cache={createEmotionCache({ speedy: false })} // This is typed to the CoreTheme in theme.d.ts theme={currentTheme as unknown as CoreTheme} + useLogicalProperties={useLogicalProperties} > diff --git a/packages/styleguide/.storybook/components/Elements/Markdown.tsx b/packages/styleguide/.storybook/components/Elements/Markdown.tsx index b1c75f2f356..e26f71e4466 100644 --- a/packages/styleguide/.storybook/components/Elements/Markdown.tsx +++ b/packages/styleguide/.storybook/components/Elements/Markdown.tsx @@ -43,7 +43,6 @@ export const Code = styled.code` color: ${themed('colors.navy-700')}; background-color: ${themed('colors.gray-100')}; display: inline-block; - overflow-x: scroll; ::-webkit-scrollbar { width: 4px; diff --git a/packages/styleguide/.storybook/components/Scales/ColorScale.tsx b/packages/styleguide/.storybook/components/Scales/ColorScale.tsx index ce56ca46d46..2737bdbea98 100644 --- a/packages/styleguide/.storybook/components/Scales/ColorScale.tsx +++ b/packages/styleguide/.storybook/components/Scales/ColorScale.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { themed } from '@codecademy/gamut-styles'; import styled from '@emotion/styled'; -import { Box, GridBox } from '@codecademy/gamut/src'; +import { Box, GridBox } from '@codecademy/gamut'; const HexCode = styled.span` font-family: ${themed('fontFamily.monospace')}; diff --git a/packages/styleguide/.storybook/preview.ts b/packages/styleguide/.storybook/preview.ts index 5d1cf7578ac..b4ec94417ea 100644 --- a/packages/styleguide/.storybook/preview.ts +++ b/packages/styleguide/.storybook/preview.ts @@ -49,6 +49,7 @@ const preview: Preview = { 'Contributing', 'ESLint rules', 'FAQs', + 'Logical and physical CSS properties', 'Stories', 'Brand', 'Installation', @@ -167,6 +168,31 @@ export const globalTypes = { showName: true, }, }, + logicalProps: { + name: 'LogicalProps', + description: 'Toggle between logical and physical CSS properties', + defaultValue: 'true', + toolbar: { + icon: 'transfer', + items: [ + { value: 'true', title: 'Logical' }, + { value: 'false', title: 'Physical' }, + ], + showName: true, + }, + }, + direction: { + name: 'Direction', + description: 'Text direction for the page', + defaultValue: 'ltr', + toolbar: { + items: [ + { value: 'ltr', icon: 'arrowright', title: 'Left-To-Right' }, + { value: 'rtl', icon: 'arrowleft', title: 'Right-To-Left' }, + ], + showName: true, + }, + }, }; export const decorators = [withEmotion]; diff --git a/packages/styleguide/.storybook/theming/GamutThemeProvider.tsx b/packages/styleguide/.storybook/theming/GamutThemeProvider.tsx index fec952647b8..2bbb8949a27 100644 --- a/packages/styleguide/.storybook/theming/GamutThemeProvider.tsx +++ b/packages/styleguide/.storybook/theming/GamutThemeProvider.tsx @@ -34,12 +34,16 @@ type GlobalsContext = { globals: { colorMode: 'light' | 'dark'; theme: keyof typeof themeMap; + logicalProps: 'true' | 'false'; + direction: 'ltr' | 'rtl'; }; }; export const withEmotion = (Story: any, context: GlobalsContext) => { const colorMode = context.globals.colorMode ?? 'light'; const selectedTheme = context.globals.theme; + const useLogicalProperties = context.globals.logicalProps !== 'false'; + const direction = context.globals.direction ?? 'ltr'; const background = corePalette[themeBackground[colorMode]]; const storyRef = useRef(null); const currentTheme = themeMap[selectedTheme]; @@ -57,12 +61,14 @@ export const withEmotion = (Story: any, context: GlobalsContext) => { {Story()} @@ -72,11 +78,15 @@ export const withEmotion = (Story: any, context: GlobalsContext) => { // Wrap all stories in minimal provider return ( - + {Story()} diff --git a/packages/styleguide/src/lib/Foundations/Layout.mdx b/packages/styleguide/src/lib/Foundations/Layout.mdx index bb4460d2589..96739a065ad 100644 --- a/packages/styleguide/src/lib/Foundations/Layout.mdx +++ b/packages/styleguide/src/lib/Foundations/Layout.mdx @@ -1,4 +1,4 @@ -import { Box } from '@codecademy/gamut/src'; +import { Box } from '@codecademy/gamut'; import { Meta } from '@storybook/blocks'; import { ComponentHeader, LinkTo, TokenTable } from '~styleguide/blocks'; diff --git a/packages/styleguide/src/lib/Foundations/System/About.mdx b/packages/styleguide/src/lib/Foundations/System/About.mdx index 3735ec08601..effca42ebc0 100644 --- a/packages/styleguide/src/lib/Foundations/System/About.mdx +++ b/packages/styleguide/src/lib/Foundations/System/About.mdx @@ -7,7 +7,7 @@ import { } from '~styleguide/blocks'; import { parameters as composeParameters } from './Compose.mdx'; -import { parameters as propsParameters } from './Props.mdx'; +import { parameters as propsParameters } from './Props/About.mdx'; import { parameters as responsivePropertiesParameters } from './ResponsiveProperties/ResponsiveProperties.mdx'; import { parameters as variantsParameters } from './Variants.mdx'; diff --git a/packages/styleguide/src/lib/Foundations/System/Props.mdx b/packages/styleguide/src/lib/Foundations/System/Props.mdx deleted file mode 100644 index dc8bb6ce53d..00000000000 --- a/packages/styleguide/src/lib/Foundations/System/Props.mdx +++ /dev/null @@ -1,230 +0,0 @@ -import { Meta } from '@storybook/blocks'; - -import { AboutHeader, TokenTable } from '~styleguide/blocks'; - -import { defaultColumns, getPropRows } from '../shared/elements'; - -export const parameters = { - title: 'Props', - subtitle: - 'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.', - source: { - repo: 'gamut-styles', - githubLink: - 'https://github.com/Codecademy/gamut/blob/af5be6e39cccca5d5d8a1f811c77a7a0b618c914/packages/gamut-styles/src/variance/config.ts#L11', - }, -}; - - - - - -We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component. - -System props have a few facets that are important to note: - -- They can some times represent multiple properties. -- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`. -- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`) - -We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`. - -You may import these groups directly from `gamut-styles`. - -```tsx -import { variance } from '@codecademy/variance'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(variance.compose(system.layout, system.positioning)); - -; -``` - -Each system prop has 3 important features: - -- `properties`: Any number of CSS Properties this prop is responsible for. -- `scale`: A set of values that determines valid inputs for each prop (e.g. a scale of `colors` will restrict to only theme colors). These are generally aliases for more verbose or opaque css properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid CSSType values as props, however if it does have a scale it will only accept global values and keys of the provided scale. -- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically. - -
- -## Layout - -Props for handling dimensions and other layout specific properties. - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(system.layout); - -; -``` - - - -## Space - -Props for maintaining specific vertical and horizontal rhythms - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Spacer = styled.div(system.space); - -; -``` - - - -## Typography - -Props for text manipulation - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Text = styled.p(system.typography); - -; -``` - - - -## Color - -Specific color properties - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Background = styled.div(system.color); - -; -``` - - - -## Border - -Border styles - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(system.border); - -; -``` - - - -## Flex - -Flex specific properties - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const FlexBox = styled.div(system.flex); - -; -``` - - - -## Grid - -Grid specific properties - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const GridBox = styled.div(system.grid); - -; -``` - - - -## Background - -Props for background manipulation (sizing / repitition / images), for background color see `colors`. - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; -import myBg from './myBg.png'; - -const Box = styled.div(system.background); - -; -``` - - - -## Positioning - -Props that affect stacking and position contexts. Like `top`, `position` and `opacity`. - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(system.positioning); - -; -``` - - - -## Shadow - -Props for box and text shadows. - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(system.shadow); - -; -``` - - - -## List - -Props for adjusting list styles when rendering a component as a `ul` or `ol` - -```tsx -import styled from '@emotion/styled'; -import { system } from '@codecademy/gamut-styles'; - -const Box = styled.div(system.list); - - - a list item -; -``` - - diff --git a/packages/styleguide/src/lib/Foundations/System/Props/About.mdx b/packages/styleguide/src/lib/Foundations/System/Props/About.mdx new file mode 100644 index 00000000000..97ca50cd4b0 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/About.mdx @@ -0,0 +1,81 @@ +import { Meta } from '@storybook/blocks'; + +import { + AboutHeader, + addParentPath, + TableOfContents, +} from '~styleguide/blocks'; + +import { parameters as backgroundParameters } from './Background.mdx'; +import { parameters as borderParameters } from './Border.mdx'; +import { parameters as colorParameters } from './Color.mdx'; +import { parameters as flexParameters } from './Flex.mdx'; +import { parameters as gridParameters } from './Grid.mdx'; +import { parameters as layoutParameters } from './Layout.mdx'; +import { parameters as listParameters } from './List.mdx'; +import { parameters as positioningParameters } from './Positioning.mdx'; +import { parameters as shadowParameters } from './Shadow.mdx'; +import { parameters as spaceParameters } from './Space.mdx'; +import { parameters as typographyParameters } from './Typography.mdx'; + +export const parameters = { + id: 'Foundations/System/Props', + title: 'Props', + subtitle: + 'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.', + status: 'current', + source: { + repo: 'gamut-styles', + githubLink: + 'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variance/config.ts', + }, +}; + + + + + +We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component. + +System props have a few facets that are important to note: + +- They can some times represent multiple properties. +- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`. +- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`) + +We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`. + +You may import these groups directly from `gamut-styles`. + +```tsx +import { variance } from '@codecademy/variance'; +import { system } from '@codecademy/gamut-styles'; + +const ExampleContainer = styled.div( + variance.compose(system.layout, system.positioning) +); + +; +``` + +Each system prop has 3 important features: + +- `properties`: Any number of CSS Properties this prop is responsible for. +- `scale`: A set of values that determines valid inputs for each prop based on the selected theme and that theme's typing (e.g. if the `lxStudio` theme is being used, a scale of `colors` will restrict to the `lxStudio` theme's colors). These are generally aliases for more verbose or opaque CSS properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid `CSSType` values as props, however if it does have a scale it will only accept global values and keys of the provided scale. +- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically. + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Background.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Background.mdx new file mode 100644 index 00000000000..e5c34129cf8 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Background.mdx @@ -0,0 +1,30 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Background', + subtitle: + 'Props for background manipulation (sizing / repitition / images), for background color see `colors`.', + status: 'current', +}; + + + + + +Background props control how background images and patterns are displayed on elements. These properties give you control over image sizing, positioning, and repetition behavior. For solid background colors, use the color props which connect to the theme's color palette. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; +import myBg from './myBg.png'; + +const BackgroundExample = styled.div(system.background); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Border.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Border.mdx new file mode 100644 index 00000000000..99479956fe8 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Border.mdx @@ -0,0 +1,53 @@ +import { Canvas, Meta } from '@storybook/blocks'; + +import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; +import * as BorderStories from './Border.stories'; + +export const parameters = { + title: 'Border', + subtitle: 'Border styles', + status: 'updating', +}; + + + + + +Border props enable you to add and style borders on any side of an element. These properties support directional borders (top, right, bottom, left) as well as convenient shorthands for horizontal and vertical borders. Border radius values connect to the theme's `borderRadii` scale for consistent corner rounding. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const BorderExample = styled.div(system.border); + +; +``` + +These border props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `` at the root of your application. + + + You can use the LogicalProps button in the toolbar to + switch between modes. + + } +/> + + + + + + + + + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Border.stories.tsx b/packages/styleguide/src/lib/Foundations/System/Props/Border.stories.tsx new file mode 100644 index 00000000000..1bd76b57482 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Border.stories.tsx @@ -0,0 +1,138 @@ +import { Box, FlexBox, Markdown } from '@codecademy/gamut'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Foundations/System/Props/Border', + component: Box, +}; + +export default meta; +type Story = StoryObj; + +export const DirectionalBorderExample: Story = { + render: () => ( + + + This box has Inspect + the example to see what CSS properties are rendered based on the logical + properties mode. + + + This box has {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + ), +}; + +export const BorderWidthExample: Story = { + render: () => ( + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + ), +}; + +export const BorderRadiusExample: Story = { + render: () => ( + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + ), +}; + +export const BorderStyleExample: Story = { + render: () => ( + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + ), +}; diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Color.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Color.mdx new file mode 100644 index 00000000000..d220fb9fc82 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Color.mdx @@ -0,0 +1,42 @@ +import { Canvas, Meta } from '@storybook/blocks'; + +import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; +import * as ColorStories from './Color.stories'; + +export const parameters = { + title: 'Color', + subtitle: 'Specific color properties', + status: 'current', +}; + + + + + +Color props control the foreground, background, and border colors of elements. All color values are restricted to your theme's color palette, ensuring consistent color usage throughout your application. The `bg` shorthand provides a convenient way to set background colors quickly. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const ColorExample = styled.div(system.color); + +; +``` + +These color props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `` at the root of your application. + + + You can use the LogicalProps button in the toolbar to + switch between modes. + + } +/> + + + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Color.stories.tsx b/packages/styleguide/src/lib/Foundations/System/Props/Color.stories.tsx new file mode 100644 index 00000000000..9f403933298 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Color.stories.tsx @@ -0,0 +1,47 @@ +import { Box, FlexBox, Markdown } from '@codecademy/gamut'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Foundations/System/Props/Color', + component: Box, +}; + +export default meta; +type Story = StoryObj; + +export const BorderColorExample: Story = { + render: () => ( + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered based on the + logical properties mode. + + + ), +}; diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Flex.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Flex.mdx new file mode 100644 index 00000000000..85f515de38c --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Flex.mdx @@ -0,0 +1,28 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Flex', + subtitle: 'Flex specific properties', + status: 'current', +}; + + + + + +Flex props provide complete control over flexbox layouts, from container behavior to individual flex item properties. These properties make it easy to create flexible, responsive layouts with proper alignment and distribution of child elements. Use these on flex containers to control their children or on flex items to control their own behavior. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const FlexExample = styled.div(system.flex); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Grid.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Grid.mdx new file mode 100644 index 00000000000..39d17e1b3c0 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Grid.mdx @@ -0,0 +1,31 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Grid', + subtitle: 'Grid specific properties', + status: 'current', +}; + + + + + +Grid props give you powerful control over CSS Grid layouts. Define grid templates, control auto-placement behavior, and set gaps between grid items. These properties make it straightforward to create complex, responsive grid layouts with precise control over both container and item positioning. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const GridExample = styled.div(system.grid); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Layout.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Layout.mdx new file mode 100644 index 00000000000..8c687a4dee5 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Layout.mdx @@ -0,0 +1,34 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Layout', + subtitle: + 'Props for handling dimensions and other layout specific properties.', + status: 'updating', +}; + + + + + +Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const LayoutExample = styled.div(system.layout); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/List.mdx b/packages/styleguide/src/lib/Foundations/System/Props/List.mdx new file mode 100644 index 00000000000..74398b42e07 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/List.mdx @@ -0,0 +1,38 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, LinkTo, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'List', + subtitle: + 'Props for adjusting list styles when rendering a component as a `ul` or `ol`', + status: 'current', +}; + + + + + +List props control the appearance of ordered and unordered lists when components are rendered as `ul` or `ol` elements. These properties let you customize bullet styles, list positioning, and even use custom images as list markers, giving you full control over list presentation. + +For more advanced list features, refer to the List component. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const ListExample = styled.div(system.list); + + + a list item +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Positioning.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Positioning.mdx new file mode 100644 index 00000000000..fb916b46286 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Positioning.mdx @@ -0,0 +1,29 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Positioning', + subtitle: + 'Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.', + status: 'updating', +}; + + + + + +Positioning props control how elements are positioned within their parent containers and manage their stacking order. Use these properties to create fixed headers, absolute overlays, sticky navigation, and control layering with z-index. The `inset` shorthand provides a convenient way to set all four position values at once. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const PositioningExample = styled.div(system.positioning); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Shadow.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Shadow.mdx new file mode 100644 index 00000000000..60ee41e8f09 --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Shadow.mdx @@ -0,0 +1,31 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Shadow', + subtitle: 'Props for box and text shadows.', + status: 'current', +}; + + + + + +Shadow props add depth and visual interest to your components through box and text shadows. These properties accept standard CSS shadow syntax, allowing you to create subtle elevation effects or dramatic visual depth. Use shadows consistently to establish visual hierarchy in your interface. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const ShadowExample = styled.div(system.shadow); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Space.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Space.mdx new file mode 100644 index 00000000000..2f5da1611df --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Space.mdx @@ -0,0 +1,44 @@ +import { Canvas, Meta } from '@storybook/blocks'; + +import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; +import * as SpaceStories from './Space.stories'; + +export const parameters = { + title: 'Space', + subtitle: 'Props for maintaining specific vertical and horizontal rhythms', + status: 'updating', +}; + + + + + +Space props provide a consistent way to apply margin and padding throughout your application. All spacing values reference the theme's spacing scale, ensuring visual consistency and making it easy to create responsive spacing patterns using array syntax. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const SpaceExample = styled.div(system.space); + +; +``` + +These space props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `` at the root of your application. + + + You can use the LogicalProps button in the toolbar to + switch between modes. + + } +/> + + + + + + diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Space.stories.tsx b/packages/styleguide/src/lib/Foundations/System/Props/Space.stories.tsx new file mode 100644 index 00000000000..d94e10f0a0b --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Space.stories.tsx @@ -0,0 +1,48 @@ +import { Box, Markdown } from '@codecademy/gamut'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Foundations/System/Props/Space', + component: Box, +}; + +export default meta; +type Story = StoryObj; + +export const MarginExample: Story = { + render: () => ( + + This box has{' '} + Inspect + the example to see what CSS properties are rendered. + + ), +}; + +export const PaddingExample: Story = { + render: () => ( + + + This box has{' '} + {' '} + Inspect the example to see what CSS properties are rendered. + + + ), +}; diff --git a/packages/styleguide/src/lib/Foundations/System/Props/Typography.mdx b/packages/styleguide/src/lib/Foundations/System/Props/Typography.mdx new file mode 100644 index 00000000000..a63af6ab7bf --- /dev/null +++ b/packages/styleguide/src/lib/Foundations/System/Props/Typography.mdx @@ -0,0 +1,28 @@ +import { Meta } from '@storybook/blocks'; + +import { AboutHeader, TokenTable } from '~styleguide/blocks'; + +import { defaultColumns, getPropRows } from '../../shared/elements'; + +export const parameters = { + title: 'Typography', + subtitle: 'Props for text manipulation', + status: 'current', +}; + + + + + +Typography props give you fine-grained control over text styling and appearance. These properties connect to the theme's typography scales for font families, sizes, weights, and line heights, making it simple to maintain typographic consistency across your application while allowing for custom text transformations and decorations. + +```tsx +import styled from '@emotion/styled'; +import { system } from '@codecademy/gamut-styles'; + +const TextExample = styled.p(system.typography); + +; +``` + + diff --git a/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx b/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx index 32ef96b22b2..03a9f18b744 100644 --- a/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx +++ b/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx @@ -6,17 +6,17 @@ import { breakpoint } from '../../shared/elements'; import * as ResponsivePropertiesStories from './ResponsiveProperties.stories'; export const parameters = { - title: 'Responsive Properties', + title: 'Responsive properties', subtitle: 'All system props accept a syntax to generate responsive styles on a per prop basis', source: { repo: 'variance', githubLink: - 'https://github.com/Codecademy/gamut/blob/cass-gm-842/packages/variance/src/utils/responsive.ts', + 'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/responsive.ts', }, }; - + diff --git a/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx b/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx index c7b51fc8085..cc8e3a88bd0 100644 --- a/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx +++ b/packages/styleguide/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx @@ -2,6 +2,7 @@ import { Box, FlexBox } from '@codecademy/gamut'; import type { Meta, StoryObj } from '@storybook/react'; const meta: Meta = { + title: 'Foundations/System/Responsive properties', component: FlexBox, args: { center: true, diff --git a/packages/styleguide/src/lib/Foundations/shared/elements.tsx b/packages/styleguide/src/lib/Foundations/shared/elements.tsx index d01149e99d5..4d345df50be 100644 --- a/packages/styleguide/src/lib/Foundations/shared/elements.tsx +++ b/packages/styleguide/src/lib/Foundations/shared/elements.tsx @@ -2,22 +2,32 @@ import { Anchor, Box } from '@codecademy/gamut'; import { Background, coreSwatches, + css, lxStudioColors, theme, trueColors, } from '@codecademy/gamut-styles'; // eslint-disable-next-line gamut/import-paths import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config'; +import { useTheme } from '@emotion/react'; +import styled from '@emotion/styled'; import kebabCase from 'lodash/kebabCase'; import { Code, ColorScale, LinkTo, TokenTable } from '~styleguide/blocks'; import { applyCorrectNotation } from './applyCorrectNotation'; +const AnchorCode = styled(Code)( + css({ + textDecoration: 'underline', + mx: 4, + }) +); + export const PROP_COLUMN = { key: 'key', name: 'Prop', - size: 'md', + size: 'lg', render: ({ id }: any) => {id}, }; @@ -403,26 +413,61 @@ export const DarkModeTable = () => ( ); /* eslint-disable gamut/import-paths */ +const PropertiesRenderer = ({ + property, + properties, + resolveProperty, +}: { + property: string | { physical: string; logical: string }; + properties?: string[] | { physical: string[]; logical: string[] }; + resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical'; +}) => { + const currentTheme = useTheme() as { useLogicalProperties?: boolean }; + const useLogicalProperties = currentTheme?.useLogicalProperties ?? true; + + const mode = resolveProperty + ? resolveProperty(useLogicalProperties) + : 'physical'; + + const resolvedProperty = + typeof property === 'string' ? property : property[mode]; + + let resolvedProperties: string[]; + if (!properties) { + resolvedProperties = [resolvedProperty]; + } else if (Array.isArray(properties)) { + resolvedProperties = properties; + } else { + resolvedProperties = properties[mode]; + } + + return ( + <> + {resolvedProperties.map((prop) => ( + + {kebabCase(prop)} + + ))} + + ); +}; + const PROPERTIES_COLUMN = { key: 'properties', name: 'Properties', size: 'xl', - render: ({ - property, - properties = [property], - }: { - property: string; - properties: string[]; - }) => - properties.map((property) => ( - - {kebabCase(property)} - - )), + render: (props: { + property: string | { physical: string; logical: string }; + properties?: string[] | { physical: string[]; logical: string[] }; + resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical'; + }) => , }; const SCALE_COLUMN = { @@ -430,7 +475,7 @@ const SCALE_COLUMN = { name: 'Scale', size: 'lg', render: ({ scale }: { scale: string }) => ( - {scale} + {scale} ), }; @@ -438,7 +483,12 @@ const TRANSFORM_COLUMN = { key: 'transform', name: 'Transform', size: 'fill', - render: ({ transform }: any) => transform && {transform?.name}, + render: ({ transform, resolveProperty }: any) => ( + <> + {transform && {transform?.name}} + {resolveProperty && {resolveProperty?.name}} + + ), }; export const defaultColumns = [ diff --git a/packages/styleguide/src/lib/Meta/About.mdx b/packages/styleguide/src/lib/Meta/About.mdx index bc28604d981..4e276a8e4ea 100644 --- a/packages/styleguide/src/lib/Meta/About.mdx +++ b/packages/styleguide/src/lib/Meta/About.mdx @@ -13,6 +13,7 @@ import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx import { parameters as eslintRulesParameters } from './ESLint rules.mdx'; import { parameters as faqsParameters } from './FAQs.mdx'; import { parameters as installationParameters } from './Installation.mdx'; +import { parameters as logicalPhysicalParameters } from './Logical and physical CSS properties.mdx'; import { parameters as mcpAboutParameters } from './MCP/About.mdx'; import { parameters as storiesParameters } from './Stories.mdx'; import { parameters as usageGuideParameters } from './Usage Guide.mdx'; @@ -35,9 +36,10 @@ export const parameters = { deepControlsParameters, eslintRulesParameters, faqsParameters, + installationParameters, + logicalPhysicalParameters, storiesParameters, brandParameters, - installationParameters, usageGuideParameters, mcpAboutParameters, ])} diff --git a/packages/styleguide/src/lib/Meta/Logical and physical CSS properties.mdx b/packages/styleguide/src/lib/Meta/Logical and physical CSS properties.mdx new file mode 100644 index 00000000000..cac1e10d7c8 --- /dev/null +++ b/packages/styleguide/src/lib/Meta/Logical and physical CSS properties.mdx @@ -0,0 +1,123 @@ +import { Meta } from '@storybook/blocks'; + +import { + AboutHeader, + Callout, + Code, + ImageWrapper, + TokenTable, +} from '~styleguide/blocks'; + +export const parameters = { + id: 'Meta/Logical and physical CSS properties', + title: 'Logical and physical CSS properties', + subtitle: + 'Understanding CSS logical and physical properties and how Gamut supports both modes.', + status: 'static', +}; + + + + + +## What are CSS logical properties? + +CSS logical properties are a modern approach to styling that adapts to the writing mode and text direction of your content, rather than being tied to physical screen directions. More information can be found on[MDN: CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values) + +### Physical Properties (Traditional) + +Physical properties reference the physical dimensions of the viewport. For example: + +- `margin-left`, `margin-right`, `margin-top`, `margin-bottom` +- `padding-left`, `padding-right`, `padding-top`, `padding-bottom` + +These work well for left-to-right (LTR) languages but require manual overrides for right-to-left (RTL) languages like Arabic or Hebrew. + +### Logical Properties (Modern) + +Logical properties reference the flow of content: + +- **Inline axis** (text direction): `margin-inline-start`, `margin-inline-end` +- **Block axis** (reading direction): `margin-block-start`, `margin-block-end` + +## Using `useLogicalProperties` in Gamut + +Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. This allows you to choose which mode your application uses. By default, `useLogicalProperties` is set to `true`, meaning Gamut will use logical CSS properties. If you want to use physical CSS properties, you have to set `useLogicalProperties` to `false`. + +### Affected Props + +Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop: + + {prop}, + }, + { + key: 'physical', + name: 'Physical', + size: 'xl', + render: ({ physical }) => + physical.map((p) => ( + <> + {p}{' '} + + )), + }, + { + key: 'logical', + name: 'Logical', + size: 'xl', + render: ({ logical }) => + logical.map((l) => ( + <> + {l}{' '} + + )), + }, + ]} + rows={[ + { + prop: 'mx', + physical: ['margin-left', 'margin-right'], + logical: ['margin-inline-start', 'margin-inline-end'], + }, + { prop: 'mt', physical: ['margin-top'], logical: ['margin-block-start'] }, + { + prop: 'py', + physical: ['padding-top', 'padding-bottom'], + logical: ['padding-block-start', 'padding-block-end'], + }, + { + prop: 'pb', + physical: ['padding-bottom'], + logical: ['padding-block-end'], + }, + ]} +/> + + + Props like m and p (which set all four sides at + once) are not affected by this setting, as the CSS margin and{' '} + padding shorthands work identically in both modes. + + } +/> + +## Previewing in Storybook + +You can toggle between logical and physical properties in Storybook using the **LogicalProps** toolbar button: + + + +This allows you to preview how components render with either property mode without changing any code. diff --git a/packages/styleguide/src/lib/Meta/Usage Guide.mdx b/packages/styleguide/src/lib/Meta/Usage Guide.mdx index fd7d01107fa..d8298ee7632 100644 --- a/packages/styleguide/src/lib/Meta/Usage Guide.mdx +++ b/packages/styleguide/src/lib/Meta/Usage Guide.mdx @@ -39,7 +39,8 @@ On each page is a toolbar located on the top: 1. Grid (the 2x2 collection of squares) - applies a grid to the preview 2. Color mode selector (the circle icon) - toggles between light and dark mode for rendered code examples 3. Theme switcher (the paintbrush icon) - switches between different design system themes (Core, Admin, LX Studio, Percipio) -4. Outline (dotted square) - applies outlines to elements in the rendered code examples +4. LogicalProps (the two arrows icon) - toggles between physical and logical CSS properties +5. Outline (dotted square) - applies outlines to elements in the rendered code examples ### Theme Switcher @@ -58,6 +59,10 @@ Available themes: The theme switcher works in combination with the color mode selector, so you can test both light and dark variants of each theme. +### LogicalProps + +The LogicalProps button (two arrows icon) provides a menu to select between Logical and Physical CSS properties. + ### Showing code On the bottom right of each canvas (a rendered code example) is a button to show its code: diff --git a/packages/styleguide/src/lib/Typography/Text/Text.stories.tsx b/packages/styleguide/src/lib/Typography/Text/Text.stories.tsx index 5dd0589bd64..0be504ace02 100644 --- a/packages/styleguide/src/lib/Typography/Text/Text.stories.tsx +++ b/packages/styleguide/src/lib/Typography/Text/Text.stories.tsx @@ -1,12 +1,12 @@ import { Box, Column, LayoutGrid, Text } from '@codecademy/gamut'; -// eslint-disable-next-line gamut/import-paths +import type { Meta, StoryObj } from '@storybook/react'; +import { Fragment } from 'react'; + import { typographyElementVariants, typographyStyleVariants, typographyUtilities, -} from '@codecademy/gamut/src/Typography/variants'; -import type { Meta, StoryObj } from '@storybook/react'; -import { Fragment } from 'react'; +} from '../../../../../gamut/src/Typography/variants'; const meta: Meta = { component: Text, diff --git a/packages/styleguide/src/lib/Typography/Text/tables.tsx b/packages/styleguide/src/lib/Typography/Text/tables.tsx index 18470aa04b2..a757d515ace 100644 --- a/packages/styleguide/src/lib/Typography/Text/tables.tsx +++ b/packages/styleguide/src/lib/Typography/Text/tables.tsx @@ -1,8 +1,8 @@ import { Column, LayoutGrid, Text } from '@codecademy/gamut'; -// eslint-disable-next-line gamut/import-paths -import { typographyElementVariants } from '@codecademy/gamut/src/Typography/variants'; import { Fragment } from 'react'; +import { typographyElementVariants } from '../../../../../gamut/src/Typography/variants'; + export const Elements: React.FC = () => ( {Object.keys(typographyElementVariants).map((tag) => ( diff --git a/packages/styleguide/src/lib/UX Writing/Component guidelines/Alerts.mdx b/packages/styleguide/src/lib/UX Writing/Component guidelines/Alerts.mdx index 4d265f1b7d0..ffd8dc0f494 100644 --- a/packages/styleguide/src/lib/UX Writing/Component guidelines/Alerts.mdx +++ b/packages/styleguide/src/lib/UX Writing/Component guidelines/Alerts.mdx @@ -1,4 +1,4 @@ -import { Alert, Text } from '@codecademy/gamut/src'; +import { Alert, Text } from '@codecademy/gamut'; import { Meta } from '@storybook/blocks'; import { AboutHeader, LinkTo } from '~styleguide/blocks'; diff --git a/packages/styleguide/src/static/meta/toolbar.png b/packages/styleguide/src/static/meta/toolbar.png index a94fdacf0f9..d5c8cb35b32 100644 Binary files a/packages/styleguide/src/static/meta/toolbar.png and b/packages/styleguide/src/static/meta/toolbar.png differ diff --git a/packages/variance/integration/__tests__/variance.test.ts b/packages/variance/integration/__tests__/variance.test.ts index e7cfbed6cb7..176ba59354a 100644 --- a/packages/variance/integration/__tests__/variance.test.ts +++ b/packages/variance/integration/__tests__/variance.test.ts @@ -545,6 +545,101 @@ describe('variants', () => { }); }); +describe('logical properties', () => { + const getPropertyMode = (useLogicalProperties: boolean) => + useLogicalProperties ? 'logical' : 'physical'; + + it('uses logical properties when useLogicalProperties is true (default)', () => { + const parser = variance.create({ + marginLeft: { + property: { + physical: 'marginLeft', + logical: 'marginInlineStart', + }, + resolveProperty: getPropertyMode, + }, + }); + + const result = parser({ + marginLeft: '10px', + theme: { ...theme, useLogicalProperties: true }, + }); + + expect(result).toEqual({ marginInlineStart: '10px' }); + }); + + it('uses physical properties when useLogicalProperties is false', () => { + const parser = variance.create({ + marginLeft: { + property: { + physical: 'marginLeft', + logical: 'marginInlineStart', + }, + resolveProperty: getPropertyMode, + }, + }); + + const result = parser({ + marginLeft: '10px', + theme: { ...theme, useLogicalProperties: false }, + }); + + expect(result).toEqual({ marginLeft: '10px' }); + }); + + it('defaults to logical properties when useLogicalProperties is not set', () => { + const parser = variance.create({ + width: { + property: { + physical: 'width', + logical: 'inlineSize', + }, + resolveProperty: getPropertyMode, + }, + }); + + const result = parser({ + width: '100px', + theme, + }); + + expect(result).toEqual({ inlineSize: '100px' }); + }); + + it('handles directional properties array with resolveProperty', () => { + const parser = variance.create({ + mx: { + property: 'margin', + properties: { + physical: ['marginLeft', 'marginRight'], + logical: ['marginInlineStart', 'marginInlineEnd'], + }, + resolveProperty: getPropertyMode, + }, + }); + + const logicalResult = parser({ + mx: '20px', + theme: { ...theme, useLogicalProperties: true }, + }); + + expect(logicalResult).toEqual({ + marginInlineStart: '20px', + marginInlineEnd: '20px', + }); + + const physicalResult = parser({ + mx: '20px', + theme: { ...theme, useLogicalProperties: false }, + }); + + expect(physicalResult).toEqual({ + marginLeft: '20px', + marginRight: '20px', + }); + }); +}); + describe('states', () => { const marginTransform = jest.fn(); diff --git a/packages/variance/src/core.ts b/packages/variance/src/core.ts index c74924500db..db6debbffaf 100644 --- a/packages/variance/src/core.ts +++ b/packages/variance/src/core.ts @@ -18,6 +18,7 @@ import { TransformerMap, Variant, } from './types/config'; +import { DirectionalProperties } from './types/properties'; import { BreakpointCache, CSSObject, ThemeProps } from './types/props'; import { getStaticCss } from './utils/getStaticProperties'; import { orderPropNames } from './utils/propNames'; @@ -96,12 +97,21 @@ export const variance = { const { transform = identity, property, - properties = [property], + properties: configProperties, scale, + resolveProperty, } = config; const getScaleValue = createScaleLookup(scale); const alwaysTransform = scale === undefined || isArray(scale); + const isDirectionalProperties = ( + props: typeof configProperties + ): props is DirectionalProperties => + props !== undefined && + !isArray(props) && + 'physical' in props && + 'logical' in props; + return { ...config, prop, @@ -135,18 +145,45 @@ export const variance = { return styles; } + const useLogicalProperties = + (props.theme as { useLogicalProperties?: boolean }) + ?.useLogicalProperties ?? true; + + let resolvedProperties: readonly ( + | string + | { physical: string; logical: string } + )[]; + if (isDirectionalProperties(configProperties)) { + const mode = resolveProperty + ? resolveProperty(useLogicalProperties) + : useLogicalProperties + ? 'logical' + : 'physical'; + resolvedProperties = configProperties[mode]; + } else { + resolvedProperties = configProperties ?? [property]; + } + // for each property look up the scale value from theme if passed and apply any // final transforms to the value - properties.forEach((property) => { + resolvedProperties.forEach((property) => { + let resolvedProperty: string; + if (resolveProperty && typeof property === 'object') { + const mode = resolveProperty(useLogicalProperties); + resolvedProperty = property[mode]; + } else { + resolvedProperty = property as string; + } + let styleValue: ReturnType = intermediateValue; if (useTransform && !isUndefined(styleValue)) { - styleValue = transform(styleValue, property, props); + styleValue = transform(styleValue, resolvedProperty, props); } switch (typeof styleValue) { case 'number': case 'string': - return (styles[property] = styleValue); + return (styles[resolvedProperty] = styleValue); case 'object': return Object.assign(styles, styleValue); default: diff --git a/packages/variance/src/getPropertyMode/getPropertyMode.test.ts b/packages/variance/src/getPropertyMode/getPropertyMode.test.ts new file mode 100644 index 00000000000..ddb8720b241 --- /dev/null +++ b/packages/variance/src/getPropertyMode/getPropertyMode.test.ts @@ -0,0 +1,13 @@ +import { getPropertyMode } from './getPropertyMode'; + +describe('getPropertyMode', () => { + it.each([ + { useLogicalProperties: true, expected: 'logical' }, + { useLogicalProperties: false, expected: 'physical' }, + ])( + 'returns "$expected" when useLogicalProperties is $useLogicalProperties', + ({ useLogicalProperties, expected }) => { + expect(getPropertyMode(useLogicalProperties)).toBe(expected); + } + ); +}); diff --git a/packages/variance/src/getPropertyMode/getPropertyMode.ts b/packages/variance/src/getPropertyMode/getPropertyMode.ts new file mode 100644 index 00000000000..6b2507fc993 --- /dev/null +++ b/packages/variance/src/getPropertyMode/getPropertyMode.ts @@ -0,0 +1,7 @@ +import { PropertyMode } from '../types/properties'; + +export const getPropertyMode = ( + useLogicalProperties: boolean +): PropertyMode => { + return useLogicalProperties ? 'logical' : 'physical'; +}; diff --git a/packages/variance/src/getPropertyMode/index.ts b/packages/variance/src/getPropertyMode/index.ts new file mode 100644 index 00000000000..e85e49cd2a8 --- /dev/null +++ b/packages/variance/src/getPropertyMode/index.ts @@ -0,0 +1 @@ +export * from './getPropertyMode'; diff --git a/packages/variance/src/index.ts b/packages/variance/src/index.ts index 35fb9eb488b..6c1279e8061 100644 --- a/packages/variance/src/index.ts +++ b/packages/variance/src/index.ts @@ -3,3 +3,4 @@ export * from './createTheme'; export * from './types/props'; export * from './transforms'; export * from './scales/createScale'; +export * from './getPropertyMode'; diff --git a/packages/variance/src/types/config.ts b/packages/variance/src/types/config.ts index 860fe1b5b68..c4dc0be88eb 100644 --- a/packages/variance/src/types/config.ts +++ b/packages/variance/src/types/config.ts @@ -1,6 +1,12 @@ import { Theme } from '@emotion/react'; -import { DefaultCSSPropertyValue, PropertyTypes } from './properties'; +import { + DefaultCSSPropertyValue, + DirectionalProperties, + DirectionalProperty, + PropertyMode, + PropertyTypes, +} from './properties'; import { AbstractProps, CSSObject, @@ -14,9 +20,11 @@ import { AllUnionKeys, Key, KeyFromUnion } from './utils'; export type MapScale = Record; export type ArrayScale = readonly (string | number)[] & { length: 0 }; +export type PropertyValue = keyof PropertyTypes | DirectionalProperty; + export interface BaseProperty { - property: keyof PropertyTypes; - properties?: readonly (keyof PropertyTypes)[]; + property: PropertyValue; + properties?: readonly PropertyValue[] | DirectionalProperties; } export interface Prop extends BaseProperty { @@ -26,6 +34,7 @@ export interface Prop extends BaseProperty { prop?: string, props?: AbstractProps ) => string | number | CSSObject; + resolveProperty?: (useLogicalProperties: boolean) => PropertyMode; } export interface AbstractPropTransformer extends Prop { @@ -47,14 +56,24 @@ export type PropertyValues< All extends true ? never : object | any[] >; +// Extract a single property key from PropertyValue for type inference +// Uses 'physical' for directional properties (both physical/logical have same value types) +type BasePropertyKey

= P extends DirectionalProperty ? P['physical'] : P; + export type ScaleValue = Config['scale'] extends keyof Theme - ? keyof Theme[Config['scale']] | PropertyValues + ? + | keyof Theme[Config['scale']] + | PropertyValues> : Config['scale'] extends MapScale - ? keyof Config['scale'] | PropertyValues + ? + | keyof Config['scale'] + | PropertyValues> : Config['scale'] extends ArrayScale - ? Config['scale'][number] | PropertyValues - : PropertyValues; + ? + | Config['scale'][number] + | PropertyValues> + : PropertyValues, true>; export type Scale = ResponsiveProp< ScaleValue | ((theme: Theme) => ScaleValue) diff --git a/packages/variance/src/types/properties.ts b/packages/variance/src/types/properties.ts index f307cb60d2c..61131257ff5 100644 --- a/packages/variance/src/types/properties.ts +++ b/packages/variance/src/types/properties.ts @@ -47,3 +47,15 @@ export interface VendorPropertyTypes export interface CSSPropertyTypes extends PropertyTypes, VendorPropertyTypes {} + +export type PropertyMode = 'logical' | 'physical'; + +export interface DirectionalProperty { + physical: keyof PropertyTypes; + logical: keyof PropertyTypes; +} + +export interface DirectionalProperties { + physical: readonly (keyof PropertyTypes)[]; + logical: readonly (keyof PropertyTypes)[]; +} diff --git a/packages/variance/src/utils/__tests__/propNames.test.ts b/packages/variance/src/utils/__tests__/propNames.test.ts index 32d64884036..7044593b931 100644 --- a/packages/variance/src/utils/__tests__/propNames.test.ts +++ b/packages/variance/src/utils/__tests__/propNames.test.ts @@ -81,6 +81,31 @@ describe('orderPropNames', () => { expect(result).toEqual(['margin', 'marginX', 'marginY', 'marginLeft']); }); + + it('handles DirectionalProperties objects with physical/logical arrays', () => { + const result = orderPropNames({ + mx: { + property: 'margin', + properties: { + physical: ['marginLeft', 'marginRight'], + logical: ['marginInlineStart', 'marginInlineEnd'], + }, + }, + my: { + property: 'margin', + properties: { + physical: ['marginTop', 'marginBottom'], + logical: ['marginBlockStart', 'marginBlockEnd'], + }, + }, + marginLeft: { + property: 'marginLeft', + }, + }); + + expect(result).toEqual(['mx', 'my', 'marginLeft']); + }); + it('orders all props', () => { const result = orderPropNames(testConfig); diff --git a/packages/variance/src/utils/propNames.ts b/packages/variance/src/utils/propNames.ts index f4f75913cc8..3450bdb4f13 100644 --- a/packages/variance/src/utils/propNames.ts +++ b/packages/variance/src/utils/propNames.ts @@ -1,4 +1,5 @@ -import { BaseProperty } from '../types/config'; +import { BaseProperty, PropertyValue } from '../types/config'; +import { DirectionalProperties } from '../types/properties'; const SHORTHAND_PROPERTIES = [ 'border', @@ -36,6 +37,19 @@ const compare = (a: number, b: number) => { return SORT.EQUAL; }; +const isShorthand = (prop: PropertyValue): boolean => + typeof prop === 'string' && SHORTHAND_PROPERTIES.includes(prop); + +const getShorthandIndex = (prop: PropertyValue): number => + typeof prop === 'string' ? SHORTHAND_PROPERTIES.indexOf(prop) : -1; + +const getPropertiesCount = (properties: BaseProperty['properties']): number => { + if (!properties) return 0; + if (Array.isArray(properties)) return properties.length; + // DirectionalProperties object - using physical array length as representative, since the length for logical is the same + return (properties as DirectionalProperties).physical?.length ?? 0; +}; + /** * Orders all properties by the most dependent props * @param config @@ -44,21 +58,18 @@ export const orderPropNames = (config: Record) => Object.keys(config).sort((a, b) => { const { [a]: aConf, [b]: bConf } = config; - const { property: aProp, properties: aProperties = [] } = aConf; - const { property: bProp, properties: bProperties = [] } = bConf; + const { property: aProp, properties: aProperties } = aConf; + const { property: bProp, properties: bProperties } = bConf; - const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp); - const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp); + const aIsShorthand = isShorthand(aProp); + const bIsShorthand = isShorthand(bProp); if (aIsShorthand && bIsShorthand) { - const aNum = aProperties.length; - const bNum = bProperties.length; + const aNum = getPropertiesCount(aProperties); + const bNum = getPropertiesCount(bProperties); if (aProp !== bProp) { - return compare( - SHORTHAND_PROPERTIES.indexOf(aProp), - SHORTHAND_PROPERTIES.indexOf(bProp) - ); + return compare(getShorthandIndex(aProp), getShorthandIndex(bProp)); } if (aProp === bProp) { diff --git a/yarn.lock b/yarn.lock index 942a41c4529..782422eba8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1616,6 +1616,21 @@ __metadata: languageName: node linkType: hard +"@codecademy/gamut-icons@npm:9.54.2": + version: 9.54.2 + resolution: "@codecademy/gamut-icons@npm:9.54.2" + dependencies: + "@codecademy/gamut-styles": "npm:17.11.2" + "@codecademy/variance": "npm:0.25.2" + peerDependencies: + "@emotion/react": ^11.4.0 + "@emotion/styled": ^11.3.0 + lodash: ^4.17.23 + react: ^17.0.2 || ^18.2.0 + checksum: 10c0/80f10b2261c4434a9c09fa9175a8107f9b505b0e7799d689d906cd7db6014260e4753353cac3f430ca98665b321fda93755ec451666e60771e1f44e03d68c178 + languageName: node + linkType: hard + "@codecademy/gamut-icons@npm:9.55.0, @codecademy/gamut-icons@workspace:packages/gamut-icons": version: 0.0.0-use.local resolution: "@codecademy/gamut-icons@workspace:packages/gamut-icons" @@ -1703,11 +1718,47 @@ __metadata: languageName: unknown linkType: soft -"@codecademy/gamut@npm:68.0.1, @codecademy/gamut@workspace:packages/gamut": +"@codecademy/gamut@npm:68.0.1": + version: 68.0.1 + resolution: "@codecademy/gamut@npm:68.0.1" + dependencies: + "@codecademy/gamut-icons": "npm:9.55.0" + "@codecademy/gamut-illustrations": "npm:0.58.2" + "@codecademy/gamut-patterns": "npm:0.10.21" + "@codecademy/gamut-styles": "npm:17.11.2" + "@codecademy/variance": "npm:0.25.2" + "@types/marked": "npm:^4.0.8" + "@vidstack/react": "npm:^1.12.12" + classnames: "npm:^2.2.5" + framer-motion: "npm:^11.18.0" + html-to-react: "npm:^1.6.0" + invariant: "npm:^2.2.4" + lodash: "npm:^4.17.23" + marked: "npm:^4.3.0" + polished: "npm:^4.1.2" + react-aria-components: "npm:1.8.0" + react-aria-tabpanel: "npm:^4.4.0" + react-focus-on: "npm:^3.10.0" + react-hook-form: "npm:^7.65.0" + react-player: "npm:^2.16.0" + react-select: "npm:^5.2.2" + react-truncate-markup: "npm:^5.1.2" + react-use: "npm:^15.3.8" + sanitize-markdown: "npm:^2.6.7" + peerDependencies: + "@emotion/react": ^11.4.0 + "@emotion/styled": ^11.3.0 + react: ^17.0.2 || ^18.2.0 + react-dom: ^17.0.2 || ^18.2.0 + checksum: 10c0/5639b3edbaa0efe55ae4d1ee6a2b7e89b98a5181b69ff39260604429e9feb74ef90b8582e3de7c69ff7ff43eaa7c4b25730ad55d8422883e9bd47fa52c8d74b9 + languageName: node + linkType: hard + +"@codecademy/gamut@workspace:packages/gamut": version: 0.0.0-use.local resolution: "@codecademy/gamut@workspace:packages/gamut" dependencies: - "@codecademy/gamut-icons": "npm:9.55.0" + "@codecademy/gamut-icons": "npm:9.54.2" "@codecademy/gamut-illustrations": "npm:0.58.2" "@codecademy/gamut-patterns": "npm:0.10.21" "@codecademy/gamut-styles": "npm:17.11.2"