@1024pix/pix-ui 33.0.0 → 34.0.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,6 +1,25 @@
 # Pix-UI Changelog
 
-## v32.1.0 (27/04/2023)
+## 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)
+
+
+### :rocket: Amélioration
+- [#391](https://github.com/1024pix/pix-ui/pull/391) [FEATURE] Améliorer la lisibilité des tags (PIX-7827)
+
+## v33.0.0 (27/04/2023)
 
 
 ### :rocket: Amélioration

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-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/addon/styles/_pix-selectable-tag.scss

@@ -3,8 +3,8 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 @mixin checkmarkColor($borderColor) {
   input[type='checkbox']:checked + label::before {
     position: absolute;
-    top: 6px;
-    left: 8px;
+    top: 10px;
+    left: 10px;
     width: $checkmark-width;
     height: 0.3125rem;
     border: 2px solid;
@@ -17,17 +17,20 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 }
 
 .pix-selectable-tag {
+
+  @extend %pix-body-s;
+
   display: inline-block;
   text-align: center;
   position: relative;
   padding: 3px calc(8px + #{$checkmark-width-with-space} / 2);
   letter-spacing: 0.009rem;
-  border-radius: 0.75rem;
+  border-radius: 0.95rem;
   border: $pix-neutral-30 solid 1px;
   color: $pix-neutral-60;
   background-color: $pix-neutral-0;
-  font-size: 0.8125rem;
   cursor: pointer;
+  font-weight: $font-medium;
 
   input {
     position: absolute;

package/addon/styles/_pix-tag.scss

@@ -1,14 +1,17 @@
 .pix-tag {
+
+  @extend %pix-body-s;
+
   display: inline-block;
   text-align: center;
   vertical-align: baseline;
   white-space: nowrap;
   padding: 4px 16px;
-  font-size: 0.8125rem;
   border: 1px solid transparent;
-  border-radius: 0.75rem;
+  border-radius: 0.95rem;
   color: $pix-neutral-0;
   background-color: $pix-primary;
+  font-weight: $font-medium;
 
   &--blue-light {
     color: $pix-primary-80;
@@ -63,9 +66,12 @@
   }
 
   &--compact {
-    font-size: 0.6875rem;
+
+    @extend %pix-body-xs;
+
     font-weight: $font-medium;
     text-transform: uppercase;
     padding: 4px 13px;
+    line-height: inherit;
   }
 }

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-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.0.0",
+  "version": "34.0.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)'",