Iterate on Show more outputs button design

[andrii-i]

References

• Follow up to Update Show more outputs button design #18021

Code changes

Show more outputs button-associated CSS.

User-facing changes

Show more outputs button design. Please find preview of the current version below in this section and previews of other options I've considered in the Other options considered section.

Key changes:

• Changed from width: 100% to adaptive width with constraints that should accommodate all potential translations.

min-width: 150px;
max-width: 220px;

• Changed button height to match Click to add a cell. footer button / clickable region height so that it would not visually clash with and to save vertical space
• Used primary border color instead of more subtle secondary border color for more visibility as width is decreased from 100%

Other options considered

• Width 100% as merged in Update Show more outputs button design #18021: I think visual hierarchy argument makes a lot of sense, have not considered it while working on the merged PR though. At the same time width 100% works well in terms of not clashing / aligning well with Click to add a cell. footer button / clickable region (relevant to the point below).
  300 px
• Wider fixed width: 300 px, 400 px, and 500 px. From my POV while wider width adds clickable area, currently used width is wide enough. 300 px looks fine but from my POV 400 px and 500 px width don't aligb with visual hierarchy and clash with Click to add a cell. footer button / clickable region.

Click to see screenshots

300 px

400px

500px

• Width 50%, width 80%: same as fixed width 500px in terms of both clashing with visual hierarchy and visually clash with Click to add a cell. footer button / clickable region

Click to see screenshots

50%

Backwards-incompatible changes

None

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[andrii-i]

@krassowski opened this as a follow-up to #18021, would appreciate if you would give it a look

[krassowski]

What about say 80% and having it centered? Or calc(100% - 20px)?