fix Step spacing (#485)

* fix Step spacing * ch
status-im · Sep 26, 2023 · 2ac9665 · 2ac9665 · vercel · Sep 26, 2023
1 parent 452f779
commit 2ac9665
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/curvy-toys-clean.md b/.changeset/curvy-toys-clean.md
@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+fix Step spacing
diff --git a/packages/components/src/step/step.stories.tsx b/packages/components/src/step/step.stories.tsx
@@ -56,17 +56,17 @@ export const AllVariants: Story = {
   args: {},
   render: () => (
     <Stack space flexDirection="row">
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="neutral" value={1} />
         <Step type="neutral" value={10} />
         <Step type="neutral" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="complete" value={1} />
         <Step type="complete" value={10} />
         <Step type="complete" value={999} />
       </Stack>
-      <Stack space>
+      <Stack space alignItems="center">
         <Step type="active" value={1} />
         <Step type="active" value={10} />
         <Step type="active" value={999} />

diff --git a/packages/components/src/step/step.tsx b/packages/components/src/step/step.tsx
@@ -30,20 +30,22 @@ export { Step }
 export type { Props as StepProps }
 
 const Base = styled(Stack, {
-  padding: 2,
+  paddingVertical: 1,
+  minWidth: 20,
+  maxWidth: 28,
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
   flexBasis: 'fit-content',
+  width: 'fit-content',
 })
 
 const Content = styled(Stack, {
   backgroundColor: '$white-100',
   paddingHorizontal: 3,
   paddingVertical: 0,
   borderRadius: '$6',
-  minHeight: 18,
-  maxHeight: 18,
+  height: 18,
   minWidth: 18,
   maxWidth: 28,
   justifyContent: 'center',