@1024pix/pix-ui 20.2.2 → 21.0.0

package/addon/components/pix-select.js

@@ -1,58 +1,161 @@
 import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixSelect extends Component {
-  @tracked isValueAValidOption = false;
+  @tracked isExpanded = false;
+  @tracked searchValue = null;
+  searchId = 'search-input-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
 
-  constructor() {
-    super(...arguments);
+    if (!this.args.label && !this.args.id)
+      throw new Error('ERROR in PixSelect, a @label or an @id was not provided');
+
+    const categories = [];
+    this.args.options.forEach((element) => {
+      if (!categories.includes(element.category) && element.category !== undefined) {
+        categories.push(element.category);
+      }
+    });
+
+    this.displayCategory = categories.length > 0;
+  }
 
-    if (this.args.isSearchable) {
-      this.datalistId = 'pix-select-list-' + guidFor(this);
+  get selectId() {
+    if (this.args.id) return this.args.id;
+    return 'select-' + guidFor(this);
+  }
+
+  get displayDefaultOption() {
+    return !this.searchValue && !this.args.hideDefaultOption;
+  }
+
+  get className() {
+    const classes = ['pix-select-button'];
+    if (this.args.className) {
+      classes.push(this.args.className);
+    }
+    if (this.args.errorMessage) {
+      classes.push('pix-select-button--error');
     }
+    return classes.join(' ');
+  }
+
+  get isAriaExpanded() {
+    return this.isExpanded ? 'true' : 'false';
+  }
+
+  get listId() {
+    return `listbox-${this.selectId}`;
+  }
+
+  get dropDownId() {
+    return `dropdown-${this.selectId}`;
+  }
+
+  get placeholder() {
+    if (!this.args.value) return this.args.placeholder;
+    const option = this.args.options.find((option) => option.value === this.args.value);
+    return option ? option.label : this.args.placeholder;
+  }
+
+  get defaultOption() {
+    return {
+      value: '',
+    };
   }
 
-  get label() {
-    const labelIsDefined = this.args.label?.trim();
-    const idIsNotDefined = !this.args.id?.trim();
+  get results() {
+    let results = [];
+    let options = this.args.options;
 
-    if (labelIsDefined && idIsNotDefined) {
-      throw new Error('ERROR in PixSelect component, @id param is necessary when giving @label');
+    if (this.searchValue) {
+      options = this.args.options.filter((option) =>
+        option.label.toLowerCase().includes(this.searchValue.toLowerCase())
+      );
     }
-    return this.args.label || null;
+
+    if (!this.displayCategory) return options;
+
+    options.forEach(({ category, value, label }) => {
+      const categoryIndex = results.findIndex((result) => result.category === category);
+      if (categoryIndex !== -1) {
+        results[categoryIndex].options.push({ value, label });
+      } else {
+        results.push({ category, options: [{ label, value }] });
+      }
+    });
+    return results;
   }
 
-  get isBig() {
-    return this.args.size === 'big';
+  @action
+  toggleDropdown(event) {
+    if (this.isExpanded) {
+      this.hideDropdown(event);
+    } else {
+      this.showDropdown(event);
+    }
   }
 
-  get isValid() {
-    return this.args.isValidationActive && this.isValueAValidOption;
+  @action
+  showDropdown(event) {
+    event.preventDefault();
+
+    this.isExpanded = true;
   }
 
   @action
-  onChange(event) {
-    if (this.args.onChange) {
-      this.args.onChange(event);
+  hideDropdown(event) {
+    if (this.isExpanded) {
+      event.preventDefault();
+
+      this.isExpanded = false;
     }
+  }
 
-    if (!this.args.isSearchable || !this.args.options) {
-      return;
+  @action
+  onChange(option, event) {
+    this.args.onChange(option.value);
+
+    this.hideDropdown(event);
+    document.getElementById(this.selectId).focus();
+  }
+
+  @action
+  setSearchValue(event) {
+    this.searchValue = event.target.value.trim();
+  }
+
+  @action
+  lockTab(event) {
+    if (event.code === 'Tab' && this.isExpanded) {
+      event.preventDefault();
+      document.getElementById(this.searchId).focus();
     }
+  }
 
-    if (this.args.isValidationActive) {
-      this.isValueAValidOption = _checkIfValueIsAValidOption({
-        value: event.target.value,
-        options: this.args.options,
-      });
+  @action
+  focus() {
+    if (this.isExpanded) {
+      if (this.args.value) {
+        document.querySelector("[aria-selected='true']").focus();
+      } else if (this.args.isSearchable) {
+        document.getElementById(this.searchId).focus();
+      } else if (this.displayDefaultOption) {
+        document.querySelector("[aria-selected='true']").focus();
+      }
     }
   }
-}
 
-function _checkIfValueIsAValidOption({ value, options }) {
-  return value
-    ? options.some((option) => option.label.toLowerCase() === value.toLowerCase())
-    : false;
+  @action
+  setSelectWidth() {
+    const baseFontRemRatio = 16;
+    const checkIconWidth = 16;
+    const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
+    const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
+    document.getElementById(`container-${this.selectId}`).style.width = `${selectWidth}rem`;
+  }
 }

package/addon/components/pix-stars.hbs

@@ -1,4 +1,4 @@
-<div class={{this.pixStarsClass}} ...attributes role="img" aria-label={{@alt}}>
+<div class={{this.pixStarsClass}} ...attributes aria-label={{@alt}}>
   {{#each this.stars as |star|}}
     <svg
       class="pix-stars__{{star}}"

package/addon/components/pix-tooltip.hbs

@@ -8,9 +8,9 @@
   ...attributes
 >
   {{#if (has-block "triggerElement")}}
-    <div class={{if this.isVisible "pix-tooltip--visible" ""}}>
+    <span class="pix-tooltip__trigger-element">
       {{yield to="triggerElement"}}
-    </div>
+    </span>
   {{/if}}
 
   {{#if (has-block "tooltip")}}
@@ -19,6 +19,7 @@
         id={{@id}}
         role="tooltip"
         class="pix-tooltip__content pix-tooltip__content--{{this.position}}
+          {{if this.isVisible 'pix-tooltip__content--visible'}}
           {{if @isInline 'pix-tooltip__content--inline'}}
           {{if @isLight 'pix-tooltip__content--light'}}
           {{if @isWide 'pix-tooltip__content--wide'}}"

package/addon/styles/_form.scss

@@ -1,6 +1,7 @@
 @mixin hoverFormElement() {
   &:hover {
-    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-40;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-70;
+    background-color: $pix-neutral-5;
   }
 }
 
@@ -24,14 +25,26 @@
   display: block;
   font-family: $font-roboto;
   font-size: 0.875rem;
-  color: $pix-neutral-70;
-  margin-bottom: 4px;
+  line-height: 1.375rem;
+  color: $pix-neutral-90;
+  margin-bottom: $spacing-xxs;
+  font-weight: $font-medium;
+}
+
+@mixin subLabel() {
+  @include label();
+
+  font-size: 0.813rem;
+  line-height: 1rem;
+  color: $pix-neutral-60;
+  font-weight: $font-normal;
 }
 
 @mixin errorMessage() {
   font-family: $font-roboto;
   font-size: 0.75rem;
   color: $pix-error-70;
+  margin-top: $spacing-xxs;
 }
 
 @mixin formElementInError() {

package/addon/styles/_pix-filterable-and-searchable-select.scss

@@ -0,0 +1,57 @@
+.pix-filterable-and-searchable-select {
+  display: flex;
+  width: fit-content;
+  border: 1px $pix-neutral-45 solid;
+  border-radius: 4px;
+
+  &--error {
+    @include formElementInError();
+  }
+
+  &__label {
+    @include label();
+  }
+
+  &__sub-label {
+    @include subLabel();
+  }
+
+  &__pix-multi-select,
+  &__pix-select {
+    border: none;
+    &:hover {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  &__error-message {
+    @include errorMessage();
+  }
+  .pix-multi-select {
+    margin-right: 2px;
+
+    [role="menu"] {
+      width: fit-content;
+    }
+  }
+
+  &__pix-multi-select {
+    border-radius: 4px 0px 0px 4px;
+    position: relative;
+
+    &:after {
+      height: 22px;
+      width: 2px;
+      content: '';
+      background-color: $pix-neutral-22;
+      position: absolute;
+      right: -2px;
+      border-radius: 50px;
+    }
+  }
+
+  &__pix-select {
+    border-radius: 0px 4px 4px 0px;
+  }
+}

package/addon/styles/_pix-multi-select.scss

@@ -56,16 +56,13 @@
   }
 
   &__dropdown-icon {
-    font-size: 11px;
-    color: $pix-neutral-30;
+    @include text-small();
+    color: $pix-neutral-60;
+    font-weight: $font-heavy;
     right: 10px;
     top: calc(50% - 6px);
     position: absolute;
     pointer-events: none;
-
-    &--expand {
-      color: $pix-primary;
-    }
   }
 }
 
@@ -81,8 +78,9 @@
   max-height: 200px;
   list-style-type: none;
   padding: 0;
-  box-shadow: 0px 8px 24px 0px rgba(23, 43, 77, 0.1);
-  transition: all .1s ease-in-out;
+  box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+  transition: all 0.1s ease-in-out;
+  margin-top: $spacing-xxs;
 
   &--hidden {
     visibility: hidden;
@@ -106,15 +104,18 @@
   }
 
   li.pix-multi-select-list__item {
-    font-family: $font-roboto;
     position: relative;
-    border-bottom: 1px solid $pix-neutral-15;
     list-style: none;
-    font-size: 0.9rem;
-    padding: 8px;
+    padding: $spacing-xs $spacing-m;
+
+
+    &:hover,
+    &:focus {
+      outline: none;
+      cursor: pointer;
+      background-color: $pix-neutral-10;
+    }
 
-    @include hoverFormElement();
-    
     &--no-result {
       text-align: center;
       padding: 12px 0;

package/addon/styles/_pix-select.scss

@@ -1,70 +1,177 @@
 .pix-select {
-  @import 'reset-css';
-
+  display: inline-block;
   position: relative;
 
-  @mixin pixSelect {
-    appearance: none;
-    border: 1px $pix-neutral-40 solid;
-    border-radius: 4px;
-    color: $pix-neutral-90;
-    font-family: $font-roboto;
-    font-size: 0.875rem;
-    height: 36px;
-    width: 100%;
-    text-overflow: ellipsis;
+  &__label {
+    @include label();
+  }
 
-    @include hoverFormElement();
-    @include focusFormElement();
-    @include focusWithinFormElement();
+  &__sub-label {
+    @include subLabel();
   }
 
-  select {
-    @include pixSelect;
-    padding: 0 32px 0 16px;
+  &__dropdown {
+    z-index: 200;
+    position: absolute;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    overflow-y: auto;
+    max-height: 200px;
+    width: inherit;
+    list-style-type: none;
+    padding: 0;
+    background-color: $pix-neutral-0;
+    box-shadow: 0px 6px 12px rgba(7, 20, 46, 0.08);
+    transition: all 0.1s ease-in-out;
+    white-space: nowrap;
+    margin-top: $spacing-xxs;
 
-    &.pix-select--big {
-      height: 44px;
+    &::-webkit-scrollbar {
+      width: 0.5rem;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 4px;
+      border: 1px solid $pix-neutral-20;
+      background: $pix-neutral-20;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      width: 0.375rem;
+      background: $pix-neutral-30;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: $pix-neutral-35;
     }
 
-    &::-ms-expand {
-      display: none;
+    &--closed {
+      visibility: hidden;
+      opacity: 0;
     }
   }
 
-  input {
-    @include pixSelect;
-    padding: 0 8px 0 16px;
+  &__empty-search-message {
+    @include text-small();
+    color: $pix-neutral-70;
+    text-align: center;
+  }
 
-    &.pix-select--big {
-      height: 44px;
-    }
+  &__search {
+    display: flex;
+    border-bottom: 2px solid $pix-neutral-22;
+    margin: $spacing-s $spacing-m;
+    color: $pix-neutral-30;
+    border-radius: 4px 4px 0 0;
 
-    // Remove arrow for Chrome
-    &::-webkit-calendar-picker-indicator {
-      display: none;
+    &:focus-within {
+      background: $pix-neutral-10;
+      border-bottom: 2px solid $pix-primary;
     }
+  }
 
-    &.pix-select--is-valid:focus,
-    &.pix-select--is-valid:focus-within {
-      border-color: $green;
-    }
+  &__options {
+    border-top: 1px solid $pix-neutral-20;
   }
 
-  &__icon {
-    font-size: 11px;
-    color: $pix-neutral-30;
-    right: 10px;
-    top: calc(50% - 6px);
-    position: absolute;
+  &__error-message {
+    @include errorMessage();
+  }
+}
+
+.pix-select-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-family: $font-roboto;
+  font-weight: $font-normal;
+  position: relative;
+  border: 1px $pix-neutral-45 solid;
+  padding: 0px $spacing-s 0px $spacing-s;
+  width: 100%;
+  background-color: $pix-neutral-0;
+  border-radius: 4px;
+  outline: none;
+  height: 2.25rem;
+  cursor: pointer;
+  color: $pix-neutral-90;
+  justify-content: space-between;
+
+  @include text-small();
+  @include hoverFormElement();
+  @include focusWithinFormElement();
+
+  &--error {
+    @include formElementInError();
+  }
+
+  &__dropdown-icon {
+    @include text-small();
+    color: $pix-neutral-60;
+    font-weight: $font-heavy;
     pointer-events: none;
   }
+}
 
-  &__label {
-    @include label();
+.pix-select-options__category {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pix-select-options-category {
+  &__name {
+    @include text-small();
+    padding: $spacing-s $spacing-m $spacing-xs $spacing-m;
+    text-transform: uppercase;
+    font-family: $font-roboto;
+    color: $pix-neutral-45;
   }
 
-  .pix-select__label ~ .pix-select__icon {
-    top: calc(50% + 6px);
+  &__option {
+    @include text-small();
+    display: flex;
+    justify-content: space-between;
+    padding: $spacing-xs $spacing-m;
+    color: $pix-neutral-70;
+
+    &:hover,
+    &:focus {
+      outline: none;
+      cursor: pointer;
+      background-color: $pix-neutral-10;
+    }
+
+    svg {
+      visibility: hidden;
+      opacity: 0;
+      font-size: 1.125rem;
+    }
+
+    &--selected {
+      background-color: $pix-primary-5;
+      align-items: center;
+
+      svg {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.pix-select-search {
+  &__input {
+    @include text-small();
+    width: 100%;
+    border: none;
+    padding-left: $spacing-xs;
+    margin: $spacing-xxs;
+    &:focus {
+      outline: none;
+      background: $pix-neutral-10;
+    }
+  }
+
+  &__icon {
+    margin: auto $spacing-xxs;
   }
 }

package/addon/styles/_pix-tooltip.scss

@@ -6,12 +6,9 @@
   justify-content: center;
   align-items: center;
 
-}
-
-.pix-tooltip--visible {
-  + .pix-tooltip__content {
+  &__trigger-element {
     display: block;
-    opacity: 1;
+    width: 100%;
   }
 }
 
@@ -31,6 +28,11 @@
   line-height: 1.4rem;
   transition: opacity 0.3s;
 
+  &--visible {
+    display: block;
+    opacity: 1;
+  }
+
   &--inline {
     white-space: nowrap;
   }

package/addon/styles/addon.scss

@@ -31,6 +31,9 @@
 @import 'pix-checkbox';
 @import 'trap-focus';
 
+// at the end so it can override it's children scss
+@import 'pix-filterable-and-searchable-select';
+
 html {
   font-size: 16px;
 }

package/app/components/pix-filterable-and-searchable-select.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-filterable-and-searchable-select';

package/app/modifiers/on-arrow-down-up-action.js

@@ -34,7 +34,7 @@ export default modifier((element, [elementId, callback, isExpanded]) => {
           document.activeElement === lastFocusableElement ||
           activeIndexElement === -1
         ) {
-          firstFocusableElement.focus();
+          firstFocusableElement?.focus();
         } else {
           focusableElements[activeIndexElement + 1].focus();
         }
@@ -46,7 +46,7 @@ export default modifier((element, [elementId, callback, isExpanded]) => {
           document.activeElement === firstFocusableElement ||
           activeIndexElement === -1
         ) {
-          lastFocusableElement.focus();
+          lastFocusableElement?.focus();
         } else {
           focusableElements[activeIndexElement - 1].focus();
         }
@@ -62,7 +62,7 @@ export default modifier((element, [elementId, callback, isExpanded]) => {
     if (!isExpanded) {
       elementToTarget.addEventListener('transitionend', focusElement);
 
-      callback();
+      callback(event);
 
       return () => {
         elementToTarget.removeEventListener('transitionend', focusElement);

package/app/modifiers/on-enter-action.js

@@ -1,6 +1,6 @@
 import { modifier } from 'ember-modifier';
 
-export default modifier((element, [callback, focusId = null]) => {
+export default modifier((element, [callback = null, focusId = null]) => {
   function handleKeyUp(event) {
     const ENTER_KEY = 'Enter';
 
@@ -17,7 +17,7 @@ export default modifier((element, [callback, focusId = null]) => {
       document.getElementById(focusId).focus();
     }
 
-    callback(event);
+    if (callback) callback(event);
   }
 
   element.addEventListener('keydown', handleKeyUp);