add a class to button in shadow DOM when default slotted content is o…

…nly an svg icon
microsoft · Dec 2, 2020 · 17423cd · 17423cd
1 parent 5e967ca
commit 17423cd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -94,8 +94,8 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-components-styles-msft": "^4.29.0",
-    "@microsoft/fast-element": "^0.20.0",
-    "@microsoft/fast-foundation": "^1.9.0",
+    "@microsoft/fast-element": "^0.21.0",
+    "@microsoft/fast-foundation": "^1.10.0",
     "tslib": "^1.13.0"
   },
   "beachball": {

diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
@@ -55,6 +55,22 @@ export class FluentButton extends Button {
       this.appearance = 'neutral';
     }
   }
+
+  /**
+   * Applies 'icon-only' class when there is only an SVG in the default slot
+   *
+   * @public
+   * @remarks
+   */
+  public defaultSlottedContentChanged(): void {
+    const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
+
+    if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
+      this.root.classList.add('icon-only');
+    } else {
+      this.root.classList.remove('icon-only');
+    }
+  }
 }
 
 /**

diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -66,6 +66,14 @@ export const BaseButtonStyles: ElementStyles = css`
         font: inherit;
     }
 
+    .control.icon-only {
+        padding: 0;
+    }
+
+    .control.icon-only span {
+        display: inline-flex;
+    }
+
     :host(:hover) {
         background-color: ${neutralFillHoverBehavior.var};
     }

diff --git a/yarn.lock b/yarn.lock
@@ -2414,17 +2414,17 @@
     "@microsoft/fast-jss-utilities" "^4.8.0"
     "@microsoft/fast-web-utilities" "^4.6.0"
 
-"@microsoft/fast-element@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.20.0.tgz#cccc742cde88e67cfe0c194d0013c7d7ab086ba9"
-  integrity sha512-XItAP1Y+M5US8CPIu8TMfntqYEA3tS7KUWiJkA7uUPynqrGoBCaGTdBZsLP5GO1R2zt7nwtYRxhxk4huCqPNRQ==
+"@microsoft/fast-element@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.21.0.tgz#40689eec6e77f3cdc664a18501ea72febc735ed4"
+  integrity sha512-SzqDjcVTXqOjEaZwcDZR1/3KD99/54pXq5ho53x/7BPSzT7o8tQoUqRZiJ5WqduAtX7/rtB52etffumHkbyLUw==
 
-"@microsoft/fast-foundation@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.9.0.tgz#736025470bc8b869e69258d271f6b1bfa80b204a"
-  integrity sha512-WjycBsJz7JtO+qdcIK5pvRk+u8QmRI/r6a8bwnVz972mqTWLE2g2T+M+BwVTJ15nwcr9bzIaWmT/n33Z/E0UQg==
+"@microsoft/fast-foundation@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.10.0.tgz#43569725a2f5cd4a78edc20206c7d445e797cbab"
+  integrity sha512-8FUeHDn8blZRTmt3cVPvf6JXu3z0Jdhak5yx9yVTZttv9ACEQ1TXQfD4F0/BwYgA3ni7ORWHSXu68iJdGofRsQ==
   dependencies:
-    "@microsoft/fast-element" "^0.20.0"
+    "@microsoft/fast-element" "^0.21.0"
     "@microsoft/fast-web-utilities" "^4.6.1"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^4.0.0"