Merge branch 'main' into tidy/update-demos

CODEOWNERS

@@ -1,3 +1,3 @@
 * @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL
 vizro-ai/ @Joseph-Perkins @Anna-Xiong @lingyielia @maxschulz-COL
-docs/ @stichbury
+docs/ @stichbury @Joseph-Perkins @antonymilne @huong-li-nguyen @maxschulz-COL

vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.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/docs/pages/user-guides/navigation.md

@@ -244,7 +244,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M
                             icon="Bar Chart",
                             pages=["My first page", "My second page"],
                         ),
-                        vm.NavLink(label="Section 2", icon="pie_chart", pages=["My third page"]),
+                        vm.NavLink(label="Section 2", icon="Pie Chart", pages=["My third page"]),
                     ]
                 )
             ),
@@ -266,7 +266,7 @@ You can alter the icons used by specifying the name of the icon in the [Google M
                   - My first page
                   - My second page
               - label: Section 1
-                icon: pie_chart
+                icon: Pie Chart
                 pages:
                   - My third page
         ```

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

@@ -63,6 +63,14 @@ def validate_multi(cls, multi, values):
     @_log_call
     def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
+        # 30 characters is roughly the number of "A" characters you can fit comfortably on a line in the dropdown.
+        # "A" is representative of a slightly wider than average character:
+        # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels
+        # We look at the longest option to find number_of_lines it requires. Option height is the same for all options
+        # and needs 24px for each line + 8px padding.
+        number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 30)
+        option_height = 8 + 24 * number_of_lines
+
         return html.Div(
             children=[
                 dbc.Label(self.title, html_for=self.id) if self.title else None,
@@ -72,8 +80,7 @@ def build(self):
                     value=self.value if self.value is not None else default_value,
                     multi=self.multi,
                     persistence=True,
-                    # 37 is the cut-off character length where the text inside the dropdown starts to wrap
-                    optionHeight=32 + 24 * math.floor(max(len(str(option)) for option in full_options) / 37),
+                    optionHeight=option_height,
                     persistence_type="session",
                 ),
             ]

vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py

@@ -190,9 +190,10 @@ def test_dropdown_without_all_option(self):
         [
             (["A", "B", "C"], 32),
             ([10, 20, 30], 32),
-            (["A text with a length of 36..........", "B", "C"], 32),
-            (["A text with a length of 37...........", "B", "C"], 56),
-            (["A text with a length of 37..........." + "A text with a length of 37...........", "B", "C"], 80),
+            (["A" * 30, "B", "C"], 32),
+            (["A" * 31, "B", "C"], 56),
+            (["A" * 60, "B", "C"], 56),
+            (["A" * 61, "B", "C"], 80),
         ],
     )
     def test_dropdown_dynamic_option_height(self, options, option_height):