feat(progress-steps): use 10px as margin top for separator

twilio-labs · Sep 18, 2024 · dfd3bf6 · dfd3bf6
1 parent 334a681
commit dfd3bf6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx
@@ -53,31 +53,29 @@ const ItemSeparatorStyles: {
       display: "flex",
       alignItems: "flex-start",
       flexGrow: "1",
-      "&::after, &::before": {
+      "&::after": {
         content: "''",
         borderBottomWidth: "borderWidth20",
         borderBottomStyle: "solid",
         borderBottomColor: "colorBorderWeaker",
         borderRadius: "borderRadius20",
         minWidth: "sizeBase40",
         flexGrow: 1,
-        marginTop: "space30",
+        // @ts-expect-error do not have tokens for 10px
+        marginTop: "10px",
       },
 
       "&>*:first-child": {
         marginX: "space30",
       },
     },
     "[role='listitem']:first-child": {
-      "&::before": {
-        content: "none",
-      },
-
       "&>*:first-child": {
         marginLeft: "space0",
       },
     },
     "[role='listitem']:last-child": {
+      flexGrow: "0",
       "&::after": {
         content: "none",
       },

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -776,7 +776,7 @@
       "description": "Style prop for the CSS `border-bottom` property"
     },
     "borderBottomColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -818,7 +818,7 @@
       "description": "Responsive prop for the CSS `border-collapse` property"
     },
     "borderColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -832,7 +832,7 @@
       "description": "Style prop for the CSS `border-left` property"
     },
     "borderLeftColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -867,7 +867,7 @@
       "description": "Style prop for the CSS `border-right` property"
     },
     "borderRightColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -909,7 +909,7 @@
       "description": "Style prop for the CSS `border-top` property"
     },
     "borderTopColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -878,7 +878,7 @@
       "description": "Style prop for the CSS `border-bottom` property"
     },
     "borderBottomColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -920,7 +920,7 @@
       "description": "Responsive prop for the CSS `border-collapse` property"
     },
     "borderColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -934,7 +934,7 @@
       "description": "Style prop for the CSS `border-left` property"
     },
     "borderLeftColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -969,7 +969,7 @@
       "description": "Style prop for the CSS `border-right` property"
     },
     "borderRightColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1011,7 +1011,7 @@
       "description": "Style prop for the CSS `border-top` property"
     },
     "borderTopColor": {
-      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,