feat(textarea): autoresize textareas

This commit is contained in:
Paul Chavard 2024-03-07 12:06:00 +01:00
parent b3d2ca1486
commit b02ba1e909
11 changed files with 54 additions and 17 deletions

View file

@ -683,3 +683,15 @@ textarea::placeholder {
}
}
}
.resize-none {
resize: none;
}
.resize-x {
resize: horizontal;
}
.resize-y {
resize: vertical;
}

View file

@ -9,12 +9,13 @@ class Dsfr::InputComponent < ApplicationComponent
renders_one :describedby
renders_one :label
def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true)
def initialize(form:, attribute:, input_type: :text_field, opts: {}, required: true, autoresize: true)
@form = form
@attribute = attribute
@input_type = input_type
@opts = opts
@required = required
@autoresize = autoresize
end
def dsfr_champ_container
@ -67,6 +68,10 @@ class Dsfr::InputComponent < ApplicationComponent
@input_type == :email_field
end
def autoresize?
@input_type == :text_area && @autoresize
end
def required?
@required
end

View file

@ -92,6 +92,11 @@ module Dsfr
'email-input-target': 'input'
})
end
if autoresize?
@opts.deep_merge!(data: { controller: 'autoresize' })
end
@opts
end
@ -119,6 +124,10 @@ module Dsfr
false
end
def autoresize?
false
end
def hint?
return true if get_slot(:hint).present?

View file

@ -1,4 +1,4 @@
~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value)))
~ @form.text_area(:value, input_opts(id: @champ.input_id, aria: { describedby: @champ.describedby_id }, rows: 6, required: @champ.required?, value: html_to_string(@champ.value), data: { controller: 'autoresize' }))
- if @champ.character_limit_info?
%p.fr-info-text

View file

@ -62,7 +62,7 @@
- if !type_de_champ.header_section? && !type_de_champ.titre_identite?
.cell.fr-mt-1w
= form.label :description, "Description du champ (optionnel)", for: dom_id(type_de_champ, :description)
= form.text_area :description, class: 'fr-input small-margin small width-100', rows: 3, id: dom_id(type_de_champ, :description)
= form.text_area :description, class: 'fr-input small-margin small width-100 resize-y', rows: 3, id: dom_id(type_de_champ, :description)
- if type_de_champ.header_section?
.cell.fr-mt-1w
= render TypesDeChampEditor::HeaderSectionComponent.new(form: form, tdc: type_de_champ, upper_tdcs: @upper_coordinates.map(&:type_de_champ))

View file

@ -0,0 +1,18 @@
import { ApplicationController } from './application_controller';
import { attach } from '@frsource/autoresize-textarea';
import { isTextAreaElement } from '@coldwired/utils';
export class AutoresizeController extends ApplicationController {
#detach?: () => void;
connect(): void {
if (isTextAreaElement(this.element)) {
this.#detach = attach(this.element)?.detach;
this.element.classList.add('resize-none');
}
}
disconnect(): void {
this.#detach?.();
this.element.classList.remove('resize-none');
}
}

View file

@ -1,6 +0,0 @@
en:
activerecord:
attributes:
champs/textarea_champ:
hints:
value: "Resize the field to enter more lines"

View file

@ -1,6 +0,0 @@
fr:
activerecord:
attributes:
champs/textarea_champ:
hints:
value: "Redimensionnez le champ pour saisir plus de lignes"

View file

@ -3,6 +3,7 @@
"@coldwired/actions": "^0.11.2",
"@coldwired/turbo-stream": "^0.11.1",
"@coldwired/utils": "^0.11.4",
"@frsource/autoresize-textarea": "^2.0.53",
"@gouvfr/dsfr": "^1.10.1",
"@graphiql/plugin-explorer": "^0.3.4",
"@graphiql/toolkit": "^0.9.1",

View file

@ -128,9 +128,8 @@ describe 'As an administrateur, I want to manage the procedures attestation',
attestation.reload.logo.attached? && attestation.signature.attached? && !attestation.official_layout?
}
# footer is rows-limited
fill_in "Contenu du pied de page", with: ["line1", "line2", "line3", "line4"].join("\n")
expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3line4")
expect(page).to have_field("Contenu du pied de page", with: "line1\nline2\nline3\nline4")
end
context "tag in error" do

View file

@ -1221,6 +1221,11 @@
dependencies:
"@floating-ui/dom" "^1.3.0"
"@frsource/autoresize-textarea@^2.0.53":
version "2.0.53"
resolved "https://registry.yarnpkg.com/@frsource/autoresize-textarea/-/autoresize-textarea-2.0.53.tgz#10228d23623f201c4f0aad9321118a3fb04b6462"
integrity sha512-q8UxpjcfCE8ywICfxpimkYhMVg44vaAFvRkN1qLJ/M23upjq6PdZaHpuOEpbcD4EeV9VJNUG1fr5Dio8TPMs9w==
"@gouvfr/dsfr@^1.10.1":
version "1.10.1"
resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.10.1.tgz#a8470374d1f52d4195bd7c3c2b218fe3aaddac90"