Skip to content

Commit 8e55bea

Browse files
junghyeonsujunghyeonsu
committed
refactor(bottom-sheet): unify title padding and layout adjustments
1 parent 4287600 commit 8e55bea

File tree

10 files changed

+44
-40
lines changed

10 files changed

+44
-40
lines changed

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,12 +64,6 @@
6464
"gap": {
6565
"type": "dimension"
6666
},
67-
"paddingLeft": {
68-
"type": "dimension"
69-
},
70-
"paddingRight": {
71-
"type": "dimension"
72-
},
7367
"paddingTop": {
7468
"type": "dimension"
7569
},
@@ -332,10 +326,14 @@
332326
"enabled"
333327
],
334328
"slots": {
335-
"header": {
329+
"title": {
336330
"paddingLeft": {
337331
"type": "dimension",
338332
"value": "$dimension.spacing-x.global-gutter"
333+
},
334+
"paddingRight": {
335+
"type": "dimension",
336+
"value": "$dimension.spacing-x.global-gutter"
339337
}
340338
}
341339
}
@@ -379,11 +377,11 @@
379377
"title": {
380378
"paddingLeft": {
381379
"type": "dimension",
382-
"value": "$dimension.x4"
380+
"value": "$dimension.spacing-x.global-gutter"
383381
},
384382
"paddingRight": {
385383
"type": "dimension",
386-
"value": "$dimension.x4"
384+
"value": "$dimension.spacing-x.global-gutter"
387385
}
388386
},
389387
"description": {

‎packages/css/all.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2788,9 +2788,12 @@
27882788
}
27892789

27902790
.seed-bottom-sheet__header--headerAlign_left {
2791+
justify-content: flex-start;
2792+
}
2793+
2794+
.seed-bottom-sheet__title--headerAlign_left {
27912795
padding-left: var(--seed-dimension-spacing-x-global-gutter);
27922796
padding-right: var(--seed-dimension-spacing-x-global-gutter);
2793-
justify-content: flex-start;
27942797
}
27952798

27962799
.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
@@ -2803,8 +2806,8 @@
28032806
}
28042807

28052808
.seed-bottom-sheet__title--headerAlign_center {
2806-
padding-left: var(--seed-dimension-x4);
2807-
padding-right: var(--seed-dimension-x4);
2809+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
2810+
padding-right: var(--seed-dimension-spacing-x-global-gutter);
28082811
}
28092812

28102813
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {

‎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: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,8 @@
135135
}
136136
.seed-bottom-sheet__header--headerAlign_left {
137137
justify-content: flex-start;
138+
}
139+
.seed-bottom-sheet__title--headerAlign_left {
138140
padding-left: var(--seed-dimension-spacing-x-global-gutter);
139141
padding-right: var(--seed-dimension-spacing-x-global-gutter);
140142
}
@@ -146,8 +148,8 @@
146148
text-align: center;
147149
}
148150
.seed-bottom-sheet__title--headerAlign_center {
149-
padding-left: var(--seed-dimension-x4);
150-
padding-right: var(--seed-dimension-x4);
151+
padding-left: var(--seed-dimension-spacing-x-global-gutter);
152+
padding-right: var(--seed-dimension-spacing-x-global-gutter);
151153
}
152154
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
153155
padding-left: 60px;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ export declare const vars: {
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
55-
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
55+
"title": {
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
57+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
5758
}
5859
}
5960
},
@@ -67,8 +68,8 @@ export declare const vars: {
6768
"headerAlignmentCenter": {
6869
"enabled": {
6970
"title": {
70-
"paddingLeft": "var(--seed-dimension-x4)",
71-
"paddingRight": "var(--seed-dimension-x4)"
71+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
72+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
7273
},
7374
"description": {
7475
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ export const vars = {
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
55-
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
55+
"title": {
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
57+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
5758
}
5859
}
5960
},
@@ -67,8 +68,8 @@ export const vars = {
6768
"headerAlignmentCenter": {
6869
"enabled": {
6970
"title": {
70-
"paddingLeft": "var(--seed-dimension-x4)",
71-
"paddingRight": "var(--seed-dimension-x4)"
71+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
72+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
7273
},
7374
"description": {
7475
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,10 +185,10 @@ const bottomSheet = defineSlotRecipe({
185185
left: {
186186
header: {
187187
justifyContent: "flex-start",
188-
paddingLeft: vars.headerAlignmentLeft.enabled.header.paddingLeft,
189-
paddingRight: vars.base.enabled.body.paddingX,
190188
},
191189
title: {
190+
paddingLeft: vars.headerAlignmentLeft.enabled.title.paddingLeft,
191+
paddingRight: vars.headerAlignmentLeft.enabled.title.paddingRight,
192192
[pseudo("[data-show-close-button]")]: {
193193
paddingRight: vars.headerAlignmentLeftCloseButtonTrue.enabled.title.paddingRight,
194194
},

‎packages/qvism-preset/src/vars/component/bottom-sheet.d.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ export declare const vars: {
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
55-
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
55+
"title": {
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
57+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
5758
}
5859
}
5960
},
@@ -67,8 +68,8 @@ export declare const vars: {
6768
"headerAlignmentCenter": {
6869
"enabled": {
6970
"title": {
70-
"paddingLeft": "var(--seed-dimension-x4)",
71-
"paddingRight": "var(--seed-dimension-x4)"
71+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
72+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
7273
},
7374
"description": {
7475
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"

‎packages/qvism-preset/src/vars/component/bottom-sheet.mjs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ export const vars = {
5252
},
5353
"headerAlignmentLeft": {
5454
"enabled": {
55-
"header": {
56-
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)"
55+
"title": {
56+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
57+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
5758
}
5859
}
5960
},
@@ -67,8 +68,8 @@ export const vars = {
6768
"headerAlignmentCenter": {
6869
"enabled": {
6970
"title": {
70-
"paddingLeft": "var(--seed-dimension-x4)",
71-
"paddingRight": "var(--seed-dimension-x4)"
71+
"paddingLeft": "var(--seed-dimension-spacing-x-global-gutter)",
72+
"paddingRight": "var(--seed-dimension-spacing-x-global-gutter)"
7273
},
7374
"description": {
7475
"paddingX": "var(--seed-dimension-spacing-x-global-gutter)"

‎packages/rootage/components/bottom-sheet.yaml‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,6 @@ data:
4242
properties:
4343
gap:
4444
type: dimension
45-
paddingLeft:
46-
type: dimension
47-
paddingRight:
48-
type: dimension
4945
paddingTop:
5046
type: dimension
5147
paddingBottom:
@@ -139,17 +135,18 @@ data:
139135
fromRight: $dimension.x4
140136
headerAlignment=left:
141137
enabled:
142-
header:
138+
title:
143139
paddingLeft: $dimension.spacing-x.global-gutter
140+
paddingRight: $dimension.spacing-x.global-gutter
144141
headerAlignment=left,closeButton=true:
145142
enabled:
146143
title:
147144
paddingRight: 50px
148145
headerAlignment=center:
149146
enabled:
150147
title:
151-
paddingLeft: $dimension.x4
152-
paddingRight: $dimension.x4
148+
paddingLeft: $dimension.spacing-x.global-gutter
149+
paddingRight: $dimension.spacing-x.global-gutter
153150
description:
154151
paddingX: $dimension.spacing-x.global-gutter
155152
headerAlignment=center,closeButton=true:

0 commit comments

Comments
 (0)