@1024pix/pix-ui 45.1.5 → 45.2.1

package/addon/components/pix-input.hbs

@@ -1,14 +1,16 @@
 <div class="pix-input {{if @inlineLabel ' pix-input--inline'}}">
-  <PixLabel
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
+  {{#if (has-block "label")}}
+    <PixLabel
+      @for={{this.id}}
+      @requiredLabel={{@requiredLabel}}
+      @subLabel={{@subLabel}}
+      @size={{@size}}
+      @screenReaderOnly={{@screenReaderOnly}}
+      @inlineLabel={{@inlineLabel}}
+    >
+      {{yield to="label"}}
+    </PixLabel>
+  {{/if}}
   <div>
     <div class="pix-input__container">
       <input

package/addon/components/pix-textarea.hbs

@@ -1,14 +1,16 @@
 <div class="pix-textarea {{if @inlineLabel ' pix-textarea--inline'}}">
-  <PixLabel
-    @for={{this.id}}
-    @requiredLabel={{@requiredLabel}}
-    @subLabel={{@subLabel}}
-    @size={{@size}}
-    @screenReaderOnly={{@screenReaderOnly}}
-    @inlineLabel={{@inlineLabel}}
-  >
-    {{yield to="label"}}
-  </PixLabel>
+  {{#if (has-block "label")}}
+    <PixLabel
+      @for={{this.id}}
+      @requiredLabel={{@requiredLabel}}
+      @subLabel={{@subLabel}}
+      @size={{@size}}
+      @screenReaderOnly={{@screenReaderOnly}}
+      @inlineLabel={{@inlineLabel}}
+    >
+      {{yield to="label"}}
+    </PixLabel>
+  {{/if}}
 
   <div>
     <textarea

package/app/stories/pix-input.mdx

@@ -9,8 +9,17 @@ Le PixInput permet de créer un champ de texte.
 
 ## Accessibilité
 
-Si vous utilisez le `PixInput` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
-Il est possible d'ajouter un label en dehors du composant en précisant bien un attribut `for` correspondant à l'`@id` passé au PixInput.
+La propriété label est optionnelle pour le composant.
+
+Mais au niveau de l'accessibilité, il est quand même nécessaire que le champ soit rattaché à un label.
+
+Il y a alors plusieurs possibilités :
+
+- Vous pouvez cacher le label visuellement mais le rendre disponible pour les lecteurs d'écran via la propriété `screenReaderOnly` à `true`.
+- Les attributs `aria-label` et `aria-labelledby` sont utilisables.
+- Un attribut `@for` pointant vers l'id de l'input peut être ajouté à un composant `<PixLabel />` extérieur.
+
+## Tests
 
 Pour acceder à l'élément via son label avec testing-library:
 
@@ -72,6 +81,10 @@ En readonly, l'input n'est pas modifiable, mais il est toujours focusable et est
 
 <Story of={ComponentStories.withRequiredLabel} height={100} />
 
+## Without label
+
+<Story of={ComponentStories.withoutLabel} height={100} />
+
 ## Usage
 
 ```html

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

@@ -31,7 +31,7 @@ export default {
     label: {
       name: 'label',
       description: 'Le label du champ',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
       table: {
         type: { summary: 'string' },
       },
@@ -102,6 +102,24 @@ const Template = (args) => {
   };
 };
 
+const TemplateWithoutLabel = (args) => {
+  return {
+    template: hbs`<PixInput
+  @id={{this.id}}
+  @errorMessage={{this.errorMessage}}
+  placeholder='Jeanne, Pierre ...'
+  @validationStatus={{this.validationStatus}}
+  @size={{this.size}}
+  disabled={{this.disabled}}
+  readonly={{this.readonly}}
+  @subLabel={{this.subLabel}}
+  @inlineLabel={{this.inlineLabel}}
+  @requiredLabel={{this.requiredLabel}}
+/>`,
+    context: args,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   id: 'first-name',
@@ -150,3 +168,8 @@ withRequiredLabel.args = {
   label: 'Prénom',
   requiredLabel: 'Champ obligatoire',
 };
+
+export const withoutLabel = TemplateWithoutLabel.bind({});
+withoutLabel.args = {
+  id: 'first-name',
+};

package/app/stories/pix-textarea.mdx

@@ -9,12 +9,21 @@ Un textarea permettant d'avoir un champ de saisie libre.
 
 Optionellement, il peut afficher le nombre de caractères tapés ainsi que le nombre de caractères maximum.
 
+<Story of={ComponentStories.textarea} height={150} />
+
 ## Accessibilité
 
-Si vous utilisez le `PixTextarea` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
+La propriété label est optionnelle pour le composant.
+
+Mais au niveau de l'accessibilité, il est quand même nécessaire que le champ soit rattaché à un label.
+
+Il y a alors plusieurs possibilités :
 
-<Story of={ComponentStories.textarea} height={100} />
+- Vous pouvez cacher le label visuellement mais le rendre disponible pour les lecteurs d'écran via la propriété `screenReaderOnly` à `true`.
+- Les attributs `aria-label` et `aria-labelledby` sont utilisables.
+- Un attribut `@for` pointant vers l'id du textarea peut être ajouté à un composant `<PixLabel />` extérieur.
 
+<Story of={ComponentStories.textareaWithoutLabel} height={100} />
 
 ## Usage
 

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

@@ -11,7 +11,7 @@ export default {
     value: {
       name: 'value',
       description: 'Valeur du champ',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
     maxlength: {
       name: 'maxlength',
@@ -23,11 +23,10 @@ export default {
       description: 'Affiche une erreur en dessous du champ.',
       type: { name: 'string', required: false },
     },
-
     label: {
       name: 'label',
       description: 'Donne un label au champ.',
-      type: { name: 'string', required: true },
+      type: { name: 'string', required: false },
     },
     subLabel: {
       name: 'subLabel',
@@ -90,8 +89,32 @@ const Template = (args) => {
   };
 };
 
+const TemplateWithoutlabel = (args) => {
+  return {
+    template: hbs`<PixTextarea
+  @id={{this.id}}
+  @value={{this.value}}
+  @maxlength={{this.maxlength}}
+  @errorMessage={{this.errorMessage}}
+  @size={{this.size}}
+  @subLabel={{this.subLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @inlineLabel={{this.inlineLabel}}
+/>`,
+    context: args,
+  };
+};
+
 export const textarea = Template.bind({});
 textarea.args = {
   id: 'textarea',
+  label: 'Label du textarea',
+  subLabel: 'Sous-label',
   value: 'Contenu du textarea',
 };
+
+export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
+textareaWithoutLabel.args = {
+  id: 'textarea-without-label',
+  value: 'Contenu du textarea sans label affiché',
+};

package/package.json

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