Releases · CrowdStrike/glide-core

Minor Changes

#461 52a9255 Thanks @ynotdraw! - We've adopted the latest iteration of Dark Mode in all of our components and styles including:
- Accordion received border and box-shadow visual adjustments.
- Checkbox received a border when hovering and a box-shadow visual adjustment.
- Dropdown's "select all" and "add" functionality has been updated to use a border rather than background-color.
- Menu now has a lighter border around the popover to match Dropdown.
- Consumers previously using --glide-core-surface-base-lightest for app backgrounds should switch to --glide-core-background-fill instead.
#463 7017a73 Thanks @clintcs! - Dropdown no longer dispatches a "filter" event when filtering.

The "filter" event wasn't fully thought through and had a few shortcomings:
- There was no way for consumers to override Dropdown's default and synchronous filtering predicate.
- It required consumers to add and remove options from the DOM on "filter".
  And the removal of a selected option when filtering a multiselect Dropdown meant the option's corresponding tag was also removed.
Replacing the event is filter() and its default implementation:
```
async filter(query: string): Promise<GlideCoreDropdownOption[]> {
  const options = [...this.querySelectorAll('glide-core-dropdown-option')];

  return options.filter(({ label }) => {
    return label.toLowerCase().includes(query.toLowerCase().trim()),
  });
}
```
- You can override filter() with whatever filtering logic you need.
- The options you return in filter() will be shown. All others will be hidden.
- filter() must return a promise.
  Dropdown will wait for it to resolve before showing and hiding options in case you're fetching them or your filtering logic lives on the server.
#476 16db0bd Thanks @danwenzel! - CSS flex attributes for Tab Group have been moved to the host element.

Having a separate, intermediate flex container inside the closed shadow root made it difficult to impossible for consumers to control their flex layout.

#468 97d8c20 Thanks @clintcs! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

Light

Removed

-  --glide-core-surface-tag-default: #00000012;

Added

+  --glide-core-surface-base-gray-lightest: #00000008;

Changed

- --glide-core-surface-base-gray-lighter: #00000008;
+ --glide-core-surface-base-gray-lighter: #0000000d;

Dark

Removed

-  --glide-core-surface-tag-default: #ffffff1a;

Changed

-  --glide-core-surface-white-1percent: #000000e5;
+  --glide-core-surface-white-1percent: #ffffff03;

System

Removed

-  --glide-core-page-size-height: 46.875rem;

#475 7ccebe3 Thanks @clintcs! - Button Group's "change" event's target property is now set to the selected button.
#464 fd6c79d Thanks @ynotdraw! - The sticky attribute for Tab Group wasn't fully thought through. It was decided it is safe to remove it in favor of making the Tab Panel scroll when needed instead.
```
- <glide-core-tab-group sticky>
+ <glide-core-tab-group>
```
```
<glide-core-tab-panel style="overflow-y: auto"></glide-core-tab-panel>
```

Patch Changes

#477 054ae33 Thanks @clintcs! - Safari no longer leaves full screen on Escape in Menu, Modal, and Split Button.
#469 634ce71 Thanks @clintcs! - The duration of Tag's animation when it is added or removed has been reduced from 200 to 100 milliseconds.
#466 603fc71 Thanks @clintcs! - Filterable Dropdown now relays to screenreaders the number of results upon filtering.

#461 52a9255 Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

Light

Added

+ --glide-core-background-fill: #15141400;
+ --glide-core-effects-shadow-large-background-blur: 12.5rem;
+ --glide-core-effects-shadow-large-blur: 0.875rem;
+ --glide-core-effects-shadow-large-fill: #00000040;
+ --glide-core-effects-shadow-large-spread: 0rem;
+ --glide-core-effects-shadow-large-x: 0rem;
+ --glide-core-effects-shadow-large-y: 0.25rem;
+ --glide-core-effects-shadow-xlarge-background-blur: 6.25rem;
+ --glide-core-effects-shadow-xlarge-blur: 3.75rem;
+ --glide-core-effects-shadow-xlarge-fill: #adadad;
+ --glide-core-effects-shadow-xlarge-spread: 0rem;
+ --glide-core-effects-shadow-xlarge-x: 0rem;
+ --glide-core-effects-shadow-xlarge-y: 0.25rem;

Dark

Added

+ --glide-core-background-fill: #151414f7;
+ --glide-core-effects-shadow-large-background-blur: 12.5rem;
+ --glide-core-effects-shadow-large-blur: 3.125rem;
+ --glide-core-effects-shadow-large-fill: #00000080;
+ --glide-core-effects-shadow-large-spread: 0rem;
+ --glide-core-effects-shadow-large-x: 0rem;
+ --glide-core-effects-shadow-large-y: 0.625rem;
+ --glide-core-effects-shadow-xlarge-background-blur: 0rem;
+ --glide-core-effects-shadow-xlarge-blur: 4rem;
+ --glide-core-effects-shadow-xlarge-fill: #000000f7;
+ --glide-core-effects-shadow-xlarge-spread: 0rem;
+ --glide-core-effects-shadow-xlarge-x: 0rem;
+ --glide-core-effects-shadow-xlarge-y: 0.25rem;
+ --glide-core-surface-base-gray-lightest: #ffffff0d;

Changed

- --glide-core-border-action: #0073e6;
+ --glide-core-border-action: #3989da;

- --glide-core-border-base: #6d6d6d;
+ --glide-core-border-base: #585858;

- --glide-core-border-base-dark: #c9c9c9;
+ --glide-core-border-base-dark: #8a8a8a;

- --glide-core-border-base-darker: #e3e3e3;
+ --glide-core-border-base-darker: #424242;

- --glide-core-border-base-light: #212121;
+ --glide-core-border-base-light: #424242;

- --glide-core-border-base-lighter: #212121;
+ --glide-core-border-base-lighter: #424242;

- --glide-core-border-base-lightest: #424242;
+ --glide-core-border-base-lightest: #c9c9c9;

- --glide-core-border-base-transparent: #0000001a;
+ --glide-core-border-base-transparent: #ffffff1a;

- --glide-core-border-focus: #0073e6;
+ --glide-core-border-focus: #3989da;

- --glide-core-border-primary: #ffffff;
+ --glide-core-border-primary: #424242;

- --glide-core-border-primary-hover: #0461cf;
+ --glide-core-border-primary-hover: #3989da;

- --glide-core-icon-active: #0073e6;
+ --glide-core-icon-active: #3989da;

- --glide-core-icon-default: #ffffff;
+ --glide-core-icon-default: #f0f0f0;

- --glide-core-icon-default2: #212121;
+ --glide-core-icon-default2: #8a8a8a;

- --glide-core-icon-display: #ffffff;
+ --glide-core-icon-display: #f0f0f0;

- --glide-core-icon-display-light: #d7e7ff;
+ --glide-core-icon-display-light: #8a8a8a;

- --glide-core-icon-primary: #ffffff;
+ --glide-core-icon-primary: #73b2f3;

- --glide-core-icon-primary-hover: #d7e7ff;
+ --glide-core-icon-primary-hover: #4d99e7;

- --glide-core-icon-secondary-disabled: #d7e7ff;
+ --glide-core-icon-secondary-disabled: #c9c9c9;

- --glide-core-icon-selected: #ffffff;
+ --glide-core-icon-selected: #f0f0f0;

- --glide-core-icon-selected-disabled: #eef5ff;
+ --glide-core-icon-selected-disabled: #c9c9c9;

- --glide-core-icon-selected2: #424242;
+ --glide-core-icon-selected2: #f0f0f0;

- --glide-core-icon-tertiary-disabled: #6d6d6d;
+ --glide-core-icon-tertiary-disabled: #ffffff8c;

- --glide-core-status-error: #ff3b30;
+ --glide-core-status-error: #db4743;

- --glide-core-status-expired: #ff3b30;
+ --glide-core-status-expired: #db4743;

- --glide-core-status-failed: #ff3b30;
+ --glide-core-status-failed: #db4743;

- --glide-core-status-in-progress: #ffcc00;
+ --glide-core-status-in-progress: #fad232;

- --glide-core-status-q...

Patch Changes

#456 72ebc6f Thanks @clintcs! - Multiselect Dropdown now correctly applies focus to the next tag when its corresponding option doesn't have a value.
#451 f186857 Thanks @clintcs! - - Filterable Dropdown no longer clears its filter when a tag is removed.
- Dropdown has a new add-button-label attribute for labeling and adding a button to the bottom of Dropdown's menu.
  An "add" event, which you can use to show a modal, is emitted when the button is clicked.
#459 2f31b54 Thanks @clintcs! - Single-select Dropdown now truncates the selected option's label when it would otherwise overflow.

Patch Changes

#453 196a880 Thanks @clintcs! - - Menu nows reacts to options added dynamically to Menu Options.
- Menu no longer activates the first option when another option is already active and a new option is dynamically added.
#454 d6f150f Thanks @ynotdraw! - Tab Group supports the following CSS custom properties:
- --panel-padding-inline-end
- --panel-padding-inline-start
- --tabs-padding-block-end
- --tabs-padding-block-start
- --tabs-padding-inline-end
- --tabs-padding-inline-start
#437 dd67616 Thanks @clintcs! - - Dropdown Options are now editable via the editable attribute, which will add a button with a pencil icon to the option.
An "edit" event, which you can use to show a modal, is emitted when the button is clicked.
- Multiselect Dropdown no longer submits its form when Enter is pressed on a tag removal button.
- Multiselect Dropdown's tags can no longer be removed when Dropdown is disabled or read-only.

Patch Changes

#449 505d9da Thanks @ynotdraw! - Tab Group sets the background-color only when it is provided with the sticky attribute to prevent content from bleeding into the background while a user scrolls.

Minor Changes

#443 5d6a013 Thanks @ynotdraw! - Checkbox's setValidity() no longer accepts a third anchor argument due to it not being utilized. The anchor is automatically set to itself.
#443 5d6a013 Thanks @ynotdraw! - Input and Textarea are no longer invalid when maxlength is exceeded to match native's behavior.

Patch Changes

#440 deeca7a Thanks @clintcs! - Menu now has an offset attribute for changing the distance between its menu and target.

#446 5746d95 Thanks @clintcs! - - Tag's background color when disabled has been updated to improve Tag's visibility when placed on another disabled component.

@crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

Light

- --glide-core-surface-primary-disabled: #1d7afc26;
+ --glide-core-surface-primary-disabled: #d7e7ff;

+ --glide-core-generic-border-active: #6d6d6d;
+ --glide-core-surface-tag-default: #00000012;

Dark

+ --glide-core-generic-border-active: #6d6d6d;
+ --glide-core-surface-tag-default: #ffffff1a;

System

+ --glide-core-number-14: 0.875rem;
+ --glide-core-number-16: 1rem;

#444 b6d24ce Thanks @clintcs! - Dropdown now opens and closes when any part of it is clicked. Previously, it would only close from a click outside of itself or one on the button with the caret icon.
#443 5d6a013 Thanks @ynotdraw! - Input now supports a pattern attribute like the native input element. Unlike native, pattern validation occurs independently of the required attribute, allowing optional fields to be marked invalid if the pattern isn't matched.
```
<glide-core-input label="Label" pattern="[a-z]{4,8}"></glide-core-input>
```
```
// Returns `false`.
document.querySelector('glide-core-input').checkValidity();
```
#443 5d6a013 Thanks @ynotdraw! - Updated Checkbox so that removing the required attribute returns it to a valid state.
#441 a6d3e61 Thanks @clintcs! - Menu now supports <span>s and <div>s as its target.
If you're currently using a <span> or <div> and are handling keyboard events from it or setting tabindex on it, you can remove that code.

#443 5d6a013 Thanks @ynotdraw! - Checkbox, Checkbox Group, Dropdown, Input, Radio Group, and Textarea now support setValidity() and setCustomValidity() methods like their native counterparts to allow for triggering validation with user-provided error messages.

const input = document.querySelector('glide-core-input');

// `setCustomValidity()` sets the validity message on the element
// and places the element in an invalid state.
input.setCustomValidity(
  'Please enter a name that is greater than 1 character.',
);

// The element is now marked as invalid.
// Returns `false`.
input.checkValidity();

// Displays the validity message to the user.
// Returns `false`.
input.reportValidity();

// Like native, provide an empty string to change
// the validity state to valid.
input.setCustomValidity('');

const input = document.querySelector('glide-core-input');

// `setValidity()` accepts ValidityStateFlags as the first
// argument and a string for the validity message as the second
// argument
input.setValidity(
  { customError: true },
  'Please enter a name that is greater than 1 character.',
);

// The element is now marked as invalid.
// Returns `false`.
input.checkValidity();

// Displays the validity message to the user.
// Returns `false`.
input.reportValidity();

// Like native, provide an empty object for ValidityStateFlags
// to change the validity state to valid.
input.setValidity({});

#445 a219f5a Thanks @clintcs! - Single-select Dropdown now closes when an already selected option is clicked.

Minor Changes

#435 438afa2 Thanks @clintcs! - Tag no longer has a textContent getter. You can use Tag's label attribute instead.

Patch Changes

#436 4cc7003 Thanks @clintcs! - Dropdown now emits a custom "filter" event when filtering. The event's detail property is the value filtered.
#433 a73866c Thanks @clintcs! - When an option is selected and that option's label is changed programmatically, Dropdown now updates the label of its button when single-select, the label of its tags when multiselect, and the value of its input field when filterable.
#439 a57249b Thanks @ynotdraw! - Tooltip was updated to have a higher contrast in dark mode.
#428 42d162f Thanks @danwenzel! - Allow custom target icon for Tree Item Menu.
#432 38b7c7d Thanks @clintcs! - Checkbox Group no longer unchecks Checkboxes whose value is changed programmatically.
#438 79c4cce Thanks @clintcs! - Tag now has a disabled attribute that changes its color and disables its removal button.

#439 a57249b Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

System

+ --glide-core-page-size-details-panel: 27.375rem;
+ --glide-core-page-size-height: 46.875rem;
+ --glide-core-page-size-width: 83.3125rem;

Dark

- --glide-core-surface-base-dark: #212121;
+ --glide-core-surface-base-dark: #f0f0f0;

#435 438afa2 Thanks @clintcs! - Dropdown no longer shows a tooltip on the first option when it has overflowing text and Dropdown is opened via click.
Dropdown still shows a tooltip when the option is arrowed to or hovered.
#431 42c6b45 Thanks @ynotdraw! - Tab Group now supports a sticky attribute, enabling the group to remain fixed at the top of the panel even when the panel content is scrolled.

Minor Changes

#392 01b3c80 Thanks @clintcs! - Split Button Container has a new API to accommodate a new design requirement for its buttons to disabled independently of one another.
See Storybook for the full API.

Before

<script>
  import '@crowdstrike/glide-core/split-container.js';
  import '@crowdstrike/glide-core/split-button.js';
  import '@crowdstrike/glide-core/menu.link.js';
  import '@crowdstrike/glide-core/menu.button.js';
</script>

<glide-core-split-container
  menu-label="Label"
  menu-placement="top-end"
  open
  disabled
>
  <glide-core-split-button slot="primary-action">
    Button
    <glide-core-example-icon slot="prefix"></glide-core-example-icon>
  </glide-core-split-button>

  <glide-core-menu-button label="Label"></glide-core-menu-button>
</glide-core-split-container>

After

<script>
  import '@crowdstrike/glide-core/split-button.js';
  import '@crowdstrike/glide-core/split-button.primary-button.js';
  import '@crowdstrike/glide-core/split-button.secondary-button.js';
  import '@crowdstrike/glide-core/menu.button.js';
</script>

<glide-core-split-button>
  <glide-core-split-button-primary-button label="Label" disabled>
    <glide-core-example-icon slot="icon"></glide-core-example-icon>
  </glide-core-split-button-primary-button>

  <glide-core-split-button-secondary-button
    slot="secondary-button"
    label="Label"
    menu-placement="top-end"
    disabled
    menu-open
  >
    <glide-core-menu-button label="Label"></glide-core-menu-button>
  </glide-core-split-button-secondary-button>
</glide-core-split-button>

#413 6abae27 Thanks @clintcs! - Input's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icon".

<glide-core-input label="Label" placeholder="Placeholder">
  <glide-core-example-icon
-   slot="prefix"
+   slot="prefix-icon"
    name="edit"
  ></glide-core-example-icon>
  <glide-core-example-icon
-   slot="suffix"
+   slot="suffix-icon"
    name="share"
  ></glide-core-example-icon>
</glide-core-input>

#400 ee0aa37 Thanks @clintcs! - Tooltip's default slot no longer supports a shortcut.
Use the new shortcut attribute instead.
This change is to support a new design requirement restricting the width of non-shortcut content.
```
<glide-core-tooltip shortcut='["CMD","K"]'> Tooltip </glide-core-tooltip>
```

#407 c9d9655 Thanks @clintcs! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

Light

- --glide-core-text-syntax-blue: #0000ff;
- --glide-core-text-syntax-dark: #151515;
- --glide-core-text-syntax-green: #116644;
- --glide-core-text-syntax-purple: #770088;
- --glide-core-text-syntax-red-dark: #95150e;
- --glide-core-text-syntax-red-light: #ee4400;

- --glide-core-text-body-lighter: #c9c9c9;
+ --glide-core-text-body-lighter: #8a8a8a;

+ --glide-core-border-base-transparent: #0000001a;
+ --glide-core-surface-table-row-hover: #1d7afc26;

Dark

- --glide-core-text-syntax-blue: #0000ff;
- --glide-core-text-syntax-dark: #ffffff;
- --glide-core-text-syntax-green: #116644;
- --glide-core-text-syntax-purple: #770088;
- --glide-core-text-syntax-red-dark: #95150e;
- --glide-core-text-syntax-red-light: #ee4400;

- --glide-core-text-body-lighter: #c9c9c9;
+ --glide-core-text-body-lighter: #8a8a8a;

- --glide-core-text-placeholder: #d7e7ff;
+ --glide-core-text-placeholder: #c9c9c9;

+ --glide-core-border-base-transparent: #0000001a;
+ --glide-core-surface-table-row-hover: #1d7afc26;

#401 7231487 Thanks @ynotdraw! - Removed Status Indicator. It was only used by Toast. Moved it to the consuming application.
#387 37841e9 Thanks @clintcs! - Modal's show-back-button attribute has been renamed to back-button for brevity.
```
- <glide-core-modal label="Label" show-back-button>
+ <glide-core-modal label="Label" back-button>
```
Drawer's open() method has been renamed to show() to match <dialog>.
```
const drawer = document.querySelector('glide-core-modal');

- drawer.open();
+ drawer.show();
```
Modal no longer emits an "open" event on open to match <dialog>. You can instead listen for a "click" event on the button that opens your Modal.
#385 b3e8efd Thanks @clintcs! - Menu no longer offers a focus() method, which focused its target. Simply call focus() on your target directly.

#388 5a0f3a2 Thanks @clintcs! - Button's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icon".

<glide-core-button label="Label">
  <glide-core-example-icon
-   slot="prefix"
+   slot="prefix-icon"
    name="calendar"
  ></glide-core-example-icon>
  <glide-core-example-icon
-   slot="suffix"
+   slot="suffix-icon"
    name="edit"
  ></glide-core-example-icon>
</glide-core-button>

Button Group Button's "prefix" slot has been renamed to "icon".

<glide-core-button-group label="Label">

  <glide-core-button-group-button label="One">
    <glide-core-example-icon
-     slot="prefix"
+     slot="icon"
      name="calendar"
    ></glide-core-example-icon>
  </glide-core-button-group-button>
</glide-core-button-group>

Accordion's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icons".

<glide-core-accordion label="Label">
  Content

  <glide-core-example-icon
-   slot="prefix"
+   slot="prefix-icon"
    name="share"
  ></glide-core-example-icon>
  <glide-core-example-icon
-   slot="suffix"
+   slot="suffix-icons"
    name="edit"
  ></glide-core-example-icon>
  <glide-core-example-icon
-   slot="suffix"
+   slot="suffix-icons"
    name="settings"
  ></glide-core-example-icon>
</glide-core-accordion>

Accordion no longer dispaches a custom event. Accordion's state, which was available via the custom event's detail property, can be accessed via the open property.

- $0.addEventListener('toggle', (e) => console.log(e.detail.newState === 'open'))
+ $0.addEventListener('toggle', (e) => console.log(e.target.open))

#377 a3381d8 Thanks @clintcs! - Tag's default slot has been replaced by a label attribute to restrict its content to enforce visual consistency.

- <glide-core-tag>Label</glide-core-tag>
+ <glide-core-tag label="Label"></glide-core-tag>

Tag's removable-label attribute has been renamed to removable and is now boolean. Tag will use label instead to describe its removal button to screenreaders.

- <glide-core-tag removable-label="remove">Tag</glide-core-tag>
+ <glide-core-tag label="Label" removable></glide-core-tag>

Tag's "prefix" slot has been renamed "icon".

<glide-core-tag label="Label">
  <glide-core-example-icon
    name="drag-dots"
-   slot="prefix"
+   slot="icon"
  ></glide-core-example-icon>
</glide-core-tag>

#397 efe4812 Thanks @clintcs! - Button now has a label attribute instead of a default slot to restrict its content to increase design consistency.
```
- <glide-core-button>Label</glide-core-button>
+ <glide-core-button label="Label"></glide-core-button>
```
#386 1438848 Thanks @clintcs! - The order of the values in Dropdown's value array no longer changes when the value of a selected Dropdown Option is changed pro...

Patch Changes

#374 2906848 Thanks @ynotdraw! - Tooltip now inserts line breaks into long strings to allow wrapping and prevent overflow.

Patch Changes

#372 b7167c3 Thanks @clintcs! - Dropdown when filterable and single-select now sets the value of its <input> when an option is selected on initial render.

Patch Changes

#362 16e14de Thanks @ynotdraw! - Updated Dropdown's placeholder color to align with Input and Textarea. This is improves Dark Mode support.
#366 739dc82 Thanks @ynotdraw! - Updated Dropdown to use the proper font when filtering.
#352 57d3b26 Thanks @clintcs! - - Tooltip's content is now shown in two columns to better support the appearance of keyboard shortcuts when non-shortcut content wraps.
- The font size of Tooltip's content has been slightly reduced.
- The gap between Tooltip's shortcut content and non-shortcut content has been slightly reduced.
#360 8c7841c Thanks @dylankcrwd! - Button Group Buttons are now rounded in Safari.
#357 03e30d6 Thanks @ynotdraw! - Updated --glide-core-surface-base-gray's color value to have better Dark Mode support.
#356 bd2696e Thanks @clintcs! - Dropdown now has a filterable attribute.
Use it to force Dropdown to be filterable when there are fewer than 11 options.
When there are 11 or more options, Dropdown will be filterable regardless of filterable.

Releases: CrowdStrike/glide-core

v0.13.0

Minor Changes

Light

Removed

Added

Changed

Dark

Removed

Changed

System

Removed

Patch Changes

Light

Added

Dark

Added

Changed

Uh oh!

v0.12.3

Patch Changes

Uh oh!

v0.12.2

Patch Changes

Uh oh!

v0.12.1

Patch Changes

Uh oh!

v0.12.0

Minor Changes

Patch Changes

Light

Dark

System

Uh oh!

v0.11.0

Minor Changes

Patch Changes

System

Dark

Uh oh!

v0.10.0

Minor Changes

Before

After

Light

Dark

Uh oh!

v0.9.6

Patch Changes

Uh oh!

v0.9.5

Patch Changes

Uh oh!

v0.9.4

Patch Changes

Uh oh!