[Bug] Fix appearance of spinner buttons in number input

vizro-core/changelog.d/20250115_123645_huong_li_nguyen_fix_removal_of_number_input.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
+
+- Enable visibility of the spinner buttons in number inputs. ([#954](https://github.com/mckinsey/vizro/pull/954))
+
+
+<!--
+### 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/examples/scratch_dev/app.py

@@ -1,68 +1,43 @@
 """Dev app to try things out."""
 
-import pandas as pd
+import dash_bootstrap_components as dbc
+
 import vizro.models as vm
 from vizro import Vizro
+import vizro.plotly.express as px
+
+
+from typing import Literal
+
+gapminder = px.data.gapminder()
+
 
-# For more information, refer to the API reference for kpi_card and kpi_card_reference
-from vizro.figures import kpi_card, kpi_card_reference
+class NumberInput(vm.VizroBaseModel):
+    type: Literal["number_input"] = "number_input"
 
-df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
+    def build(self):
+        return (
+            dbc.Input(
+                id="number-input",
+                type="number",
+                min=0,
+                max=10,
+                step=1,
+                value=5,
+                debounce=True,
+            ),
+        )
 
-example_cards = [
-    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
-    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with aggregation", agg_func="median"),
-    kpi_card(
-        data_frame=df_kpi,
-        value_column="Actual",
-        title="KPI with formatting",
-        value_format="${value:.2f}",
-    ),
-    kpi_card(
-        data_frame=df_kpi,
-        value_column="Actual",
-        title="KPI with icon",
-        icon="shopping_cart",
-    ),
-]
 
-example_reference_cards = [
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        title="KPI reference (pos)",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        agg_func="median",
-        title="KPI reference (neg)",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        title="KPI reference with formatting",
-        value_format="{value:.2f}€",
-        reference_format="{delta:+.2f}€ vs. last year ({reference:.2f}€)",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        title="KPI reference with icon",
-        icon="shopping_cart",
-    ),
-]
+vm.Page.add_type("components", NumberInput)
 
-# Create a layout with four rows and columns. The KPI cards are positioned in the first eight cells, while the remaining cells are empty.
 page = vm.Page(
-    title="KPI cards",
-    layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
-    components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
-    controls=[vm.Filter(column="Category")],
+    title="Charts UI",
+    components=[
+        NumberInput(),
+        vm.Graph(figure=px.box(gapminder, x="year", y="gdpPercap", color="continent")),
+    ],
+    controls=[vm.Filter(column="year")],
 )
 
 dashboard = vm.Dashboard(pages=[page])

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

@@ -128,8 +128,8 @@ input.dash-input:invalid {
 }
 
 /* To remove number input spin box */
-.slider-text-input-container input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+.slider-text-input-container input[type="number"]::-webkit-outer-spin-button,
+.slider-text-input-container input[type="number"]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }