Refine border style dropdown design

[jameskoster]

The border style selector added in #31321 could use a little design refinement:

This unique treatment of the dropdown component adds unnecessary weight to the UI, and the combination of label + preview feel like overkill. It might be simpler to do one or the other:

1. A standard select with no preview
2. A segmented control with icons (like the width control shared in Sidebar Controls & Component System #27331), example below

[aaronrobertshaw]

I've started putting together a PR to refine the border block support controls. Can you provide the icons for the segmented control? It will also need a "none" option so the user can explicitly remove a border when the theme sets one.

[aaronrobertshaw]

We might get away with relying on setting the border width to 0 to hide a theme provided border. That wouldn't be obvious to end users though.

[jameskoster]

We might get away with relying on setting the border width to 0 to hide a theme provided border. That wouldn't be obvious to end users though.

That was my original thinking. If we begin with only one variable to control the visibility of the border, I think that will lead to fewer confusing scenarios overall.

Here's the svg code for the icons:

Solid

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
  <defs/>
  <path d="M5 11.25h14v1.5H5z"/>
</svg>

Dashed

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
  <defs/>
  <path fill-rule="evenodd" d="M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z" clip-rule="evenodd"/>
</svg>

Dotted

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
  <defs/>
  <path fill-rule="evenodd" d="M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z" clip-rule="evenodd"/>
</svg>

[aaronrobertshaw]

Work toward refining the border block support UI is currently in progress in #31585.

The designs in #31337 required some updates to the underlying block supports mechanism that are still pending review. Any help getting those reviewed will help move this forward.

• Allow non-pixel units for border width & radius
• Allow per-corner border radius values

[aaronrobertshaw]

Closing this as the border panel has been updated now #31585 has been merged.