update start and end slot for breadcrumb, text-field and tree-item

microsoft · Oct 29, 2020 · 50fba0b · 50fba0b
1 parent 65d2766
commit 50fba0b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -92,7 +92,10 @@ export const BreadcrumbItemStyles = css`
     }
 
     .start,
-    .end,
+    .end {
+        display: flex;
+    }
+
     ::slotted(svg) {
         ${
             /* Glyph size and margin-left is temporary - 

diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts
@@ -77,13 +77,16 @@ export const TextFieldStyles = css`
 
     .start,
     .end {
+        margin: auto;
+        fill: currentcolor;
+    }
+
+    ::slotted(svg) {
         ${
             /* Glyph size and margin-left is temporary - 
             replace when adaptive typography is figured out */ ""
         } width: 16px;
         height: 16px;
-        margin: auto;
-        fill: currentcolor;
     }
 
     .start {

diff --git a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts
@@ -167,14 +167,19 @@ export const TreeItemStyles = css`
         pointer-events: none;
         fill: currentcolor;
     }
+
     .start,
     .end {
+        display: flex;
+        fill: currentcolor;
+    }
+
+     ::slotted(svg) {
         ${
             /* Glyph size is temporary - 
             replace when glyph-size var is added */ ""
         } width: 16px;
         height: 16px;
-        fill: currentcolor;
     }
 
     .start {
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,7 +92,10 @@ export const BreadcrumbItemStyles = css` @@
         }
         .start,
-        .end,
+        .end {
+            display: flex;
+        }
         ::slotted(svg) {
             ${
                 /* Glyph size and margin-left is temporary -
@@ Expand Down @@