Feat/size prop

[lissavxo]

Related to #230

Description

Added size prop, the size config will apply a scale to the button making it smaller or larger. Available options are 'xs', 'sm', 'md'(default), 'lg', 'xl'.

Test plan

Test size prop options 'xs', 'sm', 'md', 'lg', 'xl'

[Klakurka]

• In paybutton-generator.html, can you make the 'Size' input a dropdown?
• For now, let's keep the button size inside the dialog/widget the same. Later on, we can potentially do a v2 that makes those "smaller" in some ways but for now I think it just makes more sense to leave them as is.

[Klakurka]

• The actual container div size needs to be adjusted too (both bigger or smaller as necessary):
• How about adding some full-word aliases? eg. "extrasmall", "small", "medium", "large", "extralarge".

[chedieck]

Can you elaborate why this props is passed all the way down to PaybuttonDialog, WidgetContainer and Widget? I ask because the affected button exists before these components, and not inside them.

[chedieck]

UpperCamelCase here, since it refers to a type

[lissavxo]

Can you elaborate why this props is passed all the way down to PaybuttonDialog, WidgetContainer and Widget? I ask because the affected button exists before these components, and not inside them.

This way, I can control which button receives the size prop config. Only the PayButton outside the dialog and widget will receive the size prop.

[Klakurka]

• The div size is still the same no matter what button size is chosen (same point I made before).

[chedieck]

I think this is more complicated than it first seemed. To change the size, it's necessary to modify paybutton/src/index.tsx's Paybutton.render function, since it's the outer div (the one where the paybutton is rendered inside) that needs to have its style modified.

[chedieck]

Conflicts

[lissavxo]

resolved

[Klakurka]

Doesn't build for me:

[lissavxo]

Doesn't build for me:

Should be okay now

[chedieck]

would be possible to change the outer container someway other than by using transform?
The problem with transform is that it overlaps the outer stuff:

(tested using https://jsfiddle.net/ktu0q4o1, if you wanna experiment there)

Here is the same thing happening in PayButton (I added blue background color to the outer <div class="paybutton">, to show how it expands without pushing stuff in the side)

[lissavxo]

would be possible to change the outer container someway other than by using transform? The problem with transform is that it overlaps the outer stuff:

(tested using https://jsfiddle.net/ktu0q4o1, if you wanna experiment there)

Here is the same thing happening in PayButton (I added blue background color to the outer <div class="paybutton">, to show how it expands without pushing stuff in the side)

Now we are just changing the font size instead of transform

[chedieck]

Now we are just changing the font size instead of transform

I see, and this apparently expands the button size much like transform did.
Changing with transform:

Changing with font-size only:

There are some differences, but overall it expands the area that the button occupies without making the neighboring content adjust to these new sizes.

If there were a way to e.g. change the div's width instead of transforming it or only increasing the font-size, that would make the sibling HTML tags actually consider that space as "taken" and show buttons that don't overlap

I tried to make this work but failed, maybe @johnkuney can help us make this work?

[johnkuney]

For sure, I may not be understanding the issue exactly, but I think it's more a problem with the grid css in our index.html file.

The grid columns aren't really responsive to the content width, it's instead fitting as many columns it can that are at least 180px on each row. So if the content is larger it overflows and if its its smaller it doesnt adjust. At least I think thats whats happening

If we move to a flexbox layout everything works as expected. Hope you dont mind, I'll push some tweaks I made to make our preview file layout work, I also added some adjustments to the border radius so it scales with the button size as I thought that was a bit better than 10px on every size

[Klakurka]

Conflicts.