add keyboard hint to button (streamlit-extras)

[github-actions[bot]]

https://arnaudmiribel\.github\.io/streamlit\-extras/extras/keyboard\_text/

https://github.com/adriangalilea/streamlit-shortcuts/blob/eb0ca95d8a776f76b5e1f8db2f2879f418264474/src/streamlit_shortcuts/streamlit_shortcuts.py#L7

import streamlit as st

# TODO add keyboard hint to button (streamlit-extras)
# https://arnaudmiribel.github.io/streamlit-extras/extras/keyboard_text/

def add_keyboard_shortcuts(key_combinations: dict[str, str]):

[quantum-ernest]

Add a little explanation.

[adriangalilea]

Ah, yeah, I did, but the action closed the issue when I changed the wording, here it was. Let me past it here for reference:

https://arnaudmiribel.github.io/streamlit-extras/extras/keyboard_text/

It'd be great if button showed this kind of hint inside, not sure how feasible is it, but it would greatly improve UX, should probably be optional.

streamlit_shortcuts.button("delete", on_click=delete_callback, shortcut="Ctrl+Shift+X", hint=True)

[adriangalilea]

A bit like this, but inside the button that get's the keybinding. So discoverability is built-in and there's no need to create an info pane explaining shortcuts.

[quantum-ernest]

So the shortcut key binding should show on the button if hint is set to true right?

[adriangalilea]

So the shortcut key binding should show on the button if hint is set to true right?

Yes

[quantum-ernest]

The st.button() doesn't evaluate html, when you pass the key() as the label. I can put it on the side using st.columns() if that's ok/

[adriangalilea]

Hey @quantum-ernest, that could def work, maybe under would be better instead on the side, care to share a screenshot?

[quantum-ernest]

[adriangalilea]

Nice! Looks a bit rough since it's non responsive(white on dark theme) and the lack of alignment with the button. But could work as a bare implementation, well done!

Perhaps scrapping streamlit extras and adding some styled text inside the button would work better. (not sure if possible, just thinking out loud, can't dedicate time atm sadly)

Feel free to PR if you think it's good ;)

Thank you so much @quantum-ernest