replace childGap with gap wip

palmetto · Dec 28, 2023 · 8f28518 · 8f28518
1 parent 5a057fa
commit 8f28518
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 33 deletions.
diff --git a/src/components/Accordion/Accordion.Codesandbox.stories.mdx b/src/components/Accordion/Accordion.Codesandbox.stories.mdx
@@ -42,7 +42,7 @@ export default () => {
         >
           What is solar energy? How do solar panels work?
         </Accordion.PanelSummary>
-        <Accordion.PanelDetails childGap="md">
+        <Accordion.PanelDetails gap="md">
           <p>
             Solar panels, also called photovoltaic or PV panels, consist of solar cells that are
             designed to capture the radiant light and heat contained in sunlight and convert it

diff --git a/src/components/Accordion/Accordion.Overview.stories.mdx b/src/components/Accordion/Accordion.Overview.stories.mdx
@@ -50,7 +50,7 @@ Accordions are useful when you want to toggle between hiding and showing additio
             >
               What is solar energy? How do solar panels work?
             </Accordion.PanelSummary>
-            <Accordion.PanelDetails childGap="md">
+            <Accordion.PanelDetails gap="md">
               <p>
                 Solar panels, also called photovoltaic or PV panels, consist of solar cells that are
                 designed to capture the radiant light and heat contained in sunlight and convert it

diff --git a/src/components/Accordion/AccordionPanelSummary.tsx b/src/components/Accordion/AccordionPanelSummary.tsx
@@ -17,7 +17,7 @@ export const AccordionPanelSummary: React.FC<AccordionPanelSummaryProps> = ({
   ...restProps
 }) => (
   <DetailsSummary
-    childGap="sm"
+    gap="sm"
     display="flex"
     direction="row"
     fontWeight={fontWeight}

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -110,7 +110,7 @@ export const Alert: FC<AlertProps> = ({
   return (
     <Box
       alignItems="flex-start"
-      childGap="sm"
+      gap="sm"
       className={alertContainerClasses}
       direction="row"
       padding={isCompact ? 'xs' : 'md'}
@@ -124,7 +124,7 @@ export const Alert: FC<AlertProps> = ({
         {render ? (
           render()
         ) : (
-          <Box display="block" childGap={message && title ? '2xs' : undefined}>
+          <Box display="block" gap={message && title ? '2xs' : undefined}>
             {title && (
               <Heading as="h4" size="md">
                 {title}

diff --git a/src/components/Badge/Badge.Overview.stories.mdx b/src/components/Badge/Badge.Overview.stories.mdx
@@ -45,7 +45,7 @@ Badges come in different variants based on the kind of message being delivered t
         'danger',
       ];
       return (
-        <Box direction="row" childGap="sm">
+        <Box direction="row" gap="sm">
           {variants.map(variant => (
             <Badge message={variant} variant={variant} key={variant} />
           ))}
@@ -65,7 +65,7 @@ so the badge can be a different size per breakpoint.
     {() => {
       return (
         <>
-          <Box direction="column" alignItems="flex-start" childGap="md">
+          <Box direction="column" alignItems="flex-start" gap="md">
             <Badge size="sm" message="Small" />
             <Badge size="md" message="Medium" />
             <Badge size="lg" message="Large" />

diff --git a/src/components/Badge/Badge.VisualTests.stories.tsx b/src/components/Badge/Badge.VisualTests.stories.tsx
@@ -15,10 +15,10 @@ export default {
 } as Meta;
 
 const Template: Story<BadgeProps> = args => (
-  <Box childGap="xl">
+  <Box gap="xl">
     {BADGE_SIZES.map(size => (
-      <Box childGap="sm" key={size}>
-        <Box childGap="sm" direction="row">
+      <Box gap="sm" key={size}>
+        <Box gap="sm" direction="row">
           {BADGE_VARIANTS.map(variant => (
             <Badge
               {...args}

diff --git a/src/components/Box/Box.Codesandbox.stories.mdx b/src/components/Box/Box.Codesandbox.stories.mdx
@@ -8,15 +8,15 @@ A `<Box>` is a layout component to build UIs with consistent padding and spacing
 
 - Its content is arranged in a specified `direction`, with 'column' being the default
 - Renders a `<div />` element by default, but can be changed using `as`
-- Allows you to specify the spacing between child elements using `childGap`
+- Allows you to specify the spacing between child elements using `gap`
 - Many props accept `ResponsiveProp` that take an object with keys that correspond to <a href="?path=/story/design-tokens-design-tokens--page#breakpoints">breakpoint tokens</a>
 
 ```js codesandbox=palmetto-components
 import React from 'react';
 import { Box } from '@palmetto/palmetto-components';
 
 export default () => (
-  <Box childGap="md">
+  <Box gap="md">
     <Box
       padding="xl"
       background="primary-100"
@@ -27,7 +27,7 @@ export default () => (
     >
       I am a box with a green background and border
     </Box>
-    <Box childGap={{ base: 'sm', tablet: 'md', desktop: 'lg' }} direction="row">
+    <Box gap={{ base: 'sm', tablet: 'md', desktop: 'lg' }} direction="row">
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />
       <Box flex="auto" radius="md" background="secondary-100" height="lg" />

diff --git a/src/components/Box/Box.Playground.stories.tsx b/src/components/Box/Box.Playground.stories.tsx
@@ -29,7 +29,19 @@ export default {
       description: 'number of child Boxes to render within the parent Box',
       defaultValue: 5,
     },
-    childGap: {
+    gap: {
+      control: {
+        type: 'select',
+        options: [null, ...SPACING_OPTIONS],
+      },
+    },
+    columnGap: {
+      control: {
+        type: 'select',
+        options: [null, ...SPACING_OPTIONS],
+      },
+    },
+    rowGap: {
       control: {
         type: 'select',
         options: [null, ...SPACING_OPTIONS],
@@ -439,7 +451,7 @@ Playground.args = {
   direction: 'row',
   childWidth: 'lg',
   childHeight: 'lg',
-  childGap: 'sm',
+  gap: 'sm',
   padding: 'lg',
   width: '100',
   childBackground: 'white',

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -102,7 +102,7 @@ export interface BoxProps {
   /**
    * Sets the gaps (gutters) between columns.
    */
-  columnGap?: BaseSpacing | ResponsiveProp<BaseSpacing> | string;
+  columnGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
   /**
    * Cursor style. Use any standard CSS value.
    */
@@ -172,7 +172,7 @@ export interface BoxProps {
   /**
    * Sets the gaps (gutters) between rows and columns.
    */
-  gap?: BaseSpacing | ResponsiveProp<BaseSpacing> | string;
+  gap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
   /**
    * How space between and around content items is distributed along the main-axis a flex Box
    */
@@ -228,7 +228,7 @@ export interface BoxProps {
   /**
    * Sets the gaps (gutters) between rows.
    */
-  rowGap?: BaseSpacing | ResponsiveProp<BaseSpacing> | string;
+  rowGap?: BaseSpacing | ResponsiveProp<BaseSpacing>;
   /**
    * The size of the drop shadow applied to the Box
    */

diff --git a/src/components/Button/Button.Overview.stories.mdx b/src/components/Button/Button.Overview.stories.mdx
@@ -35,7 +35,7 @@ The `variant` prop determines which color variant to render.
       },
     }}
   >
-    <Box alignItems="center" childGap="sm" direction="row">
+    <Box alignItems="center" gap="sm" direction="row">
       <Button variant="primary">Primary</Button>
       <Button variant="success">Success</Button>
       <Button variant="danger">Danger</Button>
@@ -63,7 +63,7 @@ the color of the primary CTA but makes the hierarchy clear. The background is tr
       },
     }}
   >
-    <Box alignItems="center" childGap="sm" direction="row">
+    <Box alignItems="center" gap="sm" direction="row">
       <Button variant="primary" isOutlined>
         Primary
       </Button>
@@ -103,7 +103,7 @@ so it can have different sizes at different breakpoints.
       },
     }}
   >
-    <Box childGap="sm" direction="row" alignItems="flex-start">
+    <Box gap="sm" direction="row" alignItems="flex-start">
       <Button size="xs" variant="light">
         Extra Small
       </Button>
@@ -149,7 +149,7 @@ Use the `fullWidth` prop to allow the button to grow to its container's full wid
 
 <Canvas>
   <Story name="Full Width">
-    <Box childGap="md">
+    <Box gap="md">
       <Button fullWidth>Full Width</Button>
       <Button fullWidth isOutlined>
         Full Width
@@ -164,15 +164,15 @@ Add an icon to the left or right inside the Button using the `iconPrefix` and `i
 
 <Canvas>
   <Story name="With Icons">
-    <Box display="flex" direction="row" childGap="md">
+    <Box display="flex" direction="row" gap="md">
       <Button variant="primary" iconPrefix="mail">
         Email
       </Button>
       <Button variant="primary" isOutlined iconSuffix="chat">
         Chat Now
       </Button>
     </Box>
-    <Box display="flex" direction="row" childGap="xs" margin="lg 0 0 0">
+    <Box display="flex" direction="row" gap="xs" margin="lg 0 0 0">
       <Button
         onClick={() => alert('clicked')}
         variant="light"
@@ -285,7 +285,7 @@ The Button component can be themed by base tokens, or component specific tokens.
 <Canvas>
   <Story name="With Custom Theme">
     <Box
-      childGap="sm"
+      gap="sm"
       direction="row"
       alignItems="flex-start"
       style={{

diff --git a/src/components/Button/Button.VisualTests.stories.tsx b/src/components/Button/Button.VisualTests.stories.tsx
@@ -12,10 +12,10 @@ export default {
 } as Meta;
 
 const Template: Story<ButtonProps & { showIconButton: boolean; }> = (args, showIconButton) => (
-  <Box childGap="xl">
+  <Box gap="xl">
     {BUTTON_SIZES.map(size => (
-      <Box childGap="sm" key={size}>
-        <Box childGap="sm" direction="row" alignItems="flex-start">
+      <Box gap="sm" key={size}>
+        <Box gap="sm" direction="row" alignItems="flex-start">
           {BUTTON_VARIANTS.map(variant => (
             <Button {...args} size={size} variant={variant} key={`${size}-${variant}`}>
               {`${size} ${variant}`}
@@ -34,7 +34,7 @@ const Template: Story<ButtonProps & { showIconButton: boolean; }> = (args, showI
             </Button>
           )}
         </Box>
-        <Box childGap="sm" direction="row" alignItems="flex-start" key={size}>
+        <Box gap="sm" direction="row" alignItems="flex-start" key={size}>
           {BUTTON_VARIANTS.map(variant => (
             <Button
               {...args}
@@ -62,7 +62,7 @@ const Template: Story<ButtonProps & { showIconButton: boolean; }> = (args, showI
         </Box>
       </Box>
     ))}
-    <Box childGap="sm">
+    <Box gap="sm">
       <Button {...args}>Full Width</Button>
       <Button {...args} fullWidth isOutlined>
         Full Width Outline

diff --git a/src/components/Button/Button.test.jsx b/src/components/Button/Button.test.jsx
@@ -56,14 +56,21 @@ describe('Button', () => {
       expect(screen.getByTestId('prefixIcon')).toBeInTheDocument();
       expect(screen.getByTestId('suffixIcon')).toBeInTheDocument();
     });
-
+    test('Renders gap between icon and text', () => {
+      render(
+        <Button iconSuffix="alarm">
+          Alarm Button
+        </Button>,
+      );
+      expect(screen.getByText('Alarm Button').parentElement.classList).toContain('g-xs');
+    });
     test('Renders smaller gap between icon and text for xs sized buttons', () => {
       render(
         <Button size="xs" iconSuffix="alarm">
           Alarm Button
         </Button>,
       );
-      expect(screen.getByText('Alarm Button').classList).toContain('m-right-2xs');
+      expect(screen.getByText('Alarm Button').parentElement.classList).toContain('g-2xs');
     });
   });
 

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -174,7 +174,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         display="inline-flex"
         direction="row"
         alignItems="center"
-        childGap={size === 'xs' ? '2xs' : 'xs'}
+        gap={size === 'xs' ? '2xs' : 'xs'}
       >
         {isLoading && (
           <Spinner variant={getSpinnerVariant()} className={styles['spinner-wrapper']} />