scss: forms: add order & alignment options for buttons (#31397)

help/fr/misc-scss.page

@@ -526,6 +526,18 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   libellé.</p></td>
   <td><p><var>bottom</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$buttons-order</code></p></td>
+  <td><p>Ordre particulier des boutons. Indiquer les boutons (<code>submit</code>,<code>cancel</code>, <code>previous</code>) dans l'ordre souhaité séparé par des vigules. Ajouter l'option <code>(grow)</code> après l'identifiant d'un bouton va pousser le⋅s bouton⋅s suivant⋅s sur la droite (ex: <code>previous, cancel (grow), submit</code>).</p>
+  </td>
+  <td><p><var>null</var></p></td>
+ </tr>
+ <tr>
+  <td><p><code>$buttons-alignment</code></p></td>
+  <td><p>Alignement des boutons. Toutes valeurs CSS de <code>justify-content</code></p>
+  </td>
+  <td><p><var>null</var></p></td>
+ </tr>
 </table>
 </section>
 

static/includes/_forms.scss

@@ -31,6 +31,15 @@ $widget-unique-checkbox-position: bottom !default;  // also possible: left
 //  light: light bottom border, no other border.
 $form-style: classic !default;
 
+// buttons orders and alignment
+// work only for wcs forms
+// order :
+//	3 buttons : submit (form validation or next page), cancel, previous;
+// 	put button in the desired order (ex: previous, submit, cancel);
+// 	optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
+$buttons-order: null !default;
+$buttons-alignment: null !default; // any flexbox justify-content value;
+
 input, select, button, textarea {
 	font-size: 100%;
 	font-family: $font-family;
@@ -533,3 +542,35 @@ div.select2-search {
 		}
 	}
 }
+
+// Buttons order & alignment configuration
+@if $buttons-order or $buttons-alignment {
+	div.buttons {
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		-ms-flex-pack: $buttons-alignment;
+		justify-content: $buttons-alignment;
+
+		@each $btn, $grow in $buttons-order {
+			$i: index($buttons-order, $btn);
+			@if $grow {
+				$i: index($buttons-order, $btn $grow);
+			}
+
+			.#{$btn}-button {
+				-ms-flex-order: $i;
+				order: $i;
+				@if ($grow == 'grow') {
+					-ms-flex-positive: 1;
+					flex-grow: 1;
+				}
+	 		}
+		}
+		// always hidden, exclude to flex-child
+		.savedraft-button {
+			display: none;
+		}
+	}
+}