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

LG-4445: add renderMode and top layer #2482

Merged
merged 6 commits into from
Oct 4, 2024

Conversation

stephl3
Copy link
Collaborator

@stephl3 stephl3 commented Sep 18, 2024

✍️ Proposed changes

  • adds renderMode, dismissMode, and onToggle props to Popover component
    • usePortal currently overrides renderMode prop but will be dropped in an upcoming PR
  • adds support for renderMode="top-layer"
  • changesets will be consolidated in upcoming PR

🎟 Jira ticket: LG-4445

✅ Checklist

For bug fixes, new features & breaking changes

  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • I have run yarn changeset and documented my changes

🧪 How to test changes

  • Review Popover stories
  • Review UI Tests
  • Check for regressions
    • Combobox/LiveExample
    • DatePicker/LiveExample
    • GuideCue/LiveExample
    • NumberInput/LiveExample
    • SearchInput/LiveExample
    • Chat/InputBar/WithDropdown

Copy link

changeset-bot bot commented Sep 18, 2024

⚠️ No Changeset found

Latest commit: bee293b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@stephl3 stephl3 changed the base branch from main to LG-4121-popover-refactor September 18, 2024 01:27
@stephl3 stephl3 force-pushed the steph/po-render-mode branch 3 times, most recently from 17d4fbc to deebe1c Compare September 18, 2024 17:32
Copy link
Contributor

github-actions bot commented Sep 18, 2024

Size Change: +1.97 kB (+0.15%)

Total Size: 1.36 MB

Filename Size Change
packages/date-picker/dist/esm/index.js 13.9 kB +7 B (+0.05%)
packages/date-picker/dist/index.js 14.3 kB +6 B (+0.04%)
packages/guide-cue/dist/esm/index.js 4.37 kB +6 B (+0.14%)
packages/guide-cue/dist/index.js 4.61 kB +6 B (+0.13%)
packages/leafygreen-provider/dist/esm/index.js 2.52 kB +22 B (+0.88%)
packages/leafygreen-provider/dist/index.js 2.67 kB +20 B (+0.75%)
packages/popover/dist/esm/index.js 4.93 kB +942 B (+23.63%) 🚨
packages/popover/dist/index.js 5.1 kB +948 B (+22.85%) 🚨
packages/search-input/dist/esm/index.js 6.03 kB +7 B (+0.12%)
packages/search-input/dist/index.js 6.25 kB +9 B (+0.14%)
ℹ️ View Unchanged
Filename Size
chat/avatar/dist/esm/index.js 1.36 kB
chat/avatar/dist/index.js 1.52 kB
chat/chat-disclaimer/dist/esm/index.js 566 B
chat/chat-disclaimer/dist/index.js 755 B
chat/chat-window/dist/esm/index.js 1.62 kB
chat/chat-window/dist/index.js 1.79 kB
chat/fixed-chat-window/dist/esm/index.js 2.35 kB
chat/fixed-chat-window/dist/index.js 2.54 kB
chat/input-bar/dist/esm/index.js 6.9 kB
chat/input-bar/dist/index.js 7.11 kB
chat/leafygreen-chat-provider/dist/esm/index.js 902 B
chat/leafygreen-chat-provider/dist/index.js 1.06 kB
chat/lg-markdown/dist/esm/index.js 1.44 kB
chat/lg-markdown/dist/index.js 1.59 kB
chat/message-feed/dist/esm/index.js 1.92 kB
chat/message-feed/dist/index.js 2.12 kB
chat/message-feedback/dist/esm/index.js 2.54 kB
chat/message-feedback/dist/index.js 2.78 kB
chat/message-prompts/dist/esm/index.js 1.74 kB
chat/message-prompts/dist/index.js 1.91 kB
chat/message-rating/dist/esm/index.js 2.52 kB
chat/message-rating/dist/index.js 2.71 kB
chat/message/dist/esm/index.js 3.75 kB
chat/message/dist/index.js 3.92 kB
chat/rich-links/dist/esm/index.js 2.68 kB
chat/rich-links/dist/index.js 2.89 kB
chat/title-bar/dist/esm/index.js 1.39 kB
chat/title-bar/dist/index.js 1.6 kB
packages/a11y/dist/esm/index.js 1.74 kB
packages/a11y/dist/index.js 1.87 kB
packages/avatar/dist/esm/index.js 2.34 kB
packages/avatar/dist/index.js 2.52 kB
packages/badge/dist/esm/index.js 1.46 kB
packages/badge/dist/index.js 1.66 kB
packages/banner/dist/esm/index.js 3.13 kB
packages/banner/dist/index.js 3.44 kB
packages/box/dist/esm/index.js 540 B
packages/box/dist/index.js 695 B
packages/button/dist/esm/index.js 4.82 kB
packages/button/dist/index.js 5.03 kB
packages/callout/dist/esm/index.js 1.62 kB
packages/callout/dist/index.js 1.8 kB
packages/card/dist/esm/index.js 1.56 kB
packages/card/dist/index.js 1.75 kB
packages/checkbox/dist/esm/index.js 4.27 kB
packages/checkbox/dist/index.js 4.48 kB
packages/chip/dist/esm/index.js 3.28 kB
packages/chip/dist/index.js 3.5 kB
packages/code/dist/esm/index.js 10.2 kB
packages/code/dist/index.js 10.8 kB
packages/combobox/dist/esm/index.js 12 kB
packages/combobox/dist/index.js 12.3 kB
packages/confirmation-modal/dist/esm/index.js 2.64 kB
packages/confirmation-modal/dist/index.js 2.87 kB
packages/copyable/dist/esm/index.js 2.88 kB
packages/copyable/dist/index.js 3.09 kB
packages/date-utils/dist/esm/index.js 3.42 kB
packages/date-utils/dist/index.js 3.53 kB
packages/descendants/dist/esm/index.js 2.81 kB
packages/descendants/dist/index.js 2.9 kB
packages/emotion/dist/esm/index.js 345 B
packages/emotion/dist/index.js 555 B
packages/empty-state/dist/esm/index.js 1.8 kB
packages/empty-state/dist/index.js 1.99 kB
packages/expandable-card/dist/esm/index.js 2.85 kB
packages/expandable-card/dist/index.js 3.03 kB
packages/form-field/dist/esm/index.js 4.31 kB
packages/form-field/dist/index.js 4.46 kB
packages/form-footer/dist/esm/index.js 1.77 kB
packages/form-footer/dist/index.js 1.98 kB
packages/hooks/dist/esm/index.js 3.32 kB
packages/hooks/dist/index.js 3.45 kB
packages/icon-button/dist/esm/index.js 2.35 kB
packages/icon-button/dist/index.js 2.57 kB
packages/icon/dist/ActivityFeed.js 2.03 kB
packages/icon/dist/AddFile.js 1.8 kB
packages/icon/dist/AllProducts.js 1.87 kB
packages/icon/dist/Apps.js 1.47 kB
packages/icon/dist/Array.js 1.59 kB
packages/icon/dist/ArrowDown.js 1.72 kB
packages/icon/dist/ArrowLeft.js 1.73 kB
packages/icon/dist/ArrowRight.js 1.72 kB
packages/icon/dist/ArrowUp.js 1.72 kB
packages/icon/dist/Beaker.js 2.15 kB
packages/icon/dist/Bell.js 1.68 kB
packages/icon/dist/Biometric.js 2.25 kB
packages/icon/dist/Boolean.js 1.52 kB
packages/icon/dist/Building.js 1.67 kB
packages/icon/dist/Bulb.js 1.72 kB
packages/icon/dist/Calendar.js 1.67 kB
packages/icon/dist/Camera.js 1.76 kB
packages/icon/dist/Cap.js 1.88 kB
packages/icon/dist/CaretDown.js 1.54 kB
packages/icon/dist/CaretLeft.js 1.54 kB
packages/icon/dist/CaretRight.js 1.53 kB
packages/icon/dist/CaretUp.js 1.54 kB
packages/icon/dist/ChartFilled.js 1.64 kB
packages/icon/dist/Charts.js 1.61 kB
packages/icon/dist/Checkmark.js 1.68 kB
packages/icon/dist/CheckmarkWithCircle.js 1.75 kB
packages/icon/dist/ChevronDown.js 1.64 kB
packages/icon/dist/ChevronLeft.js 1.64 kB
packages/icon/dist/ChevronRight.js 1.66 kB
packages/icon/dist/ChevronUp.js 1.63 kB
packages/icon/dist/Clock.js 1.7 kB
packages/icon/dist/ClockWithArrow.js 1.99 kB
packages/icon/dist/Clone.js 1.57 kB
packages/icon/dist/Cloud.js 1.75 kB
packages/icon/dist/Code.js 1.96 kB
packages/icon/dist/CodeBlock.js 1.9 kB
packages/icon/dist/Colon.js 1.52 kB
packages/icon/dist/Connect.js 2 kB
packages/icon/dist/Copy.js 1.95 kB
packages/icon/dist/CreditCard.js 1.5 kB
packages/icon/dist/CurlyBraces.js 2.1 kB
packages/icon/dist/Cursor.js 1.63 kB
packages/icon/dist/Dashboard.js 1.64 kB
packages/icon/dist/Database.js 2.1 kB
packages/icon/dist/Diagram.js 1.71 kB
packages/icon/dist/Diagram2.js 1.73 kB
packages/icon/dist/Diagram3.js 1.69 kB
packages/icon/dist/Disconnect.js 1.94 kB
packages/icon/dist/Download.js 1.73 kB
packages/icon/dist/Drag.js 1.68 kB
packages/icon/dist/Edit.js 1.58 kB
packages/icon/dist/Ellipsis.js 1.56 kB
packages/icon/dist/Email.js 1.78 kB
packages/icon/dist/Eraser.js 1.85 kB
packages/icon/dist/Escalation.js 1.75 kB
packages/icon/dist/esm/ActivityFeed.js 1.79 kB
packages/icon/dist/esm/AddFile.js 1.57 kB
packages/icon/dist/esm/AllProducts.js 1.64 kB
packages/icon/dist/esm/Apps.js 1.25 kB
packages/icon/dist/esm/Array.js 1.37 kB
packages/icon/dist/esm/ArrowDown.js 1.49 kB
packages/icon/dist/esm/ArrowLeft.js 1.5 kB
packages/icon/dist/esm/ArrowRight.js 1.49 kB
packages/icon/dist/esm/ArrowUp.js 1.49 kB
packages/icon/dist/esm/Beaker.js 1.92 kB
packages/icon/dist/esm/Bell.js 1.45 kB
packages/icon/dist/esm/Biometric.js 2.02 kB
packages/icon/dist/esm/Boolean.js 1.29 kB
packages/icon/dist/esm/Building.js 1.44 kB
packages/icon/dist/esm/Bulb.js 1.49 kB
packages/icon/dist/esm/Calendar.js 1.45 kB
packages/icon/dist/esm/Camera.js 1.53 kB
packages/icon/dist/esm/Cap.js 1.65 kB
packages/icon/dist/esm/CaretDown.js 1.31 kB
packages/icon/dist/esm/CaretLeft.js 1.31 kB
packages/icon/dist/esm/CaretRight.js 1.31 kB
packages/icon/dist/esm/CaretUp.js 1.31 kB
packages/icon/dist/esm/ChartFilled.js 1.41 kB
packages/icon/dist/esm/Charts.js 1.39 kB
packages/icon/dist/esm/Checkmark.js 1.45 kB
packages/icon/dist/esm/CheckmarkWithCircle.js 1.51 kB
packages/icon/dist/esm/ChevronDown.js 1.41 kB
packages/icon/dist/esm/ChevronLeft.js 1.42 kB
packages/icon/dist/esm/ChevronRight.js 1.43 kB
packages/icon/dist/esm/ChevronUp.js 1.4 kB
packages/icon/dist/esm/Clock.js 1.47 kB
packages/icon/dist/esm/ClockWithArrow.js 1.75 kB
packages/icon/dist/esm/Clone.js 1.34 kB
packages/icon/dist/esm/Cloud.js 1.53 kB
packages/icon/dist/esm/Code.js 1.73 kB
packages/icon/dist/esm/CodeBlock.js 1.67 kB
packages/icon/dist/esm/Colon.js 1.3 kB
packages/icon/dist/esm/Connect.js 1.77 kB
packages/icon/dist/esm/Copy.js 1.72 kB
packages/icon/dist/esm/CreditCard.js 1.27 kB
packages/icon/dist/esm/CurlyBraces.js 1.87 kB
packages/icon/dist/esm/Cursor.js 1.4 kB
packages/icon/dist/esm/Dashboard.js 1.41 kB
packages/icon/dist/esm/Database.js 1.87 kB
packages/icon/dist/esm/Diagram.js 1.49 kB
packages/icon/dist/esm/Diagram2.js 1.5 kB
packages/icon/dist/esm/Diagram3.js 1.47 kB
packages/icon/dist/esm/Disconnect.js 1.71 kB
packages/icon/dist/esm/Download.js 1.5 kB
packages/icon/dist/esm/Drag.js 1.46 kB
packages/icon/dist/esm/Edit.js 1.36 kB
packages/icon/dist/esm/Ellipsis.js 1.34 kB
packages/icon/dist/esm/Email.js 1.55 kB
packages/icon/dist/esm/Eraser.js 1.62 kB
packages/icon/dist/esm/Escalation.js 1.52 kB
packages/icon/dist/esm/Export.js 1.63 kB
packages/icon/dist/esm/Favorite.js 1.58 kB
packages/icon/dist/esm/Federation.js 1.9 kB
packages/icon/dist/esm/File.js 1.39 kB
packages/icon/dist/esm/Filter.js 1.37 kB
packages/icon/dist/esm/Folder.js 1.28 kB
packages/icon/dist/esm/Format.js 1.71 kB
packages/icon/dist/esm/FullScreenEnter.js 1.53 kB
packages/icon/dist/esm/FullScreenExit.js 1.54 kB
packages/icon/dist/esm/Gauge.js 1.57 kB
packages/icon/dist/esm/GlobeAmericas.js 1.49 kB
packages/icon/dist/esm/GovernmentBuilding.js 1.52 kB
packages/icon/dist/esm/Hash.js 1.68 kB
packages/icon/dist/esm/Highlight.js 1.72 kB
packages/icon/dist/esm/Home.js 1.64 kB
packages/icon/dist/esm/HorizontalDrag.js 1.46 kB
packages/icon/dist/esm/Import.js 1.62 kB
packages/icon/dist/esm/ImportantWithCircle.js 1.38 kB
packages/icon/dist/esm/index.js 28.1 kB
packages/icon/dist/esm/InfoWithCircle.js 1.42 kB
packages/icon/dist/esm/InternalEmployee.js 1.71 kB
packages/icon/dist/esm/InviteUser.js 1.72 kB
packages/icon/dist/esm/Key.js 1.52 kB
packages/icon/dist/esm/Laptop.js 1.51 kB
packages/icon/dist/esm/LightningBolt.js 1.38 kB
packages/icon/dist/esm/Link.js 1.88 kB
packages/icon/dist/esm/List.js 1.53 kB
packages/icon/dist/esm/Lock.js 1.48 kB
packages/icon/dist/esm/LogIn.js 1.55 kB
packages/icon/dist/esm/LogOut.js 1.61 kB
packages/icon/dist/esm/MagnifyingGlass.js 1.45 kB
packages/icon/dist/esm/Megaphone.js 1.43 kB
packages/icon/dist/esm/Menu.js 1.33 kB
packages/icon/dist/esm/Minus.js 1.29 kB
packages/icon/dist/esm/Mobile.js 1.28 kB
packages/icon/dist/esm/Moon.js 1.47 kB
packages/icon/dist/esm/MultiDirectionArrow.js 1.5 kB
packages/icon/dist/esm/MultiLayers.js 2.46 kB
packages/icon/dist/esm/NavCollapse.js 1.52 kB
packages/icon/dist/esm/NavExpand.js 1.53 kB
packages/icon/dist/esm/NoFilter.js 1.51 kB
packages/icon/dist/esm/NotAllowed.js 1.4 kB
packages/icon/dist/esm/Note.js 1.43 kB
packages/icon/dist/esm/OpenNewTab.js 1.71 kB
packages/icon/dist/esm/Pause.js 1.34 kB
packages/icon/dist/esm/Pending.js 1.31 kB
packages/icon/dist/esm/Person.js 1.5 kB
packages/icon/dist/esm/PersonGroup.js 1.71 kB
packages/icon/dist/esm/PersonWithLock.js 1.71 kB
packages/icon/dist/esm/Pin.js 1.45 kB
packages/icon/dist/esm/Play.js 1.32 kB
packages/icon/dist/esm/Plus.js 1.34 kB
packages/icon/dist/esm/PlusWithCircle.js 1.37 kB
packages/icon/dist/esm/Primary.js 1.39 kB
packages/icon/dist/esm/Project.js 1.43 kB
packages/icon/dist/esm/QuestionMarkWithCircle.js 1.75 kB
packages/icon/dist/esm/Read.js 2.04 kB
packages/icon/dist/esm/Recommended.js 2.22 kB
packages/icon/dist/esm/Redo.js 1.68 kB
packages/icon/dist/esm/Refresh.js 1.75 kB
packages/icon/dist/esm/Relationship.js 1.45 kB
packages/icon/dist/esm/ReplicaSet.js 1.6 kB
packages/icon/dist/esm/Resize.js 1.42 kB
packages/icon/dist/esm/Return.js 1.51 kB
packages/icon/dist/esm/Save.js 1.94 kB
packages/icon/dist/esm/SearchIndex.js 2.07 kB
packages/icon/dist/esm/Secondary.js 1.63 kB
packages/icon/dist/esm/Serverless.js 1.58 kB
packages/icon/dist/esm/Settings.js 2.01 kB
packages/icon/dist/esm/ShardedCluster.js 1.96 kB
packages/icon/dist/esm/Shell.js 1.5 kB
packages/icon/dist/esm/SMS.js 1.46 kB
packages/icon/dist/esm/SortAscending.js 1.54 kB
packages/icon/dist/esm/SortDescending.js 1.53 kB
packages/icon/dist/esm/Sparkle.js 1.87 kB
packages/icon/dist/esm/SplitHorizontal.js 1.31 kB
packages/icon/dist/esm/SplitVertical.js 1.3 kB
packages/icon/dist/esm/Stitch.js 1.34 kB
packages/icon/dist/esm/Stop.js 1.19 kB
packages/icon/dist/esm/String.js 1.45 kB
packages/icon/dist/esm/Sun.js 1.67 kB
packages/icon/dist/esm/Support.js 1.54 kB
packages/icon/dist/esm/Sweep.js 1.56 kB
packages/icon/dist/esm/Table.js 1.33 kB
packages/icon/dist/esm/Tag.js 1.37 kB
packages/icon/dist/esm/ThumbsDown.js 1.66 kB
packages/icon/dist/esm/ThumbsUp.js 1.65 kB
packages/icon/dist/esm/TimeSeries.js 1.7 kB
packages/icon/dist/esm/TimeSeriesCollection.js 1.83 kB
packages/icon/dist/esm/Trash.js 1.36 kB
packages/icon/dist/esm/Undo.js 1.67 kB
packages/icon/dist/esm/University.js 1.86 kB
packages/icon/dist/esm/Unlock.js 1.55 kB
packages/icon/dist/esm/Unsorted.js 1.59 kB
packages/icon/dist/esm/UpDownCarets.js 1.44 kB
packages/icon/dist/esm/Upload.js 1.64 kB
packages/icon/dist/esm/VerticalEllipsis.js 1.35 kB
packages/icon/dist/esm/Visibility.js 1.67 kB
packages/icon/dist/esm/VisibilityOff.js 2.06 kB
packages/icon/dist/esm/Warning.js 1.43 kB
packages/icon/dist/esm/Wizard.js 1.78 kB
packages/icon/dist/esm/Wrench.js 1.77 kB
packages/icon/dist/esm/Write.js 2.05 kB
packages/icon/dist/esm/X.js 1.47 kB
packages/icon/dist/esm/XWithCircle.js 1.41 kB
packages/icon/dist/Export.js 1.86 kB
packages/icon/dist/Favorite.js 1.82 kB
packages/icon/dist/Federation.js 2.14 kB
packages/icon/dist/File.js 1.61 kB
packages/icon/dist/Filter.js 1.6 kB
packages/icon/dist/Folder.js 1.5 kB
packages/icon/dist/Format.js 1.93 kB
packages/icon/dist/FullScreenEnter.js 1.76 kB
packages/icon/dist/FullScreenExit.js 1.77 kB
packages/icon/dist/Gauge.js 1.8 kB
packages/icon/dist/GlobeAmericas.js 1.72 kB
packages/icon/dist/GovernmentBuilding.js 1.75 kB
packages/icon/dist/Hash.js 1.91 kB
packages/icon/dist/Highlight.js 1.95 kB
packages/icon/dist/Home.js 1.87 kB
packages/icon/dist/HorizontalDrag.js 1.69 kB
packages/icon/dist/Import.js 1.85 kB
packages/icon/dist/ImportantWithCircle.js 1.61 kB
packages/icon/dist/index.js 28.4 kB
packages/icon/dist/InfoWithCircle.js 1.64 kB
packages/icon/dist/InternalEmployee.js 1.94 kB
packages/icon/dist/InviteUser.js 1.95 kB
packages/icon/dist/Key.js 1.75 kB
packages/icon/dist/Laptop.js 1.73 kB
packages/icon/dist/LightningBolt.js 1.61 kB
packages/icon/dist/Link.js 2.12 kB
packages/icon/dist/List.js 1.75 kB
packages/icon/dist/Lock.js 1.7 kB
packages/icon/dist/LogIn.js 1.78 kB
packages/icon/dist/LogOut.js 1.84 kB
packages/icon/dist/MagnifyingGlass.js 1.68 kB
packages/icon/dist/Megaphone.js 1.65 kB
packages/icon/dist/Menu.js 1.56 kB
packages/icon/dist/Minus.js 1.51 kB
packages/icon/dist/Mobile.js 1.51 kB
packages/icon/dist/Moon.js 1.7 kB
packages/icon/dist/MultiDirectionArrow.js 1.73 kB
packages/icon/dist/MultiLayers.js 2.7 kB
packages/icon/dist/NavCollapse.js 1.75 kB
packages/icon/dist/NavExpand.js 1.76 kB
packages/icon/dist/NoFilter.js 1.74 kB
packages/icon/dist/NotAllowed.js 1.63 kB
packages/icon/dist/Note.js 1.66 kB
packages/icon/dist/OpenNewTab.js 1.95 kB
packages/icon/dist/Pause.js 1.56 kB
packages/icon/dist/Pending.js 1.54 kB
packages/icon/dist/Person.js 1.73 kB
packages/icon/dist/PersonGroup.js 1.94 kB
packages/icon/dist/PersonWithLock.js 1.94 kB
packages/icon/dist/Pin.js 1.67 kB
packages/icon/dist/Play.js 1.54 kB
packages/icon/dist/Plus.js 1.57 kB
packages/icon/dist/PlusWithCircle.js 1.6 kB
packages/icon/dist/Primary.js 1.62 kB
packages/icon/dist/Project.js 1.66 kB
packages/icon/dist/QuestionMarkWithCircle.js 1.98 kB
packages/icon/dist/Read.js 2.27 kB
packages/icon/dist/Recommended.js 2.46 kB
packages/icon/dist/Redo.js 1.92 kB
packages/icon/dist/Refresh.js 1.98 kB
packages/icon/dist/Relationship.js 1.67 kB
packages/icon/dist/ReplicaSet.js 1.82 kB
packages/icon/dist/Resize.js 1.64 kB
packages/icon/dist/Return.js 1.74 kB
packages/icon/dist/Save.js 2.17 kB
packages/icon/dist/SearchIndex.js 2.31 kB
packages/icon/dist/Secondary.js 1.86 kB
packages/icon/dist/Serverless.js 1.82 kB
packages/icon/dist/Settings.js 2.25 kB
packages/icon/dist/ShardedCluster.js 2.2 kB
packages/icon/dist/Shell.js 1.73 kB
packages/icon/dist/SMS.js 1.69 kB
packages/icon/dist/SortAscending.js 1.77 kB
packages/icon/dist/SortDescending.js 1.76 kB
packages/icon/dist/Sparkle.js 2.1 kB
packages/icon/dist/SplitHorizontal.js 1.53 kB
packages/icon/dist/SplitVertical.js 1.53 kB
packages/icon/dist/Stitch.js 1.57 kB
packages/icon/dist/Stop.js 1.41 kB
packages/icon/dist/String.js 1.68 kB
packages/icon/dist/Sun.js 1.9 kB
packages/icon/dist/Support.js 1.77 kB
packages/icon/dist/Sweep.js 1.79 kB
packages/icon/dist/Table.js 1.55 kB
packages/icon/dist/Tag.js 1.59 kB
packages/icon/dist/ThumbsDown.js 1.89 kB
packages/icon/dist/ThumbsUp.js 1.89 kB
packages/icon/dist/TimeSeries.js 1.94 kB
packages/icon/dist/TimeSeriesCollection.js 2.07 kB
packages/icon/dist/Trash.js 1.59 kB
packages/icon/dist/Undo.js 1.91 kB
packages/icon/dist/University.js 2.1 kB
packages/icon/dist/Unlock.js 1.78 kB
packages/icon/dist/Unsorted.js 1.82 kB
packages/icon/dist/UpDownCarets.js 1.66 kB
packages/icon/dist/Upload.js 1.87 kB
packages/icon/dist/VerticalEllipsis.js 1.57 kB
packages/icon/dist/Visibility.js 1.9 kB
packages/icon/dist/VisibilityOff.js 2.3 kB
packages/icon/dist/Warning.js 1.66 kB
packages/icon/dist/Wizard.js 2.02 kB
packages/icon/dist/Wrench.js 2 kB
packages/icon/dist/Write.js 2.28 kB
packages/icon/dist/X.js 1.7 kB
packages/icon/dist/XWithCircle.js 1.64 kB
packages/info-sprinkle/dist/esm/index.js 1.39 kB
packages/info-sprinkle/dist/index.js 1.6 kB
packages/inline-definition/dist/esm/index.js 1.2 kB
packages/inline-definition/dist/index.js 1.37 kB
packages/input-option/dist/esm/index.js 2.68 kB
packages/input-option/dist/index.js 2.82 kB
packages/lib/dist/esm/index.js 2.34 kB
packages/lib/dist/index.js 2.51 kB
packages/loading-indicator/dist/esm/index.js 3.41 kB
packages/loading-indicator/dist/index.js 3.63 kB
packages/logo/dist/esm/index.js 39.9 kB
packages/logo/dist/index.js 40.1 kB
packages/marketing-modal/dist/esm/index.js 3.6 kB
packages/marketing-modal/dist/index.js 3.83 kB
packages/menu/dist/esm/index.js 8.01 kB
packages/menu/dist/index.js 8.33 kB
packages/modal/dist/esm/index.js 3.28 kB
packages/modal/dist/index.js 3.51 kB
packages/number-input/dist/esm/index.js 6.12 kB
packages/number-input/dist/index.js 6.33 kB
packages/pagination/dist/esm/index.js 1.75 kB
packages/pagination/dist/index.js 1.97 kB
packages/palette/dist/esm/index.js 411 B
packages/palette/dist/index.js 562 B
packages/password-input/dist/esm/index.js 4.7 kB
packages/password-input/dist/index.js 4.94 kB
packages/pipeline/dist/esm/index.js 7.85 kB
packages/pipeline/dist/index.js 8.14 kB
packages/polymorphic/dist/esm/index.js 1.27 kB
packages/polymorphic/dist/index.js 1.4 kB
packages/portal/dist/esm/index.js 979 B
packages/portal/dist/index.js 1.16 kB
packages/radio-box-group/dist/esm/index.js 2.98 kB
packages/radio-box-group/dist/index.js 3.13 kB
packages/radio-group/dist/esm/index.js 3.37 kB
packages/radio-group/dist/index.js 3.53 kB
packages/ripple/dist/esm/index.js 956 B
packages/ripple/dist/index.js 1.05 kB
packages/segmented-control/dist/esm/index.js 5.49 kB
packages/segmented-control/dist/index.js 5.63 kB
packages/select/dist/esm/index.js 9.25 kB
packages/select/dist/index.js 9.45 kB
packages/side-nav/dist/esm/index.js 7.52 kB
packages/side-nav/dist/index.js 7.8 kB
packages/skeleton-loader/dist/esm/index.js 3.19 kB
packages/skeleton-loader/dist/index.js 3.39 kB
packages/split-button/dist/esm/index.js 3.55 kB
packages/split-button/dist/index.js 3.71 kB
packages/stepper/dist/esm/index.js 2.96 kB
packages/stepper/dist/index.js 3.2 kB
packages/table/dist/esm/index.js 14 kB
packages/table/dist/index.js 14.5 kB
packages/tabs/dist/esm/index.js 5.17 kB
packages/tabs/dist/index.js 5.32 kB
packages/testing-lib/dist/esm/index.js 4.42 kB
packages/testing-lib/dist/index.js 4.63 kB
packages/text-area/dist/esm/index.js 2.43 kB
packages/text-area/dist/index.js 2.6 kB
packages/text-input/dist/esm/index.js 2.79 kB
packages/text-input/dist/index.js 2.97 kB
packages/toast/dist/esm/index.js 8.31 kB
packages/toast/dist/index.js 8.61 kB
packages/toggle/dist/esm/index.js 3.11 kB
packages/toggle/dist/index.js 3.31 kB
packages/tokens/dist/esm/index.js 1.96 kB
packages/tokens/dist/index.js 2.06 kB
packages/tooltip/dist/esm/index.js 4.36 kB
packages/tooltip/dist/index.js 4.64 kB
packages/typography/dist/esm/index.js 5.58 kB
packages/typography/dist/index.js 5.73 kB
tools/build/dist/esm/index.js 5.75 kB
tools/build/dist/index.js 5.97 kB
tools/cli/dist/esm/index.js 1.95 kB
tools/cli/dist/index.js 2.1 kB
tools/codemods/dist/codemods/consolidate-props/transform.js 378 B
tools/codemods/dist/codemods/rename-component-prop/transform.js 317 B
tools/codemods/dist/codemods/update-component-prop-value/transform.js 330 B
tools/codemods/dist/constants.js 125 B
tools/codemods/dist/esm/index.js 4.98 kB
tools/codemods/dist/index.js 5.2 kB
tools/codemods/dist/utils/jsx/getJSXAttributes.js 165 B
tools/codemods/dist/utils/jsx/insertJSXComment/insertJSXComment.js 368 B
tools/codemods/dist/utils/transformations/consolidateJSXAttributes/consolidateJSXAttributes.js 600 B
tools/codemods/dist/utils/transformations/replaceJSXAttributes/replaceJSXAttributes.js 283 B
tools/create/dist/esm/index.js 2.87 kB
tools/create/dist/index.js 3.04 kB
tools/install/dist/esm/index.js 890 B
tools/install/dist/index.js 1.03 kB
tools/link/dist/esm/index.js 5.03 kB
tools/link/dist/index.js 5.15 kB
tools/lint/dist/esm/index.js 1.03 kB
tools/lint/dist/index.js 1.17 kB
tools/meta/dist/esm/index.js 1.48 kB
tools/meta/dist/index.js 1.61 kB
tools/slackbot/dist/esm/index.js 6.1 kB
tools/slackbot/dist/index.js 6.27 kB
tools/storybook-addon/dist/esm/index.js 4.98 kB
tools/storybook-addon/dist/esm/main.js 4.94 kB
tools/storybook-addon/dist/esm/manager.js 550 B
tools/storybook-addon/dist/esm/preview.js 1.6 kB
tools/storybook-addon/dist/index.js 5.08 kB
tools/storybook-addon/dist/main.js 5.04 kB
tools/storybook-addon/dist/manager.js 681 B
tools/storybook-addon/dist/preview.js 1.69 kB
tools/storybook-decorators/dist/esm/index.js 3.29 kB
tools/storybook-decorators/dist/index.js 3.55 kB
tools/storybook-utils/dist/esm/index.js 1.05 kB
tools/storybook-utils/dist/index.js 1.22 kB
tools/test-harnesses/dist/esm/index.js 1.78 kB
tools/test-harnesses/dist/index.js 1.9 kB
tools/test/dist/esm/index.js 1.65 kB
tools/test/dist/index.js 1.78 kB
tools/update/dist/esm/index.js 730 B
tools/update/dist/index.js 896 B
tools/validate/dist/esm/index.js 6.78 kB
tools/validate/dist/index.js 7 kB

compressed-size-action

@stephl3 stephl3 changed the title LG-4445: replace usePortal with renderMode and add top layer render mode LG-4445: add renderMode and top layer Sep 18, 2024
@stephl3 stephl3 marked this pull request as ready for review September 18, 2024 19:03
@stephl3 stephl3 requested a review from a team as a code owner September 18, 2024 19:03
@stephl3 stephl3 requested review from TheSonOfThomp and removed request for a team September 18, 2024 19:03
packages/popover/src/Popover.styles.ts Outdated Show resolved Hide resolved
packages/popover/src/Popover.styles.ts Outdated Show resolved Hide resolved
[getTransformStyles(placement, spacing)]:
state === 'exiting' || state === 'entering',
[closedStyles]: state === 'exiting' || state === 'exited',
[openStyles]: state === 'entering' || state === 'entered',
[css`
z-index: ${popoverZIndex};
Copy link
Collaborator

Choose a reason for hiding this comment

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

should z-index have a default?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

no, this won't get applied when the popoverZIndex is undefined which is possible in the case when renderMode="top-layer"

packages/popover/src/Popover.hooks.tsx Outdated Show resolved Hide resolved
packages/popover/src/Popover.hooks.tsx Outdated Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

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

@shaneeza What was the initial reasoning for having PopoverContext live in leafygreen-provider instead of within the popover package?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

fwiw, I did try moving PopoverContext into the popover package while I was consolidating PortalContext and PopoverContext. Since the consolidated PopoverProvider is included in the global LG provider and the @leafygreen-ui/leafygreen-provider, we can't move PopoverContext into popover without introducing a circular dependency

Comment on lines 18 to 29
export const DismissMode = {
Auto: 'auto',
Manual: 'manual',
} as const;
export type DismissMode = (typeof DismissMode)[keyof typeof DismissMode];

/** Local implementation of web-native `ToggleEvent` until we use typescript v5 */
export interface ToggleEvent extends Event {
type: 'toggle';
newState: 'open' | 'closed';
oldState: 'open' | 'closed';
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think these types should all live in the popover package

Copy link
Collaborator

Choose a reason for hiding this comment

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

Why are they duplicated here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I have a comment at the top of the file about this. The types can't be shared/imported because of a circular dependency between @leafygreen-ui/leafygreen-provider and @leafygreen-ui/popover

packages/popover/src/Popover.types.ts Outdated Show resolved Hide resolved
packages/popover/src/Popover.types.ts Outdated Show resolved Hide resolved
export type DismissMode = (typeof DismissMode)[keyof typeof DismissMode];

/** Local implementation of web-native `ToggleEvent` until we use typescript v5 */
export interface ToggleEvent extends Event {
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think this extends Event, does it? (i.e. it doesn't have e.target etc. iirc)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This interface inherits properties from its parent, Event.

source: https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent#instance_properties
took that to mean that it should but can drop if I'm reading that incorrectly

*/
scrollContainer?: null;
};
/** @deprecated - use {@link RenderTopLayerProps} */
Copy link
Collaborator

Choose a reason for hiding this comment

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

Could potentially add more on why we recommend TopLayerProps

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

going to think more on how to best surface this context before merging the integration branch

packages/popover/src/Popover.types.ts Outdated Show resolved Hide resolved
setIsPopoverOpen,
} = usePopoverContext();
...restProps
} = usePopoverContextProps(rest, popoverContext);
Copy link
Collaborator

Choose a reason for hiding this comment

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

does this need to be a hook?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

felt cleaner to abstract this than have to worry about all the separate variables in the main Popover component file

Copy link
Collaborator

@tsck tsck Oct 3, 2024

Choose a reason for hiding this comment

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

I think perhaps this question is more about whether this has to be a hook vs just being a function? It doesn't appear to use any state or call any hooks itself internally.

@@ -190,16 +231,24 @@ export const Popover = forwardRef<HTMLDivElement, PopoverComponentProps>(
)}
Copy link
Collaborator

Choose a reason for hiding this comment

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

do we still need this placeholder?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

yes we still need this for cases where refEl is undefined

Comment on lines 253 to 254
{/* We need to put `setContentNode` ref on this inner wrapper because
placing the ref on the parent will create an infinite loop in some cases
Copy link
Collaborator

Choose a reason for hiding this comment

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

do we need to use setContentNode? Can we use a standard useRef RefObject?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

we explicitly need to use a callback ref. MutableRefObject caused some positioning issues

Comment on lines 137 to +142
<Instance
buttonText={undefined}
className={css`
background-color: ${color.light.background.primary.default};
`}
dismissMode="manual"
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't remember what the answer was last time: does this need to be inside the Button?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We don't take a stance on this. It only needs to nested under the reference element if the refEl prop is left undefined

<Popover
{...rest}
active={active}
renderMode={RenderMode.TopLayer}
Copy link
Collaborator

Choose a reason for hiding this comment

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

technically we should probably open up the renderMode as a control in the LiveExample

Copy link
Collaborator Author

@stephl3 stephl3 Oct 1, 2024

Choose a reason for hiding this comment

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

This in a weird in-between state, so I will leave that off for now until after I've refactored the popover-consuming components. Currently, renderMode="top-layer" is only respected if usePortal={undefined}. After the refactor work, usePortal will no longer be considered and renderMode can be supported as a control

@stephl3 stephl3 mentioned this pull request Oct 2, 2024
3 tasks
@stephl3 stephl3 force-pushed the steph/po-render-mode branch 4 times, most recently from db057de to 7338ed0 Compare October 2, 2024 22:28
Copy link
Collaborator

@tsck tsck left a comment

Choose a reason for hiding this comment

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

I'm seeing some behavior that seems strange with Select in Storybook where the popover is rendering like in the corner of the page. Does this have anything to do with this? https://642700aa3e49e32bdbf0b0fc-qztpposnja.chromatic.com/?path=/story/components-select--live-example

Screenshot 2024-10-03 at 3 14 57 PM

setIsPopoverOpen,
} = usePopoverContext();
...restProps
} = usePopoverContextProps(rest, popoverContext);
Copy link
Collaborator

@tsck tsck Oct 3, 2024

Choose a reason for hiding this comment

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

I think perhaps this question is more about whether this has to be a hook vs just being a function? It doesn't appear to use any state or call any hooks itself internally.

@stephl3 stephl3 force-pushed the steph/po-render-mode branch 5 times, most recently from df9cb86 to 8da3a91 Compare October 4, 2024 19:56
Copy link
Collaborator

@tsck tsck left a comment

Choose a reason for hiding this comment

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

LeLGTM

@stephl3 stephl3 merged commit 6c8a4cd into LG-4121-popover-refactor Oct 4, 2024
11 checks passed
@stephl3 stephl3 deleted the steph/po-render-mode branch October 4, 2024 21:09
stephl3 added a commit that referenced this pull request Oct 10, 2024
* Fix usePortal={false} transition and className order

* Replace usePortal with renderMode and add top layer render mode in Popover

* Replace usePortal with renderMode and add top layer render mode in LG Provider

* Refactor types in Popover-consuming packages

* README

* Address feedback
stephl3 added a commit that referenced this pull request Oct 11, 2024
* Fix usePortal={false} transition and className order

* Replace usePortal with renderMode and add top layer render mode in Popover

* Replace usePortal with renderMode and add top layer render mode in LG Provider

* Refactor types in Popover-consuming packages

* README

* Address feedback
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants