Skip to content

feat(Suggestion): add autoPlacement#4359

Merged
Barsnes merged 11 commits intomainfrom
suggestion/autoPlacement
Jan 8, 2026
Merged

feat(Suggestion): add autoPlacement#4359
Barsnes merged 11 commits intomainfrom
suggestion/autoPlacement

Conversation

@Barsnes
Copy link
Member

@Barsnes Barsnes commented Jan 6, 2026

Summary

resolves #4356

see https://floating-ui.com/docs/flip

Checks

@changeset-bot
Copy link

changeset-bot bot commented Jan 6, 2026

🦋 Changeset detected

Latest commit: b2fc2c9

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-react Minor
@digdir/designsystemet Minor
@digdir/designsystemet-css Minor
@digdir/designsystemet-theme Minor
@digdir/designsystemet-types Minor

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
Copy link
Contributor

github-actions bot commented Jan 6, 2026

Preview deployments for this pull request:

storybook - 8. Jan 2026 - 14:46

@Barsnes Barsnes marked this pull request as ready for review January 6, 2026 10:06
plural = '%d forslag',
className,
id,
autoPlacement = true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh, should this rather be data-placement="auto" so it alignes with the naming convention used in dialog and is possible to recreate in pure HTML-components? ☺️

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes it can, I just followed what was done on Popover

Copy link
Contributor

@eirikbacker eirikbacker Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, I see! hm, in Mattilsynet, autoPlacement is always true - no possibility to turn it off - without any complains so far! But we have added the overscroll feature which kind of deals with keeping the popover consistently placed within viewport: https://design.mattilsynet.no/?path=/docs/designsystem-popover--docs#scroll ☺️

Copy link
Member Author

@Barsnes Barsnes Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've given this some quick though, and I think it's cleaner to introduce this prop so it is similar to other floating components first. Then we can later on deprecate all of these, and change them to data-placement or data-autoplacement.

This makes sure we have a cohesive API across all component using floating-ui

@oddvernes
Copy link
Collaborator

oddvernes commented Jan 8, 2026

Its kind of weird how the snapshot is broken but not in regulaer storybook

@Barsnes
Copy link
Member Author

Barsnes commented Jan 8, 2026

Its kind of weird how the snapshot is broken but not in regulaer storybook

Yeah I'll look into it. Works fine in storybook outside of chromatic 🦐

@oddvernes
Copy link
Collaborator

Its kind of weird how the snapshot is broken but not in regulaer storybook

Yeah I'll look into it. Works fine in storybook outside of chromatic 🦐

I checked the story (controlled-independent-label-value) and It is expected behaviour with the new code. The dropdown tries to stay inside viewport when the input is overflowing to the right in this particular story

Copy link
Collaborator

@oddvernes oddvernes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Barsnes
Copy link
Member Author

Barsnes commented Jan 8, 2026

LGTM

hm, maybe we should make the story width then, before merging

@Barsnes Barsnes merged commit f0ee62f into main Jan 8, 2026
16 checks passed
@Barsnes Barsnes deleted the suggestion/autoPlacement branch January 8, 2026 13:54
@github-actions github-actions bot mentioned this pull request Jan 8, 2026
Barsnes added a commit that referenced this pull request Jan 20, 2026
Co-authored-by: Oddbjørn Øvernes <oddbjorn.overnes@gmail.com>
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.

Suggestion dropdown does not flip when there isn't enough space below

3 participants