refactor: height prop values to be descriptive (#2638)

commercetools · Nov 7, 2023 · b488e2b · b488e2b · vercel · Nov 7, 2023
1 parent a743bcf
commit b488e2b
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 24 deletions.
diff --git a/.changeset/stale-radios-punch.md b/.changeset/stale-radios-punch.md
@@ -5,4 +5,4 @@
 
 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.
+There's a new property named `height` (available values: `expanded` and `collapsed`; the former is the default) that will allow consumers to control the vertical space usage of the component.
diff --git a/packages/components/card/src/card.tsx b/packages/components/card/src/card.tsx
@@ -55,7 +55,7 @@ const Card = (props: TCardProps) => (
       // This is mostly useful in case custom styles are targeting this element.
       <div>{props.children}</div>
     ) : (
-      <Inset scale={props.insetScale} height="100%">
+      <Inset scale={props.insetScale} height="expanded">
         {props.children}
       </Inset>
     )}

diff --git a/packages/components/card/src/card.visualroute.jsx b/packages/components/card/src/card.visualroute.jsx
@@ -110,12 +110,8 @@ export const component = () => (
             height: 100%;
           `}
         >
-          <div>
-            {text}
-          </div>
-          <div>
-            {text}
-          </div>
+          <div>{text}</div>
+          <div>{text}</div>
         </div>
       </WrappedCard>
     </Spec>

diff --git a/packages/components/spacings/spacings-inset-squish/README.md b/packages/components/spacings/spacings-inset-squish/README.md
@@ -36,11 +36,11 @@ import Spacings from '@commercetools-uikit/spacings';
 
 ## Properties
 
-| Props      | Type             | Required | Values            | Default |
-| ---------- | ---------------- | :------: | ----------------- | ------- |
-| `scale`    | `String`         |    -     | `['s', 'm', 'l']` | `m`     |
-| `height`   | `String`         |    -     | `auto`, `100%`    | `auto`  |
-| `children` | `PropTypes.node` |    -     | -                 | -       |
+| Props      | Type             | Required | Values                  | Default     |
+| ---------- | ---------------- | :------: | ----------------------- | ----------- |
+| `scale`    | `String`         |    -     | `['s', 'm', 'l']`       | `m`         |
+| `height`   | `String`         |    -     | `collapsed`, `expanded` | `collapsed` |
+| `children` | `PropTypes.node` |    -     | -                       | -           |
 
 ## Scales
 

diff --git a/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx b/packages/components/spacings/spacings-inset-squish/src/inset-squish.tsx
@@ -6,7 +6,7 @@ import { filterDataAttributes } from '@commercetools-uikit/utils';
 export type TScale = 's' | 'm' | 'l';
 export type TInsetSquishProps = {
   scale: TScale;
-  height: 'auto' | '100%';
+  height: 'collapsed' | 'expanded';
   children: ReactNode;
 };
 
@@ -27,7 +27,7 @@ const InsetSquish = (props: TInsetSquishProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: ${props.height};
+      height: ${props.height === 'expanded' ? '100%' : 'auto'};
     `}
     {...filterDataAttributes(props)}
   >
@@ -36,7 +36,7 @@ const InsetSquish = (props: TInsetSquishProps) => (
 );
 const defaultProps: Pick<TInsetSquishProps, 'scale' | 'height'> = {
   scale: 'm',
-  height: 'auto',
+  height: 'collapsed',
 };
 InsetSquish.displayName = 'InsetSquish';
 InsetSquish.defaultProps = defaultProps;

diff --git a/packages/components/spacings/spacings-inset/README.md b/packages/components/spacings/spacings-inset/README.md
@@ -26,11 +26,11 @@ import Spacings from '@commercetools-uikit/spacings';
 
 ## Properties
 
-| Props      | Type             | Required | Values                        | Default |
-| ---------- | ---------------- | :------: | ----------------------------- | ------- |
-| `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`     |
-| `height`   | `String`         |    -     | `auto`, `100%`                | `auto`  |
-| `children` | `PropTypes.node` |    -     | -                             | -       |
+| Props      | Type             | Required | Values                        | Default     |
+| ---------- | ---------------- | :------: | ----------------------------- | ----------- |
+| `scale`    | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']` | `x`         |
+| `height`   | `String`         |    -     | `collapsed`, `expanded`       | `collapsed` |
+| `children` | `PropTypes.node` |    -     | -                             | -           |
 
 ## Scales
 

diff --git a/packages/components/spacings/spacings-inset/src/inset.tsx b/packages/components/spacings/spacings-inset/src/inset.tsx
@@ -24,15 +24,15 @@ const getPadding = (scale?: TScale) => {
 
 export type TInsetProps = {
   scale: TScale;
-  height: 'auto' | '100%';
+  height: 'collapsed' | 'expanded';
   children?: ReactNode;
 };
 
 const Inset = (props: TInsetProps) => (
   <div
     css={css`
       padding: ${getPadding(props.scale)};
-      height: ${props.height};
+      height: ${props.height === 'expanded' ? '100%' : 'auto'};
     `}
     {...filterDataAttributes(props)}
   >
@@ -41,7 +41,7 @@ const Inset = (props: TInsetProps) => (
 );
 const defaultProps: Pick<TInsetProps, 'scale' | 'height'> = {
   scale: 'm',
-  height: 'auto',
+  height: 'collapsed',
 };
 Inset.displayName = 'Inset';
 Inset.defaultProps = defaultProps;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@

		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.
		There's a new property named `height` (available values: `expanded` and `collapsed`; the former is the default) that will allow consumers to control the vertical space usage of the component.