primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-22 21:51:39 +03:00
Code Issues Projects Releases Wiki Activity

Revert "Add rounded responsive stories (#2386)"

Browse Source 
This reverts commit 1b53e23ed3.
This commit is contained in:
Josep Martins 2023-02-17 09:50:02 +01:00 committed by GitHub
parent 1b53e23ed3
commit 88e9f4c923
2 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tiny-actors-eat.md
View File

@ -1,5 +0,0 @@
---
'@primer/css': patch
---
Add responsive `border-radius` story

96
docs/src/stories/utilities/Border.stories.jsx
View File

@ -2,33 +2,62 @@ export default {
title: 'Utilities/Border' title: 'Utilities/Border'
} }
export const Default = ({}) => <span class="color-bg-subtle p-2 border">.border</span> export const Default = ({}) => (
<span class="color-bg-subtle p-2 border">
.border
</span>
)
export const Direction = ({}) => ( export const Direction = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border-left">.border-left</div> <div class="color-bg-subtle p-2 border-left">
<div class="color-bg-subtle p-2 border-top">.border-top</div> .border-left
<div class="color-bg-subtle p-2 border-bottom">.border-bottom</div> </div>
<div class="color-bg-subtle p-2 border-right">.border-right</div> <div class="color-bg-subtle p-2 border-top">
<div class="color-bg-subtle p-2 border-x">.border-x</div> .border-top
<div class="color-bg-subtle p-2 border-y">.border-y</div> </div>
<div class="color-bg-subtle p-2 border-bottom">
.border-bottom
</div>
<div class="color-bg-subtle p-2 border-right">
.border-right
</div>
<div class="color-bg-subtle p-2 border-x">
.border-x
</div>
<div class="color-bg-subtle p-2 border-y">
.border-y
</div>
</div> </div>
) )
export const Hide = ({}) => <span class="color-bg-subtle p-2 border border-top-0">.border-top-0</span> export const Hide = ({}) => (
<span class="color-bg-subtle p-2 border border-top-0">
.border-top-0
</span>
)
export const Style = ({}) => <span class="color-bg-subtle p-2 border border-dashed">.border-dashed</span> export const Style = ({}) => (
<span class="color-bg-subtle p-2 border border-dashed">
.border-dashed
</span>
)
export const Rounded = ({}) => ( export const Rounded = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border rounded-0">.rounded-0</div> <div class="color-bg-subtle p-2 border rounded-0">
<div class="color-bg-subtle p-2 border rounded-1">.rounded-1</div> .rounded-0
<div class="color-bg-subtle p-2 border rounded-2">.rounded-2</div> </div>
<div class="color-bg-subtle p-2 border rounded-3">.rounded-3</div> <div class="color-bg-subtle p-2 border rounded-1">
<div .rounded-1
class="color-bg-subtle border circle" </div>
style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}} <div class="color-bg-subtle p-2 border rounded-2">
> .rounded-2
</div>
<div class="color-bg-subtle p-2 border rounded-3">
.rounded-3
</div>
<div class="color-bg-subtle border circle" style={{display: 'inline-flex', justifyContent: 'center', alignItems: 'center', width: '100px', height: '100px'}}>
.circle .circle
</div> </div>
</div> </div>
@ -36,30 +65,23 @@ export const Rounded = ({}) => (
export const RoundedDirection = ({}) => ( export const RoundedDirection = ({}) => (
<div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}> <div style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}}>
<div class="color-bg-subtle p-2 border rounded-top-2">.rounded-top-2</div> <div class="color-bg-subtle p-2 border rounded-top-2">
<div class="color-bg-subtle p-2 border rounded-right-2">.rounded-right-2</div> .rounded-top-2
<div class="color-bg-subtle p-2 border rounded-bottom-2">.rounded-bottom-2</div> </div>
<div class="color-bg-subtle p-2 border rounded-left-2">.rounded-left-2</div> <div class="color-bg-subtle p-2 border rounded-right-2">
</div> .rounded-right-2
) </div>
<div class="color-bg-subtle p-2 border rounded-bottom-2">
export const RoundedResponsive = ({}) => ( .rounded-bottom-2
<div </div>
class="color-bg-subtle p-2 border rounded-sm-1 rounded-md-2 rounded-lg-3" <div class="color-bg-subtle p-2 border rounded-left-2">
style={{display: 'inline-flex', flexDirection: 'column', gap: '1rem'}} .rounded-left-2
> </div>
<div>.border-left</div>
<div class="d-none d-sm-block">.rounded-sm-1</div>
<div class="d-none d-md-block">.rounded-md-2</div>
<div class="d-none d-lg-block">.rounded-lg-3</div>
</div> </div>
) )
export const Responsive = ({}) => ( export const Responsive = ({}) => (
<div <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'}}>
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'}}
>
<div>.border-left</div> <div>.border-left</div>
<div class="d-none d-sm-block">.border-sm-top</div> <div class="d-none d-sm-block">.border-sm-top</div>
<div class="d-none d-md-block">.border-md-right</div> <div class="d-none d-md-block">.border-md-right</div>