fix: uppercase Å looked like Ă in input fields by unekinn · Pull Request #4301 · digdir/designsystemet

unekinn · 2025-12-09T16:09:18Z

Summary

Fixes a bug in Input, Search, Suggestion, Textfield where uppercase Å was cut off at the top in Chrome and Safari, making it look like Ă

resolves #4293

Checks

I have read the contribution guidelines
I have added a changeset (run pnpm changeset if relevant)

changeset-bot · 2025-12-09T16:09:22Z

🦋 Changeset detected

Latest commit: 905a4bb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-css	Patch
@digdir/designsystemet-react	Patch
@digdir/designsystemet	Patch
@digdir/designsystemet-theme	Patch
@digdir/designsystemet-types	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-12-09T16:12:04Z

Preview deployments for this pull request:

storybook - 12. Dec 2025 - 14:46

unekinn · 2025-12-09T16:22:29Z

For discussion

With this implementation, if downstream consumer has overridden --dsc-input-padding (or the new --dsc-input-padding-block) it will probably look different than before. Is there any point in trying to avoid this?

~~Let --PADDING_THRESHOLD be var(--dsc-input-size) / 2 - var(--dsc-input-border-width) (in size md this is 22px)~~

~~Before this PR: If --dsc-input-padding is overridden downstream with block padding <= --PADDING_THRESHOLD, the input height is unchanged. Above this, height will increase.~~
~~This PR currently: If --dsc-input-padding is overridden downstream, the height may be smaller than before (block padding < --PADDING_THRESHOLD) or larger~~

However, I could introduce css calculations to check this threshold in order to keep the old behavior, where --dsc-input-size essentially functions as a minimum height. Not sure if it's worth complicating the code, though.

EDIT: In the current iteration, any block padding (set with --dsc-input-padding or --dsc-input-padding-block) will affect the following as before: [type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], textarea, select. Other input types will have block padding overridden to ensure the height is exactly --dsc-input-size and Å is not cut off.

eirikbacker · 2025-12-09T19:23:11Z

packages/css/src/input.css

      field-sizing: content;
    }
  }
+  &:is([type='text'], [type='search'], [type='num'], [type='tel'], [type='url'], [type='password'], [type='month'], [type='week']) {


Suggested change

&:is([type='text'], [type='search'], [type='num'], [type='tel'], [type='url'], [type='password'], [type='month'], [type='week']) {

&:not(:read-only:not([readonly])) {

...will target all inputs that is writable, but exclude radio, checkbox and select :)

I may be misunderstanding what you mean here, but if I try this selector it also messes up type="radio", type="checkbox", type="color" if they are readonly

arg, right! so, :not([type="radio"], [type="checkbox"], [type="color"], select) might be easier then? :/ input - doing too many things since 1993 🙈

I think this is enough to not cause issues

:not([type='radio'], [type='checkbox'], [type='color'])

but it feels more correct with

:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='textarea'], select)

oddvernes · 2025-12-11T12:31:40Z

The only edge case i can think of with an unset height is when you have an Input inside a flex-container with a set height and no align-items set (stretch is default). Not sure how likely this scenario is though and obviously the donwstream developer can fix it 🤷‍♂️

Barsnes · 2025-12-12T11:32:12Z

The only edge case i can think of with an unset height is when you have an Input inside a flex-container with a set height and no align-items set (stretch is default). Not sure how likely this scenario is though and obviously the donwstream developer can fix it 🤷‍♂️

I'ts not an uncommon usecase, but it should be easy enough to fix 🤔
You usually set align-items as well

EDIT: Well actually, I am guessing most people use the input inside Field anyways

unekinn · 2025-12-12T12:18:49Z

The only edge case i can think of with an unset height is when you have an Input inside a flex-container with a set height and no align-items set (stretch is default). Not sure how likely this scenario is though and obviously the donwstream developer can fix it 🤷‍♂️

I'ts not an uncommon usecase, but it should be easy enough to fix 🤔 You usually set align-items as well

EDIT: Well actually, I am guessing most people use the input inside Field anyways

True, and e.g. when used with Textfield this is not an issue unless you specifically set the height of .ds-field-affixes with your own css. I think it's fair to have folks set align-items on the flex container if necessary.

eirikbacker · 2025-12-12T12:22:57Z

packages/css/src/input.css

      field-sizing: content;
    }
  }
+  &:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='textarea'], select) {


Suggested change

&:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='textarea'], select) {

&:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], textarea, select) {

<3 :)

packages/css/src/input.css

unekinn requested review from Barsnes, eirikbacker, mimarz and oddvernes as code owners December 9, 2025 16:09

unekinn force-pushed the fix/cutoff-uppercase-aa-in-input branch from 22adda4 to 0379c10 Compare December 9, 2025 16:28

eirikbacker reviewed Dec 9, 2025

View reviewed changes

unekinn force-pushed the fix/cutoff-uppercase-aa-in-input branch from 0379c10 to ee17ccd Compare December 12, 2025 12:11

eirikbacker reviewed Dec 12, 2025

View reviewed changes

Barsnes reviewed Dec 12, 2025

View reviewed changes

packages/css/src/input.css Outdated Show resolved Hide resolved

unekinn and others added 5 commits December 12, 2025 14:42

fix: uppercase Å looked like Ă in input fields

55a022f

slightly simpler targeting of height fix

9e083dc

fix: always respect config

ed7c599

fix textarea lol

fd38f32

fix: keep --dsc-input-padding

905a4bb

unekinn force-pushed the fix/cutoff-uppercase-aa-in-input branch from 2e868d1 to 905a4bb Compare December 12, 2025 13:43

Barsnes approved these changes Dec 15, 2025

View reviewed changes

unekinn merged commit 7dff40d into main Dec 15, 2025
16 checks passed

unekinn deleted the fix/cutoff-uppercase-aa-in-input branch December 15, 2025 08:53

github-actions bot mentioned this pull request Dec 12, 2025

chore: new release #4303

Merged

	&:is([type='text'], [type='search'], [type='num'], [type='tel'], [type='url'], [type='password'], [type='month'], [type='week']) {
	&:not(:read-only:not([readonly])) {

	&:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='textarea'], select) {
	&:not([type='button'], [type='radio'], [type='checkbox'], [type='color'], [type='file'], textarea, select) {

Conversation

unekinn commented Dec 9, 2025 • edited by oddvernes Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checks

Uh oh!

changeset-bot bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

unekinn commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

For discussion

Uh oh!

eirikbacker Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

unekinn Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

unekinn Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

eirikbacker Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

unekinn Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

oddvernes commented Dec 11, 2025

Uh oh!

Barsnes commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

unekinn commented Dec 12, 2025

Uh oh!

eirikbacker Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

unekinn commented Dec 9, 2025 •

edited by oddvernes

Loading

changeset-bot bot commented Dec 9, 2025 •

edited

Loading

github-actions bot commented Dec 9, 2025 •

edited

Loading

unekinn commented Dec 9, 2025 •

edited

Loading

Barsnes commented Dec 12, 2025 •

edited

Loading