feat: Added floating-ui hook usage for `ComboBox` #16585

Gururajj77 · 2024-05-28T10:15:38Z

Closes #16470

Added floating-ui for combobox

Changelog

New

Imported useFloating hook from floating-ui library.
added new experimental prop, autoAlign which toggles the use of the useFloating hook.
a new useEffect hook to apply styles to the Combobox using CSSOM

Changed

added ref.setReference to ListBox and ref.setFloating to ListBox.Menu

Testing / Reviewing

Check the new Experimental Auto Align story from the Combobox component.

netlify · 2024-05-28T10:20:50Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`ff09fdc`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66685cde9465200008a8270f
😎 Deploy Preview	https://deploy-preview-16585--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-05-28T10:21:15Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`ff09fdc`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66685cdeb419640008daca36
😎 Deploy Preview	https://deploy-preview-16585--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

riddhybansal

Do we really need an auto align prop in this case ? Since its a comboBox, auto align should not be an optional behavior like popover. Auto align should be a default behaviour and should not be changed in conbobox.So implementation of floating UI in this case should not be optional( i.e should not depend on auto align prop)

@tay1orjones What do you think on this ?

Gururajj77 · 2024-05-29T08:06:00Z

Do we really need an auto align prop in this case ? Since its a comboBox, auto align should not be an optional behavior like popover. Auto align should be a default behaviour and should not be changed in combobox. So implementation of floating UI in this case should not be optional( i.e should not depend on auto align prop)

@tay1orjones What do you think on this ?

We can definitely do this if it's not considered a breaking change

guidari · 2024-05-29T19:50:08Z

Do we really need an auto align prop in this case ? Since its a comboBox, auto align should not be an optional behavior like popover. Auto align should be a default behaviour and should not be changed in conbobox.So implementation of floating UI in this case should not be optional( i.e should not depend on auto align prop)

Yeah, I agree with Riddhi on this! It is the same approach I'm having on MultiSelect and FilterableMultiselect, I'm just making the Floating UI alignment as default.

tay1orjones · 2024-06-05T18:40:14Z

packages/react/src/components/ListBox/test-helpers.js

@@ -105,3 +106,5 @@ export const generateItems = (amount, generator) =>
    .map((_, i) => generator(i));

 export const customItemToString = ({ field }) => field;
+
+export const waitForPosition = () => act(async () => {}); // Flush microtasks. Position state is ready by this line.


Just want to make a note that this comes from https://floating-ui.com/docs/react#testing and more context is here: floating-ui/react-popper#368 (comment)

tay1orjones

Looks so good 🔥 just a couple minor things

packages/react/src/components/ComboBox/ComboBox.tsx

update comments for interface Co-authored-by: Taylor Jones <[email protected]>

update comment for prop-types Co-authored-by: Taylor Jones <[email protected]>

removing `fallbackAxisSideDirection` and keeping it flip() Co-authored-by: Taylor Jones <[email protected]>

adding placement as we already have direction prop coming in Co-authored-by: Taylor Jones <[email protected]>

riddhybansal · 2024-06-06T14:14:21Z

Do we really need an auto align prop in this case ? Since its a comboBox, auto align should not be an optional behavior like popover. Auto align should be a default behaviour and should not be changed in conbobox.So implementation of floating UI in this case should not be optional( i.e should not depend on auto align prop)

@tay1orjones What do you think on this ?

This is discussed on slack

riddhybansal · 2024-06-06T14:15:42Z

LGTM !! Just need to run yarn format !!

tay1orjones

There were some weird unrelated changes highlighted in percy - might just be due to being out of date from latest with main. I just pushed the button to update, if status checks pass I think this LGTM 🎉

alisonjoseph

LGTM 🔥

riddhybansal

LGTM

Gururajj77 added 2 commits May 28, 2024 15:27

feat: changes

b8dcd0b

feat: added floating-ui for combobox

1d0200b

Gururajj77 requested a review from a team as a code owner May 28, 2024 10:15

Gururajj77 requested review from alisonjoseph and guidari May 28, 2024 10:15

Gururajj77 changed the title ~~Combobox fui 2~~ feat May 28, 2024

Gururajj77 changed the title ~~feat~~ feat: Added floating-ui library usage for ComboBox May 28, 2024

Gururajj77 mentioned this pull request May 28, 2024

feat(combobox): initial setup for floating-ui addition #16566

Closed

riddhybansal requested changes May 28, 2024

View reviewed changes

guidari added the status: ready for review 👀 label May 29, 2024

Gururajj77 changed the title ~~feat: Added floating-ui library usage for ComboBox~~ feat: Added floating-ui hook usage for ComboBox Jun 3, 2024

Gururajj77 added 2 commits June 5, 2024 15:33

feat: added test helper function to pass tests

1784689

feat: test changes

bc2e9a8

Gururajj77 requested a review from a team as a code owner June 5, 2024 10:29

alisonjoseph requested a review from tay1orjones June 5, 2024 14:14

tay1orjones reviewed Jun 5, 2024

View reviewed changes

tay1orjones requested changes Jun 5, 2024

View reviewed changes

Gururajj77 and others added 4 commits June 6, 2024 19:13

Update packages/react/src/components/ComboBox/ComboBox.tsx

94ae3dd

update comments for interface Co-authored-by: Taylor Jones <[email protected]>

Update packages/react/src/components/ComboBox/ComboBox.tsx

60bd094

update comment for prop-types Co-authored-by: Taylor Jones <[email protected]>

Update packages/react/src/components/ComboBox/ComboBox.tsx

f395bbc

removing `fallbackAxisSideDirection` and keeping it flip() Co-authored-by: Taylor Jones <[email protected]>

Update packages/react/src/components/ComboBox/ComboBox.tsx

c0ffda4

adding placement as we already have direction prop coming in Co-authored-by: Taylor Jones <[email protected]>

Gururajj77 and others added 2 commits June 6, 2024 19:46

feat: yarn formatted

6c8ba5c

Merge branch 'main' into combobox-fui-2

fe290ec

tay1orjones approved these changes Jun 7, 2024

View reviewed changes

tay1orjones added status: one more review 👀 and removed status: ready for review 👀 labels Jun 7, 2024

alisonjoseph approved these changes Jun 10, 2024

View reviewed changes

alisonjoseph added the status: ready to merge 🎉 label Jun 10, 2024

alisonjoseph enabled auto-merge June 10, 2024 13:27

Gururajj77 requested a review from riddhybansal June 11, 2024 14:15

guidari approved these changes Jun 11, 2024

View reviewed changes

Merge branch 'main' into combobox-fui-2

ff09fdc

riddhybansal approved these changes Jun 11, 2024

View reviewed changes

alisonjoseph added this pull request to the merge queue Jun 11, 2024

Merged via the queue into carbon-design-system:main with commit cb30e67 Jun 11, 2024
22 checks passed

Gururajj77 deleted the combobox-fui-2 branch June 18, 2024 08:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added floating-ui hook usage for `ComboBox` #16585

feat: Added floating-ui hook usage for `ComboBox` #16585

Gururajj77 commented May 28, 2024

netlify bot commented May 28, 2024 •

edited

Loading

netlify bot commented May 28, 2024 •

edited

Loading

riddhybansal left a comment

Gururajj77 commented May 29, 2024

guidari commented May 29, 2024

tay1orjones Jun 5, 2024

tay1orjones left a comment

riddhybansal commented Jun 6, 2024

riddhybansal commented Jun 6, 2024

tay1orjones left a comment

alisonjoseph left a comment

riddhybansal left a comment

feat: Added floating-ui hook usage for ComboBox #16585

feat: Added floating-ui hook usage for ComboBox #16585

Conversation

Gururajj77 commented May 28, 2024

Changelog

Testing / Reviewing

netlify bot commented May 28, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented May 28, 2024 • edited Loading

✅ Deploy Preview for carbon-elements ready!

riddhybansal left a comment

Choose a reason for hiding this comment

Gururajj77 commented May 29, 2024

guidari commented May 29, 2024

tay1orjones Jun 5, 2024

Choose a reason for hiding this comment

tay1orjones left a comment

Choose a reason for hiding this comment

riddhybansal commented Jun 6, 2024

riddhybansal commented Jun 6, 2024

tay1orjones left a comment

Choose a reason for hiding this comment

alisonjoseph left a comment

Choose a reason for hiding this comment

riddhybansal left a comment

Choose a reason for hiding this comment

feat: Added floating-ui hook usage for `ComboBox` #16585

feat: Added floating-ui hook usage for `ComboBox` #16585

netlify bot commented May 28, 2024 •

edited

Loading

netlify bot commented May 28, 2024 •

edited

Loading