diff --git a/.changeset/wise-walls-cover.md b/.changeset/wise-walls-cover.md new file mode 100644 index 00000000000..22599477f67 --- /dev/null +++ b/.changeset/wise-walls-cover.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Refactored `Box` border radius properties to fix issues with cascading styles diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss index cfc2181d7e6..79f3330edf1 100644 --- 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: initial; - --pc-box-border-radius-end-end: initial; - --pc-box-border-radius-start-start: initial; - --pc-box-border-radius-start-end: 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-color: initial; --pc-box-min-height: initial; --pc-box-min-width: initial; @@ -64,31 +64,17 @@ background-color: var(--pc-box-background); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY box-shadow: var(--pc-box-shadow); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - border-radius: var(--pc-box-border-radius); // stylelint-disable -- generated by polaris-migrator DO NOT COPY - border-end-start-radius: var( - --pc-box-border-radius-end-start, - var(--pc-box-border-radius) - ); + border-end-start-radius: var(--pc-box-border-radius-end-start); // stylelint-enable // stylelint-disable -- generated by polaris-migrator DO NOT COPY - border-end-end-radius: var( - --pc-box-border-radius-end-end, - var(--pc-box-border-radius) - ); + border-end-end-radius: var(--pc-box-border-radius-end-end); // stylelint-enable // stylelint-disable -- generated by polaris-migrator DO NOT COPY - border-start-start-radius: var( - --pc-box-border-radius-start-start, - var(--pc-box-border-radius) - ); + border-start-start-radius: var(--pc-box-border-radius-start-start); // stylelint-enable // stylelint-disable -- generated by polaris-migrator DO NOT COPY - border-start-end-radius: var( - --pc-box-border-radius-start-end, - var(--pc-box-border-radius) - ); + border-start-end-radius: var(--pc-box-border-radius-start-end); // stylelint-enable // stylelint-disable-next-line -- component custom property that maps to Polaris tokens border-color: var(--pc-box-border-color);