Skip to content

Commit 69a0ac0

Browse files
laurkimlaurkim
committed
Merge branch 'main' into v11-major
2 parents d1c9d98 + d27a361 commit 69a0ac0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+491
-521
lines changed

‎.changeset/brown-wasps-refuse.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Fix <Code> renderer on Patterns pages to support code blocks without meta

‎.changeset/few-files-drop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Fix minor layout bugs in app-settings-layout pattern code example

‎.changeset/popular-coins-occur.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Updated documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`, `Bleed`, `Columns`, and `Inline`

‎.changeset/quiet-mirrors-talk.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Updated the style of keyboard component and add optional size prop

‎.changeset/sharp-keys-march.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Added best practices to `Text`, `AlphaCard`, and `AlphaStack`

‎polaris-react/src/components/KeyboardKey/KeyboardKey.scss

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
1-
$key-base-height: 24px;
1+
$key-base-dimension: 28px;
22

33
.KeyboardKey {
44
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
5-
display: inline-block;
6-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
7-
height: $key-base-height;
5+
height: $key-base-dimension;
6+
display: inline-flex;
7+
justify-content: center;
88
margin: 0 var(--p-space-05) var(--p-space-05);
9-
padding: 0 var(--p-space-1);
10-
background-color: var(--p-surface);
11-
box-shadow: 0 0 0 var(--p-space-025) var(--p-border-subdued),
12-
0 var(--p-space-05) 0 0 var(--p-surface),
13-
0 var(--p-space-05) 0 var(--p-space-025) var(--p-border-subdued);
9+
padding: 0 var(--p-space-2);
10+
background: var(--p-surface-depressed);
11+
box-shadow: 0 var(--p-space-025) 0 var(--p-hint-from-direct-light);
1412
border-radius: var(--p-border-radius-1);
15-
font-family: var(--p-font-family-sans);
16-
font-size: var(--p-font-size-75);
13+
color: var(--p-text);
14+
font-size: var(--p-font-size-100);
1715
font-weight: var(--p-font-weight-medium);
18-
line-height: $key-base-height;
19-
color: var(--p-text-subdued);
16+
font-family: var(--p-font-family-sans);
17+
line-height: $key-base-dimension;
2018
text-align: center;
21-
min-width: $key-base-height;
19+
min-width: $key-base-dimension;
2220
user-select: none;
2321
}
22+
23+
.small {
24+
background: var(--p-background-selected);
25+
border-radius: var(--p-border-radius-05);
26+
box-shadow: none;
27+
line-height: unset;
28+
padding: 0 var(--p-space-1);
29+
font-size: var(--p-font-size-75);
30+
height: var(--p-space-5);
31+
min-width: var(--p-space-5);
32+
}

‎polaris-react/src/components/KeyboardKey/KeyboardKey.stories.tsx

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,64 @@ export default {
77
} as ComponentMeta<typeof KeyboardKey>;
88

99
export function Default() {
10-
return <KeyboardKey>Ctrl</KeyboardKey>;
10+
return (
11+
<div style={{display: 'flex', gap: '20px'}}>
12+
<div style={{display: 'flex', flexDirection: 'column'}}>
13+
<div style={{display: 'flex'}}>
14+
<KeyboardKey>⌘</KeyboardKey>
15+
<KeyboardKey>s</KeyboardKey>
16+
</div>
17+
<div style={{display: 'flex'}}>
18+
<KeyboardKey>ctrl</KeyboardKey>
19+
<KeyboardKey>s</KeyboardKey>
20+
</div>
21+
</div>
22+
23+
<div style={{display: 'flex', flexDirection: 'column'}}>
24+
<div style={{display: 'flex'}}>
25+
<KeyboardKey>⌘</KeyboardKey>
26+
<KeyboardKey>/</KeyboardKey>
27+
</div>
28+
<div style={{display: 'flex'}}>
29+
<KeyboardKey>ctrl</KeyboardKey>
30+
<KeyboardKey>/</KeyboardKey>
31+
</div>
32+
</div>
33+
</div>
34+
);
35+
}
36+
37+
export function Small() {
38+
return (
39+
<div style={{display: 'flex', gap: '20px'}}>
40+
<div style={{display: 'flex', flexDirection: 'column'}}>
41+
<div style={{display: 'flex'}}>
42+
<KeyboardKey size="small">⌘</KeyboardKey>
43+
<KeyboardKey size="small">d</KeyboardKey>
44+
</div>
45+
<div style={{display: 'flex'}}>
46+
<KeyboardKey size="small">⌘</KeyboardKey>
47+
<KeyboardKey size="small">h</KeyboardKey>
48+
</div>
49+
<div style={{display: 'flex'}}>
50+
<KeyboardKey size="small">⌘</KeyboardKey>
51+
<KeyboardKey size="small">⌫</KeyboardKey>
52+
</div>
53+
</div>
54+
<div style={{display: 'flex', flexDirection: 'column'}}>
55+
<div style={{display: 'flex'}}>
56+
<KeyboardKey size="small">ctrl</KeyboardKey>
57+
<KeyboardKey size="small">d</KeyboardKey>
58+
</div>
59+
<div style={{display: 'flex'}}>
60+
<KeyboardKey size="small">ctrl</KeyboardKey>
61+
<KeyboardKey size="small">h</KeyboardKey>
62+
</div>
63+
<div style={{display: 'flex'}}>
64+
<KeyboardKey size="small">ctrl</KeyboardKey>
65+
<KeyboardKey size="small">⌫</KeyboardKey>
66+
</div>
67+
</div>
68+
</div>
69+
);
1170
}

‎polaris-react/src/components/KeyboardKey/KeyboardKey.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import React from 'react';
22

3+
import {classNames} from '../../utilities/css';
4+
35
import styles from './KeyboardKey.scss';
46

7+
type Size = 'small';
8+
59
export interface KeyboardKeyProps {
6-
/** The content to display inside the key */
710
children?: string;
11+
size?: Size;
812
}
13+
export function KeyboardKey({children = '', size}: KeyboardKeyProps) {
14+
const key =
15+
!size && children.length > 1
16+
? children.toLowerCase()
17+
: children.toUpperCase();
918

10-
export function KeyboardKey({children}: KeyboardKeyProps) {
11-
let key = children || '';
12-
key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
19+
const className = classNames(styles.KeyboardKey, size && styles[size]);
1320

14-
return <kbd className={styles.KeyboardKey}>{key}</kbd>;
21+
return <kbd className={className}>{key}</kbd>;
1522
}

‎polaris-react/src/components/KeyboardKey/tests/KeyboardKey.test.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,11 @@ describe('<KeyboardKey />', () => {
2323
const keyboardKey = mountWithApp(<KeyboardKey />);
2424
expect(keyboardKey).toContainReactText('');
2525
});
26+
27+
it("renders small icon when size is set to 'small'", () => {
28+
const keyboardKey = mountWithApp(<KeyboardKey size="small" />);
29+
expect(keyboardKey).toContainReactComponent('kbd', {
30+
className: 'KeyboardKey small',
31+
});
32+
});
2633
});

‎polaris.shopify.com/content/components/layout-and-structure/bleed.md

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,18 @@ status:
88
value: Alpha
99
message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
1010
examples:
11-
- fileName: bleed-vertical.tsx
12-
title: Vertical
13-
description: >-
14-
Content will bleed vertically into the surrounding layout using the vertical prop.
1511
- fileName: bleed-horizontal.tsx
1612
title: Horizontal
1713
description: >-
18-
Content will bleed horizontally into the surrounding layout using the horizontal prop.
14+
Content will bleed horizontally into the surrounding layout using the `marginInline` prop.
15+
- fileName: bleed-vertical.tsx
16+
title: Vertical
17+
description: >-
18+
Content will bleed vertically into the surrounding layout using the `marginBlock` prop.
1919
- fileName: bleed-specific-direction.tsx
2020
title: Specific direction
2121
description: >-
22-
Content will bleed into the surrounding layout in a specific direction using the top, bottom, left, or right prop.
23-
- fileName: bleed-all-directions.tsx
24-
title: All directions
25-
description: >-
26-
Content will bleed into the surrounding layout in all directions using the spacing prop.
22+
Negative margins can be added in a specific direction using the [Spacing tokens](https://polaris.shopify.com/tokens/spacing).
2723
---
2824

2925
## Bleed values

0 commit comments

Comments
 (0)