@1024pix/pix-ui 42.0.4 → 43.0.1

package/addon/styles/_pix-search-input.scss

@@ -2,40 +2,28 @@
   position: relative;
   display: flex;
   flex-direction: column;
-}
-
-.pix-search-input__label {
-  margin-bottom: var(--pix-spacing-1x);
-  color: var(--pix-neutral-900);
-  font-size: 0.875rem;
-}
 
-.pix-search-input__input-container {
-  position: relative;
+  &__input-container {
+    position: relative;
 
-  svg {
-    position: absolute;
-    bottom: calc(50% - 8px);
-    left: 12px;
-    width: 12px;
-    height: 12px;
-    padding: 2px;
-    color: var(--pix-neutral-500);
-    font-size: 0.6rem;
+    svg {
+      position: absolute;
+      bottom: calc(50% - 8px);
+      left: 12px;
+      width: 12px;
+      height: 12px;
+      padding: 2px;
+      color: var(--pix-neutral-500);
+      font-size: 0.6rem;
+    }
   }
-}
-
-.pix-search-input__input {
-  @extend %pix-form-element-state;
-  @extend %pix-input-default;
-
 
-  width: 100%;
-  height: 36px;
-  padding-left: var(--pix-spacing-12x);
-  border: 1px solid var(--pix-neutral-500);
+  &__input {
+    @extend %pix-input-default;
+    @extend %pix-form-element-state;
 
-  &::placeholder {
-    color: var(--pix-neutral-500);
+    width: 100%;
+    padding-left: var(--pix-spacing-10x) !important;
+    border: 1px solid var(--pix-neutral-500);
   }
 }

package/addon/styles/_pix-select.scss

@@ -2,14 +2,6 @@
   position: relative;
   display: inline-block;
 
-  &__label {
-    @extend %pix-label;
-  }
-
-  &__sub-label {
-    @extend %pix-sublabel;
-  }
-
   &__dropdown {
     @extend %pix-shadow-sm;
 
@@ -93,8 +85,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: 2.25rem;
-  padding: 0 var(--pix-spacing-4x) 0 var(--pix-spacing-4x);
+  padding: var(--pix-spacing-2x) var(--pix-spacing-3x);
   color: var(--pix-neutral-900);
   background-color: var(--pix-neutral-0);
   border: 1px var(--pix-neutral-500) solid;

package/addon/styles/_pix-textarea.scss

@@ -25,10 +25,6 @@
     font-size: 12px;
   }
 
-  &__label {
-    @extend %pix-label;
-  }
-
   &__error-message {
     @extend %pix-input-error-message;
   }

package/addon/styles/_pix-toggle.scss

@@ -2,15 +2,8 @@
   display: flex;
   flex-direction: column;
 
-  &__label {
-    color: var(--pix-neutral-900);
-
-    @extend %pix-body-m;
-  }
-
   &__button {
     width: fit-content;
-    margin-top: var(--pix-spacing-1x);
     padding: var(--pix-spacing-1x);
     background-color: transparent;
     border: 1px solid var(--pix-neutral-500);
@@ -32,21 +25,6 @@
     background-color: var(--pix-neutral-800);
   }
 
-  &--inline {
-    flex-direction: row;
-    gap: var(--pix-spacing-1x);
-    align-items: center;
-  }
-
-  &--inline,
-  &--screen-reader-only {
-    .pix-toggle {
-      &__button {
-        margin-top: 0;
-      }
-    }
-  }
-
   &--pressed {
     .pix-toggle {
       &__on {

package/addon/styles/addon.scss

@@ -20,6 +20,7 @@
 @import 'pix-tooltip';
 @import 'pix-button-upload';
 @import 'pix-input';
+@import 'pix-label';
 @import 'pix-input-password';
 @import 'pix-radio-button';
 @import 'pix-modal';

package/addon/styles/component-state/_form.scss

@@ -1,7 +1,7 @@
 %pix-input-default {
   @extend %pix-body-s;
 
-  padding: 0 var(--pix-spacing-3x);
+  padding: var(--pix-spacing-2x) var(--pix-spacing-3x);
   color: var(--pix-neutral-900);
   border-radius: var(--pix-spacing-1x);
 }
@@ -22,6 +22,10 @@
 }
 
 %pix-form-element-state {
+  &::placeholder {
+    color: var(--pix-neutral-500);
+  }
+
   &:hover {
     background-color: var(--pix-neutral-20);
     border-color: var(--pix-neutral-900);
@@ -57,24 +61,6 @@
   }
 }
 
-%pix-label {
-  @extend %pix-body-s;
-
-  display: block;
-  margin-bottom: var(--pix-spacing-1x);
-  color: var(--pix-neutral-900);
-  font-weight: var(--pix-font-medium);
-}
-
-%pix-sublabel {
-  @extend %pix-body-s;
-
-  display: block;
-  margin-bottom: var(--pix-spacing-1x);
-  color: var(--pix-neutral-500);
-}
-
-
 // Only on StoryBook
 .pix-form__label {
   @extend %pix-body-m;

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

@@ -81,16 +81,21 @@
   font-family: 'Roboto', 'Arial', sans-serif;
 }
 
-%pix-body-l,
-.pix-body-l {
+%pix-body-xs,
+.pix-body-xs {
   @extend %-pix-body;
 
-  font-size: 1rem;
+  font-size: 0.75rem;
   line-height: 1.5;
+  letter-spacing: 0.02em;
+}
 
-  @include device-is('tablet') {
-    font-size: 1.125rem;
-  }
+%pix-body-s,
+.pix-body-s {
+  @extend %-pix-body;
+
+  font-size: 0.875rem;
+  line-height: 1.5;
 }
 
 %pix-body-m,
@@ -105,21 +110,16 @@
   }
 }
 
-%pix-body-s,
-.pix-body-s {
+%pix-body-l,
+.pix-body-l {
   @extend %-pix-body;
 
-  font-size: 0.875rem;
+  font-size: 1rem;
   line-height: 1.5;
-}
 
-%pix-body-xs,
-.pix-body-xs {
-  @extend %-pix-body;
-
-  font-size: 0.75rem;
-  line-height: 1.5;
-  letter-spacing: 0.02em;
+  @include device-is('tablet') {
+    font-size: 1.125rem;
+  }
 }
 
 .pix-body-weight-medium {

package/app/components/pix-label.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-label';

package/app/stories/pix-checkbox.mdx

@@ -47,12 +47,6 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
   <Story of={ComponentStories.checkboxWithSmallLabel} height={60} />
 
 
-### Large
-
-
-  <Story of={ComponentStories.checkboxWithLargeLabel} height={60} />
-
-
 ## Usage
 
 ```html

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

@@ -28,6 +28,16 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'default'],
+    },
     isIndeterminate: {
       name: 'isIndeterminate',
       description:
@@ -38,16 +48,6 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
-      description: 'Correspond à la taille de la police du label.',
-      type: { name: 'string', required: false },
-      table: {
-        defaultValue: { summary: 'default' },
-      },
-      control: { type: 'select' },
-      options: ['small', 'default', 'large'],
-    },
     checked: {
       name: 'checked',
       description: 'Permet de cocher la checkbox',
@@ -57,8 +57,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    disabled: {
-      name: 'disabled',
+    isDisabled: {
+      name: 'isDisabled',
       description: 'Permet de désactiver la checkbox',
       type: { name: 'boolean', required: false },
       table: {
@@ -78,7 +78,8 @@ export const Template = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
-  disabled={{this.disabled}}
+  @isDisabled={{this.isDisabled}}
+  disabled={{this.isDisabled}}
 >
   {{this.label}}
 </PixCheckbox>`,
@@ -147,7 +148,8 @@ export const MultipleTemplate = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
-  disabled={{this.disabled}}
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
 >
   {{this.label}}
 </PixCheckbox>
@@ -158,7 +160,8 @@ export const MultipleTemplate = (args) => {
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
   @checked={{this.checked}}
-  disabled={{this.disabled}}
+  disabled={{this.isDisabled}}
+  @isDisabled={{this.isDisabled}}
 >
   {{this.label}}
 </PixCheckbox>`,

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

@@ -20,6 +20,16 @@ export default {
         type: { summary: 'string' },
       },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     options: {
       name: 'options',
       description:
@@ -142,6 +152,7 @@ const Template = (args) => {
     template: hbs`<PixFilterableAndSearchableSelect
   @label={{this.label}}
   @subLabel={{this.subLabel}}
+  @labelSize={{this.labelSize}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @placeholder={{this.placeholder}}
   @hideDefaultOption={{this.hideDefaultOption}}

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

@@ -11,12 +11,10 @@ Champ pour le mot de passe, avec un `PixIconButton` pour l'afficher ou le masque
 
 ## Accessibilité
 
-Si vous utilisez le `PixInputPassword` 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é.
+Si vous utilisez le `PixInputPassword` sans vouloir afficher le label, il faudra renseigner `screenReaderOnly` à `true`.
 
 ```html
-<PixInputPassword @ariaLabel="{{ariaLabel}}" @id="{{id}}" />
+<PixInputPassword @label="{{label}}" @screenReaderOnly={{true}} @id="{{id}}" />
 ```
 
 ## Default

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

@@ -18,10 +18,15 @@ export default {
       description: "Label de l'input. Requis si ariaLabel n'est pas définit.",
       type: { name: 'string', required: true },
     },
-    ariaLabel: {
-      name: 'ariaLabel',
-      description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
-      type: { name: 'string', required: true },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
     },
     information: {
       name: 'information',
@@ -62,9 +67,9 @@ export default {
 const Template = (args) => {
   return {
     template: hbs`<PixInputPassword
-  @ariaLabel={{this.ariaLabel}}
   @id={{this.id}}
   @label={{this.label}}
+  @labelSize={{this.labelSize}}
   @information={{this.information}}
   @errorMessage={{this.errorMessage}}
   @prefix={{this.prefix}}

package/app/stories/pix-input.mdx

@@ -9,11 +9,9 @@ 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`. Il est possible d'ajouter un label en dehors du composant en précisant bien un attribut `for` correspondant à l'`@id` passé au PixInput.
+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.
 
-> Si vous renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
-
-Pour acceder à l'élément via son label/aria-label avec testing-library:
+Pour acceder à l'élément via son label avec testing-library:
 
 ```html
 <PixInput @id="firstName" @label="Prénom" />
@@ -23,7 +21,7 @@ Pour acceder à l'élément via son label/aria-label avec testing-library:
 screen.getByLabelText('Prénom');
 ```
 
-Si le paramètre @information est utilisé, il faudra concatener les valeurs de `@label`/`@ariaLabel` et `@information`
+Si le paramètre @information est utilisé, il faudra concatener les valeurs de `@label` et `@information`
 
 ```html
 <PixInput @id="firstName" @label="Prénom" @information="exemple: Barry" />

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

@@ -3,11 +3,6 @@ import { hbs } from 'ember-cli-htmlbars';
 export default {
   title: 'Form/Inputs/Input',
   argTypes: {
-    ariaLabel: {
-      name: 'ariaLabel',
-      description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
-      type: { name: 'string', required: false },
-    },
     id: {
       name: 'id',
       description: 'Identifiant du champ permettant de lui attacher un label',
@@ -51,6 +46,16 @@ export default {
         type: { summary: 'string' },
       },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
   },
 };
 
@@ -63,8 +68,8 @@ const Template = (args) => {
   @errorMessage={{this.errorMessage}}
   placeholder='Jeanne, Pierre ...'
   @requiredLabel={{this.requiredLabel}}
-  @ariaLabel={{this.ariaLabel}}
   @validationStatus={{this.validationStatus}}
+  @labelSize={{this.labelSize}}
   disabled={{this.disabled}}
   readonly={{this.readonly}}
 />`,

package/app/stories/pix-label.mdx

@@ -0,0 +1,46 @@
+import { Meta, Story, ArgTypes } from '@storybook/blocks';
+import * as ComponentStories from './pix-label.stories';
+
+<Meta of={ComponentStories} />
+
+# Pix Label
+
+Le `PixLabel` permet de créer label pour un input donnée.
+
+## Accessibilité
+
+Cet élément ne s'utilise pas seul, il doit être accompagné d'un élément à identifier
+
+
+## Default
+
+<Story of={ComponentStories.Default} height={100} />
+
+## With label and information
+
+<Story of={ComponentStories.withSubLabel} height={110} />
+
+## With required label
+
+<Story of={ComponentStories.withRequiredLabel} height={100} />
+
+## Screen reader context
+
+<Story of={ComponentStories.screenReaderOnlyLabel} height={100} />
+
+## Usage
+
+```html
+<PixLabel
+  @id="firstName"
+  @subLabel="Complément du label"
+  @requiredLabel="Champ obligatoire"
+  @screenReaderOnly=true
+  @inlineLabel=true>
+  Prénom
+</PixLabel>
+```
+
+## Arguments
+
+<ArgTypes of={ComponentStories} />

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

@@ -0,0 +1,102 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Form/Label',
+  argTypes: {
+    for: {
+      name: 'for',
+      description: 'Identifiant du champ à rattacher au label',
+      type: { name: 'string', required: true },
+    },
+    label: {
+      name: 'label',
+      description: 'Le label du champ',
+      type: { name: 'string', required: true },
+    },
+    subLabel: {
+      name: 'subLabel',
+      description: 'Un descriptif complétant le label',
+      type: { name: 'string', required: false },
+    },
+    requiredLabel: {
+      name: 'requiredLabel',
+      description: 'Label indiquant que le champ est requis.',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    screenReaderOnly: {
+      name: 'screenReaderOnly',
+      description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
+      control: { type: 'boolean' },
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
+    inlineLabel: {
+      name: 'inlineLabel',
+      description:
+        'Permet de ne pas afficher la marge pour les éléments de formulaire inline ( checkbox / radio )',
+      type: { name: 'boolean', required: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const Template = (args) => {
+  return {
+    template: hbs`<PixLabel
+  @id={{this.id}}
+  @subLabel={{this.subLabel}}
+  @requiredLabel={{this.requiredLabel}}
+  @screenReaderOnly={{this.screenReaderOnly}}
+  @inlineLabel={{this.inlineLabel}}
+>
+  {{this.label}}
+</PixLabel>`,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'first-name',
+  label: 'Prénom',
+};
+
+export const withSubLabel = Template.bind({});
+withSubLabel.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  subLabel: 'a small information',
+};
+
+export const withRequiredLabel = Template.bind({});
+withRequiredLabel.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  requiredLabel: 'Champ obligatoire',
+};
+
+export const screenReaderOnlyLabel = Template.bind({});
+screenReaderOnlyLabel.args = {
+  id: 'first-name',
+  label: 'Prénom',
+  screenReaderOnlyLabel: true,
+};

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

@@ -19,6 +19,7 @@ export default {
   @label={{this.label}}
   @placeholder={{this.placeholder}}
   @screenReaderOnly={{this.screenReaderOnly}}
+  @labelSize={{this.labelSize}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
@@ -49,6 +50,16 @@ export default {
         "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' },
     },
+    labelSize: {
+      name: 'labelSize',
+      description: 'Correspond à la taille de la police du label.',
+      type: { name: 'string', required: false },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+      control: { type: 'select' },
+      options: ['small', 'large', 'default'],
+    },
     screenReaderOnly: {
       name: 'screenReaderOnly',
       description: "Permet de cacher à l'écran le label tout en restant vocalisable",