<VirtualFocus /> component #2894

JulianNymark · 2024-05-02T23:09:50Z

internal tooling (for now)

changeset-bot · 2024-05-02T23:09:54Z

⚠️ No Changeset found

Latest commit: 4201a26

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

github-actions · 2024-05-02T23:13:08Z

Storybook demo

Endringer til review: 4

003cc70a7 | 85 komponenter | 163 stories

JulianNymark · 2024-05-03T08:22:32Z

Merker at et mye bedre navn på en slik prop er autocomplete 🤔

const thinger = () => {

show how easy it is to add icons / do something more complicated inside the autocomplete suggestions list alongside a <Search>

- fairly nicely working list of virtually focusable items - API interface kept simple (moved pick to Anchor though, single "exit point") - item has focus function now, which triggers when it gets virtual focus, the API should not distinguish between virtual and real focus was the thinking here, it's more an implementation detail.

- showcase dropdown search autocomplete

@navikt/core/react/src/form/autocomplete/utils.ts

@navikt/core/react/src/form/search/Search.tsx

@navikt/core/react/src/util/hooks/descendants/descendant.ts

@navikt/core/react/src/form/autocomplete/Autocomplete.tsx

@navikt/core/react/src/form/autocomplete/autocomplete.stories.tsx

@navikt/core/react/src/util/hooks/descendants/descendant.stories.tsx

Co-authored-by: Ken <[email protected]>

…-dropdown

@navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx

- renaming to better match the rest of DS - remove itemRole (just use role) - eslint ignore

JulianNymark · 2024-06-17T14:28:09Z

check out the cool branch virtualfocus-combobox-test to see how it could look when using this component (as of this writing) with <Combobox /> 👀 ⭐ 🚀 (if it looks bad, we can change this API completely / add more defaults)

JulianNymark · 2024-06-18T13:06:20Z

There are some changes I want to backport from the test branch, will bring them here & remove them from the test branch.

@navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx

KenAJoh

Since this isn't an actual form-component, there might be a more fitting location for the code than under /form

Co-authored-by: Ken <[email protected]>

JulianNymark · 2024-06-19T12:41:54Z

Since this isn't an actual form-component, there might be a more fitting location for the code than under /form

true, holdover from when it started as a prop on <Search />

🚧 WIP on some dropdown prop API

aa82657

JulianNymark requested a review from it-vegard May 2, 2024 23:09

♻️ rename dropdown -> autocomplete

44f5227

JulianNymark self-assigned this May 7, 2024

JulianNymark added 10 commits May 8, 2024 00:15

Merge branch 'main' into search-dropdown

b6c304c

🚧 WIP towards Autocomplete (inspiration from Menu)

f149827

🚧 WIP Autocomplete

af9ca00

🚧 wip Autocomplete

4bdbaa0

🚧 wip Autocomplete

2f34d11

🚧 working idea for context (get & set autocomplete)

c1d6df0

const thinger = () => {

🚧 pick property on Item

334b1b9

🚧 enrich story/example of Autocomplete

93f1548

show how easy it is to add icons / do something more complicated inside the autocomplete suggestions list alongside a <Search>

🚧 WIP new story for Autocomplete

56a309e

- showcase dropdown search autocomplete

JulianNymark marked this pull request as ready for review May 27, 2024 07:47

JulianNymark changed the title ~~🚧 WIP search dropdown prop API~~ Autocomplete component May 27, 2024

KenAJoh reviewed May 27, 2024

View reviewed changes

@navikt/core/react/src/form/autocomplete/utils.ts Outdated Show resolved Hide resolved

KenAJoh reviewed May 27, 2024

View reviewed changes

JulianNymark and others added 2 commits May 27, 2024 15:31

Update @navikt/core/react/src/form/autocomplete/Autocomplete.tsx

edbad8a

Co-authored-by: Ken <[email protected]>

Update @navikt/core/react/src/form/autocomplete/Autocomplete.tsx

71290bd

Co-authored-by: Ken <[email protected]>

KenAJoh mentioned this pull request May 28, 2024

🚚 Moved Slot into separate directory #2959

Merged

JulianNymark added 6 commits May 29, 2024 10:08

🔥 refactor class -> attr, remove css, use user provided <style> in story

7d0b7c6

Merge branch 'search-dropdown' of github.com:navikt/aksel into search…

98a7aa2

…-dropdown

🔥 remove originial ideas for a prop on <Search>

7bddc44

♻️ refactor + use mouseMove over mouseOver

23146db

🐛 reset virtualfocus on input change (within Anchor)

7c7f2b1

✨ add prop 'loop' for Autocomplete

a3596d1

JulianNymark added 3 commits June 11, 2024 10:15

Merge branch 'main' into search-dropdown

8be105f

🏷️ type itemRole

2e5bb6b

🔥 remove empty file

f40c766

KenAJoh reviewed Jun 11, 2024

View reviewed changes

@navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx Outdated Show resolved Hide resolved

KenAJoh reviewed Jun 11, 2024

View reviewed changes

@navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx Outdated Show resolved Hide resolved

KenAJoh reviewed Jun 11, 2024

View reviewed changes

@navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx Outdated Show resolved Hide resolved

KenAJoh reviewed Jun 11, 2024

View reviewed changes

JulianNymark added 8 commits June 11, 2024 12:37

♻️ pr comments

6072f21

- renaming to better match the rest of DS - remove itemRole (just use role) - eslint ignore

⚡ do not go via descendant API if self

4ef6921

🎨 add forwardRef & ...rest to Content

adf8bd9

🐛 fix lying prop doc comment, remove unused CSS class

5e5df0b

♻️ use <Slot /> (hoistmerge child)

887fb44

💄 fix broken CSS (class was removed)

34f98a5

📝 update jsdoc

52df526

🚚 move role to Anchor (from VirtualFocus wrapper)

a55458a

JulianNymark added 2 commits June 19, 2024 10:00

🎨 remove filtering from broken example

2f4b540

🐛 Anchor should trigger virtualfocused.onSelect()

971884c

JulianNymark force-pushed the search-dropdown branch from 549a26d to 971884c Compare June 19, 2024 08:00

KenAJoh approved these changes Jun 19, 2024

View reviewed changes

KenAJoh previously approved these changes Jun 19, 2024

View reviewed changes

🐛 use react v17 shimmed useId()

cba7cdc

JulianNymark dismissed KenAJoh’s stale review via cba7cdc June 19, 2024 11:53

JulianNymark and others added 4 commits June 19, 2024 13:55

Update @navikt/core/react/src/form/virtualfocus/VirtualFocus.tsx

95f016f

Co-authored-by: Ken <[email protected]>

🚧 import

11e49ab

🎨 improve story

7f2fdb8

🐛 do not let consumer overwrite certain VirtualBox implementation

62e2924

🎨 update story

4201a26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

<VirtualFocus /> component #2894

<VirtualFocus /> component #2894

JulianNymark commented May 2, 2024 •

edited

changeset-bot bot commented May 2, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

JulianNymark commented May 3, 2024

JulianNymark commented Jun 17, 2024 •

edited

JulianNymark commented Jun 18, 2024

KenAJoh left a comment

JulianNymark commented Jun 19, 2024

<VirtualFocus /> component #2894

Are you sure you want to change the base?

<VirtualFocus /> component #2894

Conversation

JulianNymark commented May 2, 2024 • edited

changeset-bot bot commented May 2, 2024 • edited

⚠️ No Changeset found

github-actions bot commented May 2, 2024 • edited

Storybook demo

Endringer til review: 4

JulianNymark commented May 3, 2024

JulianNymark commented Jun 17, 2024 • edited

JulianNymark commented Jun 18, 2024

KenAJoh left a comment

Choose a reason for hiding this comment

JulianNymark commented Jun 19, 2024

JulianNymark commented May 2, 2024 •

edited

changeset-bot bot commented May 2, 2024 •

edited

github-actions bot commented May 2, 2024 •

edited

JulianNymark commented Jun 17, 2024 •

edited