feat!: Apply default gap in Row and Column without extra class (#1422)

Amsterdam · Jul 19, 2024 · 3af0b1f · 3af0b1f
1 parent 2ee81f2
commit 3af0b1f
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 12 deletions.
diff --git a/packages/css/src/common/size.scss b/packages/css/src/common/size.scss
@@ -5,9 +5,9 @@
 
 /** The set of available options for sizing. */
 $ams-sizes: (
+  "no": "none",
   "xs": "extra-small",
   "sm": "small",
-  "md": "medium",
   "lg": "large",
   "xl": "extra-large",
 );
diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
@@ -8,6 +8,7 @@
 .ams-column {
   display: flex;
   flex-direction: column;
+  gap: var(--ams-column-gap-md);
 }
 
 @each $size, $label in $ams-sizes {

diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss
@@ -8,6 +8,7 @@
 .ams-row {
   display: flex;
   flex-direction: row;
+  gap: var(--ams-row-gap-md);
 }
 
 @each $size, $label in $ams-sizes {

diff --git a/packages/react/src/Column/Column.test.tsx b/packages/react/src/Column/Column.test.tsx
@@ -19,7 +19,6 @@ describe('Column', () => {
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-column')
-    expect(component).toHaveClass('ams-column--gap-medium')
   })
 
   columnGapSizes.map((size) =>

diff --git a/packages/react/src/Column/Column.tsx b/packages/react/src/Column/Column.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 
-export const columnGapSizes: Array<string> = ['extra-small', 'small', 'medium', 'large', 'extra-large']
+export const columnGapSizes: Array<string> = ['none', 'extra-small', 'small', 'large', 'extra-large']
 
 type ColumnTag = 'article' | 'div' | 'section'
 type ColumnGap = (typeof columnGapSizes)[number]
@@ -20,8 +20,8 @@ export type ColumnProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 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-${gap}`, className)}>
+  ({ as: Tag = 'div', children, className, gap, ...restProps }: ColumnProps, ref: any) => (
+    <Tag {...restProps} ref={ref} className={clsx('ams-column', gap && `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
@@ -20,7 +20,6 @@ describe('Row', () => {
     const component = container.querySelector(':only-child')
 
     expect(component).toHaveClass('ams-row')
-    expect(component).toHaveClass('ams-row--gap-medium')
   })
 
   rowGapSizes.map((size) =>

diff --git a/packages/react/src/Row/Row.tsx b/packages/react/src/Row/Row.tsx
@@ -8,7 +8,7 @@ import { forwardRef } from 'react'
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 import type { CrossAlign, MainAlign } from '../common/layout'
 
-export const rowGapSizes: Array<string> = ['extra-small', 'small', 'medium', 'large', 'extra-large']
+export const rowGapSizes: Array<string> = ['none', 'extra-small', 'small', 'large', 'extra-large']
 
 type RowGap = (typeof rowGapSizes)[number]
 type RowTag = 'article' | 'div' | 'section'
@@ -27,18 +27,15 @@ export type RowProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Row = forwardRef(
-  (
-    { align, alignVertical, as: Tag = 'div', children, className, gap = 'medium', wrap, ...restProps }: RowProps,
-    ref: any,
-  ) => (
+  ({ align, alignVertical, as: Tag = 'div', children, className, gap, wrap, ...restProps }: RowProps, ref: any) => (
     <Tag
       {...restProps}
       ref={ref}
       className={clsx(
         'ams-row',
-        `ams-row--gap-${gap}`,
         align && `ams-row--align-${align}`,
         alignVertical && `ams-row--align-vertical-${alignVertical}`,
+        gap && `ams-row--gap-${gap}`,
         wrap && 'ams-row--wrap',
         className,
       )}

diff --git a/proprietary/tokens/src/components/ams/column.tokens.json b/proprietary/tokens/src/components/ams/column.tokens.json
@@ -2,6 +2,7 @@
   "ams": {
     "column": {
       "gap": {
+        "no": { "value": "0" },
         "xs": { "value": "{ams.space.xs}" },
         "sm": { "value": "{ams.space.sm}" },
         "md": { "value": "{ams.space.md}" },

diff --git a/proprietary/tokens/src/components/ams/row.tokens.json b/proprietary/tokens/src/components/ams/row.tokens.json
@@ -2,6 +2,7 @@
   "ams": {
     "row": {
       "gap": {
+        "no": { "value": "0" },
         "xs": { "value": "{ams.space.xs}" },
         "sm": { "value": "{ams.space.sm}" },
         "md": { "value": "{ams.space.md}" },