Checkbox: Add documentation and remove not required function (#10007)

* Iintialize tristate
* Control the check_box.check_state always using the set_check_state function
Reason: Otherwise the tristate is not handled properly
* Handle tristate directly in checkbox
* fix documentation

Author: Murmele

ui-libraries/material/docs/src/content/docs/components/Checkboxes/check_box.mdx

@@ -27,7 +27,7 @@ A `CheckBox` is a control that allows users to select one or more options from a
 
 ### check-state
 <SlintProperty propName="check-state" typeName="enum" enumName="CheckState" propertyVisibility="in-out">
-The current state of the checkbox. Can be `unchecked`, `partially-checked`, or `checked`.
+The current state of the checkbox. Can be `unchecked`, `partially-checked`, or `checked`. If the state is `partially-checked`, the tristate property is set to true.
 
 ```slint no-test "check-state: CheckState.checked;"
 CheckBox {
@@ -60,7 +60,4 @@ Invoked when the checkbox state changes.
 ## Functions
 
 ### toggle()
-Toggles the checkbox state. In tristate mode, cycles through unchecked → partially checked → checked → unchecked.
-
-### set-check-state(check-state: CheckState)
-Sets the checkbox state. If the state is `partially-checked`, the tristate property is set to true.
+Toggles the checkbox state. In tristate mode, cycles through unchecked → partially checked → checked → unchecked.

ui-libraries/material/docs/src/content/docs/components/Checkboxes/check_box_tile.mdx

@@ -28,7 +28,7 @@ A `CheckBoxTile` is a control that combines a text label with a `CheckBox`. See
 
 ### check-state
 <SlintProperty propName="check-state" typeName="enum" enumName="CheckState" propertyVisibility="in-out">
-The current state of the checkbox. Can be `unchecked`, `partially-checked`, or `checked`.
+The current state of the checkbox. Can be `unchecked`, `partially-checked`, or `checked`. If the state is `partially-checked`, the tristate property is set to true.
 
 ```slint no-test "check-state: CheckState.checked;"
 CheckBoxTile {
@@ -66,7 +66,4 @@ Invoked when the checkbox state changes.
 ## Functions
 
 ### toggle()
-Toggles the checkbox state. In tristate mode, cycles through unchecked → partially checked → checked → unchecked.
-
-### set-check-state(check-state: CheckState)
-Sets the checkbox state. If the state is `partially-checked`, the tristate property is set to true.
+Toggles the checkbox state. In tristate mode, cycles through unchecked → partially checked → checked → unchecked.

ui-libraries/material/src/ui/components/check_box.slint

@@ -35,6 +35,13 @@ export component CheckBox {
     accessible-action-default => { state_area.clicked(); }
     forward_focus: state_area;
 
+    init() => {
+        // Initialize tristate as well
+        if self.check_state == CheckState.partially-checked {
+            root.tristate = true;
+        }
+    }
+
     state_area := StateLayerArea {
         width: 100%;
         height: 100%;
@@ -71,6 +78,9 @@ export component CheckBox {
     }
 
     changed check_state => {
+        if self.check_state == CheckState.partially-checked {
+            root.tristate = true;
+        }
         root.checked_state_changed(root.check_state);
     }
 
@@ -84,10 +94,8 @@ export component CheckBox {
             root.check_state == CheckState.partially_checked ? CheckState.unchecked : CheckState.checked;
     }
 
+    // Keep for backward compatibility
     public function set_check_state(check_state: CheckState) {
-        if check_state == CheckState.partially-checked {
-            root.tristate = true;
-        }
         root.check_state = check_state;
     }
 
@@ -120,10 +128,15 @@ export component CheckBoxTile inherits ListTile {
         }
     }
 
+    // When clicked on this, but not on the checkbox
+    // apply the click on the checkbox manually
+    // So the user can click anywhere in the tile to toggle
+    // the checkbox
     clicked => {
         check_box.toggle();
     }
 
+    // Keep function for backward compatibility
     public function set_check_state(check-state: CheckState) {
         check_box.set_check_state(check_state);
     }