@1024pix/pix-ui 41.2.0 → 42.0.0

package/addon/components/pix-button-base.js

@@ -21,7 +21,7 @@ export default class PixButtonBase extends Component {
       `pix-button--${this.backgroundColor}`,
     ];
     this.args.isBorderVisible && classNames.push('pix-button--border');
-    this.args.isDisabled && classNames.push('pix-button--disabled');
+
     return classNames;
   }
 }

package/addon/components/pix-button.hbs

@@ -1,44 +1,33 @@
-{{#if @route}}
-  <LinkTo
-    @route={{@route}}
-    @models={{if @model (array @model) this.defaultModel}}
-    class={{this.className}}
-    ...attributes
-  >
+<button
+  type={{this.type}}
+  class={{this.className}}
+  {{on "click" this.triggerAction}}
+  ...attributes
+  disabled={{this.isDisabled}}
+  aria-disabled="{{this.isDisabled}}"
+>
+  {{#if this.isLoading}}
+    <div class="loader loader--{{this.loadingColor}}">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+    <span class="loader__not-visible-text">{{yield}}</span>
+  {{else}}
+    {{#if @iconBefore}}
+      <FaIcon
+        class="pix-button__icon pix-button__icon--before"
+        @icon={{@iconBefore}}
+        @prefix={{@prefixIconBefore}}
+      />
+    {{/if}}
     {{yield}}
-  </LinkTo>
-{{else}}
-  <button
-    type={{this.type}}
-    class={{this.className}}
-    {{on "click" this.triggerAction}}
-    ...attributes
-    disabled={{this.isDisabled}}
-    aria-disabled="{{this.isDisabled}}"
-  >
-    {{#if this.isLoading}}
-      <div class="loader loader--{{this.loadingColor}}">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
-        <div class="bounce3"></div>
-      </div>
-      <span class="loader__not-visible-text">{{yield}}</span>
-    {{else}}
-      {{#if @iconBefore}}
-        <FaIcon
-          class="pix-button__icon pix-button__icon--before"
-          @icon={{@iconBefore}}
-          @prefix={{@prefixIconBefore}}
-        />
-      {{/if}}
-      {{yield}}
-      {{#if @iconAfter}}
-        <FaIcon
-          class="pix-button__icon pix-button__icon--after"
-          @icon={{@iconAfter}}
-          @prefix={{@prefixIconAfter}}
-        />
-      {{/if}}
+    {{#if @iconAfter}}
+      <FaIcon
+        class="pix-button__icon pix-button__icon--after"
+        @icon={{@iconAfter}}
+        @prefix={{@prefixIconAfter}}
+      />
     {{/if}}
-  </button>
-{{/if}}
+  {{/if}}
+</button>

package/addon/components/pix-input-code.hbs

@@ -1,4 +1,3 @@
-{{! template-lint-disable no-down-event-binding }}
 <div class="pix-input-code">
   <fieldset aria-describedby="pix-input-code__details-of-use">
     <p id="pix-input-code__details-of-use">{{this.explanationOfUse}}</p>

package/addon/components/pix-input-password.hbs

@@ -8,7 +8,7 @@
       {{this.label}}
 
       {{#if @information}}
-        <span class="pix-input__information">{{@information}}</span>
+        <span class="pix-input__sub-label">{{@information}}</span>
       {{/if}}
     </label>
   {{/if}}

package/addon/components/pix-input.hbs

@@ -8,7 +8,7 @@
       {{@label}}
 
       {{#if @information}}
-        <span class="pix-input__information">{{@information}}</span>
+        <span class="pix-input__sub-label">{{@information}}</span>
       {{/if}}
     </label>
   {{/if}}
@@ -16,7 +16,7 @@
   <div class="pix-input__container">
     <input
       id={{this.id}}
-      class="pix-input__input--default {{this.validationStatusClassName}}"
+      class="pix-input__input {{this.validationStatusClassName}}"
       value={{@value}}
       aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"

package/addon/components/pix-search-input.hbs

@@ -5,11 +5,9 @@
 
   <div class="pix-search-input__input-container">
     <FaIcon @icon="magnifying-glass" />
-    {{! template-lint-disable require-input-label }}
     <input
       id={{this.searchInputId}}
       class="pix-search-input__input"
-      role="searchbox"
       name={{@inputName}}
       placeholder={{@placeholder}}
       aria-label={{this.ariaLabel}}

package/addon/components/pix-select.hbs

@@ -1,4 +1,3 @@
-{{! template-lint-disable no-down-event-binding require-context-role require-presentational-children }}
 <div
   class="pix-select"
   id="container-{{this.selectId}}"
@@ -89,8 +88,6 @@
                 aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
               >
                 {{#if this.displayCategory}}
-                  {{! template-lint-disable no-invalid-role }}
-                  {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
                   <li
                     class="pix-select-options-category__name"
                     role="presentation"
@@ -101,6 +98,8 @@
                 {{/if}}
 
                 {{#each element.options as |option|}}
+                  {{! template-lint-disable require-context-role }}
+                  {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
                   <li
                     class="pix-select-options-category__option{{if
                         (eq option.value @value)
@@ -116,7 +115,7 @@
                     {{option.label}}
 
                     {{#if (eq option.value @value)}}
-                      <FaIcon @icon="check" />
+                      <FaIcon @icon="check" role="presentation" />
                     {{/if}}
                   </li>
                 {{/each}}
@@ -139,7 +138,7 @@
                 {{option.label}}
 
                 {{#if (eq option.value @value)}}
-                  <FaIcon @icon="check" />
+                  <FaIcon @icon="check" role="presentation" />
                 {{/if}}
               </li>
             {{/each}}

package/addon/components/pix-select.js

@@ -46,9 +46,7 @@ export default class PixSelect extends Component {
     if (this.args.errorMessage) {
       classes.push('pix-select-button--error');
     }
-    if (this.args.isDisabled) {
-      classes.push('pix-select-button--disabled');
-    }
+
     return classes.join(' ');
   }
 

package/addon/styles/_pix-button-base.scss

@@ -12,7 +12,12 @@
   outline: none;
   cursor: pointer;
 
-  &:not(.pix-button--disabled) {
+  &[aria-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not([aria-disabled]) {
     &:hover {
       background-color: var(--pix-primary-700);
     }
@@ -50,15 +55,10 @@
     padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
   }
 
-  &--disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
   &--blue, &--primary {
     background-color: var(--pix-primary-500);
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         background-color: var(--pix-primary-700);
       }
@@ -80,7 +80,7 @@
   &--green, &--success {
     background-color: var(--pix-success-500);
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         background-color: var(--pix-success-700);
       }
@@ -103,7 +103,7 @@
     color: var(--pix-neutral-900);
     background-color: var(--pix-secondary-500);
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         color: var(--pix-neutral-0);
         background-color: var(--pix-secondary-700);
@@ -129,7 +129,7 @@
     color: var(--pix-neutral-0);
     background-color: var(--pix-error-500);
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         background-color: var(--pix-error-700);
       }
@@ -152,7 +152,7 @@
     color: var(--pix-neutral-900);
     background-color: var(--pix-neutral-20);
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         background-color: var(--pix-neutral-100);
       }
@@ -188,7 +188,7 @@
       border: 2px solid var(--pix-primary-700);
     }
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         color: var(--pix-neutral-0);
         background-color: var(--pix-primary-500);
@@ -218,7 +218,7 @@
       border: 1px solid var(--pix-neutral-0);
     }
 
-    &:not(.pix-button--disabled) {
+    &:not([aria-disabled]) {
       &:hover {
         color: var(--pix-neutral-900);
         background-color: var(--pix-neutral-20);

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

@@ -1,33 +1,22 @@
 .pix-filterable-and-searchable-select {
   display: flex;
   max-width: 100%;
-  border: 1px var(--pix-neutral-500) solid;
   border-radius: var(--pix-spacing-1x);
 
   &--error {
-    @include formElementInError();
+    @extend %pix-form-error-state;
   }
 
   &__label {
-    @include label();
+    @extend %pix-label;
   }
 
   &__sub-label {
-    @include subLabel();
-  }
-
-  &__pix-multi-select,
-  &__pix-select {
-    border: none;
-
-    &:hover {
-      border: none;
-      box-shadow: none;
-    }
+    @extend %pix-sublabel;
   }
 
   &__error-message {
-    @include errorMessage();
+    @extend %pix-input-error-message;
   }
 
   .pix-select {
@@ -35,8 +24,6 @@
   }
 
   .pix-multi-select {
-    margin-right: 2px;
-
     [role="menu"] {
       width: fit-content;
     }
@@ -44,11 +31,13 @@
 
   &__pix-multi-select {
     position: relative;
+    border-right: none;
     border-radius: var(--pix-spacing-1x) 0 0 var(--pix-spacing-1x);
 
     &:after {
       position: absolute;
       right: -2px;
+      z-index: 1;
       width: 2px;
       height: 22px;
       background-color: var(--pix-neutral-100);
@@ -59,6 +48,7 @@
 
   &__pix-select {
     width: 100%;
-    border-radius: 0 4px 4px 0;
+    border-left: none;
+    border-radius: 0 var(--pix-spacing-1x) var(--pix-spacing-1x) 0;
   }
 }

package/addon/styles/_pix-input-code.scss

@@ -27,6 +27,8 @@
   }
 
   input.pix-input-code__input {
+    @extend %pix-form-element-state;
+
     display: inline-block;
     width: 38px;
     height: 44px;
@@ -38,10 +40,6 @@
     border: 1.4px solid var(--pix-neutral-500);
     border-radius: 4px;
 
-    @include hoverFormElement();
-    @include focusFormElement();
-    @include activeFormElement();
-
     &:focus, &:active {
       &::placeholder {
         opacity: 0;

package/addon/styles/_pix-input-password.scss

@@ -4,6 +4,8 @@
   flex-direction: column;
 
   &__container {
+    @extend %pix-form-element-state;
+
     position: relative;
     display: flex;
     align-items: center;
@@ -11,13 +13,9 @@
     border: 1px solid var(--pix-neutral-500);
     border-radius: var(--pix-spacing-1x);
 
-    @include hoverFormElement();
-    @include focusWithinFormElement();
-    @include activeFormElement();
-
 
     input {
-      @include input();
+      @extend %pix-input-default;
 
       flex-grow: 1;
       height: 34px;
@@ -49,15 +47,15 @@
   }
 
   &__error-container {
-    padding-right: var(--pix-spacing-6x);
+    @extend %pix-form-error-state;
 
-    @include formElementInError();
+    padding-right: var(--pix-spacing-6x);
   }
 
   &__success-container {
-    padding-right: var(--pix-spacing-6x);
+    @extend %pix-form-success-state;
 
-    @include formElementInSuccess();
+    padding-right: var(--pix-spacing-6x);
   }
 
   &__icon {
@@ -80,6 +78,6 @@
   }
 
   &__error-message {
-    @include errorMessage();
+    @extend %pix-input-error-message;
   }
 }

package/addon/styles/_pix-input.scss

@@ -4,13 +4,14 @@
   flex-direction: column;
 
   &__label {
-    @include label();
+    @extend %pix-label;
   }
 
-  &__information {
-    @include subLabel();
+  &__sub-label {
+    @extend %pix-sublabel;
   }
 
+
   &__container {
     position: relative;
   }
@@ -36,46 +37,28 @@
   }
 
   &__error-message {
-    @include errorMessage();
+    @extend %pix-input-error-message;
   }
 
-  &__input--default {
+  &__input {
+    @extend %pix-form-element-state;
+    @extend %pix-input-default;
+
     width: 100%;
     height: 36px;
     border: 1px solid var(--pix-neutral-500);
 
-    @include input();
-    @include hoverFormElement();
-    @include focusFormElement();
-    @include activeFormElement();
-
-    &::placeholder {
-      color: var(--pix-neutral-500);
+    &--error {
+      @extend %pix-form-error-state;
     }
 
-    &[aria-disabled],
-    &[disabled],
-    &[readonly] {
-      @include formElementDisabled();
-      @include hoverFormElementDisabled();
+    &--success {
+      @extend %pix-form-success-state;
     }
 
-    &[readonly] {
-      cursor: default;
+    &::placeholder {
+      color: var(--pix-neutral-500);
     }
-  }
-
-  &__input--error {
-    padding-right: var(--pix-spacing-10x);
-    border-width: 2px;
-
-    @include formElementInError();
-  }
-
-  &__input--success {
-    padding-right: var(--pix-spacing-10x);
-    border-width: 2px;
 
-    @include formElementInSuccess();
   }
 }

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

@@ -3,12 +3,13 @@
   display: inline-block;
 
   &__label {
-    @include label();
+    @extend %pix-label;
   }
 }
 
 .pix-multi-select-header {
   @extend %pix-body-s;
+  @extend %pix-form-element-state;
 
   position: relative;
   display: flex;
@@ -20,13 +21,8 @@
   background-color: var(--pix-neutral-0);
   border: 1px var(--pix-neutral-500) solid;
   border-radius: var(--pix-spacing-1x);
-  outline: none;
   cursor: pointer;
 
-  @include hoverFormElement();
-  @include focusWithinFormElement();
-  @include activeFormElement();
-
   &--big {
     height: 44px;
   }

package/addon/styles/_pix-return-to.scss

@@ -13,19 +13,6 @@
     font-size: 1rem;
   }
 
-  &__icon::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    opacity: 0;
-    transition: 0.3s ease opacity;
-    content: '';
-  }
-
   &:focus,
   &:hover,
   &:active {
@@ -33,10 +20,6 @@
     border-bottom-color: transparent;
     outline: 0;
     cursor: pointer;
-
-    ::before {
-      opacity: 1;
-    }
   }
 
   @mixin coloriseLink($defaultColor, $arrowHoverColor, $arrowBgColor) {
@@ -47,10 +30,8 @@
     &:active {
       .pix-return-to__icon {
         color: $arrowHoverColor;
-      }
-
-      ::before {
         background-color: $arrowBgColor;
+        border-radius: 50%;
         outline: 1px solid var(--pix-neutral-0);
         outline-offset: -3px;
       }

package/addon/styles/_pix-search-input.scss

@@ -26,9 +26,9 @@
 }
 
 .pix-search-input__input {
-  @include input();
-  @include hoverFormElement();
-  @include focusFormElement();
+  @extend %pix-form-element-state;
+  @extend %pix-input-default;
+
 
   width: 100%;
   height: 36px;

package/addon/styles/_pix-select.scss

@@ -3,11 +3,11 @@
   display: inline-block;
 
   &__label {
-    @include label();
+    @extend %pix-label;
   }
 
   &__sub-label {
-    @include subLabel();
+    @extend %pix-sublabel;
   }
 
   &__dropdown {
@@ -79,12 +79,13 @@
   }
 
   &__error-message {
-    @include errorMessage();
+    @extend %pix-input-error-message;
   }
 }
 
 .pix-select-button {
   @extend %pix-body-s;
+  @extend %pix-form-element-state;
 
   position: relative;
   display: flex;
@@ -98,20 +99,10 @@
   background-color: var(--pix-neutral-0);
   border: 1px var(--pix-neutral-500) solid;
   border-radius: var(--pix-spacing-1x);
-  outline: none;
   cursor: pointer;
 
-  @include hoverFormElement();
-  @include focusWithinFormElement();
-  @include activeFormElement();
-
-  &--disabled {
-    @include formElementDisabled();
-    @include hoverFormElementDisabled();
-  }
-
   &--error {
-    @include formElementInError();
+    @extend %pix-form-error-state;
   }
 
   &__text {

package/addon/styles/_pix-textarea.scss

@@ -1,5 +1,7 @@
 .pix-textarea {
   textarea {
+    @extend %pix-form-element-state;
+
     width: 100%;
     padding: 10px var(--pix-spacing-4x);
     color: var(--pix-neutral-900);
@@ -9,12 +11,8 @@
     border-radius: var(--pix-spacing-1x);
     resize: vertical;
 
-    @include hoverFormElement();
-    @include focusFormElement();
-    @include activeFormElement();
-
     &.pix-textarea--error {
-      @include formElementInError();
+      @extend %pix-form-error-state;
     }
   }
 
@@ -28,10 +26,10 @@
   }
 
   &__label {
-    @include label();
+    @extend %pix-label;
   }
 
   &__error-message {
-    @include errorMessage();
+    @extend %pix-input-error-message;
   }
 }

package/addon/styles/addon.scss

@@ -35,3 +35,4 @@
 
 // at the end so it can override it's children scss
 @import 'pix-filterable-and-searchable-select';
+@import 'component-state';