Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add explicit size option to ToggleIcon #6092

Merged
merged 3 commits into from
Dec 20, 2023
Merged

Add explicit size option to ToggleIcon #6092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62e15b1
Add explicit size option to ToggleIcon
philippjfr Dec 19, 2023
c1fe4ae
Add tests
philippjfr Dec 19, 2023
4a84d70
Remove line-height around icons
philippjfr Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 25 additions & 9 deletions examples/reference/widgets/ToggleIcon.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
"___"
]
Expand Down Expand Up @@ -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`:"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"The icon will automatically adapt to the specified `width`/`height` but you may also provide an explicit `size`:"
"The icon will automatically adapt to the specified `width`/`height` but you may also provide an explicit `size` which takes precedence:"

]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"pn.widgets.ToggleIcon(icon=\"thumb-down\", active_icon=\"thumb-up\", size='3em')"
]
},
{
Expand All @@ -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:"
]
},
{
Expand All @@ -112,7 +128,7 @@
"metadata": {},
"outputs": [],
"source": [
"pn.Row(toggle.controls(jslink=True), toggle).show()"
"pn.Row(toggle.controls(jslink=True), toggle)"
]
}
],
Expand Down
7 changes: 5 additions & 2 deletions panel/models/icon.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.""")
9 changes: 7 additions & 2 deletions panel/models/icon.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>;
};
}
Expand All @@ -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],
}));
}
Expand Down
22 changes: 22 additions & 0 deletions panel/tests/ui/widgets/test_icon.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
3 changes: 3 additions & 0 deletions panel/widgets/icon.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.""")

Expand Down