Skip to content

Commit

Permalink
Merge pull request #392 from dcos-labs/mp/feat/DCOS-56745-spacingbox-…
Browse files Browse the repository at this point in the history
…spacing-per-side

DCOS-56745: allow SpacingBox to set spacing per side
  • Loading branch information
mperrotti authored Oct 31, 2019
2 parents d65b2be + 2ee6053 commit b675727
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 5 deletions.
3 changes: 1 addition & 2 deletions packages/shared/styles/styleUtils/modifiers/modifierUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export type BoxSides =
| "bottom"
| "left"
| "horiz"
| "vert"
| undefined;
| "vert";
export type SpaceSizes = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "none";
export type SpaceSize = BreakpointConfig<SpaceSizes>;

Expand Down
22 changes: 20 additions & 2 deletions packages/styleUtils/modifiers/components/SpacingBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,32 @@ interface SpacingBoxProps extends BoxProps {
* The size of the space to apply. It can set 1 spacing size for all breakpoints, or it can be used to set different spacing values at different viewport width breakpoints
*/
spacingSize?: SpaceSize;
/**
* Used to set different spacing values on different sides of the element
*/
spacingSizePerSide?: { [Side in NonNullable<BoxSides>]?: SpaceSize };
}

const SpacingBox = (props: SpacingBoxProps) => {
const { side, spacingSize, className, ...other } = props;
const {
side = "all",
spacingSize,
className,
spacingSizePerSide,
...other
} = props;
const paddingStyles = spacingSizePerSide
? Object.keys(spacingSizePerSide).map(sideToSize =>
padding(
sideToSize as BoxSides,
spacingSizePerSide[sideToSize] as SpaceSize
)
)
: padding(side, spacingSize);

return (
<Box
className={cx(className, padding(side, spacingSize))}
className={cx(className, paddingStyles)}
dataCy="spacingBox"
{...other}
/>
Expand Down
42 changes: 41 additions & 1 deletion packages/styleUtils/modifiers/stories/SpacingBox.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, select } from "@storybook/addon-knobs";
import { withKnobs, select, object } from "@storybook/addon-knobs";
import { withReadme } from "storybook-readme";
import SpacingBox from "../components/SpacingBox";
import { outlineDecorator } from "./helpers/outlineDecorator";
Expand Down Expand Up @@ -66,4 +66,44 @@ storiesOf("Style utilities/Modifiers/SpacingBox", module)
Resize your viewport width to see the spacing change
</SpacingBox>
);
})
.add("spacingSizePerSide", () => {
const defaultValue = {
top: "m",
bottom: "xs",
horiz: "xl"
};
const spacingSizePerSide = object(
"spacingSizePerSide",
defaultValue,
"spacingSizePerSide"
);

return (
<SpacingBox
spacingSizePerSide={
spacingSizePerSide as { [Side in BoxSides]?: SpaceSize }
}
>
Use the Knobs panel to change the sizes of the spacing per side
</SpacingBox>
);
})
.add("responsive spacingSizePerSide", () => {
return (
<SpacingBox
spacingSizePerSide={{
vert: {
default: "none",
medium: "l"
},
horiz: {
default: "none",
medium: "xl"
}
}}
>
Resize your viewport width to see the spacing change
</SpacingBox>
);
});
48 changes: 48 additions & 0 deletions packages/styleUtils/modifiers/tests/SpacingBox.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,52 @@ describe("SpacingBox", () => {

expect(toJson(component)).toMatchSnapshot();
});

it("renders with different spacing on each side", () => {
const component = shallow(
<SpacingBox
tag="div"
spacingSizePerSide={{
top: "none",
right: "xs",
bottom: "s",
left: "m"
}}
>
content
</SpacingBox>
);

expect(toJson(component)).toMatchSnapshot();
});

it("renders with responsive spacing on each side", () => {
const component = shallow(
<SpacingBox
tag="div"
spacingSizePerSide={{
top: {
default: "none",
medium: "xs"
},
right: {
default: "none",
medium: "s"
},
bottom: {
default: "none",
medium: "m"
},
left: {
default: "none",
medium: "l"
}
}}
>
content
</SpacingBox>
);

expect(toJson(component)).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,95 @@ exports[`SpacingBox renders with all props 1`] = `
</Box>
`;

exports[`SpacingBox renders with different spacing on each side 1`] = `
.emotion-0 {
padding-top: 0;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 16px;
}
<Box
bgImageOptions={
Object {
"position": undefined,
"repeat": undefined,
"size": undefined,
}
}
className="emotion-0"
dataCy="spacingBox"
tag="div"
>
content
</Box>
`;

exports[`SpacingBox renders with responsive spacing on each side 1`] = `
@media (min-width:0) {
.emotion-0 {
padding-top: 0;
}
}
@media (min-width:900px) {
.emotion-0 {
padding-top: 8px;
}
}
@media (min-width:0) {
.emotion-0 {
padding-right: 0;
}
}
@media (min-width:900px) {
.emotion-0 {
padding-right: 12px;
}
}
@media (min-width:0) {
.emotion-0 {
padding-bottom: 0;
}
}
@media (min-width:900px) {
.emotion-0 {
padding-bottom: 16px;
}
}
@media (min-width:0) {
.emotion-0 {
padding-left: 0;
}
}
@media (min-width:900px) {
.emotion-0 {
padding-left: 24px;
}
}
<Box
bgImageOptions={
Object {
"position": undefined,
"repeat": undefined,
"size": undefined,
}
}
className="emotion-0"
dataCy="spacingBox"
tag="div"
>
content
</Box>
`;

exports[`SpacingBox renders with responsive spacingSize 1`] = `
@media (min-width:0) {
.emotion-0 {
Expand Down

0 comments on commit b675727

Please sign in to comment.