Component - Button w Icon about marigold HOT 7 CLOSED

From a user perspective I'd find it easiest if we can use it like

<Button icon="Facebook" variant="primary.small">
	Buttontext
</Button>

and the icon automatically appears in the size mentioned in the button variant. Depending on the button variant, the icon is rendered in the respective color like Toshi mentioned :)

from marigold.

Hey @sebald @viktoria-schwarz do you have ideas how to implement the icon button?

In my opinion there are two parts but I can't stuck them together.

• On one side we have the theme where we can add the icon params (x/y padding etc.) like 'primary.large.icon'.
• On the other hand we have the icon. How to add the to the button component?

We could do something like this:

<Button variant="primary.small.icon">
   <Ticket /> Primary
 </Button> 

But then the user have to look about the variant with icon param and have to add the icon themselve. Is there an easier way? And I dont know if this would work 😄

from marigold.

At the moment this is the reason if we type this:

<Button variant="primary.small">
  <Ticket /> Primary
</Button>

from marigold.

First I try to write a test :) But this is a good approach.

from marigold.

Another idea (and maybe easier to implement) would be like this:

<Button variant="primary.small">
	<Facebook />
	<Text> blabla </Text>
</Button>

and adjust the Button and its children for spacings and alignment like

<Box as="button" themeSection="button" variant={variant} {...props}>
    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
        {children}
    </span>
</Box>

with respective additions in the theme (add 'inline-flex' to button.root and a marginRight to the Svg).

Added a first idea of it in #284

from marigold.

This is a good method! But this two aspects are important, too. (Maybe later)

• Maybe we have to find a solution for the small button default size. Default size is 24px. Small button should have 20px.
• If a button has an icon, padding-left should be: button.small: 12px instead of 16 and button.large: 24px instead of 32. But how to say to the button that he has an icon?

from marigold.

There is no silver bullet for this. There are many different implementations for this. My suggestion:

In order to preserve composability and allow for extension: don’t use an icon prop on the button. The button should not have to know anything about its children.

You can fix the alignment with flexbox. 🙂

from marigold.