Skip to content

Commit 1cd30d8

Browse files
Barsneseirikbacker
authored and
mimarz
committed
feat(badge): css changes and data attrs (#2391)
part of #2295 --------- Co-authored-by: Eirik Backer <eirik.backer@gmail.com>
1 parent e1e70e5 commit 1cd30d8

File tree

3 files changed

+110
-117
lines changed

3 files changed

+110
-117
lines changed

‎.changeset/chilled-pumas-march.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
Badge: Style using css attributes

‎packages/css/badge.css

+95-109
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
--dsc-badge-background: var(--ds-color-accent-base-default);
33
--dsc-badge-color: var(--ds-color-accent-contrast-default);
44
--dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
5-
--dsc-badge-height: var(--ds-sizing-6);
6-
--dsc-badge-width: 14px;
5+
--dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
6+
--dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
77

88
background-color: var(--dsc-badge-background);
99
color: var(--dsc-badge-color);
@@ -13,135 +13,121 @@
1313
padding: var(--dsc-badge-padding);
1414
height: var(--dsc-badge-height);
1515
width: var(--dsc-badge-width);
16-
}
17-
18-
.ds-badge__wrapper {
19-
display: inline-flex;
20-
position: relative;
21-
width: fit-content;
22-
height: fit-content;
23-
flex-shrink: 0;
24-
align-items: center;
25-
justify-content: center;
26-
}
2716

28-
.ds-badge--float {
29-
transform-origin: center;
30-
position: absolute;
31-
}
32-
33-
.ds-badge--float.ds-badge--top-right__rectangle {
34-
top: 0;
35-
right: 0;
36-
transform: translateX(50%) translateY(-50%);
37-
}
38-
39-
.ds-badge--float.ds-badge--top-left__rectangle {
40-
top: 0;
41-
left: 0;
42-
transform: translateX(-50%) translateY(-50%);
43-
}
17+
&.ds-badge--count {
18+
--dsc-badge-height: var(--ds-sizing-6);
19+
--dsc-badge-width: auto;
20+
--dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
21+
}
4422

45-
.ds-badge--float.ds-badge--bottom-right__rectangle {
46-
bottom: 0;
47-
right: 0;
48-
transform: translateX(50%) translateY(50%);
49-
}
23+
&[data-size='sm'] {
24+
--dsc-badge-height: var(--ds-sizing-3);
25+
--dsc-badge-width: var(--ds-sizing-3);
5026

51-
.ds-badge--float.ds-badge--bottom-left__rectangle {
52-
bottom: 0;
53-
left: 0;
54-
transform: translateX(-50%) translateY(50%);
55-
}
27+
&.ds-badge--count {
28+
--dsc-badge-height: var(--ds-sizing-5);
29+
--dsc-badge-width: auto;
30+
--dsc-badge-padding: 0 var(--ds-spacing-1);
31+
}
32+
}
5633

57-
.ds-badge--float.ds-badge--top-right__circle {
58-
top: 14%;
59-
right: 14%;
60-
transform: translateX(50%) translateY(-50%);
61-
}
34+
&[data-size='lg'] {
35+
--dsc-badge-height: var(--ds-sizing-4);
36+
--dsc-badge-width: var(--ds-sizing-4);
6237

63-
.ds-badge--float.ds-badge--top-left__circle {
64-
top: 14%;
65-
left: 14%;
66-
transform: translateX(-50%) translateY(-50%);
67-
}
38+
&.ds-badge--count {
39+
--dsc-badge-height: var(--ds-sizing-7);
40+
--dsc-badge-width: auto;
41+
--dsc-badge-padding: 0 var(--ds-spacing-2);
42+
}
43+
}
6844

69-
.ds-badge--float.ds-badge--bottom-right__circle {
70-
bottom: 14%;
71-
right: 14%;
72-
transform: translateX(50%) translateY(50%);
73-
}
45+
&[data-color='info'] {
46+
--dsc-badge-background: var(--ds-color-info-base-default);
47+
--dsc-badge-color: var(--ds-color-info-contrast-default);
48+
}
7449

75-
.ds-badge--float.ds-badge--bottom-left__circle {
76-
bottom: 14%;
77-
left: 14%;
78-
transform: translateX(-50%) translateY(50%);
79-
}
50+
&[data-color='success'] {
51+
--dsc-badge-background: var(--ds-color-success-base-default);
52+
--dsc-badge-color: var(--ds-color-success-contrast-default);
53+
}
8054

81-
.ds-bade--accent {
82-
--dsc-badge-background: var(--ds-color-accent-base-default);
83-
--dsc-badge-color: var(--ds-color-accent-contrast-default);
84-
}
55+
&[data-color='warning'] {
56+
--dsc-badge-background: var(--ds-color-warning-base-default);
57+
--dsc-badge-color: var(--ds-color-warning-contrast-default);
58+
}
8559

86-
.ds-badge--info {
87-
--dsc-badge-background: var(--ds-color-info-base-default);
88-
--dsc-badge-color: var(--ds-color-info-contrast-default);
89-
}
60+
&[data-color='danger'] {
61+
--dsc-badge-background: var(--ds-color-danger-base-default);
62+
--dsc-badge-color: var(--ds-color-danger-contrast-default);
63+
}
9064

91-
.ds-badge--success {
92-
--dsc-badge-background: var(--ds-color-success-base-default);
93-
--dsc-badge-color: var(--ds-color-success-contrast-default);
94-
}
65+
&[data-color='neutral'] {
66+
--dsc-badge-background: var(--ds-color-neutral-surface-default);
67+
--dsc-badge-color: var(--ds-color-neutral-text-default);
68+
}
9569

96-
.ds-badge--warning {
97-
--dsc-badge-background: var(--ds-color-warning-base-default);
98-
--dsc-badge-color: var(--ds-color-warning-contrast-default);
99-
}
70+
/* If placement is present, we are floating */
71+
&[data-placement] {
72+
transform-origin: center;
73+
position: absolute;
74+
}
10075

101-
.ds-badge--danger {
102-
--dsc-badge-background: var(--ds-color-danger-base-default);
103-
--dsc-badge-color: var(--ds-color-danger-contrast-default);
104-
}
76+
&[data-placement='top-right'][data-overlap='rectangle'] {
77+
top: 0;
78+
right: 0;
79+
transform: translateX(50%) translateY(-50%);
80+
}
10581

106-
.ds-badge--neutral {
107-
--dsc-badge-background: var(--ds-color-neutral-surface-default);
108-
--dsc-badge-color: var(--ds-color-neutral-text-default);
109-
}
82+
&[data-placement='top-left'][data-overlap='rectangle'] {
83+
top: 0;
84+
left: 0;
85+
transform: translateX(-50%) translateY(-50%);
86+
}
11087

111-
.ds-badge--sm {
112-
--dsc-badge-height: var(--ds-sizing-3);
113-
--dsc-badge-width: var(--ds-sizing-3);
88+
&[data-placement='bottom-right'][data-overlap='rectangle'] {
89+
bottom: 0;
90+
right: 0;
91+
transform: translateX(50%) translateY(50%);
92+
}
11493

115-
&.ds-badge--count {
116-
--dsc-badge-height: var(--ds-sizing-5);
117-
--dsc-badge-width: auto;
118-
--dsc-badge-padding: 0 var(--ds-spacing-1);
94+
&[data-placement='bottom-left'][data-overlap='rectangle'] {
95+
bottom: 0;
96+
left: 0;
97+
transform: translateX(-50%) translateY(50%);
11998
}
120-
}
12199

122-
.ds-badge--md {
123-
--dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
124-
--dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
100+
&[data-placement='top-right'][data-overlap='circle'] {
101+
top: 14%;
102+
right: 14%;
103+
transform: translateX(50%) translateY(-50%);
104+
}
125105

126-
&.ds-badge--count {
127-
--dsc-badge-height: var(--ds-sizing-6);
128-
--dsc-badge-width: auto;
129-
--dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
106+
&[data-placement='top-left'][data-overlap='circle'] {
107+
top: 14%;
108+
left: 14%;
109+
transform: translateX(-50%) translateY(-50%);
130110
}
131-
}
132111

133-
.ds-badge--lg {
134-
--dsc-badge-height: var(--ds-sizing-4);
135-
--dsc-badge-width: var(--ds-sizing-4);
112+
&[data-placement='bottom-right'][data-overlap='circle'] {
113+
bottom: 14%;
114+
right: 14%;
115+
transform: translateX(50%) translateY(50%);
116+
}
136117

137-
&.ds-badge--count {
138-
--dsc-badge-height: var(--ds-sizing-7);
139-
--dsc-badge-width: auto;
140-
--dsc-badge-padding: 0 var(--ds-spacing-2);
118+
&[data-placement='bottom-left'][data-overlap='circle'] {
119+
bottom: 14%;
120+
left: 14%;
121+
transform: translateX(-50%) translateY(50%);
141122
}
142123
}
143124

144-
.ds-badge--count {
145-
--dsc-badge-height: auto;
146-
--dsc-badge-width: auto;
125+
.ds-badge__wrapper {
126+
display: inline-flex;
127+
position: relative;
128+
width: fit-content;
129+
height: fit-content;
130+
flex-shrink: 0;
131+
align-items: center;
132+
justify-content: center;
147133
}

‎packages/react/src/components/Badge/Badge.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -84,15 +84,16 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
8484
{children}
8585
<Paragraph asChild variant='short' size={paragraphSizeMap[size]}>
8686
<span
87-
className={cl(
88-
'ds-badge',
89-
`ds-badge--${size}`,
90-
`ds-badge--${color}`,
91-
count && 'ds-badge--count',
92-
children && `ds-badge--${placement}__${overlap}`,
93-
children && 'ds-badge--float',
94-
)}
87+
className={cl('ds-badge', count && 'ds-badge--count')}
9588
ref={ref}
89+
data-size={size}
90+
data-color={color}
91+
{...(children
92+
? {
93+
'data-placement': placement,
94+
'data-overlap': overlap,
95+
}
96+
: {})}
9697
{...rest}
9798
>
9899
{maxCount && count && count > maxCount ? `${maxCount}+` : count}

0 commit comments

Comments
 (0)