fix: add margin to space separator and content (#16575)

* set margin on separator slot * Change files
microsoft · Jan 25, 2021 · 493869f · 493869f
1 parent d0f24b8
commit 493869f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-2021-01-21-11-16-12-users-khamu-breadcrumb-separator.json b/change/@fluentui-web-components-2021-01-21-11-16-12-users-khamu-breadcrumb-separator.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "set margin on separator slot",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-21T19:16:11.984Z"
+}
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -99,6 +99,7 @@ export const BreadcrumbItemStyles = css`
     .separator {
       display: flex;
       fill: ${neutralForegroundRestBehavior.var};
+      margin: 0 6px;
     }
 `.withBehaviors(
   accentForegroundActiveBehavior,

diff --git a/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html b/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html
@@ -2,6 +2,11 @@
   <h1>Breadcrumbs</h1>
 
   <h4>Default</h4>
+  <fluent-breadcrumb-item href="#">
+    Breadcrumb item
+  </fluent-breadcrumb-item>
+
+  <h4>Default with custom separator</h4>
   <fluent-breadcrumb-item href="#">
     Breadcrumb item
     <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">

diff --git a/packages/web-components/src/breadcrumb/fixtures/breadcrumb.html b/packages/web-components/src/breadcrumb/fixtures/breadcrumb.html
@@ -1,6 +1,17 @@
 <fluent-design-system-provider use-defaults>
   <h1>Breadcrumb</h1>
   <h4>Default</h4>
+  <fluent-breadcrumb>
+    <fluent-breadcrumb-item href="#">
+      Breadcrumb item 1
+    </fluent-breadcrumb-item>
+    <fluent-breadcrumb-item href="#">
+      Breadcrumb item 2
+    </fluent-breadcrumb-item>
+    <fluent-breadcrumb-item>Breadcrumb item 3</fluent-breadcrumb-item>
+  </fluent-breadcrumb>
+
+  <h4>Default with custom separator</h4>
   <fluent-breadcrumb>
     <fluent-breadcrumb-item href="#">
       Breadcrumb item 1