search

brainly / style-guide

:art: Brainly Front-End Style Guide
https://styleguide.brainly.com/
Other
162 stars 30 forks source link

More control over padding of Box component #1962

Open seahindeniz opened 3 years ago

seahindeniz commented 3 years ago

Hi

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

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 commented 3 years ago

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 commented 3 years ago

Thanks, looking forward to it :v: