Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Combobox: Mulighet for å begrense hvor mange valg bruker kan ta (#2260
) * yarn lock * setting up maxSelectedOptions * added correct margin * Update tsconfig.build.json * Make border of "max selected"-item in FilteredOptions overlap the list border * Hide "add new value"-button if "max selected"-limit is reached * Make MaxSelected example a bit more interactive * wip styling max-selected option * Disable filteredOptions that are not selected when maxSelectedOptions is reached * Fix scrolling/clipping content in FilteredOptions * Remove hover-effects from non-selectable options * add prop so user can customize message shown when max num of choices reached * Operate directly on the DOM nodes when moving virtual focus, instead of relying on index state. The index state became stale/non-synced when replacing elements in the list. * make maxSelectedMessage static * Remove max-selected:hover Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> * yarn lock update * 'cursor: not allowed' only hits disabled options * remove li-margins, add ul-gap with negative margin on max-selected-option * remove 'a' from initialstate maxSelectedOptions Story * Update @navikt/core/css/form/combobox.css * Update @navikt/core/css/form/combobox.css * Update @navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx * Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts * Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts * Update @navikt/core/react/src/form/combobox/combobox.stories.tsx * type assertion * remove tab-index on wrapper div * prototype for sticky non-selectable options * "yarn lock" * Fix feil med at focus-indikator for input-feltet ikke ble vist * Forenkle og fikse "scroll til element" i FilteredOptions * Sørg for at disabled FilteredOptions ikke vises under "max antall"-meldingen * Focused option should not be covered by "max selected" message * yarn lock * Fix "scrollIntoView is not a function" error. Possibly needs to be checked for when it occurs, but I haven't figured it out yet * Loading indicator is no longer exposed as an option, so we have to just search for it by the accessible name. Should have been able to use findByRole("graphics-document", { name: "Søker..." }), but that is currently broken: testing-library/dom-testing-library#1131 * Aria-selected should not be placed on elements that are no longer role="option" * Combine all "max selected options"-related props in one object * Proper BEM syntax should use -- instead of __ for state-like classes, like --loading, --max-selected and --new-option * Always show selected options in FilteredOptions, even if they don't match the search text * Only to the getElementsAbleToReceiveFocus() call once per function, to reduce DOM lookups. Also changed isFocusOnThe[Top | Bottom] to functions, because it was needed for isFocusOnTheBottom to follow the same rule (and not store the value on the top level in the hook. * Pressing "End" should not only move focus to the end of the list, but also open the list if it is closed. To mirror this, we close the list if moving focus back to the Input with "Home". * Legg til Aksel-eksempel * yarn changeset * Update @navikt/core/css/form/combobox.css * change 'maxSelectedOptions' prop to 'maxSelected' * Mark disabled options with aria-disabled * Add max selected text to aria-describedby, so it is announced when the user enters the input field * Add role="status" to the wrapper for "no hits", "loading" and "max selected" info messages, so they are announced when they appear * Remove aria-selected (again) * fix: form error not showing correctly * fix: rm left hover-border on add-new-option item * Bare åpne listen som default, men la intern logikk styre etter første render * Sticky trenger ikke ligger på hver enkelt av disse, da parent wrapperen også er sticky * Combobox eksempler var ikke tilgjengelig i `yarn storybook:aksel` på grunn av manglende Demo-eksport * Fjern ubrukt klasse som er i konflikt med navds-combobox__wrapper * Trengs ikke etter at max selected ble flyttet ut av listen * Denne koden gjør ingenting * Trenger ikke bruke :not, fordi vi tok vekk data-no-focus i en commit tidligere i dag * Bruk dynamiske selectedOptions for å kunne endre de * Update @navikt/core/css/form/combobox.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update aksel.nav.no/website/pages/eksempler/combobox/with-max-selected-limit.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update @navikt/core/css/form/combobox.css * Do not render an empty ul for FilteredOptions, as it add a gap at the bottom of the container * Do not render an empty non-selectables container, as it adds a gap at the top of the container * Non-selectables should not have navds-combobox__list-item class, as it introduces a few issues with hovering, etc. * Copy-pasted in an extra class that broke styling for max selected --------- Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
- Loading branch information
4 people
authored
Jan 26, 2024
1 parent
058e012
commit 23c472e