@1024pix/pix-ui 44.3.8 → 45.0.0

package/addon/components/pix-select.hbs

@@ -1,5 +1,5 @@
 <div
-  class="pix-select"
+  class="pix-select {{if @inlineLabel ' pix-select--inline'}}"
   id="container-{{this.selectId}}"
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
@@ -8,146 +8,152 @@
   {{on "keydown" this.lockTab}}
   ...attributes
 >
-  {{#if @label}}
+  {{#if (has-block "label")}}
     <PixLabel
       @for={{this.selectId}}
-      @requiredLabel={{@requiredText}}
+      @requiredLabel={{@requiredLabel}}
       @subLabel={{@subLabel}}
-      @labelSize={{@labelSize}}
+      @size={{@size}}
       @screenReaderOnly={{@screenReaderOnly}}
+      @inlineLabel={{@inlineLabel}}
     >
-      {{@label}}
+      {{yield to="label"}}
     </PixLabel>
   {{/if}}
 
-  <PopperJS @placement={{@placement}} as |reference popover|>
-    <button
-      {{reference}}
-      type="button"
-      id={{this.selectId}}
-      class={{this.className}}
-      {{on "click" this.toggleDropdown}}
-      aria-expanded={{this.isAriaExpanded}}
-      aria-controls={{this.listId}}
-      aria-disabled={{@isDisabled}}
-    >
-      {{#if @icon}}
-        <FaIcon @icon={{@icon}} />
-      {{/if}}
+  <div>
+    <PopperJS @placement={{@placement}} as |reference popover|>
+      <button
+        {{reference}}
+        type="button"
+        id={{this.selectId}}
+        class={{this.className}}
+        {{on "click" this.toggleDropdown}}
+        aria-expanded={{this.isAriaExpanded}}
+        aria-controls={{this.listId}}
+        aria-disabled={{@isDisabled}}
+      >
+        {{#if @icon}}
+          <FaIcon @icon={{@icon}} />
+        {{/if}}
 
-      <span class="pix-select-button__text">{{this.placeholder}}</span>
+        <span class="pix-select-button__text">{{this.placeholder}}</span>
 
-      <FaIcon
-        class="pix-select-button__dropdown-icon"
-        @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
-      />
-    </button>
-    <div
-      {{popover}}
-      class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-      id={{this.dropDownId}}
-      {{on "transitionend" this.focus}}
-    >
-      {{#if @isSearchable}}
-        <div class="pix-select__search">
-          <FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
-          <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
-          <input
-            class="pix-select-search__input"
-            id={{this.searchId}}
-            autocomplete="off"
-            tabindex={{if this.isExpanded "0" "-1"}}
-            placeholder={{@searchPlaceholder}}
-            {{on "input" this.setSearchValue}}
-          />
-        </div>
-      {{/if}}
-      <ul role="listbox" id={{this.listId}} class="pix-select__options">
-        <li
-          class="pix-select-options-category__option{{unless
-              @value
-              ' pix-select-options-category__option--selected'
-            }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
-          role="option"
-          tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
-          aria-selected={{if @value "false" "true"}}
-          {{on "click" (fn this.onChange this.defaultOption)}}
-          {{on-enter-action (fn this.onChange this.defaultOption)}}
-          {{on-space-action (fn this.onChange this.defaultOption)}}
-        >
-          {{@placeholder}}
-        </li>
-        {{#if this.results}}
-          {{#if this.displayCategory}}
-            {{#each this.results as |element index|}}
-              <ul
-                class="pix-select-options__category"
-                role="group"
-                aria-labelledby={{if this.displayCategory (concat "cat-" this.selectId "-" index)}}
-              >
-                {{#if this.displayCategory}}
-                  <li
-                    class="pix-select-options-category__name"
-                    role="presentation"
-                    id={{concat "cat-" this.selectId "-" index}}
-                  >
-                    {{element.category}}
-                  </li>
-                {{/if}}
+        <FaIcon
+          class="pix-select-button__dropdown-icon"
+          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+        />
+      </button>
+      <div
+        {{popover}}
+        class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
+        id={{this.dropDownId}}
+        {{on "transitionend" this.focus}}
+      >
+        {{#if @isSearchable}}
+          <div class="pix-select__search">
+            <FaIcon class="pix-select-search__icon" @icon="magnifying-glass" />
+            <label class="screen-reader-only" for={{this.searchId}}>{{@searchLabel}}</label>
+            <input
+              class="pix-select-search__input"
+              id={{this.searchId}}
+              autocomplete="off"
+              tabindex={{if this.isExpanded "0" "-1"}}
+              placeholder={{@searchPlaceholder}}
+              {{on "input" this.setSearchValue}}
+            />
+          </div>
+        {{/if}}
+        <ul role="listbox" id={{this.listId}} class="pix-select__options">
+          <li
+            class="pix-select-options-category__option{{unless
+                @value
+                ' pix-select-options-category__option--selected'
+              }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
+            role="option"
+            tabindex={{if this.isDefaultOptionHidden "-1" "0"}}
+            aria-selected={{if @value "false" "true"}}
+            {{on "click" (fn this.onChange this.defaultOption)}}
+            {{on-enter-action (fn this.onChange this.defaultOption)}}
+            {{on-space-action (fn this.onChange this.defaultOption)}}
+          >
+            {{@placeholder}}
+          </li>
+          {{#if this.results}}
+            {{#if this.displayCategory}}
+              {{#each this.results as |element index|}}
+                <ul
+                  class="pix-select-options__category"
+                  role="group"
+                  aria-labelledby={{if
+                    this.displayCategory
+                    (concat "cat-" this.selectId "-" index)
+                  }}
+                >
+                  {{#if this.displayCategory}}
+                    <li
+                      class="pix-select-options-category__name"
+                      role="presentation"
+                      id={{concat "cat-" this.selectId "-" index}}
+                    >
+                      {{element.category}}
+                    </li>
+                  {{/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)
-                        ' pix-select-options-category__option--selected'
-                      }}"
-                    role="option"
-                    tabindex={{if this.isExpanded "0" "-1"}}
-                    aria-selected={{if (eq option.value @value) "true" "false"}}
-                    {{on "click" (fn this.onChange option)}}
-                    {{on-enter-action (fn this.onChange option)}}
-                    {{on-space-action (fn this.onChange option)}}
-                  >
-                    {{option.label}}
+                  {{#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)
+                          ' pix-select-options-category__option--selected'
+                        }}"
+                      role="option"
+                      tabindex={{if this.isExpanded "0" "-1"}}
+                      aria-selected={{if (eq option.value @value) "true" "false"}}
+                      {{on "click" (fn this.onChange option)}}
+                      {{on-enter-action (fn this.onChange option)}}
+                      {{on-space-action (fn this.onChange option)}}
+                    >
+                      {{option.label}}
 
-                    {{#if (eq option.value @value)}}
-                      <FaIcon @icon="check" role="presentation" />
-                    {{/if}}
-                  </li>
-                {{/each}}
-              </ul>
-            {{/each}}
-          {{else}}
-            {{#each this.results as |option|}}
-              <li
-                class="pix-select-options-category__option{{if
-                    (eq option.value @value)
-                    ' pix-select-options-category__option--selected'
-                  }}"
-                role="option"
-                tabindex={{if this.isExpanded "0" "-1"}}
-                aria-selected={{if (eq option.value @value) "true" "false"}}
-                {{on "click" (fn this.onChange option)}}
-                {{on-enter-action (fn this.onChange option)}}
-                {{on-space-action (fn this.onChange this.defaultOption)}}
-              >
-                {{option.label}}
+                      {{#if (eq option.value @value)}}
+                        <FaIcon @icon="check" role="presentation" />
+                      {{/if}}
+                    </li>
+                  {{/each}}
+                </ul>
+              {{/each}}
+            {{else}}
+              {{#each this.results as |option|}}
+                <li
+                  class="pix-select-options-category__option{{if
+                      (eq option.value @value)
+                      ' pix-select-options-category__option--selected'
+                    }}"
+                  role="option"
+                  tabindex={{if this.isExpanded "0" "-1"}}
+                  aria-selected={{if (eq option.value @value) "true" "false"}}
+                  {{on "click" (fn this.onChange option)}}
+                  {{on-enter-action (fn this.onChange option)}}
+                  {{on-space-action (fn this.onChange this.defaultOption)}}
+                >
+                  {{option.label}}
 
-                {{#if (eq option.value @value)}}
-                  <FaIcon @icon="check" role="presentation" />
-                {{/if}}
-              </li>
-            {{/each}}
+                  {{#if (eq option.value @value)}}
+                    <FaIcon @icon="check" role="presentation" />
+                  {{/if}}
+                </li>
+              {{/each}}
+            {{/if}}
+          {{else}}
+            <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
           {{/if}}
-        {{else}}
-          <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
-        {{/if}}
-      </ul>
-    </div>
-  </PopperJS>
-  {{#if @errorMessage}}
-    <p class="pix-select__error-message">{{@errorMessage}}</p>
-  {{/if}}
+        </ul>
+      </div>
+    </PopperJS>
+    {{#if @errorMessage}}
+      <p class="pix-select__error-message">{{@errorMessage}}</p>
+    {{/if}}
+  </div>
 </div>

package/addon/components/pix-textarea.hbs

@@ -1,29 +1,33 @@
-<div class="pix-textarea">
+<div class="pix-textarea {{if @inlineLabel ' pix-textarea--inline'}}">
   <PixLabel
-    @for={{@id}}
+    @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
+    @inlineLabel={{@inlineLabel}}
   >
-    {{@label}}
+    {{yield to="label"}}
   </PixLabel>
 
-  <textarea
-    id={{@id}}
-    maxlength={{if @maxlength @maxlength}}
-    aria-required="{{if @requiredLabel true false}}"
-    required={{if @requiredLabel true false}}
-    class="{{if @errorMessage 'pix-textarea--error'}}"
-    {{on "keyup" this.updateValue}}
-    ...attributes
-  >{{@value}}</textarea>
+  <div>
+    <textarea
+      id={{this.id}}
+      maxlength={{if @maxlength @maxlength}}
+      aria-required="{{if @requiredLabel true false}}"
+      required={{if @requiredLabel true false}}
+      class="{{if @errorMessage 'pix-textarea--error'}}"
+      {{on "keyup" this.updateValue}}
+      ...attributes
+    >{{@value}}</textarea>
 
-  {{#if @maxlength}}
-    <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>
-  {{/if}}
+    {{#if @maxlength}}
+      <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>
+    {{/if}}
+
+    {{#if @errorMessage}}
+      <label for={{this.id}} class="pix-textarea__error-message">{{@errorMessage}}</label>
+    {{/if}}
+  </div>
 
-  {{#if @errorMessage}}
-    <label for={{this.id}} class="pix-textarea__error-message">{{@errorMessage}}</label>
-  {{/if}}
 </div>

package/addon/components/pix-textarea.js

@@ -1,11 +1,17 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixTextarea extends Component {
   // eslint-disable-next-line ember/no-tracked-properties-from-args
   @tracked value = this.args.value;
 
+  get id() {
+    if (this.args.id) return this.args.id;
+    return 'textarea-' + guidFor(this);
+  }
+
   get textLengthIndicator() {
     return this.value ? this.value.length : 0;
   }

package/addon/components/pix-toggle.hbs

@@ -3,9 +3,9 @@
     @for={{this.id}}
     @screenReaderOnly={{@screenReaderOnly}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
-    @inlineLabel={{@inline}}
-  >{{@label}}</PixLabel>
+    @size={{@size}}
+    @inlineLabel={{@inlineLabel}}
+  >{{yield to="label"}}</PixLabel>
   <button
     class="pix-toggle__button"
     id={{this.id}}

package/addon/components/pix-toggle.js

@@ -8,6 +8,11 @@ export default class PixToggle extends Component {
     if (this.args.toggled) {
       classes.push('pix-toggle--pressed');
     }
+
+    if (this.args.inlineLabel) {
+      classes.push('pix-toggle--inline');
+    }
+
     return classes.join(' ');
   }
 

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

@@ -1,7 +1,14 @@
 .pix-input-password {
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 
   &__container {
     @extend %pix-form-element-state;
@@ -12,6 +19,17 @@
     border: 1px solid var(--pix-neutral-500);
     border-radius: var(--pix-spacing-1x);
 
+    &--error {
+      @extend %pix-form-error-state;
+
+      padding-right: var(--pix-spacing-6x);
+    }
+
+    &--success {
+      @extend %pix-form-success-state;
+
+      padding-right: var(--pix-spacing-6x);
+    }
 
     input {
       @extend %pix-input-default;
@@ -44,18 +62,6 @@
     }
   }
 
-  &__error-container {
-    @extend %pix-form-error-state;
-
-    padding-right: var(--pix-spacing-6x);
-  }
-
-  &__success-container {
-    @extend %pix-form-success-state;
-
-    padding-right: var(--pix-spacing-6x);
-  }
-
   &__icon {
     position: absolute;
     right: 12px;

package/addon/styles/_pix-input.scss

@@ -1,7 +1,14 @@
 .pix-input {
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 
   &__container {
     position: relative;
@@ -10,7 +17,7 @@
   svg {
     position: absolute;
     right: 12px;
-    bottom: 11px;
+    bottom: calc(50% - 7px); // height/2 + padding
     width: 10px;
     height: 10px;
     padding: 2px;

package/addon/styles/_pix-label.scss

@@ -1,6 +1,5 @@
 .pix-label {
   display: block;
-  margin-bottom: var(--pix-spacing-1x);
   color: var(--pix-neutral-900);
   font-weight: var(--pix-font-medium);
 

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

@@ -1,6 +1,14 @@
 .pix-multi-select {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 }
 
 .pix-multi-select-header {

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

@@ -1,7 +1,14 @@
 .pix-search-input {
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 
   &__input-container {
     position: relative;

package/addon/styles/_pix-select.scss

@@ -1,6 +1,14 @@
 .pix-select {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 
   &__dropdown {
     @extend %pix-shadow-sm;

package/addon/styles/_pix-toggle.scss

@@ -1,6 +1,13 @@
 .pix-toggle {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
+  gap: var(--pix-spacing-1x);
+
+  &--inline {
+    flex-direction: row;
+    gap: var(--pix-spacing-2x);
+    align-items: center;
+  }
 
   &__button {
     width: fit-content;

package/app/stories/form.stories.js

@@ -10,75 +10,82 @@ export const form = (args) => {
     template: hbs`<form>
   <PixInput
     @id='firstName'
-    @label='Prénom'
     @errorMessage={{this.genericErrorMessage}}
     @requiredLabel='champ obligatoire'
     @validationStatus={{this.validationStatus}}
-  />
+  >
+    <:label>Prénom</:label>
+  </PixInput>
   <br />
-  <PixInputPassword
-    @id='password'
-    @label='Mot de passe'
-    @errorMessage={{this.genericErrorMessage}}
-  />
+  <PixInputPassword @id='password' @errorMessage={{this.genericErrorMessage}}>
+    <:label>Mot de passe</:label>
+  </PixInputPassword>
   <br />
 
   <PixMultiSelect
-    @innerText='Votre notation en étoiles...'
     @id='form__pix-multi-select'
-    @label='A quel point aimez-vous Pix UI ?'
     @onSelect={{this.onSelect}}
     @selected={{this.selected}}
     @options={{this.options}}
-    as |star|
   >
-    <PixStars @count={{star.value}} @total={{star.total}} />
+    <:label>A quel point aimez-vous Pix UI ?</:label>
+    <:placeholder>Votre notation en étoiles...</:placeholder>
+    <:default as |star|>
+      <PixStars @count={{star.value}} @total={{star.total}} />
+    </:default>
   </PixMultiSelect>
   <br /><br />
 
   <PixMultiSelect
-    @innerText='Mes condiments'
     @id='form__pix-multi-select-searchable'
-    @label='Choississez vos condiments'
     @onSelect={{this.onSelect}}
     @selected={{this.selected}}
     @isSearchable={{true}}
     @options={{this.optionsSearch}}
-    as |condiment|
   >
-    {{condiment.label}}
+    <:label>Choississez vos condiments</:label>
+    <:placeholder>Mes condiments</:placeholder>
+    <:default as |condiment|>
+      {{condiment.label}}
+    </:default>
   </PixMultiSelect>
   <br /><br />
   {{! template-lint-disable no-inline-styles }}
 
   <PixSelect
     @id='form__searchable-pix-select'
-    @label='Votre fruit préféré est : '
     @options={{this.selectOptions}}
     @isSearchable={{true}}
     @isValidationActive={{true}}
     placeholder='Fraises, Mangues...'
     style='width:100%'
-  />
+  >
+    <:label>Votre fruit préféré est :</:label>
+  </PixSelect>
   <br />
 
   <PixTextarea
     @id='form__pix-textarea'
-    @value=''
     @maxlength={{200}}
-    @label='Un commentaire ?'
     @requiredLabel='Champ obligatoire'
     @errorMessage={{this.genericErrorMessage}}
-  />
+  >
+    <:label>Un commentaire ?</:label>
+  </PixTextarea>
   <br />
 
   <label class='pix-form__label'> Votre légume préféré est : </label>
-  <PixRadioButton @label='Chou' @value='chou' name='légume' />
-  <PixRadioButton @label='Carotte' @value='carotte' name='légume' />
+  <PixRadioButton @value='chou' name='légume'>
+    <:label>Chou</:label>
+  </PixRadioButton>
+  <PixRadioButton @value='carotte' name='légume'>
+    <:label>Carotte</:label>
+  </PixRadioButton>
+
   <br />
 
-  <PixCheckbox @id='spam-pub' @labelSize='small'>
-    Acceptez-vous de vous faire spammer de PUB ?
+  <PixCheckbox @id='spam-pub' @size='small'>
+    <:label>Acceptez-vous de vous faire spammer de PUB ?</:label>
   </PixCheckbox>
 
   <br /><br />

package/app/stories/pix-checkbox.mdx

@@ -53,10 +53,10 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 <PixCheckbox
   @screenReaderOnly="{{false}}"
   @isIndeterminate="{{false}}"
-  @labelSize="small"
+  @size="small"
   disabled
 >
-  Recevoir la newsletter
+  <:label>Recevoir la newsletter</:label>
 </PixCheckbox>
 ```