Skip to content

feat: enable text of navigation-item to break into multiple lines #4059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 15, 2025
Merged

feat: enable text of navigation-item to break into multiple lines #4059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ade848
feat: enable text of navigation-item to break into multiple lines
michaelmkraus Apr 15, 2025
bfa051b
test: updated snapshots
michaelmkraus Apr 15, 2025
debb52f
Merge remote-tracking branch 'origin/main' into feat-navigation-item-…
michaelmkraus Apr 15, 2025
48af3a2
feat: add icons to subnavigation-items for showcases
michaelmkraus Apr 15, 2025
b2998be
fix: removed ul from subnavigation causing incorrect padding at start…
michaelmkraus Apr 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion ...trast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,15 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- text: x_placeholder" / "
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
13 changes: 12 additions & 1 deletion ...omium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,15 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- text: x_placeholder" / "
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
12 changes: 11 additions & 1 deletion ...refox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,14 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
13 changes: 12 additions & 1 deletion ...hrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,15 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- text: x_placeholder" / "
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
13 changes: 12 additions & 1 deletion ...afari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,15 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- text: x_placeholder" / "
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
13 changes: 12 additions & 1 deletion ...ebkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,15 @@
- link "(Default) Auto"
- list:
- listitem:
- link "Full"
- link "Full"
- link "Wrap arrow_up_right\" / \""
- list:
- listitem:
- button "No Wrap (Default) chevron_right\" / \""
- list:
- listitem:
- text: x_placeholder" / "
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
- list:
- listitem:
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
5 changes: 5 additions & 0 deletions packages/components/src/components/navigation-item/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ export type DBNavigationItemDefaultProps = {
* This is for mobile navigation only, if it is set the sub-navigation is a static overlay
*/
subNavigationExpanded?: boolean | string;

/**
* Determines whether the text should wrap when its parent container is too small, preventing overflow.
*/
wrap?: boolean | string;
};

export type DBNavigationItemProps = DBNavigationItemDefaultProps &
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/navigation-item/navigation-item.lite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
data-icon={props.icon}
data-hide-icon={getHideProp(props.showIcon)}
data-active={props.active}
data-wrap={getBooleanAsString(props.wrap)}
aria-disabled={getBooleanAsString(props.disabled)}>
<Show when={!state.hasSubNavigation}>
<Show when={props.text} else={props.children}>
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/components/navigation-item/navigation-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,15 @@
position: relative;
inline-size: auto;

&[data-wrap="true"] {
.db-navigation-item-expand-button {
&:is(button) {
white-space: normal;
text-align: start;
}
}
}

@include screen-sizes.screen("md", "max") {
&:not([data-width="full"]) {
.db-navigation-item-expand-button {
Expand Down
42 changes: 25 additions & 17 deletions showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
[width]="exampleProps?.width"
[disabled]="exampleProps?.disabled"
[active]="exampleProps?.active"
[wrap]="exampleProps?.wrap"
(click)="showAlert(exampleName)"
>
<ng-container *dbNavigationContent>
Expand All @@ -30,23 +31,30 @@

@if (exampleProps?.areaPopup) {
<ng-container sub-navigation>
<ul>
<db-navigation-item>
<ng-container *dbNavigationContent>
<a href="#">Test1</a>
</ng-container>
</db-navigation-item>
<db-navigation-item>
<ng-container *dbNavigationContent>
<a href="#">Test2</a>
</ng-container>
</db-navigation-item>
<db-navigation-item>
<ng-container *dbNavigationContent>
<a href="#">Test3</a>
</ng-container>
</db-navigation-item>
</ul>
<db-navigation-item
[icon]="exampleProps?.icon"
[showIcon]="exampleProps?.showIcon"
>
<ng-container *dbNavigationContent>
<a href="#">Test1</a>
</ng-container>
</db-navigation-item>
<db-navigation-item
[icon]="exampleProps?.icon"
[showIcon]="exampleProps?.showIcon"
>
<ng-container *dbNavigationContent>
<a href="#">Test2</a>
</ng-container>
</db-navigation-item>
<db-navigation-item
[icon]="exampleProps?.icon"
[showIcon]="exampleProps?.showIcon"
>
<ng-container *dbNavigationContent>
<a href="#">Test3</a>
</ng-container>
</db-navigation-item>
</ng-container>
}
</db-navigation-item>
Expand Down
12 changes: 7 additions & 5 deletions showcases/react-showcase/src/components/navigation-item/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ const getNavigationItem = ({
active,
width,
areaPopup,
showIcon
showIcon,
wrap
}: DBNavigationItemProps & { areaPopup: boolean }) => (
<ul className="nav-item-list">
<DBNavigationItem
Expand All @@ -25,16 +26,17 @@ const getNavigationItem = ({
alert(children.toString());
}}
showIcon={showIcon}
wrap={wrap}
subNavigation={
areaPopup && (
<ul>
<DBNavigationItem>
<>
<DBNavigationItem icon={icon} showIcon={showIcon}>
<a href="#">Test1</a>
</DBNavigationItem>
<DBNavigationItem>
<DBNavigationItem icon={icon} showIcon={showIcon}>
<a href="#">Test2</a>
</DBNavigationItem>
</ul>
</>
)
}>
{areaPopup ? children : <a href="#">{children}</a>}
Expand Down
66 changes: 66 additions & 0 deletions showcases/shared/navigation-item.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,5 +234,71 @@
]
}
]
},
{
"name": "Wrap",
"examples": [
{
"name": "No Wrap (Default)",
"props": {
"areaPopup": true
},
"children": [
{
"name": "a",
"native": true,
"props": {
"href": "#"
},
"content": "True"
}
]
},
{
"name": "This is a very long text that is broken into multiple lines.",
"props": {
"areaPopup": true,
"icon": "x_placeholder",
"showIcon": true,
"wrap": true
},
"style": {
"width": "200px"
},
"children": [
{
"name": "a",
"native": true,
"props": {
"href": "#",
"icon": "x_placeholder",
"showIcon": true
},
"content": "True"
}
]
},
{
"name": "This is a very long text that is broken into multiple lines.",
"props": {
"areaPopup": true,
"wrap": true
},
"style": {
"width": "200px"
},
"slot": "sub-navigation",
"children": [
{
"name": "a",
"native": true,
"props": {
"href": "#"
},
"content": "True"
}
]
}
]
}
]
27 changes: 16 additions & 11 deletions showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,25 @@ const log = (exampleName?: string) => {
:disabled="exampleProps?.disabled"
:active="exampleProps?.active"
:areaPopup="exampleProps?.areaPopup"
:wrap="exampleProps?.wrap"
@click="log(exampleName)"
>
<template v-if="exampleProps?.areaPopup" #sub-navigation>
<ul>
<DBNavigationItem
><a href="#">Test1</a></DBNavigationItem
>
<DBNavigationItem
><a href="#">Test2</a></DBNavigationItem
>
<DBNavigationItem
><a href="#">Test3</a></DBNavigationItem
>
</ul>
<DBNavigationItem
:icon="exampleProps?.icon"
:showIcon="exampleProps?.showIcon"
><a href="#">Test1</a></DBNavigationItem
>
<DBNavigationItem
:icon="exampleProps?.icon"
:showIcon="exampleProps?.showIcon"
><a href="#">Test2</a></DBNavigationItem
>
<DBNavigationItem
:icon="exampleProps?.icon"
:showIcon="exampleProps?.showIcon"
><a href="#">Test3</a></DBNavigationItem
>
</template>
<template v-if="exampleProps?.areaPopup">
{{ exampleName }}
Expand Down
Loading