shoelace-rails-ui 0.1.0

data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.styles.ts

@@ -0,0 +1,331 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import formControlStyles from '../../styles/form-control.styles';
+
+export default css`
+  ${componentStyles}
+  ${formControlStyles}
+
+  :host {
+    display: block;
+  }
+
+  .select {
+    display: block;
+  }
+
+  .select__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    position: relative;
+    width: 100%;
+    font-family: var(--sl-input-font-family);
+    font-weight: var(--sl-input-font-weight);
+    letter-spacing: var(--sl-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
+    cursor: pointer;
+  }
+
+  .select__menu {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
+  /* Standard selects */
+  .select--standard .select__control {
+    background-color: var(--sl-input-background-color);
+    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    color: var(--sl-input-color);
+  }
+
+  .select--standard:not(.select--disabled) .select__control:hover {
+    background-color: var(--sl-input-background-color-hover);
+    border-color: var(--sl-input-border-color-hover);
+    color: var(--sl-input-color-hover);
+  }
+
+  .select--standard.select--focused:not(.select--disabled) .select__control {
+    background-color: var(--sl-input-background-color-focus);
+    border-color: var(--sl-input-border-color-focus);
+    box-shadow: var(--sl-focus-ring);
+    outline: none;
+    color: var(--sl-input-color-focus);
+  }
+
+  .select--standard.select--disabled .select__control {
+    background-color: var(--sl-input-background-color-disabled);
+    border-color: var(--sl-input-border-color-disabled);
+    color: var(--sl-input-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  /* Filled selects */
+  .select--filled .select__control {
+    border: none;
+    background-color: var(--sl-input-filled-background-color);
+    color: var(--sl-input-color);
+  }
+
+  .select--filled:hover:not(.select--disabled) .select__control {
+    background-color: var(--sl-input-filled-background-color-hover);
+  }
+
+  .select--filled.select--focused:not(.select--disabled) .select__control {
+    outline: none;
+    background-color: var(--sl-input-filled-background-color-focus);
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .select--filled.select--disabled .select__control {
+    background-color: var(--sl-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__clear {
+    pointer-events: none;
+  }
+
+  .select__prefix {
+    display: inline-flex;
+    align-items: center;
+    color: var(--sl-input-placeholder-color);
+  }
+
+  .select__label {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+
+    /* Hide scrollbar in Firefox */
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar in Chrome/Safari */
+  .select__label::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .select__clear {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    width: 1.25em;
+    font-size: inherit;
+    color: var(--sl-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--sl-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .select__clear:hover {
+    color: var(--sl-input-icon-color-hover);
+  }
+
+  .select__suffix {
+    display: inline-flex;
+    align-items: center;
+    color: var(--sl-input-placeholder-color);
+  }
+
+  .select__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    transition: var(--sl-transition-medium) transform ease;
+  }
+
+  .select--open .select__icon {
+    transform: rotate(-180deg);
+  }
+
+  /* Placeholder */
+  .select--placeholder-visible .select__label {
+    color: var(--sl-input-placeholder-color);
+  }
+
+  .select--disabled.select--placeholder-visible .select__label {
+    color: var(--sl-input-placeholder-color-disabled);
+  }
+
+  /* Tags */
+  .select__tags {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: left;
+    margin-left: var(--sl-spacing-2x-small);
+  }
+
+  /* Hidden input (for form control validation to show) */
+  .select__hidden-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  /* Small */
+  .select--small .select__control {
+    border-radius: var(--sl-input-border-radius-small);
+    font-size: var(--sl-input-font-size-small);
+    min-height: var(--sl-input-height-small);
+  }
+
+  .select--small .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-small);
+  }
+
+  .select--small .select__label {
+    margin: 0 var(--sl-input-spacing-small);
+  }
+
+  .select--small .select__clear {
+    margin-right: var(--sl-input-spacing-small);
+  }
+
+  .select--small .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-small);
+  }
+
+  .select--small .select__icon {
+    margin-right: var(--sl-input-spacing-small);
+  }
+
+  .select--small .select__tags {
+    padding-bottom: 2px;
+  }
+
+  .select--small .select__tags sl-tag {
+    padding-top: 2px;
+  }
+
+  .select--small .select__tags sl-tag:not(:last-of-type) {
+    margin-right: var(--sl-spacing-2x-small);
+  }
+
+  .select--small.select--has-tags .select__label {
+    margin-left: 0;
+  }
+
+  /* Medium */
+  .select--medium .select__control {
+    border-radius: var(--sl-input-border-radius-medium);
+    font-size: var(--sl-input-font-size-medium);
+    min-height: var(--sl-input-height-medium);
+  }
+
+  .select--medium .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-medium);
+  }
+
+  .select--medium .select__label {
+    margin: 0 var(--sl-input-spacing-medium);
+  }
+
+  .select--medium .select__clear {
+    margin-right: var(--sl-input-spacing-medium);
+  }
+
+  .select--medium .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-medium);
+  }
+
+  .select--medium .select__icon {
+    margin-right: var(--sl-input-spacing-medium);
+  }
+
+  .select--medium .select__tags {
+    padding-bottom: 3px;
+  }
+
+  .select--medium .select__tags sl-tag {
+    padding-top: 3px;
+  }
+
+  .select--medium .select__tags sl-tag:not(:last-of-type) {
+    margin-right: var(--sl-spacing-2x-small);
+  }
+
+  .select--medium.select--has-tags .select__label {
+    margin-left: 0;
+  }
+
+  /* Large */
+  .select--large .select__control {
+    border-radius: var(--sl-input-border-radius-large);
+    font-size: var(--sl-input-font-size-large);
+    min-height: var(--sl-input-height-large);
+  }
+
+  .select--large .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-large);
+  }
+
+  .select--large .select__label {
+    margin: 0 var(--sl-input-spacing-large);
+  }
+
+  .select--large .select__clear {
+    margin-right: var(--sl-input-spacing-large);
+  }
+
+  .select--large .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-large);
+  }
+
+  .select--large .select__icon {
+    margin-right: var(--sl-input-spacing-large);
+  }
+
+  .select--large .select__tags {
+    padding-bottom: 4px;
+  }
+  .select--large .select__tags sl-tag {
+    padding-top: 4px;
+  }
+
+  .select--large .select__tags sl-tag:not(:last-of-type) {
+    margin-right: var(--sl-spacing-2x-small);
+  }
+
+  .select--large.select--has-tags .select__label {
+    margin-left: 0;
+  }
+
+  /*
+   * Pill modifier
+   */
+  .select--pill.select--small .select__control {
+    border-radius: var(--sl-input-height-small);
+  }
+
+  .select--pill.select--medium .select__control {
+    border-radius: var(--sl-input-height-medium);
+  }
+
+  .select--pill.select--large .select__control {
+    border-radius: var(--sl-input-height-large);
+  }
+`;

data/remote-src/2.0.0.beta64/shoelace-next/src/components/select/select.test.ts

@@ -0,0 +1,56 @@
+import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlSelect from './select';
+
+describe('<sl-select>', () => {
+  it('should emit sl-change when the value changes', async () => {
+    const el = await fixture<SlSelect>(html`
+      <sl-select>
+        <sl-menu-item value="option-1">Option 1</sl-menu-item>
+        <sl-menu-item value="option-2">Option 2</sl-menu-item>
+        <sl-menu-item value="option-3">Option 3</sl-menu-item>
+      </sl-select>
+    `);
+    const changeHandler = sinon.spy();
+
+    el.addEventListener('sl-change', changeHandler);
+    el.value = 'option-2';
+    await waitUntil(() => changeHandler.calledOnce);
+
+    expect(changeHandler).to.have.been.calledOnce;
+  });
+
+  it('should open the menu when any letter key is pressed with sl-select is on focus', async () => {
+    const el = (await fixture(html`
+      <sl-select>
+        <sl-menu-item value="option-1">Option 1</sl-menu-item>
+        <sl-menu-item value="option-2">Option 2</sl-menu-item>
+        <sl-menu-item value="option-3">Option 3</sl-menu-item>
+      </sl-select>
+    `)) as SlSelect;
+    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
+    control.focus();
+    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
+    control.dispatchEvent(rKeyEvent);
+    await aTimeout(100);
+    expect(control.getAttribute('aria-expanded')).to.equal('true');
+  });
+
+  it('should not open the menu when ctrl + R is pressed with sl-select is on focus', async () => {
+    const el = (await fixture(html`
+      <sl-select>
+        <sl-menu-item value="option-1">Option 1</sl-menu-item>
+        <sl-menu-item value="option-2">Option 2</sl-menu-item>
+        <sl-menu-item value="option-3">Option 3</sl-menu-item>
+      </sl-select>
+    `)) as SlSelect;
+    const control = el.shadowRoot.querySelector('.select__control') as HTMLSelectElement;
+    control.focus();
+    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
+    control.dispatchEvent(rKeyEvent);
+    await aTimeout(100);
+    expect(control.getAttribute('aria-expanded')).to.equal('false');
+  });
+});