@1024pix/pix-ui 13.5.0 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Pix-UI Changelog
 
+## v14.1.0 (12/04/2022)
+
+
+### :rocket: Amélioration
+- [#213](https://github.com/1024pix/pix-ui/pull/213) [FEATURE] Retirer l'option d'ajouter une icône dans le composant Pix Input (PIX-4766).
+
+## v14.0.0 (12/04/2022)
+
+
+### :coffee: Autre
+- [#212](https://github.com/1024pix/pix-ui/pull/212) [BREAKING_CHANGES][BUGFIX] Ajouter un aria-label au Pix Input (PIX-4759).
+
+## v13.5.1 (12/04/2022)
+
+
+### :bug: Correction
+- [#211](https://github.com/1024pix/pix-ui/pull/211) [BUGFIX] Ne permettre qu'un label dans les composants Pix Input et Input Password (PIX-4125).
+
 ## v13.5.0 (11/04/2022)
 
 

package/addon/components/pix-input-password.hbs

@@ -4,12 +4,14 @@
       {{#if @requiredLabel}}
         <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
       {{/if}}
+
       {{this.label}}
+
+      {{#if @information}}
+        <span class="pix-input__information">{{@information}}</span>
+      {{/if}}
     </label>
   {{/if}}
-  {{#if @information}}
-    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
-  {{/if}}
   <div
     class="pix-input-password__container
       {{if @errorMessage 'pix-input-password__error-container'}}
@@ -27,6 +29,7 @@
       aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
+      aria-describedby={{if @errorMessage "text-input-password-error"}}
       ...attributes
     />
 
@@ -44,6 +47,6 @@
   </div>
 
   {{#if @errorMessage}}
-    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+    <p id="text-input-password-error" class="pix-input__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>

package/addon/components/pix-input.hbs

@@ -4,33 +4,33 @@
       {{#if @requiredLabel}}
         <abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
       {{/if}}
+
       {{@label}}
+
+      {{#if @information}}
+        <span class="pix-input__information">{{@information}}</span>
+      {{/if}}
     </label>
   {{/if}}
-  {{#if @information}}
-    <label for={{this.id}} class="pix-input__information">{{@information}}</label>
-  {{/if}}
 
   <div class="pix-input__container">
     <input
       id={{this.id}}
-      class={{this.className}}
+      class={{if @errorMessage "pix-input__input--error"}}
       value={{@value}}
+      aria-label={{this.ariaLabel}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
+      aria-describedby={{if @errorMessage "text-input-error"}}
       ...attributes
     />
 
     {{#if @errorMessage}}
       <FaIcon @icon="times" class="pix-input__error-icon" />
     {{/if}}
-
-    {{#if @icon}}
-      <FaIcon @icon={{@icon}} class="pix-input__icon {{if @isIconLeft 'pix-input__icon--left'}}" />
-    {{/if}}
   </div>
 
   {{#if @errorMessage}}
-    <label for={{this.id}} class="pix-input__error-message">{{@errorMessage}}</label>
+    <p id="text-input-error" class="pix-input__error-message">{{@errorMessage}}</p>
   {{/if}}
 </div>

package/addon/components/pix-input.js

@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 
+const ERROR_MESSAGE = 'ERROR in PixInput component, you must provide @label or @ariaLabel params';
+
 export default class PixInput extends Component {
   get id() {
     if (!this.args.id || !this.args.id.toString().trim()) {
@@ -8,11 +10,17 @@ export default class PixInput extends Component {
     return this.args.id;
   }
 
-  get className() {
-    const classNames = [];
-    this.args.errorMessage && classNames.push('pix-input__input--error');
-    this.args.icon && classNames.push('pix-input__input--icon');
-    this.args.isIconLeft && classNames.push('pix-input__input--icon-left');
-    return classNames.join(' ');
+  get label() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label;
+  }
+
+  get ariaLabel() {
+    if (!this.args.label && !this.args.ariaLabel) {
+      throw new Error(ERROR_MESSAGE);
+    }
+    return this.args.label ? null : this.args.ariaLabel;
   }
 }

package/addon/styles/_pix-input.scss

@@ -6,39 +6,25 @@
   position: relative;
 
   &__label {
-    @include label();
+    font-family: $font-roboto;
+    font-size: 0.875rem;
+    color: $grey-70;
+    margin-bottom: 4px;
   }
 
   &__information {
     font-family: $font-roboto;
     font-size: 0.75rem;
+    margin-top: 4px;
     color: $blue-zodiac;
-    margin-bottom: 4px;
+
+    display: block;
   }
 
   &__container {
     position: relative;
   }
 
-  svg.pix-input__icon {
-    position: absolute;
-    bottom: 9px;
-    right: 6px;
-    color: $grey-25;
-    font-size: 1.125rem;
-    width: 18px;
-    height: 18px;
-
-    &--left {
-      left: 6px;
-    }
-  }
-
-  svg ~ svg.pix-input__icon {
-    right: calc(6px + 12px + 2px);
-    margin-right: 8px;
-  }
-
   svg.pix-input__error-icon {
     position: absolute;
     bottom: 10px;
@@ -54,8 +40,12 @@
 
   &__error-message {
     @include errorMessage();
-    margin-top: 4px;
+    margin-bottom: 0;
     bottom: calc(-4px - 1px - 0.75rem);
+
+    &.pix-input__error-message {
+      margin-top:4px;
+    }
   }
 
   input {
@@ -75,17 +65,5 @@
       padding-right: 32px;
       @include formElementInError();
     }
-
-    &.pix-input__input--icon {
-      padding-right: 32px;
-    }
-
-    &.pix-input__input--icon.pix-input__input--icon-left {
-      padding-left: 32px;
-    }
-
-    &.pix-input__input--error.pix-input__input--icon:not(.pix-input__input--icon-left) {
-      padding-right: 32px;
-    }
   }
 }

package/app/stories/form.stories.js

@@ -13,7 +13,7 @@ export const form = (args) => {
       <PixMultiSelect
         @title="Votre notation en étoiles..."
         @id="form__pix-mutli-select"
-        @label="A quel point aimez vous Pix-UI ?"
+        @label="A quel point aimez vous Pix UI ?"
         @onSelect={{onSelect}}
         @selected={{selected}}
         @options={{options}} as |star|

package/app/stories/form.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import centered from '@storybook/addon-centered/ember';
 import * as stories from './form.stories.js';
 
@@ -12,5 +12,5 @@ import * as stories from './form.stories.js';
 Un formulaire complet avec les composants Pix UI :
 
 <Canvas>
-  <Story name="Form" story={stories.form} height={600} />
+  <Story name="Form" story={stories.form} height={700} />
 </Canvas>

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

@@ -72,7 +72,7 @@ export const argTypes = {
   },
   ariaLabel: {
     name: 'ariaLabel',
-    description: "L'action du bouton, pour l'accessibilité. Requis si label n'est pas définit.",
+    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
     type: { name: 'string', required: true },
     defaultValue: null,
   },

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

@@ -8,10 +8,9 @@ export const Template = (args) => {
         @label={{label}}
         @information={{information}}
         @errorMessage={{errorMessage}}
-        @icon={{icon}}
-        @isIconLeft={{isIconLeft}}
         placeholder='Jeanne, Pierre ...'
         @requiredLabel={{requiredLabel}}
+        @ariaLabel={{ariaLabel}}
       />
     `,
     context: args,
@@ -21,6 +20,7 @@ export const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   id: 'firstName',
+  ariaLabel: 'Prénom',
 };
 
 export const withLabel = Template.bind({});
@@ -38,13 +38,6 @@ withErrorMessage.args = {
   errorMessage: "un message d'erreur",
 };
 
-export const withIcon = Template.bind({});
-withIcon.args = {
-  id: 'firstName',
-  label: 'Prénom',
-  icon: 'eye',
-};
-
 export const withRequiredLabel = Template.bind({});
 withRequiredLabel.args = {
   id: 'firstName',
@@ -53,6 +46,12 @@ withRequiredLabel.args = {
 };
 
 export const argTypes = {
+  ariaLabel: {
+    name: 'ariaLabel',
+    description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
+    type: { name: 'string', required: true },
+    defaultValue: null,
+  },
   id: {
     name: 'id',
     description: 'Identifiant du champ permettant de lui attacher un label',
@@ -83,23 +82,6 @@ export const argTypes = {
     type: { name: 'string', required: false },
     defaultValue: null,
   },
-  icon: {
-    name: 'icon',
-    description: "Affiche l'icône choisie à la fin de l'input",
-    type: { name: 'string', required: false },
-    defaultValue: null,
-  },
-  isIconLeft: {
-    name: 'isIconLeft',
-    description: "Permet d'afficher l'icône choisie sur la gauche",
-    type: { name: 'boolean', required: false },
-    control: { type: 'boolean' },
-    defaultValue: false,
-    table: {
-      type: { summary: 'boolean' },
-      defaultValue: { summary: 'false' },
-    },
-  },
   requiredLabel: {
     name: 'requiredLabel',
     description:

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

@@ -14,6 +14,12 @@ import * as stories from './pix-input.stories.js';
 
 Le PixInput permet de créer un champ de texte.
 
+## Accessibilité
+
+Si vous utilisez le `PixInput` sans label alors il faut renseigner le paramètre `ariaLabel`, sinon le composant renvoie une erreur.
+
+> Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
+
 
 ## Default
 
@@ -33,12 +39,6 @@ Le PixInput permet de créer un champ de texte.
   <Story story={stories.withErrorMessage} height={130} />
 </Canvas>
 
-## With icon
-
-<Canvas>
-  <Story story={stories.withIcon} height={130} />
-</Canvas>
-
 ## With required label
 
 <Canvas>
@@ -53,8 +53,6 @@ Le PixInput permet de créer un champ de texte.
   @label='Prénom'
   @information='Complément du label'
   @errorMessage='Un message d`erreur'
-  @icon='eye'
-  @isIconLeft={{false}}
   @requiredLabel='Champ obligatoire'
 />
 ```

package/package.json

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