IBX-7899: Chip component (#57)

albozek · web-flow · commit 8ec621c56434 · 2025-10-27T11:47:30.000+01:00
diff --git a/src/bundle/Resources/public/ts/components/chip.ts b/src/bundle/Resources/public/ts/components/chip.ts
@@ -0,0 +1,36 @@
+import { Base } from '../partials';
+
+interface ChipConfig {
+    onDelete?: (event: MouseEvent) => void;
+}
+
+export default class Chip extends Base {
+    private deleteButton: HTMLButtonElement | null;
+    private onDelete?: (event: MouseEvent) => void;
+
+    constructor(container: HTMLDivElement, config: ChipConfig = {}) {
+        super(container);
+
+        this.deleteButton = this._container.querySelector('.ids-chip__delete');
+        this.onDelete = config.onDelete;
+    }
+
+    protected handleDelete(event: MouseEvent): void {
+        event.stopPropagation();
+
+        if (this.onDelete) {
+            this.onDelete(event);
+        }
+    }
+
+    protected initDeleteButton(): void {
+        if (this.deleteButton) {
+            this.deleteButton.addEventListener('click', this.handleDelete.bind(this));
+        }
+    }
+
+    public init(): void {
+        super.init();
+        this.initDeleteButton();
+    }
+}
diff --git a/src/bundle/Resources/translations/ibexa_design_system_twig.en.xliff b/src/bundle/Resources/translations/ibexa_design_system_twig.en.xliff
@@ -6,6 +6,11 @@
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
     </header>
     <body>
+      <trans-unit id="09975764bd5f4def61682516d7430651e5b8779e" resname="ibexa.chip.delete-btn.label">
+        <source>Delete</source>
+        <target state="new">Delete</target>
+        <note>key: ibexa.chip.delete-btn.label</note>
+      </trans-unit>
       <trans-unit id="61c7070a29f932eb0b1a343509d049aa52c92c09" resname="ibexa.clear-btn.label">
         <source>Clear</source>
         <target state="new">Clear</target>
diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/chip.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/chip.html.twig
@@ -0,0 +1,29 @@
+{% trans_default_domain 'ibexa_design_system_twig' %}
+
+{% set chip_classes =
+    html_classes(
+        'ids-chip',
+        {
+            'ids-chip--error': error,
+            'ids-chip--disabled': disabled,
+        },
+        attributes.render('class') ?? ''
+    )
+%}
+{% set delete_msg = 'ibexa.chip.delete-btn.label'|trans|desc('Delete') %}
+
+<div tabIndex={{ disabled ? -1 : 0 }} class="{{ chip_classes }}" aria-disabled="{{ disabled ? 'true' : 'false' }}" {{ attributes }}>
+    <div class="ids-chip__content">
+        {{ block('content') }}
+    </div>
+    {% if is_deletable %}
+        <twig:ibexa:button
+            type="tertiary-alt"
+            size="small"
+            icon="discard"
+            class="ids-chip__delete"
+            disabled="{{ disabled }}"
+            :aria-label="delete_msg"
+        />
+    {% endif %}
+</div>
diff --git a/src/lib/Twig/Components/Chip.php b/src/lib/Twig/Components/Chip.php
@@ -0,0 +1,51 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\DesignSystemTwig\Twig\Components;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+#[AsTwigComponent('ibexa:chip')]
+final class Chip
+{
+    public bool $error = false;
+
+    #[ExposeInTemplate('is_deletable')]
+    public bool $isDeletable = true;
+
+    public bool $disabled = false;
+
+    /**
+     * @param array<string, mixed> $props
+     *
+     * @return array<string, mixed>
+     */
+    #[PreMount]
+    public function validate(array $props): array
+    {
+        $resolver = new OptionsResolver();
+        $resolver->setIgnoreUndefined();
+        $resolver
+            ->define('error')
+            ->allowedTypes('bool')
+            ->default(false);
+        $resolver
+            ->define('isDeletable')
+            ->allowedTypes('bool')
+            ->default(true);
+        $resolver
+            ->define('disabled')
+            ->allowedTypes('bool')
+            ->default(false);
+
+        return $resolver->resolve($props) + $props;
+    }
+}
