Skip to content

Commit 4287600

Browse files
junghyeonsujunghyeonsu
authored
feat(react,css,rootage): adjust BottomSheet title padding and layout styling (#1207)
* feat: keep-all, move padding header to title * changeset * change changeset message * Update tired-poets-argue.md * change closeButton offset * headerAling=center title padding * add spec * changeset * description padding * Update all.min.css * padding
1 parent eaf262f commit 4287600

File tree

13 files changed

+250
-63
lines changed

13 files changed

+250
-63
lines changed

‎.changeset/tired-poets-argue.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@seed-design/rootage-artifacts": patch
3+
"@seed-design/react": patch
4+
"@seed-design/css": patch
5+
---
6+
7+
BottomSheet title 영역에서 닫기 버튼 간격에 따라 조정된 padding 기준으로 정리하고, word-break 추가 및 description 영역 너비를 정리했습니다.

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

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,12 @@
111111
},
112112
"fontWeight": {
113113
"type": "number"
114+
},
115+
"paddingLeft": {
116+
"type": "dimension"
117+
},
118+
"paddingRight": {
119+
"type": "dimension"
114120
}
115121
}
116122
},
@@ -127,6 +133,9 @@
127133
},
128134
"fontWeight": {
129135
"type": "number"
136+
},
137+
"paddingX": {
138+
"type": "dimension"
130139
}
131140
}
132141
},
@@ -148,6 +157,12 @@
148157
"center": {}
149158
},
150159
"defaultValue": "left"
160+
},
161+
"closeButton": {
162+
"values": {
163+
"true": {}
164+
},
165+
"defaultValue": "true"
151166
}
152167
}
153168
},
@@ -296,11 +311,11 @@
296311
"closeButton": {
297312
"fromTop": {
298313
"type": "dimension",
299-
"value": "$dimension.x5"
314+
"value": "$dimension.x6"
300315
},
301316
"fromRight": {
302317
"type": "dimension",
303-
"value": "$dimension.x5"
318+
"value": "$dimension.x4"
304319
}
305320
}
306321
}
@@ -321,7 +336,24 @@
321336
"paddingLeft": {
322337
"type": "dimension",
323338
"value": "$dimension.spacing-x.global-gutter"
324-
},
339+
}
340+
}
341+
}
342+
}
343+
]
344+
},
345+
{
346+
"variants": {
347+
"headerAlignment": "left",
348+
"closeButton": "true"
349+
},
350+
"definitions": [
351+
{
352+
"states": [
353+
"enabled"
354+
],
355+
"slots": {
356+
"title": {
325357
"paddingRight": {
326358
"type": "dimension",
327359
"value": {
@@ -344,18 +376,49 @@
344376
"enabled"
345377
],
346378
"slots": {
347-
"header": {
379+
"title": {
380+
"paddingLeft": {
381+
"type": "dimension",
382+
"value": "$dimension.x4"
383+
},
384+
"paddingRight": {
385+
"type": "dimension",
386+
"value": "$dimension.x4"
387+
}
388+
},
389+
"description": {
390+
"paddingX": {
391+
"type": "dimension",
392+
"value": "$dimension.spacing-x.global-gutter"
393+
}
394+
}
395+
}
396+
}
397+
]
398+
},
399+
{
400+
"variants": {
401+
"headerAlignment": "center",
402+
"closeButton": "true"
403+
},
404+
"definitions": [
405+
{
406+
"states": [
407+
"enabled"
408+
],
409+
"slots": {
410+
"title": {
348411
"paddingLeft": {
349412
"type": "dimension",
350413
"value": {
351-
"value": 50,
414+
"value": 60,
352415
"unit": "px"
353416
}
354417
},
355418
"paddingRight": {
356419
"type": "dimension",
357420
"value": {
358-
"value": 50,
421+
"value": 60,
359422
"unit": "px"
360423
}
361424
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,13 @@ const ActivityBottomSheetModalTest: StaticActivityComponentType<
2424
const onOpenChange = (open: boolean) => !open && pop();
2525

2626
return (
27-
<BottomSheetRoot open={open} onOpenChange={onOpenChange} modal={modal}>
27+
<BottomSheetRoot open={open} onOpenChange={onOpenChange} modal={modal} headerAlign="center">
2828
<BottomSheetContent
2929
showHandle
3030
showCloseButton={false}
3131
title="BottomSheet Modal Prop 테스트"
3232
layerIndex={useActivityZIndexBase()}
33+
description="이 화면은 BottomSheet의 modal prop을 동적으로 변경할 때 애니메이션이 재실행되지 않는지 테스트하기 위한 화면입니다."
3334
>
3435
<BottomSheetBody>
3536
<VStack gap="spacingY.componentDefault">

‎packages/css/all.css‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2724,6 +2724,7 @@
27242724
font-size: var(--seed-font-size-t8);
27252725
line-height: var(--seed-line-height-t8);
27262726
font-weight: var(--seed-font-weight-bold);
2727+
word-break: keep-all;
27272728
margin: 0;
27282729
}
27292730

@@ -2764,8 +2765,8 @@
27642765
}
27652766

27662767
.seed-bottom-sheet__closeButton {
2767-
top: var(--seed-dimension-x5);
2768-
right: var(--seed-dimension-x5);
2768+
top: var(--seed-dimension-x6);
2769+
right: var(--seed-dimension-x4);
27692770
border-radius: var(--seed-radius-full);
27702771
background: var(--seed-color-bg-neutral-weak);
27712772
cursor: pointer;
@@ -2792,20 +2793,28 @@
27922793
justify-content: flex-start;
27932794
}
27942795

2795-
.seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
2796+
.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
27962797
padding-right: 50px;
27972798
}
27982799

27992800
.seed-bottom-sheet__header--headerAlign_center {
2800-
padding-left: var(--seed-dimension-spacing-x-global-gutter);
2801-
padding-right: var(--seed-dimension-spacing-x-global-gutter);
28022801
text-align: center;
28032802
justify-content: center;
28042803
}
28052804

2806-
.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
2807-
padding-left: 50px;
2808-
padding-right: 50px;
2805+
.seed-bottom-sheet__title--headerAlign_center {
2806+
padding-left: var(--seed-dimension-x4);
2807+
padding-right: var(--seed-dimension-x4);
2808+
}
2809+
2810+
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
2811+
padding-left: 60px;
2812+
padding-right: 60px;
2813+
}
2814+
2815+
.seed-bottom-sheet__description--headerAlign_center {
2816+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
2817+
padding-right: var(--seed-dimension-spacing-x-global-gutter);
28092818
}
28102819

28112820
.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {

‎packages/css/all.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/css/recipes/bottom-sheet.css‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
font-size: var(--seed-font-size-t8);
7474
line-height: var(--seed-line-height-t8);
7575
font-weight: var(--seed-font-weight-bold);
76+
word-break: keep-all;
7677
margin: 0;
7778
}
7879
.seed-bottom-sheet__description {
@@ -114,8 +115,8 @@
114115
justify-content: center;
115116
align-items: center;
116117
border: none;
117-
top: var(--seed-dimension-x5);
118-
right: var(--seed-dimension-x5);
118+
top: var(--seed-dimension-x6);
119+
right: var(--seed-dimension-x4);
119120
border-radius: var(--seed-radius-full);
120121
background: var(--seed-color-bg-neutral-weak);
121122
width: 28px;
@@ -137,18 +138,24 @@
137138
padding-left: var(--seed-dimension-spacing-x-global-gutter);
138139
padding-right: var(--seed-dimension-spacing-x-global-gutter);
139140
}
140-
.seed-bottom-sheet__header--headerAlign_left[data-show-close-button] {
141+
.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
141142
padding-right: 50px;
142143
}
143144
.seed-bottom-sheet__header--headerAlign_center {
144145
justify-content: center;
145-
padding-left: var(--seed-dimension-spacing-x-global-gutter);
146-
padding-right: var(--seed-dimension-spacing-x-global-gutter);
147146
text-align: center;
148147
}
149-
.seed-bottom-sheet__header--headerAlign_center[data-show-close-button] {
150-
padding-left: 50px;
151-
padding-right: 50px;
148+
.seed-bottom-sheet__title--headerAlign_center {
149+
padding-left: var(--seed-dimension-x4);
150+
padding-right: var(--seed-dimension-x4);
151+
}
152+
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
153+
padding-left: 60px;
154+
padding-right: 60px;
155+
}
156+
.seed-bottom-sheet__description--headerAlign_center {
157+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
158+
padding-right: var(--seed-dimension-spacing-x-global-gutter);
152159
}
153160
.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points='false']:not([data-animation-done='true']) {
154161
animation-name: fade-in;

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,24 +45,41 @@ export declare const vars: {
4545
"fontWeight": "var(--seed-font-weight-regular)"
4646
},
4747
"closeButton": {
48-
"fromTop": "var(--seed-dimension-x5)",
49-
"fromRight": "var(--seed-dimension-x5)"
48+
"fromTop": "var(--seed-dimension-x6)",
49+
"fromRight": "var(--seed-dimension-x4)"
5050
}
5151
}
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
5555
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
57+
}
58+
}
59+
},
60+
"headerAlignmentLeftCloseButtonTrue": {
61+
"enabled": {
62+
"title": {
5763
"paddingRight": "50px"
5864
}
5965
}
6066
},
6167
"headerAlignmentCenter": {
6268
"enabled": {
63-
"header": {
64-
"paddingLeft": "50px",
65-
"paddingRight": "50px"
69+
"title": {
70+
"paddingLeft": "var(--seed-dimension-x4)",
71+
"paddingRight": "var(--seed-dimension-x4)"
72+
},
73+
"description": {
74+
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
75+
}
76+
}
77+
},
78+
"headerAlignmentCenterCloseButtonTrue": {
79+
"enabled": {
80+
"title": {
81+
"paddingLeft": "60px",
82+
"paddingRight": "60px"
6683
}
6784
}
6885
}

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,24 +45,41 @@ export const vars = {
4545
"fontWeight": "var(--seed-font-weight-regular)"
4646
},
4747
"closeButton": {
48-
"fromTop": "var(--seed-dimension-x5)",
49-
"fromRight": "var(--seed-dimension-x5)"
48+
"fromTop": "var(--seed-dimension-x6)",
49+
"fromRight": "var(--seed-dimension-x4)"
5050
}
5151
}
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
5555
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
57+
}
58+
}
59+
},
60+
"headerAlignmentLeftCloseButtonTrue": {
61+
"enabled": {
62+
"title": {
5763
"paddingRight": "50px"
5864
}
5965
}
6066
},
6167
"headerAlignmentCenter": {
6268
"enabled": {
63-
"header": {
64-
"paddingLeft": "50px",
65-
"paddingRight": "50px"
69+
"title": {
70+
"paddingLeft": "var(--seed-dimension-x4)",
71+
"paddingRight": "var(--seed-dimension-x4)"
72+
},
73+
"description": {
74+
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"
75+
}
76+
}
77+
},
78+
"headerAlignmentCenterCloseButtonTrue": {
79+
"enabled": {
80+
"title": {
81+
"paddingLeft": "60px",
82+
"paddingRight": "60px"
6683
}
6784
}
6885
}

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const bottomSheet = defineSlotRecipe({
109109
fontSize: vars.base.enabled.title.fontSize,
110110
lineHeight: vars.base.enabled.title.lineHeight,
111111
fontWeight: vars.base.enabled.title.fontWeight,
112+
wordBreak: "keep-all",
112113

113114
margin: 0,
114115
},
@@ -186,25 +187,30 @@ const bottomSheet = defineSlotRecipe({
186187
justifyContent: "flex-start",
187188
paddingLeft: vars.headerAlignmentLeft.enabled.header.paddingLeft,
188189
paddingRight: vars.base.enabled.body.paddingX,
189-
190+
},
191+
title: {
190192
[pseudo("[data-show-close-button]")]: {
191-
paddingRight: vars.headerAlignmentLeft.enabled.header.paddingRight,
193+
paddingRight: vars.headerAlignmentLeftCloseButtonTrue.enabled.title.paddingRight,
192194
},
193195
},
194196
},
195197
center: {
196198
header: {
197199
justifyContent: "center",
198-
paddingLeft: vars.base.enabled.body.paddingX,
199-
paddingRight: vars.base.enabled.body.paddingX,
200-
201200
textAlign: "center",
202-
201+
},
202+
title: {
203+
paddingLeft: vars.headerAlignmentCenter.enabled.title.paddingLeft,
204+
paddingRight: vars.headerAlignmentCenter.enabled.title.paddingRight,
203205
[pseudo("[data-show-close-button]")]: {
204-
paddingLeft: vars.headerAlignmentCenter.enabled.header.paddingLeft,
205-
paddingRight: vars.headerAlignmentCenter.enabled.header.paddingRight,
206+
paddingLeft: vars.headerAlignmentCenterCloseButtonTrue.enabled.title.paddingLeft,
207+
paddingRight: vars.headerAlignmentCenterCloseButtonTrue.enabled.title.paddingRight,
206208
},
207209
},
210+
description: {
211+
paddingLeft: vars.headerAlignmentCenter.enabled.description.paddingX,
212+
paddingRight: vars.headerAlignmentCenter.enabled.description.paddingX,
213+
},
208214
},
209215
},
210216
skipAnimation: {

0 commit comments

Comments
 (0)