From bb49ddc6c64f1557f87895cebdafe7bf9eeba9f2 Mon Sep 17 00:00:00 2001
From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com>
Date: Tue, 9 Apr 2024 11:31:12 +0200
Subject: [PATCH] [Tidy] Replace `html.Label` with `dbc.Label` (#412)

---
 ...09_110318_huong_li_nguyen_replace_label.md | 48 +++++++++++++++++++
 .../models/_components/form/_text_area.py     |  2 +-
 .../models/_components/form/_user_input.py    |  2 +-
 .../models/_components/form/checklist.py      |  4 +-
 .../models/_components/form/date_picker.py    |  4 +-
 .../vizro/models/_components/form/dropdown.py |  4 +-
 .../models/_components/form/radio_items.py    |  4 +-
 .../models/_components/form/range_slider.py   |  4 +-
 .../vizro/models/_components/form/slider.py   |  4 +-
 .../vizro/static/css/bootstrap_overwrites.css |  3 ++
 .../models/_components/form/test_checklist.py |  3 +-
 .../_components/form/test_date_picker.py      |  3 +-
 .../models/_components/form/test_dropdown.py  |  5 +-
 .../_components/form/test_radio_items.py      |  3 +-
 .../_components/form/test_range_slider.py     |  3 +-
 .../models/_components/form/test_slider.py    |  3 +-
 .../models/_components/form/test_text_area.py |  2 +-
 .../_components/form/test_user_input.py       |  2 +-
 18 files changed, 86 insertions(+), 17 deletions(-)
 create mode 100644 vizro-core/changelog.d/20240409_110318_huong_li_nguyen_replace_label.md
 create mode 100644 vizro-core/src/vizro/static/css/bootstrap_overwrites.css

diff --git a/vizro-core/changelog.d/20240409_110318_huong_li_nguyen_replace_label.md b/vizro-core/changelog.d/20240409_110318_huong_li_nguyen_replace_label.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/vizro-core/changelog.d/20240409_110318_huong_li_nguyen_replace_label.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/src/vizro/models/_components/form/_text_area.py b/vizro-core/src/vizro/models/_components/form/_text_area.py
index a0c8ddb5b..65202db5c 100644
--- a/vizro-core/src/vizro/models/_components/form/_text_area.py
+++ b/vizro-core/src/vizro/models/_components/form/_text_area.py
@@ -41,7 +41,7 @@ class TextArea(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dbc.Textarea(
                     id=self.id,
                     placeholder=self.placeholder,
diff --git a/vizro-core/src/vizro/models/_components/form/_user_input.py b/vizro-core/src/vizro/models/_components/form/_user_input.py
index c074c4985..c5b05edc1 100644
--- a/vizro-core/src/vizro/models/_components/form/_user_input.py
+++ b/vizro-core/src/vizro/models/_components/form/_user_input.py
@@ -41,7 +41,7 @@ class UserInput(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dbc.Input(
                     id=self.id,
                     placeholder=self.placeholder,
diff --git a/vizro-core/src/vizro/models/_components/form/checklist.py b/vizro-core/src/vizro/models/_components/form/checklist.py
index e37180b6c..47a1f3399 100644
--- a/vizro-core/src/vizro/models/_components/form/checklist.py
+++ b/vizro-core/src/vizro/models/_components/form/checklist.py
@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -50,7 +52,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.Checklist(
                     id=self.id,
                     options=full_options,
diff --git a/vizro-core/src/vizro/models/_components/form/date_picker.py b/vizro-core/src/vizro/models/_components/form/date_picker.py
index bb70e9c47..d28077f4b 100644
--- a/vizro-core/src/vizro/models/_components/form/date_picker.py
+++ b/vizro-core/src/vizro/models/_components/form/date_picker.py
@@ -12,6 +12,8 @@
 import datetime
 from datetime import date
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import validate_date_picker_range, validate_max, validate_range_value
@@ -102,7 +104,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 date_picker,
                 dcc.Store(id=f"{self.id}_input_store", storage_type="session", data=init_value),
             ],
diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py
index 1cf2f1099..49e39c53d 100755
--- a/vizro-core/src/vizro/models/_components/form/dropdown.py
+++ b/vizro-core/src/vizro/models/_components/form/dropdown.py
@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -62,7 +64,7 @@ def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.Dropdown(
                     id=self.id,
                     options=full_options,
diff --git a/vizro-core/src/vizro/models/_components/form/radio_items.py b/vizro-core/src/vizro/models/_components/form/radio_items.py
index 7e8f9a993..1423397bb 100644
--- a/vizro-core/src/vizro/models/_components/form/radio_items.py
+++ b/vizro-core/src/vizro/models/_components/form/radio_items.py
@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, root_validator, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import get_options_and_default, validate_options_dict, validate_value
@@ -51,7 +53,7 @@ def build(self):
 
         return html.Div(
             [
-                html.Label(self.title, htmlFor=self.id) if self.title else None,
+                dbc.Label(self.title, html_for=self.id) if self.title else None,
                 dcc.RadioItems(
                     id=self.id,
                     options=full_options,
diff --git a/vizro-core/src/vizro/models/_components/form/range_slider.py b/vizro-core/src/vizro/models/_components/form/range_slider.py
index b651fb074..10490ccae 100644
--- a/vizro-core/src/vizro/models/_components/form/range_slider.py
+++ b/vizro-core/src/vizro/models/_components/form/range_slider.py
@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import (
@@ -87,7 +89,7 @@ def build(self):
                 dcc.Store(f"{self.id}_callback_data", data={"id": self.id, "min": self.min, "max": self.max}),
                 html.Div(
                     [
-                        html.Label(self.title, htmlFor=self.id) if self.title else None,
+                        dbc.Label(self.title, html_for=self.id) if self.title else None,
                         html.Div(
                             [
                                 dcc.Input(
diff --git a/vizro-core/src/vizro/models/_components/form/slider.py b/vizro-core/src/vizro/models/_components/form/slider.py
index 3675cb663..aa1d4747c 100644
--- a/vizro-core/src/vizro/models/_components/form/slider.py
+++ b/vizro-core/src/vizro/models/_components/form/slider.py
@@ -7,6 +7,8 @@
 except ImportError:  # pragma: no cov
     from pydantic import Field, PrivateAttr, validator
 
+import dash_bootstrap_components as dbc
+
 from vizro.models import Action, VizroBaseModel
 from vizro.models._action._actions_chain import _action_validator_factory
 from vizro.models._components.form._form_utils import (
@@ -83,7 +85,7 @@ def build(self):
                 dcc.Store(f"{self.id}_callback_data", data={"id": self.id, "min": self.min, "max": self.max}),
                 html.Div(
                     [
-                        html.Label(self.title, htmlFor=self.id) if self.title else None,
+                        dbc.Label(self.title, html_for=self.id) if self.title else None,
                         html.Div(
                             [
                                 dcc.Input(
diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
new file mode 100644
index 000000000..137aa5651
--- /dev/null
+++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
@@ -0,0 +1,3 @@
+.form-label {
+  margin-bottom: 0;
+}
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_checklist.py b/vizro-core/tests/unit/vizro/models/_components/form/test_checklist.py
index 995bb4fbf..63d57939e 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_checklist.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_checklist.py
@@ -1,5 +1,6 @@
 """Unit tests for vizro.models.Checklist."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -131,7 +132,7 @@ def test_checklist_build(self):
         checklist = Checklist(id="checklist_id", options=["A", "B", "C"], title="Title").build()
         expected_checklist = html.Div(
             [
-                html.Label("Title", htmlFor="checklist_id"),
+                dbc.Label("Title", html_for="checklist_id"),
                 dcc.Checklist(
                     id="checklist_id",
                     options=["ALL", "A", "B", "C"],
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py b/vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py
index eeae756e9..a1a57cd8e 100644
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_date_picker.py
@@ -2,6 +2,7 @@
 
 from datetime import date, datetime
 
+import dash_bootstrap_components as dbc
 import dash_mantine_components as dmc
 import pytest
 from asserts import assert_component_equal
@@ -120,7 +121,7 @@ def test_datepicker_build(self, range, value):
         additional_kwargs = {"allowSingleDateInRange": True} if range else {}
         expected_datepicker = html.Div(
             [
-                html.Label("Test title", htmlFor="datepicker_id"),
+                dbc.Label("Test title", html_for="datepicker_id"),
                 date_picker_class(
                     id="datepicker_id",
                     minDate="2023-01-01",
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py
index 783706f3d..3a3e9c1c3 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py
@@ -1,5 +1,6 @@
 """Unit tests for vizro.models.Dropdown."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -150,7 +151,7 @@ def test_dropdown_with_all_option(self):
         dropdown = Dropdown(options=["A", "B", "C"], title="Title", id="dropdown_id").build()
         expected_dropdown = html.Div(
             [
-                html.Label("Title", htmlFor="dropdown_id"),
+                dbc.Label("Title", html_for="dropdown_id"),
                 dcc.Dropdown(
                     id="dropdown_id",
                     options=["ALL", "A", "B", "C"],
@@ -171,7 +172,7 @@ def test_dropdown_without_all_option(self):
         dropdown = Dropdown(id="dropdown_id", options=["A", "B", "C"], multi=False, title="Title").build()
         expected_dropdown = html.Div(
             [
-                html.Label("Title", htmlFor="dropdown_id"),
+                dbc.Label("Title", html_for="dropdown_id"),
                 dcc.Dropdown(
                     id="dropdown_id",
                     options=["A", "B", "C"],
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_radio_items.py b/vizro-core/tests/unit/vizro/models/_components/form/test_radio_items.py
index 1cd41affb..b4c96eae7 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_radio_items.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_radio_items.py
@@ -1,5 +1,6 @@
 """Unit tests for vizro.models.RadioItems."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -131,7 +132,7 @@ def test_radio_items_build(self):
         radio_items = RadioItems(id="radio_items_id", options=["A", "B", "C"], title="Title").build()
         expected_radio_items = html.Div(
             [
-                html.Label("Title", htmlFor="radio_items_id"),
+                dbc.Label("Title", html_for="radio_items_id"),
                 dcc.RadioItems(
                     id="radio_items_id",
                     options=["A", "B", "C"],
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py b/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py
index 61304e2eb..4983cf0ba 100644
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py
@@ -1,5 +1,6 @@
 """Unit tests for hyphen.models.slider."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -78,7 +79,7 @@ def expected_range_slider_with_optional():
             dcc.Store("range_slider_callback_data", data={"id": "range_slider", "min": 0.0, "max": 10.0}),
             html.Div(
                 [
-                    html.Label("Title", htmlFor="range_slider"),
+                    dbc.Label("Title", html_for="range_slider"),
                     html.Div(
                         [
                             dcc.Input(
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_slider.py b/vizro-core/tests/unit/vizro/models/_components/form/test_slider.py
index 07cbbe3cc..a7164f35c 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_slider.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_slider.py
@@ -1,5 +1,6 @@
 """Unit tests for hyphen.models.slider."""
 
+import dash_bootstrap_components as dbc
 import pytest
 from asserts import assert_component_equal
 from dash import dcc, html
@@ -19,7 +20,7 @@ def expected_slider():
             dcc.Store("slider_id_callback_data", data={"id": "slider_id", "min": 0.0, "max": 10.0}),
             html.Div(
                 [
-                    html.Label("Test title", htmlFor="slider_id"),
+                    dbc.Label("Test title", html_for="slider_id"),
                     html.Div(
                         [
                             dcc.Input(
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_text_area.py b/vizro-core/tests/unit/vizro/models/_components/form/test_text_area.py
index ac81b09ce..7a0e443b0 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_text_area.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_text_area.py
@@ -35,7 +35,7 @@ def test_text_area_build(self):
         text_area = TextArea(title="Title", placeholder="Placeholder", id="text-area-id").build()
         expected_text_area = html.Div(
             [
-                html.Label("Title", htmlFor="text-area-id"),
+                dbc.Label("Title", html_for="text-area-id"),
                 dbc.Textarea(
                     id="text-area-id",
                     placeholder="Placeholder",
diff --git a/vizro-core/tests/unit/vizro/models/_components/form/test_user_input.py b/vizro-core/tests/unit/vizro/models/_components/form/test_user_input.py
index efd959dd0..788d39d08 100755
--- a/vizro-core/tests/unit/vizro/models/_components/form/test_user_input.py
+++ b/vizro-core/tests/unit/vizro/models/_components/form/test_user_input.py
@@ -35,7 +35,7 @@ def test_user_input_build(self):
         user_input = UserInput(title="Title", placeholder="Placeholder", id="user-input-id").build()
         expected_user_input = html.Div(
             [
-                html.Label("Title", htmlFor="user-input-id"),
+                dbc.Label("Title", html_for="user-input-id"),
                 dbc.Input(
                     id="user-input-id",
                     placeholder="Placeholder",