fix(chips): resolve disabled and full-width behavior (#245)

docs/.vitepress/config.ts

@@ -9,6 +9,24 @@ export default defineConfig({
   description: "A set of components based on Tapsi design system.",
   base: "/web-components/",
   vite: {},
+  head: [
+    ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
+    [
+      "link",
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossorigin: "true",
+      },
+    ],
+    [
+      "link",
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Vazirmatn:[email protected]&display=swap",
+      },
+    ],
+  ],
   themeConfig: {
     sidebar,
     socialLinks,

docs/dev/components/elements-config.json

@@ -243,19 +243,16 @@
     }
   },
   "tap-chip": {
-    "propertyDefaultValues": {
-      "selected": false
-    },
     "slotKnobs": {
       "default": {
-        "simple": "<tap-icon-default slot=\"icon\"></tap-icon-default> عنوان"
+        "simple": "عنوان"
       }
     }
   },
   "tap-chip-group": {
     "slotKnobs": {
       "default": {
-        "simple": "<tap-chip size=\"md\" selected>مسافر</tap-chip>\n  <tap-chip>راننده</tap-chip>"
+        "simple": "<tap-chip selected>مسافر</tap-chip>\n<tap-chip>راننده</tap-chip>"
       }
     }
   },

package.json

@@ -14,7 +14,7 @@
     "theme:build": "pnpm --filter @tapsioss/rasti-theme run build",
     "theme:release": "pnpm --filter @tapsioss/rasti-theme run release",
     "dev:transpile": "tsc --project tsconfig.dev.json --watch --preserveWatchOutput",
-    "dev": "clear:dist dev:transpile & wds",
+    "dev": "pnpm clear:dist && pnpm dev:transpile & wds",
     "build:packages": "pnpm run -r --parallel build",
     "test": "pnpm run -r --parallel test",
     "lint:ts": "tsc --project tsconfig.json",

packages/theme/src/tokens/spacing.css

@@ -3,6 +3,7 @@
   --tap-sys-spacing-1: 0.0625rem;
   --tap-sys-spacing-2: 0.125rem;
   --tap-sys-spacing-3: 0.25rem;
+  --tap-sys-spacing-3-1: 0.375rem;
   --tap-sys-spacing-4: 0.5rem;
   --tap-sys-spacing-5: 0.75rem;
   --tap-sys-spacing-6: 1rem;

packages/web-components/src/chip-group/chip-group.style.ts

@@ -1,35 +1,38 @@
 import { css } from "lit";
 
 export default css`
-  :host {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
-    width: 100%;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
   }
 
   [hidden] {
     display: none !important;
   }
 
-  .chip-group {
+  :host([full-width]) {
+    width: 100%;
+  }
+
+  .root.full-width ::slotted(tap-chip) {
+    flex: 1 1 0;
+  }
+
+  .root {
     display: inline-flex;
-    gap: var(--tap-chip-group-gap, var(--tap-sys-spacing-5));
-    justify-content: space-between;
+    align-items: center;
+
+    gap: var(--tap-sys-spacing-5);
+
+    width: 100%;
+
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .chip-group::-webkit-scrollbar {
+  .root::-webkit-scrollbar {
     display: none;
   }
-
-  :host([fullwidth]) .chip-group {
-    display: flex;
-  }
 `;

packages/web-components/src/chip-group/chip-group.ts

@@ -1,42 +1,56 @@
 import { LitElement, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { type Chip } from "../chip/chip";
 
 export class ChipGroup extends LitElement {
-  @property({ type: String, reflect: true })
-  public mode: "single-select" | "multi-select" = "single-select";
+  @property({ type: String, attribute: "select-mode" })
+  public selectMode: "single" | "multiple" = "single";
 
-  @property({ type: Boolean, reflect: true })
-  public fullwidth = false;
+  @property({ type: Boolean, attribute: "full-width" })
+  public fullWidth = false;
 
   @queryAssignedElements()
-  private chips!: Chip[];
+  private _chips!: Chip[];
+
+  constructor() {
+    super();
+
+    this._handleChipClick = this._handleChipClick.bind(this);
+  }
 
   public override connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("chip-click", this._handleChipClick);
+
+    this.addEventListener("click", this._handleChipClick);
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener("click", this._handleChipClick);
   }
 
   private _handleChipClick(e: Event) {
     const clickedChip = e.target as Chip;
 
     if (!clickedChip || clickedChip.disabled) return;
 
-    if (this.mode === "single-select") {
-      this.chips.forEach(chip => {
+    if (this.selectMode === "single") {
+      this._chips.forEach(chip => {
         chip.selected = chip === clickedChip && !chip.selected;
       });
-    } else if (this.mode === "multi-select") {
+    } else if (this.selectMode === "multiple") {
       clickedChip.selected = !clickedChip.selected;
     }
 
-    const selectedChips = this.chips.filter(chip => chip.selected);
+    const selectedChips = this._chips.filter(chip => chip.selected);
 
     this.dispatchEvent(
       new CustomEvent("chip-group-change", {
         detail: {
           selected: selectedChips,
-          indices: selectedChips.map(chip => this.chips.indexOf(chip)),
+          indices: selectedChips.map(chip => this._chips.indexOf(chip)),
         },
         bubbles: true,
         composed: true,
@@ -45,12 +59,16 @@ export class ChipGroup extends LitElement {
   }
 
   protected override render() {
+    const rootClasses = classMap({
+      root: true,
+      "full-width": this.fullWidth,
+    });
+
     return html`
       <div
-        aria-label="chip-group"
         role="group"
-        class="chip-group"
-        part="chip-group"
+        class="${rootClasses}"
+        part="root"
       >
         <slot></slot>
       </div>

packages/web-components/src/chip-group/index.ts

@@ -5,15 +5,10 @@ import styles from "./chip-group.style";
 /**
  * @summary A chip group component.
  *
- * @cssprop [--tap-chip-group-gap=--tap-sys-spacing-5] - The gap between chips in the group.
- *
- * @csspart [chip-group] - The main container for the chip group.
- *
  * @slot - Chip group contents, you should use some `tap-chip` components here
  *
- * @prop {boolean} [fullwidth=false] - The size of the chip group.
- * @prop {'single-select' | 'multi-select'} [mode='single-select'] - The mode of the chip group.
- *
+ * @prop {'single' | 'multiple'} [select-mode='single'] - The select mode of the chip group.
+ * @prop {boolean} [full-width=false] - Indicates if the chip should be full width.
  */
 
 @customElement("tap-chip-group")

packages/web-components/src/chip/chip.style.ts

@@ -1,94 +1,102 @@
 import { css } from "lit";
 
 export default css`
-  :host {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
-    width: 100%;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
   }
 
   [hidden] {
     display: none !important;
   }
 
-  .chip {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font: inherit;
-    font-family: var(--tap-font-family, var(--tap-sys-font-family));
-    font-size: var(
-      --tap-chip-font-size,
-      var(--tap-sys-typography-body-sm-size)
-    );
-    line-height: var(
-      --tap-chip-line-height,
-      var(--tap-sys-typography-body-sm-height)
-    );
-    border-radius: var(--tap-chip-border-radius, var(--tap-sys-radius-full));
-    border: 1px solid;
-    border-color: var(
-      --tap-chip-border-color,
-      var(--tap-sys-color-border-primary)
-    );
-    background-color: var(
-      --tap-chip-background-color,
-      var(--tap-sys-color-surface-primary)
-    );
-    color: var(--tap-chip-color, var(--tap-sys-color-content-primary));
-    padding: 0 var(--tap-chip-horizontal-padding, var(--tap-sys-spacing-4));
-    width: 100%;
-    // TODO: add to the tokens
-    min-width: var(--tap-chip-min-width, 72px);
+  .root.disabled {
+    --chip-color: var(--tap-sys-color-content-disabled);
+  }
+
+  .root.selected {
+    --chip-bg-color: var(--tap-sys-color-surface-secondary);
+    --chip-stroke-color: var(--tap-sys-color-surface-inverse-primary);
   }
 
-  ::slotted([slot="icon"]),
-  .chip {
-    gap: var(--tap-chip-icon-gap, var(--tap-sys-spacing-4));
+  .root.disabled.selected {
+    --chip-stroke-color: var(--tap-sys-color-border-primary);
   }
 
-  :host([hasicon]) .chip {
-    display: flex;
-    justify-content: end;
+  .root.has-trailing-icon {
+    --chip-trailing-icon-display: flex;
   }
 
-  :host([selected]) .chip {
-    border: 1.5px solid;
-    background-color: var(
-      --tap-chip-selected-background-color,
-      var(--tap-sys-color-surface-secondary)
-    );
-    border-color: var(
-      --tap-chip-selected-border-color,
-      var(--tap-sys-color-surface-inverse-primary)
-    );
+  .root.has-leading-icon {
+    --chip-leading-icon-display: flex;
   }
 
-  :host([disabled]) .chip {
-    color: var(
-      --tap-chip-disabled-color,
-      var(--tap-sys-color-content-disabled)
-    );
+  .root.small {
+    --chip-height: 2rem;
+    --chip-icon-size: 1.25rem;
+    --chip-spacing: var(--tap-sys-spacing-3-1);
   }
 
-  :host([selected]),
-  :host([disabled]) .chip {
-    border-color: var(
-      --tap-chip-selected-and-disabled-color,
-      var(--tap-sys-color-border-primary)
-    );
+  .root.medium {
+    --chip-height: 2.5rem;
+    --chip-icon-size: 1.5rem;
+    --chip-spacing: var(--tap-sys-spacing-4);
+  }
+
+  .root {
+    --chip-color: var(--tap-sys-color-content-primary);
+    --chip-bg-color: var(--tap-sys-color-surface-primary);
+    --chip-stroke-color: var(--tap-sys-color-border-primary);
+    --chip-trailing-icon-display: none;
+    --chip-leading-icon-display: none;
+
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: var(--tap-sys-radius-full);
+    border: var(--tap-sys-stroke-1) solid var(--chip-stroke-color);
+
+    background-color: var(--chip-bg-color);
+    color: var(--chip-color);
+
+    padding: 0 var(--chip-spacing);
+    min-width: 4.5rem;
+    width: 100%;
+    height: var(--chip-height);
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0 var(--chip-spacing);
+
+    font-family: var(--tap-sys-font-family);
+    font-size: var(--tap-sys-typography-body-sm-size);
+    line-height: var(--tap-sys-typography-body-sm-height);
+  }
+
+  .icon {
+    align-items: center;
+    justify-content: center;
+
+    width: var(--chip-icon-size);
+    height: var(--chip-icon-size);
+    max-width: var(--chip-icon-size);
+    max-height: var(--chip-icon-size);
+    text-align: center;
   }
 
-  :host([size="sm"]) .chip {
-    height: var(--tap-chip-group-sm-height, var(--tap-sys-spacing-9));
+  .icon.leading-icon {
+    display: var(--chip-leading-icon-display);
   }
 
-  :host([size="md"]) .chip {
-    height: var(--tap-chip-group-md-height, var(--tap-sys-spacing-10));
+  .icon.trailing-icon {
+    display: var(--chip-trailing-icon-display);
   }
 `;