Skip to content

Commit e25be63

Browse files
michaelmkrausmichaelmkraus
authored
feat: enable text of navigation-item to break into multiple lines (#4059)
* feat: enable text of navigation-item to break into multiple lines * feat: add icons to subnavigation-items for showcases * fix: removed <u>l from subnavigation causing incorrect padding at start of the items
1 parent ccc979c commit e25be63

File tree

13 files changed

+200
-39
lines changed

13 files changed

+200
-39
lines changed

‎__snapshots__/navigation-item/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,15 @@
4545
- link "(Default) Auto"
4646
- list:
4747
- listitem:
48-
- link "Full"
48+
- link "Full"
49+
- link "Wrap arrow_up_right\" / \""
50+
- list:
51+
- listitem:
52+
- button "No Wrap (Default) chevron_right\" / \""
53+
- list:
54+
- listitem:
55+
- text: x_placeholder" / "
56+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
57+
- list:
58+
- listitem:
59+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎__snapshots__/navigation-item/showcase/chromium/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,15 @@
4545
- link "(Default) Auto"
4646
- list:
4747
- listitem:
48-
- link "Full"
48+
- link "Full"
49+
- link "Wrap arrow_up_right\" / \""
50+
- list:
51+
- listitem:
52+
- button "No Wrap (Default) chevron_right\" / \""
53+
- list:
54+
- listitem:
55+
- text: x_placeholder" / "
56+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
57+
- list:
58+
- listitem:
59+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎__snapshots__/navigation-item/showcase/firefox/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,14 @@
4444
- link "(Default) Auto"
4545
- list:
4646
- listitem:
47-
- link "Full"
47+
- link "Full"
48+
- link "Wrap arrow_up_right\" / \""
49+
- list:
50+
- listitem:
51+
- button "No Wrap (Default) chevron_right\" / \""
52+
- list:
53+
- listitem:
54+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
55+
- list:
56+
- listitem:
57+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎__snapshots__/navigation-item/showcase/mobile-chrome/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,15 @@
4545
- link "(Default) Auto"
4646
- list:
4747
- listitem:
48-
- link "Full"
48+
- link "Full"
49+
- link "Wrap arrow_up_right\" / \""
50+
- list:
51+
- listitem:
52+
- button "No Wrap (Default) chevron_right\" / \""
53+
- list:
54+
- listitem:
55+
- text: x_placeholder" / "
56+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
57+
- list:
58+
- listitem:
59+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎__snapshots__/navigation-item/showcase/mobile-safari/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,15 @@
4545
- link "(Default) Auto"
4646
- list:
4747
- listitem:
48-
- link "Full"
48+
- link "Full"
49+
- link "Wrap arrow_up_right\" / \""
50+
- list:
51+
- listitem:
52+
- button "No Wrap (Default) chevron_right\" / \""
53+
- list:
54+
- listitem:
55+
- text: x_placeholder" / "
56+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
57+
- list:
58+
- listitem:
59+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎__snapshots__/navigation-item/showcase/webkit/should-have-same-aria-snapshot/DBNavigationItem-should-have-same-aria-snapshot.yaml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,15 @@
4545
- link "(Default) Auto"
4646
- list:
4747
- listitem:
48-
- link "Full"
48+
- link "Full"
49+
- link "Wrap arrow_up_right\" / \""
50+
- list:
51+
- listitem:
52+
- button "No Wrap (Default) chevron_right\" / \""
53+
- list:
54+
- listitem:
55+
- text: x_placeholder" / "
56+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""
57+
- list:
58+
- listitem:
59+
- button "This is a very long text that is broken into multiple lines. chevron_right\" / \""

‎packages/components/src/components/navigation-item/model.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export type DBNavigationItemDefaultProps = {
3535
* This is for mobile navigation only, if it is set the sub-navigation is a static overlay
3636
*/
3737
subNavigationExpanded?: boolean | string;
38+
39+
/**
40+
* Determines whether the text should wrap when its parent container is too small, preventing overflow.
41+
*/
42+
wrap?: boolean | string;
3843
};
3944

4045
export type DBNavigationItemProps = DBNavigationItemDefaultProps &

‎packages/components/src/components/navigation-item/navigation-item.lite.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
116116
data-icon={props.icon}
117117
data-hide-icon={getHideProp(props.showIcon)}
118118
data-active={props.active}
119+
data-wrap={getBooleanAsString(props.wrap)}
119120
aria-disabled={getBooleanAsString(props.disabled)}>
120121
<Show when={!state.hasSubNavigation}>
121122
<Show when={props.text} else={props.children}>

‎packages/components/src/components/navigation-item/navigation-item.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,15 @@
8787
position: relative;
8888
inline-size: auto;
8989

90+
&[data-wrap="true"] {
91+
.db-navigation-item-expand-button {
92+
&:is(button) {
93+
white-space: normal;
94+
text-align: start;
95+
}
96+
}
97+
}
98+
9099
@include screen-sizes.screen("md", "max") {
91100
&:not([data-width="full"]) {
92101
.db-navigation-item-expand-button {

‎showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
[width]="exampleProps?.width"
1818
[disabled]="exampleProps?.disabled"
1919
[active]="exampleProps?.active"
20+
[wrap]="exampleProps?.wrap"
2021
(click)="showAlert(exampleName)"
2122
>
2223
<ng-container *dbNavigationContent>
@@ -30,23 +31,30 @@
3031

3132
@if (exampleProps?.areaPopup) {
3233
<ng-container sub-navigation>
33-
<ul>
34-
<db-navigation-item>
35-
<ng-container *dbNavigationContent>
36-
<a href="#">Test1</a>
37-
</ng-container>
38-
</db-navigation-item>
39-
<db-navigation-item>
40-
<ng-container *dbNavigationContent>
41-
<a href="#">Test2</a>
42-
</ng-container>
43-
</db-navigation-item>
44-
<db-navigation-item>
45-
<ng-container *dbNavigationContent>
46-
<a href="#">Test3</a>
47-
</ng-container>
48-
</db-navigation-item>
49-
</ul>
34+
<db-navigation-item
35+
[icon]="exampleProps?.icon"
36+
[showIcon]="exampleProps?.showIcon"
37+
>
38+
<ng-container *dbNavigationContent>
39+
<a href="#">Test1</a>
40+
</ng-container>
41+
</db-navigation-item>
42+
<db-navigation-item
43+
[icon]="exampleProps?.icon"
44+
[showIcon]="exampleProps?.showIcon"
45+
>
46+
<ng-container *dbNavigationContent>
47+
<a href="#">Test2</a>
48+
</ng-container>
49+
</db-navigation-item>
50+
<db-navigation-item
51+
[icon]="exampleProps?.icon"
52+
[showIcon]="exampleProps?.showIcon"
53+
>
54+
<ng-container *dbNavigationContent>
55+
<a href="#">Test3</a>
56+
</ng-container>
57+
</db-navigation-item>
5058
</ng-container>
5159
}
5260
</db-navigation-item>

0 commit comments

Comments
 (0)