fix (web components): start end fixed width height (#16359)

* update start and end to remove fixed width and height * Change files Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
microsoft · Jan 5, 2021 · da37d8e · da37d8e
1 parent 887a5e9
commit da37d8e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/...i-web-components-2021-01-04-11-34-11-users-v-sedono-fix-start-end-fixed-width-height.json b/...i-web-components-2021-01-04-11-34-11-users-v-sedono-fix-start-end-fixed-width-height.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "update start and end to remove fixed width and height",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2021-01-04T19:34:11.159Z"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -15,7 +15,7 @@ export const MenuItemStyles = css`
         outline: none;
         box-sizing: border-box;
         height: calc(${heightNumber} * 1px);
-        grid-template-columns: 42px auto 42px;
+        grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);
         grid-template-rows: auto;
         justify-items: center;
         align-items: center;
@@ -72,6 +72,7 @@ export const MenuItemStyles = css`
             replace when adaptive typography is figured out */ ''
         } width: 16px;
         height: 16px;
+        display: flex;
     }
 
     :host(:hover) .start,

diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -95,7 +95,10 @@ export const BaseButtonStyles: ElementStyles = css`
     }
 
     .start,
-    .end,
+    .end {
+        display: flex;
+    }
+
     ::slotted(svg) {
         ${
           /* Glyph size and margin-left is temporary -
@@ -260,6 +263,7 @@ export const HypertextStyles = css`
         font-size: inherit;
         line-height: inherit;
         background: transparent;
+        min-width: 0;
     }
 
     :host(.hypertext) .control {

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

diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -147,10 +147,14 @@ export const TreeItemStyles = css`
     }
     .start,
     .end {
+        display: flex;
+        fill: currentcolor;
+    }
+
+     ::slotted(svg) {
         ${/* Glyph size is temporary -
             replace when glyph-size var is added */ ''} width: 16px;
         height: 16px;
-        fill: ${neutralForegroundRestBehavior.var};
     }
 
     .start {