From d7879817492747520d59e82257d918387a808809 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Fri, 19 Nov 2021 14:34:41 -0800 Subject: [PATCH 1/3] Fix token kebab case --- UNRELEASED.md | 2 ++ documentation/Color system.md | 4 ++-- documentation/guides/migrating-from-v7-to-v8.md | 3 +++ src/components/Checkbox/Checkbox.scss | 4 ++-- src/components/OptionList/components/Checkbox/Checkbox.scss | 4 ++-- src/components/RadioButton/RadioButton.scss | 4 ++-- .../RangeSlider/components/DualThumb/DualThumb.scss | 6 +++--- src/utilities/theme/utils.ts | 2 +- 8 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 documentation/guides/migrating-from-v7-to-v8.md diff --git a/UNRELEASED.md b/UNRELEASED.md index e7838d417b9..95fea93fe1d 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,6 +4,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Breaking changes +- Renamed `--p-duration-1-0-0` and `--p-duration-1-5-0` to `--p-duration-100` and `--p-duration-150`. + ### Enhancements - Allow for `readonly` items in ActionList ([#4623](https://github.com/Shopify/polaris-react/pull/4623)) diff --git a/documentation/Color system.md b/documentation/Color system.md index 60acf505880..c9f1af9104c 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -291,8 +291,8 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-text-field-focus-ring-offset` | `-0.4rem` | | `--p-text-field-focus-ring-border-radius` | `0.7rem` | | `--p-button-group-item-spacing` | `-0.1rem` | -| `--p-duration-1-0-0` | `100ms` | -| `--p-duration-1-5-0` | `150ms` | +| `--p-duration-100` | `100ms` | +| `--p-duration-150` | `150ms` | | `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | | `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | | `--p-range-slider-thumb-size-base` | `1.6rem` | diff --git a/documentation/guides/migrating-from-v7-to-v8.md b/documentation/guides/migrating-from-v7-to-v8.md new file mode 100644 index 00000000000..f54521f1e2d --- /dev/null +++ b/documentation/guides/migrating-from-v7-to-v8.md @@ -0,0 +1,3 @@ +# Migrating from v7 to v8 + +Polaris v8.0.0 ([full release notes](https://github.com/Shopify/polaris-react/releases/tag/v8.0.0)) features a rebuild of the `Autocomplete` component, build changes, . This file describes all code updates required to stay up to date. diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 67787bb03b3..b423feebb81 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -22,8 +22,8 @@ @include control-backdrop(active); } ~ .Icon { - transition: opacity var(--p-duration-1-5-0) var(--p-ease), - transform var(--p-duration-1-5-0) var(--p-ease); + transition: opacity var(--p-duration-150) var(--p-ease), + transform var(--p-duration-150) var(--p-ease); transform: translate(-50%, -50%) scale(1); opacity: 1; } diff --git a/src/components/OptionList/components/Checkbox/Checkbox.scss b/src/components/OptionList/components/Checkbox/Checkbox.scss index c952aac4522..df494c21a62 100644 --- a/src/components/OptionList/components/Checkbox/Checkbox.scss +++ b/src/components/OptionList/components/Checkbox/Checkbox.scss @@ -32,8 +32,8 @@ ~ .Icon { transform: translate(-50%, -50%) scale(1); opacity: 1; - transition: opacity var(--p-duration-1-5-0) var(--p-ease), - transform var(--p-duration-1-5-0) var(--p-ease); + transition: opacity var(--p-duration-150) var(--p-ease), + transform var(--p-duration-150) var(--p-ease); } } diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index 09efcb10c66..b6bf904f874 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -23,8 +23,8 @@ // stylelint-disable-next-line selector-max-specificity &::before { - transition: opacity var(--p-duration-1-5-0) var(--p-ease), - transform var(--p-duration-1-5-0) var(--p-ease); + transition: opacity var(--p-duration-150) var(--p-ease), + transform var(--p-duration-150) var(--p-ease); opacity: 1; transform: translate(-50%, -50%) scale(1); } diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss index a54ce6afbe4..70dd169ef56 100644 --- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss +++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss @@ -82,7 +82,7 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical); // stylelint-disable-next-line value-no-vendor-prefix cursor: -webkit-grab; - transition: transform var(--p-duration-1-5-0) var(--p-ease); + transition: transform var(--p-duration-150) var(--p-ease); &.disabled { cursor: not-allowed; @@ -129,7 +129,7 @@ $range-output-spacing: rem(16px); visibility: hidden; pointer-events: none; transition-property: opacity, visibility, bottom; - transition-duration: var(--p-duration-1-5-0); + transition-duration: var(--p-duration-150); transition-timing-function: var(--p-ease); transform: translateX(calc(-50% + #{$range-thumb-size / 2})); @@ -154,7 +154,7 @@ $range-output-spacing: rem(16px); box-shadow: var(--p-popover-shadow); border-radius: border-radius(); transition-property: transform; - transition-duration: var(--p-duration-1-5-0); + transition-duration: var(--p-duration-150); transition-timing-function: var(--p-ease); // stylelint-disable selector-max-specificity, selector-max-combinators, selector-max-class diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts index 030aa152cd7..c6a4fe105c8 100644 --- a/src/utilities/theme/utils.ts +++ b/src/utilities/theme/utils.ts @@ -57,7 +57,7 @@ function customPropertyTransformer( } export function toCssCustomPropertySyntax(camelCase: string) { - return `--p-${camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase()}`; + return `--p-${camelCase.replace(/([A-Z]|[0-9]+)/g, '-$1').toLowerCase()}`; } // eslint-disable-next-line @typescript-eslint/ban-types From 8af875506f2192d521b04cd4400d98fec0aea9fb Mon Sep 17 00:00:00 2001 From: Alex Page Date: Fri, 19 Nov 2021 14:42:02 -0800 Subject: [PATCH 2/3] Replace duration(fast) with --p-duration-100 --- src/components/Banner/Banner.scss | 2 +- src/components/Checkbox/Checkbox.scss | 4 ++-- src/components/Collapsible/Collapsible.scss | 2 +- src/components/Frame/Frame.scss | 2 +- src/components/IndexTable/IndexTable.scss | 8 +++++--- .../OptionList/components/Checkbox/Checkbox.scss | 4 ++-- src/components/Popover/Popover.scss | 3 ++- src/components/RadioButton/RadioButton.scss | 6 +++--- .../RangeSlider/components/SingleThumb/SingleThumb.scss | 2 +- .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss | 2 +- src/styles/foundation/_focus-ring.scss | 2 +- src/styles/shared/_controls.scss | 6 +++--- 12 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 5747e0f22e3..7e4de5abdfd 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -10,7 +10,7 @@ $spinner-size: rem(20px); --p-banner-background: var(--p-background); --p-banner-border: var(--p-banner-border-default); transition: box-shadow duration() easing(); - transition-delay: duration(fast); + transition-delay: var(--p-duration-100); box-shadow: var(--p-banner-border); @if $in-page { diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index b423feebb81..e779fa59048 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -65,8 +65,8 @@ transform: translate(-50%, -50%) scale(0.25); opacity: 0; - transition: opacity var(--p-duration-1-0-0) var(--p-ease), - transform var(--p-duration-1-0-0) var(--p-ease); + transition: opacity var(--p-duration-100) var(--p-ease), + transform var(--p-duration-100) var(--p-ease); @media (-ms-high-contrast: active) { fill: ms-high-contrast-color('text'); diff --git a/src/components/Collapsible/Collapsible.scss b/src/components/Collapsible/Collapsible.scss index 7255399b768..a7d369ce744 100644 --- a/src/components/Collapsible/Collapsible.scss +++ b/src/components/Collapsible/Collapsible.scss @@ -7,7 +7,7 @@ overflow: hidden; will-change: max-height; transition-property: max-height; - transition-duration: duration(fast); + transition-duration: var(--p-duration-100); transition-timing-function: easing(out); } diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index 46ca0e7b560..707381e694f 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -91,7 +91,7 @@ $skip-vertical-offset: rem(10px); pointer-events: none; will-change: opacity; cursor: pointer; - transition: opacity duration(fast) easing(); + transition: opacity var(--p-duration-100) easing(); .Navigation-visible & { pointer-events: all; diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index 5ec1cba71fe..7499d22546c 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/src/components/IndexTable/IndexTable.scss @@ -30,7 +30,8 @@ $small-checkbox-offset: rem(2px); .LoadingContainer-enter-active { opacity: 1; - transition: opacity duration(fast) ease-out, transform duration(fast) ease-out; + transition: opacity var(--p-duration-100) ease-out, + transform var(--p-duration-100) ease-out; transform: translateY(0); } @@ -42,7 +43,8 @@ $small-checkbox-offset: rem(2px); .LoadingContainer-exit-active { opacity: 0; transform: translateY(-100%); - transition: opacity duration(fast) ease-in, transform duration(fast) ease-in; + transition: opacity var(--p-duration-100) ease-in, + transform var(--p-duration-100) ease-in; } $loading-panel-height: rem(53px); @@ -460,7 +462,7 @@ $scroll-bar-border-radius: rem(4px); .ScrollBar::-webkit-scrollbar-thumb { border-radius: $scroll-bar-border-radius; background-color: var(--p-border-neutral-subdued); - transition: background-color duration(fast) ease-out; + transition: background-color var(--p-duration-100) ease-out; } .ScrollBar:hover::-webkit-scrollbar-thumb { diff --git a/src/components/OptionList/components/Checkbox/Checkbox.scss b/src/components/OptionList/components/Checkbox/Checkbox.scss index df494c21a62..a4542568807 100644 --- a/src/components/OptionList/components/Checkbox/Checkbox.scss +++ b/src/components/OptionList/components/Checkbox/Checkbox.scss @@ -70,8 +70,8 @@ pointer-events: none; transform: translate(-50%, -50%) scale(0.25); opacity: 0; - transition: opacity var(--p-duration-1-0-0) var(--p-ease), - transform var(--p-duration-1-0-0) var(--p-ease); + transition: opacity var(--p-duration-100) var(--p-ease), + transform var(--p-duration-100) var(--p-ease); @media (-ms-high-contrast: active) { fill: ms-high-contrast-color('text'); diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index acd50dba5bc..822b6c92d38 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -16,7 +16,8 @@ $vertical-motion-offset: rem(-5px); .PopoverOverlay { opacity: 0; - transition: opacity duration(fast) easing(), transform duration(fast) easing(); + transition: opacity var(--p-duration-100) easing(), + transform var(--p-duration-100) easing(); transform: translateY($vertical-motion-offset); } diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index b6bf904f874..6eb61a62871 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -52,7 +52,7 @@ border: var(--p-control-border-width) solid var(--p-border); border-radius: 50%; background-color: var(--p-surface); - transition: border-color var(--p-duration-1-0-0) var(--p-ease); + transition: border-color var(--p-duration-100) var(--p-ease); &::before { content: ''; @@ -66,8 +66,8 @@ width: var(--p-icon-size); background-color: var(--p-interactive); border-radius: 50%; - transition: opacity var(--p-duration-1-0-0) var(--p-ease), - transform var(--p-duration-1-0-0) var(--p-ease); + transition: opacity var(--p-duration-100) var(--p-ease), + transform var(--p-duration-100) var(--p-ease); @media (forced-colors: active) { @include high-contrast-border(rem(5px)); diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index 6a5de7d8d95..0666e376177 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -97,7 +97,7 @@ $stacking-order: ( background: linear-gradient(var(--p-interactive), var(--p-interactive)); box-shadow: 0 0 0 0 var(--p-focused); appearance: none; - transition: box-shadow duration(fast) var(--p-ease); + transition: box-shadow var(--p-duration-100) var(--p-ease); transition-property: border-color, box-shadow, transform; transition-duration: duration(); transition-timing-function: easing(); diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 7d4f8e79c94..834332f8878 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -10,7 +10,7 @@ $content-max-width: rem(200px); border-radius: var(--p-border-radius-base); pointer-events: none; will-change: opacity, left, top; - transition: opacity duration() easing(in) duration(fast); + transition: opacity duration() easing(in) var(--p-duration-100); @media screen and (-ms-high-contrast: active) { border: border-width(thick) solid ms-high-contrast-color('text'); diff --git a/src/styles/foundation/_focus-ring.scss b/src/styles/foundation/_focus-ring.scss index b468dfd58e8..ce3e88c7c5a 100644 --- a/src/styles/foundation/_focus-ring.scss +++ b/src/styles/foundation/_focus-ring.scss @@ -38,7 +38,7 @@ display: block; pointer-events: none; box-shadow: 0 0 0 $negative-offset var(--p-focused); - transition: box-shadow duration(fast) var(--p-ease); + transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(#{$border-radius} + #{rem(1px)}); } } @else if $style == 'focused' { diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 050bbfbc0be..1e9e021c9fa 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -11,7 +11,7 @@ } @function control-icon-transition() { - @return transform duration(fast) easing(in); + @return transform var(--p-duration-100) easing(in); } @mixin control-backdrop($style: base) { @@ -32,8 +32,8 @@ background-color: var(--p-interactive); opacity: 0; transform: scale(0.25); - transition: opacity var(--p-duration-1-0-0) var(--p-ease), - transform var(--p-duration-1-0-0) var(--p-ease); + transition: opacity var(--p-duration-100) var(--p-ease), + transform var(--p-duration-100) var(--p-ease); } &.hover, From 6aca9e0b55c8902ca24d5705cfab854342cd47fa Mon Sep 17 00:00:00 2001 From: Alex Page Date: Mon, 22 Nov 2021 07:46:54 -0800 Subject: [PATCH 3/3] Group capitals together e.g. abcJSON100 = abc-JSON-100 --- src/utilities/theme/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts index c6a4fe105c8..60951213cf1 100644 --- a/src/utilities/theme/utils.ts +++ b/src/utilities/theme/utils.ts @@ -57,7 +57,7 @@ function customPropertyTransformer( } export function toCssCustomPropertySyntax(camelCase: string) { - return `--p-${camelCase.replace(/([A-Z]|[0-9]+)/g, '-$1').toLowerCase()}`; + return `--p-${camelCase.replace(/([A-Z]+|[0-9]+)/g, '-$1').toLowerCase()}`; } // eslint-disable-next-line @typescript-eslint/ban-types