Document the stripped styling of `<button>` elements
authorAlexander Ebert <ebert@woltlab.com>
Wed, 17 May 2023 10:31:46 +0000 (12:31 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Wed, 17 May 2023 10:31:46 +0000 (12:31 +0200)
Closes #315

docs/migration/wsc55/templates.md

index 30ab0c4508fc02fd29d61b6ec5cb33829725069a..f58a2ce71fb0155480625d5be9f1d9ffcb91acbc 100644 (file)
@@ -30,3 +30,26 @@ In the process, the integration of comments via templates has been significantly
 An example for the migration of existing template integrations can be found [here](https://github.com/WoltLab/WCF/commit/b1d5f7cc6b81ae7fd938603bb20a3a454a531a96#diff-3419ed2f17fa84a70caf0d99511d5ac2a7704c62f24cc7042984d7a9932525ce).
 
 See [WoltLab/WCF#5210](https://github.com/WoltLab/WCF/pull/5210) for more details.
+
+## The `<button>` Element
+
+The styling of the `<button>` has been completely removed in WoltLab Suite 6.0 and the element has no longer any kind of styling.
+This change allows the element to be used in a lot of places that previously had to use an `a[href="#"][role="button"]` to replicate the same behavior.
+
+If you have previously used the button element as an actual button, you should add the CSS class `.button` to it.
+
+It is recommended to identify an uses of the anchor element to replicate a native button and to use the proper `<button>` element from now on.
+Buttons will implicitly submit a form, therefore you should set the `type` attribute to explicitly define its behavior.
+
+```html
+<form method="post">
+    <!-- These two buttons will submit the form. -->
+    <button>Button 1</button>
+    <button type="submit">Button 2</button>
+
+    <!-- Clicking this button does nothing on its own. -->
+    <button type="button">Button 3</button>
+</form>
+```
+
+See [WoltLab/WCF#4834](https://github.com/WoltLab/WCF/issues/4834) for more details.