From c61ffb98dcd5347c4fae989209af9374dbb5c10d Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Fri, 31 Oct 2025 07:43:16 +0100 Subject: [PATCH 1/3] feat(DBHeader): introduce new property `closeDrawerLabel` This label allows to set the label for the close button when the `DBDrawer` is opened. It passes the prop value to the inner `DBDrawer` prop `closeButtonText`. --- packages/components/src/components/header/header.lite.tsx | 1 + packages/components/src/components/header/model.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx index 8e3872c1abb2..de04c37ca1c2 100644 --- a/packages/components/src/components/header/header.lite.tsx +++ b/packages/components/src/components/header/header.lite.tsx @@ -71,6 +71,7 @@ export default function DBHeader(props: DBHeaderProps) { class="db-header-drawer" rounded spacing="small" + closeButtonText={props.closeDrawerLabel} open={getBoolean(props.drawerOpen)} onClose={() => state.handleToggle()}>
diff --git a/packages/components/src/components/header/model.ts b/packages/components/src/components/header/model.ts index 68c00a9d4ee6..087198915fec 100644 --- a/packages/components/src/components/header/model.ts +++ b/packages/components/src/components/header/model.ts @@ -37,6 +37,12 @@ export type DBHeaderDefaultProps = { */ drawerOpen?: boolean | string; + /** + * This attribute sets the label for the close button in the drawer + * which is shown after the burger menu opened. + */ + closeDrawerLabel?: string; + /** * Forces the header to use mobile layout for desktop as well. * You should only use this setting if you really can't provide a smaller navigation. From fe46a2663579f42c13fa6571865f01c37cf8ada7 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Fri, 31 Oct 2025 07:44:44 +0100 Subject: [PATCH 2/3] docs: add changeset --- .changeset/cold-cycles-decide.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/cold-cycles-decide.md diff --git a/.changeset/cold-cycles-decide.md b/.changeset/cold-cycles-decide.md new file mode 100644 index 000000000000..053e26ba5413 --- /dev/null +++ b/.changeset/cold-cycles-decide.md @@ -0,0 +1,11 @@ +--- +"@db-ux/core-components": minor +"@db-ux/ngx-core-components": minor +"@db-ux/react-core-components": minor +"@db-ux/wc-core-components": minor +"@db-ux/v-core-components": minor +--- + +feat(DBHeader): introduce new property `closeDrawerLabel` +This label allows to set the label for the close button when the `DBDrawer` is opened. +It passes the prop value to the inner `DBDrawer` prop `closeButtonText`. From 303d2e1521ba8dced1a40eb30d5266d402f9acc1 Mon Sep 17 00:00:00 2001 From: Danny Koppenhagen Date: Fri, 31 Oct 2025 10:17:25 +0100 Subject: [PATCH 3/3] refactor: use InnerCloseButtonProps and passthrough to DBDrawer --- .changeset/cold-cycles-decide.md | 4 +--- packages/components/src/components/header/header.lite.tsx | 3 ++- packages/components/src/components/header/model.ts | 8 ++------ 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/.changeset/cold-cycles-decide.md b/.changeset/cold-cycles-decide.md index 053e26ba5413..49b501819a23 100644 --- a/.changeset/cold-cycles-decide.md +++ b/.changeset/cold-cycles-decide.md @@ -6,6 +6,4 @@ "@db-ux/v-core-components": minor --- -feat(DBHeader): introduce new property `closeDrawerLabel` -This label allows to set the label for the close button when the `DBDrawer` is opened. -It passes the prop value to the inner `DBDrawer` prop `closeButtonText`. +feat(DBHeader): Passthrough property `closeButtonText` for the close button within the inner `DBDrawer`. diff --git a/packages/components/src/components/header/header.lite.tsx b/packages/components/src/components/header/header.lite.tsx index de04c37ca1c2..6a5f713d9cfe 100644 --- a/packages/components/src/components/header/header.lite.tsx +++ b/packages/components/src/components/header/header.lite.tsx @@ -71,7 +71,8 @@ export default function DBHeader(props: DBHeaderProps) { class="db-header-drawer" rounded spacing="small" - closeButtonText={props.closeDrawerLabel} + closeButtonId={props.closeButtonId} + closeButtonText={props.closeButtonText} open={getBoolean(props.drawerOpen)} onClose={() => state.handleToggle()}>
diff --git a/packages/components/src/components/header/model.ts b/packages/components/src/components/header/model.ts index 087198915fec..668de8316fad 100644 --- a/packages/components/src/components/header/model.ts +++ b/packages/components/src/components/header/model.ts @@ -3,6 +3,7 @@ import { GlobalProps, GlobalState, InitializedState, + InnerCloseButtonProps, NavigationBehaviorState, ToggleEventProps, ToggleEventState @@ -37,12 +38,6 @@ export type DBHeaderDefaultProps = { */ drawerOpen?: boolean | string; - /** - * This attribute sets the label for the close button in the drawer - * which is shown after the burger menu opened. - */ - closeDrawerLabel?: string; - /** * Forces the header to use mobile layout for desktop as well. * You should only use this setting if you really can't provide a smaller navigation. @@ -57,6 +52,7 @@ export type DBHeaderDefaultProps = { }; export type DBHeaderProps = DBHeaderDefaultProps & + InnerCloseButtonProps & GlobalProps & ToggleEventProps & ContainerWidthProps;