1

Am little bit rookie on Grommet and having issues. I'm trying to set different edgeSize values for different breakpoints in Grommet v2.14.0

Here you can find theme code ->

export const v3theme = {
  global: {
    edgeSize: {
      none: "0px",
      small: "23px",
      medium: "24px",
      large: "25px",
      xlarge: "26px"
    },
    breakpoints: {
      xsmall: {
        value: 478,
        edgeSize: {
          none: "0px",
          small: "1px",
          medium: "2px",
          large: "4px",
          xlarge: "5px"
        }
      },
      small: {
        value: 767,
        edgeSize: {
          none: "0px",
          small: "6px",
          medium: "7px",
          large: "8px",
          xlarge: "9px"
        }
      },
      medium: {
        value: 991,
        edgeSize: {
          none: "10px",
          small: "11px",
          medium: "12px",
          large: "13px",
          xlarge: "14px"
        }
      },
      large: {
        value: 1440,
        edgeSize: {
          none: "0px",
          small: "15px",
          medium: "16px",
          large: "17px",
          xlarge: "18px"
        }
      },
      xlarge: {
        edgeSize: {
          none: "0px",
          small: "19px",
          medium: "20px",
          large: "21px",
          xlarge: "22px"
        }
      }
    }
  }
};

And a basic Box component, which includes pad="large"

<GrommetBox pad={{ horizontal: "large" }}>test</GrommetBox>

Breakpoints are working well. But paddings are not.

Expected Behaviour At the xsmall breakpoint, padding-left/right has to be 4px At the small breakpoint, padding-left/right has to be 8px At the medium breakpoint, padding-left/right has to be 13px At the largebreakpoint, padding-left/right has to be 17px At the xlarge breakpoint, padding-left/right has to be 21px

Actual Behaviour Only small breakpoint's edgeSize is working properly. here is the screenshot

On the other breakpoint sizes, code is calling default global.edgeSize.large value, which is 25px in this case. here is the screenshot

And, I've also found an SandBox example from ShimiSun and tested my code over on it, the issue is still there. https://codesandbox.io/s/grommet-ts-textinput-type-forked-bcrle

Propably, it is related with responsiveBreakpoint prop. When I change it to responsiveBreakpoint:"xsmall"

Then, xsmall's value starting to work.

In short, I want to define all breakpoints as responsive.

Do you have any idea what I am doing wrong, or is it a common behaviour?

Thanks in advance.

bariskuran
  • 21
  • 3

1 Answers1

0

I think you are spot on

Propably, it is related with responsiveBreakpoint prop. When I change it to responsiveBreakpoint:"small"

Since you are defining new breakpoints that don't exist on grommet's base theme ("xsmall", etc...), then you need to redefine the responsiveBreakpoint so grommet will be aware of the actual breakpoint to trigger changes on the layout (border, direction, gap, margin, pad, and round).

If that seems to work for you, then that should be your answer.

That being said, please be mindful that adding more breakpoints to your application will drive more complexity in layout handling, so please avoid it if it's not necessary.

Shimi
  • 1,178
  • 8
  • 18
  • Thanks for answer Shimi, responsiveBreakpoint helps to solve a couple of my problems. But still, I couldn't figure out how I can use multiple (more than 2) breakpoints for edgeSize. Even if I use responsiveBreakpoints, edgeSize value doesn't change for the other breakpoints. I mean, for example when respBP is "xsmall" and when current size "xsmall", yes, edgeSize value is changing. But, when I change screenSize from medium to large, edgeSize doesn't change and it still uses global.edgeSize values even if I already defined individual edgeSize values for medium and large sizes. – bariskuran Jan 10 '21 at 14:23