@1024pix/pix-ui 34.1.0 → 35.0.0

package/.circleci/config.yml

@@ -19,6 +19,18 @@ workflows:
                 - gh-pages
           requires:
             - install
+      - try-scenarios:
+          matrix:
+            parameters:
+              try-scenario:
+                - embroider-safe
+                - embroider-optimized
+          filters:
+            branches:
+              ignore:
+                - gh-pages
+          requires:
+            - install
       - chromatic-deployment:
           filters:
             branches:
@@ -30,38 +42,52 @@ 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
       - run: npm run lint:hbs
       - run: npm run lint:scss
       - run: npm test
-      - run: npx ember try:one embroider-safe
+
+  try-scenarios:
+    parameters:
+      try-scenario:
+        type: string
+    docker:
+      - image: cimg/node:16.20.0-browsers
+    resource_class: medium+
+    working_directory: ~/pix-ui
+    steps:
+      - attach_workspace:
+          at: ~/pix-ui
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
+      - run: npx ember try:one << parameters.try-scenario >>
+
   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,33 @@
 # Pix-UI Changelog
 
+## v35.0.0 (31/05/2023)
+
+
+### :rocket: Amélioration
+- [#415](https://github.com/1024pix/pix-ui/pull/415) [FEATURE] Utiliser les éléments HTML native pour le TextArea (PIX-8200)
+
+### :building_construction: Tech
+- [#409](https://github.com/1024pix/pix-ui/pull/409) [TECH] Fait tourner le scenario embroider-optimized sur la CI
+
+### :coffee: Autre
+- [#408](https://github.com/1024pix/pix-ui/pull/408) [BUMP] Update dependency fs-extra to v11 (dossier racine)
+
+## 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)
 
 

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/components/pix-textarea.hbs

@@ -10,15 +10,15 @@
     </label>
   {{/if}}
 
-  <Textarea
+  <textarea
     id={{@id}}
-    @value={{@value}}
     maxlength={{if @maxlength @maxlength}}
     aria-required="{{if this.requiredLabel true false}}"
     required={{if this.requiredLabel true false}}
     class="{{if @errorMessage 'pix-textarea--error'}}"
+    {{on "keyup" this.updateValue}}
     ...attributes
-  />
+  >{{@value}}</textarea>
 
   {{#if @maxlength}}
     <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>

package/addon/components/pix-textarea.js

@@ -1,8 +1,12 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class PixTextarea extends Component {
+  @tracked value = this.args.value;
+
   get textLengthIndicator() {
-    return this.args.value ? this.args.value.length : 0;
+    return this.value ? this.value.length : 0;
   }
 
   get label() {
@@ -15,6 +19,11 @@ export default class PixTextarea extends Component {
     return this.args.label || null;
   }
 
+  @action
+  updateValue(event) {
+    this.value = event.target.value;
+  }
+
   get requiredLabel() {
     const idRequiredLabelDefined = this.args.requiredLabel?.trim();
     const labelIsDefined = this.args.label?.trim();

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-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/docs/adr/0001-utiliser-les-balises-html-natives.md

@@ -1,4 +1,4 @@
-# 1. Eviter les balises HTML natives
+# 1. Utiliser les balises HTML natives
 
 Date : 2022-01-04
 
@@ -48,6 +48,4 @@ Nous privilégierons les éléments HTML natifs et éviterons autant que possibl
 
 ## Conséquences
 
-Il faut mettre à jour le PixTextarea pour qu'il utilise une balise `<textarea>`.
-
 ⚠️ Pour ne pas casser le comportement existant. lors de la mise à jour des versions v11.0.0 / v11.1.0 de Pix-UI il faut mettre à jour tous les PixInput et PixInputPassword afin qu'il définissent un `onChange`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "34.1.0",
+  "version": "35.0.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -60,15 +60,16 @@
   },
   "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/macros": "^1.11.0",
+    "@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",
@@ -111,7 +112,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-qunit": "^7.3.3",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.0.0",
     "html-webpack-plugin": "^5.5.0",
     "loader.js": "^4.7.0",
     "lodash": "^4.17.21",
@@ -120,9 +121,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)
-  );
-}