Nimble chip

change/@ni-nimble-components-fa1ae624-6b7b-4035-b6bd-1418d8451b11.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding Nimble Chip component",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/chip/index.ts

@@ -0,0 +1,72 @@
+import { attr, observable } from '@ni/fast-element';
+import {
+    applyMixins,
+    DesignSystem,
+    FoundationElement,
+    StartEnd,
+    type FoundationElementDefinition,
+    type StartOptions
+} from '@ni/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ChipAppearance } from './types';
+import { slotTextContent } from '../utilities/models/slot-text-content';
+import { chipRemoveLabel } from '../label-provider/core/label-tokens';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-chip': Chip;
+    }
+}
+
+export type ChipOptions = FoundationElementDefinition & StartOptions;
+
+/**
+ * A Nimble demo component (not for production use)
+ */
+export class Chip extends FoundationElement {
+    @attr({ mode: 'boolean' })
+    public removable = false;
+
+    @attr({ mode: 'boolean' })
+    public disabled = false;
+
+    @attr()
+    public appearance: ChipAppearance = 'outline';
+
+    /** @internal */
+    public readonly content?: HTMLElement[];
+
+    /** @internal */
+    @observable
+    public hasOverflow = false;
+
+    /** @internal */
+    public get elementTextContent(): string {
+        return slotTextContent(this.contentSlot);
+    }
+
+    /** @internal */
+    public get removeButtonContent(): string {
+        return `${chipRemoveLabel.getValueFor(this)} ${this.elementTextContent}`;
+    }
+
+    /** @internal */
+    public contentSlot!: HTMLSlotElement;
+
+    public handleRemoveClick(): void {
+        if (this.removable) {
+            this.$emit('remove');
+        }
+    }
+}
+applyMixins(Chip, StartEnd);
+
+const nimbleChip = Chip.compose<ChipOptions>({
+    baseName: 'chip',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleChip());
+export const chipTag = 'nimble-chip';

packages/nimble-components/src/chip/styles.ts

@@ -0,0 +1,112 @@
+import { css } from '@ni/fast-element';
+import {
+    actionRgbPartialColor,
+    bodyDisabledFontColor,
+    bodyFont,
+    bodyFontColor,
+    borderRgbPartialColor,
+    borderWidth,
+    controlHeight,
+    iconColor,
+    mediumPadding,
+    smallPadding
+} from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { focusVisible } from '../utilities/style/focus';
+import { ChipAppearance } from './types';
+
+export const styles = css`
+    ${display('inline-flex')}
+
+    :host {
+        height: ${controlHeight};
+        width: fit-content;
+        max-width: 300px;
+        color: ${bodyFontColor};
+        font: ${bodyFont};
+        padding: 0 ${mediumPadding};
+        gap: 4px;
+        background-color: transparent;
+        border: ${borderWidth} solid rgba(${actionRgbPartialColor}, 0.3);
+        border-radius: 4px;
+        justify-content: center;
+        align-items: center;
+        background-repeat: no-repeat;
+        ${
+            /*
+                Not sure why but this is needed to get buttons with icons and buttons
+                without icons to align on the same line when the button is inline-flex
+                See: https://github.com/ni/nimble/issues/503
+            */ ''
+        }
+        vertical-align: middle;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        border-color: rgba(${borderRgbPartialColor}, 0.3);
+        box-shadow: none;
+        background-image: none;
+        background-size: 100% 100%;
+    }
+
+    :host([disabled])::before {
+        box-shadow: none;
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*),
+    :host([disabled]) slot[name='end']::slotted(*),
+    :host([disabled]) .remove-button {
+        opacity: 0.3;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    slot[name='start']::slotted(*) {
+        flex-shrink: 0;
+    }
+
+    [part='start'],
+    [part='end'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${bodyFontColor};
+    }
+
+    .content {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .remove-button {
+        height: 16px;
+        width: 16px;
+        margin-right: calc(-1 * ${smallPadding});
+    }
+`.withBehaviors(
+    appearanceBehavior(
+        ChipAppearance.block,
+        css`
+            :host {
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+
+            :host(${focusVisible}) {
+                background-size: calc(100% - 4px) calc(100% - 4px);
+            }
+
+            :host([disabled]) {
+                background-image: linear-gradient(
+                    rgba(${borderRgbPartialColor}, 0.1),
+                    rgba(${borderRgbPartialColor}, 0.1)
+                );
+                border-color: rgba(${borderRgbPartialColor}, 0.1);
+            }
+        `
+    )
+);

packages/nimble-components/src/chip/template.ts

@@ -0,0 +1,45 @@
+import { html, ref, slotted, when, type ViewTemplate } from '@ni/fast-element';
+import {
+    startSlotTemplate,
+    type FoundationElementTemplate
+} from '@ni/fast-foundation';
+import type { Chip, ChipOptions } from '.';
+import { overflow } from '../utilities/directive/overflow';
+import { buttonTag } from '../button';
+import { iconTimesTag } from '../icons/times';
+
+// prettier-ignore
+export const template: FoundationElementTemplate<
+ViewTemplate<Chip>,
+ChipOptions
+> = (context, definition) => html<Chip>`
+    <template>
+        ${startSlotTemplate(context, definition)}
+        <span
+            class="content"
+            part="content"
+            ${overflow('hasOverflow')}
+            title=${x => (x.hasOverflow && x.elementTextContent
+        ? x.elementTextContent
+        : null)}
+        >
+            <slot
+                ${ref('contentSlot')}
+                ${slotted({ property: 'content' })}
+            ></slot>
+        </span>
+        ${when(x => x.removable && !x.disabled, html<Chip>`
+            <${buttonTag}
+                class="remove-button"
+                content-hidden
+                appearance="ghost"
+                ?disabled="${x => x.disabled}"
+                tabindex="${x => (!x.disabled ? '0' : null)}"
+                @click="${x => x.handleRemoveClick()}"
+            >
+                <${iconTimesTag} slot="start"></${iconTimesTag}>
+                ${x => x.removeButtonContent}
+            </${buttonTag}>
+        `)}
+    </template>
+`;

packages/nimble-components/src/chip/testing/chip.pageobject.ts

@@ -0,0 +1,32 @@
+import type { Chip } from '..';
+import type { Button } from '../../button';
+
+/**
+ * Page object for the `nimble-chip` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class ChipPageObject {
+    public constructor(protected readonly chipElement: Chip) {}
+
+    public isRemoveButtonVisible(): boolean {
+        const removeButton = this.getRemoveButton();
+        return removeButton ? removeButton.offsetParent !== null : false;
+    }
+
+    public clickRemoveButton(): void {
+        const removeButton = this.getRemoveButton();
+        if (removeButton) {
+            removeButton.click();
+        } else {
+            throw new Error('Remove button not found');
+        }
+    }
+
+    private getRemoveButton(): Button | null {
+        return (
+            this.chipElement.shadowRoot?.querySelector<Button>(
+                '.remove-button'
+            ) ?? null
+        );
+    }
+}

packages/nimble-components/src/chip/tests/chip.spec.ts

@@ -0,0 +1,81 @@
+import { html } from '@ni/fast-element';
+import { Chip, chipTag } from '..';
+import { fixture, type Fixture } from '../../utilities/tests/fixture';
+import { ChipPageObject } from '../testing/chip.pageobject';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+
+async function setup(): Promise<Fixture<Chip>> {
+    return await fixture<Chip>(html`<${chipTag}></${chipTag}>`);
+}
+
+describe('Chip', () => {
+    let element: Chip;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        ({ element, connect, disconnect } = await setup());
+        await connect();
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('can construct an element instance', () => {
+        expect(document.createElement(chipTag)).toBeInstanceOf(Chip);
+    });
+
+    it('click remove button raises remove event', async () => {
+        element.removable = true;
+        await waitForUpdatesAsync();
+        const removeEvent = jasmine.createSpy();
+        element.addEventListener('remove', removeEvent);
+        const pageObject = new ChipPageObject(element);
+        pageObject.clickRemoveButton();
+        expect(removeEvent).toHaveBeenCalled();
+    });
+
+    it('remove button is not visible when not removable', async () => {
+        element.removable = false;
+        await waitForUpdatesAsync();
+        const pageObject = new ChipPageObject(element);
+        expect(pageObject.isRemoveButtonVisible()).toBe(false);
+    });
+
+    it('remove button is not visible when disabled', async () => {
+        element.disabled = true;
+        await waitForUpdatesAsync();
+        const pageObject = new ChipPageObject(element);
+        expect(pageObject.isRemoveButtonVisible()).toBe(false);
+    });
+
+    describe('title overflow', () => {
+        beforeEach(async () => {
+            element.style.width = '200px';
+            await waitForUpdatesAsync();
+        });
+
+        function dispatchEventToChipContent(event: Event): boolean | undefined {
+            return element
+                .shadowRoot!.querySelector('.content')!
+                .dispatchEvent(event);
+        }
+
+        function getChipContentTitle(): string {
+            return (
+                element
+                    .shadowRoot!.querySelector('.content')!
+                    .getAttribute('title') ?? ''
+            );
+        }
+
+        it('sets title when chip text is ellipsized', async () => {
+            const chipContent = 'a very long value that should get ellipsized due to not fitting within the allocated width';
+            element.textContent = chipContent;
+            dispatchEventToChipContent(new MouseEvent('mouseover'));
+            await waitForUpdatesAsync();
+            expect(getChipContentTitle()).toBe(chipContent);
+        });
+    });
+});

packages/nimble-components/src/chip/types.ts

@@ -0,0 +1,6 @@
+export const ChipAppearance = {
+    outline: 'outline',
+    block: 'block'
+} as const;
+export type ChipAppearance =
+    (typeof ChipAppearance)[keyof typeof ChipAppearance];

packages/nimble-components/src/label-provider/core/index.ts

@@ -12,7 +12,8 @@ import {
     filterNoResultsLabel,
     loadingLabel,
     scrollBackwardLabel,
-    scrollForwardLabel
+    scrollForwardLabel,
+    chipRemoveLabel
 } from './label-tokens';
 import { styles } from '../base/styles';
 
@@ -33,7 +34,8 @@ const supportedLabels = {
     filterNoResults: filterNoResultsLabel,
     loading: loadingLabel,
     scrollBackward: scrollBackwardLabel,
-    scrollForward: scrollForwardLabel
+    scrollForward: scrollForwardLabel,
+    chipRemove: chipRemoveLabel
 } as const;
 
 /**
@@ -75,6 +77,9 @@ export class LabelProviderCore
     @attr({ attribute: 'scroll-forward' })
     public scrollForward: string | undefined;
 
+    @attr({ attribute: 'chip-remove' })
+    public chipRemove: string | undefined;
+
     protected override readonly supportedLabels = supportedLabels;
 }
 

packages/nimble-components/src/label-provider/core/label-token-defaults.ts

@@ -13,5 +13,6 @@ export const coreLabelDefaults: { readonly [key in TokenName]: string } = {
     filterNoResultsLabel: 'No items found',
     loadingLabel: 'Loading…',
     scrollBackwardLabel: 'Scroll backward',
-    scrollForwardLabel: 'Scroll forward'
+    scrollForwardLabel: 'Scroll forward',
+    chipRemoveLabel: 'Remove'
 };