Skip to content

Kebabcase token fix #4683

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 22, 2021
Merged

Kebabcase token fix #4683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d787981
Fix token kebab case
alex-page Nov 19, 2021
8af8755
Replace duration(fast) with --p-duration-100
alex-page Nov 19, 2021
fb651c8
Merge branch 'main' into kebabcase-token-fix
alex-page Nov 19, 2021
6aca9e0
Group capitals together e.g. abcJSON100 = abc-JSON-100
alex-page Nov 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions UNRELEASED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
4 changes: 2 additions & 2 deletions documentation/Color system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
3 changes: 3 additions & 0 deletions documentation/guides/migrating-from-v7-to-v8.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Comment on lines +1 to +3
Copy link
Member Author

@alex-page alex-page Nov 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going to start creating a draft migration guide. Too lazy on Friday arvo to move it to another PR.

2 changes: 1 addition & 1 deletion src/components/Banner/Banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions src/components/Checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -65,8 +65,8 @@

transform: translate(-50%, -50%) scale(0.25);
opacity: 0;
transition: opacity duration(fast) var(--p-ease),
transform duration(fast) 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');
Expand Down
2 changes: 1 addition & 1 deletion src/components/Collapsible/Collapsible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Frame/Frame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 5 additions & 3 deletions src/components/IndexTable/IndexTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions src/components/OptionList/components/Checkbox/Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -70,8 +70,8 @@
pointer-events: none;
transform: translate(-50%, -50%) scale(0.25);
opacity: 0;
transition: opacity duration(fast) var(--p-ease),
transform duration(fast) 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');
Expand Down
3 changes: 2 additions & 1 deletion src/components/Popover/Popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
10 changes: 5 additions & 5 deletions src/components/RadioButton/RadioButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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 duration(fast) var(--p-ease);
transition: border-color var(--p-duration-100) var(--p-ease);

&::before {
content: '';
Expand All @@ -66,8 +66,8 @@
width: var(--p-icon-size);
background-color: var(--p-interactive);
border-radius: 50%;
transition: opacity duration(fast) var(--p-ease),
transform duration(fast) 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));
Expand Down
6 changes: 3 additions & 3 deletions src/components/RangeSlider/components/DualThumb/DualThumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}));

Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion src/styles/foundation/_focus-ring.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' {
Expand Down
6 changes: 3 additions & 3 deletions src/styles/shared/_controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -32,8 +32,8 @@
background-color: var(--p-interactive);
opacity: 0;
transform: scale(0.25);
transition: opacity duration(fast) var(--p-ease),
transform duration(fast) var(--p-ease);
transition: opacity var(--p-duration-100) var(--p-ease),
transform var(--p-duration-100) var(--p-ease);
}

&.hover,
Expand Down
2 changes: 1 addition & 1 deletion src/utilities/theme/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down