[Tidy] Replace html.Label with dbc.Label (#412)

mckinsey · Apr 9, 2024 · bb49ddc · bb49ddc
1 parent 6cf6aa3
commit bb49ddc
Show file tree

Hide file tree

Showing 18 changed files with 86 additions and 17 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",