[LG-5523] feat(drawer): add ref and tooltipEnabled props to DrawerLayout toolbarData for ToolbarIconButton integration #3142
+548
−55
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 34f9348 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
stephl3
force-pushed
the
steph/dr-toolbar-item-ref
branch
from
ce27183 to
3a4a23a
Compare
|
Size Change: +81 B (+0.01%) Total Size: 1.55 MB
ℹ️ View Unchanged
|
…mizable tooltip behavior
… props for ToolbarIconButton integration
stephl3
force-pushed
the
steph/dr-toolbar-item-ref
branch
from
3a4a23a to
34f9348
Compare
stephl3
changed the title
stephl3
requested review from
Copilot and
TheSonOfThomp
and removed request for
a team
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the DrawerLayout component's toolbarData prop to support ref and tooltipEnabled properties for better integration with ToolbarIconButton components. These additions enable developers to attach refs to toolbar buttons for positioning overlays like GuideCue and control tooltip behavior to prevent conflicts with other overlays.
Key changes:
- Added
tooltipEnabledprop toToolbarIconButtonfor controlling tooltip visibility - Extended
toolbarDatainterface to includerefandtooltipEnabledproperties - Enhanced component integration by passing these new props through the drawer layout system
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/toolbar/src/ToolbarIconButton/ToolbarIconButton.types.ts | Added tooltipEnabled prop definition |
| packages/toolbar/src/ToolbarIconButton/ToolbarIconButton.tsx | Implemented tooltipEnabled prop functionality |
| packages/toolbar/src/ToolbarIconButton/ToolbarIconButton.spec.tsx | Added tests for tooltip enabling/disabling behavior |
| packages/toolbar/README.md | Updated documentation for tooltipEnabled prop |
| packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayout.types.ts | Extended interface to include ref and tooltipEnabled properties |
| packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayoutContent.tsx | Added prop forwarding for new properties |
| packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayout.stories.tsx | Added comprehensive story demonstrating GuideCue integration |
| packages/drawer/src/DrawerToolbarLayout/DrawerToolbarLayout/DrawerToolbarLayout.spec.tsx | Added test for ref functionality |
| packages/drawer/README.md | Updated documentation for new toolbarData properties |
| packages/drawer/package.json | Added guide-cue as dev dependency for stories |
| packages/drawer/tsconfig.json | Added guide-cue to TypeScript references |
| .changeset/rich-dancers-change.md | Changeset for drawer package |
| .changeset/bright-doodles-post.md | Changeset for toolbar package |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| ); | ||
|
|
||
| const button = getByRole('button'); | ||
| userEvent.hover(button); |
There was a problem hiding this comment.
The userEvent.hover call should be awaited since it returns a Promise in modern versions of @testing-library/user-event.
Copilot uses AI. Check for mistakes.
| ); | ||
|
|
||
| const button = getByRole('button'); | ||
| userEvent.hover(button); |
There was a problem hiding this comment.
The userEvent.hover call should be awaited since it returns a Promise in modern versions of @testing-library/user-event.
Copilot uses AI. Check for mistakes.
stephl3
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
This PR enhances the
DrawerLayoutcomponent'stoolbarDataprop to supportrefandtooltipEnabledproperties for better integration withToolbarIconButtoncomponents. The changes enable developers to attach refs to toolbar buttons (useful for positioning overlays likeGuideCue) and control tooltip behavior to prevent conflicts with other overlays.The implementation includes:
refprop totoolbarDatafor passing refs toToolbarIconButtoninstancestooltipEnabledprop to control tooltip visibility on toolbar buttonsToolbarIconButtoncomponent withtooltipEnabledprop support🎟️ Jira ticket: LG-5523
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
Test ref functionality:
DrawerLayoutand create a ref usinguseRef<HTMLButtonElement>(null)toolbarDataarray for any toolbar itemToolbarIconButtonTest tooltipEnabled functionality:
tooltipEnabled: falseon a toolbar item intoolbarDatatooltipEnabled: true(or omit the prop) and verify tooltip shows on hoverTest GuideCue integration (as shown in the new story):