@fluid-topics/ft-chip 1.2.73 → 1.3.1

package/build/ftds-chip.js

@@ -98,9 +98,8 @@ class FtdsChip extends FtdsBase {
             case DesignSystemSize.large:
                 return FtTypographyVariants.body2medium;
             case DesignSystemSize.medium:
-                return FtTypographyVariants.caption1medium;
             case DesignSystemSize.small:
-                return FtTypographyVariants.caption2medium;
+                return FtTypographyVariants.caption1medium;
         }
     }
 }

package/build/ftds-chip.styles.js

@@ -14,6 +14,7 @@ export const designSystemStyle = [
         .ftds-chip {
             display: flex;
             align-items: center;
+            box-sizing: border-box;
         }
 
         .ftds-chip--icon-container {
@@ -26,6 +27,53 @@ export const designSystemStyle = [
             display: flex; /* For typo alignment in the chip */
         }
 
+
+        .ftds-chip--remove-button::part(icon) {
+            transform: scale(1.35); /* Little trick to have a bigger icon inside of the button */
+        }
+
+        .ftds-chip--remove-button {
+            position: relative;
+        }
+
+        /* SMALL VARIANT */
+        .ftds--size-small {
+            min-height: ${chip.smallMinHeight};
+            padding: 0 ${chip.smallHorizontalPadding};
+            border-radius: ${chip.smallBorderRadius};
+            border-width: ${chip.smallBorderWidth};
+            border-style: solid;
+            ${setVariable(FtIconCssVariables.size, chip.smallIconSize)}
+        }
+
+        .ftds--size-small.ftds-chip--with-action {
+            padding-right: ${chip.smallButtonRightPadding};
+        }
+
+        .ftds--size-small ft-typography {
+            overflow: visible;
+            padding: 0 2px;
+        }
+
+        .ftds--size-small .ftds-chip--icon-container {
+            overflow: visible;
+            height: ${chip.smallIconSize};
+            margin-right: ${chip.smallButtonRightPadding};
+        }
+
+        /* Dirty non-variabilized tweaks to properly center the icon */
+        .ftds--size-small .ftds-chip--remove-button {
+            overflow: visible;
+            top: -3px;
+            height: ${chip.smallIconSize};
+            transform: scale(.75); /* Little trick to have a (even) bigger icon inside of the button */
+            --ft-button-small-icon-only-width: 15px;
+        }
+
+        .ftds--size-small .ftds-chip--remove-button::part(icon) {
+            transform: scale(2); /* Same as above */
+        }
+
         /* MEDIUM VARIANT */
         .ftds--size-medium {
             min-height: ${chip.mediumMinHeight};
@@ -41,6 +89,9 @@ export const designSystemStyle = [
             padding-right: ${chip.mediumButtonRightPadding};
         }
 
+        .ftds--size-medium .ftds-chip--remove-button {
+            right: -1px; /* Fixing manually the alignement of the button with the border of the chip */
+        }
 
         /* LARGE VARIANT */
         .ftds--size-large {
@@ -57,6 +108,10 @@ export const designSystemStyle = [
             padding-right: ${chip.largeButtonRightPadding};
         }
 
+        .ftds--size-large .ftds-chip--remove-button {
+            right: -2px; /* Fixing manually the alignement of the button with the border of the chip */
+        }
+
 
         /* NEUTRAL COLORS */
         .ftds--family-neutral {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-chip",
-    "version": "1.2.73",
+    "version": "1.3.1",
     "description": "A generic Fluid Topics chip",
     "keywords": [
         "Lit"
@@ -20,11 +20,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "0.1.99",
-        "@fluid-topics/ft-icon": "1.2.73",
-        "@fluid-topics/ft-ripple": "1.2.73",
-        "@fluid-topics/ft-typography": "1.2.73",
-        "@fluid-topics/ft-wc-utils": "1.2.73",
+        "@fluid-topics/ft-icon": "1.3.1",
+        "@fluid-topics/ft-ripple": "1.3.1",
+        "@fluid-topics/ft-typography": "1.3.1",
+        "@fluid-topics/ft-wc-utils": "1.3.1",
         "lit": "3.1.0"
     },
-    "gitHead": "4f8924d376dd8e1fc58e1cde50904618bfe6ac1d"
+    "gitHead": "ba07775e09d57ec38038f07f9c03b52aea08376b"
 }