@1024pix/pix-ui 33.1.0 → 34.1.0

package/.circleci/config.yml

@@ -64,4 +64,4 @@ jobs:
       - restore_cache:
           name: Restore node modules
           key: node_modules
-      - run: npm run chromatic -- --exit-zero-on-changes
+      - run: npm run chromatic -- --auto-accept-changes

package/.storybook/main.js

@@ -1,12 +1,7 @@
 module.exports = {
-  addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-  ],
-  stories: [
-    '../docs/**/*.stories.@(mdx)',
-    '../app/**/*.stories.@(js|mdx)',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
+  stories: ['../docs/**/*.stories.@(mdx)', '../app/**/*.stories.@(js|mdx)'],
+  staticDirs: ['../dist'],
   core: {
     builder: 'webpack5',
   },

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v34.1.0 (05/05/2023)
+
+
+### :rocket: Amélioration
+- [#397](https://github.com/1024pix/pix-ui/pull/397) [FEATURE] Améliorer le composant PixFilterbanner (PIX-7854)
+
+## v34.0.0 (04/05/2023)
+
+
+### :rocket: Amélioration
+- [#393](https://github.com/1024pix/pix-ui/pull/393) [FEATURE] Uniformiser PixRadioButton et PixCheckbox (PIX-7900)
+
+### :building_construction: Tech
+- [#354](https://github.com/1024pix/pix-ui/pull/354) [TECH] Améliorer l'expérience de dev
+- [#394](https://github.com/1024pix/pix-ui/pull/394) [TECH] Rendre Chromatic non bloquant lors du run de la CI (PIX-7932)
+
+### :bug: Correction
+- [#392](https://github.com/1024pix/pix-ui/pull/392) [BUGFIX] Éviter le rétrécissement des inputs checkbox et radio (PIX-7896).
+
 ## v33.1.0 (27/04/2023)
 
 

package/addon/components/pix-button.hbs

@@ -13,8 +13,8 @@
     class={{this.className}}
     {{on "click" this.triggerAction}}
     ...attributes
-    disabled={{this.isButtonLoadingOrDisabled}}
-    aria-disabled="{{this.ariaDisabled}}"
+    disabled={{this.isDisabled}}
+    aria-disabled="{{this.isDisabled}}"
   >
     {{#if this.isLoading}}
       <div class="loader loader--{{this.loadingColor}}">

package/addon/components/pix-button.js

@@ -21,21 +21,17 @@ export default class PixButton extends PixButtonBase {
     return this.args.loadingColor || this.args['loading-color'] || 'white';
   }
 
-  get isButtonLoadingOrDisabled() {
+  get isDisabled() {
     return this.isLoading || this.args.isDisabled;
   }
 
-  get ariaDisabled() {
-    return this.isButtonLoadingOrDisabled;
-  }
-
   get className() {
     return super.baseClassNames.join(' ');
   }
 
   @action
   async triggerAction(params) {
-    if (this.type === 'submit' && !this.args.triggerAction) return;
+    if (this.isDisabled || (this.type === 'submit' && !this.args.triggerAction)) return;
     if (!this.args.triggerAction) {
       throw new Error('@triggerAction params is required for PixButton !');
     }

package/addon/components/pix-checkbox.hbs

@@ -1,18 +1,17 @@
-<label class="pix-checkbox {{@class}}" for={{@id}}>
+<div class="pix-checkbox {{@class}}">
   <input
-    id={{@id}}
     type="checkbox"
+    id={{this.id}}
     class={{this.inputClasses}}
     checked={{@checked}}
     ...attributes
   />
 
-  {{#if (has-block)}}
-    <span class={{this.labelClasses}}>{{yield}}</span>
-  {{else}}
-    <span>
-      yield required to give a label for PixCheckbox
-      {{@id}}.
-    </span>
-  {{/if}}
-</label>
+  <label class={{this.labelClasses}} for={{this.id}}>
+    {{#if (has-block)}}
+      {{yield}}
+    {{else}}
+      <span>yield required to give a label for PixCheckbox.</span>
+    {{/if}}
+  </label>
+</div>

package/addon/components/pix-checkbox.js

@@ -1,12 +1,13 @@
 import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixCheckbox extends Component {
   constructor() {
     super(...arguments);
+  }
 
-    if (!this.args.id || !this.args.id.toString().trim()) {
-      throw new Error('ERROR in PixCheckbox component, @id param is not provided');
-    }
+  get id() {
+    return this.args.id || guidFor(this);
   }
 
   get inputClasses() {

package/addon/components/pix-filter-banner.hbs

@@ -22,8 +22,7 @@
             @shape="squircle"
             @size="small"
             @triggerAction={{@onClearFilters}}
-            @iconBefore="trash-can"
-            @prefixIconBefore="far"
+            @isDisabled={{@isClearFilterButtonDisabled}}
           >
             {{@clearFiltersLabel}}
           </PixButton>

package/addon/components/pix-filter-banner.js

@@ -4,9 +4,11 @@ export default class PixFilterBanner extends Component {
   get displayTitle() {
     return Boolean(this.args.title);
   }
+
   get displayDetails() {
     return Boolean(this.args.details);
   }
+
   get displayClearFilters() {
     return Boolean(this.args.clearFiltersLabel);
   }

package/addon/components/pix-radio-button.hbs

@@ -1,10 +1,16 @@
-<label class="pix-radio-button">
+<div class="pix-radio-button {{@class}}">
   <input
-    class="pix-radio-button__input"
     type="radio"
+    id={{this.id}}
+    class="pix-radio-button__input"
     value={{@value}}
-    disabled={{@isDisabled}}
     ...attributes
   />
-  <span class="pix-radio-button__label">{{@label}}</span>
-</label>
+  <label class="pix-radio-button__label" for={{this.id}}>
+    {{#if (has-block)}}
+      {{yield}}
+    {{else}}
+      <span>yield required to give a label for PixRadioButton.</span>
+    {{/if}}
+  </label>
+</div>

package/addon/components/pix-radio-button.js

@@ -1,5 +1,10 @@
 import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixRadioButton extends Component {
   text = 'pix-radio-button';
+
+  get id() {
+    return this.args.id || guidFor(this);
+  }
 }

package/addon/styles/_pix-checkbox.scss

@@ -4,7 +4,6 @@
   align-items: center;
   display: flex;
   color: $pix-neutral-70;
-  cursor: pointer;
 
   & + .pix-checkbox {
     margin-top: $pix-spacing-s;
@@ -17,6 +16,7 @@
   color: $pix-neutral-90;
   font-size: 1rem;
   line-height: 1.5;
+  cursor: pointer;
 
   &--small {
     font-size: 0.875rem;
@@ -32,6 +32,7 @@
   position: relative;
   width: 1rem;
   height: 1rem;
+  flex-shrink: 0;
   background-color: $pix-neutral-0;
   border: 1.5px solid $pix-neutral-70;
   border-radius: 2px;

package/addon/styles/_pix-radio-button.scss

@@ -1,7 +1,6 @@
 .pix-radio-button {
   display: flex;
   align-items: center;
-  cursor: pointer;
 
   & + .pix-radio-button {
     margin-top: $pix-spacing-s;
@@ -12,16 +11,19 @@
     color: $pix-neutral-90;
     font-size: 1rem;
     line-height: 1.5;
+    cursor: pointer;
   }
 
   &__input {
     position: relative;
     width: 1rem;
     height: 1rem;
+    flex-shrink: 0;
     background-color: $pix-neutral-0;
     border: 1.5px solid $pix-neutral-70;
     border-radius: 50%;
     appearance: none;
+    cursor: pointer;
 
     // Hover effect
     &::before {

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

@@ -5,6 +5,7 @@ export const Template = (args) => {
     template: hbs`
 <PixCheckbox
   @id={{this.id}}
+  @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
@@ -75,6 +76,7 @@ export const MultipleTemplate = (args) => {
     template: hbs`
 <PixCheckbox
   @id="one"
+  @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
@@ -85,6 +87,7 @@ export const MultipleTemplate = (args) => {
 </PixCheckbox>
 <PixCheckbox
   @id="two"
+  @class={{this.class}}
   @screenReaderOnly={{this.screenReaderOnly}}
   @isIndeterminate={{this.isIndeterminate}}
   @labelSize={{this.labelSize}}
@@ -106,8 +109,9 @@ multiple.args = {
 export const argTypes = {
   id: {
     name: 'id',
-    description: 'Identifiant du champ permettant de lui attacher un label',
-    type: { name: 'string', required: true },
+    description:
+      'Identifiant du champ permettant de lui attacher un label. Généré automatiquement si non renseigné.',
+    type: { name: 'string' },
   },
   label: {
     name: 'label',
@@ -115,7 +119,7 @@ export const argTypes = {
   },
   class: {
     name: 'class',
-    description: "Permet d'ajouter une classe css à la checkbox.",
+    description: "Permet d'ajouter une classe au parent du composant.",
     type: { name: 'string' },
   },
   screenReaderOnly: {

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

@@ -59,7 +59,6 @@ En ce sens, nous avons déjà prévu un espace vertical pour séparer 2 composan
 
 ```html
 <PixCheckbox
-  @id="superId"
   @screenReaderOnly="{{false}}"
   @isIndeterminate="{{false}}"
   @labelSize="small"

package/app/stories/pix-filter-banner.stories.js

@@ -8,6 +8,7 @@ export const filterBanner = (args) => {
   @details={{this.details}}
   @clearFiltersLabel={{this.clearFiltersLabel}}
   @onClearFilters={{this.onClearFilters}}
+  @isClearFilterButtonDisabled={{this.isClearFilterButtonDisabled}}
 >
   <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
   <PixSelect @options={{this.options}} @onChange={{this.onChange}} @label="mon label" @screenReaderOnly={{true}} @placeholder="placeholer"/>
@@ -49,4 +50,14 @@ export const argTypes = {
     description: 'fonction à appeler pour déclencher l’action de suppression des filtres',
     type: { required: false },
   },
+  isClearFilterButtonDisabled: {
+    name: 'isClearFilterButtonDisabled',
+    description: 'Désactiver le button de la suppresion des filtres',
+    type: { name: 'boolean', required: true },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

package/app/stories/pix-radio-button.stories.js

@@ -3,7 +3,15 @@ import { hbs } from 'ember-cli-htmlbars';
 /* Default stories */
 const Template = (args) => {
   return {
-    template: hbs`<PixRadioButton @label={{this.label}} @value={{this.value}} @isDisabled={{this.isDisabled}} />`,
+    template: hbs`
+    <PixRadioButton
+      @value={{this.value}}
+      @id={{this.id}}
+      @class={{this.class}}
+      disabled={{this.disabled}}
+    >
+      {{this.label}}
+    </PixRadioButton>`,
     context: args,
   };
 };
@@ -16,13 +24,14 @@ Default.args = {
 export const isDisabled = Template.bind({});
 isDisabled.args = {
   ...Default.args,
-  isDisabled: true,
+  disabled: true,
 };
 
 /* Checked stories */
 const checked = (args) => {
   return {
-    template: hbs`<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} checked />`,
+    template: hbs`
+    <PixRadioButton @value={{this.value}} disabled={{this.disabled}} checked>{{this.label}}</PixRadioButton>`,
     context: args,
   };
 };
@@ -30,7 +39,7 @@ const checked = (args) => {
 export const disabledChecked = checked.bind({});
 disabledChecked.args = {
   ...Default.args,
-  isDisabled: true,
+  disabled: true,
 };
 
 export const defaultChecked = checked.bind({});
@@ -40,9 +49,9 @@ defaultChecked.args = Default.args;
 const multipleTemplate = (args) => {
   return {
     template: hbs`
-<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
-<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
-<PixRadioButton @label={{this.label}} @isDisabled={{this.isDisabled}} name="radio" />
+<PixRadioButton disabled={{this.disabled}} name="radio">{{this.label}}</PixRadioButton>
+<PixRadioButton disabled={{this.disabled}} name="radio">{{this.label}}</PixRadioButton>
+<PixRadioButton disabled={{this.disabled}} name="radio">{{this.label}}</PixRadioButton>
 `,
     context: args,
   };
@@ -54,18 +63,29 @@ multiple.args = {
 };
 
 export const argTypes = {
+  id: {
+    name: 'id',
+    description:
+      'Identifiant du champ permettant de lui attacher un label. Généré automatiquement si non renseigné.',
+    type: { name: 'string' },
+  },
   label: {
     name: 'label',
     description: 'Le label du bouton radio',
     type: { name: 'string', required: true },
   },
+  class: {
+    name: 'class',
+    description: "Permet d'ajouter une classe CSS au parent du composant.",
+    type: { name: 'string' },
+  },
   value: {
     name: 'value',
     description: "Valeur permettant d'identifier l'option sélectionnée",
     type: { name: 'string', required: false },
   },
-  isDisabled: {
-    name: 'isDisabled',
+  disabled: {
+    name: 'disabled',
     description: 'Pour désactiver/activer le bouton radio',
     type: { name: 'boolean', required: false },
     table: {

package/app/stories/pix-radio-button.stories.mdx

@@ -27,7 +27,7 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
   <Story name="Multiple" story={stories.multiple} height={140} />
 </Canvas>
 
-## IsDisabled
+## Disabled
 
 État inactif du bouton radio.
 
@@ -39,12 +39,7 @@ Pour les considérer comme un seul groupe d'inputs, **il est nécessaire qu'ils
 ## Usage
 
 ```html
-<PixRadioButton
-  name="input-name"
-  @label="{{label}}"
-  @value="{{value}}"
-  @isDisabled="{{isDisabled}}"
-/>
+<PixRadioButton name="input-name" @value="{{value}}"> Exemple de label </PixRadioButton>
 ```
 
 ## Arguments

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "33.1.0",
+  "version": "34.1.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -26,8 +26,8 @@
     "build": "./scripts/build.sh",
     "build-ember": "ember build --environment=production",
     "serve-ember": "ember serve",
-    "build-storybook": "ember build && cp -v CNAME dist && build-storybook -s dist",
-    "serve-storybook": "start-storybook --port 9001 --static-dir dist",
+    "build-storybook": "ember build && cp -v CNAME dist && build-storybook",
+    "serve-storybook": "start-storybook --port 9001",
     "clean": "rm -rf dist node_modules",
     "deploy-storybook": "storybook-to-ghpages",
     "lint": "npm-run-all --aggregate-output --parallel --continue-on-error 'lint:!(fix)'",