TextButton looks more like a button than text

[chrisrolfe198]

When using a text button within a table it does not line up because the TextButton has the same amount of padding as a Button as well as having the minimum width applied. (Note that the Actions title does not line up with the TextButton)

In the designs that I was provided for my feature this looks like this:

[duranmla]

@christopherrolfe198 thanks for letting us know this! it is very important to align how designers will express their design and the resources we give to devs to implement such things. here seems like designers use a TexButton that doesn't have padding whereas the implementation differs @agonzalezUX does it makes sense for us to remove the padding from TextButton or it is the design wrong?

[snapsnapturtle]

That's a good point indeed. I think in some circumstances, like a cancel button in a modal, the padding makes a lot of sense. However providing an option to remove the padding for other use cases could be beneficial

[agonzalezUX]

hi guys, the first thing I notice in the first screenshot that @christopherrolfe198 is sharing is that the font size between the SecondaryButtonS and the textButton is different. You can compare both "e" and see that the one inside the SecondaryButtonS is smaller than the one from the textButton. This drives me into two different hypothesis:

• The textbutton chris is using is bigger than the secondary one that's why it does not line up.
• We do have padding in our buttonText design from the library so, the layout the designer shared with you, maybe is using a link instead.

[agonzalezUX]

see image attached:

[chrisrolfe198]

@agonzalezUX - yeah this screenshot was taken whilst the feature was in development and has since been adjusted.

[agonzalezUX]

then, I don't understand the issue, sorry 😅

[chrisrolfe198]

So the issue is that the designs have an alignment with the table header, but the current components don't allow that: (See the lines to denote where the extra padding is)

[duranmla]

@agonzalezUX that's a good thing we can take a look in a separate thread. Here the problem seems to be like this:

• Designers has an element of TextButton without padding and another TextButton with padding (for cases like @snapsnapturtle just mentioned)
• Developers only have a single TextButton with padding

Shall we enforce everyone to use a single version of the TextButton or shall we allow devs to have both versions?

[agonzalezUX]

ahhhhhhmigo! the other alignement... In my opinion, flexibility is the leitmotiv of our system and I don't have any objection of adding it always that we document it properly :) so if you consider that including the option of having/not having padding is going to improve your work, fine for me

[duranmla]

In that sense, I think the way to go is to add a prop to allow TextButton to not have paddings.

[rafael-sepeda]

I agree with @agonzalezUX that if a designer wants to have a link -it is better to use a link, but not a button. At least I would expect a button to have paddings, so in one row a textButton and a regular one will be in one line. But, maybe, we can make the left/right paddings optional. Is that what you are proposing @duranmla ?

[duranmla]

No @rafael-sepeda there are moments where the TextButton is needed because it is a button no a link. Currently, it seems like:

@agonzalezUX that's a good thing we can take a look in a separate thread. Here the problem seems to be like this:

• Designers has an element of TextButton without padding and another TextButton with padding (for cases like @snapsnapturtle just mentioned)
• Developers only have a single TextButton with padding

Shall we enforce everyone to use a single version of the TextButton or shall we allow devs to have both versions?

In that sense, we either offer the two components for devs or we ensure everyone uses one. Although, maybe the case @christopherrolfe198 should use variant="danger" ?

Worth to mention that the debate on button as a link (which is agnostic to this topic) I think is not that black and white. Take a look to this thread https://twitter.com/buildsghost/status/1389475246294532097?s=20

[nlopin]

I see the "help wanted" tag, but as I see there is still a discussion. What solution do we need to apply?

All buttons must have equal height so we can put them in a row. The Padding prop should be moved to another issue

[duranmla]

There is no final decision here and also it seems everyone had a somewhat different definition of the problem despite my attempt to clarify at https://github.com/freenowtech/wave/issues/66#issuecomment-834272700 Let's go to the sync with this and made a decision there.

[duranmla]

The conclusion for this thread so far:

• Add support for developers to remove horizontal padding on <TextButton />
• Aim for a future where TextButton doesn't have any padding by default (not yet as it is breaking change heavy)

[rafael-sepeda]

@christopherrolfe198 any progress on this topic?

[lloydaf]

I will close this issue since there hasn't been activity in over 2 years, we can reopen this later if relevant.