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

+12-1
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

+12-1
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

+11-1
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

+12-1
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

+12-1
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

+12-1
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

+5
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

+1
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

+9
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

+25-17
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>

‎showcases/react-showcase/src/components/navigation-item/index.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ const getNavigationItem = ({
1212
active,
1313
width,
1414
areaPopup,
15-
showIcon
15+
showIcon,
16+
wrap
1617
}: DBNavigationItemProps & { areaPopup: boolean }) => (
1718
<ul className="nav-item-list">
1819
<DBNavigationItem
@@ -25,16 +26,17 @@ const getNavigationItem = ({
2526
alert(children.toString());
2627
}}
2728
showIcon={showIcon}
29+
wrap={wrap}
2830
subNavigation={
2931
areaPopup && (
30-
<ul>
31-
<DBNavigationItem>
32+
<>
33+
<DBNavigationItem icon={icon} showIcon={showIcon}>
3234
<a href="#">Test1</a>
3335
</DBNavigationItem>
34-
<DBNavigationItem>
36+
<DBNavigationItem icon={icon} showIcon={showIcon}>
3537
<a href="#">Test2</a>
3638
</DBNavigationItem>
37-
</ul>
39+
</>
3840
)
3941
}>
4042
{areaPopup ? children : <a href="#">{children}</a>}

‎showcases/shared/navigation-item.json

+66
Original file line numberDiff line numberDiff line change
@@ -234,5 +234,71 @@
234234
]
235235
}
236236
]
237+
},
238+
{
239+
"name": "Wrap",
240+
"examples": [
241+
{
242+
"name": "No Wrap (Default)",
243+
"props": {
244+
"areaPopup": true
245+
},
246+
"children": [
247+
{
248+
"name": "a",
249+
"native": true,
250+
"props": {
251+
"href": "#"
252+
},
253+
"content": "True"
254+
}
255+
]
256+
},
257+
{
258+
"name": "This is a very long text that is broken into multiple lines.",
259+
"props": {
260+
"areaPopup": true,
261+
"icon": "x_placeholder",
262+
"showIcon": true,
263+
"wrap": true
264+
},
265+
"style": {
266+
"width": "200px"
267+
},
268+
"children": [
269+
{
270+
"name": "a",
271+
"native": true,
272+
"props": {
273+
"href": "#",
274+
"icon": "x_placeholder",
275+
"showIcon": true
276+
},
277+
"content": "True"
278+
}
279+
]
280+
},
281+
{
282+
"name": "This is a very long text that is broken into multiple lines.",
283+
"props": {
284+
"areaPopup": true,
285+
"wrap": true
286+
},
287+
"style": {
288+
"width": "200px"
289+
},
290+
"slot": "sub-navigation",
291+
"children": [
292+
{
293+
"name": "a",
294+
"native": true,
295+
"props": {
296+
"href": "#"
297+
},
298+
"content": "True"
299+
}
300+
]
301+
}
302+
]
237303
}
238304
]

‎showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue

+16-11
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,25 @@ const log = (exampleName?: string) => {
2525
:disabled="exampleProps?.disabled"
2626
:active="exampleProps?.active"
2727
:areaPopup="exampleProps?.areaPopup"
28+
:wrap="exampleProps?.wrap"
2829
@click="log(exampleName)"
2930
>
3031
<template v-if="exampleProps?.areaPopup" #sub-navigation>
31-
<ul>
32-
<DBNavigationItem
33-
><a href="#">Test1</a></DBNavigationItem
34-
>
35-
<DBNavigationItem
36-
><a href="#">Test2</a></DBNavigationItem
37-
>
38-
<DBNavigationItem
39-
><a href="#">Test3</a></DBNavigationItem
40-
>
41-
</ul>
32+
<DBNavigationItem
33+
:icon="exampleProps?.icon"
34+
:showIcon="exampleProps?.showIcon"
35+
><a href="#">Test1</a></DBNavigationItem
36+
>
37+
<DBNavigationItem
38+
:icon="exampleProps?.icon"
39+
:showIcon="exampleProps?.showIcon"
40+
><a href="#">Test2</a></DBNavigationItem
41+
>
42+
<DBNavigationItem
43+
:icon="exampleProps?.icon"
44+
:showIcon="exampleProps?.showIcon"
45+
><a href="#">Test3</a></DBNavigationItem
46+
>
4247
</template>
4348
<template v-if="exampleProps?.areaPopup">
4449
{{ exampleName }}

0 commit comments

Comments
 (0)