@1024pix/pix-ui 39.0.2 → 40.0.0

package/addon/common/add-dynamic-style-tag.js

@@ -0,0 +1,8 @@
+export function createClass(name, rules) {
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  document.getElementsByTagName('head')[0].appendChild(style);
+
+  if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
+  else style.sheet.insertRule(name + '{' + rules + '}', 0);
+}

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

@@ -1,15 +1,13 @@
-<div>
-  <div class="{{if @screenReaderOnly 'screen-reader-only'}}">
-    <label class="pix-filterable-and-searchable-select__label" for={{this.id}}>
-      {{#if @requiredText}}
-        <abbr class="mandatory-mark" title="{{@requiredText}}" aria-hidden="true">*</abbr>
-      {{/if}}
-      {{@label}}
-    </label>
+<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}}
+    {{@label}}
     {{#if @subLabel}}
       <span class="pix-select__sub-label">{{@subLabel}}</span>
     {{/if}}
-  </div>
+  </label>
   <div
     class="pix-filterable-and-searchable-select{{if
         @errorMessage
@@ -17,6 +15,7 @@
       }}"
   >
     <PixMultiSelect
+      id={{this.pixMultiSelectId}}
       @values={{this.selectedCategories}}
       @label={{@categoriesLabel}}
       @options={{this.categories}}
@@ -28,7 +27,8 @@
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>
     <PixSelect
-      @id={{this.id}}
+      {{did-insert this.setSelectWidth}}
+      @id={{this.pixSelectId}}
       @placeholder={{@placeholder}}
       @value={{@value}}
       @options={{this.selectableOptions}}
@@ -38,6 +38,7 @@
       @screenReaderOnly={{true}}
       @hideDefaultOption={{@hideDefaultOption}}
       @className="pix-filterable-and-searchable-select__pix-select"
+      @isComputeWidthDisabled={{true}}
     />
   </div>
   {{#if @errorMessage}}

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

@@ -2,17 +2,27 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixFilterableAndSearchableSelect extends Component {
   @tracked selectedCategories = [];
-
-  id = 'pix-filterable-and-searchable-select' + guidFor(this);
+  mainId = 'pix-pfass-' + guidFor(this);
+  pixSelectId = 'pix-pfass-select-' + guidFor(this);
+  pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
 
   @action
   selectCategories(categories) {
     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) => {
@@ -45,4 +55,22 @@ export default class PixFilterableAndSearchableSelect extends Component {
 
     return selectableOptions;
   }
+
+  @action
+  setSelectWidth(element) {
+    const baseFontRemRatio = Number(
+      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+    );
+
+    const multiSelectWidth = document
+      .getElementById(this.pixMultiSelectId)
+      .getBoundingClientRect().width;
+
+    const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
+
+    const className = `sizing-select-${this.pixSelectId}`;
+    createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
+
+    element.className = element.className + ' ' + className;
+  }
 }

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

@@ -1,5 +1,6 @@
 <div
   class="pix-multi-select"
+  ...attributes
   {{on-click-outside this.hideDropDown}}
   {{on-arrow-down-up-action this.listId this.showDropDown this.isExpanded}}
   {{on-escape-action this.hideDropDown this.multiSelectId}}
@@ -11,75 +12,78 @@
       class="pix-multi-select__label{{if @screenReaderOnly ' screen-reader-only'}}"
     >{{@label}}</label>
   {{/if}}
-  {{#if @isSearchable}}
-    <span class="pix-multi-select-header{{if @className this.className}}">
-      <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
+  <PopperJS @placement={{@placement}} as |reference popover|>
 
-      <input
-        class="pix-multi-select-header__search-input"
+    {{#if @isSearchable}}
+      <span {{reference}} class={{this.headerClassName}}>
+        <FaIcon @icon="magnifying-glass" class="pix-multi-select-header__search-icon" />
+
+        <input
+          class="pix-multi-select-header__search-input"
+          id={{this.multiSelectId}}
+          type="text"
+          name={{this.multiSelectId}}
+          placeholder={{this.placeholder}}
+          autocomplete="off"
+          {{on "input" this.updateSearch}}
+          {{on "click" this.toggleDropDown}}
+          aria-expanded={{this.isAriaExpanded}}
+          aria-controls={{this.listId}}
+          aria-haspopup="menu"
+        />
+      </span>
+    {{else}}
+      <button
+        {{reference}}
         id={{this.multiSelectId}}
-        type="text"
-        name={{this.multiSelectId}}
-        placeholder={{this.placeholder}}
-        autocomplete="off"
-        {{on "input" this.updateSearch}}
-        {{on "click" this.toggleDropDown}}
+        type="button"
         aria-expanded={{this.isAriaExpanded}}
         aria-controls={{this.listId}}
         aria-haspopup="menu"
-        ...attributes
-      />
-    </span>
-  {{else}}
-    <button
-      id={{this.multiSelectId}}
-      type="button"
-      aria-expanded={{this.isAriaExpanded}}
-      aria-controls={{this.listId}}
-      aria-haspopup="menu"
-      class="pix-multi-select-header{{if @className this.className}}"
-      {{on "click" this.toggleDropDown}}
-      ...attributes
+        class={{this.headerClassName}}
+        {{on "click" this.toggleDropDown}}
+      >
+        {{#if (has-block "placeholder")}}
+          {{yield to="placeholder"}}
+        {{else if @placeholder}}
+          {{this.placeholder}}
+        {{/if}}
+        <FaIcon
+          class="pix-multi-select-header__dropdown-icon
+            {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
+          @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
+        />
+      </button>
+    {{/if}}
+
+    <ul
+      {{popover}}
+      class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
+      id={{this.listId}}
+      role="menu"
     >
-      {{#if (has-block "placeholder")}}
-        {{yield to="placeholder"}}
-      {{else if @placeholder}}
-        {{this.placeholder}}
+      {{#if (gt this.results.length 0)}}
+        {{#each this.results as |option|}}
+          <li class="pix-multi-select-list__item" role="menuitem">
+            <PixCheckbox
+              @id={{concat this.multiSelectId "-" option.value}}
+              @checked={{option.checked}}
+              @labelSize="small"
+              @class="pix-multi-select-list__item-label"
+              value={{option.value}}
+              {{on "change" this.onSelect}}
+              {{on-enter-action this.hideDropDown this.multiSelectId}}
+              tabindex={{if this.isExpanded "0" "-1"}}
+            >
+              {{yield option}}
+            </PixCheckbox>
+          </li>
+        {{/each}}
+      {{else}}
+        <li
+          class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
+        >{{@emptyMessage}}</li>
       {{/if}}
-      <FaIcon
-        class="pix-multi-select-header__dropdown-icon
-          {{if this.isExpanded ' pix-multi-select-header__dropdown-icon--expand'}}"
-        @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
-      />
-    </button>
-  {{/if}}
-
-  <ul
-    class="pix-multi-select-list {{unless this.isExpanded 'pix-multi-select-list--hidden'}}"
-    id={{this.listId}}
-    role="menu"
-  >
-    {{#if (gt this.results.length 0)}}
-      {{#each this.results as |option|}}
-        <li class="pix-multi-select-list__item" role="menuitem">
-          <PixCheckbox
-            @id={{concat this.multiSelectId "-" option.value}}
-            @checked={{option.checked}}
-            @labelSize="small"
-            @class="pix-multi-select-list__item-label"
-            value={{option.value}}
-            {{on "change" this.onSelect}}
-            {{on-enter-action this.hideDropDown this.multiSelectId}}
-            tabindex={{if this.isExpanded "0" "-1"}}
-          >
-            {{yield option}}
-          </PixCheckbox>
-        </li>
-      {{/each}}
-    {{else}}
-      <li
-        class="pix-multi-select-list__item pix-multi-select-list__item--no-result"
-      >{{@emptyMessage}}</li>
-    {{/if}}
-  </ul>
+    </ul>
+  </PopperJS>
 </div>

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

@@ -33,6 +33,15 @@ export default class PixMultiSelect extends Component {
     this.options = [...(this.args.options || [])];
   }
 
+  get headerClassName() {
+    const classes = ['pix-multi-select-header'];
+    if (this.args.className) {
+      classes.push(this.args.className);
+    }
+
+    return classes.join(' ');
+  }
+
   get multiSelectId() {
     if (this.args.id) return this.args.id;
     return 'select-' + guidFor(this);

package/addon/components/pix-select.hbs

@@ -115,7 +115,9 @@
                   >
                     {{option.label}}
 
-                    <FaIcon @icon="check" />
+                    {{#if (eq option.value @value)}}
+                      <FaIcon @icon="check" />
+                    {{/if}}
                   </li>
                 {{/each}}
               </ul>
@@ -136,7 +138,9 @@
               >
                 {{option.label}}
 
-                <FaIcon @icon="check" />
+                {{#if (eq option.value @value)}}
+                  <FaIcon @icon="check" />
+                {{/if}}
               </li>
             {{/each}}
           {{/if}}

package/addon/components/pix-select.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
+import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixSelect extends Component {
   @tracked isExpanded = false;
@@ -162,27 +163,20 @@ export default class PixSelect extends Component {
 
   @action
   setSelectWidth() {
-    const baseFontRemRatio = Number(
-      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-    );
-    const checkIconWidth = 1.125 * baseFontRemRatio;
-    const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
-    const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
-
-    const className = `sizing-select-${this.selectId}`;
-    this.createClass(`.${className}`, `width: ${selectWidth}rem;`);
+    if (!this.args.isComputeWidthDisabled) {
+      const baseFontRemRatio = Number(
+        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+      );
+      const checkIconWidth = 1.125 * baseFontRemRatio;
+      const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
+      const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
 
-    const element = document.getElementById(`container-${this.selectId}`);
+      const className = `sizing-select-${this.selectId}`;
+      createClass(`.${className}`, `width: ${selectWidth}rem;`);
 
-    element.className = element.className + ' ' + className;
-  }
+      const element = document.getElementById(`container-${this.selectId}`);
 
-  createClass(name, rules) {
-    var style = document.createElement('style');
-    style.type = 'text/css';
-    document.getElementsByTagName('head')[0].appendChild(style);
-
-    if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
-    else style.sheet.insertRule(name + '{' + rules + '}', 0);
+      element.className = element.className + ' ' + className;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 .pix-filterable-and-searchable-select {
   display: flex;
-  width: fit-content;
+  max-width: 100%;
   border: 1px $pix-neutral-45 solid;
   border-radius: 4px;
 
@@ -30,6 +30,10 @@
     @include errorMessage();
   }
 
+  .pix-select {
+    flex: 1 1 0%;
+  }
+
   .pix-multi-select {
     margin-right: 2px;
 
@@ -54,6 +58,7 @@
   }
 
   &__pix-select {
+    width: 100%;
     border-radius: 0 4px 4px 0;
   }
 }

package/addon/styles/_pix-input.scss

@@ -51,6 +51,17 @@
     &::placeholder {
       color: $pix-neutral-30;
     }
+
+    &[aria-disabled],
+    &[disabled],
+    &[readonly] {
+      @include formElementDisabled();
+      @include hoverFormElementDisabled();
+    }
+
+    &[readonly] {
+      cursor: default;
+    }
   }
 
   &__input--error {

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

@@ -67,8 +67,8 @@
 .pix-multi-select-list {
   position: absolute;
   z-index: 200;
-  width: 100%;
-  max-height: 200px;
+  min-width: 100%;
+  max-height: 12.5rem;
   margin: 0;
   margin-top: $pix-spacing-xxs;
   padding: 0;

package/addon/styles/_pix-select.scss

@@ -13,7 +13,8 @@
   &__dropdown {
     position: absolute;
     z-index: 200;
-    width: inherit;
+    width: 100%;
+    min-width: fit-content;
     max-height: 12.5rem;
     margin-top: $pix-spacing-xxs;
     padding: 0;
@@ -84,6 +85,7 @@
 .pix-select-button {
   position: relative;
   display: flex;
+  gap: $pix-spacing-s;
   align-items: center;
   justify-content: space-between;
   width: 100%;
@@ -118,7 +120,6 @@
   &__dropdown-icon {
     @extend %pix-body-s;
 
-    margin-left: $pix-spacing-xs;
     color: $pix-neutral-60;
     pointer-events: none;
   }
@@ -143,6 +144,7 @@
     @extend %pix-body-s;
 
     display: flex;
+    gap: $pix-spacing-m;
     justify-content: space-between;
     padding: $pix-spacing-xs $pix-spacing-m;
     color: $pix-neutral-70;

package/addon/styles/pix-design-tokens/_form.scss

@@ -14,6 +14,7 @@
 
 @mixin formElementDisabled() {
   background-color: $pix-neutral-20;
+  cursor: not-allowed;
 }
 
 @mixin focusFormElement() {

package/app/stories/pix-input.mdx

@@ -37,27 +37,38 @@ screen.getByLabelText('Prénom exemple: Barry');
 
 <Story of={ComponentStories.Default} height={100} />
 
-
 ## With label and information
 
 <Story of={ComponentStories.withLabel} height={110} />
 
-
 ## Error state (with error message)
 
 <Story of={ComponentStories.errorState} height={110} />
 
-
 ## Success state
 
 <Story of={ComponentStories.successState} height={100} />
 
+## Disabled & readonly states
+
+[📖 Lire la différence entre les 2 états.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly#attribute_interactions)
+
+#### Disabled
+
+Un input désactivé n'est pas focusable et n'est pas censé être envoyé à la soumission de formulaire.
+
+<Story of={ComponentStories.disabledState} height={100} />
+
+#### Readonly
+
+En readonly, l'input n'est pas modifiable, mais il est toujours focusable et est soumis normalement.
+
+<Story of={ComponentStories.readonlyState} height={100} />
 
 ## With required label
 
 <Story of={ComponentStories.withRequiredLabel} height={100} />
 
-
 ## Usage
 
 ```html

package/app/stories/pix-input.stories.js

@@ -65,6 +65,8 @@ const Template = (args) => {
   @requiredLabel={{this.requiredLabel}}
   @ariaLabel={{this.ariaLabel}}
   @validationStatus={{this.validationStatus}}
+  disabled={{this.disabled}}
+  readonly={{this.readonly}}
 />`,
     context: args,
   };
@@ -98,6 +100,20 @@ successState.args = {
   validationStatus: 'success',
 };
 
+export const disabledState = Template.bind({});
+disabledState.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  disabled: true,
+};
+
+export const readonlyState = Template.bind({});
+readonlyState.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  readonly: true,
+};
+
 export const withRequiredLabel = Template.bind({});
 withRequiredLabel.args = {
   id: 'first-name',

package/app/stories/pix-multi-select.stories.js

@@ -92,14 +92,25 @@ export default {
       type: { name: 'boolean', required: false },
       table: { defaultValue: { summary: false } },
     },
-    className: {
-      name: 'className',
+    headerClassName: {
+      name: 'headerClassName',
       description: 'Cette classe css permet de surcharger le css par défaut du composant.',
       type: { name: 'string', required: false },
       table: {
         type: { summary: 'string' },
       },
     },
+    placement: {
+      name: 'placement',
+      description:
+        "Permet de placer la dropdown du select par rapport à son bouton. Par défaut, cela s'adapte tout seul.",
+      type: { name: 'string', required: false },
+      options: ['bottom', 'top', 'left', 'right'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: null },
+      },
+    },
   },
 };
 

package/app/stories/pix-select.stories.js

@@ -169,6 +169,15 @@ export default {
         defaultValue: { summary: null },
       },
     },
+    isComputeWidthDisabled: {
+      name: 'isComputeWidthDisabled',
+      description:
+        'Permet de ne pas calculer la width du select par rapport à la taille maximum de la dropdown',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: false },
+      },
+    },
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "39.0.2",
+  "version": "40.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -49,16 +49,16 @@
   "dependencies": {
     "@formatjs/intl": "^2.5.1",
     "ember-auto-import": "^2.5.0",
-    "ember-cli-babel": "^7.26.8",
+    "ember-cli-babel": "^8.0.0",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-sass": "^11.0.1",
     "ember-click-outside": "^6.0.1",
     "ember-popperjs": "^3.0.0",
-    "ember-truth-helpers": "^3.1.1",
+    "ember-truth-helpers": "^4.0.0",
     "lodash.debounce": "^4.0.8"
   },
   "devDependencies": {
-    "@1024pix/ember-testing-library": "^0.7.0",
+    "@1024pix/ember-testing-library": "^0.8.0",
     "@1024pix/eslint-config": "^1.0.3",
     "@1024pix/storybook-ember": "^7.1.1",
     "@1024pix/stylelint-config": "^4.0.1",
@@ -75,17 +75,17 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@storybook/addon-a11y": "^7.1.0",
-    "@storybook/addon-controls": "^7.1.0",
-    "@storybook/addon-docs": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-mdx-gfm": "^7.1.0",
-    "@storybook/addons": "^7.1.0",
-    "@storybook/blocks": "^7.1.0",
-    "@storybook/builder-webpack5": "^7.1.0",
+    "@storybook/addon-a11y": "7.1.0",
+    "@storybook/addon-controls": "7.1.0",
+    "@storybook/addon-docs": "7.1.0",
+    "@storybook/addon-essentials": "7.1.0",
+    "@storybook/addon-mdx-gfm": "7.1.0",
+    "@storybook/addons": "7.1.0",
+    "@storybook/blocks": "7.1.0",
+    "@storybook/builder-webpack5": "7.1.0",
     "@storybook/ember-cli-storybook": "^0.6.0",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^7.1.0",
+    "@storybook/theming": "7.1.0",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/user-event": "^14.4.3",
     "chromatic": "^6.17.3",
@@ -98,9 +98,9 @@
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
+    "ember-page-title": "^8.0.0",
     "ember-qunit": "^7.0.0",
-    "ember-resolver": "^9.0.0",
+    "ember-resolver": "^11.0.0",
     "ember-sinon": "^5.0.0",
     "ember-source": "^4.0.1",
     "ember-source-channel-url": "^3.0.0",
@@ -108,7 +108,7 @@
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-try": "^3.0.0-beta",
     "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ember": "^11.2.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -136,6 +136,11 @@
   "ember-addon": {
     "configPath": "tests/dummy/config"
   },
+  "files": [
+    "addon/",
+    "app/",
+    "public/"
+  ],
   "storybook-deployer": {
     "commitMessage": "Deploy Storybook [skip ci]"
   }

package/.buildpacks

@@ -1,2 +0,0 @@
-https://github.com/Scalingo/nodejs-buildpack
-https://github.com/Scalingo/nginx-buildpack