fix(separator): fix custom size application #535

src/tedi/components/layout/grid/col.stories.tsx

@@ -7,7 +7,7 @@ import { Row } from './row';
 
 /**
  * <a href="https://www.tedi.ee/1ee8444b7/p/24da19-grid" target="_BLANK">Zeroheight ↗</a><br/>
- * <a hreg="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
+ * <a href="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
  * Row and Col components are inspired by Bootstrap V5 Grid System. <br/> You can use different Bootstrap grid classes
  * through component props.
  */

src/tedi/components/layout/grid/row.stories.tsx

@@ -5,7 +5,7 @@ import { Row, RowProps } from './row';
 
 /**
  * <a href="https://www.tedi.ee/1ee8444b7/p/24da19-grid" target="_BLANK">Zeroheight ↗</a><br/>
- * <a hreg="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
+ * <a href="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
  * Row and Col components are inspired by Bootstrap V5 Grid System. <br/> You can use different Bootstrap grid classes
  * through component props.
  */

src/tedi/components/misc/separator/separator.module.scss

@@ -1,18 +1,5 @@
 @use '@tedi-design-system/core/mixins';
 
-$sizes: (
-  '0': 0,
-  '0-25': 0.25rem,
-  '0-5': 0.5rem,
-  '0-75': 0.75rem,
-  '1': 1rem,
-  '1-25': 1.25rem,
-  '1-5': 1.5rem,
-  '1-75': 1.75rem,
-  '2': 2rem,
-  '2-5': 2.5rem,
-  '5': 5rem,
-);
 $thicknesses: (
   '1': 1px,
   '2': 2px,
@@ -27,7 +14,8 @@ $dot-colors: (
   --vertical-separator-height: 100%;
 
   position: relative;
-  margin: 0;
+  margin: var(--separator-margin-top) var(--separator-margin-right) var(--separator-margin-bottom)
+    var(--separator-margin-left);
   border: 0;
   border-top: 1px solid var(--general-border-primary);
 
@@ -172,30 +160,6 @@ $dot-colors: (
   bottom: auto;
 }
 
-@each $size, $value in $sizes {
-  .tedi-separator--spacing-#{$size}:not(.tedi-separator--dot-only) {
-    margin: #{$value} 0;
-  }
-
-  .tedi-separator--dot-only.tedi-separator--spacing-#{$size} {
-    &.tedi-separator--horizontal {
-      margin-right: $value;
-      margin-left: $value;
-    }
-
-    &.tedi-separator--vertical {
-      margin-top: $value;
-      margin-bottom: $value;
-    }
-  }
-
-  @each $side in (top, bottom, left, right) {
-    .tedi-separator--#{$side}-#{$size} {
-      margin-#{$side}: $value;
-    }
-  }
-}
-
 @each $thickness, $value in $thicknesses {
   .tedi-separator--thickness-#{$thickness} {
     border-top-width: $value;

src/tedi/components/misc/separator/separator.spec.tsx

@@ -57,24 +57,31 @@ describe('Separator Component', () => {
     expect(el).toHaveStyle('--vertical-separator-height: 5.5rem');
   });
 
-  it('applies spacing classes — number value', () => {
+  it('applies spacing — number value', () => {
     const { getByTestId } = renderComponent({ spacing: 1.5 });
     const el = getByTestId('separator');
 
-    expect(el).toHaveClass(styles['tedi-separator--top-1-5']);
-    expect(el).toHaveClass(styles['tedi-separator--bottom-1-5']);
+    expect(el).toHaveStyle({
+      '--separator-margin-top': '1.5rem',
+      '--separator-margin-bottom': '1.5rem',
+      '--separator-margin-left': '0rem',
+      '--separator-margin-right': '0rem',
+    });
   });
 
-  it('applies spacing classes — object value', () => {
+  it('applies spacing — object value', () => {
     const { getByTestId } = renderComponent({
       spacing: { top: 2, bottom: 0.5, left: 1 },
       axis: 'horizontal',
     });
     const el = getByTestId('separator');
 
-    expect(el).toHaveClass(styles['tedi-separator--top-2']);
-    expect(el).toHaveClass(styles['tedi-separator--bottom-0-5']);
-    expect(el).toHaveClass(styles['tedi-separator--left-1']);
+    expect(el).toHaveStyle({
+      '--separator-margin-top': '2rem',
+      '--separator-margin-bottom': '0.5rem',
+      '--separator-margin-left': '1rem',
+      '--separator-margin-right': '0rem',
+    });
   });
 
   it('applies isStretched class', () => {

src/tedi/components/misc/separator/separator.tsx

@@ -140,64 +140,65 @@ export const Separator = (props: SeparatorProps): JSX.Element => {
   const isNumericDotPosition = typeof dotPosition === 'number';
   const resolvedDotPosition = variant !== 'dot-only' && !isNumericDotPosition ? dotPosition : undefined;
 
-  let top: number | undefined;
-  let bottom: number | undefined;
-  let left: number | undefined;
-  let right: number | undefined;
+  let top = 0;
+  let bottom = 0;
+  let left = 0;
+  let right = 0;
 
   if (typeof spacing === 'number') {
     if (axis === 'horizontal') {
       top = bottom = spacing;
-      left = right = 0;
     } else {
       left = right = spacing;
-      top = bottom = 0;
     }
-  } else if (typeof spacing === 'object' && spacing !== null) {
-    top = spacing.top ?? (axis === 'horizontal' ? spacing.top ?? spacing.bottom ?? 0 : 0);
-    bottom = spacing.bottom ?? (axis === 'horizontal' ? spacing.top ?? spacing.bottom ?? 0 : 0);
-    left = spacing.left ?? (axis === 'vertical' ? spacing.left ?? spacing.right ?? 0 : 0);
-    right = spacing.right ?? (axis === 'vertical' ? spacing.left ?? spacing.right ?? 0 : 0);
+  }
+
+  if (typeof spacing === 'object' && spacing !== null) {
+    top = spacing.top ?? top;
+    bottom = spacing.bottom ?? bottom;
+    left = spacing.left ?? left;
+    right = spacing.right ?? right;
   }
 
   const SeparatorBEM = cn(
     styles['tedi-separator'],
     className,
-    { [styles[`tedi-separator--${color}`]]: color },
-    { [styles[`tedi-separator--${axis}`]]: axis },
-    { [styles[`tedi-separator--${variant}`]]: variant },
-    { [styles[`tedi-separator--${display}`]]: display },
-    { [styles[`tedi-separator--${variant}-${dotSize}`]]: variant === 'dot-only' && dotSize },
-    { [styles[`tedi-separator--dot-style-${dotStyle}`]]: variant && dotStyle },
-    { [styles[`tedi-separator--dotted-${dotSize}`]]: variant === 'dotted' && dotSize },
-    { [styles[`tedi-separator--dot-position-${resolvedDotPosition}`]]: resolvedDotPosition && variant !== 'dot-only' },
-    { [styles['tedi-separator--dot-position-custom']]: isNumericDotPosition },
+    styles[`tedi-separator--${axis}`],
+    styles[`tedi-separator--${color}`],
     {
+      [styles[`tedi-separator--${variant}`]]: variant,
+      [styles[`tedi-separator--${display}`]]: display,
+      [styles[`tedi-separator--dotted-${dotSize}`]]: variant === 'dotted',
+      [styles[`tedi-separator--dot-only-${dotSize}`]]: variant === 'dot-only',
+      [styles[`tedi-separator--dot-style-${dotStyle}`]]: variant,
+      [styles[`tedi-separator--dot-position-${resolvedDotPosition}`]]:
+        typeof resolvedDotPosition === 'string' && variant !== 'dot-only',
+      [styles['tedi-separator--dot-position-custom']]: isNumericDotPosition,
+      [styles['tedi-separator--is-stretched']]: isStretched,
       [styles[`tedi-separator--thickness-${thickness}`]]: thickness || dotStyle === 'outlined' ? thickness : undefined,
-    },
-    { [styles['tedi-separator--is-stretched']]: isStretched },
-    { [styles[`tedi-separator--top-${top}`.replace('.', '-')]]: top },
-    { [styles[`tedi-separator--bottom-${bottom}`.replace('.', '-')]]: bottom },
-    { [styles[`tedi-separator--left-${left}`.replace('.', '-')]]: left },
-    { [styles[`tedi-separator--right-${right}`.replace('.', '-')]]: right }
+    }
   );
 
-  const getCssVars = () => {
-    const cssvars: CSSProperties = {};
-    if (height) cssvars['--vertical-separator-height'] = `${height}rem`;
+  const cssVars: CSSProperties = {
+    '--separator-margin-top': `${top}rem`,
+    '--separator-margin-bottom': `${bottom}rem`,
+    '--separator-margin-left': `${left}rem`,
+    '--separator-margin-right': `${right}rem`,
+  } as CSSProperties;
 
-    if (thickness) {
-      cssvars['--separator-thickness'] = `${thickness}px`;
-    }
+  if (height) {
+    cssVars['--vertical-separator-height'] = `${height}rem`;
+  }
 
-    if (variant === 'dotted' && isNumericDotPosition) {
-      cssvars['--separator-dot-position'] = `${dotPosition}rem`;
-    }
+  if (thickness) {
+    cssVars['--separator-thickness'] = `${thickness}px`;
+  }
 
-    return cssvars;
-  };
+  if (variant === 'dotted' && isNumericDotPosition) {
+    cssVars['--separator-dot-position'] = `${dotPosition}rem`;
+  }
 
-  return <Element data-name="separator" {...rest} style={getCssVars()} className={SeparatorBEM} />;
+  return <Element data-name="separator" {...rest} style={cssVars} className={SeparatorBEM} />;
 };
 
 export default Separator;