You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs(breadcrumb): new controls for nested and improved nested docs
Adds controls so a user is able to display the nested truncated menu,
root context, set disabled items, and item text. This also clears
up and moves around some of the documentation about the truncated menu
and root context.
* Breadcrumbs show hierarchy and navigational context for a user's location within an app.
10
-
*
11
-
* ## Nesting
12
-
* Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon.
13
-
*
14
-
* The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb.
15
-
*
16
-
* ## Root Context
17
-
* Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful.
18
10
*/
19
11
exportdefault{
20
12
title: "Breadcrumbs",
21
13
component: "Breadcrumbs",
22
14
argTypes: {
23
-
items: {table: {disable: true}},
15
+
items: {
16
+
name: "Breadcrumb items",
17
+
description: "Additional breadcrumb items after the nav root item, including their label text.<br>Advanced:<ul><li>To show an item as disabled, add a key named `isDisabled` with a value of `true`.</li><li>The \"Show dragged item\" control will affect the item with `isDragged` set to `true`.</li></ul>",
18
+
control: "array",
19
+
table: {
20
+
category: "Content",
21
+
},
22
+
},
24
23
size: {
25
24
...size(["m","l"]),
26
25
if: {arg: "variant",neq: "multiline"},
@@ -44,7 +43,7 @@ export default {
44
43
},
45
44
isDragged: {
46
45
name: "Show dragged item",
47
-
description: "Breadcrumbs can have optional behavior to allow for drag and drop functionality. Setting this to true will style the second breadcrumb item as if something is currently being dragged on top of it.",
46
+
description: "Breadcrumbs can have optional behavior to allow for drag and drop functionality. Setting this to true will style a breadcrumb item as if something is currently being dragged on top of it.",
48
47
type: {name: "boolean"},
49
48
table: {
50
49
type: {summary: "boolean"},
@@ -73,13 +72,70 @@ export default {
73
72
defaultValue: undefined,
74
73
options: [undefined,"s","m","l","xl"],
75
74
if: {arg: "variant",eq: "multiline"},
76
-
}
75
+
},
76
+
showTruncatedMenu: {
77
+
name: "Show truncated menu",
78
+
description: "Displays a breadcrumb item with a folder icon, that would house truncated breadcrumb items.",
79
+
type: {name: "boolean"},
80
+
table: {
81
+
type: {summary: "boolean"},
82
+
category: "State",
83
+
},
84
+
control: "boolean",
85
+
},
86
+
showRootContext: {
87
+
name: "Show with root context",
88
+
description: "Includes a visible breadcrumb item before the truncated menu, for displaying a root directory.",
89
+
type: {name: "boolean"},
90
+
table: {
91
+
type: {summary: "boolean"},
92
+
category: "State",
93
+
},
94
+
control: "boolean",
95
+
if: {arg: "showTruncatedMenu"},
96
+
},
97
+
truncatedMenuIsDisabled: {
98
+
name: "Show truncated menu as disabled",
99
+
type: {name: "boolean"},
100
+
table: {
101
+
type: {summary: "boolean"},
102
+
category: "State",
103
+
},
104
+
control: "boolean",
105
+
if: {arg: "showTruncatedMenu"},
106
+
},
107
+
rootItemText: {
108
+
name: "Root breadcrumb item label",
109
+
type: {name: "string"},
110
+
defaultValue: "Nav root",
111
+
table: {
112
+
type: {summary: "string"},
113
+
category: "Content",
114
+
},
115
+
control: "text",
116
+
},
77
117
},
78
118
args: {
79
119
rootClass: "spectrum-Breadcrumbs",
80
120
isDragged: false,
81
121
variant: undefined,
82
122
size: "m",
123
+
showTruncatedMenu: false,
124
+
showRootContext: false,
125
+
truncatedMenuIsDisabled: false,
126
+
rootItemText: "Nav root",
127
+
items: [
128
+
{
129
+
label: "Sub item",
130
+
isDragged: true,
131
+
},
132
+
{
133
+
label: "Trend",
134
+
},
135
+
{
136
+
label: "January 2019 assets",
137
+
},
138
+
],
83
139
},
84
140
parameters: {
85
141
design: {
@@ -97,31 +153,17 @@ export default {
97
153
* The separator UI icon displayed should be `Chevron100`.
98
154
*/
99
155
exportconstDefault=BreadcrumbGroup.bind({});
100
-
Default.args={
101
-
items: [
102
-
{
103
-
label: "Nav root",
104
-
},
105
-
{
106
-
label: "Trend",
107
-
isDragged: true,
108
-
},
109
-
{
110
-
label: "January 2019 assets",
111
-
},
112
-
],
113
-
};
156
+
Default.args={};
114
157
158
+
/**
159
+
* Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. This truncated menu is an icon only action button that typically displays a folder icon.
160
+
*
161
+
* The nested variants below are non-functional. Implementations should make sure to follow the design guidelines for overflow behavior and displaying all options within the truncated menu.
* Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are
183
+
* truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory
DefaultNestedRootVisible.storyName="Default, nested with root context";
162
204
163
205
/**
164
206
* The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location.
0 commit comments