@fluid-topics/ft-button 0.1.18 → 0.2.2

package/build/ft-button.js

@@ -10,10 +10,10 @@ import { classMap } from "lit/directives/class-map.js";
 import { designSystemVariables, FtCssVariable, FtLitElement, isSafari, noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
 import { FtTypography, FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
-import { Icon } from "@material/mwc-icon";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtLoader, FtLoaderCssVariables } from "@fluid-topics/ft-loader";
 import "@fluid-topics/ft-loader";
+import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
 const buttonColor = FtCssVariable.extend("--ft-button-color", designSystemVariables.colorPrimary);
 export const FtButtonCssVariables = {
     backgroundColor: FtCssVariable.extend("--ft-button-background-color", designSystemVariables.colorSurface),
@@ -100,11 +100,11 @@ export class FtButton extends FtLitElement {
                     --ft-button-internal-font-size: ${FtButtonCssVariables.fontSize};
                     --ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
                     --ft-button-internal-color: ${FtButtonCssVariables.color};
-                    --mdc-icon-size: ${FtButtonCssVariables.iconSize};
+                    ${setVariable(FtIconCssVariables.size, FtButtonCssVariables.iconSize)};
                     --ft-button-internal-vertical-padding: 6px;
                     --ft-button-internal-horizontal-padding: 8px;
                     ${setVariable(FtRippleCssVariables.color, FtButtonCssVariables.rippleColor)};
-                    --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), var(--mdc-icon-size));
+                    --ft-button-internal-content-height: max(var(--ft-button-internal-line-height), ${FtButtonCssVariables.iconSize});
 
                     border-radius: ${FtButtonCssVariables.borderRadius};
                     padding: var(--ft-button-internal-vertical-padding) var(--ft-button-internal-horizontal-padding);
@@ -171,17 +171,16 @@ export class FtButton extends FtLitElement {
                     display: none;
                 }
 
-                mwc-icon {
+                ft-icon {
                     flex-shrink: 0;
-                    width: var(--mdc-icon-size);
                 }
 
-                .ft-button--label[hidden] + mwc-icon {
+                .ft-button--label[hidden] + ft-icon {
                     margin: 0 calc(var(--ft-button-internal-horizontal-padding) * -1);
                     padding: 0 var(--ft-button-internal-vertical-padding);
                 }
 
-                .ft-button:not(.ft-button--trailing-icon) mwc-icon,
+                .ft-button:not(.ft-button--trailing-icon) ft-icon,
                 .ft-button:not(.ft-button--trailing-icon) ft-loader {
                     order: -1;
                 }
@@ -238,7 +237,7 @@ export class FtButton extends FtLitElement {
         else {
             return this.icon
                 ? html `
-                        <mwc-icon>${this.icon}</mwc-icon> `
+                        <ft-icon variant="material">${this.icon}</ft-icon> `
                 : nothing;
         }
     }
@@ -272,7 +271,7 @@ FtButton.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-tooltip": FtTooltip,
     "ft-typography": FtTypography,
-    "mwc-icon": Icon,
+    "ft-icon": FtIcon,
     "ft-loader": FtLoader,
 };
 __decorate([