status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix Step spacing (#485) 

* fix Step spacing

* ch
This commit is contained in:
Felicio Mununga 2023-09-26 17:44:18 +02:00 committed by GitHub
parent 452f779295
commit 2ac9665f11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curvy-toys-clean.md Normal file
View File

@ -0,0 +1,5 @@
---
'@status-im/components': patch
---
fix Step spacing

6
packages/components/src/step/step.stories.tsx
View File

@ -56,17 +56,17 @@ export const AllVariants: Story = {
args: {}, args: {},
render: () => ( render: () => (
<Stack space flexDirection="row"> <Stack space flexDirection="row">
<Stack space> <Stack space alignItems="center">
<Step type="neutral" value={1} /> <Step type="neutral" value={1} />
<Step type="neutral" value={10} /> <Step type="neutral" value={10} />
<Step type="neutral" value={999} /> <Step type="neutral" value={999} />
</Stack> </Stack>
<Stack space> <Stack space alignItems="center">
<Step type="complete" value={1} /> <Step type="complete" value={1} />
<Step type="complete" value={10} /> <Step type="complete" value={10} />
<Step type="complete" value={999} /> <Step type="complete" value={999} />
</Stack> </Stack>
<Stack space> <Stack space alignItems="center">
<Step type="active" value={1} /> <Step type="active" value={1} />
<Step type="active" value={10} /> <Step type="active" value={10} />
<Step type="active" value={999} /> <Step type="active" value={999} />

8
packages/components/src/step/step.tsx
View File

@ -30,11 +30,14 @@ export { Step }
export type { Props as StepProps } export type { Props as StepProps }
const Base = styled(Stack, { const Base = styled(Stack, {
padding: 2, paddingVertical: 1,
minWidth: 20,
maxWidth: 28,
display: 'inline-flex', display: 'inline-flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
flexBasis: 'fit-content', flexBasis: 'fit-content',
width: 'fit-content',
}) })
const Content = styled(Stack, { const Content = styled(Stack, {
@ -42,8 +45,7 @@ const Content = styled(Stack, {
paddingHorizontal: 3, paddingHorizontal: 3,
paddingVertical: 0, paddingVertical: 0,
borderRadius: '$6', borderRadius: '$6',
minHeight: 18, height: 18,
maxHeight: 18,
minWidth: 18, minWidth: 18,
maxWidth: 28, maxWidth: 28,
justifyContent: 'center', justifyContent: 'center',