Update semantic border-radius token layer (#10669)

### WHY are these changes introduced? Fixes #10421 ### WHAT is this pull request doing? - Added `border-radius-full` to a new `BorderRadiusAlias` type - Created `BorderRadiusAliasOrScale` combining `BorderRadiusScale` and `BorderRadiusAlias` - Updated component token prop types to `BorderWidthAliasOrScale`
Shopify · Sep 28, 2023 · 794d1f5 · 794d1f5
1 parent 24d6d76
commit 794d1f5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/.changeset/quick-icons-joke.md b/.changeset/quick-icons-joke.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': major
+'@shopify/polaris-tokens': minor
+---
+
+Added `border-radius` semantic layer
diff --git 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,
+  BorderRadiusAliasOrScale,
   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?: BorderRadiusAliasOrScale;
   /** Vertical end horizontal start border radius */
-  borderEndStartRadius?: BorderRadiusScale;
+  borderEndStartRadius?: BorderRadiusAliasOrScale;
   /** Vertical end horizontal end border radius */
-  borderEndEndRadius?: BorderRadiusScale;
+  borderEndEndRadius?: BorderRadiusAliasOrScale;
   /** Vertical start horizontal start border radius */
-  borderStartStartRadius?: BorderRadiusScale;
+  borderStartStartRadius?: BorderRadiusAliasOrScale;
   /** Vertical start horizontal end border radius */
-  borderStartEndRadius?: BorderRadiusScale;
+  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
@@ -1,7 +1,7 @@
 import type {
   BreakpointsAlias,
   ColorBackgroundAlias,
-  BorderRadiusScale,
+  BorderRadiusAliasOrScale,
   SpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
@@ -38,7 +38,7 @@ export const Card = ({
   roundedAbove,
 }: CardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius: BorderRadiusScale = '300';
+  const defaultBorderRadius: BorderRadiusAliasOrScale = '300';
 
   let hasBorderRadius = !roundedAbove;
 

diff --git 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 {
+  BorderRadiusAliasOrScale,
+  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: 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
@@ -1,5 +1,8 @@
 import React, {useEffect, useState, useRef, useCallback, useId} from 'react';
-import type {BorderRadiusScale, SpaceScale} from '@shopify/polaris-tokens';
+import type {
+  BorderRadiusAliasOrScale,
+  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<SpaceScale, '400'>;
-export type BorderRadius = Extract<BorderRadiusScale, '100' | '200'>;
+export type BorderRadius = Extract<BorderRadiusAliasOrScale, '100' | '200'>;
 
 export interface TooltipProps {
   /** The element that will activate to tooltip */

diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
@@ -18,6 +18,8 @@ export type {
   BorderTokenGroup,
   BorderTokenName,
   BorderRadiusScale,
+  BorderRadiusAlias,
+  BorderRadiusAliasOrScale,
   BorderWidthScale,
 } from './themes/base/border';
 

diff --git 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 BorderRadiusAliasOrScale = BorderRadiusAlias | BorderRadiusScale;
+
 export type BorderWidthScale =
   | '0165'
   | '025'
@@ -40,7 +43,7 @@ export type BorderWidthScale =
   | BorderWidthScaleExperimental;
 
 export type BorderTokenName =
-  | `border-radius-${BorderRadiusScale}`
+  | `border-radius-${BorderRadiusAliasOrScale}`
   | `border-width-${BorderWidthScale}`;
 
 export type BorderTokenGroup = {