fix: update style on aria-current item and adjust margin on last item (…

…#16238) * update style on aria-current item and adjust margin on last item * Change files
microsoft · Dec 16, 2020 · de2be83 · de2be83
1 parent d512cd6
commit de2be83
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-2020-12-15-15-09-46-users-khamu-breadcrumb-aria-current.json b/change/@fluentui-web-components-2020-12-15-15-09-46-users-khamu-breadcrumb-aria-current.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "update style on aria-current item and adjust margin on last item",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-12-15T23:09:46.906Z"
+}
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -74,14 +74,18 @@ export const BreadcrumbItemStyles = css`
         height: calc(var(--focus-outline-width) * 1px);
     }
 
-    :host(:not([href])) {
+    :host(:not([href])),
+    :host([aria-current]) .control  {
         font-weight: 600;
         color: ${neutralForegroundRestBehavior.var};
         fill: currentcolor;
-        margin-inline-start: 11px;
         cursor: default;
     }
 
+    :host([aria-current]) .control:hover .content::before {
+      background: ${neutralForegroundRestBehavior.var};
+  }
+
     .start {
         display: flex;
         margin-inline-end: 6px;