hypothesis / frontend-shared

UI components and styles for Hypothesis front-end applications
https://patterns.hypothes.is
5 stars 2 forks source link

`CancelIcon` doesn't fill its viewbox: create a variant that does #675

Open lyzadanger opened 1 year ago

lyzadanger commented 1 year ago

The current CancelIcon's SVG doesn't fill its viewbox. Its viewbox is 16px square but the "X" shape in the SVG only fills 12 or 13px of that.

This causes problems of proportionality and spacing when using it near text and/or in buttons.

Many affordances to layout have been made over time to account for the existing icon, including custom padding and sizing, e.g., in various buttons. So we can't take the current CancelIcon away immediately, but should instead consider introducing an alternate icon that does fill its viewport and converting over to it as time allows.

jaredpdesigns commented 1 year ago

@lyzadanger here is the SVG for the revised cancel icon:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
  <path fill="currentColor" d="M1.503 16h-.006a1.5 1.5 0 0 1-1.058-2.56L5.88 8 .439 2.56A1.5 1.5 0 0 1 2.561.44L8 5.878l5.44-5.44a1.497 1.497 0 0 1 2.121 0 1.5 1.5 0 0 1 0 2.122L10.12 8l5.44 5.44c.292.292.438.675.439 1.058v.004c0 .383-.147.766-.44 1.059a1.495 1.495 0 0 1-1.055.439h-.01a1.495 1.495 0 0 1-1.056-.44L8 10.122l-5.44 5.44A1.495 1.495 0 0 1 1.504 16Z" />
</svg>

One small note: I made the visual weight of the icon a little heavier because we are scaling =up, keeping it be a 2px stroke looked weird.

cancel-alt