Docs/iAPI: Recommend kebab-case in data-wp-class (#62817)

* Recommend kebab-case in wp-class and remove outdated info about callback args

* Trigger actions again

Co-authored-by: luisherranz <[email protected]>
Co-authored-by: cbravobernal <[email protected]>

Author: luisherranz

docs/reference-guides/interactivity-api/api-reference.md

@@ -220,10 +220,36 @@ The `wp-class` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-class` directive references a callback to get its final boolean value, the callback receives the class name: `className`.
-
 The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute.
 
+It's important to note that when using the `wp-class` directive, it's recommended to use kebab-case for class names instead of camelCase. This is because HTML attributes are not case-sensitive, and HTML will treat `data-wp-class--isDark` the same as `data-wp-class--isdark` or `DATA-WP-CLASS--ISDARK`.
+
+So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-class--is-dark` instead of `data-wp-class--isDark`:
+
+```html
+<!-- Recommended -->
+<div data-wp-class--is-dark="context.isDarkMode">
+  <!-- ... -->
+</div>
+
+<!-- Not recommended -->
+<div data-wp-class--isDark="context.isDarkMode">
+  <!-- ... -->
+</div>
+```
+
+```css
+/* Recommended */
+.is-dark {
+  /* ... */
+}
+
+/* Not recommended */
+.isDark {
+  /* ... */
+}
+```
+
 ### `wp-style`
 
 This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.
@@ -256,8 +282,6 @@ The `wp-style` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-style` directive references a callback to get its final value, the callback receives the class style property: `css-property`.
-
 The value received by the directive is used to add or remove the style attribute with the associated CSS property:
 
 - If the value is `false`, the style attribute is removed: `<div>`