diff --git a/src/components/Container.js b/src/components/Container.js index ef8a1a03..a5890381 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -51,6 +51,7 @@ const BOX_SHADOWS = ["header"]; const DEFAULT_PROPS = { bg: "transparent", + flexGrow: false, hasBorder: false, hasBreakpointWidth: false, hide: false, @@ -95,6 +96,11 @@ function Container(_props) { }), }; }, + flexGrow: ({ flexGrow }) => { + return { + flexGrow: flexGrow ? 1 : 0, + }; + }, hasBreakpointWidth: ({ hasBreakpointWidth, margin }, theme, bp) => { if (hasBreakpointWidth !== true) { if (margin) { @@ -165,6 +171,7 @@ Container.propTypes = { ...responsiveWidthType, ...responsiveHeightType, ...responsivePropType("bg", PropTypes.oneOf(BACKGROUNDS)), + ...responsivePropType("flexGrow", PropTypes.bool), ...responsivePropType("hasBorder", PropTypes.bool), ...responsivePropType("textStyle", PropTypes.oneOf(Text.TEXT_STYLES)), ...responsivePropType("textAlign", PropTypes.oneOf(Text.ALIGNS)), diff --git a/src/components/Container.test.js b/src/components/Container.test.js index 977a06f8..99a3fab2 100644 --- a/src/components/Container.test.js +++ b/src/components/Container.test.js @@ -13,6 +13,7 @@ describe("Container", () => { expect(node.tagName).toBe("DIV"); expect(node).toHaveStyle({ backgroundColor: "transparent", + flexGrow: 0, }); }); @@ -100,6 +101,14 @@ describe("Container", () => { }); }); + it("with flexGrow", () => { + render(Hello World); + + expect(screen.getByText("Hello World")).toHaveStyle({ + flexGrow: 1, + }); + }); + it("with hasBorder", () => { render(Hello World); diff --git a/src/components/ShadowContainer.js b/src/components/ShadowContainer.js index 0167076c..a79e048a 100644 --- a/src/components/ShadowContainer.js +++ b/src/components/ShadowContainer.js @@ -102,7 +102,7 @@ function getColors(backgroundVariant, shadowColor) { }; } -const SHADOW_SIZES = ["tiny", "small", "medium", "large"]; +const SHADOW_SIZES = ["none", "tiny", "small", "medium", "large"]; const SHADOW_DIRECTIONS = ["left", "right"]; const SHADOW_COLORS = ["grey", "blue", "pink", "purple"]; const SHADOW_CONTRASTS = ["low", "medium", "high"]; @@ -156,6 +156,10 @@ function ShadowContainer(props) { margin: responsiveMargin, padding: responsivePadding, shadowSize: ({ shadowSize }) => { + if (shadowSize === "none") { + return {}; + } + const contentMinSize = sizesMap[shadowSize].minSize; return { @@ -169,10 +173,17 @@ function ShadowContainer(props) { DEFAULT_PROPS, { shadowSize: ({ shadowSize }) => { + const display = shadowSize === "none" ? "none" : "block"; + + if (shadowSize === "none") { + return { display }; + } + const shadowOffset = sizesMap[shadowSize].offset; const shadowBorderWidth = sizesMap[shadowSize].borderWidth; return { + display, top: shadowOffset - contentBorderWidth, left: (shadowDirection === "left" ? -shadowOffset : shadowOffset) - @@ -189,6 +200,13 @@ function ShadowContainer(props) {