@crowdstrike/glide-core 0.12.1 → 0.12.3

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

@@ -24,40 +24,11 @@ it('has defaults', async () => {
     expect(component.privateActive).to.be.false;
     expect(component.privateIndeterminate).to.be.false;
 });
-it('can have a label', async () => {
+it('is selectable', async () => {
     const component = await fixture(html `<glide-core-dropdown-option
       label="Label"
-      value="value"
+      selected
     ></glide-core-dropdown-option>`);
-    const label = component.shadowRoot?.querySelector('[data-test="label"]');
-    expect(label?.textContent?.trim()).to.equal('Label');
-});
-it('can have an icon', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option label="Label" value="value">
-      <svg slot="icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
-        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
-
-        <path
-          d="M12 16L12 12"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-        />
-
-        <circle cx="12" cy="8" r="1" fill="currentColor" />
-      </svg>
-    </glide-core-dropdown-option>`);
-    const icon = component?.shadowRoot
-        ?.querySelector('slot[name="icon"]')
-        ?.assignedElements()
-        .at(0);
-    expect(icon instanceof SVGElement).to.be.true;
-});
-it('can have a value', async () => {
-    const component = await fixture(html `<glide-core-dropdown-option
-      label="Label"
-      value="value"
-    ></glide-core-dropdown-option>`);
-    expect(component.getAttribute('value')).to.equal('value');
-    expect(component.value).to.equal('value');
+    const checkedIconContainer = component.shadowRoot?.querySelector('[data-test="checked-icon-container"]');
+    expect(checkedIconContainer instanceof Element).to.be.true;
 });

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

@@ -25,3 +25,12 @@ it('is deselected when initially deselected', async () => {
     expect(component.ariaSelected).to.equal('false');
     expect(checkbox?.checked).to.be.false;
 });
+it('is editable', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      editable
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
+    expect(button?.checkVisibility()).to.be.true;
+});

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

@@ -19,3 +19,11 @@ it('is deselected when initially deselected', async () => {
     expect(component.selected).to.be.false;
     expect(component.ariaSelected).to.equal('false');
 });
+it('is editable', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      editable
+    ></glide-core-dropdown-option>`);
+    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
+    expect(button?.checkVisibility()).to.be.true;
+});

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

@@ -28,3 +28,15 @@ it('is deselected when programmatically deselected', async () => {
     expect(component.ariaSelected).to.equal('false');
     expect(checkbox?.checked).to.be.false;
 });
+it('sets `privateIsEditActive`', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      editable
+      private-multiple
+    ></glide-core-dropdown-option>`);
+    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
+    button?.dispatchEvent(new MouseEvent('mouseover'));
+    expect(component.privateIsEditActive).to.be.true;
+    button?.dispatchEvent(new MouseEvent('mouseout'));
+    expect(component.privateIsEditActive).to.be.false;
+});

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

@@ -63,3 +63,14 @@ it('has no tooltip when active and with a short label set programmatically', asy
     const tooltip = component.shadowRoot?.querySelector('[data-test="tooltip"]');
     expect(tooltip?.checkVisibility()).to.be.false;
 });
+it('sets `privateIsEditActive`', async () => {
+    const component = await fixture(html `<glide-core-dropdown-option
+      label="Label"
+      editable
+    ></glide-core-dropdown-option>`);
+    const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
+    button?.dispatchEvent(new MouseEvent('mouseover'));
+    expect(component.privateIsEditActive).to.be.true;
+    button?.dispatchEvent(new MouseEvent('mouseout'));
+    expect(component.privateIsEditActive).to.be.false;
+});

package/dist/dropdown.styles.js

@@ -1,5 +1,6 @@
-import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${opacityAndScaleAnimation(".options:popover-open")}
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
+    ${focusOutline(".add-button:focus-visible")}
+    ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
     .component {
@@ -13,6 +14,19 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       position: relative;
     }
 
+    glide-core-private-label {
+      &::part(private-control-and-summary) {
+        /* 
+          The Label component's grid column styling combined with the fact that 
+          ".dropdown-and-options" isn't a direct descendant of that grid means that 
+          Dropdown's label won't shrink when space constrained without a minimum 
+          width on Label's ".control-and-summary". It's not clear to me why Grid 
+          behaves this way.
+        */
+        min-inline-size: var(--min-inline-size);
+      }
+    }
+
     .dropdown {
       --button-and-input-height: 1.25rem;
 
@@ -37,7 +51,6 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
         background-color 200ms ease-in-out,
         border-color 200ms ease-in-out;
       user-select: none;
-      white-space: nowrap;
 
       &.quiet:not(.multiple) {
         background-color: transparent;
@@ -67,57 +80,58 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
 
       &.quiet {
-        &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
-            &.error,
-            &.disabled,
-            &.multiple,
-            &.readonly
-          ) {
+        &:is(
+            :hover,
+            :has(.primary-button:focus-visible, .input:focus-visible)
+          ):not(&.error, &.disabled, &.multiple, &.readonly) {
           background-color: var(--glide-core-surface-hover);
           color: var(--glide-core-text-body-1);
         }
       }
 
-      &:is(:hover, :has(.button:focus-visible, .input:focus-visible)):not(
-          &.disabled,
-          &.error,
-          &.quiet,
-          &.readonly
-        ) {
+      &:is(
+          :hover,
+          :has(.primary-button:focus-visible, .input:focus-visible)
+        ):not(&.disabled, &.error, &.quiet, &.readonly) {
         border-color: var(--glide-core-border-focus);
       }
 
-      &:has(.button:focus-visible, .input:focus-visible) {
+      &:has(.primary-button:focus-visible, .input:focus-visible) {
         &.quiet {
           border-color: var(--glide-core-border-focus);
         }
       }
     }
 
-    .options {
+    .options-and-footer {
       --border-width: 1px;
-      --padding: var(--glide-core-spacing-xxxs);
 
       background-color: var(--glide-core-surface-modal);
-      border: var(--border-width) solid var(--glide-core-surface-modal);
+      border: var(--border-width) solid var(--glide-core-border-base-lighter);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
-      box-sizing: border-box;
       inset: unset;
+      min-inline-size: var(--min-inline-size);
+      padding: 0;
+      position: absolute;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .options {
+      --padding: var(--glide-core-spacing-xxxs);
+
+      box-sizing: border-box;
       max-block-size: calc(
         var(--private-option-height) * 9 + var(--padding) * 2 +
           var(--border-width) * 2
       );
-      min-inline-size: var(--min-inline-size);
       overflow: auto;
       padding: var(--padding);
-      position: absolute;
       scroll-behavior: smooth;
 
-      &.hidden {
-        display: none;
-      }
-
       &.large {
         --private-option-height: 1.75rem;
       }
@@ -127,6 +141,71 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
+    .footer {
+      background-color: var(--glide-core-surface-page);
+      border-block-start: 1px solid var(--glide-core-border-base);
+      box-shadow: 0 -8px 8px -8px
+        var(--glide-core-surface-base-gray, rgb(0 0 0 / 40%));
+      display: none;
+      inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
+      inset-block-end: 0;
+      padding: var(--glide-core-spacing-xxxs);
+
+      /* 
+        "sticky" is a little hack so that footer is absolutely positioned but 
+        its space in layout is preserved, so it doesn't overlap the last option.
+      */
+      position: sticky;
+
+      &.visible {
+        display: block;
+      }
+    }
+
+    .add-button {
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-radius: 0.75rem;
+      display: flex;
+      font-family: var(--glide-core-body-sm-font-family);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      inline-size: 100%;
+      line-height: 100%;
+      text-align: start;
+
+      &.large {
+        --size: 1rem;
+
+        column-gap: 0.625rem;
+        font-size: var(--glide-core-body-sm-font-size);
+        padding-block: 0.375rem;
+        padding-inline: var(--glide-core-spacing-sm);
+      }
+
+      &.small {
+        --size: 0.875rem;
+
+        column-gap: var(--glide-core-spacing-xs);
+        font-size: var(--glide-core-body-xs-font-size);
+        padding-block: var(--glide-core-spacing-xxxs);
+        padding-inline: var(--glide-core-spacing-xs);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline-offset: -2px;
+      }
+
+      &:focus,
+      &:hover {
+        background-color: var(--glide-core-surface-hover);
+      }
+    }
+
     .select-all {
       border-block-end: 1px solid var(--glide-core-border-base-light);
       margin-block-end: var(--glide-core-spacing-xxxs);
@@ -172,8 +251,8 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
-    .tag-overflow-text-and-button {
-      column-gap: var(--glide-core-spacing-md);
+    .tag-overflow-and-buttons {
+      align-items: center;
       display: flex;
       margin-inline-start: auto;
     }
@@ -181,6 +260,7 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
     .tag-overflow-text {
       align-content: center;
       color: var(--glide-core-text-link);
+      margin-inline-end: var(--glide-core-spacing-md);
     }
 
     .single-select-icon-slot {
@@ -197,15 +277,28 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
+    .internal-label-tooltip {
+      display: none;
+      overflow: hidden;
+
+      &.visible {
+        display: block;
+      }
+    }
+
     .internal-label {
+      overflow: hidden;
+
       /*
         2px so the label is vertically aligned. "vertical-align: middle" has no
         effect on flex children.
       */
       padding-block-start: 0.125rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .button {
+    .primary-button {
       align-items: center;
       background: none;
       block-size: var(--button-and-input-height);
@@ -219,6 +312,11 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
       }
     }
 
+    .edit-button {
+      display: flex;
+      margin-inline-end: var(--glide-core-spacing-xxs);
+    }
+
     .input {
       background-color: transparent;
       block-size: var(--button-and-input-height);

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

@@ -4,60 +4,17 @@ 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>
+  <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Four"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
+  <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
 `;
 it('is accessible', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" multiple>