Skip to content

feat: add Drawer component#1032

Merged
bert-e merged 1 commit intodevelopment/1.0from
feature/CUI-10-drawer
Mar 17, 2026
Merged

feat: add Drawer component#1032
bert-e merged 1 commit intodevelopment/1.0from
feature/CUI-10-drawer

Conversation

@hervedombya
Copy link
Copy Markdown
Contributor

@hervedombya hervedombya commented Mar 16, 2026

Summary

  • Adds a Drawer component: a slide-in panel that can open from any edge (left/right/top/bottom)
  • Supports optional overlay backdrop, configurable size, footer slot, and Escape key to close
  • Renders via portal (same pattern as Modal) with dedicated drawer zIndex (8200, between overlay and modal)

Context

Needed by the Data Browser theme customization feature (DBR-4) as the container for the branding editor panel.

Ref: https://scality.atlassian.net/browse/CUI-10

@bert-e
Copy link
Copy Markdown
Contributor

bert-e commented Mar 16, 2026

Hello hervedombya,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e
Copy link
Copy Markdown
Contributor

bert-e commented Mar 16, 2026

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@hervedombya hervedombya force-pushed the feature/CUI-10-drawer branch 3 times, most recently from 1e2eccf to 8d8cd33 Compare March 16, 2026 14:35
Copy link
Copy Markdown
Contributor

@Cuervino Cuervino left a comment

Choose a reason for hiding this comment

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

  1. I'm not sure about what bgColor, I would do the same as a Modal or a page for the title / content / footer.
  2. Save button should be larger, maybe it's a button min-width.
  3. Maybe a border on the side?
  4. I like the shadow effect.

@hervedombya hervedombya force-pushed the feature/CUI-10-drawer branch 2 times, most recently from bfa95e0 to e3dae08 Compare March 16, 2026 15:03
Copy link
Copy Markdown
Contributor

@JeanMarcMilletScality JeanMarcMilletScality left a comment

Choose a reason for hiding this comment

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

I found an issue with the close button. It is still focusable while the drawer is closed (using keyboard) 👇
Image

@hervedombya
Copy link
Copy Markdown
Contributor Author

  1. I'm not sure about what bgColor, I would do the same as a Modal or a page for the title / content / footer.
  2. Save button should be larger, maybe it's a button min-width.
  3. Maybe a border on the side?
  4. I like the shadow effect.
  1. Align background colors with Modal: header=backgroundLevel3, body=backgroundLevel4, footer=backgroundLevel3
  2. Added minWidth for storybook stories
  3. Added 1px solid border on the side facing the content
  4. 👍

@hervedombya hervedombya force-pushed the feature/CUI-10-drawer branch 4 times, most recently from 7ff9d04 to 2282c54 Compare March 16, 2026 15:37
@hervedombya hervedombya force-pushed the feature/CUI-10-drawer branch from 2282c54 to 24d378c Compare March 16, 2026 15:44
@bert-e
Copy link
Copy Markdown
Contributor

bert-e commented Mar 17, 2026

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

@hervedombya
Copy link
Copy Markdown
Contributor Author

/approve

@bert-e
Copy link
Copy Markdown
Contributor

bert-e commented Mar 17, 2026

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue CUI-10.

Goodbye hervedombya.

The following options are set: approve

@bert-e bert-e merged commit 24d378c into development/1.0 Mar 17, 2026
4 checks passed
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.

4 participants