@1024pix/pix-ui 26.0.2 → 26.0.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Pix-UI Changelog
 
+## v26.0.4 (20/02/2023)
+
+
+### :building_construction: Tech
+- [#335](https://github.com/1024pix/pix-ui/pull/335) [TECH] Améliorations techniques diverses
+
+### :bug: Correction
+- [#340](https://github.com/1024pix/pix-ui/pull/340) [BUGFIX] Ne pas permettre le focus de l'option par défaut cachée du PixSelect (PIX-7196)
+
+## v26.0.3 (16/02/2023)
+
+
+### :bug: Correction
+- [#337](https://github.com/1024pix/pix-ui/pull/337) [BUGFIX] utiliser la font-size du navigateur pour le calcul de la taille du PixSelect (PIX-7128)
+
 ## v26.0.2 (14/02/2023)
 
 

package/addon/components/pix-select.hbs

@@ -66,7 +66,7 @@
             ' pix-select-options-category__option--selected'
           }}{{unless this.displayDefaultOption ' pix-select-options-category__option--hidden'}}"
         role="option"
-        tabindex={{if this.isExpanded "0" "-1"}}
+        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)}}

package/addon/components/pix-select.js

@@ -33,6 +33,10 @@ export default class PixSelect extends Component {
     return !this.searchValue && !this.args.hideDefaultOption;
   }
 
+  get isDefaultOptionHidden() {
+    return !this.isExpanded || this.args.hideDefaultOption;
+  }
+
   get className() {
     const classes = ['pix-select-button'];
     if (this.args.className) {
@@ -158,8 +162,10 @@ export default class PixSelect extends Component {
 
   @action
   setSelectWidth() {
-    const baseFontRemRatio = 16;
-    const checkIconWidth = 16;
+    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;
 

package/addon/styles/_pix-select.scss

@@ -13,11 +13,10 @@
   &__dropdown {
     z-index: 200;
     position: absolute;
-    border-top: none;
-    border-radius: 0 0 4px 4px;
-    overflow-y: auto;
     max-height: 200px;
     width: inherit;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
     list-style-type: none;
     padding: 0;
     background-color: $pix-neutral-0;
@@ -69,6 +68,8 @@
   }
 
   &__options {
+    overflow-y: auto;
+    max-height: inherit;
     border-top: 1px solid $pix-neutral-20;
   }
 

package/app/stories/pix-filterable-and-searchable-select.stories.js

@@ -1,4 +1,5 @@
 import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
 
 const Template = (args) => {
   return {
@@ -35,46 +36,22 @@ Default.args = {
     { value: '4', label: 'Steak', category: 'Hamburger' },
     { value: '5', label: 'Cheddar', category: 'Hamburger' },
   ],
-  onChange: () => {},
+  onChange: action('onChange'),
   categoriesLabel: 'Mon multi select label',
   categoriesPlaceholder: 'Mon multi select placeholder',
 };
 
 export const Searchable = Template.bind({});
 Searchable.args = {
-  label: 'Are you hungry?',
-  subLabel: 'To help you choose your food, you can filter on different categories',
-  placeholder: 'Mon select placeholder',
+  ...Default.args,
   isSearchable: true,
-  options: [
-    { value: '1', label: 'Salade', category: 'Kebab' },
-    { value: '2', label: 'Tomate', category: 'Kebab' },
-    { value: '3', label: 'Oignons', category: 'Kebab' },
-    { value: '4', label: 'Steak', category: 'Hamburger' },
-    { value: '5', label: 'Cheddar', category: 'Hamburger' },
-  ],
-  onChange: () => {},
-  categoriesLabel: 'Mon multi select label',
-  categoriesPlaceholder: 'Mon multi select placeholder',
 };
 
 export const WithLabelsOnlyForScreenReaders = Template.bind({});
 WithLabelsOnlyForScreenReaders.args = {
-  label: 'Are you hungry?',
-  subLabel: 'To help you choose your food, you can filter on different categories',
+  ...Default.args,
   screenReaderOnly: true,
-  placeholder: 'Mon select placeholder',
   isSearchable: true,
-  options: [
-    { value: '1', label: 'Salade', category: 'Kebab' },
-    { value: '2', label: 'Tomate', category: 'Kebab' },
-    { value: '3', label: 'Oignons', category: 'Kebab' },
-    { value: '4', label: 'Steak', category: 'Hamburger' },
-    { value: '5', label: 'Cheddar', category: 'Hamburger' },
-  ],
-  onChange: () => {},
-  categoriesLabel: 'Mon multi select label',
-  categoriesPlaceholder: 'Mon multi select placeholder',
 };
 
 export const argTypes = {

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

@@ -46,8 +46,11 @@ const DEFAULT_OPTIONS = [
 
 export const Default = Template.bind({});
 Default.args = {
+  label: 'Label du champ',
   options: DEFAULT_OPTIONS,
   onChange: action('onChange'),
+  emptyMessage: 'pas de résultat',
+  values: ['1', '3'],
   placeholder: 'placeholder',
 };
 
@@ -76,6 +79,7 @@ export const multiSelectWithChildComponent = (args) => {
 };
 
 multiSelectWithChildComponent.args = {
+  ...Default.args,
   placeholder: 'Sélectionner le niveau souhaité',
   label: 'Résultat évaluation',
   options: [
@@ -149,59 +153,53 @@ export const argTypes = {
     description:
       'Rempli le contenu interne du composant, `placeholder` pour `isSearchable` `true`, sinon rawContent du `button`',
     type: { name: 'string', required: true },
-    defaultValue: 'Rechercher un condiment',
   },
   label: {
     name: 'label',
     description:
       "Donne un label au champ qui sera celui vocalisé par le lecteur d'écran. **⚠️ Le`label` est obligatoire que si l'`id` n'est pas donné. ⚠️**",
     type: { name: 'string' },
-    defaultValue: 'Label du champ',
   },
   screenReaderOnly: {
     name: 'screenReaderOnly',
     description: "Permet de cacher à l'écran le label tout en restant vocalisable",
     type: { name: 'boolean', required: false },
-    defaultValue: false,
+    table: { defaultValue: { summary: false } },
   },
   emptyMessage: {
     name: 'emptyMessage',
     description:
       'Un intitulé de choix indisponible (dans le cas ou certains filtres seraient excluant)',
     type: { name: 'string', required: true },
-    defaultValue: 'pas de résultat',
   },
   options: {
     name: 'options',
     description:
       'Les options sont représentées par un tableau d‘objet contenant les propriétés ``value`` et ``label``. ``value`` doit être de type ``String`` pour être conforme au traitement des input value.',
     type: { name: 'array', required: false },
-    defaultValue: DEFAULT_OPTIONS,
   },
   onChange: {
     name: 'onChange',
     description: "Une fonction permettant d'effectuer une action à chaque sélection",
     type: { required: true },
-    defaultValue: action('onChange'),
   },
   values: {
     name: 'values',
     description: 'Une pré-sélection peut être donnée au composant',
     type: { name: 'array', required: false },
-    defaultValue: ['1', '4'],
   },
   isSearchable: {
     name: 'isSearchable',
     description: 'Permet de rajouter une saisie utilisateur pour faciliter la recherche',
     type: { name: 'boolean', required: false },
-    defaultValue: true,
+    table: { defaultValue: { summary: false } },
   },
   strictSearch: {
     name: 'strictSearch',
     description:
       'Permet de rendre sensible à la casse et au diacritiques lorsque ``isSearchable`` à ``true``',
     type: { name: 'boolean', required: false },
-    defaultValue: false,
+    table: { defaultValue: { summary: false } },
   },
   className: {
     name: 'className',

package/package.json

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