Skip to content

feat(Drawer): add close and closeIcon props - #243

Merged
IgorShevchik merged 1 commit into
mainfrom
sync/nuxt-53e88a4
Jul 10, 2026
Merged

feat(Drawer): add close and closeIcon props#243
IgorShevchik merged 1 commit into
mainfrom
sync/nuxt-53e88a4

Conversation

@IgorShevchik

Copy link
Copy Markdown
Collaborator

Upstream

53e88a4feat(Drawer): add close and closeIcon props (#6669)

Adds a built-in close button to Drawer, mirroring Modal.

Change — adapted from b24ui's own Modal

b24ui already ships this pattern on Modal, so the port mirrors b24ui's Modal rather than upstream's icon/color choices:

  • Drawer.vue: close (boolean | Omit<ButtonProps, LinkPropsKeys>) and closeIcon (IconComponent — b24ui has no Icon.vue, so not upstream's IconProps['name']) props; actions/close slots; header restructured into wrapper (title + description) and actions (ms-auto, DrawerCloseB24Button size="md" color="air-tertiary-no-accent" :aria-label="t('drawer.close')"). b24ui's separate VisuallyHidden a11y title/description block is untouched, so wrapping the display title/description is a11y-safe.
  • theme/drawer.ts: header flex classes + new wrapper/actions/close slots.
  • i18n: drawer: { close } added to types/locale.ts and all 20 locales, each set to that locale's existing modal.close value (Close/Schließen/閉じる/Закрыть…) — no invented translations, curated set preserved.

Tests

New renderEach cases with close / with closeIcon (Cross30Icon) / with actions slot / with close slot (mirror Modal.spec). Snapshots: 8 written + 30 updated (existing title/description cases now nest under data-slot="wrapper"). Suite 5155 passed (+8).

Verify (CI=true)

dev:prepare · lint · typecheck (all 20 locales satisfy drawer.close) · test · build — all green.

Ledger

🤖 Generated with Claude Code


Generated by Claude Code

Port of upstream nuxt/ui 53e88a4 (#6669).

Adds a built-in close button to Drawer (mirroring b24ui's Modal): `close`
(boolean | Omit<ButtonProps, LinkPropsKeys>) and `closeIcon` (IconComponent)
props, plus `actions` and `close` slots. The header is restructured into a
`wrapper` (title + description) and an `actions` container (`ms-auto`) holding
the close button; theme gains `wrapper`/`actions`/`close` slots + header flex
classes.

Adds the `drawer.close` i18n message to the Messages type and all 20 locales
(each set to that locale's existing `modal.close` value). New renderEach cases
for close/closeIcon/actions/close-slot; snapshots regenerated (8 new + 30
updated for the wrapper restructure).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JS8ypVfQSFzYVZzkTHhURb
@IgorShevchik
IgorShevchik merged commit 7cb7f64 into main Jul 10, 2026
1 check passed
@IgorShevchik
IgorShevchik deleted the sync/nuxt-53e88a4 branch July 10, 2026 08:45
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.

2 participants