@fluid-topics/ft-button 1.1.85 → 1.1.86

package/build/ftds-button.d.ts

@@ -1,13 +1,18 @@
 import { FtBaseButton } from "./ft-base-button";
 import { FtdsButtonProperties } from "./ftds-button.properties";
 import { ClassInfo } from "lit/directives/class-map.js";
-export declare class FtdsButton extends FtBaseButton implements FtdsButtonProperties {
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+declare const FtdsButton_base: import("@fluid-topics/ft-wc-utils").FtdsBaseType<typeof FtBaseButton>;
+export declare class FtdsButton extends FtdsButton_base implements FtdsButtonProperties {
     primary: boolean;
     secondary: boolean;
     tertiary: boolean;
-    neutral: boolean;
-    small: boolean;
+    round: boolean;
+    family: DesignSystemFamily;
+    iconVariant: FtIconVariants;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     get buttonClasses(): ClassInfo;
     get typographyVariant(): string;
 }
+export {};

package/build/ftds-button.js

@@ -7,35 +7,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { FtBaseButton } from "./ft-base-button";
 import { property } from "lit/decorators.js";
 import { FtTypographyVariants } from "@fluid-topics/ft-typography/build/ft-typography.properties";
-import { safariEllipsisFix } from "@fluid-topics/ft-wc-utils";
+import { safariEllipsisFix, toFtdsBase } from "@fluid-topics/ft-wc-utils";
 import { designSystemStyles } from "./ftds-button.styles";
-class FtdsButton extends FtBaseButton {
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+class FtdsButton extends toFtdsBase(FtBaseButton) {
     constructor() {
         super(...arguments);
         this.primary = false;
         this.secondary = false;
         this.tertiary = false;
-        this.neutral = false;
-        this.small = false;
+        this.round = false;
+        this.family = DesignSystemFamily.brand;
+        this.iconVariant = FtIconVariants.fluid_topics;
     }
     get buttonClasses() {
         return {
             "ft-button": true,
             "ft-button--primary": this.primary,
             "ft-button--secondary": this.secondary,
-            "ft-button--tertiary": this.tertiary || (!this.primary && !this.secondary && !this.neutral),
-            "ft-button--neutral": this.neutral,
-            "ft-button--large": !this.small,
-            "ft-button--small": this.small,
+            "ft-button--tertiary": this.tertiary || (!this.primary && !this.secondary),
             "ft-button--icon-only": !this.hasTextContent(),
             "ft-button--trailing-icon": this.trailingIcon,
             "ft-button--loading": this.trailingIcon,
             "ft-no-text-select": true,
             "ft-button--no-icon": !this.icon,
+            "ft-button--round": this.round,
+            ...this.getDesignSystemBaseClasses()
         };
     }
     get typographyVariant() {
-        return this.small ? FtTypographyVariants.caption1medium : FtTypographyVariants.body2medium;
+        switch (this.size) {
+            case DesignSystemSize.large:
+                return FtTypographyVariants.body2medium;
+            case DesignSystemSize.medium:
+                return FtTypographyVariants.caption1medium;
+            case DesignSystemSize.small:
+                return FtTypographyVariants.caption2medium;
+        }
     }
 }
 FtdsButton.styles = [
@@ -53,8 +62,5 @@ __decorate([
 ], FtdsButton.prototype, "tertiary", void 0);
 __decorate([
     property({ type: Boolean })
-], FtdsButton.prototype, "neutral", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtdsButton.prototype, "small", void 0);
+], FtdsButton.prototype, "round", void 0);
 export { FtdsButton };

package/build/ftds-button.styles.js

@@ -83,6 +83,11 @@ export const designSystemStyles = [
             display: none;
         }
 
+        .ft-button.ft-button--icon-only {
+            padding: unset;
+            border-radius: 50%;
+        }
+
         /** Primary styles **/
 
         .ft-button--primary {
@@ -158,7 +163,7 @@ export const designSystemStyles = [
 
         /** Neutral styles **/
 
-        .ft-button--neutral {
+        .ftds--family-neutral {
             ${setVariable(FtLoaderCssVariables.color, button.neutralIconColor)};
 
             ${setVariable(FtRippleCssVariables.backgroundColor, button.neutralStateLayerColor)};
@@ -172,17 +177,17 @@ export const designSystemStyles = [
             border-style: none;
         }
 
-        .ft-button--neutral[disabled] {
+        .ftds--family-neutral[disabled] {
             opacity: ${button.neutralDisabledComponentOpacity};
         }
 
-        .ft-button--neutral ft-icon {
+        .ftds--family-neutral ft-icon {
             color: ${button.neutralIconColor};
         }
 
         /** Large styles **/
 
-        .ft-button--large {
+        .ftds--size-large {
             ${setVariable(FtIconCssVariables.size, button.largeIconSize)};
             ${setVariable(FtLoaderCssVariables.size, button.largeIconSize)};
 
@@ -193,19 +198,41 @@ export const designSystemStyles = [
             border-width: ${button.largeBorderWidth};
         }
 
-        .ft-button--large:focus-visible {
+        .ftds--size-large:focus-visible {
             outline-width: ${button.largeFocusOutlineWidth};
             outline-offset: ${button.largeFocusOutlineOffset};
         }
 
-        .ft-button--large.ft-button--icon-only {
+        .ftds--size-large.ft-button--icon-only {
             width: ${button.largeIconOnlyWidth};
-            padding: unset;
         }
 
         /** Small styles **/
 
-        .ft-button--small {
+        .ftds--size-medium {
+            ${setVariable(FtIconCssVariables.size, button.mediumIconSize)};
+            ${setVariable(FtLoaderCssVariables.size, button.mediumIconSize)};
+
+            height: ${button.mediumHeight};
+            padding: 0 ${button.mediumHorizontalPadding};
+            gap: ${button.mediumGap};
+            border-radius: ${button.mediumBorderRadius};
+            border-width: ${button.mediumBorderWidth};
+        }
+
+        .ftds--size-medium:focus-visible {
+            outline-width: ${button.mediumFocusOutlineWidth};
+            outline-offset: ${button.mediumFocusOutlineOffset};
+        }
+
+        .ftds--size-medium.ft-button--icon-only {
+            width: ${button.mediumIconOnlyWidth};
+        }
+
+
+        /** Small styles **/
+
+        .ftds--size-small {
             ${setVariable(FtIconCssVariables.size, button.smallIconSize)};
             ${setVariable(FtLoaderCssVariables.size, button.smallIconSize)};
 
@@ -216,14 +243,13 @@ export const designSystemStyles = [
             border-width: ${button.smallBorderWidth};
         }
 
-        .ft-button--small:focus-visible {
+        .ftds--size-small:focus-visible {
             outline-width: ${button.smallFocusOutlineWidth};
             outline-offset: ${button.smallFocusOutlineOffset};
         }
 
-        .ft-button--small.ft-button--icon-only {
+        .ftds--size-small.ft-button--icon-only {
             width: ${button.smallIconOnlyWidth};
-            padding: unset;
         }
     `,
     noTextSelect

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-button",
-    "version": "1.1.85",
+    "version": "1.1.86",
     "description": "A generic Fluid Topics tag",
     "keywords": [
         "Lit"
@@ -19,14 +19,14 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "0.0.24",
-        "@fluid-topics/ft-icon": "1.1.85",
-        "@fluid-topics/ft-loader": "1.1.85",
-        "@fluid-topics/ft-ripple": "1.1.85",
-        "@fluid-topics/ft-tooltip": "1.1.85",
-        "@fluid-topics/ft-typography": "1.1.85",
-        "@fluid-topics/ft-wc-utils": "1.1.85",
+        "@fluid-topics/design-system-variables": "0.0.28",
+        "@fluid-topics/ft-icon": "1.1.86",
+        "@fluid-topics/ft-loader": "1.1.86",
+        "@fluid-topics/ft-ripple": "1.1.86",
+        "@fluid-topics/ft-tooltip": "1.1.86",
+        "@fluid-topics/ft-typography": "1.1.86",
+        "@fluid-topics/ft-wc-utils": "1.1.86",
         "lit": "3.1.0"
     },
-    "gitHead": "7f23fb0e267fb0bcdd20de5b2fb39ab5940983d5"
+    "gitHead": "60d49f4812a4175a83e64c61f8ccbdd7c2b5b2e9"
 }