Include ‘gap’ in class names for Row and Column

Amsterdam · Jul 19, 2024 · 296cd23 · 296cd23
1 parent 0cddd8a
commit 296cd23
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 10 deletions.
diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
@@ -11,7 +11,7 @@
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-column--#{$label} {
+  .ams-column--gap-#{$label} {
     gap: var(--ams-column-gap-#{$size});
   }
 }
diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss
@@ -11,7 +11,7 @@
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-row--#{$label} {
+  .ams-row--gap-#{$label} {
     gap: var(--ams-row-gap-#{$size});
   }
 }

diff --git a/packages/react/src/Column/Column.test.tsx b/packages/react/src/Column/Column.test.tsx
@@ -18,7 +18,8 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-column--medium')
+    expect(component).toHaveClass('ams-column')
+    expect(component).toHaveClass('ams-column--gap-medium')
   })
 
   columnGapSizes.map((size) =>
@@ -27,7 +28,7 @@ describe('Column', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`ams-column--${size}`)
+      expect(component).toHaveClass(`ams-column--gap-${size}`)
     }),
   )
 
@@ -36,7 +37,7 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-column--medium extra')
+    expect(component).toHaveClass('ams-column extra')
   })
 
   it('renders with an article tag', () => {

diff --git a/packages/react/src/Column/Column.tsx b/packages/react/src/Column/Column.tsx
@@ -21,7 +21,7 @@ export type ColumnProps = {
 
 export const Column = forwardRef(
   ({ as: Tag = 'div', children, className, gap = 'medium', ...restProps }: ColumnProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-column', `ams-column--${gap}`, className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-column', `ams-column--gap-${gap}`, className)}>
       {children}
     </Tag>
   ),

diff --git a/packages/react/src/Row/Row.test.tsx b/packages/react/src/Row/Row.test.tsx
@@ -19,7 +19,8 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-row--medium')
+    expect(component).toHaveClass('ams-row')
+    expect(component).toHaveClass('ams-row--gap-medium')
   })
 
   rowGapSizes.map((size) =>
@@ -28,7 +29,7 @@ describe('Row', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`ams-row--${size}`)
+      expect(component).toHaveClass(`ams-row--gap-${size}`)
     }),
   )
 
@@ -37,7 +38,7 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-row--medium extra')
+    expect(component).toHaveClass('ams-row extra')
   })
 
   it('renders with an article tag', () => {

diff --git a/packages/react/src/Row/Row.tsx b/packages/react/src/Row/Row.tsx
@@ -36,7 +36,7 @@ export const Row = forwardRef(
       ref={ref}
       className={clsx(
         'ams-row',
-        `ams-row--${gap}`,
+        `ams-row--gap-${gap}`,
         align && `ams-row--align-${align}`,
         alignVertical && `ams-row--align-vertical-${alignVertical}`,
         wrap && 'ams-row--wrap',