chore: make directive cards a consistent height, add height prop to b…

…ox and card
Shopify · Sep 22, 2023 · 9df4943 · 9df4943
1 parent e437d75
commit 9df4943
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/polaris.shopify.com/src/components/Box/index.tsx b/polaris.shopify.com/src/components/Box/index.tsx
@@ -11,6 +11,7 @@ import styles from './Box.module.scss';
 
 export interface BoxProps {
   className?: ClassName;
+  height?: `${number}%`;
   padding?: ResponsiveProp<SpaceScale>;
   paddingInlineStart?: ResponsiveProp<SpaceScale>;
   paddingInlineEnd?: ResponsiveProp<SpaceScale>;
@@ -27,8 +28,12 @@ type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxProps>;
  * built. It renders a `div` element by default, customisable via the `as` prop.
  */
 export const Box = forwardRef(
-  ({as: Tag = 'div', className, padding = '0', ...props}, forwardedRef) => {
+  (
+    {as: Tag = 'div', height, className, padding = '0', ...props},
+    forwardedRef,
+  ) => {
     const style = {
+      height,
       ...getResponsiveProps('box', 'padding-block-start', 'space', padding),
       ...getResponsiveProps('box', 'padding-block-end', 'space', padding),
       ...getResponsiveProps('box', 'padding-inline-start', 'space', padding),

diff --git a/polaris.shopify.com/src/components/Card/index.tsx b/polaris.shopify.com/src/components/Card/index.tsx
@@ -1,19 +1,21 @@
 import styles from './Card.module.scss';
 import {ResponsiveProp} from '../../utils/various';
-import {Box} from '../Box';
+import {Box, BoxProps} from '../Box';
 import React from 'react';
 import {SpaceScale} from '@shopify/polaris-tokens';
 
 export function Card({
   children,
   className,
   padding = {xs: '4'},
+  height,
 }: React.PropsWithChildren<{
   padding?: ResponsiveProp<SpaceScale>;
   className?: string;
+  height?: BoxProps['height'];
 }>) {
   return (
-    <Box padding={padding} className={[styles.Card, className]}>
+    <Box padding={padding} className={[styles.Card, className]} height={height}>
       {children}
     </Box>
   );

diff --git a/polaris.shopify.com/src/components/Markdown/components/DirectiveCard/index.tsx b/polaris.shopify.com/src/components/Markdown/components/DirectiveCard/index.tsx
@@ -38,7 +38,7 @@ export const DirectiveCard = ({children, status}: DirectiveProps) => {
   });
 
   return (
-    <Card>
+    <Card height="100%">
       {image?.props?.src ? (
         <Stack gap="4">
           <Bleed marginInline="4" marginBlockStart="4">