@1024pix/pix-ui 34.2.0 → 35.0.1

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:
@@ -55,7 +67,21 @@ jobs:
       - 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:

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v35.0.1 (13/06/2023)
+
+
+### :building_construction: Tech
+- [#420](https://github.com/1024pix/pix-ui/pull/420) [TECH] Précise comment documenter un Breaking Change.
+- [#419](https://github.com/1024pix/pix-ui/pull/419) [TECH] Ajoute un moyen d'identifier qu'on génère un Breaking Change.
+
+## 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)
 
 

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/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/docs/breaking-changes.stories.mdx

@@ -53,20 +53,30 @@ Exemples :
 - Un nouveau composant est ajouté
 - Un argument facultatif est ajouté
 
-Astuce : pour repérer les potentiels breaking changes, le mieux est d'installer
+Pour repérer les potentiels breaking changes, il est possible d'[installer
 la version en cours de développement de Pix UI dans une app Ember à partir de
-sa branche sur Github. Si, sans faire aucune autre modification que cette mise
+sa branche sur Github](https://ui.pix.fr/?path=/docs/d%C3%A9veloppement-tester-un-composant-en-developpement-dans-une-app--page). Si, sans faire aucune autre modification que cette mise
 à jour, on observe des changements, alors il s'agit probablement de _breaking
 changes_.
 
+Pour aller plus loin, il est possible d'utiliser l'outil SourceGraph pour rechercher les usages de nos composants ou styles dans nos repos publics. Ainsi, on peut savoir exactement le nombre d'usages de nos composants ou bien les attributs utilisés. Voici quelques exemples de requêtes :
+
+- [Trouver les usages du composant `PixButton`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.hbs+PixButton%5Cs&patternType=regexp&sm=0&groupBy=repo)
+- [Trouver les usages du composant `PixModal`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.hbs+PixModal%5Cs&patternType=regexp&sm=0&groupBy=repo)
+- [Trouver les usages du placeholder SCSS `%pix-body-m`](https://sourcegraph.com/search?q=context:global+repo:1024pix+file:.scss+%25pix-body-m&patternType=standard&sm=0&groupBy=repo)
+
 ## Comment communiquer en cas de _breaking change_ ?
 
 C'est au développeur qui ouvre la _pull request_ qu'incombe la responsabilité
 d'identifier les éventuels _breaking changes_ dans ses modifications et, le cas
-échéant, de les signaler dans le titre de la PR. Il lui faudra donner aussi un
-maximum d'informations dans une section breaking changes de la PR sur ce qu'il
-convient de faire pour vérifier que rien de casse lors de la montée de version
-de Pix UI.
+échéant, de les signaler en préfixe dans le titre de la PR :
+
+```
+[BREAKING] Changement de couleur de fond par défaut du PixButton (PIX-1234)
+```
+
+Enumérer précisément les fonctionnalités impactées par le breaking change, et la modification à apporter (solution de contournement ou définitive).
+Le développeur pourra ainsi déterminer s'il les utilise, et si c'est le cas, apporter les modifications.
 
 Ainsi :
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "34.2.0",
+  "version": "35.0.1",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -67,6 +67,7 @@
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.0.1",
     "@ember/test-helpers": "^2.8.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",
@@ -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",