Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/combobox show add new value while autocompleting #3225

Merged

Conversation

it-vegard
Copy link
Contributor

Description

Enable option to add a new value while autocompleting (match searchText instead of value).
Also highlight matches in FilteredOptions to better explain why the options is shown.

Component Checklist 📝

  • JSDoc
  • Examples
  • Documentation
  • Storybook
  • Style mappings (@navikt/core/css/config/_mappings.js)
  • Component tokens (@navikt/core/css/tokens.json)
  • CSS class deprecations (@navikt/aksel-stylelint/src/deprecations.ts)
  • Exports (@navikt/core/react/src/index.ts and @navikt/core/react/package.json)
  • New component? CSS import (@navikt/core/css/index.css)
  • Breaking change? Update migration guide. Consider codemod.
  • Changeset (Format: <Component>: <gitmoji?> <Text>. E.g. "Button: ✨ Add feature xyz.")

Copy link

changeset-bot bot commented Oct 11, 2024

🦋 Changeset detected

Latest commit: 79e896b

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

This PR includes changesets to release 7 packages
Name Type
@navikt/ds-react Minor
@navikt/ds-css Minor
@navikt/ds-tokens Minor
@navikt/ds-tailwind Minor
@navikt/aksel-icons Minor
@navikt/aksel Minor
@navikt/aksel-stylelint 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

Copy link
Contributor

github-actions bot commented Oct 11, 2024

Storybook demo

7ef6b604c | 91 komponenter | 144 stories

@HalvorHaugan
Copy link
Contributor

Side note: Haven't thought about this before, but doesn't the gray background of the "add" option look somewhat similar to the focus/hover state of the "normal" options? I understand that we want to distinguish it, though. I also think it's a bit weird that the focus/hover states are so different.
image

@KenAJoh
Copy link
Collaborator

KenAJoh commented Oct 21, 2024

Side note: Haven't thought about this before, but doesn't the gray background of the "add" option look somewhat similar to the focus/hover state of the "normal" options? I understand that we want to distinguish it, though. I also think it's a bit weird that the focus/hover states are so different. image

🧠 Think it makes sense to just treat it like any other option visually

…rch matches.

This only seemed to be a problem in testing library, so we should be able to remove this if they fix this in their calculation of accessible name.
@it-vegard
Copy link
Contributor Author

Side note: Haven't thought about this before, but doesn't the gray background of the "add" option look somewhat similar to the focus/hover state of the "normal" options? I understand that we want to distinguish it, though. I also think it's a bit weird that the focus/hover states are so different. image

🧠 Think it makes sense to just treat it like any other option visually

Talked to Sjur about this, and he agrees that we should adjust this design. Sounds like maybe he talked to some of you about it as well? We agreed that it can happen outside of this PR, though.

@HalvorHaugan
Copy link
Contributor

Hmm... I think you should take a look at chromatic.

@it-vegard it-vegard merged commit 59dc3e9 into main Oct 23, 2024
4 checks passed
@it-vegard it-vegard deleted the feature/combobox-show-addNewValue-while-autocompleting branch October 23, 2024 13:42
@github-actions github-actions bot mentioned this pull request Oct 23, 2024
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.

3 participants