-
-
Notifications
You must be signed in to change notification settings - Fork 341
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduced padding in cell around code icons in code toolbar #1072
Conversation
I think the change in this PR does not impact the above, but the padding of icons themselves might be too small? |
Thanks for noting the accessibility criteria here. Also, I appreciate the link to the standard for target icons. To paraphrase the standard: It would require the icons to be at least 24px in height and width OR if smaller, they should be spaced such that if there were a circle of 24px diameter around each icon, none of the circles would intersect (the "spacing" exception). These criteria are not met (the current icons are 16px in height and width, and the 24px diameter condition is also not met), though as you point out, they are not the subject of this PR. There are other permitted exceptions. One is that the function can be achieved through a different control on the same page that meets this criterion. Since the action prescribes cut and paste into a code cell, it could definitely be executed through highlighting the code in the chat panel and then cutting and pasting it over into the Jupyter notebook. The other exceptions do not apply to this case: (i) The code icons are not an inline artifact, (ii) they are not driven by a user agent that is not under software control, and (iii) the size of the icons is not legally mandated to be smaller than standard. There are several ways to proceed:
Now, this PR only amends the padding around the toolbar and does not violate any additional conditions. Vertical clearance is within standard as below: @ellisonbg @krassowski @dlqqq @JasonWeill @3coins @andrii-i -- What do you think? If the standard Jupyter Lab spacing between icons is already >= 8px, then it is not an exception. |
The image you included seems to imply we only need 24px of horizontal space between the center of each icon, since there are no clickable elements above or below the cell toolbar. Given that the icons are 16px in both dimensions, we need minimum 4px of horizontal padding. However, we can leave the vertical padding unchanged at 2px to preserve vertical screen space (the original intent behind this PR). Can you update this PR with these suggested changes and post a screenshot for us here? |
@ellisonbg @dlqqq Added some horizontal space to make the icons a little more spaced apart to resemble the notebook code block toolbar. Also set the top and bottom spacing to 2px. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@srdas Adding right padding to each icon causes the icon background to be oval instead of circular on hover. The tooltip is also displaced to the right.
Instead of adding 8px padding to the icon elements, can you add 8px right margin to the TooltippedIconButton
elements (which are the direct parents of the icon elements here)?
TooltippedIconButton
accepts the sx
prop used by MUI components, which allows you to specify right margin: https://mui.com/system/getting-started/the-sx-prop/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can the right margin not be applied to the right-most cell toolbar button, to keep it aligned to the right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@meeseeksdev please backport to v3-dev |
…s in code toolbar
…toolbar (#1084) Co-authored-by: Sanjiv Das <srdas@scu.edu>
Fixes #1070
Reduces vertical and horizontal padding to 2px
New look: