UI: Detail how implicit prop are named for action groups (#1514)

* UI: Detail how implicit prop are named for action groups

Add CSS-Tricks almanac link, a good CSS reference.

Signed-off-by: Yannick Schaus <github@schaus.net>

* Remove duplicated paragraph

Signed-off-by: Yannick Schaus <github@schaus.net>

* Fix errors, non-existent NUMBER prop type

Signed-off-by: Yannick Schaus <github@schaus.net>

ui/building-pages.md

@@ -74,7 +74,7 @@ props:
      context: item
      description: Choose an item for this prop
    - name: prop3
-     type: NUMBER
+     type: INTEGER
      advanced: true
      ...
 tags: ["tag1", "tag2"]
@@ -236,6 +236,60 @@ props:
     actionPropsParameterGroup: myaction
 ```
 
+<details class="custom-block details">
+<summary>How the implicit props are named</summary>
+
+The property names will be in the following format: `{groupName}_{actionPropName}`
+
+The list of `actionPropNames` can be found in the Component Reference (they’re always the same), for instance in the [oh-button](./components/oh-button.html#action) reference.
+
+:warning: The `groupName` prefix is the name of the parameter group, but occurrences of the word "action" will be removed from it.
+If you name the parameter group `action` there won't be a prefix anymore so the underscore will be removed too.
+
+Examples:
+
+| Group Name | Prop Name Examples |
+|------------|--------------------|
+| action     | `action, actionItem, actionCommand, actionCommandAlt` |
+| tapAction  | `tap_action, tap_actionItem, tap_actionCommand, tap_actionCommandAlt` |
+| sceneOne   | `sceneOne_action, sceneOne_actionItem, sceneOne_actionCommand, sceneOne_actionCommandAlt` |
+
+You can dump the `props` objects in JSON to verify the names like in the following example (or just use `=JSON.stringify(props)` wherever you can display text in your widget):
+
+```yaml
+uid: dump_props_as_json
+props:
+  parameterGroups:
+    - name: sceneOne
+      context: action
+      label: Scene One
+    - name: sceneTwo
+      context: action
+      label: Scene Two
+    - name: tapAction
+      context: action
+      label: Tap Action
+    - name: action
+      context: action
+      label: Tap Action
+  parameters:
+    - name: prop1
+      label: Prop 1
+      type: TEXT
+      description: A text prop
+tags: []
+component: f7-row
+config:
+  tag: pre
+slots:
+  default:
+    - component: Label
+      config:
+        text: =JSON.stringify(props, null, 4)
+```
+
+</details>
+
 :::
 
 ## Variables
@@ -313,7 +367,8 @@ slots:
 
 Applying CSS properties like `border-color` directly on components is sometimes enough; but contrary to CSS variables like `--f7-button-border-color` which will be inherited to descendants in the tree, either by your own components or by f7 components (or their OH derivatives) that make use of these variables, they will only work on the element where you put the style configuration.
 
-There are hundreds of [CSS properties](https://www.w3schools.com/cssref/) you can use to design your widgets. Use the resources at [W3Schools](https://www.w3schools.com/css/default.asp) to learn more about CSS techniques - these examples will provide code in HTML and classes definitions but you can most of the time adapt them for usage in components' YAML definitions.
+There are hundreds of [CSS properties](https://www.w3schools.com/cssref/) you can use to design your widgets.
+Use the resources at [W3Schools](https://www.w3schools.com/css/default.asp) or the [CSS-Tricks Properties Almanac](https://css-tricks.com/almanac/properties/) to learn more about CSS properties and techniques - these resources will provide code in HTML and classes definitions but you can most of the time adapt them for usage in components' YAML definitions.
 
 While the Layout components (`oh-block`, `oh-grid-row`, `oh-grid-col`) can help you with the placement of your widgets, to lay out sub-components _within_ a widget, you shouldn't use them because they include design mode controls that you don't need.
 While can use their `f7-block`, `f7-row` and `f7-col` equivalents instead, in many cases this is still "overkill": consider applying directly the Flexbox or Grid properties to the components.