Commit 8dca209a authored by Anne Cavalier's avatar Anne Cavalier

Review forms: fragmentation plus fine de forms-plus entre required et...

Review forms: fragmentation plus fine de forms-plus entre required et fieldset-discrete, consolidation de la documentation et des exemples
parent bb5d2b08
......@@ -16,6 +16,11 @@ modules/collapse :
- modification du picto
- définitions de variables (gestion de la valeur, de la couleur, de la taille et du positionnement du picto, paddings du bouton et de la zone dépliable)
modules/forms
- regroupement de tous les modules dérivés et dépendants de forms dans modules/forms avec liste des partials à inclure en fonction du projet
- mise à jour des fragments twig
- mise à jour de la doc
v0.3
--------------------------------------------------------------------
......
......@@ -88,8 +88,10 @@ $form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
// styles
@import "style-forms";
@import "style-forms-inline";
@import "style-forms-size";
@import "style-forms-error";
@import "style-forms-plus";
@import "style-forms-required";
@import "style-forms-fieldset-discrete";
@import "style-forms-inline";
@import "style-forms-input-group";
@import "style-forms-size";
// Styles ajoutés par scampi
// Styles pour supprimer la présentation par défaut d'un fieldset
//
.fieldset-discrete {
......@@ -6,7 +6,3 @@
padding: 0;
}
.symbol-required {
color: $symbol-required;
}
// Styles pour la mention de champ obligatoire
//
.symbol-required {
color: $symbol-required;
}
......@@ -4,19 +4,26 @@
Présentation
---------------------------------------------------------------------
Le sous-module `forms-error` gere erreurs dans les forms.
Le sous-module forms-error fait partie du module <a href="forms.html">forms</a>.
Le modèle html et les styles permettent de restituer au mieux les erreurs à l'utilisateur quel que soit son contexte de navigation.
Utilisation
Accessibilité
---------------------------------------------------------------------
...
Le lien entre le champ erroné et le message d'explication est fait par l'attribut aria-describedby qui prend pour valeur l'id du message d'erreur.
Utilisation
---------------------------------------------------------------------
L’affichage en contexte des erreurs de formulaire se fait en plaçant une class `has-error` sur la div englobant le label et l’input et en liant le message d'erreur avec un attribut aria-describedby sur l'input concerné.
Exemple
---------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms-error.scss`.
```html
<h3>Champ avec erreur</h3>
......
# Forms Plus
# Forms fieldset-discrete
Présentation
---------------------------------------------------------------------
Le sous-module `forms-plus` de Scampi contient les enrichissement Scampi.
Le sous-module `forms-fieldset-discrete.scss` permet d'afficher un fieldset sans les bordures ni les paddings. Il fait partie du module <a href="forms.html">forms</a>.
Ajouts Scampi
Utilisation
---------------------------------------------------------------------
La classe `.fieldset-discrete` cache les bordures du fieldset.
Donner la class `.fieldset-discrete` à l'élément fieldset.
La variable `.$symbol-required` définit une couleur au symbole utilisé pour indiquer les champs obligatoires ; la mise en oeuvre se fait en appliquant la class `.symbol-required` sur le span qui contient l’astérisque.
L’affichage en contexte des erreurs de formulaire se fait en plaçant une class `has-error` sur la div englobant le label et l’input et l’erreur liée avec un attribut aria-describedby.
Exemple
---------------------------------------------------------------------
exemple :
Styles appliqués par le fichier `forms/_style-forms-fieldset-discrete.scss`.
```html
<form>
<p>Les champs marqués d’un <span class="symbol-required">* </span>sont obligatoires.</p>
<fieldset class="form-group fieldset-discrete">
<legend>Choix multiples avec fieldset non apparent (.fieldset-discrete)</legend>
......@@ -44,20 +41,5 @@ exemple :
</label>
</div>
</fieldset>
<div class="form-check">
<label for="form-check-input" class="form-check-label">
<input type="checkbox" class="form-check-input" id="form-check-input" required>
<span class="symbol-required">* </span>J’accepte les <a href="#">conditions générales d’utilisation</a>
</label>
</div>
<div class="form-group has-error">
<p id="loremOnError" class="error-desc">Le champ <em>Lorem ipsum</em> est obligatoire.</p>
<label for="lorem">Lorem ipsum&nbsp;<span class="symbol-required">*</span></label>
<input aria-describedby="loremOnError" type="text" id="lorem" class="form-control" required aria-required="true">
</div>
</form>
```
......@@ -4,19 +4,19 @@
Présentation
---------------------------------------------------------------------
Le sous-module `forms-inline` gere les forms en inline.
Le sous-module `forms-inline` permet d'afficher des éléments côte à côte. Il fait partie du module <a href="forms.html">forms</a>.
Utilisation
---------------------------------------------------------------------
...
Placer la class `form-inline` sur le bloc contenant les éléments à distribuer en ligne.
Exemple
---------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms-inline.scss`.
```html
<h3>Inline forms</h3>
<div class="form-inline">
......
# Input-group
# Forms-input-group
Présentation
--------------------------------------------------------------------
Le module input-group de Scampi est une copie quasi conforme de son homologue de Bootstrap. Il permet de réunir visuellement les éléments de formulaire et boutons.
Le sous-module `forms-input-group` permet de réunir visuellement les éléments de formulaire. Il fait partie du module <a href="forms.html">forms</a>. On l'utilise par exemple pour coller une loupe à un champ de recherche.
Dépendances
--------------------------------------------------------------------
Ce module nécessite l’utilisation des modules buttons et form.
À noter : forms-input-group nécessite l’utilisation du module buttons.
Utilisation
--------------------------------------------------------------------
La présentation des éléments de formulaire passe presque uniquement par la personnalisation des variables et l’ajout de classes sur les éléments html.
Nous vous invitons à vous référer à la documentation spécifique de [Bootstrap concernant les formulaires](http://v4-alpha.getbootstrap.com/components/input-group/).
Donner la class `input-group` au bloc qui contient l'input et le bouton à coller.
Exemples
--------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms-input-group.scss`.
```html
<form>
<div class="input-group">
<p class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
</p>
<div class="input-group">
<p class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<br>
</p>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
......@@ -51,7 +47,6 @@ Exemples
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
......@@ -62,7 +57,6 @@ Exemples
</div>
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
......@@ -78,8 +72,6 @@ Exemples
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
......@@ -87,8 +79,6 @@ Exemples
</div>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<div class="input-group-prepend">
......@@ -97,7 +87,6 @@ Exemples
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
......@@ -108,7 +97,6 @@ Exemples
</div>
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
......
# Forms-required
Présentation
---------------------------------------------------------------------
Le sous-module `forms-required` permet d'indiquer à un utilisateur qu'un champ est requis. Il fait partie du module <a href="forms.html">forms</a>.
Utilisation
---------------------------------------------------------------------
La variable `$symbol-required` définit la couleur du symbole utilisé pour indiquer les champs obligatoires ; la mise en œuvre se fait en appliquant la class `.symbol-required` sur le span qui contient l’astérisque.
À noter : une phrase expliquant la signification du symbole et placée en début de formulaire est fortement recommandée.
Exemple
---------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms-required.scss`.
```html
<form>
<p>Les champs marqués d’un <span class="symbol-required">* </span>sont obligatoires.</p>
<div class="form-check">
<label for="form-check-input" class="form-check-label">
<input type="checkbox" class="form-check-input" id="form-check-input" required>
<span class="symbol-required">* </span>J’accepte les <a href="#">conditions générales d’utilisation</a>
</label>
</div>
</form>
```
......@@ -4,19 +4,22 @@
Présentation
---------------------------------------------------------------------
Le sous-module `forms-size` gere les tailles.
Le sous-module `forms-size.scss` permet d'utiliser des variations de taille d'éléments de formulaires. Il fait partie du module <a href="forms.html">forms</a>.
Utilisation
---------------------------------------------------------------------
...
Ajouter la class produisant la présentation recherchée aux attributs des éléments.
Exemple
---------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms.scss`.
```html
<div class="form-group">
<label for="input_lg">Input grande taille (.form-control-lg)</label>
......
......@@ -4,28 +4,44 @@
Présentation
---------------------------------------------------------------------
Le module forms de Scampi reprend l’essentiel du code de Bootstrap 4 et l'enrichi de quelques fonctionnalités.
Le module forms de Scampi reprend l’essentiel du code du module [forms de Bootstrap 4](https://getbootstrap.com/docs/4.1/components/forms/) et l'enrichit.
Ce qui n’est pas repris :
- form-grid (pas de grille dans scampi)
- form-grid (Scampi n'embarque pas de système de grille pour laisser le choix à l'utilisateur de son système préféré)
- form-plaintext
- custom-form
Le module `input-group` devient un sous-module de `forms`.
Ce qui est ajouté :
- forms-required : pour afficher la mention d'un champ obligatoire
- forms-fieldset-discrete : pour supprimer les présentations standards des fieldsets
- forms-error : pour afficher les erreurs en contexte
Le module est composé d'un fichier maître (`_forms.scss`) dans lequel sont définies toutes les variables et où l'on peut commenter ou décommenter l'import de styles complémentaires selon les besoins du projet. En tout état de cause le partial `_styles-forms.scss` est indispensable.
Utilisation
---------------------------------------------------------------------
La présentation des éléments de formulaire passe presque uniquement par la personnalisation des variables et l’ajout de classes sur les éléments html.
Nous vous invitons à vous référer à la documentation spécifique de [Bootstrap concernant les formulaires](https://getbootstrap.com/docs/4.1/components/forms/).
Documentation des feuilles de style complétant `_styles-forms.scss` :
<ul>
<li><a href="forms-error.html">forms-error</a> : nos ajouts au module de Bootstrap pour l'affichage des messages d'erreur globaux ou en contexte</li>
<li><a href="forms-inline.html">forms-inline</a> : affichage de champs en ligne</li>
<li><a href="forms-input-group.html">forms-input-group</a> : affichage de champs groupés</li>
<li><a href="forms-required.html">forms-required</a> : ajout au module de Bootstrap pour afficher la mention d'un champ obligatoire</li>
<li><a href="forms-fieldset-discrete.html">fieldset-discrete</a> : ajout au module de Bootstrap pour afficher un fieldset sans bordures</li>
<li><a href="forms-size.html">forms-size</a> : mise à dispo de variations des tailles</li>
</ul>
Exemple
Exemples pour les éléments de base
---------------------------------------------------------------------
Styles appliqués par le fichier `forms/_style-forms.scss`.
### Input text
```html
<div class="form-group">
......@@ -78,8 +94,6 @@ Exemple
</div>
```
### Select multiple
```html
<div class="form-group">
......@@ -94,8 +108,6 @@ Exemple
</div>
```
### Checkboxes
```html
<fieldset class="form-group">
......@@ -145,7 +157,6 @@ Exemple
</fieldset>
```
### Radio
```html
<fieldset class="form-group">
......@@ -227,7 +238,6 @@ Exemple
</div>
```
### Form-check
```html
<div class="form-group form-check">
......@@ -236,7 +246,6 @@ Exemple
</div>
```
### Help text
```html
<div class="form-group">
......@@ -249,7 +258,7 @@ Exemple
```
### Lecture seule
L’attribut `readonly` empeche la modification du champs par l’utilisateur.
L’attribut `readonly` empeche la modification du champ par l’utilisateur.
Si une valeur doit être affichée, il faut la placer dans l’attribut `value`.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment