@1024pix/pix-ui 13.2.0 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v13.3.0 (21/02/2022)
+
+
+### :rocket: Enhancement
+- [#199](https://github.com/1024pix/pix-ui/pull/199) [FEATURE] Permettre de rendre obligatoire le PixDropdown
+
 ## v13.2.0 (17/02/2022)
 
 

package/addon/components/pix-dropdown.hbs

@@ -1,7 +1,14 @@
 <div class="pix-dropdown">
+
   {{#if this.label}}
-    <label id={{@id}} class="pix-dropdown__label">{{this.label}}</label>
+    <label id={{@id}} class="pix-dropdown__label">
+      {{#if @requiredLabel}}
+        <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
+      {{/if}}
+      {{this.label}}
+    </label>
   {{/if}}
+
   <div class="pix-dropdown__controller">
     <button
       type="button"
@@ -9,15 +16,16 @@
       aria-label={{if this.isExpanded @collapseLabel @expandLabel}}
       {{on "click" this.toggleDropdown}}
       {{on "keyup" this.navigateThroughOptions}}
+      ...attributes
     >
       <p
         title={{this.placeholder}}
-        class="pix-dropdown__controller--placeholder-text{{unless
-            this.hasSelectedOption
-            ' default'
-          }}"
+        class="pix-dropdown__controller--placeholder-text
+          {{unless this.hasSelectedOption ' default'}}"
+        aria-required={{if this.requiredLabel true false}}
       >{{this.placeholder}}</p>
     </button>
+
     {{#if this.hasSelectedOption}}
       <button
         type="button"
@@ -28,11 +36,17 @@
         <FaIcon @icon="times" />
       </button>
     {{/if}}
-    <FaIcon
+
+    <button
+      tabindex="-1"
+      type="button"
       class="pix-dropdown__controller--chevron"
-      @icon={{if this.isExpanded "chevron-up" "chevron-down"}}
-    />
+      {{on "click" this.toggleDropdown}}
+    >
+      <FaIcon @icon={{if this.isExpanded "chevron-up" "chevron-down"}} />
+    </button>
   </div>
+
   <div
     role="listbox"
     id={{this.menuId}}
@@ -45,6 +59,7 @@
     {{on "keyup" this.navigateThroughOptions}}
     {{on "scroll" this.incrementPage}}
   >
+
     {{#if @isSearchable}}
       <div class="pix-dropdown__menu--search">
         <FaIcon class="pix-dropdown__menu--search-icon" @icon="search" />
@@ -62,6 +77,7 @@
         />
       </div>
     {{/if}}
+
     {{#each this.options as |opt index|}}
       {{#if (lt index this.showLimit)}}
         <div
@@ -82,4 +98,5 @@
       {{/if}}
     {{/each}}
   </div>
+
 </div>

package/addon/styles/_form.scss

@@ -66,3 +66,10 @@
     margin-right: 10px;
   }
 }
+
+abbr.mandatory-mark {
+  cursor: help;
+  color: $pink-alert-dark;
+  text-decoration: none;
+  border: none;
+}

package/addon/styles/_pix-dropdown.scss

@@ -4,7 +4,6 @@
   position: relative;
 
   button {
-    background: transparent;
     margin: 0;
     text-align: left;
     cursor: pointer;
@@ -27,7 +26,7 @@
       border: 1px solid $grey-40;
       border-radius: $spacing-xxs;
       padding: 0;
-      background: white;
+      background: $white;
 
       &.expanded {
         border-bottom-left-radius: 0;
@@ -50,6 +49,7 @@
     }
 
     &--clear {
+      background: transparent;
       font-size: 1rem;
       color: $grey-50;
       position: absolute;
@@ -66,11 +66,18 @@
     }
 
     &--chevron {
+      background: transparent;
+      border: none;
+      padding: 0;
       position: absolute;
-      z-index: -1;
-      top: 9px;
+      top: 9.5px;
       right: 12px;
       color: $grey-50;
+      font-size: 1rem;
+
+      &:hover {
+        color: $grey-70;
+      }
     }
   }
 

package/addon/styles/_reset-css.scss

@@ -28,9 +28,3 @@ caption, th, td
 	vertical-align: top;
 	font-weight: normal;
 }
-
-abbr, acronym
-{
-	border-bottom: .1em dotted;
-	cursor: help;
-}

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

@@ -18,6 +18,7 @@ export const Template = (args) => {
           @expandLabel={{expandLabel}}
           @collapseLabel={{collapseLabel}}
           @pageSize={{pageSize}}
+          @requiredLabel={{requiredLabel}}
         />
       </div>
     `,
@@ -54,6 +55,7 @@ withLabel.args = {
   ...Default.args,
   id: 'dropdown-with-label',
   label: 'Ton fruit préféré: ',
+  requiredLabel: 'Champ requis',
 };
 
 export const searchableDropdown = Template.bind({});
@@ -137,6 +139,15 @@ export const argTypes = {
       type: { summary: 'string' },
     },
   },
+  requiredLabel: {
+    name: 'requiredLabel',
+    description:
+      'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
+    type: { name: 'string', required: false },
+    table: {
+      type: { summary: 'string' },
+    },
+  },
   id: {
     name: 'id',
     description: "L'id du label",

package/app/stories/pix-dropdown.stories.mdx

@@ -57,6 +57,7 @@ Les options sont représentées par un tableau d'objet contenant les propriété
   @placeholder="Choisissez une option"
   @searchPlaceholder="Rechercher"
   @label="Mon menu déroulant"
+  @requiredLabel="Requis"
   @clearLabel="Supprimer la sélection"
   @expandLabel="Ouvrir le menu déroulant"
   @collapseLabel="Réduire le menu déroulant"

package/package.json

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