New LabelledButton component

[braaar]

Requirements for the LabelledButton component we want:

• Must support various variants (colours, border shapes, border thicknesses)
• Must align icons with text in a proper manner (middle of the icon should align with the middle of the text?)
• Must give the right color to the icon and the text
• Must support icons of different kinds.

Good:

Bad:

[braaar]

New style:

[simenandre]

Can this just be a styled Button? or maybe IconButton? I don't understand the name LabelledButton.

[braaar]

Very true. I like IconButton. LabelledButton is basically a tautology

[braaar]

I'm not sure if we will be able to pull this off with just styling on the button object. We probably need a flex to align the icons properly

[simenandre]

Right, let's implement a <IconButton /> where one of the inputs is an icon (ReactElement).

E.g.

<IconButton icon={<Icon />} />

Not sure about the name IconButton, considering this: https://theme-ui.com/components/icon-button/

[braaar]

Right, let's implement a <IconButton /> where one of the inputs is an icon (ReactElement).

E.g.

<IconButton icon={<Icon />} />

Not sure about the name IconButton, considering this: https://theme-ui.com/components/icon-button/

I like this syntax! I think it will end up being

import {Icon} from 'react-icons';

<IconButton icon={Icon} />

[braaar]

Brainstorming names

ButtonWithReactIcon ReactIconButton SymbolButton ActionButton

[seacurrent]

ActionButton gets my vote.

[simenandre]

I don't know, isn't all buttons meant to have an action? I'll do some research, see if find some other examples/names.

[braaar]

ButtonWithGraphic ButtonWithSymbol IndivButton

[simenandre]

How about AffixButton? As in a button with prefix and suffix, I imagine this contract:

<AffixButton suffix={<Icon />} />
<AffixButton prefix={<Icon />} />
<AffixButton prefix={<PreIcon />} suffix={<AfterIcon />} />

What do you think?

[braaar]

The name has its logic, I guess, but it's not intuitive at a glance, in my opinion. Something referring to the fact that the button has an icon, graphic, visual element on it is more intuitive.

I noticed a bug in the current implementation. There is a small margin on the text label which does not trigger the onClick action and also does not show the mouse as a cursor.

https://user-images.githubusercontent.com/5765650/134669788-697cc2e3-8346-4608-8f75-01bb2e0d3627.mov

[braaar]

Actually, the entire text area does not trigger the onClick.