@1024pix/pix-ui 23.1.1 → 23.1.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Pix-UI Changelog
 
+## v23.1.2 (16/12/2022)
+
+
+### :bug: Correction
+- [#308](https://github.com/1024pix/pix-ui/pull/308) [BUGFIX] Support de l'état `disabled` et correction de la taille de l'élement Pix Select
+
+### :coffee: Autre
+- [#310](https://github.com/1024pix/pix-ui/pull/310) [DOCS] Ajout infos v20.2.4 au changelog
+
 ## v23.1.1 (15/12/2022)
 
 
@@ -90,6 +99,12 @@ Ember v4 obligatoire.
 - [#278](https://github.com/1024pix/pix-ui/pull/278) [BREAKING CHANGES][TECH] Améliorer le composant PixMultiSelect (Pix-6025)
 - [#266](https://github.com/1024pix/pix-ui/pull/266) [BREAKING CHANGES][FEATURE] Créer un nouveau PixSelect accessible basé sur PixDropdown/PixSelect (Pix-6018)
 
+## v20.2.4 (16/12/2022)
+
+
+### :coffee: Autre
+- [f9a35c](https://github.com/1024pix/pix-ui/commit/f9a35c4787dc2ae6c7fa62e2cb538bfec84982a9) Relaxer nos version Node.js et npm
+
 ## v20.2.3 (15/11/2022)
 
 

package/addon/components/pix-select.hbs

@@ -31,6 +31,7 @@
     {{on "click" this.toggleDropdown}}
     aria-expanded={{this.isAriaExpanded}}
     aria-controls={{this.listId}}
+    aria-disabled={{@isDisabled}}
   >
     {{this.placeholder}}
 
@@ -59,22 +60,20 @@
       </div>
     {{/if}}
     <div role="listbox" id={{this.listId}} class="pix-select__options">
-      {{#if this.displayDefaultOption}}
-        <li
-          class="pix-select-options-category__option{{unless
-              @value
-              ' pix-select-options-category__option--selected'
-            }}"
-          role="option"
-          tabindex={{if this.isExpanded "0" "-1"}}
-          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}}
+      <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.isExpanded "0" "-1"}}
+        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|}}

package/addon/components/pix-select.js

@@ -41,6 +41,9 @@ 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(' ');
   }
 
@@ -103,6 +106,7 @@ export default class PixSelect extends Component {
   @action
   showDropdown(event) {
     event.preventDefault();
+    if (this.args.isDisabled) return;
 
     this.isExpanded = true;
   }
@@ -118,6 +122,8 @@ export default class PixSelect extends Component {
 
   @action
   onChange(option, event) {
+    if (this.args.isDisabled) return;
+
     this.args.onChange(option.value);
 
     this.hideDropdown(event);
@@ -156,6 +162,21 @@ export default class PixSelect extends Component {
     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`;
+
+    const className = `sizing-select-${this.selectId}`;
+    this.createClass(`.${className}`, `width: ${selectWidth}rem;`);
+
+    const element = document.getElementById(`container-${this.selectId}`);
+
+    element.className = element.className + ' ' + className;
+  }
+
+  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/styles/_form.scss

@@ -5,6 +5,17 @@
   }
 }
 
+@mixin hoverFormElementDisabled() {
+  &:hover {
+    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-70;
+    background-color: $pix-neutral-20;
+  }
+}
+
+@mixin formElementDisabled() {  
+  background-color: $pix-neutral-20;
+}
+
 @mixin focusFormElement() {
   &:focus {
     border-color: $pix-primary;

package/addon/styles/_pix-select.scss

@@ -99,6 +99,11 @@
   @include hoverFormElement();
   @include focusWithinFormElement();
 
+  &--disabled {
+    @include formElementDisabled();
+    @include hoverFormElementDisabled();
+  }
+
   &--error {
     @include formElementInError();
   }
@@ -156,6 +161,11 @@
         opacity: 1;
       }
     }
+
+    &--hidden {
+      visibility: hidden;
+      height: 0;
+    }
   }
 }
 

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

@@ -34,6 +34,7 @@ export const Template = (args) => {
           @emptySearchMessage={{this.emptySearchMessage}}
           @requiredText={{this.requiredText}}
           @errorMessage={{this.errorMessage}}
+          @isDisabled={{this.isDisabled}}
         />
     `,
     context: args,
@@ -303,4 +304,12 @@ export const argTypes = {
       type: { summary: 'string' },
     },
   },
+  isDisabled: {
+    name: 'isDisabled',
+    description: "Permet de désactiver l'affichage des options possible",
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: false },
+    },
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "23.1.1",
+  "version": "23.1.2",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"