@crowdstrike/glide-core 0.5.1 → 0.5.2

package/dist/dropdown.option.test.basics.multiple.js

@@ -0,0 +1,26 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('is selected when initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+      private-multiple
+      selected
+    ></glide-core-dropdown-option>`);
+    const checkbox = component.shadowRoot?.querySelector('glide-core-checkbox');
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+    expect(checkbox?.checked).to.be.true;
+});
+it('is deselected when initially deselected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    const checkbox = component.shadowRoot?.querySelector('glide-core-checkbox');
+    expect(component.selected).to.be.false;
+    expect(component.ariaSelected).to.equal('false');
+    expect(checkbox?.checked).to.be.false;
+});

package/dist/dropdown.option.test.basics.single.js

@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('is selected when initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+      selected
+    ></glide-core-dropdown-option>`);
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+});
+it('is deselected when initially deselected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    expect(component.selected).to.be.false;
+    expect(component.ariaSelected).to.equal('false');
+});

package/dist/dropdown.option.test.events.js

@@ -0,0 +1,27 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('dispatches a "private-selected-change" event', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    setTimeout(() => {
+        component.click();
+    });
+    const event = await oneEvent(component, 'private-selected-change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});
+it('dispatches a "private-value-change" event', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    setTimeout(() => {
+        component.value = '';
+    });
+    const event = await oneEvent(component, 'private-value-change');
+    expect(event instanceof Event).to.be.true;
+    expect(event.bubbles).to.be.true;
+});

package/dist/dropdown.option.test.focus.js

@@ -0,0 +1,11 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('focuses itself when `focus` is called', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    component.focus();
+    expect(document.activeElement).to.equal(component);
+});

package/dist/dropdown.option.test.interactions.multiple.js

@@ -0,0 +1,87 @@
+import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
+import GlideCoreCheckbox from './checkbox.js';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('is selected on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+});
+it('is deselected on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      private-multiple
+      selected
+    ></glide-core-dropdown-option>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.selected).to.be.false;
+    expect(component.ariaSelected).to.equal('false');
+});
+it('is selected on click when the checkbox itself is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    // Checkbox has its own lifecycle. Wait until it's ready.
+    waitUntil(() => {
+        return (component.shadowRoot?.querySelector('[data-test="checkbox"]') instanceof
+            GlideCoreCheckbox);
+    });
+    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
+    checkbox?.click();
+    await elementUpdated(component);
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+    expect(checkbox?.checked).to.be.true;
+});
+it('is deselected on click when the checkbox itself is clicked', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      private-multiple
+      selected
+    ></glide-core-dropdown-option>`);
+    // Checkbox has its own lifecycle. Wait until it's ready.
+    waitUntil(() => {
+        return (component.shadowRoot?.querySelector('[data-test="checkbox"]') instanceof
+            GlideCoreCheckbox);
+    });
+    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
+    checkbox?.click();
+    await elementUpdated(component);
+    expect(component.selected).to.be.false;
+    expect(component.ariaSelected).to.equal('false');
+    expect(checkbox?.checked).to.be.false;
+});
+it('is selected when programmatically selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    component.selected = true;
+    await elementUpdated(component);
+    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+    expect(checkbox?.checked).to.be.true;
+});
+it('is deselected when programmatically deselected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+      private-multiple
+      selected
+    ></glide-core-dropdown-option>`);
+    component.selected = false;
+    await elementUpdated(component);
+    const checkbox = component.shadowRoot?.querySelector('[data-test="checkbox"]');
+    expect(component.selected).to.be.false;
+    expect(component.ariaSelected).to.equal('false');
+    expect(checkbox?.checked).to.be.false;
+});

package/dist/dropdown.option.test.interactions.single.js

@@ -0,0 +1,22 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdownOption from './dropdown.option.js';
+GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
+it('is selected on click', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+    ></glide-core-dropdown-option>`);
+    component.click();
+    await elementUpdated(component);
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+});
+it('is selected when programmatically selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      value="value"
+    ></glide-core-dropdown-option>`);
+    component.selected = true;
+    await elementUpdated(component);
+    expect(component.selected).to.be.true;
+    expect(component.ariaSelected).to.equal('true');
+});

package/dist/dropdown.styles.js

@@ -1,10 +1,14 @@
-"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     .component {
       --min-inline-size: 9.375rem;
 
       font-family: var(--glide-core-font-sans);
     }
 
+    .selected-option-labels {
+      ${visuallyHidden};
+    }
+
     .dropdown-and-options {
       display: flex;
       position: relative;
@@ -46,7 +50,7 @@
       }
 
       &.disabled {
-        background: var(--glide-core-surface-base-gray-light);
+        background: var(--glide-core-surface-disabled);
         color: var(--glide-core-text-tertiary-disabled);
       }
 
@@ -55,15 +59,20 @@
         color: var(--glide-core-status-error);
       }
 
+      &.readonly {
+        border-color: transparent;
+        padding-inline-start: 0;
+      }
+
       &:has(.button:focus-visible, .input:focus-visible) {
-        ${i};
+        ${focusOutline};
       }
 
-      &:hover:not(&.error, &.disabled) {
+      &:hover:not(&.error, &.disabled, &.readonly) {
         border-color: var(--glide-core-border-base);
       }
 
-      &.quiet:hover:not(&.error, &.disabled, &.multiple) {
+      &.quiet:hover:not(&.error, &.disabled, &.multiple, &.readonly) {
         background-color: var(--glide-core-surface-hover);
       }
     }
@@ -130,6 +139,7 @@
       background: none;
       block-size: var(--button-and-input-height);
       border: none;
+      cursor: inherit;
       display: flex;
       padding: 0;
 
@@ -139,8 +149,10 @@
     }
 
     .input {
+      background-color: transparent;
       block-size: var(--button-and-input-height);
       border: none;
+      cursor: inherit;
       font-size: inherit;
       min-inline-size: var(--min-inline-size);
       padding: 0;
@@ -159,4 +171,11 @@
         font-family: var(--glide-core-font-sans);
       }
     }
-  `];
+
+    .caret-icon {
+      &.disabled,
+      &.readonly {
+        color: var(--glide-core-surface-selected-disabled);
+      }
+    }
+  `];

package/dist/dropdown.test.basics.filterable.js

@@ -0,0 +1,84 @@
+import './dropdown.option.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreDropdown from './dropdown.js';
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+const defaultSlot = html `
+  <glide-core-dropdown-option
+    label="One"
+    value="one"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Two"
+    value="two"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Three"
+    value="three"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Four"
+    value="four"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Five"
+    value="five"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Six"
+    value="six"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Seven"
+    value="seven"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Eight"
+    value="eight"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Nine"
+    value="nine"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Ten"
+    value="ten"
+  ></glide-core-dropdown-option>
+
+  <glide-core-dropdown-option
+    label="Eleven"
+    value="eleven"
+  ></glide-core-dropdown-option>
+`;
+it('is accessible', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    await expect(component).to.be.accessible({
+        // Axe doesn't search within slots when determining whether an element
+        // has an ID that matches `aria-activedescendant` exists.
+        ignoredRules: ['aria-valid-attr-value'],
+    });
+});
+it('is filterable', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.checkVisibility()).to.be.true;
+});
+it('uses `placeholder` as a placeholder when not `multiple` and no option is selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      ${defaultSlot}
+    </glide-core-dropdown>`);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.placeholder).to.equal('Placeholder');
+});

package/dist/dropdown.test.basics.js

@@ -0,0 +1,233 @@
+import './dropdown.option.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import { repeat } from 'lit/directives/repeat.js';
+import GlideCoreDropdown from './dropdown.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+// You'll notice quite a few duplicated tests among the "*.single.ts", "*.multiple.ts",
+// and "*.filterable.ts" test suites. The thinking is that a test warrants
+// duplication whenever Dropdown's internal logic isn't shared among all three
+// of those states or if one state goes down a significantly different code path.
+//
+// There are still gaps. And there are exceptions to avoid excessive duplication
+// for the sake of organization. Many of the tests in `dropdown.test.interactions.ts`,
+// for example, don't apply to the filterable case and so aren't common among all
+// three states. They nonetheless reside there because moving them out and
+// duplicating them in both `dropdown.test.interactions.single.ts` and
+// `dropdown.test.interactions.multiple.ts` would add a ton of test weight.
+GlideCoreDropdown.shadowRootOptions.mode = 'open';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-dropdown')).to.equal(GlideCoreDropdown);
+});
+it('has defaults', async () => {
+    // Required attributes are supplied here and thus left unasserted below. The
+    // idea is that this test shouldn't fail to typecheck if these templates are
+    // eventually typechecked, which means supplying all required attributes and slots.
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.hasAttribute('disabled')).to.be.false;
+    expect(component.disabled).to.equal(false);
+    expect(component.getAttribute('name')).to.be.null;
+    expect(component.name).to.equal(undefined);
+    expect(component.hasAttribute('required')).to.be.false;
+    expect(component.required).to.equal(false);
+    expect(component.getAttribute('size')).to.equal('large');
+    expect(component.size).to.equal('large');
+    // Not reflected, so no attribute assertion is necessary.
+    expect(component.value).to.deep.equal([]);
+});
+it('can have a label', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.getAttribute('label')).to.equal('Label');
+    expect(component.label).to.equal('Label');
+});
+it('can have a placeholder', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.getAttribute('placeholder')).to.equal('Placeholder');
+    expect(component.placeholder).to.equal('Placeholder');
+});
+it('can have a description', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <div slot="description">Description</div>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="description"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Description');
+});
+it('can have a tooltip', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+      <div slot="tooltip">Tooltip</div>
+    </glide-core-dropdown>`);
+    const assignedElements = component.shadowRoot
+        ?.querySelector('slot[name="tooltip"]')
+        ?.assignedElements();
+    expect(assignedElements?.at(0)?.textContent).to.equal('Tooltip');
+});
+it('can have a `name`', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      name="name"
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.getAttribute('name')).to.equal('name');
+    expect(component.name).to.equal('name');
+});
+it('can have a `size`', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      size="small"
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.getAttribute('size')).to.equal('small');
+    expect(component.size).to.equal('small');
+    const option = component.querySelector('glide-core-dropdown-option');
+    expect(option?.privateSize).to.equal('small');
+});
+it('can be `disabled`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.hasAttribute('disabled')).to.be.true;
+    expect(component.disabled).to.equal(true);
+});
+it('can be `required`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.hasAttribute('required')).to.be.true;
+    expect(component.required).to.equal(true);
+});
+it('can be `multiple`', async () => {
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.hasAttribute('multiple')).to.be.true;
+    expect(component.multiple).to.equal(true);
+});
+it('can be `select-all`', async () => {
+    const component = await fixture(html `<glide-core-dropdown
+      label="Label"
+      placeholder="Placeholder"
+      multiple
+      select-all
+    >
+      <glide-core-dropdown-option
+        label="Label"
+        value="value"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    expect(component.hasAttribute('select-all')).to.be.true;
+    expect(component.selectAll).to.equal(true);
+});
+it('activates the first option when no options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0]?.privateActive).to.be.true;
+    expect(options[1]?.privateActive).to.be.false;
+});
+it('activates the last selected option when options are initially selected', async () => {
+    const component = await fixture(html `<glide-core-dropdown open>
+      <glide-core-dropdown-option
+        label="One"
+        value="one"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Two"
+        value="two"
+        selected
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        value="three"
+        selected
+      ></glide-core-dropdown-option>
+    </glide-core-dropdown>`);
+    const options = component.querySelectorAll('glide-core-dropdown-option');
+    expect(options[0]?.privateActive).to.be.false;
+    expect(options[1]?.privateActive).to.be.false;
+    expect(options[2]?.privateActive).to.be.true;
+});
+it('throws if the default slot is the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+        <button>Button</button>
+      </glide-core-dropdown>`);
+    });
+});
+it('does not throw if the default slot only contains whitespace', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
+        ${repeat([], () => html `<glide-core-dropdown-option
+              label="Option"
+              value="option"
+            ></glide-core-dropdown-option>`)}
+      </glide-core-dropdown>`);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.notCalled).to.be.true;
+});