feat(pix-ui): define size params instead of labelSize

1024pix · Mar 20, 2024 · 9681905 · 9681905
1 parent e4a4745
commit 9681905
Show file tree

Hide file tree

Showing 25 changed files with 55 additions and 56 deletions.
diff --git a/addon/components/pix-checkbox.hbs b/addon/components/pix-checkbox.hbs
@@ -11,7 +11,7 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @inlineLabel={{true}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{@isDisabled}}

diff --git a/addon/components/pix-filterable-and-searchable-select.hbs b/addon/components/pix-filterable-and-searchable-select.hbs
@@ -2,7 +2,7 @@
   <PixLabel
     @for={{this.pixSelectId}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @subLabel={{@subLabel}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}

diff --git a/addon/components/pix-input-password.hbs b/addon/components/pix-input-password.hbs
@@ -2,7 +2,7 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @subLabel={{@subLabel}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}

diff --git a/addon/components/pix-input.hbs b/addon/components/pix-input.hbs
@@ -3,7 +3,7 @@
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}
   >

diff --git a/addon/components/pix-label.js b/addon/components/pix-label.js
@@ -8,11 +8,9 @@ export default class PixLabel extends Component {
     if (this.args.inlineLabel) classes.push('pix-label--inline-label');
     if (this.args.isDisabled) classes.push('pix-label--disabled');
 
-    const labelSize = ['small', 'large'].includes(this.args.labelSize)
-      ? this.args.labelSize
-      : 'default';
+    const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
 
-    classes.push(`pix-label--${labelSize}`);
+    classes.push(`pix-label--${size}`);
 
     return classes.join(' ');
   }

diff --git a/addon/components/pix-multi-select.hbs b/addon/components/pix-multi-select.hbs
@@ -9,7 +9,7 @@
     @for={{this.multiSelectId}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}
   >
@@ -72,7 +72,7 @@
             <PixCheckbox
               @id={{concat this.multiSelectId "-" option.value}}
               @checked={{option.checked}}
-              @labelSize="small"
+              @size="small"
               @class="pix-multi-select-list__item-label"
               value={{option.value}}
               {{on "change" this.onSelect}}

diff --git a/addon/components/pix-radio-button.hbs b/addon/components/pix-radio-button.hbs
@@ -9,7 +9,7 @@
   <PixLabel
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{@isDisabled}}
     @inlineLabel={{true}}

diff --git a/addon/components/pix-search-input.hbs b/addon/components/pix-search-input.hbs
@@ -3,7 +3,7 @@
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}
   >

diff --git a/addon/components/pix-select.hbs b/addon/components/pix-select.hbs
@@ -13,7 +13,7 @@
       @for={{this.selectId}}
       @requiredLabel={{@requiredLabel}}
       @subLabel={{@subLabel}}
-      @labelSize={{@labelSize}}
+      @size={{@size}}
       @screenReaderOnly={{@screenReaderOnly}}
       @inlineLabel={{@inlineLabel}}
     >

diff --git a/addon/components/pix-textarea.hbs b/addon/components/pix-textarea.hbs
@@ -3,7 +3,7 @@
     @for={{this.id}}
     @requiredLabel={{@requiredLabel}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @screenReaderOnly={{@screenReaderOnly}}
     @inlineLabel={{@inlineLabel}}
   >

diff --git a/addon/components/pix-toggle.hbs b/addon/components/pix-toggle.hbs
@@ -3,7 +3,7 @@
     @for={{this.id}}
     @screenReaderOnly={{@screenReaderOnly}}
     @subLabel={{@subLabel}}
-    @labelSize={{@labelSize}}
+    @size={{@size}}
     @inlineLabel={{@inlineLabel}}
   >{{yield to="label"}}</PixLabel>
   <button

diff --git a/addon/styles/_pix-search-input.scss b/addon/styles/_pix-search-input.scss
@@ -9,6 +9,7 @@
     gap: var(--pix-spacing-6x);
     align-items:flex-start;
   }
+
   &__input-container {
     position: relative;
 

diff --git a/app/stories/form.stories.js b/app/stories/form.stories.js
@@ -84,7 +84,7 @@ export const form = (args) => {
 
   <br />
 
-  <PixCheckbox @id='spam-pub' @labelSize='small'>
+  <PixCheckbox @id='spam-pub' @size='small'>
     <:label>Acceptez-vous de vous faire spammer de PUB ?</:label>
   </PixCheckbox>
 

diff --git a/app/stories/pix-checkbox.mdx b/app/stories/pix-checkbox.mdx
@@ -53,7 +53,7 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 <PixCheckbox
   @screenReaderOnly="{{false}}"
   @isIndeterminate="{{false}}"
-  @labelSize="small"
+  @'size'="small"
   disabled
 >
   <:label>Recevoir la newsletter</:label>

diff --git a/app/stories/pix-checkbox.stories.js b/app/stories/pix-checkbox.stories.js
@@ -74,8 +74,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -96,7 +96,7 @@ export const Template = (args) => {
   @checked={{this.checked}}
   @isDisabled={{this.isDisabled}}
   disabled={{this.isDisabled}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @inlineLabel={{this.inlineLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
 >
@@ -124,14 +124,14 @@ export const checkboxWithSmallLabel = Template.bind({});
 checkboxWithSmallLabel.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
-  labelSize: 'small',
+  size: 'small',
 };
 
 export const checkboxWithLargeLabel = Template.bind({});
 checkboxWithLargeLabel.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
-  labelSize: 'large',
+  size: 'large',
 };
 
 export const checkboxDisabled = Template.bind({});
@@ -165,7 +165,7 @@ export const MultipleTemplate = (args) => {
   @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @checked={{this.checked}}
   disabled={{this.isDisabled}}
   @isDisabled={{this.isDisabled}}
@@ -177,7 +177,7 @@ export const MultipleTemplate = (args) => {
   @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @checked={{this.checked}}
   disabled={{this.isDisabled}}
   @isDisabled={{this.isDisabled}}

diff --git a/app/stories/pix-filterable-and-searchable-select.stories.js b/app/stories/pix-filterable-and-searchable-select.stories.js
@@ -20,8 +20,8 @@ export default {
         type: { summary: 'string' },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -158,7 +158,7 @@ const Template = (args) => {
   @isSearchable={{this.isSearchable}}
   @value={{this.value}}
   @errorMessage={{this.errorMessage}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @requiredLabel={{this.requiredLabel}}

diff --git a/app/stories/pix-input-password.stories.js b/app/stories/pix-input-password.stories.js
@@ -61,8 +61,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -90,7 +90,7 @@ const Template = (args) => {
   @errorMessage={{this.errorMessage}}
   @prefix={{this.prefix}}
   @validationStatus={{this.validationStatus}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @requiredLabel={{this.requiredLabel}}

diff --git a/app/stories/pix-input.stories.js b/app/stories/pix-input.stories.js
@@ -59,8 +59,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -88,7 +88,7 @@ const Template = (args) => {
   @errorMessage={{this.errorMessage}}
   placeholder='Jeanne, Pierre ...'
   @validationStatus={{this.validationStatus}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   disabled={{this.disabled}}
   readonly={{this.readonly}}
   @subLabel={{this.subLabel}}

diff --git a/app/stories/pix-label.stories.js b/app/stories/pix-label.stories.js
@@ -36,8 +36,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -64,7 +64,7 @@ const Template = (args) => {
     template: hbs`<PixLabel
   @id={{this.id}}
   @subLabel={{this.subLabel}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @requiredLabel={{this.requiredLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @inlineLabel={{this.inlineLabel}}

diff --git a/app/stories/pix-multi-select.stories.js b/app/stories/pix-multi-select.stories.js
@@ -18,7 +18,7 @@ export default {
   @id={{this.id}}
   @placeholder={{this.placeholder}}
   @screenReaderOnly={{this.screenReaderOnly}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @onChange={{this.onChange}}
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
@@ -131,8 +131,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -187,7 +187,7 @@ export const multiSelectWithChildComponent = (args) => {
   @emptyMessage={{this.emptyMessage}}
   @className={{this.className}}
   @options={{this.options}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @screenReaderOnly={{this.screenReaderOnly}}
@@ -253,7 +253,7 @@ const TemplateWithYield = (args) => ({
   @strictSearch={{this.strictSearch}}
   @values={{this.values}}
   @options={{this.options}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @requiredLabel={{this.requiredLabel}}

diff --git a/app/stories/pix-radio-button.stories.js b/app/stories/pix-radio-button.stories.js
@@ -59,8 +59,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -81,7 +81,7 @@ const Template = (args) => {
   @class={{this.class}}
   disabled={{this.isDisabled}}
   @isDisabled={{this.isDisabled}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @requiredLabel={{this.requiredLabel}}
 >

diff --git a/app/stories/pix-search-input.stories.js b/app/stories/pix-search-input.stories.js
@@ -68,8 +68,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -97,7 +97,7 @@ export const Template = (args) => {
   @placeholder={{this.placeholder}}
   @debounceTimeInMs={{this.debounceTimeInMs}}
   @triggerFiltering={{this.triggerFiltering}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @requiredLabel={{this.requiredLabel}}

diff --git a/app/stories/pix-select.stories.js b/app/stories/pix-select.stories.js
@@ -174,8 +174,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -218,7 +218,7 @@ export const Template = (args) => {
   @isDisabled={{this.isDisabled}}
   @placement={{this.placement}}
   @icon={{this.icon}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @inlineLabel={{this.inlineLabel}}
   @requiredLabel={{this.requiredLabel}}

diff --git a/app/stories/pix-textarea.stories.js b/app/stories/pix-textarea.stories.js
@@ -52,8 +52,8 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    labelSize: {
-      name: 'labelSize',
+    size: {
+      name: 'size',
       description: 'Correspond à la taille de la police du label.',
       type: { name: 'string', required: false },
       table: {
@@ -81,7 +81,7 @@ const Template = (args) => {
   @value={{this.value}}
   @maxlength={{this.maxlength}}
   @errorMessage={{this.errorMessage}}
-  @labelSize={{this.labelSize}}
+  @size={{this.size}}
   @subLabel={{this.subLabel}}
   @requiredLabel={{this.requiredLabel}}
   @inlineLabel={{this.inlineLabel}}