From b8b15d403d05423c1c7c29bcb0d54fd32e6d7ba9 Mon Sep 17 00:00:00 2001
From: Antony Milne <49395058+antonymilne@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:55:45 +0100
Subject: [PATCH] [Tidy] Various small tidyings (#583)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 CODEOWNERS                                    |  2 +-
 ...0240712_090435_antony.milne_custom_icon.md | 48 +++++++++++++++++++
 .../docs/pages/user-guides/navigation.md      |  4 +-
 .../vizro/models/_components/form/dropdown.py | 11 ++++-
 .../models/_components/form/test_dropdown.py  |  7 +--
 5 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md

diff --git a/CODEOWNERS b/CODEOWNERS
index 3c14a2e3b..6ed16c91e 100644
--- a/CODEOWNERS
+++ b/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
diff --git a/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md b/vizro-core/changelog.d/20240712_090435_antony.milne_custom_icon.md
new file mode 100644
index 000000000..f1f65e73c
--- /dev/null
+++ b/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))
+
+-->
diff --git a/vizro-core/docs/pages/user-guides/navigation.md b/vizro-core/docs/pages/user-guides/navigation.md
index 62a98f2bd..61898224a 100644
--- a/vizro-core/docs/pages/user-guides/navigation.md
+++ b/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
         ```
diff --git a/vizro-core/src/vizro/models/_components/form/dropdown.py b/vizro-core/src/vizro/models/_components/form/dropdown.py
index 1eb84679a..619b28f2e 100755
--- a/vizro-core/src/vizro/models/_components/form/dropdown.py
+++ b/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",
                 ),
             ]
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 1ab6ba483..b401f89aa 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
@@ -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):