@1024pix/pix-ui 30.0.0 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Pix-UI Changelog
 
+## v31.0.0 (14/04/2023)
+
+
+### :building_construction: Tech
+- [#381](https://github.com/1024pix/pix-ui/pull/381) [TECH] Modification de la valeur du Design Token warning-60 et suppression des placeholders de font-weight (PIX-7666).
+
+## v30.1.0 (14/04/2023)
+
+
+### :bug: Correction
+- [#377](https://github.com/1024pix/pix-ui/pull/377) [BUGFIX] Faire en sorte que la dropdown du select puisse s'ouvrir ailleurs qu'en bas si besoin (PIX-7237)
+
 ## v30.0.0 (05/04/2023)
 
 

package/addon/components/pix-select.hbs

@@ -23,122 +23,125 @@
       {{/if}}
     </div>
   {{/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}}
+    >
+      <span class="pix-select-button__text">{{this.placeholder}}</span>
 
-  <button
-    type="button"
-    id={{this.selectId}}
-    class={{this.className}}
-    {{on "click" this.toggleDropdown}}
-    aria-expanded={{this.isAriaExpanded}}
-    aria-controls={{this.listId}}
-    aria-disabled={{@isDisabled}}
-  >
-    <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}}
+                  {{! template-lint-disable no-invalid-role }}
+                  {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
+                  <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
-    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}}
-                {{! template-lint-disable no-invalid-role }}
-                {{!https://www.w3.org/WAI/ARIA/apg/example-index/listbox/listbox-grouped.html}}
-                <li
-                  class="pix-select-options-category__name"
-                  role="presentation"
-                  id={{concat "cat-" this.selectId "-" index}}
-                >
-                  {{element.category}}
-                </li>
-              {{/if}}
+                {{#each element.options 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 option)}}
+                  >
+                    {{option.label}}
 
-              {{#each element.options 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 option)}}
-                >
-                  {{option.label}}
+                    <FaIcon @icon="check" />
+                  </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}}
 
-                  <FaIcon @icon="check" />
-                </li>
-              {{/each}}
-            </ul>
-          {{/each}}
+                <FaIcon @icon="check" />
+              </li>
+            {{/each}}
+          {{/if}}
         {{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}}
-
-              <FaIcon @icon="check" />
-            </li>
-          {{/each}}
+          <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
         {{/if}}
-      {{else}}
-        <li class="pix-select__empty-search-message">{{@emptySearchMessage}}</li>
-      {{/if}}
-    </ul>
-  </div>
+      </ul>
+    </div>
+  </PopperJS>
   {{#if @errorMessage}}
     <p class="pix-select__error-message">{{@errorMessage}}</p>
   {{/if}}

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

@@ -74,7 +74,7 @@ $pix-warning-20: #FFE381;
 $pix-warning-30: #FFD235;
 $pix-warning-40: #FFBE00;
 $pix-warning-50: #EAA600;
-$pix-warning-60: #CE8900;
+$pix-warning-60: #D87016;
 $pix-warning-70: #A95800;
 $pix-warning-80: #874D00;
 

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

@@ -114,12 +114,10 @@
   letter-spacing: 0.02em;
 }
 
-%pix-body-weight-medium,
 .pix-body-weight-medium {
   font-weight: 500;
 }
 
-%pix-body-weight-bold,
 .pix-body-weight-bold {
   font-weight: 700;
 }

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

@@ -4,15 +4,6 @@ import { action } from '@storybook/addon-actions';
 export const Template = (args) => {
   return {
     template: hbs`
-      <style>
-        .custom {
-          border: 0;
-          width: 150px;
-        }
-        .custom:hover {
-          border: 0;
-        }
-      </style>
         {{#if this.id}}
           <div>
             <label for={{this.id}}>Un label en dehors du composant</label>
@@ -36,12 +27,50 @@ export const Template = (args) => {
           @requiredText={{this.requiredText}}
           @errorMessage={{this.errorMessage}}
           @isDisabled={{this.isDisabled}}
+          @placement={{this.placement}}
         />
     `,
     context: args,
   };
 };
 
+export const TemplatePopover = (args) => {
+  return {
+    template: hbs`
+      <div style="display:flex;height:330px">
+        <div style="align-self:flex-end">
+        {{#if this.id}}
+          <div>
+            <label for={{this.id}}>Un label en dehors du composant</label>
+          </div>
+        {{/if}}
+        <PixSelect
+          @id={{this.id}}
+          @className={{this.className}}
+          @options={{this.options}}
+          @isSearchable={{this.isSearchable}}
+          @onChange={{this.onChange}}
+          @label={{this.label}}
+          @placeholder={{this.placeholder}}
+          @hideDefaultOption={{this.hideDefaultOption}}
+          @subLabel={{this.subLabel}}
+          @searchLabel={{this.searchLabel}}
+          @value={{this.value}}
+          @searchPlaceholder={{this.searchPlaceholder}}
+          @screenReaderOnly={{this.screenReaderOnly}}
+          @emptySearchMessage={{this.emptySearchMessage}}
+          @requiredText={{this.requiredText}}
+          @errorMessage={{this.errorMessage}}
+          @isDisabled={{this.isDisabled}}
+          @placement={{this.placement}}
+        />
+        </div>
+      </div>
+    `,
+    context: args,
+  };
+};
+
 export const WithId = Template.bind({});
 WithId.args = {
   id: 'custom',
@@ -168,6 +197,27 @@ WithCategoriesAndSearch.args = {
   onChange: action('onChange'),
 };
 
+export const WithDropDownAtTheTop = TemplatePopover.bind({});
+WithDropDownAtTheTop.args = {
+  options: [
+    { value: '1', label: 'Figues' },
+    { value: '3', label: 'Fraises' },
+    { value: '2', label: 'Bananes' },
+    { value: '4', label: 'Mangues' },
+    { value: '5', label: 'Kaki' },
+    {
+      value: '6',
+      label: 'Asiminier trilobé oblong vert (à ne pas confondre avec la papaye)',
+    },
+  ],
+  label: 'JambonFromage',
+  placeholder: 'Mon innerText',
+  subLabel: 'Mon sous label',
+  isSearchable: false,
+  onChange: action('onChange'),
+  placement: 'top',
+};
+
 export const argTypes = {
   options: {
     name: 'options',
@@ -313,4 +363,15 @@ export const argTypes = {
       type: { summary: false },
     },
   },
+  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.mdx

@@ -53,6 +53,14 @@ Les options sont représentées par un tableau d'objet contenant les propriété
   <Story name="WithCategoriesAndSearch" story={stories.WithCategoriesAndSearch} height={200} />
 </Canvas>
 
+## WithDropDownAtTheTop
+
+Ici nous avons forcé le placement de la dropdown en haut du select mais sachez que ce placement se fait automatiquement par défaut.
+
+<Canvas>
+  <Story name="WithDropDownAtTheTop" story={stories.WithDropDownAtTheTop} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -71,6 +79,7 @@ Les options sont représentées par un tableau d'objet contenant les propriété
   @screenReaderOnly="{{screenReaderOnly}}"
   @requiredText="{{requiredText}}"
   @errorMessage="{{errorMessage}}"
+  @placement="{{placement}}"
 />
 ```
 

package/docs/colors-palette.stories.mdx

@@ -38,7 +38,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
              Secondary: '#ffd235',
              40: '#ffbe00',
              50: '#eaa600',
-             60: '#ce8900',
+             60: '#d87016',
              70: '#a95800',
              80: '#874d00'}}
   />
@@ -103,7 +103,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
             30: '#ffd235',
             40: '#ffbe00',
             50: '#eaa600',
-            60: '#ce8900',
+            60: '#d87016',
             70: '#a95800',
             80: '#874d00'}}
   />

package/docs/typography.stories.mdx

@@ -1,6 +1,6 @@
 <!-- Typography.stories.mdx -->
 
-import { Meta, Typeset } from '@storybook/addon-docs';
+import { Meta, Typeset, Markdown } from '@storybook/addon-docs';
 
 <Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
 
@@ -82,24 +82,6 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
   fontFamily={'Roboto, Arial, sans-serif'}
 />
 
-#### Variantes de gras
-
-Pour les corps, on peut préciser une graisse différente en complément :
-
-<Typeset
-  fontSizes={[16]}
-  fontWeight={500}
-  sampleText={'@extend %pix-weight-medium;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[16]}
-  fontWeight={700}
-  sampleText={'@extend %pix-weight-bold;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
 ### Comment utiliser un placeholder SCSS ?
 
 ```css
@@ -140,6 +122,29 @@ Pour chaque placeholder SCSS, une **classe CSS** utilitaire de même nom existe
 - `pix-body-s`
 - `pix-body-xs`
 
+## Design tokens
+
+Des variables SCSS existent pour certaines propriétés de typographie.
+
+### Font-weight
+
+ℹ️ Ces variables ne devraient pas être utilisées pour modifier la graisse d'un titre car les classes utilitaires et les placeholders ci-dessus s'en occupent déjà.
+
+`$font-normal: 400;`
+
+`$font-medium: 500;`
+
+`$font-bold: 700;`
+
+### Font-family
+
+ℹ️ Vous ne devriez pas avoir à les utiliser car elles vont de pair avec d'autres propriétés de typo (font-size, line-height, ...).<br/>
+Pour en savoir plus, voir les classes utilitaires et les placeholders ci-dessus.
+
+`$font-open-sans: 'Open Sans', Arial, sans-serif;`
+
+`$font-roboto: 'Roboto', Arial, sans-serif;`
+
 ## Détails techniques
 
 On utilise sur les applications Pix deux polices d'écriture :

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -54,6 +54,7 @@
     "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",
     "lodash.debounce": "^4.0.8"
   },