Implement ButtonIcon and achieve parity with Button/Toggle widgets

[ahuang11]

Closes #6038

Abstracts away ToggleIcon into ClickableIcon and makes both inherit from that.

Eventually used for ChatCopyIcon, but also many other uses, similar to mobile apps

import panel as pn

pn.extension()

pn.widgets.ButtonIcon(icon="clipboard", active_icon="check", active_duration=300, size='5em').servable()

Screen.Recording.2023-12-27.at.6.04.24.PM.mov

Needs tests + docs

[codecov]

Codecov Report

Attention: 4 lines in your changes are missing coverage. Please review.

Comparison is base (46e0639) 84.69% compared to head (9ed947a) 84.72%.
Report is 13 commits behind head on main.

Files	Patch %	Lines
panel/tests/ui/widgets/test_icon.py	98.26%	2 Missing ⚠️
panel/widgets/icon.py	93.10%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6138      +/-   ##
==========================================
+ Coverage   84.69%   84.72%   +0.02%     
==========================================
  Files         296      296              
  Lines       44184    44437     +253     
==========================================
+ Hits        37423    37650     +227     
- Misses       6761     6787      +26     

Flag	Coverage Δ
ui-tests	40.88% <96.89%> (+0.14%)	⬆️
unitexamples-tests	72.47% <26.08%> (-0.15%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ahuang11]

Okay I think this is ready!

params demo

Screen.Recording.2023-12-28.at.4.34.01.PM.mov

js on click demo

Screen.Recording.2023-12-28.at.4.34.57.PM.mov

import panel as pn

pn.extension()

button_icon = pn.widgets.ButtonIcon(
    icon="clipboard",
    active_icon="check",
    toggle_duration=1000,
    size="5em",
    description="Hey",
)

toggle_icon = pn.widgets.ToggleIcon(
    icon="heart", active_icon="heart-filled", description="Hey", size="5em"
)

pn.Column(
    pn.Row(
        button_icon,
        button_icon.param.clicks,
        button_icon.param.value,
        button_icon.param.toggle_duration,
        button_icon.param.size,
        button_icon.param.disabled,
    ),
    pn.Row(
        toggle_icon,
        toggle_icon.param.value,
        toggle_icon.param.icon,
        toggle_icon.param.active_icon,
        toggle_icon.param.size,
        toggle_icon.param.disabled,
    ),
).servable()

import panel as pn

pn.extension()


button = pn.widgets.ButtonIcon(description="Hello", size="3em")
button.js_on_click(code="alert('Hello, world!')")
button.show()

[philippjfr]

Looks great, just one more comment.

[philippjfr]

Once you've removed the clicks property and it's working this is looking really great, thanks!

[ahuang11]

With the latest changes:

Screen.Recording.2024-01-09.at.5.44.28.PM.mov

[philippjfr]

If you could remove the test_button_icon_jslink test I'll merge.