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

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

Conversation

annawen1
Copy link
Member

@annawen1 annawen1 commented Sep 16, 2024

Closes #17018

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

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

netlify bot commented Sep 16, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Sep 16, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Sep 16, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Sep 16, 2024

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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

codecov bot commented Sep 16, 2024

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.

@annawen1 annawen1 marked this pull request as ready for review September 24, 2024 13:59
@annawen1 annawen1 requested a review from a team as a code owner September 24, 2024 13:59
guidari and others added 25 commits October 11, 2024 13:34
* 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 <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: Alison Joseph <[email protected]>
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] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
)

* test(togglesmallskeleton): add test coverage

* chore: fix copyright date

* chore: fix date
…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 <[email protected]>
Co-authored-by: Nikhil Tomar <[email protected]>
…system#17669)

* fix(date-picker): keep open when clearing input

* fix(date-picker): add type single to condition
)

* test: increase test coverage to 100% for Tag

* refactor: spyOn updated

* refactor: removed unused import

---------

Co-authored-by: Preeti Bansal <[email protected]>
* fix: increase test coverage for ToggleTip

* refactor: userEvent over fireEvent

---------

Co-authored-by: Alison Joseph <[email protected]>
…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 <[email protected]>
Co-authored-by: Alison Joseph <[email protected]>
…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 <[email protected]>
Co-authored-by: Alison Joseph <[email protected]>
…design-system#17657)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>
* 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 annawen1 requested review from a team as code owners October 11, 2024 17:35
@annawen1
Copy link
Member Author

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 annawen1 closed this Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

Floating UI: Allow floating-ui-based positioning without autoAlign collision detection