Skip to content

Commit c255cec

Browse files
Jeffrey Lauwersclaude
Jeffrey Lauwers
and
claude
committed
fix(NumberBadge): inverse kleuren, cirkel-fix via 1lh, Default en In Button stories
- Tokens: alle variant-kleuren naar inverse-schaal (wit op donkere achtergrond) - CSS: min-inline-size via calc(1lh + 2 * padding-block) — schaalt mee met fluid type scale en garandeert cirkelronde badge bij 1 en 2 cijfers - Stories: Default toont alleen de badge; nieuwe In Button story demonstreert gebruik via iconEnd-positie, buiten het dsn-button__label Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 9a8784a commit c255cec

4 files changed

Lines changed: 103 additions & 40 deletions

File tree

‎packages/components-html/src/number-badge/number-badge.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
/**
22
* NumberBadge Component
33
* Compact inline-element dat een getal toont (bijv. ongelezen berichten of openstaande taken).
4-
* Geplaatst binnen een Button of Menu-item, naast het label.
4+
* Geplaatst binnen een Button of Menu-item, naast het label, via de iconEnd-positie.
55
*
66
* Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
77
*
88
* Usage:
9-
* <!-- Basis (inline in een Button) -->
9+
* <!-- Standalone -->
10+
* <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
11+
*
12+
* <!-- Inline in een Button (buiten het label, als iconEnd) -->
1013
* <button type="button" class="dsn-button dsn-button--subtle">
1114
* <svg class="dsn-icon" aria-hidden="true"><!-- inbox --></svg>
1215
* <span class="dsn-button__label">Inbox</span>
1316
* <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
1417
* </button>
1518
*
16-
* <!-- Afgekapt getal (99+) -->
19+
* <!-- Afgekapt getal (99+) — screenreader-context in dsn-button__label -->
1720
* <button type="button" class="dsn-button dsn-button--subtle">
1821
* <svg class="dsn-icon" aria-hidden="true"><!-- inbox --></svg>
1922
* <span class="dsn-button__label">
@@ -24,7 +27,6 @@
2427
* </button>
2528
*
2629
* <!-- Standalone varianten -->
27-
* <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
2830
* <span class="dsn-number-badge dsn-number-badge--positive" aria-hidden="true">5</span>
2931
* <span class="dsn-number-badge dsn-number-badge--warning" aria-hidden="true">5</span>
3032
* <span class="dsn-number-badge dsn-number-badge--info" aria-hidden="true">5</span>
@@ -35,7 +37,12 @@
3537
display: inline-flex;
3638
align-items: center;
3739
justify-content: center;
38-
min-inline-size: var(--dsn-number-badge-min-inline-size);
40+
/*
41+
* min-inline-size = hoogte van de badge: 1lh (regel) + 2× padding-block
42+
* De 1lh-unit schaalt mee met de fluid type scale — bij een ééncijferig
43+
* getal blijft de badge altijd een perfecte cirkel ongeacht de font-size.
44+
*/
45+
min-inline-size: calc(1lh + 2 * var(--dsn-number-badge-padding-block));
3946
padding-block: var(--dsn-number-badge-padding-block);
4047
padding-inline: var(--dsn-number-badge-padding-inline);
4148
border-radius: var(--dsn-number-badge-border-radius);

‎packages/design-tokens/src/tokens/components/number-badge.json‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@
1515
"value": "{dsn.text.font-weight.bold}",
1616
"comment": "NumberBadge font weight — bold voor leesbaarheid op kleine afmeting"
1717
},
18-
"min-inline-size": {
19-
"value": "1.25rem",
20-
"type": "dimension",
21-
"comment": "Minimumbreedte zodat een ééncijferig getal een perfecte cirkel blijft (20px)"
22-
},
2318
"padding-block": {
2419
"value": "{dsn.space.block.xs}",
2520
"type": "dimension",
@@ -47,60 +42,60 @@
4742
},
4843
"negative": {
4944
"color": {
50-
"value": "{dsn.color.negative.color-default}",
45+
"value": "{dsn.color.negative-inverse.color-default}",
5146
"type": "color",
52-
"comment": "Tekstkleur voor negative variant"
47+
"comment": "Tekstkleur voor negative variant (wit op donkere achtergrond)"
5348
},
5449
"background-color": {
55-
"value": "{dsn.color.negative.bg-default}",
50+
"value": "{dsn.color.negative-inverse.bg-default}",
5651
"type": "color",
5752
"comment": "Achtergrondkleur voor negative variant"
5853
}
5954
},
6055
"positive": {
6156
"color": {
62-
"value": "{dsn.color.positive.color-default}",
57+
"value": "{dsn.color.positive-inverse.color-default}",
6358
"type": "color",
64-
"comment": "Tekstkleur voor positive variant"
59+
"comment": "Tekstkleur voor positive variant (wit op donkere achtergrond)"
6560
},
6661
"background-color": {
67-
"value": "{dsn.color.positive.bg-default}",
62+
"value": "{dsn.color.positive-inverse.bg-default}",
6863
"type": "color",
6964
"comment": "Achtergrondkleur voor positive variant"
7065
}
7166
},
7267
"warning": {
7368
"color": {
74-
"value": "{dsn.color.warning.color-default}",
69+
"value": "{dsn.color.warning-inverse.color-default}",
7570
"type": "color",
76-
"comment": "Tekstkleur voor warning variant"
71+
"comment": "Tekstkleur voor warning variant (wit op donkere achtergrond)"
7772
},
7873
"background-color": {
79-
"value": "{dsn.color.warning.bg-default}",
74+
"value": "{dsn.color.warning-inverse.bg-default}",
8075
"type": "color",
8176
"comment": "Achtergrondkleur voor warning variant"
8277
}
8378
},
8479
"info": {
8580
"color": {
86-
"value": "{dsn.color.info.color-default}",
81+
"value": "{dsn.color.info-inverse.color-default}",
8782
"type": "color",
88-
"comment": "Tekstkleur voor info variant"
83+
"comment": "Tekstkleur voor info variant (wit op donkere achtergrond)"
8984
},
9085
"background-color": {
91-
"value": "{dsn.color.info.bg-default}",
86+
"value": "{dsn.color.info-inverse.bg-default}",
9287
"type": "color",
9388
"comment": "Achtergrondkleur voor info variant"
9489
}
9590
},
9691
"neutral": {
9792
"color": {
98-
"value": "{dsn.color.neutral.color-default}",
93+
"value": "{dsn.color.neutral-inverse.color-default}",
9994
"type": "color",
100-
"comment": "Tekstkleur voor neutral variant"
95+
"comment": "Tekstkleur voor neutral variant (wit op donkere achtergrond)"
10196
},
10297
"background-color": {
103-
"value": "{dsn.color.neutral.bg-default}",
98+
"value": "{dsn.color.neutral-inverse.bg-default}",
10499
"type": "color",
105100
"comment": "Achtergrondkleur voor neutral variant"
106101
}

‎packages/storybook/src/NumberBadge.docs.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,7 @@ export const [intro, rest] = docs.split('<!-- VOORBEELD -->');
1717

1818
<CodeTabs
1919
of={NumberBadgeStories.Default}
20-
html={`<button type="button" class="dsn-button dsn-button--subtle">
21-
<svg class="dsn-icon" aria-hidden="true"><!-- inbox --></svg>
22-
<span class="dsn-button__label">Inbox</span>
23-
<span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
24-
</button>`}
20+
html={`<span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>`}
2521
/>
2622

2723
<Controls of={NumberBadgeStories.Default} />

‎packages/storybook/src/NumberBadge.stories.tsx‎

Lines changed: 75 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,7 @@ type Story = StoryObj<typeof NumberBadge>;
4343
// =============================================================================
4444

4545
export const Default: Story = {
46-
render: (args) => (
47-
<Button variant="subtle" iconStart={<Icon name="mail" aria-hidden />}>
48-
<span className="dsn-button__label">Inbox</span>
49-
<NumberBadge {...args} />
50-
</Button>
51-
),
46+
render: (args) => <NumberBadge {...args} />,
5247
};
5348

5449
// =============================================================================
@@ -84,12 +79,19 @@ export const MaxCount: Story = {
8479
name: 'Max count (99+)',
8580
args: { variant: 'negative', maxCount: 99, children: 128 },
8681
render: (args) => (
87-
<Button variant="subtle" iconStart={<Icon name="mail" aria-hidden />}>
82+
<Button
83+
variant="subtle"
84+
iconStart={<Icon name="mail" aria-hidden />}
85+
iconEnd={
86+
<NumberBadge variant={args.variant} maxCount={args.maxCount}>
87+
{args.children}
88+
</NumberBadge>
89+
}
90+
>
8891
<span>
8992
Inbox
9093
<span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
9194
</span>
92-
<NumberBadge {...args} />
9395
</Button>
9496
),
9597
};
@@ -98,12 +100,19 @@ export const HighCount: Story = {
98100
name: 'High count (above max)',
99101
args: { variant: 'negative', maxCount: 99, children: 256 },
100102
render: (args) => (
101-
<Button variant="subtle" iconStart={<Icon name="bell" aria-hidden />}>
103+
<Button
104+
variant="subtle"
105+
iconStart={<Icon name="bell" aria-hidden />}
106+
iconEnd={
107+
<NumberBadge variant={args.variant} maxCount={args.maxCount}>
108+
{args.children}
109+
</NumberBadge>
110+
}
111+
>
102112
<span>
103113
Meldingen
104114
<span className="dsn-visually-hidden">, 256 ongelezen meldingen</span>
105115
</span>
106-
<NumberBadge {...args} />
107116
</Button>
108117
),
109118
};
@@ -112,6 +121,62 @@ export const HighCount: Story = {
112121
// OVERZICHTSSTORIES
113122
// =============================================================================
114123

124+
export const InButton: Story = {
125+
name: 'In Button',
126+
render: () => (
127+
<div
128+
style={{
129+
display: 'flex',
130+
gap: '1rem',
131+
flexWrap: 'wrap',
132+
alignItems: 'center',
133+
}}
134+
>
135+
{/* Subtle button met klein getal */}
136+
<Button
137+
variant="subtle"
138+
iconStart={<Icon name="mail" aria-hidden />}
139+
iconEnd={<NumberBadge variant="negative">5</NumberBadge>}
140+
>
141+
Inbox
142+
</Button>
143+
144+
{/* Subtle button met afgekapt getal */}
145+
<Button
146+
variant="subtle"
147+
iconStart={<Icon name="mail" aria-hidden />}
148+
iconEnd={
149+
<NumberBadge variant="negative" maxCount={99}>
150+
128
151+
</NumberBadge>
152+
}
153+
>
154+
<span>
155+
Inbox
156+
<span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
157+
</span>
158+
</Button>
159+
160+
{/* Default button */}
161+
<Button
162+
variant="default"
163+
iconStart={<Icon name="bell" aria-hidden />}
164+
iconEnd={<NumberBadge variant="info">3</NumberBadge>}
165+
>
166+
Meldingen
167+
</Button>
168+
169+
{/* Zonder icoon */}
170+
<Button
171+
variant="subtle"
172+
iconEnd={<NumberBadge variant="warning">12</NumberBadge>}
173+
>
174+
Taken
175+
</Button>
176+
</div>
177+
),
178+
};
179+
115180
export const AllVariants: Story = {
116181
name: 'All variants',
117182
render: () => (

0 commit comments

Comments
 (0)