@fluid-topics/ft-chip 1.0.0-alpha.0 → 1.0.0

package/build/ft-chip.css.js

@@ -3,6 +3,7 @@ import { designSystemVariables, FtCssVariableFactory, noTextSelect, setVariable
 import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
 import { FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button";
 const chipColor = FtCssVariableFactory.extend("--ft-chip-color", designSystemVariables.colorOnSurface);
 export const FtChipCssVariables = {
     backgroundColor: FtCssVariableFactory.extend("--ft-chip-background-color", designSystemVariables.colorSurface),
@@ -41,7 +42,6 @@ export const styles = [
             justify-content: center;
             align-items: center;
             width: 100%;
-            overflow: hidden;
             box-sizing: border-box;
             pointer-events: auto;
 
@@ -118,6 +118,13 @@ export const styles = [
             position: relative;
         }
 
+        .ft-chip--icon-button {
+            ${setVariable(FtButtonCssVariables.iconSize, FtChipCssVariables.iconSize)};
+            ${setVariable(FtButtonCssVariables.horizontalPadding, 'var(--ft-chip-internal-icon-padding)')};
+            ${setVariable(FtButtonCssVariables.verticalPadding, 'var(--ft-chip-internal-icon-padding)')};
+            margin: calc((-1) * var(--ft-chip-internal-icon-padding));
+        }
+
         .ft-chip--label {
             vertical-align: bottom;
             display: block;
@@ -155,7 +162,8 @@ export const styles = [
             outline: none;
         }
 
-        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-container {
+        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-container,
+        .ft-chip:not(.ft-chip--trailing-icon) .ft-chip--icon-button {
             order: -1;
         }
     `

package/build/ft-chip.d.ts

@@ -14,6 +14,7 @@ export declare class FtChip extends FtLitElement implements FtChipProperties {
     dense: boolean;
     multiLine: boolean;
     label: string;
+    iconLabel: string;
     icon?: string;
     iconVariant?: FtIconVariants;
     trailingIcon: boolean;

package/build/ft-chip.js

@@ -12,6 +12,7 @@ import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { styles } from "./ft-chip.css";
+import { FtButton } from "@fluid-topics/ft-button";
 export class IconClickEvent extends CustomEvent {
     constructor() {
         super("icon-click");
@@ -28,6 +29,7 @@ class FtChip extends FtLitElement {
         this.dense = false;
         this.multiLine = false;
         this.label = "";
+        this.iconLabel = "";
         this.icon = undefined;
         this.trailingIcon = false;
     }
@@ -63,15 +65,21 @@ class FtChip extends FtLitElement {
         return (this.iconClickable || this.removable) && !this.disabled;
     }
     renderIcon() {
-        return html `
-            <div class="ft-chip--icon-container ft-no-text-select ${this.interactionsOnIcon ? "ft-chip--clickable" : ""}"
-                 tabindex="${this.interactionsOnIcon ? 0 : -1}"
-                 @click=${this.onIconClick}
-                 @keyup=${this.onIconKeyUp}>
-                <ft-ripple ?disabled=${!this.interactionsOnIcon}></ft-ripple>
-                <ft-icon .variant=${this.iconVariant} value="${this.internalIcon}"></ft-icon>
-            </div>
-        `;
+        return this.interactionsOnIcon
+            ? html `
+                    <ft-button round
+                               class="ft-chip--icon-button"
+                               @click=${this.onIconClick}
+                               .iconVariant=${this.iconVariant}
+                               icon="${this.internalIcon}"
+                               label="${this.iconLabel}"
+                    ></ft-button>
+                `
+            : html `
+                    <div class="ft-chip--icon-container ft-no-text-select">
+                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
+                    </div>
+                `;
     }
     onKeyUp(e) {
         if (this.interactionsOnChip && ["Enter", " "].includes(e.key)) {
@@ -104,13 +112,14 @@ class FtChip extends FtLitElement {
         this.requestUpdate();
     }
     get internalIcon() {
-        return this.icon || (this.removable ? "cancel" : undefined);
+        return this.icon || (this.removable ? "close" : undefined);
     }
 }
 FtChip.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-button": FtButton,
 };
 FtChip.styles = styles;
 __decorate([
@@ -137,6 +146,9 @@ __decorate([
 __decorate([
     property()
 ], FtChip.prototype, "label", void 0);
+__decorate([
+    property()
+], FtChip.prototype, "iconLabel", void 0);
 __decorate([
     property()
 ], FtChip.prototype, "icon", void 0);