Toggle buttons for clipplane and wireframe do not toggle in JupyterLite

[SylvainCorlay]

We could decide to make the clipping toolbar icon should appear as toggled when clipping is enabled.

[martinRenou]

This was implemented in #441 and it looks like it's not working anymore?

[martinRenou]

I wonder if the switch to reactive toolbar may broke it #455

[SylvainCorlay]

Maybe @brichet would know if the reactive toolbar does not support toggled buttons.

[arjxn-py]

Hi there, I tried reproducing this on my end and It works fine for me (I'm at the latest commit)

Maybe can you try reproducing?

toggle.mov

EDIT: Yes, I just realised and checked that it's not working on jupyterlite deployment

[brichet]

Maybe @brichet would know if the reactive toolbar does not support toggled buttons.

AFAIK the reactive toolbar handles the buttons in the same way as the regular toolbar, storing only those that overflow into a popup toolbar.

[SylvainCorlay]

EDIT: Yes, I just realised and checked that it's not working on jupyterlite deployment

Indeed. Although I can see the class change on the button.

[martinRenou]

So this may be JupyterLite not bringing the Lumino CSS for lm-mod-toggled!

[SylvainCorlay]

So this may be JupyterLite not bringing the Lumino CSS for lm-mod-toggled!

Ping @jtpio

[jtpio]

hmm strange that JupyterLite would not include this rule, since it should include the Lumino CSS by default.

Are you able to check the rule is available when using regular JupyterLab, and not with JupyterLite? (for example via the elements tab of the dev tools)

[arjxn-py]

Are you able to check the rule is available when using regular JupyterLab, and not with JupyterLite? (for example via the elements tab of the dev tools)

Hi @jtpio, yes this is available on regular JupyterLab, this clip is of JupyterLab running locally.

[jtpio]

I mean can you point at the specific CSS rule? (so it's easier to check why it would be missing in lite)

[arjxn-py]

It should be lm-mod-toggled

toggle.mov

[jtpio]

For the class yes. But what is the expected CSS rule?

[arjxn-py]

For the class yes. But what is the expected CSS rule?

This is the only rule we could find in lumino -

https://github.com/jupyterlab/lumino/blob/10ee22d2a93ae618f36c5ba380337bc440106399/packages/default-theme/style/menu.css#L75-L77

[jtpio]

So to echo the question above:

Are you able to check the rule is available when using regular JupyterLab, and not with JupyterLite? (for example via the elements tab of the dev tools)

Is this rule on the page for JupyterLab, and not for JupyterLite?

[arjxn-py]

I cannot see this exact rule but there are significant differences between how lab is rendering the button and how lite is. One of the major one is that in jupyterlab button is jp-button but in jupyterlite it's only button and i also cannot notice styles being modified in lite

JupyterLab

Screen.Recording.2024-10-17.at.14.52.04-1.mov

JupyterLite

Screen.Recording.2024-10-17.at.14.56.15-1.mov

[jtpio]

I cannot see this exact rule but there are significant differences between how lab is rendering the button and how lite is.

Even by searching for lm-mod-toggled on the "Elements" tab? Probably there should then be some references to it in the <style> elements.

[arjxn-py]

I cannot see this exact rule but there are significant differences between how lab is rendering the button and how lite is.

Even by searching for lm-mod-toggled on the "Elements" tab? Probably there should then be some references to it in the <style> elements.

Can't find one in local jupyterlab:

con.mov

But in jupyterlite, is this it? -

[jtpio]

One of the major one is that in jupyterlab button is jp-button but in jupyterlite it's only button

Indeed. It looks related to the changes in JupyterLab w.r.t the toolbar buttons. Maybe there is a @jupyterlab package in JupyterLite that was not updated to the latest version?

[martinRenou]

Even though it is visible in JupyterLab, I personally find the shadow styling a bit ugly:

I'd like to suggest to apply a background-color: var(--jp-layout-color3); to the toggled button instead of a shadow:

That's just a personal preference.

[SylvainCorlay]

Will the "bug" be resolved in a future version of JupyterLite ?

The CSS change could be submitted upstream in Lab.

[arjxn-py]

Will the "bug" be resolved in a future version of JupyterLite ?

From a conversation with @martinRenou on video, Yes

The CSS change could be submitted upstream in Lab.

Sounds good, happy to do that if I'm good to do that, please let know if someone else shall do it.