[Box] Update border radius props to match web spec (#10100)

### WHY are these changes introduced? Fixes #10064 <details> <summary>Playground</summary> ```jsx import React from 'react'; import {Box, Page, VerticalStack} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} <VerticalStack gap="3"> <Box padding="3" background="bg-caution" borderRadius="3"> control{' '} </Box> <Box padding="3" background="bg-caution" borderStartStartRadius="3"> border start start radius </Box> <Box padding="3" background="bg-caution" borderStartEndRadius="3"> border start end radius </Box> <Box padding="3" background="bg-caution" borderEndStartRadius="3"> border end start radius </Box> <Box padding="3" background="bg-caution" borderEndEndRadius="3"> border end end radius </Box> </VerticalStack> </Page> ); } ``` </details>
Shopify · Aug 17, 2023 · 4c7b2d4 · 4c7b2d4
1 parent 2175f45
commit 4c7b2d4
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git a/.changeset/fuzzy-pears-jog.md b/.changeset/fuzzy-pears-jog.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Updated `borderRadius` props to match web spec
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -29,3 +29,13 @@ Secondary, becomes oneThird:
 **TextField**
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`
+
+**Box**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndStart" --to="variant" --newValue="borderEndStartRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndEnd" --to="variant" --newValue="borderEndEndRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartStart" --to="variant" --newValue="borderStartStartRadius"`
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartEnd" --to="variant" --newValue="borderStartEndRadius"`
diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx
@@ -202,10 +202,10 @@ export function DefaultBanner({
         <Box
           background={backgroundColor}
           color={textColor}
-          borderRadiusStartStart={smUp ? '3' : undefined}
-          borderRadiusStartEnd={smUp ? '3' : undefined}
-          borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
-          borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
+          borderStartStartRadius={smUp ? '3' : undefined}
+          borderStartEndRadius={smUp ? '3' : undefined}
+          borderEndStartRadius={!hasContent && smUp ? '3' : undefined}
+          borderEndEndRadius={!hasContent && smUp ? '3' : undefined}
           padding="3"
         >
           <HorizontalStack

diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
@@ -26,10 +26,10 @@
   --pc-box-shadow: initial;
   --pc-box-background: initial;
   --pc-box-border-radius: initial;
-  --pc-box-border-radius-end-start: var(--pc-box-border-radius);
-  --pc-box-border-radius-end-end: var(--pc-box-border-radius);
-  --pc-box-border-radius-start-start: var(--pc-box-border-radius);
-  --pc-box-border-radius-start-end: var(--pc-box-border-radius);
+  --pc-box-border-end-start-radius: var(--pc-box-border-radius);
+  --pc-box-border-end-end-radius: var(--pc-box-border-radius);
+  --pc-box-border-start-start-radius: var(--pc-box-border-radius);
+  --pc-box-border-start-end-radius: var(--pc-box-border-radius);
   --pc-box-color: initial;
   --pc-box-min-height: initial;
   --pc-box-min-width: initial;
@@ -65,16 +65,16 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   box-shadow: var(--pc-box-shadow);
   // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  border-end-start-radius: var(--pc-box-border-radius-end-start);
+  border-end-start-radius: var(--pc-box-border-end-start-radius);
   // stylelint-enable
   // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  border-end-end-radius: var(--pc-box-border-radius-end-end);
+  border-end-end-radius: var(--pc-box-border-end-end-radius);
   // stylelint-enable
   // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  border-start-start-radius: var(--pc-box-border-radius-start-start);
+  border-start-start-radius: var(--pc-box-border-start-start-radius);
   // stylelint-enable
   // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  border-start-end-radius: var(--pc-box-border-radius-start-end);
+  border-start-end-radius: var(--pc-box-border-start-end-radius);
   // stylelint-enable
   // stylelint-disable-next-line -- component custom property that maps to Polaris tokens
   border-color: var(--pc-box-border-color);

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -41,13 +41,13 @@ export interface BoxProps extends React.AriaAttributes {
   /** Border radius */
   borderRadius?: BorderRadiusScale;
   /** Vertical end horizontal start border radius */
-  borderRadiusEndStart?: BorderRadiusScale;
+  borderEndStartRadius?: BorderRadiusScale;
   /** Vertical end horizontal end border radius */
-  borderRadiusEndEnd?: BorderRadiusScale;
+  borderEndEndRadius?: BorderRadiusScale;
   /** Vertical start horizontal start border radius */
-  borderRadiusStartStart?: BorderRadiusScale;
+  borderStartStartRadius?: BorderRadiusScale;
   /** Vertical start horizontal end border radius */
-  borderRadiusStartEnd?: BorderRadiusScale;
+  borderStartEndRadius?: BorderRadiusScale;
   /** Border width */
   borderWidth?: BorderWidthScale;
   /** Vertical start border width */
@@ -153,10 +153,10 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       borderInlineStartWidth,
       borderInlineEndWidth,
       borderRadius,
-      borderRadiusEndStart,
-      borderRadiusEndEnd,
-      borderRadiusStartStart,
-      borderRadiusStartEnd,
+      borderEndStartRadius,
+      borderEndEndRadius,
+      borderStartStartRadius,
+      borderStartEndRadius,
       children,
       color,
       id,
@@ -224,17 +224,17 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-border-radius': borderRadius
         ? `var(--p-border-radius-${borderRadius})`
         : undefined,
-      '--pc-box-border-radius-end-start': borderRadiusEndStart
-        ? `var(--p-border-radius-${borderRadiusEndStart})`
+      '--pc-box-border-end-start-radius': borderEndStartRadius
+        ? `var(--p-border-radius-${borderEndStartRadius})`
         : undefined,
-      '--pc-box-border-radius-end-end': borderRadiusEndEnd
-        ? `var(--p-border-radius-${borderRadiusEndEnd})`
+      '--pc-box-border-end-end-radius': borderEndEndRadius
+        ? `var(--p-border-radius-${borderEndEndRadius})`
         : undefined,
-      '--pc-box-border-radius-start-start': borderRadiusStartStart
-        ? `var(--p-border-radius-${borderRadiusStartStart})`
+      '--pc-box-border-start-start-radius': borderStartStartRadius
+        ? `var(--p-border-radius-${borderStartStartRadius})`
         : undefined,
-      '--pc-box-border-radius-start-end': borderRadiusStartEnd
-        ? `var(--p-border-radius-${borderRadiusStartEnd})`
+      '--pc-box-border-start-end-radius': borderStartEndRadius
+        ? `var(--p-border-radius-${borderStartEndRadius})`
         : undefined,
       '--pc-box-border-width': borderWidth
         ? `var(--p-border-width-${borderWidth})`