fix: action sheet divider width

daangn · Jan 21, 2025 · 1738c73 · 1738c73
1 parent 702df41
commit 1738c73
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 28 deletions.
diff --git a/docs/public/rootage/components/action-sheet.json b/docs/public/rootage/components/action-sheet.json
@@ -18,14 +18,14 @@
         },
         "content": {
           "color": "$color.bg.layer-floating",
-          "paddingX": "$dimension.spacing-x.global-gutter",
           "cornerTopRadius": "$radius.s5",
           "enterDuration": "$duration.s6",
           "enterTimingFunction": "$timing-function.enter-expressive",
           "exitDuration": "$duration.s4",
           "exitTimingFunction": "$timing-function.exit"
         },
         "header": {
+          "paddingX": "$dimension.spacing-x.global-gutter",
           "paddingY": "$dimension.s3_5",
           "gap": "$dimension.s1"
         },
@@ -43,7 +43,8 @@
         },
         "divider": {
           "strokeWidth": "1px",
-          "strokeColor": "$color.stroke.neutral"
+          "strokeColor": "$color.stroke.neutral",
+          "marginX": "$dimension.spacing-x.global-gutter"
         }
       }
     }

diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
@@ -9433,17 +9433,6 @@
                         "key": "layer-floating"
                       }
                     },
-                    {
-                      "key": "paddingX",
-                      "value": {
-                        "type": "token",
-                        "group": [
-                          "dimension",
-                          "spacing-x"
-                        ],
-                        "key": "global-gutter"
-                      }
-                    },
                     {
                       "key": "cornerTopRadius",
                       "value": {
@@ -9499,6 +9488,17 @@
                 {
                   "key": "header",
                   "property": [
+                    {
+                      "key": "paddingX",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "dimension",
+                          "spacing-x"
+                        ],
+                        "key": "global-gutter"
+                      }
+                    },
                     {
                       "key": "paddingY",
                       "value": {
@@ -9634,6 +9634,17 @@
                         ],
                         "key": "neutral"
                       }
+                    },
+                    {
+                      "key": "marginX",
+                      "value": {
+                        "type": "token",
+                        "group": [
+                          "dimension",
+                          "spacing-x"
+                        ],
+                        "key": "global-gutter"
+                      }
                     }
                   ]
                 }

diff --git a/packages/qvism-preset/src/recipes/action-sheet-item.ts b/packages/qvism-preset/src/recipes/action-sheet-item.ts
@@ -10,16 +10,27 @@ const actionSheetItem = defineRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      position: "relative",
 
       backgroundColor: vars.base.enabled.root.color,
       minHeight: vars.base.enabled.root.minHeight,
       paddingInline: vars.base.enabled.root.paddingX,
       paddingBlock: vars.base.enabled.root.paddingY,
-      boxShadow: `inset 0 calc(-1 * ${rootVars.base.enabled.divider.strokeWidth}) 0 ${rootVars.base.enabled.divider.strokeColor}`,
 
       [pseudo(active)]: {
         backgroundColor: vars.base.pressed.root.color,
       },
+
+      "&:after": {
+        content: "''",
+        display: "block",
+        position: "absolute",
+        left: rootVars.base.enabled.divider.marginX,
+        right: rootVars.base.enabled.divider.marginX,
+        bottom: 0,
+        height: rootVars.base.enabled.divider.strokeWidth,
+        background: rootVars.base.enabled.divider.strokeColor,
+      },
     },
     label: {
       fontSize: vars.base.enabled.label.fontSize,

diff --git a/packages/qvism-preset/src/recipes/action-sheet.ts b/packages/qvism-preset/src/recipes/action-sheet.ts
@@ -45,7 +45,6 @@ const actionSheet = defineRecipe({
       zIndex: "calc(var(--sheet-z-index) + var(--layer-index, 0))",
 
       background: vars.base.enabled.content.color,
-      paddingInline: vars.base.enabled.content.paddingX,
       borderTopLeftRadius: vars.base.enabled.content.cornerTopRadius,
       borderTopRightRadius: vars.base.enabled.content.cornerTopRadius,
 
@@ -64,10 +63,22 @@ const actionSheet = defineRecipe({
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
+      position: "relative",
 
-      boxShadow: `inset 0 calc(-1 * ${vars.base.enabled.divider.strokeWidth}) 0 ${vars.base.enabled.divider.strokeColor}`,
+      paddingInline: vars.base.enabled.header.paddingX,
       paddingBlock: vars.base.enabled.header.paddingY,
       gap: vars.base.enabled.header.gap,
+
+      "&:after": {
+        content: "''",
+        display: "block",
+        position: "absolute",
+        left: vars.base.enabled.divider.marginX,
+        right: vars.base.enabled.divider.marginX,
+        bottom: 0,
+        height: vars.base.enabled.divider.strokeWidth,
+        background: vars.base.enabled.divider.strokeColor,
+      },
     },
     title: {
       color: vars.base.enabled.title.color,

diff --git a/packages/rootage/components/action-sheet.yaml b/packages/rootage/components/action-sheet.yaml
@@ -16,14 +16,14 @@ data:
         exitOpacity: 0
       content:
         color: $color.bg.layer-floating
-        paddingX: $dimension.spacing-x.global-gutter
         cornerTopRadius: $radius.s5
         enterDuration: $duration.s6
         enterTimingFunction: $timing-function.enter-expressive
         # Do we need translateY definition here?
         exitDuration: $duration.s4
         exitTimingFunction: $timing-function.exit
       header:
+        paddingX: $dimension.spacing-x.global-gutter
         paddingY: $dimension.s3_5
         gap: $dimension.s1
       title:
@@ -39,3 +39,4 @@ data:
       divider:
         strokeWidth: 1px
         strokeColor: $color.stroke.neutral
+        marginX: $dimension.spacing-x.global-gutter
diff --git a/packages/stylesheet/actionSheet.css b/packages/stylesheet/actionSheet.css
@@ -42,7 +42,6 @@
     word-break: break-all;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-v3-color-bg-layer-floating);
-    padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
     border-top-left-radius: var(--seed-v3-radius-s5);
     border-top-right-radius: var(--seed-v3-radius-s5);
 }
@@ -69,10 +68,21 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral);
+    position: relative;
+    padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
     padding-block: var(--seed-v3-dimension-s3_5);
     gap: var(--seed-v3-dimension-s1);
 }
+.actionSheet__header:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: var(--seed-v3-dimension-spacing-x-global-gutter);
+    right: var(--seed-v3-dimension-spacing-x-global-gutter);
+    bottom: 0;
+    height: 1px;
+    background: var(--seed-v3-color-stroke-neutral);
+}
 .actionSheet__title {
     color: var(--seed-v3-color-fg-neutral-muted);
     font-size: var(--seed-v3-font-size-s4);

diff --git a/packages/stylesheet/actionSheetItem.css b/packages/stylesheet/actionSheetItem.css
@@ -2,15 +2,25 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     background-color: var(--seed-v3-color-bg-layer-floating);
     min-height: 50px;
     padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
     padding-block: var(--seed-v3-dimension-s3_5);
-    box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral);
 }
 .actionSheetItem__root:is(:active, [data-active]) {
     background-color: var(--seed-v3-color-bg-layer-floating-pressed);
 }
+.actionSheetItem__root:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: var(--seed-v3-dimension-spacing-x-global-gutter);
+    right: var(--seed-v3-dimension-spacing-x-global-gutter);
+    bottom: 0;
+    height: 1px;
+    background: var(--seed-v3-color-stroke-neutral);
+}
 .actionSheetItem__label {
     font-size: var(--seed-v3-font-size-s5);
     line-height: var(--seed-v3-line-height-s5);

diff --git a/packages/stylesheet/component.css b/packages/stylesheet/component.css
@@ -1320,7 +1320,6 @@
   word-break: break-all;
   z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
   background: var(--seed-v3-color-bg-layer-floating);
-  padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
   border-top-left-radius: var(--seed-v3-radius-s5);
   border-top-right-radius: var(--seed-v3-radius-s5);
   flex-direction: column;
@@ -1351,12 +1350,24 @@
 }
 
 .actionSheet__header {
-  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral);
+  padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
   padding-block: var(--seed-v3-dimension-s3_5);
   align-items: center;
   gap: var(--seed-v3-dimension-s1);
   flex-direction: column;
   display: flex;
+  position: relative;
+}
+
+.actionSheet__header:after {
+  content: "";
+  left: var(--seed-v3-dimension-spacing-x-global-gutter);
+  right: var(--seed-v3-dimension-spacing-x-global-gutter);
+  background: var(--seed-v3-color-stroke-neutral);
+  height: 1px;
+  display: block;
+  position: absolute;
+  bottom: 0;
 }
 
 .actionSheet__title {
@@ -1384,16 +1395,27 @@
   min-height: 50px;
   padding-inline: var(--seed-v3-dimension-spacing-x-global-gutter);
   padding-block: var(--seed-v3-dimension-s3_5);
-  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral);
   justify-content: center;
   align-items: center;
   display: flex;
+  position: relative;
 }
 
 .actionSheetItem__root:is(:active, [data-active]) {
   background-color: var(--seed-v3-color-bg-layer-floating-pressed);
 }
 
+.actionSheetItem__root:after {
+  content: "";
+  left: var(--seed-v3-dimension-spacing-x-global-gutter);
+  right: var(--seed-v3-dimension-spacing-x-global-gutter);
+  background: var(--seed-v3-color-stroke-neutral);
+  height: 1px;
+  display: block;
+  position: absolute;
+  bottom: 0;
+}
+
 .actionSheetItem__label {
   font-size: var(--seed-v3-font-size-s5);
   line-height: var(--seed-v3-line-height-s5);

diff --git a/packages/stylesheet/component.min.css b/packages/stylesheet/component.min.css
diff --git a/packages/vars/lib/component/action-sheet.d.ts b/packages/vars/lib/component/action-sheet.d.ts
@@ -12,14 +12,14 @@ export declare const vars: {
       },
       "content": {
         "color": "var(--seed-v3-color-bg-layer-floating)",
-        "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)",
         "cornerTopRadius": "var(--seed-v3-radius-s5)",
         "enterDuration": "var(--seed-v3-duration-s6)",
         "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)",
         "exitDuration": "var(--seed-v3-duration-s4)",
         "exitTimingFunction": "var(--seed-v3-timing-function-exit)"
       },
       "header": {
+        "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)",
         "paddingY": "var(--seed-v3-dimension-s3_5)",
         "gap": "var(--seed-v3-dimension-s1)"
       },
@@ -37,7 +37,8 @@ export declare const vars: {
       },
       "divider": {
         "strokeWidth": "1px",
-        "strokeColor": "var(--seed-v3-color-stroke-neutral)"
+        "strokeColor": "var(--seed-v3-color-stroke-neutral)",
+        "marginX": "var(--seed-v3-dimension-spacing-x-global-gutter)"
       }
     }
   }

diff --git a/packages/vars/lib/component/action-sheet.mjs b/packages/vars/lib/component/action-sheet.mjs
@@ -12,14 +12,14 @@ export const vars = {
       },
       "content": {
         "color": "var(--seed-v3-color-bg-layer-floating)",
-        "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)",
         "cornerTopRadius": "var(--seed-v3-radius-s5)",
         "enterDuration": "var(--seed-v3-duration-s6)",
         "enterTimingFunction": "var(--seed-v3-timing-function-enter-expressive)",
         "exitDuration": "var(--seed-v3-duration-s4)",
         "exitTimingFunction": "var(--seed-v3-timing-function-exit)"
       },
       "header": {
+        "paddingX": "var(--seed-v3-dimension-spacing-x-global-gutter)",
         "paddingY": "var(--seed-v3-dimension-s3_5)",
         "gap": "var(--seed-v3-dimension-s1)"
       },
@@ -37,7 +37,8 @@ export const vars = {
       },
       "divider": {
         "strokeWidth": "1px",
-        "strokeColor": "var(--seed-v3-color-stroke-neutral)"
+        "strokeColor": "var(--seed-v3-color-stroke-neutral)",
+        "marginX": "var(--seed-v3-dimension-spacing-x-global-gutter)"
       }
     }
   }