Add explicit size option to ToggleIcon (#6092)

* Add explicit size option to ToggleIcon

* Add tests

* Remove line-height around icons

examples/reference/widgets/ToggleIcon.ipynb

@@ -14,7 +14,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The ``ToggleIcon`` widget allows toggling a single condition between ``True``/``False`` states. This widget is interchangeable with the ``Checkbox`` widget.\n",
+    "The ``ToggleIcon`` widget allows toggling a single condition between `True`/`False` states. This widget is interchangeable with the `Checkbox` and `Toggle` widget.\n",
     "\n",
     "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](../how_to/interactivity/index.md). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](../../how_to/links/index.md) or [how to use them as part of declarative UIs with Param](../../how_to/param/index.html).\n",
     "\n",
@@ -24,14 +24,15 @@
     "\n",
     "##### Core\n",
     "\n",
-    "* **``value``** (boolean): Whether the icon is toggled on or off\n",
-    "* **`icon`** (str): The name of the icon to display from [tabler-icons.io](https://tabler-icons.io)/\n",
     "* **`active_icon`** (str): The name of the icon to display when toggled from [tabler-icons.io](https://tabler-icons.io)/\n",
+    "* **`icon`** (str): The name of the icon to display from [tabler-icons.io](https://tabler-icons.io)/\n",
+    "* **`value`** (boolean): Whether the icon is toggled on or off\n",
     "\n",
     "##### Display\n",
     "\n",
-    "* **``disabled``** (boolean): Whether the widget is editable\n",
-    "* **``name``** (str): The title of the widget\n",
+    "* **`disabled`** (boolean): Whether the widget is editable\n",
+    "* **`name`** (str): The title of the widget\n",
+    "* **`size`** (str): Optional explicit size as a CSS font-size value, e.g. '1em' or '20px'. \n",
     "\n",
     "___"
    ]
@@ -93,8 +94,23 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "toggle = pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\")\n",
-    "toggle"
+    "pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The icon will automatically adapt to the specified `width`/`height` but you may also provide an explicit `size`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\", size='3em')"
    ]
   },
   {
@@ -103,7 +119,7 @@
    "source": [
     "### Controls\n",
     "\n",
-    "The `Toggle` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+    "The `ToggleIcon` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
    ]
   },
   {
@@ -112,7 +128,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "pn.Row(toggle.controls(jslink=True), toggle).show()"
+    "pn.Row(toggle.controls(jslink=True), toggle)"
    ]
   }
  ],

panel/models/icon.py

@@ -8,11 +8,14 @@
 
 class ToggleIcon(Widget):
 
+    active_icon = String(default="", help="""
+        The name of the icon to display when toggled.""")
+
     icon = String(default="heart", help="""
         The name of the icon to display.""")
 
-    active_icon = String(default="", help="""
-        The name of the icon to display when toggled.""")
+    size = String(default="1em", help="""
+        The size of the icon as a valid CSS font-size.""")
 
     value = Bool(default=False, help="""
         Whether the icon is toggled on or off.""")

panel/models/icon.ts

@@ -62,13 +62,16 @@ export class ToggleIconView extends ControlView {
   update_icon(): void {
     const icon = this.model.value ? this.get_active_icon() : this.model.icon;
     this.icon_view.model.icon_name = icon;
+    this.icon_view.el.style.lineHeight = '0';
   }
 
   get_active_icon(): string {
     return this.model.active_icon !== '' ? this.model.active_icon : `${this.model.icon}-filled`;
   }
 
   calculate_size(): string {
+    if (this.model.size !== null)
+      return this.model.size
     const maxWidth = this.model.width ?? 15;
     const maxHeight = this.model.height ?? 15;
     const size = Math.max(maxWidth, maxHeight);
@@ -79,8 +82,9 @@ export class ToggleIconView extends ControlView {
 export namespace ToggleIcon {
   export type Attrs = p.AttrsOf<Props>;
   export type Props = Control.Props & {
-    icon: p.Property<string>;
     active_icon: p.Property<string>;
+    icon: p.Property<string>;
+    size: p.Property<string | null>;
     value: p.Property<boolean>;
   };
 }
@@ -99,9 +103,10 @@ export class ToggleIcon extends Control {
   static {
     this.prototype.default_view = ToggleIconView;
 
-    this.define<ToggleIcon.Props>(({ String, Boolean }) => ({
+    this.define<ToggleIcon.Props>(({ Boolean, Nullable, String }) => ({
       active_icon: [String, ""],
       icon: [String, "heart"],
+      size: [Nullable(String), null ],
       value: [Boolean, false],
     }));
   }

panel/tests/ui/widgets/test_icon.py

@@ -29,6 +29,28 @@ def cb(event):
     wait_until(lambda: len(events) == 1, page)
     assert icon.value
 
+def test_toggle_icon_width_height(page):
+    icon = ToggleIcon(width=100, height=100)
+    serve_component(page, icon)
+
+    # test defaults
+    assert icon.icon == "heart"
+    assert not icon.value
+    icon_element = page.locator('.ti-heart')
+
+    wait_until(lambda: icon_element.bounding_box()['width'] == 100)
+
+def test_toggle_icon_size(page):
+    icon = ToggleIcon(size='120px')
+    serve_component(page, icon)
+
+    # test defaults
+    assert icon.icon == "heart"
+    assert not icon.value
+    icon_element = page.locator('.ti-heart')
+
+    wait_until(lambda: icon_element.bounding_box()['width'] == 120)
+
 def test_toggle_icon_active_icon(page):
     icon = ToggleIcon(icon="thumb-down", active_icon="thumb-up")
     serve_component(page, icon)

panel/widgets/icon.py

@@ -19,6 +19,9 @@ class ToggleIcon(Widget):
         The name of the icon to display from
         [tabler-icons.io](https://tabler-icons.io)/""")
 
+    size = param.String(default=None, doc="""
+        An explicit size specified as a CSS font-size, e.g. '1.5em' or '20px'.""")
+
     value = param.Boolean(default=False, doc="""
         Whether the icon is toggled on or off.""")