[Tidy] Replace RadioItems and Checklist

vizro-core/changelog.d/20240410_192546_huong_li_nguyen_replace_radio_item.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))
+
+-->

vizro-core/src/vizro/models/_components/form/_text_area.py

@@ -51,6 +51,5 @@ def build(self):
                     className="text-area",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/_user_input.py

@@ -52,6 +52,5 @@ def build(self):
                     className="user_input",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/checklist.py

@@ -1,6 +1,6 @@
 from typing import List, Literal, Optional
 
-from dash import dcc, html
+from dash import html
 
 try:
     from pydantic.v1 import Field, PrivateAttr, root_validator, validator
@@ -50,18 +50,16 @@ class Checklist(VizroBaseModel):
     def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=True)
 
-        return html.Div(
+        return html.Fieldset(
             [
-                dbc.Label(self.title, html_for=self.id) if self.title else None,
-                dcc.Checklist(
+                html.Legend(self.title, className="form-label") if self.title else None,
+                dbc.Checklist(
                     id=self.id,
                     options=full_options,
                     value=self.value if self.value is not None else [default_value],
                     persistence=True,
                     persistence_type="session",
-                    className="checkboxes-list",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/dropdown.py

@@ -72,9 +72,7 @@ def build(self):
                     multi=self.multi,
                     persistence=True,
                     persistence_type="session",
-                    className="selector_body_dropdown",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/radio_items.py

@@ -1,6 +1,6 @@
 from typing import List, Literal, Optional
 
-from dash import dcc, html
+from dash import html
 
 try:
     from pydantic.v1 import Field, PrivateAttr, root_validator, validator
@@ -51,18 +51,16 @@ class RadioItems(VizroBaseModel):
     def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=False)
 
-        return html.Div(
+        return html.Fieldset(
             [
-                dbc.Label(self.title, html_for=self.id) if self.title else None,
-                dcc.RadioItems(
+                html.Legend(self.title, className="form-label") if self.title else None,
+                dbc.RadioItems(
                     id=self.id,
                     options=full_options,
                     value=self.value if self.value is not None else default_value,
                     persistence=True,
                     persistence_type="session",
-                    className="radio-items-list",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/range_slider.py

@@ -136,6 +136,5 @@ def build(self):
                     className="slider-track-without-marks" if self.marks is None else "slider-track-with-marks",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/models/_components/form/slider.py

@@ -120,6 +120,5 @@ def build(self):
                     className="slider-track-without-marks" if self.marks is None else "slider-track-with-marks",
                 ),
             ],
-            className="input-container",
             id=f"{self.id}_outer",
         )

vizro-core/src/vizro/static/css/bootstrap_overwrites.css

@@ -4,3 +4,7 @@ but do not want to take over to `vizro-bootstrap` as these settings might not be
 .card .nav-link {
   height: 100%;
 }
+
+.form-check:last-of-type {
+  margin-bottom: 0;
+}

vizro-core/src/vizro/static/css/slider.css

@@ -108,6 +108,7 @@ input.dash-input:invalid {
   display: flex;
   flex-direction: row;
   gap: var(--spacing-01);
+  margin-bottom: var(--spacing-03);
 }
 
 .slider-text-input-field {