feat(floating-ui): add feature flag for dynamic floating-ui styles #17446

annawen1 · 2024-09-16T11:48:40Z

This PR introduces a new feature flag (enable-v12-dynamic-floating-styles) to separate the @floating-ui logic. By turning on the flag, components will have dynamically positioned floating styles without the collision detection currently in place.

To have the collision detect logic, adopter will set the autoAlign prop to true which will automatically include the dynamic styling - so the feature flag is not necessary in this case.

Changelog

New

enable-v12-dynamic-floating-styles feature flag

Changed

add checks in current components utilitizing @floating-ui to separate out the style and middleware logic

Testing / Reviewing

go to deploy preview, Feature flags section
go to Dynamic floating styles folder and inspect the components and see that the styles are set dynamically

netlify · 2024-09-16T11:54:34Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`4a9f95f`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66e81b1a727497000871015a
😎 Deploy Preview	https://deploy-preview-17446--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.

netlify · 2024-09-16T11:57:09Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`4a9f95f`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66e81b1ab790e80008d3c791
😎 Deploy Preview	https://deploy-preview-17446--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-09-16T12:00:12Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`729cf7d`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/670961f92104720008935f1c
😎 Deploy Preview	https://deploy-preview-17446--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.

netlify · 2024-09-16T12:05:20Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`729cf7d`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/670961f92104720008935f1e
😎 Deploy Preview	https://deploy-preview-17446--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.

codecov · 2024-09-16T12:05:36Z

Codecov Report

Attention: Patch coverage is 76.36364% with 13 lines in your changes missing coverage. Please review.

Project coverage is 77.19%. Comparing base (21e4380) to head (8926896).
Report is 9 commits behind head on main.

Files with missing lines	Patch %	Lines
...s/react/src/components/OverflowMenu/next/index.tsx	33.33%	5 Missing and 1 partial ⚠️
...s/react/src/components/MultiSelect/MultiSelect.tsx	57.14%	2 Missing and 1 partial ⚠️
...ackages/react/src/components/ComboBox/ComboBox.tsx	66.66%	1 Missing and 1 partial ⚠️
...ackages/react/src/components/Dropdown/Dropdown.tsx	75.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17446      +/-   ##
==========================================
+ Coverage   77.13%   77.19%   +0.06%     
==========================================
  Files         409      409              
  Lines       14024    14048      +24     
  Branches     4355     4326      -29     
==========================================
+ Hits        10818    10845      +27     
  Misses       3035     3035              
+ Partials      171      168       -3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…loating-styles

packages/react/src/components/FeatureFlags/overview.mdx

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

* test: added tests for FluiTimePicker * fix: changed from fireevent to userevent

…on-design-system#17563) * fix: renamed js files to tsx for fluid combobox components * fix: added typescript types to fluid combobox * fix: snapshots * Update packages/react/src/components/FluidComboBox/FluidComboBox.tsx --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

Bumps [rollup](https://github.com/rollup/rollup) from 4.14.0 to 4.24.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](rollup/rollup@v4.14.0...v4.24.0) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

) * test(togglesmallskeleton): add test coverage * chore: fix copyright date * chore: fix date

…bon-design-system#17568) Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

…ign-system#17268) * feat: autocomplete is fked * feat: autoComplete typeahead feature fixed * feat: added tests for autocomplete * feat: adds functionality test cases * feat: matcsh case exactly with option list when Tab is pressed * feat: adds tests, refines functions * feat: updated prop name to component and tests * refactor: fixed conflict * test: covered allowcustomValue prop --------- Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Co-authored-by: Nikhil Tomar <nikhiltomar753@gmail.com>

…sign-system#17685)

…#17655)

…on-design-system#17692)

…system#17669) * fix(date-picker): keep open when clearing input * fix(date-picker): add type single to condition

…m#17440)

Co-authored-by: alisonjoseph <2753488+alisonjoseph@users.noreply.github.com>

) * test: increase test coverage to 100% for Tag * refactor: spyOn updated * refactor: removed unused import --------- Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>

* fix: increase test coverage for ToggleTip * refactor: userEvent over fireEvent --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

…n-system#17681) * chore(issue-templates): always apply needs triage label * chore: add web components package to package selection dropdown

* fix(tabs): add icon only 1px spacing * chore: cleanup story updates

…bon-design-system#17684) * ci(actions): add workflow to calculate and surface PR merge rate * ci(actions): add workflow to calculate and surface PR merge rate --------- Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

…m#17630) * fix(TreeNode): preserve nested node expand state * fix(TreeView): prevent focus on hidden child nodes

* feat(tabs): added hover and active styles * feat(tabs): revert test style * feat(tabs): active tab style order fix * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): issue fix :last tab is being partially hidden * feat(tabs): added to contributors list * feat(tabs): rebase --------- Co-authored-by: Soumya Raju <soumyaraju@ip-192-168-1-8.us-west-2.compute.internal> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

…design-system#17657) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>

* fix(combobox): rendering aria-label * test(combobox): update tests with aria-label and titleText

carbon-design-system#17651) * fix: implement unique dynamic id generation for FileUploader component * test(FileUploader): fix failing tests and update snapshot

annawen1 · 2024-10-11T17:54:20Z

Ran into some weirdness when trying to resolve merge conflicts locally, pulling in all the commits - opening a new PR to clean the commits clean here

annawen1 added 2 commits September 11, 2024 15:45

feat(feature-flag): create floating styles feature flag

33c3a12

feat(dropdown): add feature flag logic to dropdown and popover

4a9f95f

annawen1 changed the title ~~Feat/feature flag floating styles~~ feat(floating-ui): add feature flag for dynamic floating-ui styles Sep 16, 2024

Merge branch 'main' into feat/feature-flag-floating-styles

447e51f

annawen1 added the status: WIP 👩‍💻 label Sep 16, 2024

annawen1 added 7 commits September 16, 2024 12:54

feat(toggletip): add feature flag story

94f8bd6

feat(floating-ui): add additional components

e57eae7

Merge remote-tracking branch 'upstream/main' into feat/feature-flag-f…

13a8042

…loating-styles

chore: shorten flag name

148c054

chore: shorten flag name

c86b9bc

chore: the rest of the auto align components

4ca0926

chore: set a few controls

cb20e52

annawen1 marked this pull request as ready for review September 24, 2024 13:59

annawen1 requested a review from a team as a code owner September 24, 2024 13:59

annawen1 requested review from alisonjoseph and emyarod September 24, 2024 13:59

Merge branch 'main' into feat/feature-flag-floating-styles

044b1c0

tay1orjones assigned annawen1, ariellalgilmore and preetibansalui Sep 25, 2024

annawen1 removed the status: WIP 👩‍💻 label Oct 8, 2024

chore: resolve merge conflict

6598c75

kennylam reviewed Oct 8, 2024

View reviewed changes

packages/react/src/components/FeatureFlags/overview.mdx Show resolved Hide resolved

annawen1 and others added 2 commits October 8, 2024 15:58

Update packages/react/src/components/FeatureFlags/overview.mdx

6fe3100

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Merge branch 'main' into feat/feature-flag-floating-styles

1c10dd0

guidari and others added 25 commits October 11, 2024 13:34

Added tests for FluidTimePicker (carbon-design-system#17541)

f85285b

* test: added tests for FluiTimePicker * fix: changed from fireevent to userevent

test(togglesmallskeleton): add test coverage (carbon-design-system#17674

09e0b63

) * test(togglesmallskeleton): add test coverage * chore: fix copyright date * chore: fix date

fix(FileUploaderDropContainer): resolve click handler errorerror (car…

e11b039

…bon-design-system#17568) Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

chore(storybook): move feature flag overview under welcome (carbon-de…

a899f7b

…sign-system#17685)

docs(web-components): remove old storybook copy (carbon-design-system…

f944e26

…#17655)

docs(date-time-format): update link to carbon-for-products page (carb…

7596e86

…on-design-system#17692)

test(tabs): increase coverage (carbon-design-system#17565)

9b73dfb

fix(date-picker): clearing input and selecting a date (carbon-design-…

2ba7b2c

…system#17669) * fix(date-picker): keep open when clearing input * fix(date-picker): add type single to condition

chore(chat-button-toggle-skeleton): test updates (carbon-design-syste…

77a7327

…m#17440)

chore(release): v11.68.0 (carbon-design-system#17696)

d040496

Co-authored-by: alisonjoseph <2753488+alisonjoseph@users.noreply.github.com>

test: increase test coverage to 100% for Tag (carbon-design-system#17614

d18e138

) * test: increase test coverage to 100% for Tag * refactor: spyOn updated * refactor: removed unused import --------- Co-authored-by: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>

fix: increase test coverage for ToggleTip (carbon-design-system#17661)

d64492f

* fix: increase test coverage for ToggleTip * refactor: userEvent over fireEvent --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

chore(issue-templates): always apply needs triage label (carbon-desig…

fc55a79

…n-system#17681) * chore(issue-templates): always apply needs triage label * chore: add web components package to package selection dropdown

fix: link overview page is not loading (carbon-design-system#17710)

929ac98

test(structured-list): increase coverage (carbon-design-system#17705)

fb6bcb6

fix(tabs): add icon only 1px spacing (carbon-design-system#17671)

dc2aebe

* fix(tabs): add icon only 1px spacing * chore: cleanup story updates

fix(TreeNode): preserve nested node expand state (carbon-design-syste…

fa1548e

…m#17630) * fix(TreeNode): preserve nested node expand state * fix(TreeView): prevent focus on hidden child nodes

chore(deps): update dependency @types/prop-types to v15.7.13 (carbon-…

fa24616

…design-system#17657) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>

fix(combobox): rendering aria-label (carbon-design-system#17678)

43f1eea

* fix(combobox): rendering aria-label * test(combobox): update tests with aria-label and titleText

fix: implement unique dynamic id generation for FileUploader component (

729cf7d

carbon-design-system#17651) * fix: implement unique dynamic id generation for FileUploader component * test(FileUploader): fix failing tests and update snapshot

annawen1 requested review from a team as code owners October 11, 2024 17:35

annawen1 requested a review from kennylam October 11, 2024 17:35

annawen1 closed this Oct 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(floating-ui): add feature flag for dynamic floating-ui styles #17446

feat(floating-ui): add feature flag for dynamic floating-ui styles #17446

annawen1 commented Sep 16, 2024 •

edited

Loading

netlify bot commented Sep 16, 2024

netlify bot commented Sep 16, 2024

netlify bot commented Sep 16, 2024 •

edited

Loading

netlify bot commented Sep 16, 2024 •

edited

Loading

codecov bot commented Sep 16, 2024 •

edited

Loading

annawen1 commented Oct 11, 2024

feat(floating-ui): add feature flag for dynamic floating-ui styles #17446

feat(floating-ui): add feature flag for dynamic floating-ui styles #17446

Conversation

annawen1 commented Sep 16, 2024 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Sep 16, 2024

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Sep 16, 2024

✅ Deploy Preview for v11-carbon-react ready!

netlify bot commented Sep 16, 2024 • edited Loading

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Sep 16, 2024 • edited Loading

✅ Deploy Preview for v11-carbon-react ready!

codecov bot commented Sep 16, 2024 • edited Loading

Codecov Report

annawen1 commented Oct 11, 2024

annawen1 commented Sep 16, 2024 •

edited

Loading

netlify bot commented Sep 16, 2024 •

edited

Loading

netlify bot commented Sep 16, 2024 •

edited

Loading

codecov bot commented Sep 16, 2024 •

edited

Loading