@1024pix/pix-ui 34.0.0 → 34.2.0

package/.circleci/config.yml

@@ -30,25 +30,25 @@ workflows:
 jobs:
   install:
     docker:
-      - image: cimg/node:16.19.1-browsers
+      - image: cimg/node:16.20.0-browsers
     resource_class: medium+
+    working_directory: ~/pix-ui
     steps:
       - checkout
       - run: npm ci
-      - save_cache:
-          name: Save node modules
-          key: node_modules
+      - persist_to_workspace:
+          root: ~/pix-ui
           paths:
-            - node_modules
+            - .
+
   lint-and-test:
     docker:
-      - image: cimg/node:16.19.1-browsers
+      - image: cimg/node:16.20.0-browsers
     resource_class: medium+
+    working_directory: ~/pix-ui
     steps:
-      - checkout
-      - restore_cache:
-          name: Restore node modules
-          key: node_modules
+      - attach_workspace:
+          at: ~/pix-ui
       - browser-tools/install-chrome
       - browser-tools/install-chromedriver
       - run: npm run lint:js
@@ -56,12 +56,12 @@ jobs:
       - run: npm run lint:scss
       - run: npm test
       - run: npx ember try:one embroider-safe
+
   chromatic-deployment:
     docker:
-      - image: cimg/node:16.19.1-browsers
+      - image: cimg/node:16.20.0-browsers
+    working_directory: ~/pix-ui
     steps:
-      - checkout
-      - restore_cache:
-          name: Restore node modules
-          key: node_modules
+      - attach_workspace:
+          at: ~/pix-ui
       - run: npm run chromatic -- --auto-accept-changes

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Pix-UI Changelog
 
+## v34.2.0 (26/05/2023)
+
+
+### :rocket: Amélioration
+- [#406](https://github.com/1024pix/pix-ui/pull/406) [FEATURE] Enlever l'obligation d'avoir un label ou un ariaLabel pour le PixInput (PIX-8126) 
+
+### :building_construction: Tech
+- [#401](https://github.com/1024pix/pix-ui/pull/401) [TECH] Suppression de l'utilitaire uniqueId (PIX-8003)
+
+### :coffee: Autre
+- [#410](https://github.com/1024pix/pix-ui/pull/410) [BUMP] Update dependency stylelint to v15 (dossier racine)
+- [#411](https://github.com/1024pix/pix-ui/pull/411) chore(deps): bump socket.io-parser from 4.2.1 to 4.2.3
+- [#405](https://github.com/1024pix/pix-ui/pull/405) [BUMP] Update dependency @embroider/test-setup to v3 (dossier racine)
+- [#398](https://github.com/1024pix/pix-ui/pull/398) [BUMP] Update Node.js to v16.20.0
+- [#404](https://github.com/1024pix/pix-ui/pull/404) [BUMP] Update dependency @fortawesome/ember-fontawesome to v1 (dossier racine)
+
+## 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)
 
 

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-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-input.js

@@ -1,7 +1,5 @@
 import Component from '@glimmer/component';
 
-const ERROR_MESSAGE = 'ERROR in PixInput component, you must provide @label or @ariaLabel params';
-
 const INPUT_VALIDATION_STATUS_MAP = {
   default: '',
   error: 'pix-input__input--error',
@@ -17,16 +15,10 @@ export default class PixInput extends Component {
   }
 
   get label() {
-    if (!this.args.label && !this.args.ariaLabel) {
-      throw new Error(ERROR_MESSAGE);
-    }
     return this.args.label;
   }
 
   get ariaLabel() {
-    if (!this.args.label && !this.args.ariaLabel) {
-      throw new Error(ERROR_MESSAGE);
-    }
     return this.args.label ? null : this.args.ariaLabel;
   }
 

package/addon/components/pix-modal.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import uniqueId from '@1024pix/pix-ui/utils/unique-id';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixModal extends Component {
   constructor(...args) {
@@ -23,6 +23,6 @@ export default class PixModal extends Component {
   }
 
   get id() {
-    return uniqueId();
+    return guidFor(this);
   }
 }

package/addon/components/pix-sidebar.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import uniqueId from '@1024pix/pix-ui/utils/unique-id';
+import { guidFor } from '@ember/object/internals';
 
 export default class PixSidebar extends Component {
   constructor(...args) {
@@ -23,6 +23,6 @@ export default class PixSidebar extends Component {
   }
 
   get id() {
-    return uniqueId();
+    return guidFor(this);
   }
 }

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

@@ -51,11 +51,13 @@
 
   &__error-container {
     padding-right: $pix-spacing-m;
+
     @include formElementInError();
   }
 
   &__success-container {
     padding-right: $pix-spacing-m;
+
     @include formElementInSuccess();
   }
 

package/addon/styles/_pix-input.scss

@@ -55,11 +55,13 @@
 
   &__input--error {
     padding-right: $pix-spacing-l;
+
     @include formElementInError();
   }
 
   &__input--success {
     padding-right: $pix-spacing-l;
+
     @include formElementInSuccess();
   }
 }

package/addon/styles/_pix-selectable-tag.scss

@@ -1,5 +1,6 @@
 $checkmark-width: 0.625rem;
 $checkmark-width-with-space: $checkmark-width + 0.438rem;
+
 @mixin checkmarkColor($borderColor) {
   input[type='checkbox']:checked + label::before {
     position: absolute;
@@ -17,7 +18,6 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
 }
 
 .pix-selectable-tag {
-
   @extend %pix-body-s;
 
   display: inline-block;

package/addon/styles/_pix-tag.scss

@@ -1,5 +1,4 @@
 .pix-tag {
-
   @extend %pix-body-s;
 
   display: inline-block;
@@ -66,7 +65,6 @@
   }
 
   &--compact {
-
     @extend %pix-body-xs;
 
     font-weight: $font-medium;

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-input.stories.js

@@ -55,7 +55,7 @@ export const argTypes = {
   ariaLabel: {
     name: 'ariaLabel',
     description: "L'action du champ, pour l'accessibilité. Requis si label n'est pas définit.",
-    type: { name: 'string', required: true },
+    type: { name: 'string', required: false },
   },
   id: {
     name: 'id',

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

@@ -10,7 +10,7 @@ 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`, sinon le composant renvoie une erreur.
+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 renseignez les paramètres label et ariaLabel ensemble, ariaLabel sera nullifié.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "34.0.0",
+  "version": "34.2.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -60,15 +60,15 @@
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^0.6.0",
-    "@1024pix/stylelint-config": "^1.0.1",
+    "@1024pix/stylelint-config": "^3.0.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^2.8.1",
-    "@embroider/test-setup": "^2.1.1",
-    "@fortawesome/ember-fontawesome": "^0.4.1",
+    "@embroider/test-setup": "^3.0.0",
+    "@fortawesome/ember-fontawesome": "^1.0.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@glimmer/component": "^1.1.2",
@@ -120,9 +120,8 @@
     "qunit": "^2.19.3",
     "qunit-dom": "^2.0.0",
     "sass": "^1.56.1",
-    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard-scss": "^6.1.0",
+    "stylelint": "^15.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
     "webpack": "^5.75.0"
   },
   "overrides": {

package/addon/utils/unique-id.js

@@ -1,5 +0,0 @@
-export default function uniqueId() {
-  return ([3e7] + -1e3 + -4e3 + -2e3 + -1e11).replace(/[0-3]/g, (a) =>
-    ((a * 4) ^ ((Math.random() * 16) >> (a & 2))).toString(16)
-  );
-}