Skip to content
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

Border Tool: Inconsistent with other inspector inputs #40893

Closed
shaunandrews opened this issue May 6, 2022 · 12 comments
Closed

Border Tool: Inconsistent with other inspector inputs #40893

shaunandrews opened this issue May 6, 2022 · 12 comments
Assignees
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Figma Update Needs an update to Figma for design purposes

Comments

@shaunandrews
Copy link
Contributor

shaunandrews commented May 6, 2022

The (new-ish) border tools are pretty cool, and really open the door to creating some nice patterns and designs. I did notice that they look different from other inputs in the editor's Inspector sidebar. Here's a comparison between the Border tool and the Radius tool:

image

The Border input is taller and has a lighter colored border. This appears unintentional and should be updated to match the other inputs.

@shaunandrews shaunandrews added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label May 6, 2022
@aaronrobertshaw aaronrobertshaw self-assigned this May 8, 2022
@aaronrobertshaw
Copy link
Contributor

I've created two separate PRs to tackle this as how best to control the component height might change with a possible move to 36px default height in the near future.

Updating height: #40920
Updating border color: #40921

@javierarce
Copy link
Contributor

I couldn't find the designs for this tool, so I created a proposal in the Design Library.

image

@aaronrobertshaw
Copy link
Contributor

I couldn't find the designs for this tool

@shaunandrews is probably the best person to point to any official designs. You might find some extra details within #35602 though.

@javierarce
Copy link
Contributor

@aaronrobertshaw thanks! I actually used some of those designs to create the components above. I just wanted to mention that those components exist now in the library.

@mtias
Copy link
Member

mtias commented Jun 20, 2022

It seems that things should be adjusted the other way, not going down to 30px but increasing to 40px, which is where we have settled for the new tool controls:

image

@mtias
Copy link
Member

mtias commented Jun 20, 2022

This also goes for the border radius control:

image

@aaronrobertshaw
Copy link
Contributor

Thanks for the direction @mtias on which way we should be moving these controls.

Can you clarify if we should be migrating these controls directly to a 40px height now, or update them such that the 40px height can be toggled on whenever all the other controls in the sidebar are ready for the same height?

In other words, are we OK with the border controls being at 40px even though other controls in the sidebar are shorter?

Example screenshots
Global Styles Inspector Controls
Screen Shot 2022-06-22 at 5 30 27 pm Screen Shot 2022-06-22 at 4 52 15 pm

I've put together a quick draft PR (#41860) adding a __next40pxDefaultSize prop to the border control components allowing for their height to be toggled to 40px via the patch included in that PR's description. If we decide to update the controls directly to 40px now instead, I'll update that PR accordingly.

@javierarce javierarce added the Needs Figma Update Needs an update to Figma for design purposes label Jun 22, 2022
@mtias
Copy link
Member

mtias commented Jun 22, 2022

We need to be updating all the controls gradually and systematically. For example, the layout content/wide setting is set at 40px in the global styles designs:

image

@aaronrobertshaw
Copy link
Contributor

I'm not sure I'm following your last comment 100% sorry.

We need to be updating all the controls gradually and systematically.

Does gradually here mean we are happy to have inconsistent control heights (maybe just between panels) for however long it may be until we update all controls? Or, does systematically mean we want to update all controls together so we avoid that inconsistency?

The latter was the thinking behind #41860 and the end of my earlier comment.

@mtias
Copy link
Member

mtias commented Sep 10, 2022

@aaronrobertshaw sorry missed the ping — I'm fine with some inconsistency as we work through it. By systematically I mean not abandoning it or trying to do it in one go, which is unlikely to happen. We should focus one panel at a time and get it to match the designs as soon as possible.

@aaronrobertshaw
Copy link
Contributor

Thanks for the clarification @mtias, I'll revisit this and update #41860 as soon as possible.

@aaronrobertshaw
Copy link
Contributor

Closing this issue as I believe all the tweaks to the controls sizing, focus, etc. have been resolved now #41860 has been merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Figma Update Needs an update to Figma for design purposes
Projects
None yet
Development

No branches or pull requests

4 participants