Add to Cart button border-radius about store-components

[klzns]

I totally agree with you that's not the ideal 💯

But our BuyButton component was implemented in a way that it uses the Styleguide's Button component as the root component and our Styleguide was not implemented with CSS Handles or Store Framework in mind since it's development started before Store Framework.

We could add a <div> wrapping the Styleguide's Button making the BuyButton component to be something like:

<div class="vtex-store-components-2-x-buyButton">
  <button class="vtex-button" />
  ...

But this change would break stores that are customizing the CSS with hierarchical HTML structure in mind. Example:

.flex-layout--buyButton > button {
  border-radius: 10px;
}

A store with this CSS would break its layout when we added this new div element because now the button is not a direct child of .flex-layout--buyButton (and that's why the styles v2 limitations was put in place).

The solution I proposed it's a workaround to the current limitations.

We intend to solve this in a new major version of this block 🙏

[klzns]

You can achieve that by changing this value:
https://github.com/vtex-apps/store-theme/blob/master/styles/configs/style.json#L243

This will affect all instances of border radius Tachyons classes:

[cristian-milea]

@klzns , thanks for your response

This is not ideal. It also changes all br2 tachyon usages for vtex-input-prefix__group (the search container)

if i follow this method also for padding, like pa0 for the button (i have them larger in the design), i will break the menu container, where pa0 is ok

[klzns]

Can you print the HTML element you are trying to target?

[cristian-milea]

i want to make all buttons have certain radius, paddings, and font sizes without affecting other elements

<button tabindex="0" class="vtex-button bw1 ba fw5 v-mid relative pa0 lh-solid br2 min-h-regular t-action bg-action-primary b--action-primary c-on-action-primary hover-bg-action-primary hover-b--action-primary hover-c-on-action-primary pointer w-100 " type="button"><div class="vtex-button__label flex items-center justify-center h-100 ph6 w-100 border-box " style="padding-top:.25em;padding-bottom:.32em"><div class="vtex-add-to-cart-button-0-x-buttonDataContainer flex justify-center"><span class="vtex-add-to-cart-button-0-x-buttonText">Adaugă în coș</span></div></div></button>

[klzns]

In fact, this handle doesn't target the button element. To achieve this you can wrap the buy button with a flex-layout with a blockClass:

  "flex-layout.row#buy-button": {
    "props": {
      "blockClass": "buyButton",
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  },

Then in styles/css/vtex.flex-layout.css target the button with the allowed :global(.vtex- selector:

.flexRow--buyButton :global(.vtex-button) {
  border-radius: 10px;
}

You can see that it worked:

About font on buttons, it might make sense to change the typography tokens related to buttons:
https://github.com/vtex-apps/store-theme/blob/master/styles/configs/style.json#L318-L337

More on this here: https://styleguide.vtex.com/#/Styles?id=section-typography#action

[cristian-milea]

That means we have to wrap ALL our buy buttons everywhere in the site and it is cumbersome.
Why isn't Vtex exposing the buy-button with a css handle as all the other components?