Etu 63197 oppdatere badge og tag i kode by ceciliehrr · Pull Request #182 · entur/design-system

ceciliehrr · 2025-10-30T12:38:17Z

💡 Hvorfor?

Badge-forbedringer:

Badge trengte bedre styling med design tokens for å være konsistent med designsystemet
Støtte for ulike størrelser (small, medium, large) manglet
Tekst skal bruke riktig typografi-komponent
Leading icon support - for å kunne legge for eksempel en required-badge på formelementer

Tag deprecation:

Tag-komponenten er overflødig ettersom Badge med variant="neutral" kan dekke samme bruksområde
Ved å deprecate Tag reduserer vi duplikering og vedlikeholdsbyrde

Nytt ikon:

Required ikon for obligatoriske form-elementer

🔧 Hvordan?

Badge-forbedringer:

Ny size prop - Støtte for small, medium (default), large
Typography integration - Bruker <Text> fra @entur/typography/beta for riktig tekststyling
Leading icon support - Detekterer og håndterer ikoner først i children
Design tokens - Byttet hardkodede verdier med tokens fra badge-tokens.scss:
- Høyde, padding, border-radius bruker nå CSS custom properties
- Bedre struktur for variants (primary, success, warning, negative, information, neutral)
Forbedret contrast mode - Bedre styling for .eds-contrast context
Icon farger - Ikoner får automatisk riktig farge basert på variant

Tag deprecation:

Oppdatert Tag styling - Tag bruker nå identiske CSS-tokens som Badge neutral
Deprecation-advarsler - JSDoc @deprecated tags med migrasjonsguide
Dokumentasjon - Warning Alert om deprecated tag

🧩 Type endring

🐞 Feilretting
🚀 Ny funksjonalitet (Badge size prop, leading icon support)
💥 Breaking change (bare visuell i tag)
📝 Dokumentasjonsoppdatering
🧹 Refaktorering (Badge styling, Tag deprecation)
⚡️ Ytelsesforbedring
🏗️ Bygg-/CI-endring

🖼️ Skjermbilder

Tag før:

Tag etter:

💬 Tilleggsnotater

Ikke en breaking change ennå - Tag fungerer fortsatt
Brukere vil se deprecation warnings

✅ Sjekkliste

Navnestandarder følges
Kode og Figma reflekterer hverandre
Dokumentasjonen er oppdatert (tag.mdx med deprecation-varsel)
Ingen ubrukte imports / varsler / console.logs

🧪 Testing

Testet med skjermleser
Testet i Safari og Firefox
Testet i dokumentasjonsiden

Copilot

Pull Request Overview

This PR adds icon color support to the Badge component and deprecates the Tag component in favor of Badge. The changes introduce icon-specific color tokens and update Badge styling to support icons with proper color theming.

Key Changes:

Added icon color tokens for all badge variants (primary, neutral, information, success, warning, negative) in both standard and contrast modes
Enhanced Badge component to support leading icons with proper text wrapping and icon sizing
Deprecated Tag component with migration guidance to use Badge with variant="neutral"

Reviewed Changes

Copilot reviewed 9 out of 13 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/tokens/src/component.json	Adds icon color tokens for all badge variants in both light and dark themes
packages/layout/src/componentColors.scss	Defines CSS custom properties for badge icon colors
packages/layout/src/Tag.tsx	Adds deprecation notices and migration guide for Tag component
packages/layout/src/Tag.scss	Updates Tag styles to align with Badge neutral variant styling
packages/layout/src/Badge/badge-tokens.scss	New file defining badge size and spacing tokens
packages/layout/src/Badge/Badge.tsx	Adds size prop, leading icon detection, and Text component wrapping
packages/layout/src/Badge/Badge.scss	Updates styling for icon support and size variants
packages/icons/src/svgs/UI/Required*.svg	Adds new Required icon variants (Small, Filled, FilledSmall)
apps/documentation/src/pages/komponenter/layout-og-flater/tag.mdx	Adds deprecation warning banner
apps/documentation/src/data/props/feedback-props.tsx	Adds size and showZero props to badge documentation

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/layout/src/Badge/Badge.scss

Copilot · 2025-10-30T12:40:55Z

packages/layout/src/Badge/Badge.scss

+          width: 0.41631rem;
+          height: 0.46881rem;
+          margin: 0.17rem 0.17rem 0.14rem 0.17rem;


Magic numbers are used for icon dimensions and margins. These should be defined as CSS custom properties in badge-tokens.scss for consistency with the rest of the design system (e.g., --layout-badge-status-icon-small already exists at line 71 but isn't being used here).

Copilot · 2025-10-30T12:40:55Z

packages/layout/src/Badge/Badge.scss

+          width: 0.55506rem;
+          height: 0.62506rem;
+          margin: 0.22rem 0.22rem 0.19rem 0.22rem;


Magic numbers are used for icon dimensions and margins. These should be defined as CSS custom properties in badge-tokens.scss for consistency with the rest of the design system.

Copilot · 2025-10-30T12:40:55Z

packages/layout/src/Badge/Badge.scss

+          margin: 0.22247rem 0.22247rem 0.18747rem 0.22247rem;
+          width: 0.69381rem;
+          height: 0.78131rem;


Magic numbers are used for icon dimensions and margins. These should be defined as CSS custom properties in badge-tokens.scss for consistency with the rest of the design system.

packages/layout/src/Badge/Badge.tsx

packages/layout/src/Tag.scss

github-actions · 2025-10-30T13:02:42Z

Preview for this PR in prd is available at https://entur-design-system--preview-182-etu-63197-oppdatere-b-9fgkct6v.web.app (Expires in 7d)

github-actions · 2025-11-21T08:14:29Z

Preview for this PR in prd is available at https://entur-design-system--preview-182-etu-63197-oppdatere-b-t6ge0ths.web.app (Expires in 7d)

magnusrand · 2025-11-21T08:12:22Z

packages/layout/src/Badge/badge-tokens.scss

+}
+
+/* Standard */
+[view-mode='standard'] {


Endre disse til å være data-view-mode

magnusrand · 2025-11-21T08:13:12Z

packages/layout/src/Badge/badge-tokens.scss

@@ -0,0 +1,258 @@
+@use '@entur/utils/dist/breakpoints.scss' as *;
+
+:root {


Legg ved en kommentar om at disse på sikt skal hentes fra @entur/tokens

packages/layout/src/Badge/Badge.tsx

magnusrand · 2025-11-21T08:17:13Z

packages/layout/src/Badge/Badge.tsx

-      displayValue = children > max ? `${max}+` : children;
+      const displayValue = children > max ? `${max}+` : children;
+      content = (
+        <Text as="span" variant="caption" spacing="none">


Usikker på hvor lurt det er av oss å bruke beta-typografien vår i en ikke-beta-komponent

magnusrand · 2025-11-21T08:18:47Z

packages/layout/src/Tag.tsx

+ * <Tag compact>Content</Tag>
+ *
+ * // New
+ * <Badge variant="neutral" type="status">Content</Badge>


Burde vi muligens sette neutral som en default? Per nå er det ingen default variant

github-actions · 2025-12-02T14:33:52Z

Preview for this PR in prd is available at https://entur-design-system--preview-182-etu-63197-oppdatere-b-m871toki.web.app (Expires in 7d)

github-actions · 2025-12-03T10:25:38Z

Preview for this PR in prd is available at https://entur-design-system--preview-182-etu-63197-oppdatere-b-m871toki.web.app (Expires in 7d)

…al instead"

TODO investigate where breakpoint values come from

github-actions · 2026-02-23T14:23:30Z

Preview for this PR in prd (updated for commit b7d72cd):

https://entur-design-system--preview-182-etu-63197-oppdatere-b-p3aydjtf.web.app
(Expires Mon, 02 Mar 2026 14:23:07 GMT)

Copilot AI review requested due to automatic review settings October 30, 2025 12:38

ceciliehrr requested a review from a team as a code owner October 30, 2025 12:38

Copilot AI reviewed Oct 30, 2025

View reviewed changes

ceciliehrr force-pushed the ETU-63197-oppdatere-badge-og-tag-i-kode branch from 53148a1 to b9a7db3 Compare October 30, 2025 12:41

ceciliehrr temporarily deployed to prd October 30, 2025 13:01 — with GitHub Actions Inactive

magnusrand force-pushed the ETU-63197-oppdatere-badge-og-tag-i-kode branch from d500731 to 316c140 Compare November 21, 2025 08:00

magnusrand temporarily deployed to prd November 21, 2025 08:13 — with GitHub Actions Inactive

magnusrand requested changes Nov 21, 2025

View reviewed changes

magnusrand force-pushed the ETU-63197-oppdatere-badge-og-tag-i-kode branch from 316c140 to 4d6f088 Compare December 1, 2025 17:35

magnusrand temporarily deployed to prd December 2, 2025 14:32 — with GitHub Actions Inactive

magnusrand force-pushed the ETU-63197-oppdatere-badge-og-tag-i-kode branch from a106c56 to cf1c73d Compare December 3, 2025 10:11

magnusrand temporarily deployed to prd December 3, 2025 10:24 — with GitHub Actions Inactive

magnusrand force-pushed the main branch 2 times, most recently from 28d25b2 to 9f8fc08 Compare February 5, 2026 08:25

ceciliehrr and others added 12 commits February 23, 2026 13:13

refactor(badge): new styling for badge

9c32eaa

refactor(badge): new styling for badge

f1274ac

feat(icons): add requiredIcon icons

a538386

refactor(tag): deprecate tag, style as badge, use badge variant=neutr…

c56315b

…al instead"

fix(badge): small styling tweeks on badge

ee07f24

fixup: wip do not use beta typography

0945cca

wip update tokens

eb5c176

TODO investigate where breakpoint values come from

wip update tokens

b360b87

TODO investigate where breakpoint values come from

wip reduce specificity

ef41d7d

feat(layout/badge): default variant is set to "neutral"

ab3f4cd

small fixes

8011fff

wip: un-deprecate Tag, deprecate Badge type=status

b7d72cd

magnusrand force-pushed the ETU-63197-oppdatere-badge-og-tag-i-kode branch from cf1c73d to b7d72cd Compare February 23, 2026 14:08

magnusrand temporarily deployed to prd February 23, 2026 14:21 — with GitHub Actions Inactive

		@@ -0,0 +1,258 @@
		@use '@entur/utils/dist/breakpoints.scss' as *;

		:root {

Conversation

ceciliehrr commented Oct 30, 2025

💡 Hvorfor?

🔧 Hvordan?

Badge-forbedringer:

Tag deprecation:

🧩 Type endring

🖼️ Skjermbilder

💬 Tilleggsnotater

✅ Sjekkliste

🧪 Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 30, 2025

Uh oh!

github-actions bot commented Nov 21, 2025

Uh oh!

magnusrand Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

magnusrand Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

magnusrand Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

magnusrand Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 2, 2025

Uh oh!

github-actions bot commented Dec 3, 2025

Uh oh!

github-actions bot commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants