@1024pix/pix-ui 46.5.1 → 46.6.0

package/addon/components/pix-textarea.hbs

@@ -12,23 +12,24 @@
     </PixLabel>
   {{/if}}
 
-  <div>
+  <div class="pix-textarea__container">
     <textarea
       id={{this.id}}
       maxlength={{if @maxlength @maxlength}}
       aria-required="{{if @requiredLabel true false}}"
       required={{if @requiredLabel true false}}
-      class="{{if @errorMessage 'pix-textarea--error'}}"
+      class="pix-textarea-container__input {{if @errorMessage 'pix-textarea--error'}}"
       {{on "keyup" this.updateValue}}
       ...attributes
     >{{@value}}</textarea>
 
     {{#if @maxlength}}
-      <p>{{this.textLengthIndicator}} / {{@maxlength}}</p>
+      {{! prettier-ignore }}
+      <p class="pix-textarea-container__text-length-indicator">{{this.textLengthIndicator}} / {{@maxlength}}</p>
     {{/if}}
 
     {{#if @errorMessage}}
-      <label for={{this.id}} class="pix-textarea__error-message">{{@errorMessage}}</label>
+      <label for={{this.id}} class="pix-textarea-container__error-message">{{@errorMessage}}</label>
     {{/if}}
   </div>
 

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

@@ -1,5 +1,8 @@
 .pix-input-code {
+  @extend %pix-monospace;
+
   display: flex;
+  line-height: 1.15;
 
   // hide up/down cursors
   input[type='number'] {
@@ -40,7 +43,8 @@
     border: 1.4px solid var(--pix-neutral-500);
     border-radius: 4px;
 
-    &:focus, &:active {
+    &:focus,
+    &:active {
       &::placeholder {
         opacity: 0;
       }

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

@@ -33,6 +33,7 @@
 
     input {
       @extend %pix-input-default;
+      @extend %pix-monospace;
 
       flex-grow: 1;
       background-color: transparent;

package/addon/styles/_pix-textarea.scss

@@ -1,7 +1,20 @@
 .pix-textarea {
-  textarea {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+}
+
+.pix-textarea-container {
+  &__input {
     @extend %pix-form-element-state;
 
+    flex-grow: 1;
     width: 100%;
     padding: 10px var(--pix-spacing-4x);
     color: var(--pix-neutral-900);
@@ -16,7 +29,7 @@
     }
   }
 
-  p {
+  &__text-length-indicator {
     display: flex;
     flex-direction: row-reverse;
     margin-top: 6px;

package/addon/styles/pix-design-tokens/_fonts.scss

@@ -34,6 +34,13 @@
   src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Bold.woff2');
 }
 
+@font-face {
+  font-weight: 400;
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  src: url('../@1024pix/pix-ui/fonts/RobotoMono/RobotoMono-Regular.woff2');
+}
+
 /* @deprecated - use Design Tokens */
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
@@ -55,4 +62,9 @@ $font-bold: 700;
   // See https://ui.pix.fr/?path=/docs/utiliser-pix-ui-design-tokens-typographie--docs
   // stylelint-disable-next-line custom-property-pattern
   --_pix-font-family-body: 'Roboto', Arial, sans-serif;
+
+  // Private property, do not use directly
+  // See https://ui.pix.fr/?path=/docs/utiliser-pix-ui-design-tokens-typographie--docs
+  // stylelint-disable-next-line custom-property-pattern
+  --_pix-font-family-monospace: 'Roboto Mono', monospace;
 }

package/addon/styles/pix-design-tokens/_typography.scss

@@ -142,6 +142,14 @@
   }
 }
 
+%pix-monospace,
+.pix-monospace {
+  font-weight: var(--pix-font-normal);
+
+  // stylelint-disable-next-line custom-property-pattern
+  font-family: var(--_pix-font-family-monospace);
+}
+
 .pix-body-weight-medium {
   font-weight: var(--pix-font-medium);
 }

package/app/stories/pix-textarea.mdx

@@ -11,6 +11,12 @@ Optionellement, il peut afficher le nombre de caractères tapés ainsi que le no
 
 <Story of={ComponentStories.textarea} height={150} />
 
+## Dimensions
+
+Le PixTextarea prend tout l'espace à sa disposition.
+
+<Story of={ComponentStories.FullWidth} height={290} />
+
 ## Accessibilité
 
 La propriété label est optionnelle pour le composant.

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

@@ -113,6 +113,32 @@ textarea.args = {
   value: 'Contenu du textarea',
 };
 
+const FullWidthTemplate = (args) => {
+  return {
+    template: hbs`{{! template-lint-disable no-inline-styles }}
+<div
+  style='border: 1px solid var(--pix-neutral-500); background: var(--pix-neutral-20); padding: var(--pix-spacing-4x); width: 500px; height: 250px;'
+>
+  <PixTextarea
+    @id={{this.id}}
+    @value={{this.value}}
+    @subLabel={{this.subLabel}}
+    @maxlength={{this.maxlength}}
+  ><:label>{{this.label}}</:label></PixTextarea>
+</div>`,
+    context: args,
+  };
+};
+
+export const FullWidth = FullWidthTemplate.bind({});
+FullWidth.args = {
+  id: 'textarea',
+  label: 'Label du textarea',
+  subLabel: 'Sous-label',
+  value: 'Contenu du textarea',
+  maxlength: 120,
+};
+
 export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
 textareaWithoutLabel.args = {
   id: 'textarea-without-label',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "46.5.1",
+  "version": "46.6.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"