Skip to content

Commit 1b53e23

Browse files
author
Josep Martins
authored
Add rounded responsive stories (#2386)
* Add rounded responsive stories
1 parent 7eb3852 commit 1b53e23

File tree

2 files changed

+42
-59
lines changed

2 files changed

+42
-59
lines changed

‎.changeset/tiny-actors-eat.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/css': patch
3+
---
4+
5+
Add responsive `border-radius` story

‎docs/src/stories/utilities/Border.stories.jsx‎

Lines changed: 37 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,64 @@ export default {
22
title: 'Utilities/Border'
33
}
44

5-
export const Default = ({}) => (
6-
<span class="color-bg-subtle p-2 border">
7-
.border
8-
</span>
9-
)
5+
export const Default = ({}) => <span class="color-bg-subtle p-2 border">.border</span>
106

117
export const Direction = ({}) => (
128
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
13-
<div class="color-bg-subtle p-2 border-left">
14-
.border-left
15-
</div>
16-
<div class="color-bg-subtle p-2 border-top">
17-
.border-top
18-
</div>
19-
<div class="color-bg-subtle p-2 border-bottom">
20-
.border-bottom
21-
</div>
22-
<div class="color-bg-subtle p-2 border-right">
23-
.border-right
24-
</div>
25-
<div class="color-bg-subtle p-2 border-x">
26-
.border-x
27-
</div>
28-
<div class="color-bg-subtle p-2 border-y">
29-
.border-y
30-
</div>
9+
<div class="color-bg-subtle p-2 border-left">.border-left</div>
10+
<div class="color-bg-subtle p-2 border-top">.border-top</div>
11+
<div class="color-bg-subtle p-2 border-bottom">.border-bottom</div>
12+
<div class="color-bg-subtle p-2 border-right">.border-right</div>
13+
<div class="color-bg-subtle p-2 border-x">.border-x</div>
14+
<div class="color-bg-subtle p-2 border-y">.border-y</div>
3115
</div>
3216
)
3317

34-
export const Hide = ({}) => (
35-
<span class="color-bg-subtle p-2 border border-top-0">
36-
.border-top-0
37-
</span>
38-
)
18+
export const Hide = ({}) => <span class="color-bg-subtle p-2 border border-top-0">.border-top-0</span>
3919

40-
export const Style = ({}) => (
41-
<span class="color-bg-subtle p-2 border border-dashed">
42-
.border-dashed
43-
</span>
44-
)
20+
export const Style = ({}) => <span class="color-bg-subtle p-2 border border-dashed">.border-dashed</span>
4521

4622
export const Rounded = ({}) => (
4723
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
48-
<div class="color-bg-subtle p-2 border rounded-0">
49-
.rounded-0
50-
</div>
51-
<div class="color-bg-subtle p-2 border rounded-1">
52-
.rounded-1
53-
</div>
54-
<div class="color-bg-subtle p-2 border rounded-2">
55-
.rounded-2
56-
</div>
57-
<div class="color-bg-subtle p-2 border rounded-3">
58-
.rounded-3
59-
</div>
60-
<div class="color-bg-subtle border circle" style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}>
24+
<div class="color-bg-subtle p-2 border rounded-0">.rounded-0</div>
25+
<div class="color-bg-subtle p-2 border rounded-1">.rounded-1</div>
26+
<div class="color-bg-subtle p-2 border rounded-2">.rounded-2</div>
27+
<div class="color-bg-subtle p-2 border rounded-3">.rounded-3</div>
28+
<div
29+
class="color-bg-subtle border circle"
30+
style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}
31+
>
6132
.circle
6233
</div>
6334
</div>
6435
)
6536

6637
export const RoundedDirection = ({}) => (
6738
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
68-
<div class="color-bg-subtle p-2 border rounded-top-2">
69-
.rounded-top-2
70-
</div>
71-
<div class="color-bg-subtle p-2 border rounded-right-2">
72-
.rounded-right-2
73-
</div>
74-
<div class="color-bg-subtle p-2 border rounded-bottom-2">
75-
.rounded-bottom-2
76-
</div>
77-
<div class="color-bg-subtle p-2 border rounded-left-2">
78-
.rounded-left-2
79-
</div>
39+
<div class="color-bg-subtle p-2 border rounded-top-2">.rounded-top-2</div>
40+
<div class="color-bg-subtle p-2 border rounded-right-2">.rounded-right-2</div>
41+
<div class="color-bg-subtle p-2 border rounded-bottom-2">.rounded-bottom-2</div>
42+
<div class="color-bg-subtle p-2 border rounded-left-2">.rounded-left-2</div>
43+
</div>
44+
)
45+
46+
export const RoundedResponsive = ({}) => (
47+
<div
48+
class="color-bg-subtle p-2 border rounded-sm-1 rounded-md-2 rounded-lg-3"
49+
style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}
50+
>
51+
<div>.border-left</div>
52+
<div class="d-none d-sm-block">.rounded-sm-1</div>
53+
<div class="d-none d-md-block">.rounded-md-2</div>
54+
<div class="d-none d-lg-block">.rounded-lg-3</div>
8055
</div>
8156
)
8257

8358
export const Responsive = ({}) => (
84-
<div class="color-bg-subtle p-2 border-left border-sm-top border-md-right border-lg-bottom" style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
59+
<div
60+
class="color-bg-subtle p-2 border-left border-sm-top border-md-right border-lg-bottom"
61+
style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}
62+
>
8563
<div>.border-left</div>
8664
<div class="d-none d-sm-block">.border-sm-top</div>
8765
<div class="d-none d-md-block">.border-md-right</div>

0 commit comments

Comments
 (0)