Bump to JupyterLab 4.1.0a4 bis

[brichet]

This PR supersede #7166

Changes

1. CSS in toolbar to reflect the changes on toolbar components, following [Accessibility] Using arrow keys to navigate in toolbars items jupyterlab/jupyterlab#15021

2. Filebrowser toolbar

   See Bump to JupyterLab 4.1.0a4 #7166 (comment) for context.

   It changes the logic to include the action buttons in the filebrowser toolbar, and restore the previous appearance of the action buttons.

   The action button in the filebrowser toolbar were included in an actions toolbar, which breaks keyboard-only usage (using tab and arrow keys).

   With this PR, the buttons are included in the file browser toolbar as direct child.

   NOTES:

   • the buttons are now hidden when not usable, instead of being not rendered. This means that a user can display these buttons from the DOM. I don't think this is critical.
   • it modifies the logic to hide or not the rename button. I didn't really understand the previous logic, now it's displayed if a single item is selected. Let me know if I should revert this change.

[github-actions]

👈 Launch a Binder on branch brichet/notebook/filebrowser-toolbar

[brichet]

@jtpio I was not able to open this PR in your branch https://github.com/jtpio/notebook/tree/update-lab-410a4
Feel free to change the target branch to make it more easier.

I also don't know why there are conflicts here and not in #7166, since the conflicting files have been changed there...

[jtpio]

No problem, we can close #7166 in favor of this one.

There are also some conflicts on #7166, likely related to the merge of #6968:

[jtpio]

Thanks @brichet for picking this up!

2. it modifies the logic to hide or not the rename button. I didn't really understand the previous logic, now it's displayed if a single item is selected. Let me know if I should revert this change.

It was mimicking the behavior of the classic notebook. With some buttons available depending on the number being selected and their type. Normally the rename button was already rendered when a single item was selected:

[jtpio]

Trying on Binder, it looks like the text content of the delete button is not visible by default:

notebook-delete-button.webm

[jtpio]

Also we might need to tweak the CSS a bit so the hover button background takes the full height on hover:

notebook-hover-buttons.webm

Currently with 7.0.6 only the upload and refresh buttons have a small gap on hover:

fileactions-buttons-hover.webm

We can also fix that separately, maybe it was introduced before in #7161.

[brichet]

It was mimicking the behavior of the classic notebook. With some buttons available depending on the number being selected and their type. Normally the rename button was already rendered when a single item was selected:

Testing it again, it depends of the selected files. The test for multiple files was on type === 'file', but notebook files for instance has type='notebook'. The rename button was still there if several notebook files were selected, a soon as there is no directory or
a single file other than notebook.

[brichet]

Trying on Binder, it looks like the text content of the delete button is not visible by default:

I can't reproduce it, the delete button is red on my side:

[jtpio]

I can't reproduce it, the delete button is red on my side:

On Binder, or locally?

Here is what it looks like on Firefox:

[brichet]

On Binder, or locally?

Here is what it looks like on Firefox:

I tested it on chrome.
You're right, the delete button is white on Firefox, locally or with binder.

We should probably add a snapshot including the delete button.

[jtpio]

Looks like this might be the cause for the Firefox rendering issue? (with Firefox 118)

https://caniuse.com/css-has

[jtpio]

[brichet]

Thanks, this is indeed the issue.

We should probably use the ID of element.

[brichet]

It should be fixed now, using the ID

[brichet]

Also we might need to tweak the CSS a bit so the hover button background takes the full height on hover

Fixed in b7f24c6

[jtpio]

Nice thanks @brichet.

[jtpio]

bot please update playwright snapshots

[brichet]

bot please update playwright snapshots

I added a CSS rule for the 'New' menu (the text was not centered in the component).
I believe we'll have to run it again.

[jtpio]

Looks like the bot picked up the comment from the quoted text :)

[brichet]

Looks like the bot picked up the comment from the quoted text :)

Yes, just seen the 👍 icon in my comment.

[brichet]

Kicking CI

[jtpio]

Thanks @brichet!