Skip to content

Commit 4c7b2d4

Browse files
kyledurandkyledurand
authored
[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>
1 parent 2175f45 commit 4c7b2d4

File tree

5 files changed

+43
-28
lines changed

5 files changed

+43
-28
lines changed

‎.changeset/fuzzy-pears-jog.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': major
3+
---
4+
5+
Updated `borderRadius` props to match web spec

‎documentation/guides/migrating-from-v11-to-v12.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,13 @@ Secondary, becomes oneThird:
2929
**TextField**
3030

3131
`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"`
32+
33+
**Box**
34+
35+
`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndStart" --to="variant" --newValue="borderEndStartRadius"`
36+
37+
`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusEndEnd" --to="variant" --newValue="borderEndEndRadius"`
38+
39+
`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartStart" --to="variant" --newValue="borderStartStartRadius"`
40+
41+
`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Box" --from="borderRadiusStartEnd" --to="variant" --newValue="borderStartEndRadius"`

‎polaris-react/src/components/Banner/Banner.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -202,10 +202,10 @@ export function DefaultBanner({
202202
<Box
203203
background={backgroundColor}
204204
color={textColor}
205-
borderRadiusStartStart={smUp ? '3' : undefined}
206-
borderRadiusStartEnd={smUp ? '3' : undefined}
207-
borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
208-
borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
205+
borderStartStartRadius={smUp ? '3' : undefined}
206+
borderStartEndRadius={smUp ? '3' : undefined}
207+
borderEndStartRadius={!hasContent && smUp ? '3' : undefined}
208+
borderEndEndRadius={!hasContent && smUp ? '3' : undefined}
209209
padding="3"
210210
>
211211
<HorizontalStack

‎polaris-react/src/components/Box/Box.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626
--pc-box-shadow: initial;
2727
--pc-box-background: initial;
2828
--pc-box-border-radius: initial;
29-
--pc-box-border-radius-end-start: var(--pc-box-border-radius);
30-
--pc-box-border-radius-end-end: var(--pc-box-border-radius);
31-
--pc-box-border-radius-start-start: var(--pc-box-border-radius);
32-
--pc-box-border-radius-start-end: var(--pc-box-border-radius);
29+
--pc-box-border-end-start-radius: var(--pc-box-border-radius);
30+
--pc-box-border-end-end-radius: var(--pc-box-border-radius);
31+
--pc-box-border-start-start-radius: var(--pc-box-border-radius);
32+
--pc-box-border-start-end-radius: var(--pc-box-border-radius);
3333
--pc-box-color: initial;
3434
--pc-box-min-height: initial;
3535
--pc-box-min-width: initial;
@@ -65,16 +65,16 @@
6565
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
6666
box-shadow: var(--pc-box-shadow);
6767
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
68-
border-end-start-radius: var(--pc-box-border-radius-end-start);
68+
border-end-start-radius: var(--pc-box-border-end-start-radius);
6969
// stylelint-enable
7070
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
71-
border-end-end-radius: var(--pc-box-border-radius-end-end);
71+
border-end-end-radius: var(--pc-box-border-end-end-radius);
7272
// stylelint-enable
7373
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
74-
border-start-start-radius: var(--pc-box-border-radius-start-start);
74+
border-start-start-radius: var(--pc-box-border-start-start-radius);
7575
// stylelint-enable
7676
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
77-
border-start-end-radius: var(--pc-box-border-radius-start-end);
77+
border-start-end-radius: var(--pc-box-border-start-end-radius);
7878
// stylelint-enable
7979
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
8080
border-color: var(--pc-box-border-color);

‎polaris-react/src/components/Box/Box.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ export interface BoxProps extends React.AriaAttributes {
4141
/** Border radius */
4242
borderRadius?: BorderRadiusScale;
4343
/** Vertical end horizontal start border radius */
44-
borderRadiusEndStart?: BorderRadiusScale;
44+
borderEndStartRadius?: BorderRadiusScale;
4545
/** Vertical end horizontal end border radius */
46-
borderRadiusEndEnd?: BorderRadiusScale;
46+
borderEndEndRadius?: BorderRadiusScale;
4747
/** Vertical start horizontal start border radius */
48-
borderRadiusStartStart?: BorderRadiusScale;
48+
borderStartStartRadius?: BorderRadiusScale;
4949
/** Vertical start horizontal end border radius */
50-
borderRadiusStartEnd?: BorderRadiusScale;
50+
borderStartEndRadius?: BorderRadiusScale;
5151
/** Border width */
5252
borderWidth?: BorderWidthScale;
5353
/** Vertical start border width */
@@ -153,10 +153,10 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
153153
borderInlineStartWidth,
154154
borderInlineEndWidth,
155155
borderRadius,
156-
borderRadiusEndStart,
157-
borderRadiusEndEnd,
158-
borderRadiusStartStart,
159-
borderRadiusStartEnd,
156+
borderEndStartRadius,
157+
borderEndEndRadius,
158+
borderStartStartRadius,
159+
borderStartEndRadius,
160160
children,
161161
color,
162162
id,
@@ -224,17 +224,17 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
224224
'--pc-box-border-radius': borderRadius
225225
? `var(--p-border-radius-${borderRadius})`
226226
: undefined,
227-
'--pc-box-border-radius-end-start': borderRadiusEndStart
228-
? `var(--p-border-radius-${borderRadiusEndStart})`
227+
'--pc-box-border-end-start-radius': borderEndStartRadius
228+
? `var(--p-border-radius-${borderEndStartRadius})`
229229
: undefined,
230-
'--pc-box-border-radius-end-end': borderRadiusEndEnd
231-
? `var(--p-border-radius-${borderRadiusEndEnd})`
230+
'--pc-box-border-end-end-radius': borderEndEndRadius
231+
? `var(--p-border-radius-${borderEndEndRadius})`
232232
: undefined,
233-
'--pc-box-border-radius-start-start': borderRadiusStartStart
234-
? `var(--p-border-radius-${borderRadiusStartStart})`
233+
'--pc-box-border-start-start-radius': borderStartStartRadius
234+
? `var(--p-border-radius-${borderStartStartRadius})`
235235
: undefined,
236-
'--pc-box-border-radius-start-end': borderRadiusStartEnd
237-
? `var(--p-border-radius-${borderRadiusStartEnd})`
236+
'--pc-box-border-start-end-radius': borderStartEndRadius
237+
? `var(--p-border-radius-${borderStartEndRadius})`
238238
: undefined,
239239
'--pc-box-border-width': borderWidth
240240
? `var(--p-border-width-${borderWidth})`

0 commit comments

Comments
 (0)