More control over padding of Box component

[seahindeniz]

Hi

Box component has padding modifiers but each side/angle can have the same padding

Is it possible/suitable for adding additional modifiers to have different paddings on horizontal and vertical angles? Something like:

type PaddingType = "xxs" | "xs" | "s" | "m" | "l" | "xl";

export type BoxPropsType = {
  paddingY?: PaddingType;
  paddingX?: PaddingType;
  padding?: PaddingType;
};

Props can be separated with union types but I'm not sure that fits with the storybook.

[coderitual]

Hey @seahindeniz, this is definitely something on our radar. Before that happens we are going to introduce utility classes based on our design system for usage in app layer. This hopefully will help fixing such issues for existing components. Once we have utility approach in place and properly tested we gonna take care of layout components (like mentioned box) to make them more flexible in terms of spacing related props.

[seahindeniz]

Thanks, looking forward to it :v: