Cannot remove button padding in variants.

[elenitaex5]

Description

Working with button variants, props like p, px and py doesn't work

CodeSandbox/Snack link

https://codesandbox.io/s/ecstatic-frog-uld3wb

Steps to reproduce

1. Create theme variant for button.
2. Create a button in your app.
3. You can padding even there's padding props as 0

NativeBase Version

3.4.15

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

Storybook

Additional Information

Hi! I'm working with Native Base Button variants, creating new Link variant, but padding modify only works if it pass through component like this.

<Button isDisabled={disabled} variant={buttonType} onPress={onPress} px={0} py={0}>
    {!loading ? text : <BeatingHeartIcon />}
</Button>

<Button text={t('login.request_a_new_one')} buttonType={'link'} onPress={() => {}} />

const variantLink = (props: Dict) => {
  const c = props?.theme?.colors

  return {
    bg: 'none',
    width: 'auto',
    px: 0,
    py: 0,
    _text: {
      color: c?.green?.main,
      fontWeight: 700
    }
  }
}

export const buttonVariants = {
  primary: variantPrimary,
  link: variantLink
}

But if I remove px and py and include it in variant as codesandbox below, padding still appears (like screenshot)

[ankit-tailor]

Hey @elenitaex5, It may be possible that you have not passed that into variants inside button theme.

Can you try out this below snippet? Let me know if it works for you.

const theme = extendTheme({
  components: {
    Button: {
      variants: buttonVariants
    }
  }
})

[elenitaex5]

Hey @elenitaex5, It may be possible that you have not passed that into variants inside button theme.

Can you try out this below snippet? Let me know if it works for you.

const theme = extendTheme({
  components: {
    Button: {
      variants: buttonVariants
    }
  }
})

Hi @ankit-tailor it isn't the problem. Button variants are working, and they are inside extendTheme problem only happens trying to modify padding in variants. Everything else is working right.

[mikehuebner]

@elenitaex5 I had this issue as well trying to mess with font sizes. There is a default prop of size: 'md' on the button which has default sizes and paddings. Variants don't seem to overwrite these styles, try this and let me know if that helps.

const theme = extendTheme({
  components: {
    Button: {
      variants: buttonVariants
      sizes: {
        py: null,
        px: null
      },
      // or even better
      defaultProps: {
        size: null
      }
    }
  }
})

[elenitaex5]

Hi @mikehuebner thanks for your help!!! It works for me. Hope this bug be solved in a future.

[ankit-tailor]

Hi Everyone, So here, Variant will be resolved first and then sizes will be resolved. So fontSize from size will override fontSize from variant. This might help you.

[elenitaex5]

@ankit-tailor problems are overriding paddings, do you mean creating custom sizes in button?

This is really an issue, if you're specifying padding, it must override default paddings.

[coreyroach]

Because (as @ankit-tailor mentioned) sizes is resolved after variant, I have been able to get it to work by passing a function to the sizes.lg object and use the variant value to set the size:

const theme = extendTheme({
  components: {
    Button: {
      defaultProps: {
        size: 'lg',
        variant: 'solid',
      },
      sizes: {
        lg: ({ variant }) => {
          const pMap = { solid: 4, link: 0 };
          return {
            py: pMap[variant],
            px: 3,
            _text: {
              fontSize: 'md',
            },
            _icon: {
              size: 'md',
            },
          };
        },
      },
      variants: buttonVariants,
    },
  },
});

A side-effect of this approach is that the returned object no longer "extends" the default lg object. So in my example, I've added the remaining "default" values for px, _text, and _icon. Omitting these values will still work, but you may experience some unexpected issues.

[krausediego]

This working for me.

Button: {
   variants: {
      link: {
          _important: { p: "0", h: "auto" },
      },
   },
},

[elenitaex5]

@krausediego there are many ways of fixing that, but without _important props should be overwritten as well. Maybe in new gluestack it would be fixed, but I think no one of this issues are gonna be fixed.