[go: up one dir, main page]

Add icon position choice to `GlButton`

Right now, gl-button has a single option for adding an icon: to the left of the other content (if any).
For example, if a gl-button has icon="angle-right", the button renders like > [Some content].

If you need an icon to render somewhere else in the button, the only way around this right now is to manually add the icon:

<gl-button>
    Next
    <gl-icon name="angle-right" />
</gl-button>

Unfortunately, there are styles that explicitly add margin-right to any icon that's a child of a button, which means this use case has to have specific override CSS applied any time it's needed, like so:

.my-use-case-container {
  a.btn > svg,
  button > svg {
    /* make the icon have equal margins no matter where it is */
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
}

There should be a icon position control so the button can (at least) render the icon at the beginning or the end.
For example <gl-button icon="angle-right" icon-position="left"> would keep the same behavior as now, while icon-position="right" would switch to rendering the icon after any other content instead.

If we're concerned about internationalization, "left" and "right" could be "start" and "end" (which would have to be combined with other internationalization flagging to change which position is used).

This proposal may reach peak usefulness in combination with my very related gl-icon line-position proposal.

Edited by Thomas Randolph