Merge pull request #7555 from betagouv/ux/input-sizes

UX/input sizes

app/assets/stylesheets/forms.scss

@@ -70,7 +70,6 @@
     .updated-at {
       @include notice-text-style;
       float: right;
-      display: inline-block;
       margin-left: $default-spacer;
       visibility: hidden;
     }
@@ -239,14 +238,50 @@
   input[type=number],
   input[type=tel],
   textarea {
-    width: 100%;
+    @media (max-width: $two-columns-breakpoint) {
+      width: 100%;
+    }
+
+    // don't set 100% width when width-* classes or size attribute are applied
+    @media (min-width: $two-columns-breakpoint) {
+      &:not([class^='width-']):not([size]) {
+        width: 100%;
+      }
+    }
   }
 
-  input[type=email],
+  @media (min-width: $two-columns-breakpoint) {
-  input[type=password],
+    input[type=email],
-  input[type=number],
+    input[type=password],
-  input[type=tel], {
+    input[type=number],
-    max-width: 500px;
+    input[type=tel] {
+      max-width: 500px;
+    }
+  }
+
+  input[type=date] {
+    max-width: 180px;
+  }
+
+  // override default site width/max-width for editable-champ form (Usager form)
+  .editable-champ {
+    input {
+      max-width: none;
+
+      @media (min-width: $two-columns-breakpoint) {
+        &:not([size]) {
+          &[type='date'],
+          &[type='tel'],
+          &[type='number'] {
+            width: 33.33%;
+          }
+
+          &[type='email'] {
+            width: 66.67%;
+          }
+        }
+      }
+    }
   }
 
   input[type=checkbox],
@@ -263,10 +298,6 @@
     margin-bottom: $default-fields-spacer;
   }
 
-  input[type=date] {
-    max-width: 180px;
-  }
-
   select {
     // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
     -webkit-appearance: none;
@@ -297,19 +328,21 @@
     }
   }
 
-
   [data-reach-combobox-input] {
-    width: 100%;
-    min-width: 50%;
-    max-width: 100%;
     min-height: 62px;
     border-radius: 4px;
     border: solid 1px $border-grey;
     padding: $default-padding;
-  }
 
-  [data-reach-combobox-input]:focus {
+    &:not([class^='width-']) {
-    border-color: $blue-france-500;
+      width: 100%;
+      min-width: 50%;
+      max-width: 100%;
+    }
+
+    &:focus {
+      border-color: $blue-france-500;
+    }
   }
 
   [data-reach-combobox-token-list] {
@@ -358,13 +391,8 @@
   .dgfip-inputs,
   .pole-emploi-inputs,
   .mesri-inputs {
-    display: flex;
+    label {
-    flex-wrap: wrap;
+      font-weight: 400;
-    justify-content: space-between;
-    max-width: 700px;
-
-    input {
-      width: inherit;
     }
   }
 

app/assets/stylesheets/invites_form.scss

@@ -25,7 +25,6 @@
   }
 
   input[type=email] {
-    width: auto;
     margin-bottom: $default-spacer;
   }
 

app/assets/stylesheets/utils.scss

@@ -73,10 +73,32 @@
 // sizing
 .width-100 {
   width: 100%;
+
+  @media (max-width: $two-columns-breakpoint) {
+    &-mobile {
+      width: 100%;
+    }
+  }
 }
 
 .width-33 {
   width: 33.33%;
+
+  @media (min-width: $two-columns-breakpoint) {
+    &-desktop {
+      width: 33.33%;
+    }
+  }
+}
+
+.width-66 {
+  width: 66.67%;
+
+  @media (min-width: $two-columns-breakpoint) {
+    &-desktop {
+      width: 66.67%;
+    }
+  }
 }
 
 // who known

app/javascript/components/ComboCommunesSearch.tsx

@@ -54,8 +54,12 @@ const [placeholderDepartement, placeholderCommune] =
 
 export default function ComboCommunesSearch({
   id,
+  classNameDepartement,
   ...props
-}: ComboSearchProps<CommuneResult> & { id: string }) {
+}: ComboSearchProps<CommuneResult> & {
+  id: string;
+  classNameDepartement?: string;
+}) {
   const group = groupId(id);
   const [departementValue, setDepartementValue] = useHiddenField(
     group,
@@ -84,6 +88,7 @@ export default function ComboCommunesSearch({
           placeholder={placeholderDepartement}
           addForeignDepartement={false}
           value={departementValue}
+          className={classNameDepartement}
           onChange={(_, result) => {
             setDepartementValue(result?.nom ?? '');
             setCodeDepartement(result?.code ?? '');

app/views/shared/dossiers/editable_champs/_cnaf.html.haml

@@ -4,13 +4,13 @@
     %p.notice= t('.numero_allocataire_notice')
     = form.text_field :numero_allocataire,
       required: champ.mandatory?,
-      size: 7,
+      aria: { describedby: champ.describedby_id },
-      aria: { describedby: champ.describedby_id }
+      class: "width-33-desktop"
 
   %div
     = form.label :code_postal, t('.code_postal_label')
     %p.notice= t('.code_postal_notice')
     = form.text_field :code_postal,
-      size: 5,
       required: champ.mandatory?,
-      aria: { describedby: champ.describedby_id }
+      aria: { describedby: champ.describedby_id },
+      class: "width-33-desktop"

app/views/shared/dossiers/editable_champs/_communes.html.haml

@@ -5,4 +5,6 @@
 = react_component("ComboCommunesSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  classNameDepartement: "width-33-desktop width-100-mobile",
+  className: "width-66-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_date.html.haml

@@ -3,4 +3,5 @@
   aria: { describedby: champ.describedby_id },
   value: champ.value,
   required: champ.mandatory?,
-  placeholder: 'aaaa-mm-jj'
+  placeholder: 'aaaa-mm-jj',
+  class: "width-33-desktop"

app/views/shared/dossiers/editable_champs/_decimal_number.html.haml

@@ -2,5 +2,5 @@
   id: champ.input_id,
   aria: { describedby: champ.describedby_id },
   step: :any,
-  placeholder: champ.libelle,
+  placeholder: "3.14",
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_departements.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboDepartementsSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_dgfip.html.haml

@@ -4,13 +4,13 @@
     %p.notice= t('.numero_fiscal_notice')
     = form.text_field :numero_fiscal,
       required: champ.mandatory?,
-      size: 14,
+      aria: { describedby: champ.describedby_id },
-      aria: { describedby: champ.describedby_id }
+      class: "width-33-desktop"
 
   %div
     = form.label :reference_avis, t('.reference_avis_label')
     %p.notice= t('.reference_avis_notice')
     = form.text_field :reference_avis,
-      size: 14,
       required: champ.mandatory?,
-      aria: { describedby: champ.describedby_id }
+      aria: { describedby: champ.describedby_id },
+      class: "width-33-desktop"

app/views/shared/dossiers/editable_champs/_dossier_link.html.haml

@@ -5,7 +5,8 @@
     placeholder: "Numéro de dossier",
     autocomplete: 'off',
     required: champ.mandatory?,
-    data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) }
+    data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) },
+    class: "width-33-desktop"
 
   .help-block{ id: dom_id(champ, :help_block) }
     = render partial: 'shared/champs/dossier_link/help_block', locals: { id: champ.value }

app/views/shared/dossiers/editable_champs/_iban.html.haml

@@ -3,4 +3,6 @@
   placeholder: t(".placeholder"),
   required: champ.mandatory?,
   aria: { describedby: champ.describedby_id },
-  data: { controller: 'iban-input'}
+  data: { controller: 'iban-input'},
+  class: "width-66-desktop",
+  maxlength: 34 + 9 # count space separator of 4 digits-groups

app/views/shared/dossiers/editable_champs/_integer_number.html.haml

@@ -1,5 +1,5 @@
 = form.number_field :value,
   id: champ.input_id,
   aria: { describedby: champ.describedby_id },
-  placeholder: champ.libelle,
+  placeholder: 5,
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_mesri.html.haml

@@ -4,4 +4,6 @@
     %p.notice= t('.ine_notice')
     = form.text_field :ine,
       required: champ.mandatory?,
-      aria: { describedby: champ.describedby_id }
+      aria: { describedby: champ.describedby_id },
+      class: "width-33-desktop"
+

app/views/shared/dossiers/editable_champs/_pays.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboPaysSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_pole_emploi.html.haml

@@ -1,7 +1,8 @@
-.pole_emploi-inputs
+.pole-emploi-inputs
   %div
     = form.label :identifiant, t('.identifiant_label')
     %p.notice= t('.identifiant_notice')
     = form.text_field :identifiant,
       required: champ.mandatory?,
-      aria: { describedby: champ.describedby_id }
+      aria: { describedby: champ.describedby_id },
+      class: "width-33-desktop"

app/views/shared/dossiers/editable_champs/_regions.html.haml

@@ -3,4 +3,5 @@
 = react_component("ComboRegionsSearch",
   required: champ.mandatory?,
   id: champ.input_id,
+  className: "width-33-desktop width-100-mobile",
   describedby: champ.describedby_id)

app/views/shared/dossiers/editable_champs/_siret.html.haml

@@ -5,7 +5,9 @@
   data: { controller: 'turbo-input', turbo_input_url_value: champs_siret_path(champ.id) },
   required: champ.mandatory?,
   pattern: "[0-9]{14}",
-  title: t(".title")
+  title: t(".title"),
+  class: "width-33-desktop",
+  maxlength: 14
 .spinner.right.hidden
 .siret-info{ id: dom_id(champ, :siret_info) }
   - if champ.etablissement.present?

app/views/shared/dossiers/editable_champs/_text.html.haml

@@ -1,5 +1,4 @@
 = form.text_field :value,
   id: champ.input_id,
-  placeholder: t(".placeholder"),
   required: champ.mandatory?,
   aria: { describedby: champ.describedby_id }

app/views/shared/dossiers/editable_champs/_textarea.html.haml

@@ -3,5 +3,4 @@
   aria: { describedby: champ.describedby_id },
   rows: 6,
   required: champ.mandatory?,
-  value: html_to_string(champ.value),
+  value: html_to_string(champ.value)
-  placeholder: t(".placeholder")

config/locales/shared.en.yml

@@ -27,10 +27,6 @@ en:
         siret:
           placeholder: "50000123456789"
           title: "The SIRET number must have exactly 14 digits"
-        text:
-          placeholder: "Your answer"
-        textarea:
-          placeholder: "Write your answer here"
       header:
         expires_at:
           brouillon: "Expires on %{date} (%{duree_conservation_totale} months after this file was created)"

config/locales/shared.fr.yml

@@ -27,10 +27,6 @@ fr:
         siret:
           placeholder: "50000123456789"
           title: "Le numéro de SIRET doit comporter exactement 14 chiffres"
-        text:
-          placeholder: "Votre réponse"
-        textarea:
-          placeholder: "Rédigez ici votre réponse"
       header:
         expires_at:
           brouillon: "Expirera le %{date} (%{duree_conservation_totale} mois après la création du dossier)"