fix(breadcrumb): focus outline only on keyboard focus

adobe · Dec 1, 2023 · 1f72c3e · 1f72c3e
1 parent ec96da6
commit 1f72c3e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/components/breadcrumb/metadata/breadcrumb.yml b/components/breadcrumb/metadata/breadcrumb.yml
@@ -35,7 +35,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb
+  - id: breadcrumb-dragged
     name: Dragged
     status: Verified
     markup: |
@@ -58,7 +58,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb
+  - id: breadcrumb-nested
     name: Nested
     status: Verified
     markup: |
@@ -91,7 +91,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb
+  - id: breadcrumb-nested-root
     name: Nested (root visible)
     status: Verified
     markup: |
@@ -147,7 +147,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb-multiline
+  - id: breadcrumb-multiline-dragged
     name: Multiline (dragged)
     status: Verified
     markup: |
@@ -170,7 +170,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb-multiline
+  - id: breadcrumb-multiline-nested
     name: Multiline Nested
     status: Verified
     markup: |
@@ -203,7 +203,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb-multiline
+  - id: breadcrumb-multiline-nested-root
     name: Multiline Nested (root visible)
     status: Verified
     markup: |
@@ -259,7 +259,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb-compact
+  - id: breadcrumb-compact-nested
     name: Compact Nested
     status: Verified
     markup: |
@@ -292,7 +292,7 @@ examples:
           </li>
         </ul>
       </nav>
-  - id: breadcrumb-compact
+  - id: breadcrumb-compact-nested-root
     name: Compact Nested (root visible)
     status: Verified
     markup: |

diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -18,9 +18,19 @@ export default {
 			options: ["compact", "multiline"],
 			control: "inline-radio",
 		},
+    isDragged: {
+      name: "Dragged",
+      type: { name: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        category: "State",
+      },
+      control: "boolean"
+    },
 	},
 	args: {
 		rootClass: "spectrum-Breadcrumbs",
+		isDragged: false,
 	},
 	parameters: {
 		actions: {
@@ -63,6 +73,7 @@ NestedMultiline.args = {
 		},
 		{
 			label: "Trend",
+			isDragged: true,
 		},
 		{
 			label: "January 2019 Assets",

diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
@@ -2,8 +2,8 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
-import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
 
@@ -12,6 +12,7 @@ export const Template = ({
 	customClasses = [],
 	items = [],
 	variant,
+	isDragged = false,
 	...globals
 }) => {
 	const { express } = globals;
@@ -33,12 +34,12 @@ export const Template = ({
 				})}
 			>
 				${items.map((item, idx, arr) => {
-					const { label, isDisabled, isDragged, iconName } = item;
+					const { label, isDisabled, iconName } = item;
 					return html` <li
 						class=${classMap({
 							[`${rootClass}-item`]: true,
 							"is-disabled": isDisabled,
-							"is-dragged": isDragged,
+							"is-dragged": isDragged && item.isDragged,
 						})}
 					>
 						${when(