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) {