Skip to content

Commit 2b6a4ff

Browse files
michaelmkrausmichaelmkraus
authored
feat: renamed border-height to border-width (#4000)
* feat: renamed border-height to border-width * feat: adapted migration to migrate border-height to border-width
1 parent fd00cb5 commit 2b6a4ff

File tree

26 files changed

+125
-103
lines changed

26 files changed

+125
-103
lines changed

‎.stylelintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525
}
2626
],
27-
"db-ux/use-border-height": [true],
27+
"db-ux/use-border-width": [true],
2828
"db-ux/use-border-radius": [true],
2929
"db-ux/use-border-color": [true],
3030
"a11y/media-prefers-reduced-motion": true,

‎docs/migration/v1.x.x-to-v2.0.0.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
## Migration Beta (1.x.x) ➡ 2.0.0
2+
3+
### Global
4+
5+
- Renamed all `border-height` props to `border-width`
6+
7+
## Automate migration via CLI
8+
9+
We provide a CLI tool to auto migrate your source code. Use this command in your repository:
10+
11+
```shell
12+
npx @db-ux/core-migration --type=v100_v200 --src=./src
13+
```
14+
15+
Please check the changes made in your codebase afterwards, as this is mainly a simple search & replace and there might be unexpected changes of similar wordings to our properties for any other methods, or further code occurrences that don't even refer to properties.

‎packages/components/src/components/checkbox/checkbox.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@
1515
justify-content: center;
1616
block-size: calc(
1717
#{form-components.$font-size-height} - 2 *
18-
#{variables.$db-border-height-3xs}
18+
#{variables.$db-border-width-3xs}
1919
);
2020
inline-size: calc(
2121
#{form-components.$font-size-height} - 2 *
22-
#{variables.$db-border-height-3xs}
22+
#{variables.$db-border-width-3xs}
2323
);
2424
}
2525
}

‎packages/components/src/components/divider/divider.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020

2121
&:not([data-variant="vertical"]) {
22-
block-size: variables.$db-border-height-3xs;
22+
block-size: variables.$db-border-width-3xs;
2323

2424
@include helpers.divider();
2525

@@ -29,7 +29,7 @@
2929
}
3030

3131
&[data-variant="vertical"] {
32-
inline-size: variables.$db-border-height-3xs;
32+
inline-size: variables.$db-border-width-3xs;
3333

3434
@include helpers.divider("left");
3535

‎packages/components/src/components/header/header.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
flex-direction: column;
1212
position: relative;
1313
min-block-size: component.$min-mobile-header-height;
14-
border-block-end: variables.$db-border-height-3xs solid
14+
border-block-end: variables.$db-border-width-3xs solid
1515
colors.$db-adaptive-on-bg-basic-emphasis-60-default;
1616

1717
@include screen-sizes.screen("md") {

‎packages/components/src/components/input/input.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ $icon-padding: calc(
109109
position: absolute;
110110
inset-inline-end: calc(
111111
#{variables.$db-spacing-fixed-sm} +
112-
#{variables.$db-border-height-3xs}
112+
#{variables.$db-border-width-3xs}
113113
);
114114
}
115115

‎packages/components/src/components/tabs/tabs.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
3131
-1 *
3232
(
3333
#{variables.$db-spacing-fixed-2xs} +
34-
#{variables.$db-border-height-xs}
34+
#{variables.$db-border-width-xs}
3535
)
3636
);
3737
}
@@ -114,7 +114,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
114114
&::before {
115115
@extend %pulse-track;
116116

117-
block-size: variables.$db-border-height-xs;
117+
block-size: variables.$db-border-width-xs;
118118
inset-inline: variables.$db-spacing-fixed-xs;
119119

120120
/* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
@@ -135,7 +135,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
135135
margin-block: variables.$db-spacing-fixed-xs
136136
calc(
137137
2 * #{variables.$db-spacing-fixed-2xs} +
138-
#{variables.$db-border-height-xs}
138+
#{variables.$db-border-width-xs}
139139
);
140140
}
141141

@@ -218,7 +218,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
218218
&::before {
219219
@extend %pulse-track;
220220

221-
inline-size: variables.$db-border-height-xs;
221+
inline-size: variables.$db-border-width-xs;
222222
inset-block: variables.$db-spacing-fixed-xs;
223223
inset-inline-start: 0;
224224
}
@@ -245,7 +245,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
245245

246246
.db-tab-item {
247247
$padding-start-calc: calc(
248-
#{variables.$db-border-height-xs} +
248+
#{variables.$db-border-width-xs} +
249249
#{variables.$db-spacing-fixed-2xs}
250250
);
251251

‎packages/components/src/components/tag/tag.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
}
126126

127127
&:has(input:checked) {
128-
border-width: variables.$db-border-height-3xs;
128+
border-width: variables.$db-border-width-3xs;
129129

130130
&::before {
131131
content: none;

‎packages/components/src/styles/internal/_component.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@ $default-disabled: 0.4;
1212
$placeholder-disabled: 0.69;
1313

1414
%default-adaptive-border {
15-
border: variables.$db-border-height-3xs solid
15+
border: variables.$db-border-width-3xs solid
1616
colors.$db-adaptive-on-bg-basic-emphasis-100-default;
1717
}
1818

1919
%transparent-border {
20-
border: variables.$db-border-height-3xs solid transparent;
20+
border: variables.$db-border-width-3xs solid transparent;
2121
}
2222

2323
%component-border {
24-
border: variables.$db-border-height-3xs solid
24+
border: variables.$db-border-width-3xs solid
2525
colors.$db-adaptive-on-bg-basic-emphasis-60-default;
2626
}
2727

2828
%form-component-border {
29-
border: variables.$db-border-height-3xs solid
29+
border: variables.$db-border-width-3xs solid
3030
colors.$db-adaptive-on-bg-basic-emphasis-70-default;
3131
}
3232

‎packages/components/src/styles/internal/_db-puls.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@mixin set-db-puls-horizontal() {
66
&::after {
7-
block-size: variables.$db-border-height-xs;
7+
block-size: variables.$db-border-width-xs;
88
inline-size: 0;
99
transform: translate(-50%, 0);
1010
inset-inline-start: 50%;
@@ -16,7 +16,7 @@
1616
@mixin set-db-puls-vertical() {
1717
&::after {
1818
block-size: 0;
19-
inline-size: variables.$db-border-height-xs;
19+
inline-size: variables.$db-border-width-xs;
2020
transform: translate(0, -50%);
2121
inset-block: 50% auto;
2222
background-color: colors.$db-brand-on-bg-basic-emphasis-70-default;
@@ -52,11 +52,11 @@
5252

5353
@mixin show-db-puls-horizontal() {
5454
&::after {
55-
block-size: variables.$db-border-height-xs;
55+
block-size: variables.$db-border-width-xs;
5656
inline-size: 100%;
5757

5858
@media (forced-colors: active) {
59-
border: calc(#{variables.$db-border-height-xs} - 1px) solid
59+
border: calc(#{variables.$db-border-width-xs} - 1px) solid
6060
colors.$db-adaptive-on-bg-basic-emphasis-100-default;
6161
}
6262
}
@@ -65,10 +65,10 @@
6565
@mixin show-db-puls-vertical() {
6666
&::after {
6767
block-size: 100%;
68-
inline-size: variables.$db-border-height-xs;
68+
inline-size: variables.$db-border-width-xs;
6969

7070
@media (forced-colors: active) {
71-
border: calc(#{variables.$db-border-height-xs} - 1px) solid
71+
border: calc(#{variables.$db-border-width-xs} - 1px) solid
7272
colors.$db-adaptive-on-bg-basic-emphasis-100-default;
7373
}
7474
}

0 commit comments

Comments
 (0)