Refactor Inset components vertical space usage (#2635)

* refactor: refactor inset components changes to be more retrocompatible

* chore: add changesets

* docs: update readmes

* docs: fix readmes

* refactor(spacings): rename components property

* refactor: update readme

* refactor(spacings): change property available values

* refactor(spacings): change property available values

.changeset/proud-pugs-decide.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/card': minor
+---
+
+Make card content to always use all available vertical space.

.changeset/stale-radios-punch.md

@@ -0,0 +1,8 @@
+---
+'@commercetools-uikit/spacings-inset-squish': minor
+'@commercetools-uikit/spacings-inset': minor
+---
+
+Refactor vertical space usage so consumers can control it.
+
+There's a new property named `height` (available values: `auto` and `100%`; the former is the default) that will allow consumers to control the vertical space usage of the component.

packages/components/card/src/card.tsx

@@ -55,7 +55,9 @@ const Card = (props: TCardProps) => (
       // This is mostly useful in case custom styles are targeting this element.
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale}>{props.children}</Inset>
+      <Inset scale={props.insetScale} height="100%">
+        {props.children}
+      </Inset>
     )}
   </div>
 );

packages/components/card/src/card.visualroute.jsx

@@ -17,85 +17,106 @@ const WrappedCard = (props) => (
     css={css`
       margin: 16px;
       width: 300px;
+      height: ${props.height || 'auto'};
     `}
     {...props}
   >
-    <Text.Body>{props.children}</Text.Body>
+    {props.children}
   </Card>
 );
 
 export const component = () => (
   <Suite>
     <Spec label="Type - Raised, Theme - Light, InsetScale - None">
       <WrappedCard type="raised" theme="light" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - None">
       <WrappedCard type="raised" theme="dark" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - None">
       <WrappedCard type="flat" theme="light" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - None">
       <WrappedCard type="flat" theme="dark" insetScale="none">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
 
     <Spec label="Type - Raised, Theme - Light, InsetScale - S">
       <WrappedCard type="raised" theme="light" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - S">
       <WrappedCard type="raised" theme="dark" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - S">
       <WrappedCard type="flat" theme="light" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - S">
       <WrappedCard type="flat" theme="dark" insetScale="s">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
 
     <Spec label="Type - Raised, Theme - Light, InsetScale - M">
       <WrappedCard type="raised" theme="light" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Dark, InsetScale - M">
       <WrappedCard type="raised" theme="dark" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Light, InsetScale - M">
       <WrappedCard type="flat" theme="light" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Flat, Theme - Dark, InsetScale - M">
       <WrappedCard type="flat" theme="dark" insetScale="m">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Light, InsetScale - L">
       <WrappedCard type="raised" theme="light" insetScale="l">
-        {text}
+        <Text.Body>{text}</Text.Body>
       </WrappedCard>
     </Spec>
     <Spec label="Type - Raised, Theme - Light, InsetScale - XL">
       <WrappedCard type="raised" theme="light" insetScale="xl">
-        {text}
+        <Text.Body>{text}</Text.Body>
+      </WrappedCard>
+    </Spec>
+
+    <Spec label="Content using all vertical space from the parent">
+      <WrappedCard type="raised" theme="light" insetScale="m" height="400px">
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+          `}
+        >
+          <div>
+            {text}
+          </div>
+          <div>
+            {text}
+          </div>
+        </div>
       </WrappedCard>
     </Spec>
   </Suite>

packages/components/spacings/spacings-inset-squish/README.md

@@ -39,6 +39,7 @@ import Spacings from '@commercetools-uikit/spacings';
 | Props      | Type             | Required | Values            | Default |
 | ---------- | ---------------- | :------: | ----------------- | ------- |
 | `scale`    | `String`         |    -     | `['s', 'm', 'l']` | `m`     |
+| `height`   | `String`         |    -     | `auto`, `100%`    | `auto`  |
 | `children` | `PropTypes.node` |    -     | -                 | -       |
 
 ## Scales

packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx

@@ -6,6 +6,7 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   scale: TScale;
+  height: 'auto' | '100%';
   children: ReactNode;
 };
 
@@ -26,15 +27,16 @@ const InsetSquish = (props: TInsetSquishProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: 100%;
+      height: ${props.height};
     `}
     {...filterDataAttributes(props)}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetSquishProps, 'scale'> = {
+const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
   scale: 'm',
+  height: 'auto',
 };
 InsetSquish.displayName = 'InsetSquish';
 InsetSquish.defaultProps = defaultProps;

packages/components/spacings/spacings-inset/README.md

@@ -29,6 +29,7 @@ import Spacings from '@commercetools-uikit/spacings';
 | Props      | Type             | Required | Values                        | Default |
 | ---------- | ---------------- | :------: | ----------------------------- | ------- |
 | `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`     |
+| `height`   | `String`         |    -     | `auto`, `100%`                | `auto`  |
 | `children` | `PropTypes.node` |    -     | -                             | -       |
 
 ## Scales

packages/components/spacings/spacings-inset/src/inset.tsx

@@ -24,22 +24,24 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   scale: TScale;
+  height: 'auto' | '100%';
   children?: ReactNode;
 };
 
 const Inset = (props: TInsetProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: 100%;
+      height: ${props.height};
     `}
     {...filterDataAttributes(props)}
   >
     {props.children}
   </div>
 );
-const defaultProps: Pick<TInsetProps, 'scale'> = {
+const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
   scale: 'm',
+  height: 'auto',
 };
 Inset.displayName = 'Inset';
 Inset.defaultProps = defaultProps;