@miraidesigns/chips

Chips

Chips are elements that represent small pieces of information like tags or inputs.

---

HTML

<div class="mdf-chips">
    <div class="mdf-chips__grid" role="grid">   
        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Some preview text</span>
            </span>
        </div>

        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Some other text</span>
            </span>
        </div>
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/chips/styles';

// Configure appearance
@use '@miraidesigns/chips' with (
    $variable: value
);

@include chips.styles();

---

Examples

Some basic examples on how the module can be used.

User Created Chips

Requires the Elements module for the mdf-icon class.
Requires the Helpers module for the mdf-offscreen class.

<div class="mdf-chips mdf-chips--has-input">
    <div class="mdf-chips__grid" role="grid">   
        <div class="mdf-chips__chip" role="row">
            <span role="gridcell">
                <span class="mdf-chips__text" tabindex="0">Preview</span>
            </span>

            <span role="gridcell">
                <button class="mdf-chips__action" aria-label="Remove chip">
                    <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                        <use href="icons.svg#cancel"></use>
                    </svg>
                </button>
            </span>
        </div>
    </div>

    <input class="mdf-chips__input" placeholder="Add new chip">

    <span class="mdf-offscreen" aria-live="polite"></span>
</div>

TypeScript

import { MDFChips } from '@miraidesigns/chips';

const chips = new MDFChips(document.querySelector('.mdf-chips'), {
    iconURL: 'icons.svg#cancel' // Make sure to set this URL correctly
});

// Get the chips container and text input elements.
const chipsContainer = chips.container;
const chipsInput = chips.input;

// Listen to keydown events on the text input.
chipsInput.addEventListener('keydown', (evt: KeyboardEvent) => {
    if (evt.key === 'Enter') {
        // Get the input value when the user hits `ENTER`.
        const input = evt.target as HTMLInputElement;
        const value = input.value;

        // Array of the existing chips values.
        const chipsValues = chips.getValues();

        // Make sure there is no existing chip with the same value.
        if (!chipsValues.includes(value)) {
            // Add the new chip.
            chips.addChip(value);

            // Clear out the text input.
            input.value = '';
        }
    }
});

// Event delegation on the chips container.
chipsContainer.addEventListener('click', (evt: MouseEvent) => {
    // Get the clicked element.
    const _this = evt.target as HTMLElement;

    // Only trigger when we click the `action` button.
    if (_this.matches('.mdf-chips__action')) {
        // Get the chip element it belongs to.
        const chip: HTMLElement = _this.closest('.mdf-chips__chip');

        // Delete the chip.
        chips.deleteChip(chip);
    }
});

---

Implementation

Attributes

Please see the WAI-ARIA page for attributes and best practices regarding layout grids.

Classes

Name	Type	Description
mdf-chips	Parent	Contains the chips elements
mdf-chips--has-input	Modifier	Apply if an input is present to dynamically create chip elements
mdf-chips--active	Modifier	Applied when the chips container is in focus
mdf-chips__grid	Child	Contains the grid elements. Child to .mdf-chips
mdf-chips__chip	Parent / Child	Chip element. Child to .mdf-chips__grid
mdf-chips__text	Child	Text element. Child to .mdf-chips__chip
mdf-chips__icon	Child	Icon element. Child to .mdf-chips__chip
mdf-chips__action	Child	Button element used to delete a chip. Child to .mdf-chips__chip
mdf-chips__input	Child	Input element to dynamically create chips. Child to .mdf-chips

Events

Name	Data	Description
MDFChips:added	{text: string}	Fires when a new chip gets added. Includes the chip's text value
MDFChips:deleted	null	Fires when a chip gets removed

Properties

Name	Type	Description
.chips	HTMLCollectionOf<Element>	Returns a collection of all chips elements
.container	HTMLElement	Returns the chips container element
.grid	HTMLElement	Returns the chips grid
.input	HTMLInputElement	Returns the chips input element if available
.addChip(text, callback?)	(string, () => void)	Create a chip with the given text and execute the callback function if provided
.deleteChip(element, callback?)	(HTMLElement, () => void)	Delete the given chip element and execute the callback function if provided
.getValues()	(): string[]	Returns an Array of all chips text values

Options

Name	Type	Default	Description
iconURL	string	null	URL to the .svg file used in the <use> href attribute of the close button