From 068dc0494891ea22d247e59f43254668361bb670 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 27 Apr 2023 11:51:22 -0400 Subject: [PATCH 1/2] [Box] Refactor `border-radius` properties --- polaris-react/src/components/Box/Box.scss | 30 ++++++----------------- 1 file changed, 8 insertions(+), 22 deletions(-) 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); From 270d83abddfc17b9ae47a1432935d7302d8eb018 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 27 Apr 2023 11:52:11 -0400 Subject: [PATCH 2/2] Add changeset --- .changeset/wise-walls-cover.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wise-walls-cover.md 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