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

Tooltip, DropdownMenu: replace popperjs with floating-ui #434

Merged
merged 12 commits into from
Nov 1, 2022

Conversation

daneah
Copy link
Member

@daneah daneah commented Oct 30, 2022

Warning

I had to remove one test (has an attribute to set tooltip width equal to target width) because it started producing a cryptic Error: Script error (:0) message specifically for Webkit when run. I tried running the test in a non-headless browser and more to see what was happening, to no avail.

This change: (check at least one)

  • Adds a new feature
  • Fixes a bug
  • Improves maintainability
  • Improves documentation
  • Is a release activity

Is this a breaking change? (check one)

  • Yes
  • No (to my knowledge)

Is the: (complete all)

  • Title of this pull request clear, concise, and indicative of the issue number it addresses, if any?
  • Test suite(s) passing?
  • Code coverage maximal?
  • Changeset added?
  • Component status page up to date?

What does this change address?

Resolves #266
Closes #436

How does this change work?

Replace usage and management of PopperJS with Floating UI, largely by following the documentation.

Additional context

  • Floating UI has gotten rid of the 'auto' placements and fallbacks, opting instead to have a 'bestFit' option for fallback strategy which is now the default. This means we should deprecate the use of 'auto' for consumers moving forward. For now I've opted to have 'auto' get removed from fallbackPlacements if supplied, and to be switched to 'top' if supplied as the main placement.

@changeset-bot
Copy link

changeset-bot bot commented Oct 30, 2022

🦋 Changeset detected

Latest commit: b7452d0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@ithaka/pharos Minor
@ithaka/pharos-site Minor

Not sure what this means? Click here to learn what changesets are.

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

@daneah daneah changed the title chore(tooltip, dropdown-menu): replace popperjs with floating-ui Tooltip, DropdownMenu: replace popperjs with floating-ui Oct 30, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 30, 2022

size-limit report 📦

Path Size
packages/pharos/lib/index.js 46.38 KB (-4% 🔽)

@daneah daneah requested a review from Niznikr October 30, 2022 19:53
Copy link
Collaborator

@Niznikr Niznikr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Niznikr
Copy link
Collaborator

Niznikr commented Oct 31, 2022

gatsby is pulling in older versions of @typescript-eslint/eslint-plugin and @typescript-eslint/parser. Perhaps bumping Gatsby or adding resolutions might fix the linting issue.

@daneah
Copy link
Member Author

daneah commented Oct 31, 2022

@Niznikr Thanks for the clue—I did notice that but I had hoped they wouldn't interplay. Maybe my understanding of hoisting is a bit poor 😅 I'm interested nonetheless in reproducing locally—will try from a totally fresh install and see what happens.

@daneah daneah merged commit 080c496 into develop Nov 1, 2022
@daneah daneah deleted the chore/replace-popper-with-floating-ui branch November 1, 2022 00:35
daneah added a commit that referenced this pull request Nov 3, 2022
* develop:
  ToggleButton: indicate toggle button state on underlying button elements (#438)
  Tooltip, DropdownMenu: replace popperjs with floating-ui (#434)
daneah added a commit that referenced this pull request Nov 10, 2022
* develop:
  Tabs: fix initial tab selection in more cases (#449)
  Storybook: add eslint-plugin-storybook and fix issues (#446)
  feat(storybook): install Measure and Outline addons (#445)
  Docs: update copy for Button's on-background usage (#444)
  Storybook: Convert stories to CSF 3 (#435)
  feat(tabs): fire event when tab selected programmatically (#442)
  ToggleButton: indicate toggle button state on underlying button elements (#438)
  Tooltip, DropdownMenu: replace popperjs with floating-ui (#434)
  Site: improve imports (#433)
@github-actions github-actions bot mentioned this pull request Nov 10, 2022
sirrah-tam pushed a commit to sirrah-tam/pharos that referenced this pull request Dec 1, 2023
* chore(tooltip, dropdown-menu): replace popperjs with floating-ui

* chore: add debug logging to GitHub Actions

* chore: remove debug logging from GitHub Actions

* chore: add changeset

* fix(ci): update set-output to environment files

Closes ithaka#436

* chore(ci): update actions/cache from v2 to v3

* chore(ci): update actions/checkout and actions/setup-node from v2 to v3

* fix(styles): fix stylelint errors around specificity

* fix(toggle-button): fix border width regression on hover

* fix(toggle-button): fix style regression and story display

* fix(tooltip, dropdown-menu): remove contain property

* fix(storybook): fix poor prettier transform
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update GitHub Actions yarn cache Infra: Use Floating UI for positioning tooltips and dropdown menus
4 participants