From 496edc27a241e4bd69be137042c1198d6f4243e1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 25 Sep 2023 14:58:23 -0600 Subject: [PATCH 1/3] Update semantic `border-radius` token layer --- polaris-react/src/components/Box/Box.tsx | 12 ++++++------ polaris-react/src/components/Card/Card.tsx | 4 ++-- .../src/components/ShadowBevel/ShadowBevel.tsx | 7 +++++-- polaris-react/src/components/Tooltip/Tooltip.tsx | 7 +++++-- polaris-tokens/src/index.ts | 2 ++ polaris-tokens/src/themes/base/border.ts | 7 +++++-- 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx index 6f8f45961ff..70b9e195273 100644 --- a/polaris-react/src/components/Box/Box.tsx +++ b/polaris-react/src/components/Box/Box.tsx @@ -4,7 +4,7 @@ import type { ColorBackgroundAlias, ColorBorderAlias, BorderWidthScale, - BorderRadiusScale, + BorderRadiusScaleOrAlias, ShadowAlias, SpaceScale, } from '@shopify/polaris-tokens'; @@ -39,15 +39,15 @@ export interface BoxProps extends React.AriaAttributes { /** Border style */ borderStyle?: LineStyles; /** Border radius */ - borderRadius?: BorderRadiusScale; + borderRadius?: BorderRadiusScaleOrAlias; /** Vertical end horizontal start border radius */ - borderEndStartRadius?: BorderRadiusScale; + borderEndStartRadius?: BorderRadiusScaleOrAlias; /** Vertical end horizontal end border radius */ - borderEndEndRadius?: BorderRadiusScale; + borderEndEndRadius?: BorderRadiusScaleOrAlias; /** Vertical start horizontal start border radius */ - borderStartStartRadius?: BorderRadiusScale; + borderStartStartRadius?: BorderRadiusScaleOrAlias; /** Vertical start horizontal end border radius */ - borderStartEndRadius?: BorderRadiusScale; + borderStartEndRadius?: BorderRadiusScaleOrAlias; /** Border width */ borderWidth?: BorderWidthScale; /** Vertical start border width */ diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx index 7144e397003..83b3d4f049f 100644 --- a/polaris-react/src/components/Card/Card.tsx +++ b/polaris-react/src/components/Card/Card.tsx @@ -1,7 +1,7 @@ import type { BreakpointsAlias, ColorBackgroundAlias, - BorderRadiusScale, + BorderRadiusScaleOrAlias, SpaceScale, } from '@shopify/polaris-tokens'; import React from 'react'; @@ -38,7 +38,7 @@ export const Card = ({ roundedAbove, }: CardProps) => { const breakpoints = useBreakpoints(); - const defaultBorderRadius: BorderRadiusScale = '3'; + const defaultBorderRadius: BorderRadiusScaleOrAlias = '3'; let hasBorderRadius = !roundedAbove; diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx index c338a9b3b46..e95ae795395 100644 --- a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx +++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx @@ -1,5 +1,8 @@ import React from 'react'; -import type {BorderRadiusScale, ShadowAlias} from '@shopify/polaris-tokens'; +import type { + BorderRadiusScaleOrAlias, + ShadowAlias, +} from '@shopify/polaris-tokens'; import {getResponsiveValue} from '../../utilities/css'; import type {ResponsiveProp} from '../../utilities/css'; @@ -12,7 +15,7 @@ export interface ShadowBevelProps { /** The box-shadow applied to the root element. */ boxShadow: ShadowAlias; /** The border-radius applied to both the root and pseudo elements. */ - borderRadius: BorderRadiusScale; + borderRadius: BorderRadiusScaleOrAlias; /** The z-index applied to the pseudo element. */ zIndex?: string; /** diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx index 0412922c077..caabe8359d7 100644 --- a/polaris-react/src/components/Tooltip/Tooltip.tsx +++ b/polaris-react/src/components/Tooltip/Tooltip.tsx @@ -1,5 +1,8 @@ import React, {useEffect, useState, useRef, useCallback, useId} from 'react'; -import type {BorderRadiusScale, SpaceScale} from '@shopify/polaris-tokens'; +import type { + BorderRadiusScaleOrAlias, + SpaceScale, +} from '@shopify/polaris-tokens'; import {Portal} from '../Portal'; import {useEphemeralPresenceManager} from '../../utilities/ephemeral-presence-manager'; @@ -13,7 +16,7 @@ import styles from './Tooltip.scss'; export type Width = 'default' | 'wide'; export type Padding = 'default' | Extract; -export type BorderRadius = Extract; +export type BorderRadius = Extract; export interface TooltipProps { /** The element that will activate to tooltip */ diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts index 0a289327036..ecfabde89dd 100644 --- a/polaris-tokens/src/index.ts +++ b/polaris-tokens/src/index.ts @@ -18,6 +18,8 @@ export type { BorderTokenGroup, BorderTokenName, BorderRadiusScale, + BorderRadiusAlias, + BorderRadiusScaleOrAlias, BorderWidthScale, } from './themes/base/border'; diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts index bc98c9590e5..6fc898ebcd1 100644 --- a/polaris-tokens/src/themes/base/border.ts +++ b/polaris-tokens/src/themes/base/border.ts @@ -15,7 +15,6 @@ export type BorderRadiusScale = | '400' | '500' | '750' - | 'full' | '05' | '1' | '2' @@ -27,6 +26,10 @@ export type BorderRadiusScale = type BorderWidthScaleExperimental = Experimental<'1' | '2'>; +export type BorderRadiusAlias = 'full'; + +export type BorderRadiusScaleOrAlias = BorderRadiusScale | BorderRadiusAlias; + export type BorderWidthScale = | '0165' | '025' @@ -40,7 +43,7 @@ export type BorderWidthScale = | BorderWidthScaleExperimental; export type BorderTokenName = - | `border-radius-${BorderRadiusScale}` + | `border-radius-${BorderRadiusScaleOrAlias}` | `border-width-${BorderWidthScale}`; export type BorderTokenGroup = { From ede5709b2bd59d3a6e3db656bf65f50b5fb612c5 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 25 Sep 2023 16:23:01 -0600 Subject: [PATCH 2/3] Add changeset --- .changeset/quick-icons-joke.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/quick-icons-joke.md diff --git a/.changeset/quick-icons-joke.md b/.changeset/quick-icons-joke.md new file mode 100644 index 00000000000..9e2f4658e8a --- /dev/null +++ b/.changeset/quick-icons-joke.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': major +'@shopify/polaris-tokens': minor +--- + +Added `border-radius` semantic layer From 1ce318929cd265090fa618db2c0b8d6154024d8e Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Mon, 25 Sep 2023 16:25:14 -0600 Subject: [PATCH 3/3] Update type naming --- polaris-react/src/components/Box/Box.tsx | 12 ++++++------ polaris-react/src/components/Card/Card.tsx | 4 ++-- .../src/components/ShadowBevel/ShadowBevel.tsx | 4 ++-- polaris-react/src/components/Tooltip/Tooltip.tsx | 4 ++-- polaris-tokens/src/index.ts | 2 +- polaris-tokens/src/themes/base/border.ts | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx index 70b9e195273..7ead11d13d8 100644 --- a/polaris-react/src/components/Box/Box.tsx +++ b/polaris-react/src/components/Box/Box.tsx @@ -4,7 +4,7 @@ import type { ColorBackgroundAlias, ColorBorderAlias, BorderWidthScale, - BorderRadiusScaleOrAlias, + BorderRadiusAliasOrScale, ShadowAlias, SpaceScale, } from '@shopify/polaris-tokens'; @@ -39,15 +39,15 @@ export interface BoxProps extends React.AriaAttributes { /** Border style */ borderStyle?: LineStyles; /** Border radius */ - borderRadius?: BorderRadiusScaleOrAlias; + borderRadius?: BorderRadiusAliasOrScale; /** Vertical end horizontal start border radius */ - borderEndStartRadius?: BorderRadiusScaleOrAlias; + borderEndStartRadius?: BorderRadiusAliasOrScale; /** Vertical end horizontal end border radius */ - borderEndEndRadius?: BorderRadiusScaleOrAlias; + borderEndEndRadius?: BorderRadiusAliasOrScale; /** Vertical start horizontal start border radius */ - borderStartStartRadius?: BorderRadiusScaleOrAlias; + borderStartStartRadius?: BorderRadiusAliasOrScale; /** Vertical start horizontal end border radius */ - borderStartEndRadius?: BorderRadiusScaleOrAlias; + borderStartEndRadius?: BorderRadiusAliasOrScale; /** Border width */ borderWidth?: BorderWidthScale; /** Vertical start border width */ diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx index 83b3d4f049f..dd87dc9e149 100644 --- a/polaris-react/src/components/Card/Card.tsx +++ b/polaris-react/src/components/Card/Card.tsx @@ -1,7 +1,7 @@ import type { BreakpointsAlias, ColorBackgroundAlias, - BorderRadiusScaleOrAlias, + BorderRadiusAliasOrScale, SpaceScale, } from '@shopify/polaris-tokens'; import React from 'react'; @@ -38,7 +38,7 @@ export const Card = ({ roundedAbove, }: CardProps) => { const breakpoints = useBreakpoints(); - const defaultBorderRadius: BorderRadiusScaleOrAlias = '3'; + const defaultBorderRadius: BorderRadiusAliasOrScale = '3'; let hasBorderRadius = !roundedAbove; diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx index e95ae795395..4dfabc6a1a9 100644 --- a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx +++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { - BorderRadiusScaleOrAlias, + BorderRadiusAliasOrScale, ShadowAlias, } from '@shopify/polaris-tokens'; @@ -15,7 +15,7 @@ export interface ShadowBevelProps { /** The box-shadow applied to the root element. */ boxShadow: ShadowAlias; /** The border-radius applied to both the root and pseudo elements. */ - borderRadius: BorderRadiusScaleOrAlias; + borderRadius: BorderRadiusAliasOrScale; /** The z-index applied to the pseudo element. */ zIndex?: string; /** diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx index caabe8359d7..4a054c096a0 100644 --- a/polaris-react/src/components/Tooltip/Tooltip.tsx +++ b/polaris-react/src/components/Tooltip/Tooltip.tsx @@ -1,6 +1,6 @@ import React, {useEffect, useState, useRef, useCallback, useId} from 'react'; import type { - BorderRadiusScaleOrAlias, + BorderRadiusAliasOrScale, SpaceScale, } from '@shopify/polaris-tokens'; @@ -16,7 +16,7 @@ import styles from './Tooltip.scss'; export type Width = 'default' | 'wide'; export type Padding = 'default' | Extract; -export type BorderRadius = Extract; +export type BorderRadius = Extract; export interface TooltipProps { /** The element that will activate to tooltip */ diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts index ecfabde89dd..e47a1d0a17b 100644 --- a/polaris-tokens/src/index.ts +++ b/polaris-tokens/src/index.ts @@ -19,7 +19,7 @@ export type { BorderTokenName, BorderRadiusScale, BorderRadiusAlias, - BorderRadiusScaleOrAlias, + BorderRadiusAliasOrScale, BorderWidthScale, } from './themes/base/border'; diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts index 6fc898ebcd1..bb0a4ff8b21 100644 --- a/polaris-tokens/src/themes/base/border.ts +++ b/polaris-tokens/src/themes/base/border.ts @@ -28,7 +28,7 @@ type BorderWidthScaleExperimental = Experimental<'1' | '2'>; export type BorderRadiusAlias = 'full'; -export type BorderRadiusScaleOrAlias = BorderRadiusScale | BorderRadiusAlias; +export type BorderRadiusAliasOrScale = BorderRadiusAlias | BorderRadiusScale; export type BorderWidthScale = | '0165' @@ -43,7 +43,7 @@ export type BorderWidthScale = | BorderWidthScaleExperimental; export type BorderTokenName = - | `border-radius-${BorderRadiusScaleOrAlias}` + | `border-radius-${BorderRadiusAliasOrScale}` | `border-width-${BorderWidthScale}`; export type BorderTokenGroup = {