How to override the default gap size of Stack?

[lucgagan]

It appears to default to 10px:

import { mapObject } from '../helpers.mjs';
import { css } from '../css/index.mjs';

const stackConfig = {
transform(props) {
  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
  return {
    display: "flex",
    flexDirection: direction,
    alignItems: align,
    justifyContent: justify,
    gap,
    ...rest
  };
}}

export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })

export const stack = (styles) => css(getStackStyle(styles))

How to override this value?

[anubra266]

@lucgagan In your config

[lucgagan]

Thank you!

[lucgagan]

Unrelated: What's the thing that you are using that shows 'config: ' parameter name in defineConfig? I assume it is some sort of extenion.

[lucgagan]

It would be also a lot easier to do this if Panda exported the default patterns.

[lucgagan]

This worked:

patterns: {
  extend: {
    stack: {
      // This is copied from the default generated styled-system/patterns/stack.mjs
      // When we have a better way to extend patterns, we can remove this
      // https://github.com/chakra-ui/panda/discussions/810
      // We are doing this simply to modify the default gap value to 16px
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      transform: (props: any) => {
        const {
          align,
          justify,
          direction = 'column',
          gap = '16px',
          ...rest
        } = props;
        return {
          alignItems: align,
          display: 'flex',
          flexDirection: direction,
          gap,
          justifyContent: justify,
          ...rest,
        };
      },
    },
    wrap: {
      // This is copied from the default generated styled-system/patterns/wrap.mjs
      // When we have a better way to extend patterns, we can remove this
      // https://github.com/chakra-ui/panda/discussions/810
      // We are doing this simply to modify the default gap value to 16px
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      transform: (props: any) => {
        const {
          columnGap,
          rowGap,
          gap = columnGap || rowGap ? undefined : '16px',
          align,
          justify,
          ...rest
        } = props;
        return {
          alignItems: align,
          columnGap,
          display: 'flex',
          flexWrap: 'wrap',
          gap,
          justifyContent: justify,
          rowGap,
          ...rest,
        };
      },
    },
  },
},

[anubra266]

@lucgagan the config thing is a vscode setting

  "javascript.inlayHints.parameterNames.enabled": "all",

[doubleaxe]

For those coming from google, now can be achieved easier:

    patterns: {
        extend: {
            // remove gap
            stack: definePattern({
                defaultValues: { direction: 'column', gap: undefined },
            }),
            vstack: definePattern({
                defaultValues: { gap: undefined },
            }),
            hstack: definePattern({
                defaultValues: { gap: undefined },
            }),
        },
    },