Skip to content

Commit c74a10c

Browse files
hirsch88hirsch88
authored
fix: decouple components form css utils (#1304)
* fix: decouple components form css utils * chore: fix heading sizes * chore: fix text sizes * chore: fix list sizes
1 parent 0097727 commit c74a10c

15 files changed

Lines changed: 237 additions & 68 deletions

File tree

‎.changeset/dry-doors-lay.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@baloise/design-system-components': patch
3+
'@baloise/design-system-css': patch
4+
---
5+
6+
Decouple components from css utility classes

‎packages/components/src/components.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export namespace Components {
152152
*/
153153
"aria"?: BalProps.BalButtonAria;
154154
/**
155-
* If `true` the bottom corners get rounded
155+
* @deprecated If `true` the bottom corners get rounded
156156
*/
157157
"bottomRounded": undefined | boolean;
158158
/**
@@ -244,7 +244,7 @@ export namespace Components {
244244
*/
245245
"target": BalProps.BalButtonTarget;
246246
/**
247-
* If `true` the top corners get rounded
247+
* @deprecated If `true` the top corners get rounded
248248
*/
249249
"topRounded": undefined | boolean;
250250
/**
@@ -5256,7 +5256,7 @@ declare namespace LocalJSX {
52565256
*/
52575257
"aria"?: BalProps.BalButtonAria;
52585258
/**
5259-
* If `true` the bottom corners get rounded
5259+
* @deprecated If `true` the bottom corners get rounded
52605260
*/
52615261
"bottomRounded"?: undefined | boolean;
52625262
/**
@@ -5364,7 +5364,7 @@ declare namespace LocalJSX {
53645364
*/
53655365
"target"?: BalProps.BalButtonTarget;
53665366
/**
5367-
* If `true` the top corners get rounded
5367+
* @deprecated If `true` the top corners get rounded
53685368
*/
53695369
"topRounded"?: undefined | boolean;
53705370
/**

‎packages/components/src/components/bal-button/bal-button.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,13 @@ export class Button implements ComponentInterface {
101101
@Prop() rounded = false
102102

103103
/**
104+
* @deprecated
104105
* If `true` the top corners get rounded
105106
*/
106107
@Prop() topRounded: undefined | boolean = undefined
107108

108109
/**
110+
* @deprecated
109111
* If `true` the bottom corners get rounded
110112
*/
111113
@Prop() bottomRounded: undefined | boolean = undefined
@@ -202,8 +204,8 @@ export class Button implements ComponentInterface {
202204
'is-fullwidth': this.expanded,
203205
'is-disabled': this.disabled,
204206
'is-loading': this.loading,
207+
'is-rounded': this.rounded === true,
205208
'has-blur-shadow': this.shadow === true,
206-
'has-radius-rounded': this.rounded === true,
207209
'has-round-top-corners': this.topRounded === true,
208210
'has-round-bottom-corners': this.bottomRounded === true,
209211
'has-no-round-top-corners': this.topRounded === false,
@@ -325,7 +327,7 @@ export class Button implements ComponentInterface {
325327
<bal-spinner color={spinnerColor()} small {...this.loadingAttrs} deactivated={!this.loading} />
326328
<bal-icon
327329
{...this.leftIconAttrs}
328-
class="icon-left"
330+
class={this.square ? '' : 'icon-left'}
329331
name={this.icon}
330332
size={this.square ? this.size : 'small'}
331333
turn={this.iconTurn}

‎packages/components/src/components/bal-heading/bal-heading.sass‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,86 @@
7575

7676
.bal-heading__text--color-danger
7777
color: var(--bal-heading-color-danger)
78+
79+
// Heading Sizes
80+
// --------------------------------------------------
81+
82+
.bal-heading__text--size-normal
83+
font-size: var(--bal-size-normal)
84+
line-height: var(--bal-line-height-normal)
85+
+tablet
86+
font-size: var(--bal-size-tablet-normal)
87+
line-height: var(--bal-line-height-tablet-normal)
88+
+desktop
89+
font-size: var(--bal-size-desktop-normal)
90+
line-height: var(--bal-line-height-desktop-normal)
91+
92+
.bal-heading__text--size-medium
93+
font-size: var(--bal-size-medium)
94+
line-height: var(--bal-line-height-medium)
95+
+tablet
96+
font-size: var(--bal-size-tablet-medium)
97+
line-height: var(--bal-line-height-tablet-medium)
98+
+desktop
99+
font-size: var(--bal-size-desktop-medium)
100+
line-height: var(--bal-line-height-desktop-medium)
101+
102+
.bal-heading__text--size-large
103+
font-size: var(--bal-size-large)
104+
line-height: var(--bal-line-height-large)
105+
+tablet
106+
font-size: var(--bal-size-tablet-large)
107+
line-height: var(--bal-line-height-tablet-large)
108+
+desktop
109+
font-size: var(--bal-size-desktop-large)
110+
line-height: var(--bal-line-height-desktop-large)
111+
112+
.bal-heading__text--size-x-large
113+
font-size: var(--bal-size-x-large)
114+
line-height: var(--bal-line-height-x-large)
115+
+tablet
116+
font-size: var(--bal-size-tablet-x-large)
117+
line-height: var(--bal-line-height-tablet-x-large)
118+
+desktop
119+
font-size: var(--bal-size-desktop-x-large)
120+
line-height: var(--bal-line-height-desktop-x-large)
121+
122+
.bal-heading__text--size-xx-large
123+
font-size: var(--bal-size-xx-large)
124+
line-height: var(--bal-line-height-xx-large)
125+
+tablet
126+
font-size: var(--bal-size-tablet-xx-large)
127+
line-height: var(--bal-line-height-tablet-xx-large)
128+
+desktop
129+
font-size: var(--bal-size-desktop-xx-large)
130+
line-height: var(--bal-line-height-desktop-xx-large)
131+
132+
.bal-heading__text--size-xxx-large
133+
font-size: var(--bal-size-xxx-large)
134+
line-height: var(--bal-line-height-xxx-large)
135+
+tablet
136+
font-size: var(--bal-size-tablet-xxx-large)
137+
line-height: var(--bal-line-height-tablet-xxx-large)
138+
+desktop
139+
font-size: var(--bal-size-desktop-xxx-large)
140+
line-height: var(--bal-line-height-desktop-xxx-large)
141+
142+
.bal-heading__text--size-xxxx-large
143+
font-size: var(--bal-size-xxxx-large)
144+
line-height: var(--bal-line-height-xxxx-large)
145+
+tablet
146+
font-size: var(--bal-size-tablet-xxxx-large)
147+
line-height: var(--bal-line-height-tablet-xxxx-large)
148+
+desktop
149+
font-size: var(--bal-size-desktop-xxxx-large)
150+
line-height: var(--bal-line-height-desktop-xxxx-large)
151+
152+
.bal-heading__text--size-xxxxx-large
153+
font-size: var(--bal-size-xxxxx-large)
154+
line-height: var(--bal-line-height-xxxxx-large)
155+
+tablet
156+
font-size: var(--bal-size-tablet-xxxxx-large)
157+
line-height: var(--bal-line-height-tablet-xxxxx-large)
158+
+desktop
159+
font-size: var(--bal-size-desktop-xxxxx-large)
160+
line-height: var(--bal-line-height-desktop-xxxxx-large)

‎packages/components/src/components/bal-heading/bal-heading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export class Heading implements ComponentInterface {
174174
...bemTextEl.modifier('subtitle').class(this.subtitle),
175175
...bemTextEl.modifier('shadow').class(this.shadow),
176176
...bemTextEl.modifier(`color-${fontColor}`).class(),
177-
[`is-size-${this.autoFontSize}`]: true,
177+
...bemTextEl.modifier(`size-${this.autoFontSize}`).class(),
178178
}}
179179
ref={(headingEl: any) => (this.headingEl = headingEl)}
180180
data-testid="bal-heading"

‎packages/components/src/components/bal-hint/bal-hint.sass‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,17 @@
2424
+element(title)
2525
display: block
2626
margin-bottom: 1rem
27+
+element(heading)
28+
font-family: var(--bal-title-font-family)
29+
font-weight: var(--bal-title-font-weight)
30+
font-size: var(--bal-text-size-x-large)
31+
line-height: var(--bal-line-height-x-large)
32+
+tablet
33+
font-size: var(--bal-text-size-x-large-tablet)
34+
line-height: var(--bal-line-height-tablet-x-large)
35+
+desktop
36+
font-size: var(--bal-text-size-x-large-desktop)
37+
line-height: var(--bal-line-height-desktop-x-large)
2738
+element(buttons)
2839
+modifier(is-hidden-desktop)
2940
+tablet

‎packages/components/src/components/bal-list/bal-list-item-subtitle/bal-list-item-subtitle.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ export class ListItemSubtitle {
99
render() {
1010
return (
1111
<Host class="bal-list__item__subtitle">
12-
<p class="is-size-small">
13-
<slot></slot>
14-
</p>
12+
<slot></slot>
1513
</Host>
1614
)
1715
}

‎packages/components/src/components/bal-list/bal-list.sass‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,14 @@
7575

7676
.bal-list__item__subtitle
7777
color: var(--bal-list-item-subtile-color)
78+
font-size: var(--bal-size-small)
79+
line-height: var(--bal-line-height-small)
80+
+tablet
81+
font-size: var(--bal-size-tablet-small)
82+
line-height: var(--bal-line-height-tablet-small)
83+
+desktop
84+
font-size: var(--bal-size-desktop-small)
85+
line-height: var(--bal-line-height-desktop-small)
7886

7987
.bal-list__item:not(.bal-list__item__accordion-head),
8088
.bal-list__item:not(.bal-list__item__accordion-head) > a,
@@ -86,11 +94,11 @@
8694
.bal-list__item__content
8795
justify-content: center
8896
&--start
89-
justify-content: start
97+
justify-content: flex-start
9098
&--center
9199
justify-content: center
92100
&--end
93-
justify-content: end
101+
justify-content: flex-end
94102
&--space-between
95103
justify-content: space-between
96104

@@ -164,11 +172,11 @@
164172
color: var(--bal-list-accordion-head-color-active) !important
165173

166174
.bal-list__item__icon
167-
svg,
168-
svg g,
169-
svg path,
170-
svg circle
171-
+desktop()
175+
+desktop()
176+
svg,
177+
svg g,
178+
svg path,
179+
svg circle
172180
fill: var(--bal-list-accordion-head-background-active) !important
173181

174182
&:focus-visible
@@ -216,11 +224,11 @@
216224
color: var(--bal-list-accordion-head-on-dark-color-active) !important
217225

218226
.bal-list__item__icon
219-
svg,
220-
svg g,
221-
svg path,
222-
svg circle
223-
+desktop()
227+
+desktop()
228+
svg,
229+
svg g,
230+
svg path,
231+
svg circle
224232
fill: var(--bal-list-accordion-head-on-dark-background-active) !important
225233

226234
&:focus-visible
@@ -431,11 +439,11 @@
431439
flex-direction: column
432440
align-items: flex-start !important
433441
&--start
434-
justify-content: start
442+
justify-content: flex-start
435443
&--center
436444
justify-content: center
437445
&--end
438-
justify-content: end
446+
justify-content: flex-end
439447
&--space-between
440448
justify-content: space-between
441449

‎packages/components/src/components/bal-notification/bal-notification.sass‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,23 @@
1212
background: var(--bal-notification-background)
1313
color: var(--bal-notification-color)
1414
hyphens: auto
15-
+padding('medium')
16-
+modifier(is-primary)
15+
padding: var(--bal-space-medium)
16+
+tablet
17+
padding: var(--bal-space-tablet-medium)
18+
+desktop
19+
padding: var(--bal-space-desktop-medium)
20+
+modifier(color-primary)
1721
background: var(--bal-notification-background-primary)
1822
color: var(--bal-notification-color-primary)
19-
+modifier(is-info)
23+
+modifier(color-info)
2024
background: var(--bal-notification-background-info)
2125
color: var(--bal-notification-color-info)
22-
+modifier(is-danger)
26+
+modifier(color-danger)
2327
background: var(--bal-notification-background-danger)
2428
color: var(--bal-notification-color-danger)
25-
+modifier(is-warning)
29+
+modifier(color-warning)
2630
background: var(--bal-notification-background-warning)
2731
color: var(--bal-notification-color-warning)
28-
+modifier(is-success)
32+
+modifier(color-success)
2933
background: var(--bal-notification-background-success)
3034
color: var(--bal-notification-color-success)

‎packages/components/src/components/bal-notification/bal-notification.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class Notification {
1515
return (
1616
<Host class="bal-notification">
1717
<div
18-
class={`bal-notification__inner bal-notification__inner--is-${this.color}`}
18+
class={`bal-notification__inner bal-notification__inner--color-${this.color}`}
1919
data-testid="bal-notification-content"
2020
>
2121
<slot></slot>

0 commit comments

Comments
 (0)