Skip to content

Commit

Permalink
[KeyboardKey] Consolidate se23 logic and styles (#10010)
Browse files Browse the repository at this point in the history
### WHY are these changes introduced?

Fixes #9941

### WHAT is this pull request doing?

Consolidates se23 beta styles for `KeyboardKey`.

### How to 🎩

Compare:

* This PR's
[Storybook](https://5d559397bae39100201eedc1-xmguxoqurw.chromatic.com/?path=/story/all-components-keyboardkey--all)
* [Production
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-keyboardkey--all&globals=polarisSummerEditions2023:true)
  • Loading branch information
sophschneider authored Aug 11, 2023
1 parent efc5305 commit 59e9058
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 22 deletions.
2 changes: 1 addition & 1 deletion .changeset/tall-chicken-repeat.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
'@shopify/polaris': major
---

Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`
Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Breadcrumbs`, `Text`, `KeyboardKey`
26 changes: 5 additions & 21 deletions polaris-react/src/components/KeyboardKey/KeyboardKey.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,25 @@ $key-base-dimension: 28px;
display: inline-flex;
justify-content: center;
margin: 0 var(--p-space-05) var(--p-space-05);
margin-bottom: 0;
padding: 0 var(--p-space-2);
background: var(--p-color-bg-inset);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
box-shadow: 0 var(--p-space-025) 0 rgba(0, 0, 0, 0.15);
background: var(--p-color-bg-secondary-experimental);
border-radius: var(--p-border-radius-1);
color: var(--p-color-text);
color: var(--p-color-text-subdued);
font-size: var(--p-font-size-100);
font-weight: var(--p-font-weight-medium);
font-family: var(--p-font-family-sans);
line-height: $key-base-dimension;
text-align: center;
min-width: $key-base-dimension;
user-select: none;

#{$se23} & {
background: var(--p-color-bg-secondary-experimental);
border-radius: var(--p-border-radius-1);
color: var(--p-color-text-subdued);
box-shadow: none;
margin-bottom: 0;
}
}

.small {
background: var(--p-color-bg-app-selected);
border-radius: var(--p-border-radius-05);
box-shadow: none;
line-height: unset;
padding: 0 var(--p-space-1);
line-height: var(--p-font-size-200);
padding: var(--p-space-05) var(--p-space-1);
font-size: var(--p-font-size-75);
height: var(--p-space-5);
min-width: var(--p-space-5);

#{$se23} & {
line-height: var(--p-font-size-200);
padding: var(--p-space-05) var(--p-space-1);
}
}

0 comments on commit 59e9058

Please sign in to comment.