Icon for ImageResizeUI plugin

[panr]

We just introduced the new plugin ImageResizeUi which allows the users to manually change the size of an image based on the given configuration.

The plugin may be displayed as a dropdown or a set of standalone buttons.

First attempt for the icon looked like:

and

The concept of the icon above looks OK with a dropdown but we're not sure whether we want to display the icon for every standalone button...

The question is:

• what icon should fit best?
• if we want to have an icon, how should we present it with standalone buttons?

cc @oleq

[oleq]

TBH for individual icons, I'd rather go with something like this (this is not a final mockup, though). The percentage could be next to an icon and we could provide a couple of icons (4 or 5 stops would be enough I think?) and developers could use them in the configuration.

• Do we always need percentages? I know that you can configure [ 21%, 63%, 99% ] but does it matter for editor users? I think they will rather care about [ small, medium, large ] because this is what they see in the content.
  • OTOH there could be CMSs with 10 stops so then maybe the presence of the percentage label should be configurable? (choose one from (icon, icon+%, %))?
  • OTTH if they have so many stops, they should rather use the drop-down.

As for the drop-down, I think we can reduce its width to something sane (3 digits + unit) but keep it fixed to prevent from drop-down re-scaling as they change from "2 digits + unit" to "3 digits + unit". I didn't follow the original PR so I don't know which values are available.

I think we could use the "medium" icon (from my mock-up) for the drop-down and it should do the trick. I'd need to see it in action to give you yay or nay, though.

[panr]

I like the set of icons here, but I think they don't match the meaning of the feature. They look more like picture-in-picture or hud-view or minimize the image. Also, the icons contain some kind of "feel of the direction" (clicking the icon triggers some behavior related to the bottom-left corner), which I don't know whether it's a good thing... Or maybe I'm wrong and the icons are totally fine ;-D

But I agree that the main case here is to have small, medium, large options. That's how most of the online editors/CMS's (?) work.

[jodator]

Notes from internal meeting:

• remove labels in favour of icons
• start with few icons for steps (3-4)
  • how to configure them useIcon -
• some icon for a dropdown is a must-hve
• default label - go with "default" / "original" (one word)
• make label different

+ part of #7560:

• remove max-width from image styles (make it in below 👇and describe for changelog).
  • in the docs for now: (two snippets - dropdown and icons) and use left/right/center styles