@1024pix/pix-ui 42.0.4 → 43.0.0

package/addon/components/pix-checkbox.hbs

@@ -4,14 +4,18 @@
     id={{this.id}}
     class={{this.inputClasses}}
     checked={{@checked}}
+    aria-disabled={{@isDisabled}}
     ...attributes
   />
 
-  <label class={{this.labelClasses}} for={{this.id}}>
-    {{#if (has-block)}}
-      {{yield}}
-    {{else}}
-      <span>yield required to give a label for PixCheckbox.</span>
-    {{/if}}
-  </label>
+  <PixLabel
+    @for={{this.id}}
+    @requiredLabel={{@requiredLabel}}
+    @labelSize={{@labelSize}}
+    @inlineLabel={{true}}
+    @screenReaderOnly={{@screenReaderOnly}}
+    @isDisabled={{@isDisabled}}
+  >
+    {{yield}}
+  </PixLabel>
 </div>

package/addon/components/pix-checkbox.js

@@ -19,18 +19,4 @@ export default class PixCheckbox extends Component {
 
     return classes.join(' ');
   }
-
-  get labelClasses() {
-    const classes = ['pix-checkbox__label'];
-
-    if (this.args.labelSize) {
-      classes.push(`${classes[0]}--${this.args.labelSize}`);
-    }
-
-    if (this.args.screenReaderOnly) {
-      classes.push('screen-reader-only');
-    }
-
-    return classes.join(' ');
-  }
 }

package/addon/components/pix-filterable-and-searchable-select.hbs

@@ -1,13 +1,13 @@
 <div id={{this.mainId}} ...attributes>
-  <label class={{this.classLabel}} for={{this.pixSelectId}}>
-    {{#if @requiredText}}
-      <abbr class="mandatory-mark" title="{{@requiredText}}" aria-hidden="true">*</abbr>
-    {{/if}}
+  <PixLabel
+    @for={{this.pixSelectId}}
+    @requiredLabel={{@requiredText}}
+    @labelSize={{@labelSize}}
+    @subLabel={{@subLabel}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
     {{@label}}
-    {{#if @subLabel}}
-      <span class="pix-select__sub-label">{{@subLabel}}</span>
-    {{/if}}
-  </label>
+  </PixLabel>
   <div
     class="pix-filterable-and-searchable-select{{if
         @errorMessage

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

@@ -15,14 +15,6 @@ export default class PixFilterableAndSearchableSelect extends Component {
     this.selectedCategories = categories;
   }
 
-  get classLabel() {
-    const cssClass = ['pix-filterable-and-searchable-select__label'];
-
-    if (this.args.screenReaderOnly) cssClass.push('screen-reader-only');
-
-    return cssClass.join(' ');
-  }
-
   get categories() {
     const categoryNames = [];
     this.args.options.forEach((option) => {

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

@@ -1,17 +1,13 @@
 <div class="pix-input-password">
-  {{#if this.label}}
-    <label for={{this.id}} class="pix-input__label">
-      {{#if @requiredLabel}}
-        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
-      {{/if}}
-
-      {{this.label}}
-
-      {{#if @information}}
-        <span class="pix-input__sub-label">{{@information}}</span>
-      {{/if}}
-    </label>
-  {{/if}}
+  <PixLabel
+    @for={{this.id}}
+    @requiredLabel={{@requiredLabel}}
+    @labelSize={{@labelSize}}
+    @subLabel={{@information}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
+    {{@label}}
+  </PixLabel>
   <div
     class="pix-input-password__container
       {{this.validationStatusClassName}}
@@ -26,7 +22,6 @@
       id={{this.id}}
       type={{if this.isPasswordVisible "text" "password"}}
       value={{@value}}
-      aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
       aria-describedby={{if (eq @validationStatus "error") "text-input-password-error"}}

package/addon/components/pix-input.hbs

@@ -1,24 +1,19 @@
 <div class="pix-input">
-  {{#if @label}}
-    <label for={{this.id}} class="pix-input__label">
-      {{#if @requiredLabel}}
-        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
-      {{/if}}
-
-      {{@label}}
-
-      {{#if @information}}
-        <span class="pix-input__sub-label">{{@information}}</span>
-      {{/if}}
-    </label>
-  {{/if}}
+  <PixLabel
+    @for={{this.id}}
+    @requiredLabel={{@requiredLabel}}
+    @subLabel={{@information}}
+    @labelSize={{@labelSize}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
+    {{@label}}
+  </PixLabel>
 
   <div class="pix-input__container">
     <input
       id={{this.id}}
       class="pix-input__input {{this.validationStatusClassName}}"
       value={{@value}}
-      aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
       aria-describedby={{if (eq @validationStatus "error") "text-input-error"}}

package/addon/components/pix-input.js

@@ -14,14 +14,6 @@ export default class PixInput extends Component {
     return this.args.id;
   }
 
-  get label() {
-    return this.args.label;
-  }
-
-  get ariaLabel() {
-    return this.args.label ? null : this.args.ariaLabel;
-  }
-
   get validationStatusClassName() {
     return INPUT_VALIDATION_STATUS_MAP[this.args.validationStatus] || '';
   }

package/addon/components/pix-label.hbs

@@ -0,0 +1,11 @@
+<label for={{@for}} class={{this.className}} ...attributes>
+  {{#if @requiredLabel}}
+    <abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
+  {{/if}}
+
+  {{yield}}
+
+  {{#if @subLabel}}
+    <span class="pix-label__sub-label">{{@subLabel}}</span>
+  {{/if}}
+</label>

package/addon/components/pix-label.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+
+export default class PixLabel extends Component {
+  get className() {
+    const classes = ['pix-label'];
+
+    if (this.args.screenReaderOnly) classes.push('screen-reader-only');
+    if (this.args.inlineLabel) classes.push('pix-label--inline-label');
+    if (this.args.isDisabled) classes.push('pix-label--disabled');
+
+    const labelSize = ['small', 'large'].includes(this.args.labelSize)
+      ? this.args.labelSize
+      : 'default';
+
+    classes.push(`pix-label--${labelSize}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/pix-multi-select.hbs

@@ -5,13 +5,16 @@
   {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
   {{on-escape-action this.hideDropDown this.multiSelectId}}
 >
+  <PixLabel
+    @for={{this.multiSelectId}}
+    @requiredLabel={{@requiredText}}
+    @subLabel={{@subLabel}}
+    @labelSize={{@labelSize}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
+    {{@label}}
+  </PixLabel>
 
-  {{#if @label}}
-    <label
-      for={{this.multiSelectId}}
-      class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
-    >{{@label}}</label>
-  {{/if}}
   <PopperJS @placement={{@placement}} as |reference popover|>
 
     {{#if @isSearchable}}

package/addon/components/pix-radio-button.hbs

@@ -6,11 +6,14 @@
     value={{@value}}
     ...attributes
   />
-  <label class="pix-radio-button__label" for={{this.id}}>
-    {{#if (has-block)}}
-      {{yield}}
-    {{else}}
-      <span>yield required to give a label for PixRadioButton.</span>
-    {{/if}}
-  </label>
+  <PixLabel
+    @for={{this.id}}
+    @requiredLabel={{@requiredLabel}}
+    @labelSize={{@labelSize}}
+    @screenReaderOnly={{@screenReaderOnly}}
+    @isDisabled={{@isDisabled}}
+    @inlineLabel={{true}}
+  >
+    {{yield}}
+  </PixLabel>
 </div>

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

@@ -1,7 +1,13 @@
 <div class="pix-search-input">
-  {{#if this.label}}
-    <label for={{this.searchInputId}} class="pix-search-input__label">{{this.label}}</label>
-  {{/if}}
+  <PixLabel
+    @for={{this.searchInputId}}
+    @requiredLabel={{@requiredText}}
+    @subLabel={{@subLabel}}
+    @labelSize={{@labelSize}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
+    {{@label}}
+  </PixLabel>
 
   <div class="pix-search-input__input-container">
     <FaIcon @icon="magnifying-glass" />
@@ -10,7 +16,6 @@
       class="pix-search-input__input"
       name={{@inputName}}
       placeholder={{@placeholder}}
-      aria-label={{this.ariaLabel}}
       value={{@value}}
       oninput={{this.onSearch}}
       ...attributes

package/addon/components/pix-select.hbs

@@ -9,19 +9,17 @@
   ...attributes
 >
   {{#if @label}}
-    <div class="{{if @screenReaderOnly 'screen-reader-only'}}">
-      <label for={{this.selectId}} class="pix-select__label">
-        {{#if @requiredText}}
-          <abbr class="mandatory-mark" title="{{@requiredText}}" aria-hidden="true">*</abbr>
-        {{/if}}
-        {{@label}}
-      </label>
-
-      {{#if @subLabel}}
-        <span class="pix-select__sub-label">{{@subLabel}}</span>
-      {{/if}}
-    </div>
+    <PixLabel
+      @for={{this.selectId}}
+      @requiredLabel={{@requiredText}}
+      @subLabel={{@subLabel}}
+      @labelSize={{@labelSize}}
+      @screenReaderOnly={{@screenReaderOnly}}
+    >
+      {{@label}}
+    </PixLabel>
   {{/if}}
+
   <PopperJS @placement={{@placement}} as |reference popover|>
     <button
       {{reference}}

package/addon/components/pix-select.js

@@ -12,9 +12,6 @@ export default class PixSelect extends Component {
   constructor(...args) {
     super(...args);
 
-    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) {

package/addon/components/pix-selectable-tag.hbs

@@ -1,9 +1,9 @@
-<div class="pix-selectable-tag {{if this.isChecked ' pix-selectable-tag--checked'}}">
+<div class="pix-selectable-tag {{if @checked ' pix-selectable-tag--checked'}}">
   <input
     type="checkbox"
     id={{@id}}
-    onChange={{this.toggleIsChecked}}
-    checked={{this.isChecked}}
+    {{on "change" this.toggleIsChecked}}
+    checked={{@checked}}
     ...attributes
   />
   <label for={{@id}}>{{@label}}</label>

package/addon/components/pix-selectable-tag.js

@@ -1,13 +1,9 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class PixSelectableTag extends Component {
-  @tracked isChecked = this.args.checked;
-
   @action
   toggleIsChecked() {
-    this.isChecked = !this.isChecked;
-    return this.args.onChange(this.isChecked);
+    return this.args.onChange(!this.args.checked);
   }
 }

package/addon/components/pix-textarea.hbs

@@ -1,20 +1,19 @@
 <div class="pix-textarea">
-
-  {{#if this.label}}
-
-    <label for={{@id}} class="pix-textarea__label">
-      {{#if this.requiredLabel}}
-        <abbr title={{this.requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
-      {{/if}}
-      {{this.label}}
-    </label>
-  {{/if}}
+  <PixLabel
+    @for={{@id}}
+    @requiredLabel={{@requiredLabel}}
+    @subLabel={{@subLabel}}
+    @labelSize={{@labelSize}}
+    @screenReaderOnly={{@screenReaderOnly}}
+  >
+    {{@label}}
+  </PixLabel>
 
   <textarea
     id={{@id}}
     maxlength={{if @maxlength @maxlength}}
-    aria-required="{{if this.requiredLabel true false}}"
-    required={{if this.requiredLabel true false}}
+    aria-required="{{if @requiredLabel true false}}"
+    required={{if @requiredLabel true false}}
     class="{{if @errorMessage 'pix-textarea--error'}}"
     {{on "keyup" this.updateValue}}
     ...attributes

package/addon/components/pix-textarea.js

@@ -3,36 +3,15 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class PixTextarea extends Component {
+  // eslint-disable-next-line ember/no-tracked-properties-from-args
   @tracked value = this.args.value;
 
   get textLengthIndicator() {
     return this.value ? this.value.length : 0;
   }
 
-  get label() {
-    const labelIsDefined = this.args.label?.trim();
-    const idIsDefined = this.args.id?.trim();
-
-    if (labelIsDefined && !idIsDefined) {
-      throw new Error('ERROR in PixTextarea component, @id param is necessary when giving @label');
-    }
-    return this.args.label || null;
-  }
-
   @action
   updateValue(event) {
     this.value = event.target.value;
   }
-
-  get requiredLabel() {
-    const idRequiredLabelDefined = this.args.requiredLabel?.trim();
-    const labelIsDefined = this.args.label?.trim();
-
-    if (idRequiredLabelDefined && !labelIsDefined) {
-      throw new Error(
-        'ERROR in PixTextarea component, @label param is necessary when giving @requiredLabel',
-      );
-    }
-    return this.args.requiredLabel || null;
-  }
 }

package/addon/components/pix-toggle.hbs

@@ -1,7 +1,14 @@
-<label class={{this.className}}>
-  <span class="pix-toggle__label{{if @screenReaderOnly ' screen-reader-only'}}">{{@label}}</span>
+<div class={{this.className}}>
+  <PixLabel
+    @for={{this.id}}
+    @screenReaderOnly={{@screenReaderOnly}}
+    @subLabel={{@subLabel}}
+    @labelSize={{@labelSize}}
+    @inlineLabel={{@inline}}
+  >{{@label}}</PixLabel>
   <button
     class="pix-toggle__button"
+    id={{this.id}}
     aria-pressed={{if @toggled "true" "false"}}
     type="button"
     {{on "click" this.onToggle}}
@@ -21,4 +28,4 @@
       {{/if}}
     </span>
   </button>
-</label>
+</div>

package/addon/components/pix-toggle.js

@@ -1,18 +1,13 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixToggle extends Component {
   get className() {
     const classes = ['pix-toggle'];
-    if (this.args.inline) {
-      classes.push('pix-toggle--inline');
-    }
     if (this.args.toggled) {
       classes.push('pix-toggle--pressed');
     }
-    if (this.args.screenReaderOnly) {
-      classes.push('pix-toggle--screen-reader-only');
-    }
     return classes.join(' ');
   }
 
@@ -20,4 +15,8 @@ export default class PixToggle extends Component {
   onToggle() {
     this.args.onChange(!this.args.toggled);
   }
+
+  get id() {
+    return guidFor(this);
+  }
 }

package/addon/styles/_pix-checkbox.scss

@@ -2,30 +2,13 @@
   position: relative;
   z-index: 0;
   display: flex;
+  gap: var(--pix-spacing-3x);
   align-items: center;
 
   & + .pix-checkbox {
     margin-top: var(--pix-spacing-4x);
   }
 
-  /* Label */
-  &__label {
-    @extend %pix-body-m;
-
-    padding-left: var(--pix-spacing-3x);
-    color: var(--pix-neutral-900);
-    font-weight: var(--pix-font-normal);
-    cursor: pointer;
-
-    &--small {
-      font-size: 0.875rem;
-    }
-
-    &--large {
-      font-size: 1.125rem;
-    }
-  }
-
   /* Input */
   &__input {
     position: relative;

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

@@ -7,14 +7,6 @@
     @extend %pix-form-error-state;
   }
 
-  &__label {
-    @extend %pix-label;
-  }
-
-  &__sub-label {
-    @extend %pix-sublabel;
-  }
-
   &__error-message {
     @extend %pix-input-error-message;
   }

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

@@ -50,10 +50,6 @@
       margin-left: var(--pix-spacing-1x);
     }
 
-    &::placeholder {
-      color: var(--pix-neutral-500);
-    }
-
     &.filled {
       background-color: var(--pix-neutral-0);
     }

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

@@ -9,7 +9,6 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 1px 0 1px 1px;
     border: 1px solid var(--pix-neutral-500);
     border-radius: var(--pix-spacing-1x);
 
@@ -18,7 +17,6 @@
       @extend %pix-input-default;
 
       flex-grow: 1;
-      height: 34px;
       background-color: transparent;
       border: none;
       outline: none;

package/addon/styles/_pix-input.scss

@@ -3,15 +3,6 @@
   display: flex;
   flex-direction: column;
 
-  &__label {
-    @extend %pix-label;
-  }
-
-  &__sub-label {
-    @extend %pix-sublabel;
-  }
-
-
   &__container {
     position: relative;
   }
@@ -41,11 +32,10 @@
   }
 
   &__input {
-    @extend %pix-form-element-state;
     @extend %pix-input-default;
+    @extend %pix-form-element-state;
 
     width: 100%;
-    height: 36px;
     border: 1px solid var(--pix-neutral-500);
 
     &--error {

package/addon/styles/_pix-label.scss

@@ -0,0 +1,35 @@
+.pix-label {
+  display: block;
+  margin-bottom: var(--pix-spacing-1x);
+  color: var(--pix-neutral-900);
+  font-weight: var(--pix-font-medium);
+
+  &--disabled {
+    color: var(--pix-neutral-500);
+  }
+
+  &--default {
+    @extend %pix-body-m;
+  }
+
+  &--small {
+    @extend %pix-body-s;
+  }
+
+  &--large {
+    @extend %pix-body-l;
+  }
+
+
+  &--inline-label {
+    margin: 0;
+    font-weight: var(--pix-font-normal)
+  }
+
+  &__sub-label {
+    @extend %pix-body-xs;
+
+    display: block;
+    color: var(--pix-neutral-500);
+  }
+}

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

@@ -1,10 +1,6 @@
 .pix-multi-select {
   position: relative;
   display: inline-block;
-
-  &__label {
-    @extend %pix-label;
-  }
 }
 
 .pix-multi-select-header {

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

@@ -1,20 +1,12 @@
 .pix-radio-button {
   display: flex;
+  gap: var(--pix-spacing-3x);
   align-items: center;
 
   & + .pix-radio-button {
     margin-top: var(--pix-spacing-4x);
   }
 
-  &__label {
-    @extend %pix-body-m;
-
-    padding-left: var(--pix-spacing-3x);
-    color: var(--pix-neutral-900);
-    font-weight: var(--pix-font-normal);
-    cursor: pointer;
-  }
-
   &__input {
     position: relative;
     flex-shrink: 0;