feat(react,css,rootage): adjust BottomSheet title padding and layout styling

.changeset/tired-poets-argue.md

@@ -0,0 +1,7 @@
+---
+"@seed-design/rootage-artifacts": patch
+"@seed-design/react": patch
+"@seed-design/css": patch
+---
+
+BottomSheet title 영역에서 닫기 버튼 간격에 따라 조정된 padding 기준으로 정리하고, word-break 추가 및 description 영역 너비를 정리했습니다.

docs/public/rootage/components/bottom-sheet.json

@@ -111,6 +111,12 @@
             },
             "fontWeight": {
               "type": "number"
+            },
+            "paddingLeft": {
+              "type": "dimension"
+            },
+            "paddingRight": {
+              "type": "dimension"
             }
           }
         },
@@ -127,6 +133,9 @@
             },
             "fontWeight": {
               "type": "number"
+            },
+            "paddingX": {
+              "type": "dimension"
             }
           }
         },
@@ -148,6 +157,12 @@
             "center": {}
           },
           "defaultValue": "left"
+        },
+        "closeButton": {
+          "values": {
+            "true": {}
+          },
+          "defaultValue": "true"
         }
       }
     },
@@ -296,11 +311,11 @@
               "closeButton": {
                 "fromTop": {
                   "type": "dimension",
-                  "value": "$dimension.x5"
+                  "value": "$dimension.x6"
                 },
                 "fromRight": {
                   "type": "dimension",
-                  "value": "$dimension.x5"
+                  "value": "$dimension.x4"
                 }
               }
             }
@@ -321,7 +336,24 @@
                 "paddingLeft": {
                   "type": "dimension",
                   "value": "$dimension.spacing-x.global-gutter"
-                },
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "variants": {
+          "headerAlignment": "left",
+          "closeButton": "true"
+        },
+        "definitions": [
+          {
+            "states": [
+              "enabled"
+            ],
+            "slots": {
+              "title": {
                 "paddingRight": {
                   "type": "dimension",
                   "value": {
@@ -344,18 +376,49 @@
               "enabled"
             ],
             "slots": {
-              "header": {
+              "title": {
+                "paddingLeft": {
+                  "type": "dimension",
+                  "value": "$dimension.x4"
+                },
+                "paddingRight": {
+                  "type": "dimension",
+                  "value": "$dimension.x4"
+                }
+              },
+              "description": {
+                "paddingX": {
+                  "type": "dimension",
+                  "value": "$dimension.spacing-x.global-gutter"
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "variants": {
+          "headerAlignment": "center",
+          "closeButton": "true"
+        },
+        "definitions": [
+          {
+            "states": [
+              "enabled"
+            ],
+            "slots": {
+              "title": {
                 "paddingLeft": {
                   "type": "dimension",
                   "value": {
-                    "value": 50,
+                    "value": 60,
                     "unit": "px"
                   }
                 },
                 "paddingRight": {
                   "type": "dimension",
                   "value": {
-                    "value": 50,
+                    "value": 60,
                     "unit": "px"
                   }
                 }

examples/stackflow-spa/src/activities/ActivityBottomSheetModalTest.tsx

@@ -24,12 +24,13 @@ const ActivityBottomSheetModalTest: StaticActivityComponentType<
   const onOpenChange = (open: boolean) => !open && pop();
 
   return (
-    <BottomSheetRoot open={open} onOpenChange={onOpenChange} modal={modal}>
+    <BottomSheetRoot open={open} onOpenChange={onOpenChange} modal={modal} headerAlign="center">
       <BottomSheetContent
         showHandle
         showCloseButton={false}
         title="BottomSheet Modal Prop 테스트"
         layerIndex={useActivityZIndexBase()}
+        description="이 화면은 BottomSheet의 modal prop을 동적으로 변경할 때 애니메이션이 재실행되지 않는지 테스트하기 위한 화면입니다."
       >
         <BottomSheetBody>
           <VStack gap="spacingY.componentDefault">

packages/css/all.css

@@ -2724,6 +2724,7 @@
   font-size: var(--seed-font-size-t8);
   line-height: var(--seed-line-height-t8);
   font-weight: var(--seed-font-weight-bold);
+  word-break: keep-all;
   margin: 0;
 }
 
@@ -2764,8 +2765,8 @@
 }
 
 .seed-bottom-sheet__closeButton {
-  top: var(--seed-dimension-x5);
-  right: var(--seed-dimension-x5);
+  top: var(--seed-dimension-x6);
+  right: var(--seed-dimension-x4);
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-bg-neutral-weak);
   cursor: pointer;
@@ -2792,20 +2793,28 @@
   justify-content: flex-start;
 }
 
-.seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
+.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
   padding-right: 50px;
 }
 
 .seed-bottom-sheet__header--headerAlign_center {
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
   text-align: center;
   justify-content: center;
 }
 
-.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
-  padding-left: 50px;
-  padding-right: 50px;
+.seed-bottom-sheet__title--headerAlign_center {
+  padding-left: var(--seed-dimension-x4);
+  padding-right: var(--seed-dimension-x4);
+}
+
+.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.seed-bottom-sheet__description--headerAlign_center {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
 }
 
 .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {

packages/css/recipes/bottom-sheet.css

@@ -73,6 +73,7 @@
     font-size: var(--seed-font-size-t8);
     line-height: var(--seed-line-height-t8);
     font-weight: var(--seed-font-weight-bold);
+    word-break: keep-all;
     margin: 0;
 }
 .seed-bottom-sheet__description {
@@ -114,8 +115,8 @@
     justify-content: center;
     align-items: center;
     border: none;
-    top: var(--seed-dimension-x5);
-    right: var(--seed-dimension-x5);
+    top: var(--seed-dimension-x6);
+    right: var(--seed-dimension-x4);
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-bg-neutral-weak);
     width: 28px;
@@ -137,18 +138,24 @@
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
 }
-.seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
+.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
     padding-right: 50px;
 }
 .seed-bottom-sheet__header--headerAlign_center {
     justify-content: center;
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
     text-align: center;
 }
-.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
-    padding-left: 50px;
-    padding-right: 50px;
+.seed-bottom-sheet__title--headerAlign_center {
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+}
+.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
+    padding-left: 60px;
+    padding-right: 60px;
+}
+.seed-bottom-sheet__description--headerAlign_center {
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
 }
 .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
     animation-name: fade-in;

packages/css/vars/component/bottom-sheet.d.ts

@@ -45,24 +45,41 @@ export declare const vars: {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-x4)"
       }
     }
   },
   "headerAlignmentLeft": {
     "enabled": {
       "header": {
-        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentLeftCloseButtonTrue": {
+    "enabled": {
+      "title": {
         "paddingRight": "50px"
       }
     }
   },
   "headerAlignmentCenter": {
     "enabled": {
-      "header": {
-        "paddingLeft": "50px",
-        "paddingRight": "50px"
+      "title": {
+        "paddingLeft": "var(--seed-dimension-x4)",
+        "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentCenterCloseButtonTrue": {
+    "enabled": {
+      "title": {
+        "paddingLeft": "60px",
+        "paddingRight": "60px"
       }
     }
   }

packages/css/vars/component/bottom-sheet.mjs

@@ -45,24 +45,41 @@ export const vars = {
         "fontWeight": "var(--seed-font-weight-regular)"
       },
       "closeButton": {
-        "fromTop": "var(--seed-dimension-x5)",
-        "fromRight": "var(--seed-dimension-x5)"
+        "fromTop": "var(--seed-dimension-x6)",
+        "fromRight": "var(--seed-dimension-x4)"
       }
     }
   },
   "headerAlignmentLeft": {
     "enabled": {
       "header": {
-        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
+        "paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentLeftCloseButtonTrue": {
+    "enabled": {
+      "title": {
         "paddingRight": "50px"
       }
     }
   },
   "headerAlignmentCenter": {
     "enabled": {
-      "header": {
-        "paddingLeft": "50px",
-        "paddingRight": "50px"
+      "title": {
+        "paddingLeft": "var(--seed-dimension-x4)",
+        "paddingRight": "var(--seed-dimension-x4)"
+      },
+      "description": {
+        "paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
+      }
+    }
+  },
+  "headerAlignmentCenterCloseButtonTrue": {
+    "enabled": {
+      "title": {
+        "paddingLeft": "60px",
+        "paddingRight": "60px"
       }
     }
   }

packages/qvism-preset/src/recipes/bottom-sheet.ts

@@ -109,6 +109,7 @@ const bottomSheet = defineSlotRecipe({
       fontSize: vars.base.enabled.title.fontSize,
       lineHeight: vars.base.enabled.title.lineHeight,
       fontWeight: vars.base.enabled.title.fontWeight,
+      wordBreak: "keep-all",
 
       margin: 0,
     },
@@ -186,25 +187,30 @@ const bottomSheet = defineSlotRecipe({
           justifyContent: "flex-start",
           paddingLeft: vars.headerAlignmentLeft.enabled.header.paddingLeft,
           paddingRight: vars.base.enabled.body.paddingX,
-
+        },
+        title: {
           [pseudo("[data-show-close-button]")]: {
-            paddingRight: vars.headerAlignmentLeft.enabled.header.paddingRight,
+            paddingRight: vars.headerAlignmentLeftCloseButtonTrue.enabled.title.paddingRight,
           },
         },
       },
       center: {
         header: {
           justifyContent: "center",
-          paddingLeft: vars.base.enabled.body.paddingX,
-          paddingRight: vars.base.enabled.body.paddingX,
-
           textAlign: "center",
-
+        },
+        title: {
+          paddingLeft: vars.headerAlignmentCenter.enabled.title.paddingLeft,
+          paddingRight: vars.headerAlignmentCenter.enabled.title.paddingRight,
           [pseudo("[data-show-close-button]")]: {
-            paddingLeft: vars.headerAlignmentCenter.enabled.header.paddingLeft,
-            paddingRight: vars.headerAlignmentCenter.enabled.header.paddingRight,
+            paddingLeft: vars.headerAlignmentCenterCloseButtonTrue.enabled.title.paddingLeft,
+            paddingRight: vars.headerAlignmentCenterCloseButtonTrue.enabled.title.paddingRight,
           },
         },
+        description: {
+          paddingLeft: vars.headerAlignmentCenter.enabled.description.paddingX,
+          paddingRight: vars.headerAlignmentCenter.enabled.description.paddingX,
+        },
       },
     },
     skipAnimation: {