New widgets docs: TagsTable, CheckboxField

SUMMARY.md

@@ -151,6 +151,7 @@
     * [FileStorageUpload](app-development/widgets/controls/filestorageupload.md)
     * [Timeline](app-development/widgets/controls/timeline.md)
     * [Pagination](app-development/widgets/controls/pagination.md)
+    * [CheckboxField](app-development/widgets/controls/checkboxfield.md)
   * [Text Elements](app-development/widgets/text-elements/README.md)
     * [Text](app-development/widgets/text-elements/text.md)
     * [TextArea](app-development/widgets/text-elements/textarea.md)
@@ -239,6 +240,7 @@
     * [ClassesTable](app-development/widgets/tables/classestable.md)
     * [RandomSplitsTable](app-development/widgets/tables/randomsplitstable.md)
     * [FastTable](app-development/widgets/tables/fasttable.md)
+    * [TagsTable](app-development/widgets/tables/tagstable.md)
   * [Charts and Plots](app-development/widgets/charts-and-plots/README.md)
     * [LineChart](app-development/widgets/charts-and-plots/linechart.md)
     * [GridChart](app-development/widgets/charts-and-plots/gridchart.md)

app-development/widgets/controls/checkboxfield.md

@@ -0,0 +1,200 @@
+# CheckboxField
+
+`CheckboxField` is similar to a [Checkbox](../checkbox.md) widget, but it is used in a form field. It allows to specify a title and a description for the checkbox.
+
+### Function signature
+
+```python
+CheckboxField(
+    title="Title",
+    description="Description",
+    checked=False,
+    widget_id=None,
+)
+```
+
+<figure><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/79905215/dd0f609d-06cf-4b35-a79c-4cda345dfffb" alt=""><figcaption></figcaption></figure>
+
+### Parameters
+
+|  Parameters   |       Type       |             Description              |
+| :-----------: | :--------------: | :----------------------------------: |
+|    `title`    |      `str`       |            Checkbox title            |
+| `description` |      `str`       |         Checkbox description         |
+|   `checked`   | `Optional[bool]` | Return `True` if checkbox is checked |
+|  `widget_id`  | `Optional[str]`  |           ID of the widget           |
+
+### title
+
+Checkbox title.
+
+**type:** `str`
+
+### description
+
+Checkbox description.
+
+**type:** `str`
+
+```python
+checkbox = CheckboxField(
+    title="Title",
+    description="Description",
+)
+```
+
+<figure><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/79905215/dd0f609d-06cf-4b35-a79c-4cda345dfffb" alt=""><figcaption></figcaption></figure>
+
+
+### checked
+
+Whether Checkbox is checked.
+
+**type:** `bool`
+
+**default value:** `False`
+
+```python
+checkbox = CheckboxField(
+    title="Title",
+    description="Description",
+    checked=True,
+)
+```
+
+<figure><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/79905215/5bbfe4d6-260a-4077-b539-dc97a37c97b9" alt=""><figcaption></figcaption></figure>
+
+### widget_id
+
+ID of the widget.
+
+**type:** `str`
+
+**default value:** `None`
+
+### Methods and attributes
+
+| Attributes and Methods | Description                                                   |
+| :--------------------: | ------------------------------------------------------------- |
+|     `is_checked()`     | Return `True` if checked, else `False`.                       |
+|        `set()`       | Set `title`, `description`, and `checked` properties.         |
+|       `check()`       | Enable `checked` property.                                    |
+|      `uncheck()`      | Disable `checked` property.                                   |
+|    `@value_changed`    | Decorator function is handled when checkbox value is changed. |
+
+### is_checked()
+
+Return `True` if checked, else `False`.
+
+```python
+checkbox = CheckboxField(
+    title="Title",
+    description="Description",
+)
+checkbox.is_checked() # False
+```
+
+### set()
+
+Set `title`, `description`, and `checked` properties.
+
+```python
+checkbox.set(title="New title", description="New description", checked=True)
+```
+
+### check()
+
+Enable `checked` property.
+
+```python
+checkbox.check()
+```
+
+### uncheck()
+
+Disable `checked` property.
+
+```python
+checkbox.uncheck()
+```
+
+### @value_changed
+
+Decorator function is handled when the checkbox value is changed.
+
+```python
+@checkbox.value_changed
+def on_checkbox_changed(checked):
+    print(f"Checkbox is checked: {checked}")
+```
+
+## Mini App Example
+
+
+You can find this example in our GitHub repository:
+
+[ui-widgets-demos/controls/010_checkbox_field/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/controls/010_checkbox_field/src/main.py)
+
+### Import libraries
+
+```python
+import os
+
+import supervisely as sly
+from dotenv import load_dotenv
+from supervisely.app.widgets import Card, CheckboxField
+```
+
+### Init API client
+
+First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
+
+```python
+if sly.is_development():
+    load_dotenv("local.env")
+    load_dotenv(os.path.expanduser("~/supervisely.env"))
+
+api = sly.Api()
+```
+
+### Initialize `CheckboxField` widget
+
+```python
+checkbox_field = CheckboxField(
+    title="Title",
+    description="Description",
+)
+```
+
+### Create app layout
+
+Prepare a layout for the app using the `Card` widget with the `content` parameter and place widget that we've just created in the `Container` widget.
+
+```python
+card = Card(
+    title="CheckboxField",
+    content=checkbox_field,
+)
+```
+
+### Create the app using a layout
+
+Create an app object with a layout parameter.
+
+```python
+app = sly.Application(layout=card)
+```
+
+### Add function to control widget from code
+
+```python
+@checkbox_field.value_changed
+def get_value(is_checked):
+    print(is_checked)
+    if is_checked:
+        checkbox_field.set(title="Is Checked", checked=is_checked)
+    else:
+        checkbox_field.set(title="Is Not Checked", checked=is_checked)
+```
+
+<figure><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/79905215/2ce587c4-66ec-40d4-9b48-1f407641a6c4" alt=""><figcaption></figcaption></figure>

app-development/widgets/layouts-and-containers/card.md

@@ -15,22 +15,24 @@ card = Card(
     content_top_right=None,
     lock_message="Card content is locked",
     widget_id=None,
+    remove_padding=False,
 )
 ```
 
 <figure><img src="https://user-images.githubusercontent.com/79905215/223941574-16a3903a-b8a4-46a1-bb38-a885dccf32b6.png" alt=""><figcaption></figcaption></figure>
 
 ## Parameters
 
-|      Parameters     |   Type   |                         Description                         |
+|     Parameters      |   Type   |                         Description                         |
 | :-----------------: | :------: | :---------------------------------------------------------: |
-|       `title`       |   `str`  |                      Card widget title                      |
-|    `description`    |   `str`  |               Description text for card widget              |
+|       `title`       |  `str`   |                      Card widget title                      |
+|    `description`    |  `str`   |              Description text for card widget               |
 |    `collapsable`    |  `bool`  | Enable `collapsable` property to allow minimize card widget |
-|      `content`      | `Widget` |                Widget to place in Card widget               |
-| `content_top_right` | `Widget` |      Widget to place in top right corner of Card widget     |
-|    `lock_message`   |   `str`  |         Message to display when card will be locked         |
-|     `widget_id`     |   `str`  |                          Widget ID                          |
+|      `content`      | `Widget` |               Widget to place in Card widget                |
+| `content_top_right` | `Widget` |     Widget to place in top right corner of Card widget      |
+|   `lock_message`    |  `str`   |         Message to display when card will be locked         |
+|     `widget_id`     |  `str`   |                          Widget ID                          |
+|  `remove_padding`  |  `bool`  |              Remove paddings from Card widget               |
 
 ### title
 
@@ -97,7 +99,7 @@ card = Card(
 
 <figure><img src="https://user-images.githubusercontent.com/79905215/220179379-df3e2b0c-a85f-4e7f-b9c2-ee1c52c5a7ab.png" alt=""><figcaption></figcaption></figure>
 
-### content\_top\_right
+### content_top_right
 
 Widget to place in top right corner of Card widget
 
@@ -116,7 +118,7 @@ card = Card(
 
 <figure><img src="https://user-images.githubusercontent.com/79905215/220179093-c6f870f6-8c5f-4cb2-ac08-28a0d51efd63.png" alt=""><figcaption></figcaption></figure>
 
-### lock\_message
+### lock_message
 
 Message to display when card will be locked
 
@@ -133,30 +135,49 @@ card = Card(
 
 <figure><img src="https://user-images.githubusercontent.com/79905215/220178542-f589a5f4-5ffc-437d-b0ed-5863a6d8d64b.png" alt=""><figcaption></figcaption></figure>
 
-### widget\_id
+### widget_id
 
 Widget ID
 
 **type:** `str`
 
 **default** `None`
 
+### remove_padding
+
+Remove paddings from the Card widget
+
+**type:** `bool`
+
+**default** `False`
+
+```python
+card = Card(
+    title="Card title",
+    description="card description",
+    content=Text("some text"),
+    remove_padding=True
+)
+```
+
+<figure><img src="https://github.com/supervisely-ecosystem/ui-widgets-demos/assets/79905215/567e0f66-b863-4efc-973e-4b394326ea10" alt=""><figcaption></figcaption></figure>
+
 ## Methods and attributes
 
 | Attributes and Methods | Description                               |
 | :--------------------: | ----------------------------------------- |
-|        `loading`       | Get or set `loading` property.            |
+|       `loading`        | Get or set `loading` property.            |
 |      `collapse()`      | Minimize card widget.                     |
 |     `uncollapse()`     | Expand card widget.                       |
 |        `lock()`        | Lock card widget and show message.        |
 |       `unlock()`       | Unlock card widget and hide lock message. |
-|       `is_locked()`    | Check if card widget is locked.           |
+|     `is_locked()`      | Check if card widget is locked.           |
 
 ## Mini App Example
 
 You can find this example in our Github repository:
 
-[ui-widgets-demos/layouts and containers/001\_card/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/layouts%20and%20containers/001\_card/src/main.py)
+[ui-widgets-demos/layouts and containers/001_card/src/main.py](https://github.com/supervisely-ecosystem/ui-widgets-demos/blob/master/layouts%20and%20containers/001_card/src/main.py)
 
 ### Import libraries
 
@@ -180,7 +201,7 @@ load_dotenv(os.path.expanduser("~/supervisely.env"))
 api = sly.Api()
 ```
 
-### Prepare widgets we will use in `Card` widget
+### Prepare widgets we will use in the `Card` widget
 
 Buttons to enable loading property, lock and collapse `Card` widget:
 
@@ -190,15 +211,15 @@ lock_btn = Button("Lock")
 collapse_btn = Button("Collapse")
 ```
 
-Buttons to unlock, uncollapse and disable loading property of `Card` widget:
+Buttons to unlock, uncollapse and disable loading property of the `Card` widget:
 
 ```python
 unlock_btn = Button("Unlock", button_type="success")
 uncollapse_btn = Button("Uncollapse", button_type="success")
 refresh_btn = Button("Loading False", button_type="success")
 ```
 
-Use `Container` widget to join `Button` widgets in groups.
+Use the `Container` widget to join `Button` widgets in groups.
 
 ```python
 btn_container_1 = Container(widgets=[loading_btn, refresh_btn])
@@ -211,7 +232,7 @@ containers = Container(
 )
 ```
 
-Prepare widgets to display some image.
+Prepare widgets to display some images.
 
 ```python
 preview_btn = Button("Preview")
@@ -226,7 +247,7 @@ Initialize one `Card` widget for buttons
 buttons_card = Card(content=containers)
 ```
 
-Initialize second `Card` widget for previewing images.
+Initialize the second `Card` widget for previewing images.
 
 ```python
 image_card = Card(
@@ -240,7 +261,7 @@ image_card = Card(
 
 ### Create app layout
 
-Prepare a layout for app using `Card` widget with the `content` parameter.
+Prepare a layout for the app using the `Card` widget with the `content` parameter.
 
 ```python
 layout = Container(
@@ -250,15 +271,15 @@ layout = Container(
 )
 ```
 
-### Create app using layout
+### Create the app using layout
 
-Create an app object with layout parameter.
+Create an app object with the layout parameter.
 
 ```python
 app = sly.Application(layout=card)
 ```
 
-#### Add functions to control widgets from python code
+#### Add functions to control widgets from Python code
 
 ```python
 @unlock_btn.click