Skip to content

fix(Text): render icon before title instead of before value - #4401

Open
GUOZIJAN wants to merge 2 commits into
Altinn:mainfrom
GUOZIJAN:fix/3939-text-icon-placement
Open

GUOZIJAN wants to merge 2 commits into
Altinn:mainfrom
GUOZIJAN:fix/3939-text-icon-placement

Conversation

@GUOZIJAN

@GUOZIJAN GUOZIJAN commented Oct 29, 2026 •

Copy link
Copy Markdown

Fixes #3939

What changed

  • The Text component's icon was rendered inside DisplayText, which places it between the title (label) and the value. It is now passed to the Label (new optional icon prop on LabelProps) so it renders before the title, matching the behaviour specified in Text Component #2170.
  • DisplayText no longer takes iconUrl/iconAltText (it is only used by TextComponent).

Note on verification

Dependency installation for this repo needs more disk space than was available in my environment, so I could not run the Jest suite locally. The change is small and behavior-preserving apart from the icon position:

  • icon is optional on LabelProps, so no other Label consumer changes behavior.
  • When no title is set the early-return path is unchanged (and the icon was never rendered there before either).
  • The icon keeps the same classes.icon styling and title-based alt text; in vertical direction it now sits above the title, as in the expected screenshot.

Summary by CodeRabbit

  • New Features
    • Labels can now display an optional icon alongside their text. When shown, the icon is aligned with the label and uses its localized title as alternative text.
    • Labels without an icon continue to display their existing text as before.
  • Bug Fixes
    • Icons no longer appear with text values; they are displayed with the label instead.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Wrong placement for icon in Text component

1 participant