From 65976b25a4827e99f2e83d25437ab13cc05fcf6b Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 26 Feb 2026 08:37:00 +0200 Subject: [PATCH 1/3] fix(separator): fix custom size application #535 --- .../misc/separator/separator.module.scss | 40 +--------- .../misc/separator/separator.spec.tsx | 21 +++-- .../components/misc/separator/separator.tsx | 77 ++++++++++--------- 3 files changed, 55 insertions(+), 83 deletions(-) diff --git a/src/tedi/components/misc/separator/separator.module.scss b/src/tedi/components/misc/separator/separator.module.scss index 6d648458..1a027a98 100644 --- a/src/tedi/components/misc/separator/separator.module.scss +++ b/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, 0) var(--separator-margin-right, 0) var(--separator-margin-bottom, 0) + var(--separator-margin-left, 0); 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; diff --git a/src/tedi/components/misc/separator/separator.spec.tsx b/src/tedi/components/misc/separator/separator.spec.tsx index 694961d9..0f465e37 100644 --- a/src/tedi/components/misc/separator/separator.spec.tsx +++ b/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', () => { diff --git a/src/tedi/components/misc/separator/separator.tsx b/src/tedi/components/misc/separator/separator.tsx index cabe5bd3..d343f08b 100644 --- a/src/tedi/components/misc/separator/separator.tsx +++ b/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 ; + return ; }; export default Separator; From a41a2890a119dc5b48b9bf59453aaaabe59d9a1e Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 26 Feb 2026 09:26:13 +0200 Subject: [PATCH 2/3] chore: fix grid stories typo #535 --- src/tedi/components/layout/grid/col.stories.tsx | 2 +- src/tedi/components/layout/grid/row.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tedi/components/layout/grid/col.stories.tsx b/src/tedi/components/layout/grid/col.stories.tsx index 8f792552..b2ea48bf 100644 --- a/src/tedi/components/layout/grid/col.stories.tsx +++ b/src/tedi/components/layout/grid/col.stories.tsx @@ -7,7 +7,7 @@ import { Row } from './row'; /** * Zeroheight ↗
- * Bootstrap docs ↗
+ * Bootstrap docs ↗
* Row and Col components are inspired by Bootstrap V5 Grid System.
You can use different Bootstrap grid classes * through component props. */ diff --git a/src/tedi/components/layout/grid/row.stories.tsx b/src/tedi/components/layout/grid/row.stories.tsx index 8fb61400..1904bb38 100644 --- a/src/tedi/components/layout/grid/row.stories.tsx +++ b/src/tedi/components/layout/grid/row.stories.tsx @@ -5,7 +5,7 @@ import { Row, RowProps } from './row'; /** * Zeroheight ↗
- * Bootstrap docs ↗
+ * Bootstrap docs ↗
* Row and Col components are inspired by Bootstrap V5 Grid System.
You can use different Bootstrap grid classes * through component props. */ From 2e1c9b4b35df5b7488a9c0fcb60986477829cc81 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Thu, 26 Feb 2026 11:55:38 +0200 Subject: [PATCH 3/3] fix(separator): removed unnecessary zeros #535 --- src/tedi/components/misc/separator/separator.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tedi/components/misc/separator/separator.module.scss b/src/tedi/components/misc/separator/separator.module.scss index 1a027a98..85741e1e 100644 --- a/src/tedi/components/misc/separator/separator.module.scss +++ b/src/tedi/components/misc/separator/separator.module.scss @@ -14,8 +14,8 @@ $dot-colors: ( --vertical-separator-height: 100%; position: relative; - margin: var(--separator-margin-top, 0) var(--separator-margin-right, 0) var(--separator-margin-bottom, 0) - var(--separator-margin-left, 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);