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

UX/input sizes
2022-07-18 09:56:28 +02:00 · 2022-07-18 09:56:28 +02:00 · 5e1fc855e3
commit 5e1fc855e3
parent ee545a82ca 1c96ca59dd
22 changed files with 113 additions and 55 deletions
--- a/app/assets/stylesheets/forms.scss
+++ b/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],
-  input[type=password],
-  input[type=number],
-  input[type=tel], {
-    max-width: 500px;
+  @media (min-width: $two-columns-breakpoint) {
+    input[type=email],
+    input[type=password],
+    input[type=number],
+    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 {
-    border-color: $blue-france-500;
+    &:not([class^='width-']) {
+      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;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    max-width: 700px;
-
-    input {
-      width: inherit;
+    label {
+      font-weight: 400;
    }
  }

--- a/app/assets/stylesheets/invites_form.scss
+++ b/app/assets/stylesheets/invites_form.scss
@ -25,7 +25,6 @@
  }

  input[type=email] {
-    width: auto;
    margin-bottom: $default-spacer;
  }

--- a/app/assets/stylesheets/utils.scss
+++ b/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
--- a/app/javascript/components/ComboCommunesSearch.tsx
+++ b/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 ?? '');
--- a/app/views/shared/dossiers/editable_champs/_cnaf.html.haml
+++ b/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"
--- a/app/views/shared/dossiers/editable_champs/_communes.html.haml
+++ b/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)
--- a/app/views/shared/dossiers/editable_champs/_date.html.haml
+++ b/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"
--- a/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml
+++ b/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?
--- a/app/views/shared/dossiers/editable_champs/_departements.html.haml
+++ b/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)
--- a/app/views/shared/dossiers/editable_champs/_dgfip.html.haml
+++ b/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"
--- a/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml
+++ b/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 }
--- a/app/views/shared/dossiers/editable_champs/_iban.html.haml
+++ b/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
--- a/app/views/shared/dossiers/editable_champs/_integer_number.html.haml
+++ b/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?
--- a/app/views/shared/dossiers/editable_champs/_mesri.html.haml
+++ b/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"
+
--- a/app/views/shared/dossiers/editable_champs/_pays.html.haml
+++ b/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)
--- a/app/views/shared/dossiers/editable_champs/_pole_emploi.html.haml
+++ b/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"
--- a/app/views/shared/dossiers/editable_champs/_regions.html.haml
+++ b/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)
--- a/app/views/shared/dossiers/editable_champs/_siret.html.haml
+++ b/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?
--- a/app/views/shared/dossiers/editable_champs/_text.html.haml
+++ b/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 }
--- a/app/views/shared/dossiers/editable_champs/_textarea.html.haml
+++ b/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),
-  placeholder: t(".placeholder")
+  value: html_to_string(champ.value)
--- a/config/locales/shared.en.yml
+++ b/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)"
--- a/config/locales/shared.fr.yml
+++ b/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)"