Skip to content

Implement docked variant for Drawer#696

Open
philippjfr wants to merge 1 commit into
mainfrom
docked_drawer
Open

Implement docked variant for Drawer#696
philippjfr wants to merge 1 commit into
mainfrom
docked_drawer

Conversation

@philippjfr

Copy link
Copy Markdown
Contributor
  • Adds a new variant="docked" option to Drawer that renders a small toggle tab on the anchored edge, allowing users to open/close the drawer without a separate button
  • Adds dock_position parameter ("start", "middle", "end") to control placement of the toggle tab along the drawer edge
  • Updates the reference documentation with the new variant and parameter

Details

The docked variant uses a persistent MUI Drawer under the hood but wraps it in fixed positioning with a DockedTab component. When the drawer is closed, only the tab is visible flush against the viewport
edge. When open, the tab attaches to the drawer's outer border (offset by 1px to avoid overlapping the border line) and switches its chevron direction to indicate it will close.

The dock_position parameter allows positioning the tab at the start, middle (default), or end of the drawer edge, accommodating different layout needs (e.g. placing it near a header or footer).

Screenshot 2026-07-02 at 16 08 33 Screenshot 2026-07-02 at 16 08 43

@codecov

codecov Bot commented Jul 2, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.06%. Comparing base (85ab0a4) to head (74ef2d8).

Additional details and impacted files
@@             Coverage Diff             @@
##             main     #696       +/-   ##
===========================================
+ Coverage   71.24%   85.06%   +13.81%     
===========================================
  Files          33       33               
  Lines        3822     3823        +1     
===========================================
+ Hits         2723     3252      +529     
+ Misses       1099      571      -528     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

1 participant