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(Hooks): Expose useFloatingElement for positioning #2412

Merged
merged 7 commits into from
Jun 10, 2021

Conversation

m7kvqbe1
Copy link
Member

@m7kvqbe1 m7kvqbe1 commented Jun 2, 2021

Related issue

Closes #1642

Overview

FloatingBox now intelligently positions itself based on the available screen real-estate.

Reason

The codebase currently contains multiple ways to position 'floating' elements relative to a target.

We are using both a library called react-tether (see DatePicker and others) and also a separate implementation in the form of the Sheet component (see SidebarE, Masthead). We have identified shortcomings in both of these implementations.

I suggest we refactor into a single implementation and expose a hook that both our components and downstream consumers can rely upon.

Work carried out

  • Create and expose useFloatingElement hook
  • Expand FloatingBox implementation to consume hook
  • Refactor Popover usage
  • Refactor DatePicker usage
  • Refactor Sheet usage (Masthead, SidebarE, Sidebar)
  • Document hook usage

Screenshot

2021-06-07 21 27 38

Developer notes

@m7kvqbe1 m7kvqbe1 added Type: Enhancement New feature or request Type: Techdebt Requires or will require rework Package: react-component-library Package/code type labels Jun 2, 2021
@m7kvqbe1 m7kvqbe1 self-assigned this Jun 2, 2021
@m7kvqbe1 m7kvqbe1 force-pushed the feat/refactor-sheet-tether-usage branch 26 times, most recently from 9b871d1 to f803feb Compare June 7, 2021 17:14
@m7kvqbe1 m7kvqbe1 force-pushed the feat/refactor-sheet-tether-usage branch 14 times, most recently from 5c70d3f to 73f5117 Compare June 9, 2021 10:38
Copy link
Collaborator

@thyhjwb6 thyhjwb6 left a comment

Choose a reason for hiding this comment

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

Looks great 👍

Comments are minor

@m7kvqbe1 m7kvqbe1 force-pushed the feat/refactor-sheet-tether-usage branch from b4ef74b to 39e6c47 Compare June 10, 2021 09:12
Copy link
Collaborator

@thyhjwb6 thyhjwb6 left a comment

Choose a reason for hiding this comment

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

Nice 😎

@m7kvqbe1 m7kvqbe1 force-pushed the feat/refactor-sheet-tether-usage branch from 39e6c47 to f1eca0b Compare June 10, 2021 09:39
@m7kvqbe1 m7kvqbe1 force-pushed the feat/refactor-sheet-tether-usage branch from f1eca0b to 6fcf6b3 Compare June 10, 2021 09:49
@sonarcloud
Copy link

sonarcloud bot commented Jun 10, 2021

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 7 Code Smells

95.7% 95.7% Coverage
0.0% 0.0% Duplication

@m7kvqbe1 m7kvqbe1 merged commit 718349b into master Jun 10, 2021
@m7kvqbe1 m7kvqbe1 deleted the feat/refactor-sheet-tether-usage branch June 10, 2021 10:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: react-component-library Package/code type Type: Enhancement New feature or request Type: Techdebt Requires or will require rework
Projects
None yet
2 participants