= {
component: VerticalSpacing,
- title: 'Tedi-Ready/Components/Helpers/VerticalSpacing',
+ title: 'Tedi-Ready/Layout/VerticalSpacing',
subcomponents: {
'VerticalSpacing.Item': VerticalSpacing.Item,
} as never,
diff --git a/src/tedi/components/misc/separator/separator.module.scss b/src/tedi/components/misc/separator/separator.module.scss
index 0e17b456e..85741e1e7 100644
--- a/src/tedi/components/misc/separator/separator.module.scss
+++ b/src/tedi/components/misc/separator/separator.module.scss
@@ -1,24 +1,21 @@
@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,
+);
+$dot-colors: (
+ 'primary': var(--general-border-primary),
+ 'secondary': var(--general-border-secondary),
+ 'accent': var(--general-border-accent),
);
.tedi-separator {
--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);
@@ -30,12 +27,8 @@ $sizes: (
border-left: 1px solid var(--general-border-primary);
}
- &--secondary {
- border-color: var(--general-border-secondary);
- }
-
- &--accent {
- border-color: var(--general-border-accent);
+ &--horizontal {
+ display: block;
}
&--block {
@@ -45,84 +38,38 @@ $sizes: (
&--inline {
display: inline;
}
-}
-
-.tedi-separator--dotted,
-.tedi-separator--dotted-small {
- &::before {
- position: absolute;
- top: 1.25rem;
- width: var(--separator-dotted-dot-lg);
- height: var(--separator-dotted-dot-lg);
- content: '';
- background-color: var(--general-border-primary);
- border-radius: 100%;
- transform: translateX(-8px);
-
- @include mixins.print-grayscale;
- }
- &.tedi-separator--secondary::before {
- background-color: var(--general-border-secondary);
+ &--secondary {
+ border-color: var(--general-border-secondary);
}
- &.tedi-separator--accent::before {
- background-color: var(--general-border-accent);
+ &--accent {
+ border-color: var(--general-border-accent);
}
-}
-
-.tedi-separator--dotted-small::before {
- top: 1.5rem;
- width: var(--separator-dotted-dot-md);
- height: var(--separator-dotted-dot-md);
- transform: translateX(-5px);
-}
-.tedi-separator--is-stretched {
- margin-right: calc(var(--card-content-padding-right) * -1);
- margin-left: calc(var(--card-content-padding-left) * -1);
+ &--is-stretched {
+ margin-right: calc(var(--card-content-padding-right) * -1);
+ margin-left: calc(var(--card-content-padding-left) * -1);
- &.tedi-separator--vertical {
- height: calc(100% + (var(--card-content-padding-top) + var(--card-content-padding-bottom)));
- margin: calc(var(--card-content-padding-top) * -1) 0 calc(var(--card-content-padding-bottom) * -1);
+ &.tedi-separator--vertical {
+ height: calc(100% + (var(--card-content-padding-top) + var(--card-content-padding-bottom)));
+ margin: calc(var(--card-content-padding-top) * -1) 0 calc(var(--card-content-padding-bottom) * -1);
+ }
}
}
-@each $size, $value in $sizes {
- .tedi-separator--horizontal.tedi-separator--top-#{$size} {
- margin-top: #{$value};
- }
-
- .tedi-separator--horizontal.tedi-separator--bottom-#{$size} {
- margin-bottom: #{$value};
- }
-
- .tedi-separator--horizontal.tedi-separator--spacing-#{$size}:not(.tedi-separator--dot-only) {
- margin-top: #{$value};
- margin-bottom: #{$value};
- }
+.tedi-separator--dotted {
+ &::before {
+ position: absolute;
+ content: '';
+ background-color: var(--general-border-primary);
+ border-radius: 50%;
- .tedi-separator--horizontal.tedi-separator--dot-only.tedi-separator--spacing-#{$size},
- .tedi-separator--vertical.tedi-separator--spacing-#{$size} {
- margin-right: #{$value};
- margin-left: #{$value};
+ @include mixins.print-grayscale;
}
-}
-
-$thicknesses: (
- '1': 1px,
- '2': 2px,
-);
-@each $thickness, $value in $thicknesses {
- .tedi-separator {
- &.tedi-separator--thickness-#{$thickness} {
- border-top-width: #{$value};
- }
-
- &--vertical.tedi-separator--thickness-#{$thickness} {
- border-left-width: #{$value};
- }
+ &.tedi-separator--vertical {
+ min-height: 3rem;
}
}
@@ -138,58 +85,115 @@ $thicknesses: (
width: var(--separator-dotted-dot-sm);
height: var(--separator-dotted-dot-sm);
content: '';
- border-radius: 100%;
+ border-radius: 50%;
@include mixins.print-grayscale;
}
- &.tedi-separator--dot-only-extra-small::before {
- width: var(--separator-dotted-dot-xs);
- height: var(--separator-dotted-dot-xs);
+ &.tedi-separator--dot-style-outlined::before {
+ background: transparent;
}
+}
- &.tedi-separator--dot-only-small::before {
- width: var(--separator-dotted-dot-sm);
- height: var(--separator-dotted-dot-sm);
- }
+@each $name, $color in $dot-colors {
+ .tedi-separator--#{$name} {
+ border-color: $color;
- &.tedi-separator--dot-only-medium::before {
- width: var(--separator-dotted-dot-md);
- height: var(--separator-dotted-dot-md);
- }
+ &::before {
+ background-color: $color;
+ }
- &.tedi-separator--dot-only-large::before {
- width: var(--separator-dotted-dot-lg);
- height: var(--separator-dotted-dot-lg);
+ &.tedi-separator--dot-style-outlined:not(.tedi-separator--dot-only)::before {
+ border-color: $color;
+ }
}
+}
- &.tedi-separator--primary::before {
- background-color: var(--general-border-primary);
+@each $size, $var in (extra-small: xs, small: sm, medium: md, large: lg) {
+ .tedi-separator--dot-only-#{$size}::before,
+ .tedi-separator--dotted-#{$size}::before,
+ .tedi-separator--dot-style-outlined.tedi-separator--dotted-#{$size}::before {
+ width: var(--separator-dot-size-#{$var});
+ height: var(--separator-dot-size-#{$var});
}
+}
- &.tedi-separator--secondary::before {
- background-color: var(--general-border-secondary);
+@each $axis in (horizontal, vertical) {
+ @each $pos in (start, center, end) {
+ .tedi-separator--#{$axis}.tedi-separator--dot-position-#{$pos}::before {
+ @if $axis == horizontal {
+ @if $pos == start {
+ right: auto;
+ left: 0;
+ } @else if $pos == center {
+ right: 0;
+ left: 0;
+ margin: auto;
+ } @else {
+ right: 0;
+ left: auto;
+ }
+ } @else {
+ @if $pos == start {
+ top: 0;
+ bottom: auto;
+ } @else if $pos == center {
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ } @else {
+ top: auto;
+ bottom: 0;
+ }
+ }
+ }
}
+}
+
+.tedi-separator--horizontal.tedi-separator--dot-position-custom::before {
+ right: auto;
+ left: var(--separator-dot-position);
+}
+
+.tedi-separator--vertical.tedi-separator--dot-position-custom::before {
+ top: var(--separator-dot-position);
+ bottom: auto;
+}
- &.tedi-separator--accent::before {
- background-color: var(--general-border-accent);
+@each $thickness, $value in $thicknesses {
+ .tedi-separator--thickness-#{$thickness} {
+ border-top-width: $value;
+ }
+ .tedi-separator--vertical.tedi-separator--thickness-#{$thickness} {
+ border-left-width: $value;
}
}
-.tedi-separator--horizontal {
- &.tedi-separator--dotted::before,
- &.tedi-separator--dotted-small::before {
- right: 0;
- left: 0;
- margin: 0 auto;
- transform: initial;
+@each $axis in (horizontal, vertical) {
+ @each $size, $var in (extra-small: xs, small: sm, medium: md, large: lg) {
+ .tedi-separator--#{$axis}.tedi-separator--dotted-#{$size}::before,
+ .tedi-separator--#{$axis}.tedi-separator--dot-style-outlined.tedi-separator--dotted-#{$size}::before {
+ @if $axis == horizontal {
+ top: calc((var(--separator-dot-size-#{$var}) / 2 + var(--separator-thickness)) * -1);
+ } @else {
+ left: calc((var(--separator-dot-size-#{$var}) / 2 + var(--separator-thickness) / 2) * -1);
+ }
+ }
}
+}
- &.tedi-separator--dotted::before {
- top: calc(var(--separator-dotted-dot-lg) / 2 * -1);
+.tedi-separator--dot-style-outlined {
+ &::before {
+ background-color: var(--general-surface-primary);
+ border-style: solid;
+ border-width: var(--separator-thickness);
}
- &.tedi-separator--dotted-small::before {
- top: calc(var(--separator-dotted-dot-md) / 2 * -1);
+ @each $name, $color in $dot-colors {
+ &.tedi-separator--#{$name}::before,
+ &.tedi-separator--dotted-#{$name}::before {
+ z-index: 10;
+ border-color: $color;
+ }
}
}
diff --git a/src/tedi/components/misc/separator/separator.spec.tsx b/src/tedi/components/misc/separator/separator.spec.tsx
index 65d9c7e20..0f465e37e 100644
--- a/src/tedi/components/misc/separator/separator.spec.tsx
+++ b/src/tedi/components/misc/separator/separator.spec.tsx
@@ -17,132 +17,148 @@ describe('Separator Component', () => {
});
});
- const renderComponent = (props: SeparatorProps) => render();
+ const renderComponent = (props: P) =>
+ render();
- it('should render a div element by default', () => {
- const { getByTestId } = renderComponent({});
+ it('renders a div by default', () => {
+ const { getByTestId } = renderComponent({ element: 'div' });
expect(getByTestId('separator').tagName).toBe('DIV');
});
- it('should render the specified element', () => {
+ it('renders the specified element', () => {
const { getByTestId } = renderComponent({ element: 'hr' });
expect(getByTestId('separator').tagName).toBe('HR');
});
- it('should apply default classes', () => {
- const { getByTestId } = renderComponent({});
- const separator = getByTestId('separator');
- expect(separator).toHaveClass(styles['tedi-separator']);
- expect(separator).toHaveClass(styles['tedi-separator--thickness-1']);
- expect(separator).toHaveClass(styles['tedi-separator--horizontal']);
- });
-
- it('should apply additional classes from className prop', () => {
- const { getByTestId } = renderComponent({ className: 'custom-class' });
- expect(getByTestId('separator')).toHaveClass('custom-class');
- });
-
- it('should apply correct spacing class', () => {
- const { getByTestId } = renderComponent({ spacing: 1.25 });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--spacing-1-25']);
- });
+ it('applies base and default classes', () => {
+ const { getByTestId } = renderComponent({ axis: 'horizontal' });
+ const el = getByTestId('separator');
- it('should apply correct top and bottom spacing classes', () => {
- const { getByTestId } = renderComponent({ topSpacing: 0.5, bottomSpacing: 1 });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--top-0-5']);
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--bottom-1']);
+ expect(el).toHaveClass(styles['tedi-separator']);
+ expect(el).toHaveClass(styles['tedi-separator--horizontal']);
+ expect(el).toHaveClass(styles['tedi-separator--thickness-1']);
});
- it('should apply axis specific class', () => {
- const { getByTestId } = renderComponent({ axis: 'vertical' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--vertical']);
+ it('applies custom className', () => {
+ const { getByTestId } = renderComponent({ className: 'my-extra-class' });
+ expect(getByTestId('separator')).toHaveClass('my-extra-class');
});
- it('should apply color class', () => {
+ it('applies color modifier', () => {
const { getByTestId } = renderComponent({ color: 'accent' });
expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--accent']);
});
- it('should apply variant class', () => {
- const { getByTestId } = renderComponent({ variant: 'dotted' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dotted']);
+ it('applies vertical axis class and allows height', () => {
+ const { getByTestId } = renderComponent({ axis: 'vertical', height: 5.5 });
+ const el = getByTestId('separator');
+
+ expect(el).toHaveClass(styles['tedi-separator--vertical']);
+ expect(el).toHaveStyle('--vertical-separator-height: 5.5rem');
});
- it('should apply thickness class when no variant is used', () => {
- const { getByTestId } = renderComponent({ thickness: 2 });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--thickness-2']);
+ it('applies spacing — number value', () => {
+ const { getByTestId } = renderComponent({ spacing: 1.5 });
+ const el = getByTestId('separator');
+
+ expect(el).toHaveStyle({
+ '--separator-margin-top': '1.5rem',
+ '--separator-margin-bottom': '1.5rem',
+ '--separator-margin-left': '0rem',
+ '--separator-margin-right': '0rem',
+ });
});
- it('should not apply thickness class when variant is used', () => {
- const { getByTestId } = renderComponent({ variant: 'dotted', thickness: 2 });
- expect(getByTestId('separator')).not.toHaveClass(styles['tedi-separator--thickness-2']);
+ it('applies spacing — object value', () => {
+ const { getByTestId } = renderComponent({
+ spacing: { top: 2, bottom: 0.5, left: 1 },
+ axis: 'horizontal',
+ });
+ const el = getByTestId('separator');
+
+ expect(el).toHaveStyle({
+ '--separator-margin-top': '2rem',
+ '--separator-margin-bottom': '0.5rem',
+ '--separator-margin-left': '1rem',
+ '--separator-margin-right': '0rem',
+ });
});
- it('should apply isStretched class', () => {
+ it('applies isStretched class', () => {
const { getByTestId } = renderComponent({ isStretched: true });
expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--is-stretched']);
});
- it('should set height CSS variable for vertical separator', () => {
- const { getByTestId } = renderComponent({ axis: 'vertical', height: 2 });
- expect(getByTestId('separator')).toHaveStyle('--vertical-separator-height: 2rem');
+ it('applies thickness class when no variant', () => {
+ const { getByTestId } = renderComponent({ thickness: 2 });
+ expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--thickness-2']);
});
+ it('applies dotted class and dot size', () => {
+ const { getByTestId } = renderComponent({
+ variant: 'dotted',
+ dotSize: 'small',
+ dotPosition: 'center',
+ });
+ const el = getByTestId('separator');
- it('should apply dot-only variant class', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only']);
+ expect(el).toHaveClass(styles['tedi-separator--dotted']);
+ expect(el).toHaveClass(styles['tedi-separator--dotted-small']);
+ expect(el).toHaveClass(styles['tedi-separator--dot-position-center']);
});
- it('should apply correct dot size class when variant is dot-only and dotSize is extra small', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only', dotSize: 'extra-small' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only-extra-small']);
+ it('applies custom dot position via CSS var', () => {
+ const { getByTestId } = renderComponent({
+ variant: 'dotted',
+ dotPosition: 2.75,
+ });
+ expect(getByTestId('separator')).toHaveStyle('--separator-dot-position: 2.75rem');
+ expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-position-custom']);
});
- it('should apply correct dot size class when variant is dot-only and dotSize is small', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only', dotSize: 'small' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only-small']);
- });
+ it('applies dot-only and dot size class', () => {
+ const { getByTestId } = renderComponent({
+ variant: 'dot-only',
+ dotSize: 'large',
+ dotStyle: 'filled',
+ });
+ const el = getByTestId('separator');
- it('should apply correct dot size class when variant is dot-only and dotSize is medium', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only', dotSize: 'medium' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only-medium']);
+ expect(el).toHaveClass(styles['tedi-separator--dot-only']);
+ expect(el).toHaveClass(styles['tedi-separator--dot-only-large']);
+ expect(el).not.toHaveClass(styles['tedi-separator--dot-style-outlined']);
});
- it('should apply correct dot size class when variant is dot-only and dotSize is large', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only', dotSize: 'large' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only-large']);
- });
+ it('applies outlined style and thickness var when outlined', () => {
+ const { getByTestId } = renderComponent({
+ variant: 'dot-only',
+ dotSize: 'medium',
+ dotStyle: 'outlined',
+ thickness: 2,
+ });
+ const el = getByTestId('separator');
- it('should not apply dot size class when variant is not dot-only', () => {
- const { getByTestId } = renderComponent({ variant: 'dotted', dotSize: 'large' });
- expect(getByTestId('separator')).not.toHaveClass(styles['tedi-separator--dot-only-large']);
+ expect(el).toHaveClass(styles['tedi-separator--dot-style-outlined']);
+ expect(el).toHaveStyle('--separator-thickness: 2px');
+ expect(el).toHaveClass(styles['tedi-separator--thickness-2']);
});
- it('should default vertical separator display to block', () => {
+ it('requires dotSize (but test fallback/default)', () => {
+ const { getByTestId } = renderComponent({
+ variant: 'dot-only',
+ dotSize: 'large',
+ });
+ expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--dot-only-large']);
+ });
+ it('defaults to block display in vertical mode', () => {
const { getByTestId } = renderComponent({ axis: 'vertical' });
expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--block']);
});
- it('should apply inline display class to vertical separator when specified', () => {
- const { getByTestId } = renderComponent({ axis: 'vertical', display: 'inline' });
- expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--inline']);
- });
-
- it('should not apply inline display class to horizontal separator', () => {
- const { getByTestId } = renderComponent({ axis: 'horizontal', display: 'block' });
- expect(getByTestId('separator')).not.toHaveClass(styles['tedi-separator--inline']);
- });
- it('should apply dotSize class when variant is dot-only', () => {
- const { getByTestId } = renderComponent({ variant: 'dot-only', dotSize: 'medium' });
- const separator = getByTestId('separator');
- expect(separator).toHaveClass(styles['tedi-separator--dot-only']);
- expect(separator).toHaveClass(styles['tedi-separator--dot-only-medium']);
- });
-
- it('should ignore dotSize when variant is not dot-only', () => {
- const { getByTestId } = renderComponent({ variant: 'dotted', dotSize: 'medium' });
- const separator = getByTestId('separator');
- expect(separator).toHaveClass(styles['tedi-separator--dotted']);
- expect(separator).not.toHaveClass(styles['tedi-separator--dot-only-medium']);
+ it('applies inline display when specified (vertical)', () => {
+ const { getByTestId } = renderComponent({
+ axis: 'vertical',
+ display: 'inline-block',
+ });
+ expect(getByTestId('separator')).toHaveClass(styles['tedi-separator--inline-block']);
});
});
diff --git a/src/tedi/components/misc/separator/separator.stories.tsx b/src/tedi/components/misc/separator/separator.stories.tsx
index 5d5a4f6f5..385b2a01d 100644
--- a/src/tedi/components/misc/separator/separator.stories.tsx
+++ b/src/tedi/components/misc/separator/separator.stories.tsx
@@ -1,11 +1,10 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { Fragment } from 'react/jsx-runtime';
import { Text } from '../../base/typography/text/text';
import { Card, CardContent } from '../../cards/card';
import { Col, Row } from '../../layout/grid';
import { VerticalSpacing } from '../../layout/vertical-spacing';
-import Separator, { SeparatorProps } from './separator';
+import Separator, { DotSize, SeparatorProps } from './separator';
/**
* Figma ↗
@@ -32,86 +31,254 @@ const meta: Meta = {
export default meta;
type Story = StoryObj;
-const colorArray: SeparatorProps['color'][] = ['primary', 'secondary', 'accent'];
+const spacingArray: SeparatorProps['spacing'][] = [0, 0.5, 1, 1.5, 2, 2.5];
+const sizeArray: SeparatorProps['dotSize'][] = ['large', 'medium'];
+type TemplateMultipleProps = SeparatorProps & {
+ array: Type[];
+ property: keyof SeparatorProps;
+};
+const Template: StoryFn = (args) => ;
-const Template: StoryFn = (args) => (
- <>
- Some content
-
- Other content
-
-);
+const SizesTemplate: StoryFn = (args) => {
+ const { array } = args;
-const ColorsAndThickness: StoryFn = (args) => (
- <>
- {colorArray.map((color) => (
-
-
-
-
+ return (
+
+ {array.map((value, key) => (
+
+
+ {value === 'large' ? 'Large' : 'Medium'}
-
-
-
-
+
+
+
+
+
-
- ))}
-
-);
+ ))}
+
+ );
+};
-const VerticalColorTemplate: StoryFn = (args) => (
+const ColorsAndThickness: StoryFn = (args) => (
- {colorArray.map((color) => (
-
-
-
-
-
-
-
-
-
-
- ))}
+
+
+
+
);
-const DotOnlyTemplate: StoryFn = (args) => (
+const SpacingHorizontal: StoryFn = (args) => (
-
-
-
-
+ {spacingArray.map((spacing, index) => (
+
+ ))}
);
+const SpacingVertical: StoryFn = (args) => (
+
+ {spacingArray.map((spacing, index) => (
+
+
+
+ ))}
+
+);
+
export const Default: Story = {
render: Template,
args: { spacing: 1 },
};
-export const HorizontalColors: Story = {
+export const HorizontalSpacings: Story = {
+ render: SpacingHorizontal,
+ args: {
+ axis: 'horizontal',
+ },
+};
+
+export const HorizontalThickness: Story = {
render: ColorsAndThickness,
- args: { spacing: 1 },
};
-export const VerticalColors: Story = {
- render: VerticalColorTemplate,
- args: { axis: 'vertical', height: 5 },
+export const Vertical: Story = {
+ render: Template,
+ args: { axis: 'vertical', height: 3 },
+};
+
+export const VerticalSpacings: Story = {
+ render: SpacingVertical,
+ args: {
+ axis: 'vertical',
+ height: 3,
+ display: 'inline-block',
+ },
+};
+
+export const VerticalThickness: Story = {
+ render: ColorsAndThickness,
+ args: { axis: 'vertical', height: 3, display: 'inline' },
};
-export const PaddedEven: Story = {
+export const DottedLineHorizontal: Story = {
render: Template,
- args: { spacing: 1 },
+ args: { axis: 'horizontal', variant: 'dotted', color: 'accent', dotPosition: 'center' },
};
-export const PaddedUneven: Story = {
+export const DottedLineVertical: Story = {
render: Template,
- args: { topSpacing: 2.5, bottomSpacing: 0.5 },
+ args: { axis: 'vertical', variant: 'dotted', color: 'accent', height: 5, dotPosition: 'center' },
+};
+
+export const Sizes: StoryObj = {
+ render: SizesTemplate,
+
+ args: {
+ property: 'dotSize',
+ array: sizeArray,
+ },
+};
+
+export const SpacingTopDefault: Story = {
+ render: () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const SpacingTopSmall: Story = {
+ render: () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const Position: Story = {
+ render: () => {
+ return (
+ <>
+
+
+
+ Start
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Center
+
+
+
+
+
+
+
+
+
+
+
+
+ End
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
};
const TemplateVertical: StoryFn = (args) => (
@@ -137,88 +304,132 @@ const TemplateVertical: StoryFn = (args) => (
);
-export const VerticalThick: Story = {
- render: TemplateVertical,
+export const DotFilled: Story = {
+ render: () => {
+ return (
+ <>
+
+
+ );
+ },
+};
+
+export const DotOutlined: Story = {
+ render: () => {
+ return (
+ <>
+
+
+ );
+ },
+};
+
+const dotSizeToPxMap: Record = {
+ xs: '2px',
+ sm: '4px',
+ md: '8px',
+ lg: '15px',
+};
+
+const DottedSizesTemplate: StoryFn = (args) => {
+ const { array } = args;
+
+ return (
+
+ {array.map((value, key) => (
+
+
+ {value !== undefined ? dotSizeToPxMap[value] || value : '—'}
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+};
+
+export const DottedSizes: StoryObj = {
+ render: DottedSizesTemplate,
args: {
- axis: 'horizontal',
- thickness: 1,
- isStretched: true,
- topSpacing: 1,
- bottomSpacing: 1,
- md: { axis: 'vertical', thickness: 1 },
+ property: 'dotSize',
+ array: ['extra-small', 'small', 'medium', 'large'],
},
};
-export const VerticalDotted: Story = {
+const InlineSeparatorTemplate: StoryFn = (args) => {
+ const { dotPosition, ...safeArgs } = args;
+
+ return (
+ <>
+
+ Lorem ipsum dolor sit, amet
+
+ consectetur adipisicing elit.
+
+
+ Lorem ipsum dolor sit, amet
+
+ consectetur adipisicing elit.
+
+
+ Lorem ipsum dolor sit, amet
+
+ consectetur adipisicing elit.
+
+
+ Lorem ipsum dolor sit, amet
+
+ consectetur adipisicing elit.
+
+
+ );
+};
+
+export const InlineSeparatorUsage: Story = {
+ render: InlineSeparatorTemplate,
+ args: { axis: 'vertical', display: 'inline' },
+};
+
+export const VerticalDottedCardExample: Story = {
render: TemplateVertical,
args: {
axis: 'horizontal',
variant: 'dotted',
color: 'accent',
- topSpacing: 1,
- bottomSpacing: 1,
+ spacing: 1,
isStretched: true,
+ dotPosition: 1.25,
md: { axis: 'vertical' },
},
};
-export const VerticalDottedSmall: Story = {
+export const VerticalDottedSmallCardExample: Story = {
render: TemplateVertical,
args: {
axis: 'horizontal',
- topSpacing: 1,
- bottomSpacing: 1,
- variant: 'dotted-small',
+ spacing: 1,
+ variant: 'dotted',
+ dotSize: 'medium',
color: 'accent',
isStretched: true,
+ dotPosition: 1.25,
md: { axis: 'vertical' },
},
};
-
-export const HorizontalDottedSeparator: Story = {
- render: () => (
-
-
-
-
-
-
-
-
- ),
-};
-
-export const DotOnly: Story = {
- render: DotOnlyTemplate,
- args: { spacing: 0.5 },
-};
-
-const InlineSeparatorTemplate: StoryFn = (args) => (
-
-
- Lorem ipsum dolor sit, amet
-
- consectetur adipisicing elit.
-
-
- Lorem ipsum dolor sit, amet
-
- consectetur adipisicing elit.
-
-
- Lorem ipsum dolor sit, amet
-
- consectetur adipisicing elit.
-
-
- Lorem ipsum dolor sit, amet
-
- consectetur adipisicing elit.
-
-
-);
-
-export const InlineSeparatorUsedInText: Story = {
- render: InlineSeparatorTemplate,
- args: { axis: 'vertical', display: 'inline' },
-};
diff --git a/src/tedi/components/misc/separator/separator.tsx b/src/tedi/components/misc/separator/separator.tsx
index bcf4f7682..d343f08b3 100644
--- a/src/tedi/components/misc/separator/separator.tsx
+++ b/src/tedi/components/misc/separator/separator.tsx
@@ -4,154 +4,201 @@ import { CSSProperties } from 'react';
import { BreakpointSupport, useBreakpointProps } from '../../../helpers';
import styles from './separator.module.scss';
-export type SeparatorSpacing = 0 | 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2 | 2.5 | 5;
+export type SeparatorVariant = 'dotted' | 'dot-only';
+export type DotSize = 'large' | 'medium' | 'small' | 'extra-small';
+export type DotStyle = 'filled' | 'outlined';
+export type DotPosition = 'start' | 'center' | 'end' | number;
+
+/**
+ * Margin/padding-like spacing around the separator
+ * - number → uniform spacing on main axis
+ * - object → fine-grained control (top/bottom/left/right)
+ */
+export type SeparatorSpacing =
+ | number
+ | {
+ top?: number;
+ bottom?: number;
+ left?: number;
+ right?: number;
+ };
export interface SeparatorSharedProps {
/**
- * Additional class.
+ * Additional class names
*/
className?: string;
/**
- * Rendered HTML element.
- * @default div
+ * HTML element to render — most common are 'hr', 'div', 'span'
*/
element?: 'hr' | 'div' | 'span';
/**
- * Whether the separator should stretch to fill the full spacing inside cardContent.
+ * When true, the separator stretches to fill available space (100%)
*/
isStretched?: boolean;
- /*
- * Color of separator
- * @default default
+ /**
+ * Semantic color token
+ * @default primary
*/
color?: 'primary' | 'secondary' | 'accent';
- /*
- * Separator style variant.
- */
- variant?: 'dotted' | 'dotted-small' | 'dot-only';
- /*
- * Dot size.
- * Only used when variant="dot-only"
+ /**
+ * Visual style — line with dots vs standalone centered dot(s)
*/
- dotSize?: 'large' | 'medium' | 'small' | 'extra-small';
- /*
- * Thickness in pixels (ignored if variant is used).
- * @default 1
+ variant?: SeparatorVariant;
+ /**
+ * Line thickness in pixels (1 or 2) — affects outlined & solid lines
*/
thickness?: 1 | 2;
/**
- * Spacing applied based on the axis:
- * - For horizontal axis, spacing is applied to top and bottom of the separator.
- * - For vertical axis, spacing is applied to left and right of the separator.
+ * Spacing (margin) around the separator
+ * @example
+ * spacing={16} // 16px top & bottom (horizontal) or left & right (vertical)
+ * spacing={{ top: 24, bottom: 8 }}
*/
spacing?: SeparatorSpacing;
}
-
export interface SeparatorVerticalProps extends SeparatorSharedProps {
/**
- * Height of separator. Use with vertical axis, when full-width separator is not needed.
- * Height can be number in rem units. It's customizable to allow for more flexibility around X components.
+ * Must be set to 'vertical'
+ */
+ axis: 'vertical';
+ /**
+ * Height of the vertical separator in rem units
*/
height?: number;
/**
- * Axis of separator, vertical and horizontal separators support different props
+ * CSS display value — usually 'block' or 'inline-block'
*/
- axis: 'vertical';
- topSpacing?: undefined;
- bottomSpacing?: undefined;
- display?: 'block' | 'inline';
+ display?: 'block' | 'inline' | 'inline-block';
}
-
export interface SeparatorHorizontalProps extends SeparatorSharedProps {
/**
- * Spacing on top of separator. Ignored when spacing is also used. Only for horizontal axis.
+ * Must be set to 'horizontal' or left undefined (defaults to horizontal)
*/
- topSpacing?: SeparatorSpacing;
+ axis?: 'horizontal';
/**
- * Spacing on bottom of separator. Ignored when spacing is also used. Only for horizontal axis.
- */
- bottomSpacing?: SeparatorSpacing;
+ Vertical height is not used in horizontal mode
+ */
+ height?: undefined;
/**
- * Axis of separator, vertical and horizontal separators support different props
+ * Display is forced to 'block' in horizontal mode
*/
- axis?: 'horizontal';
- height?: undefined;
display?: 'block';
}
-export type SeparatorBreakpointProps = {
- /**
- * Spacing values based on breakpoints.
- */
- spacing?: Omit;
+type DottedSeparatorProps = {
+ variant?: 'dotted';
+ dotSize?: DotSize;
+ dotStyle?: DotStyle;
/**
- * Height values based on breakpoints (for vertical separators).
+ * Position of the single dot
+ * @example
+ * 'center' | 'start' | 'end' | 2.5 // 2.5rem from start
*/
- height?: Omit;
+ dotPosition?: DotPosition;
+};
+
+type DotOnlySeparatorProps = {
+ variant: 'dot-only';
+ dotSize: DotSize;
+ dotStyle?: DotStyle;
+ dotPosition?: never;
+};
+
+export type SeparatorBreakpointProps = {
+ spacing?: SeparatorSpacing;
+ height?: number;
axis?: 'horizontal' | 'vertical';
};
export type SeparatorProps = BreakpointSupport<
- | (
- | SeparatorHorizontalProps
- | (SeparatorVerticalProps & {
- variant?: 'dotted' | 'dotted-small';
- dotSize?: undefined;
- })
- )
- | (
- | SeparatorHorizontalProps
- | (SeparatorVerticalProps & {
- variant: 'dot-only';
- dotSize: 'large' | 'medium' | 'small' | 'extra-small';
- })
- )
+ | (SeparatorHorizontalProps & (DottedSeparatorProps | DotOnlySeparatorProps))
+ | (SeparatorVerticalProps & (DottedSeparatorProps | DotOnlySeparatorProps))
> &
SeparatorBreakpointProps;
export const Separator = (props: SeparatorProps): JSX.Element => {
const { getCurrentBreakpointProps } = useBreakpointProps(props.defaultServerBreakpoint);
+
const {
className,
element: Element = 'div',
isStretched,
spacing,
- topSpacing,
- bottomSpacing,
axis = 'horizontal',
- color = 'default',
+ color = 'primary',
variant,
thickness = 1,
height,
- dotSize,
+ dotSize = 'large',
+ dotStyle = 'filled',
+ dotPosition,
display = 'block',
...rest
} = getCurrentBreakpointProps(props);
+ const isNumericDotPosition = typeof dotPosition === 'number';
+ const resolvedDotPosition = variant !== 'dot-only' && !isNumericDotPosition ? dotPosition : undefined;
+
+ let top = 0;
+ let bottom = 0;
+ let left = 0;
+ let right = 0;
+
+ if (typeof spacing === 'number') {
+ if (axis === 'horizontal') {
+ top = bottom = spacing;
+ } else {
+ left = right = spacing;
+ }
+ }
+
+ 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 && dotSize },
- { [styles[`tedi-separator--thickness-${thickness}`]]: thickness && !variant },
- { [styles['tedi-separator--is-stretched']]: isStretched },
- { [styles[`tedi-separator--spacing-${spacing}`.replace('.', '-')]]: spacing },
- { [styles[`tedi-separator--top-${topSpacing}`.replace('.', '-')]]: !spacing && topSpacing },
- { [styles[`tedi-separator--bottom-${bottomSpacing}`.replace('.', '-')]]: !spacing && bottomSpacing }
+ 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,
+ }
);
- const getCssVars = () => {
- const cssvars: CSSProperties = {};
+ 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 (height) {
+ cssVars['--vertical-separator-height'] = `${height}rem`;
+ }
- if (height) cssvars['--vertical-separator-height'] = `${height}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;
diff --git a/src/tedi/components/notifications/alert/alert.module.scss b/src/tedi/components/notifications/alert/alert.module.scss
index e84a27354..ba7710e83 100644
--- a/src/tedi/components/notifications/alert/alert.module.scss
+++ b/src/tedi/components/notifications/alert/alert.module.scss
@@ -5,8 +5,6 @@
}
.tedi-alert {
- padding: var(--alert-default-padding-y) var(--alert-default-padding-x);
- font-size: var(--body-regular-size);
border: 1px solid;
border-radius: var(--alert-radius);
@@ -14,14 +12,32 @@
&__content {
display: flex;
- gap: var(--layout-grid-gutters-08);
- align-items: flex-start;
+ align-self: center;
.tedi-alert__icon {
line-height: var(--body-regular-line-height);
}
}
+ &--size-default {
+ padding: var(--alert-default-padding-y) var(--alert-default-padding-x);
+ font-size: var(--body-regular-size);
+
+ .tedi-alert__content {
+ gap: var(--layout-grid-gutters-08);
+ }
+ }
+
+ &--size-small {
+ padding: var(--alert-default-padding-y-sm) var(--alert-default-padding-x-sm);
+ font-size: var(--body-small-regular-size);
+ line-height: var(--body-small-regular-line-height);
+
+ .tedi-alert__content {
+ gap: var(--layout-grid-gutters-04);
+ }
+ }
+
&--info {
@include alert-variant(var(--alert-default-background-info), var(--alert-default-border-info));
}
diff --git a/src/tedi/components/notifications/alert/alert.spec.tsx b/src/tedi/components/notifications/alert/alert.spec.tsx
index 336858a85..ae944d37d 100644
--- a/src/tedi/components/notifications/alert/alert.spec.tsx
+++ b/src/tedi/components/notifications/alert/alert.spec.tsx
@@ -118,4 +118,23 @@ describe('Alert component', () => {
const title = screen.getByText(text);
expect(title.tagName).toBe(level.toUpperCase());
});
+
+ it('renders with small size and applies correct size class', () => {
+ render(Small Alert);
+
+ const alert = screen.getByRole('alert');
+ expect(alert).toHaveClass('tedi-alert--size-small');
+ });
+
+ it('renders danger alert with small size', () => {
+ render(
+
+ Danger Small Alert
+
+ );
+
+ const alert = screen.getByRole('alert');
+ expect(alert).toHaveClass('tedi-alert--danger');
+ expect(alert).toHaveClass('tedi-alert--size-small');
+ });
});
diff --git a/src/tedi/components/notifications/alert/alert.stories.tsx b/src/tedi/components/notifications/alert/alert.stories.tsx
index ca3d894ff..51d7a59f4 100644
--- a/src/tedi/components/notifications/alert/alert.stories.tsx
+++ b/src/tedi/components/notifications/alert/alert.stories.tsx
@@ -1,5 +1,7 @@
import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Text } from '../../base/typography/text/text';
+import { Col, Row } from '../../layout/grid';
import { VerticalSpacing } from '../../layout/vertical-spacing';
import Link from '../../navigation/link/link';
import Alert, { AlertProps } from '../alert/alert';
@@ -36,6 +38,8 @@ const alertTypes: { type: AlertProps['type']; icon: string }[] = [
{ type: 'danger', icon: 'error' },
];
+const sizeArray: AlertProps['size'][] = ['default', 'small'];
+
const TypesTemplate: StoryFn = (args) => (
{alertTypes.map(({ type, icon }) => (
@@ -46,6 +50,31 @@ const TypesTemplate: StoryFn = (args) => (
);
+interface TemplateMultipleProps extends AlertProps {
+ array: Type[];
+}
+
+const TemplateColumn: StoryFn = (args) => {
+ const { array, ...alertProps } = args;
+
+ return (
+
+ {array.map((value, key) => (
+
+
+ {value ? value.charAt(0).toUpperCase() + value.slice(1) : ''}
+
+
+
+ Content description
+
+
+
+ ))}
+
diff --git a/src/tedi/components/overlays/overlay/overlay-content.tsx b/src/tedi/components/overlays/overlay/overlay-content.tsx
index 9b49ec2b8..0008458c6 100644
--- a/src/tedi/components/overlays/overlay/overlay-content.tsx
+++ b/src/tedi/components/overlays/overlay/overlay-content.tsx
@@ -61,6 +61,7 @@ export const OverlayContent = (props: OverlayContentProps) => {
context,
arrow,
scrollLock,
+ contentId,
} = useContext(OverlayContext);
useEffect(() => {
@@ -88,6 +89,7 @@ export const OverlayContent = (props: OverlayContentProps) => {
{...getFloatingProps({
ref: floating,
tabIndex: -1,
+ id: contentId,
'aria-labelledby': labelledBy,
'aria-describedby': describedBy,
style: {
diff --git a/src/tedi/components/overlays/overlay/overlay-trigger.spec.tsx b/src/tedi/components/overlays/overlay/overlay-trigger.spec.tsx
new file mode 100644
index 000000000..d82fb26e3
--- /dev/null
+++ b/src/tedi/components/overlays/overlay/overlay-trigger.spec.tsx
@@ -0,0 +1,126 @@
+import { render, screen } from '@testing-library/react';
+
+import { useLabels } from '../../../providers/label-provider';
+import { Icon } from '../../base/icon/icon';
+import Button from '../../buttons/button/button';
+import Overlay from './overlay';
+import { OverlayTrigger } from './overlay-trigger';
+
+jest.mock('../../../providers/label-provider', () => ({
+ useLabels: jest.fn(() => ({
+ getLabel: jest.fn((key) => `Mocked Label for ${key}`),
+ })),
+}));
+
+jest.mock('../../../helpers', () => ({
+ ...jest.requireActual('../../../helpers'),
+ useIsTouchDevice: jest.fn(),
+ useIsMounted: jest.fn(() => true),
+}));
+
+describe('Overlay.Trigger', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('applies correct class names when children is text', () => {
+ render(
+
+ Click me
+ Content
+
+ );
+
+ const trigger = screen.getByText('Click me');
+
+ expect(trigger).toHaveClass('tedi-overlay__trigger');
+ expect(trigger).toHaveClass('tedi-overlay__trigger--text');
+ expect(trigger).toHaveClass('my-extra-class');
+ });
+
+ it('applies correct aria attributes when child is an Icon', () => {
+ const { getLabel } = useLabels();
+
+ render(
+
+
+
+
+ Content
+
+ );
+
+ const icon = screen.getByTestId('icon-child');
+ expect(icon).toHaveAttribute('aria-label', getLabel('tooltip.icon-trigger'));
+ });
+
+ it('does NOT apply aria-label when child is not an Icon', () => {
+ const { getLabel } = useLabels();
+
+ render(
+
+
+
+
+ Content
+
+ );
+
+ const btn = screen.getByTestId('btn-child');
+ expect(btn).not.toHaveAttribute('aria-label', getLabel('tooltip.icon-trigger'));
+ });
+
+ it('adds tabindex=0 to non-Icon valid elements (cloneElement path)', () => {
+ render(
+
+
+ Hover me
+
+ Content
+
+ );
+
+ const span = screen.getByTestId('span-child');
+ expect(span).toHaveAttribute('tabindex', '0');
+ });
+
+ it('does NOT add aria-describedby when role is not "tooltip"', () => {
+ render(
+
+
+ Trigger
+
+ Dialog content
+
+ );
+
+ const trigger = screen.getByTestId('trigger-dialog');
+ expect(trigger).not.toHaveAttribute('aria-describedby');
+ });
+
+ it.each([
+ { role: 'tooltip' as const, open: true, expectDescribedBy: true },
+ { role: 'tooltip' as const, open: false, expectDescribedBy: false },
+ { role: 'dialog' as const, open: true, expectDescribedBy: false },
+ ])('aria-describedby behavior - role=$role open=$open → $expectDescribedBy', ({ role, open, expectDescribedBy }) => {
+ const onToggle = jest.fn();
+
+ render(
+
+
+ Trigger
+
+ Content
+
+ );
+
+ const trigger = screen.getByTestId('trigger');
+
+ if (expectDescribedBy) {
+ const content = screen.getByTestId('overlay-content');
+ expect(trigger).toHaveAttribute('aria-describedby', content.id);
+ } else {
+ expect(trigger).not.toHaveAttribute('aria-describedby');
+ }
+ });
+});
diff --git a/src/tedi/components/overlays/overlay/overlay-trigger.tsx b/src/tedi/components/overlays/overlay/overlay-trigger.tsx
index 9fb4dc97e..936305cba 100644
--- a/src/tedi/components/overlays/overlay/overlay-trigger.tsx
+++ b/src/tedi/components/overlays/overlay/overlay-trigger.tsx
@@ -21,9 +21,15 @@ export interface OverlayTriggerProps {
export const OverlayTrigger = (props: OverlayTriggerProps) => {
const { children, className } = props;
const { getLabel } = useLabels();
- const { getReferenceProps, reference, openWith } = useContext(OverlayContext);
+ const { getReferenceProps, reference, openWith, open, role, contentId } = useContext(OverlayContext);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const refs = useMergeRefs([reference, (children as React.ComponentPropsWithRef).ref]);
+ const extraProps =
+ role === 'tooltip'
+ ? {
+ 'aria-describedby': open ? contentId : undefined,
+ }
+ : {};
if (isValidElement(children)) {
return cloneElement(
@@ -31,6 +37,7 @@ export const OverlayTrigger = (props: OverlayTriggerProps) => {
getReferenceProps({
ref: refs,
tabIndex: 0,
+ ...extraProps,
label: children.type === Icon ? getLabel('tooltip.icon-trigger') : undefined,
...children.props,
})
@@ -50,6 +57,7 @@ export const OverlayTrigger = (props: OverlayTriggerProps) => {
},
className
),
+ ...extraProps,
})}
>
{children}
diff --git a/src/tedi/components/overlays/overlay/overlay.spec.tsx b/src/tedi/components/overlays/overlay/overlay.spec.tsx
index c9c38bf48..34ef8eef7 100644
--- a/src/tedi/components/overlays/overlay/overlay.spec.tsx
+++ b/src/tedi/components/overlays/overlay/overlay.spec.tsx
@@ -207,4 +207,49 @@ describe('Overlay component', () => {
expect(document.body.style.overflow).toBe('');
});
});
+
+ it('does NOT add aria-label when child is valid element but NOT an Icon (cloneElement path)', () => {
+ const { getLabel } = useLabels();
+
+ render(
+
+
+ Hover me
+
+ Content
+
+ );
+
+ const span = screen.getByTestId('span-child');
+
+ expect(span).toHaveAttribute('tabindex', '0');
+ expect(span).not.toHaveAttribute('aria-label');
+ expect(span).not.toHaveAttribute('aria-label', getLabel('tooltip.icon-trigger'));
+ });
+
+ it('removes aria-describedby when tooltip is closed', async () => {
+ render(
+
+
+ Trigger div
+
+ Hidden tooltip
+
+ );
+
+ const trigger = screen.getByTestId('div-trigger');
+ expect(trigger).not.toHaveAttribute('aria-describedby');
+
+ await act(async () => {
+ fireEvent.mouseEnter(trigger);
+ });
+
+ expect(trigger).toHaveAttribute('aria-describedby');
+
+ await act(async () => {
+ fireEvent.mouseLeave(trigger);
+ });
+
+ expect(trigger).not.toHaveAttribute('aria-describedby');
+ });
});
diff --git a/src/tedi/components/overlays/overlay/overlay.tsx b/src/tedi/components/overlays/overlay/overlay.tsx
index 279258685..338062c87 100644
--- a/src/tedi/components/overlays/overlay/overlay.tsx
+++ b/src/tedi/components/overlays/overlay/overlay.tsx
@@ -20,7 +20,7 @@ import {
useRole,
UseRoleProps,
} from '@floating-ui/react';
-import { ComponentProps, createContext, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { ComponentProps, createContext, ReactNode, useCallback, useId, useMemo, useRef, useState } from 'react';
import { useIsMounted, useIsTouchDevice } from '../../../helpers';
import { OverlayContent } from './overlay-content';
@@ -117,6 +117,8 @@ export interface OverlayContextType {
placement: Placement;
context: FloatingContext;
scrollLock?: boolean;
+ role?: UseRoleProps['role'];
+ contentId: string;
}
export const OverlayContext = createContext({
@@ -143,6 +145,7 @@ export const OverlayContext = createContext({
placement: 'top',
context: {} as FloatingContext,
scrollLock: undefined,
+ contentId: '',
});
export const Overlay = (props: OverlayProps) => {
@@ -220,42 +223,70 @@ export const Overlay = (props: OverlayProps) => {
}),
]);
- return (
-
- {children}
-
+ const contentId = useId();
+ const contextValue = useMemo(
+ () => ({
+ open: isOpen,
+ onOpenChange,
+ isMounted,
+ openWith,
+ focusManager: focusManager
+ ? {
+ order,
+ modal,
+ initialFocus: resolvedInitialFocus,
+ ...restFocusManager,
+ }
+ : undefined,
+ reference: refs.setReference,
+ floating: refs.setFloating,
+ arrowRef,
+ x,
+ y,
+ strategy,
+ getReferenceProps,
+ getFloatingProps,
+ arrow: {
+ width: arrowDimensions?.width,
+ height: arrowDimensions?.height,
+ ...middlewareData.arrow,
+ },
+ context,
+ placement,
+ scrollLock,
+ role,
+ contentId,
+ }),
+ [
+ isOpen,
+ onOpenChange,
+ isMounted,
+ openWith,
+ focusManager,
+ refs.setReference,
+ refs.setFloating,
+ arrowRef,
+ x,
+ y,
+ strategy,
+ getReferenceProps,
+ getFloatingProps,
+ arrowDimensions?.width,
+ arrowDimensions?.height,
+ middlewareData.arrow,
+ context,
+ placement,
+ scrollLock,
+ role,
+ contentId,
+ modal,
+ order,
+ resolvedInitialFocus,
+ restFocusManager,
+ ]
);
+
+ return {children};
};
Overlay.Trigger = OverlayTrigger;
diff --git a/src/tedi/components/overlays/popover/popover-content.tsx b/src/tedi/components/overlays/popover/popover-content.tsx
index 1086962e4..0dedfac18 100644
--- a/src/tedi/components/overlays/popover/popover-content.tsx
+++ b/src/tedi/components/overlays/popover/popover-content.tsx
@@ -45,7 +45,7 @@ export const PopoverContent = (props: PopoverContentProps) => {
title,
titleProps = { element: 'h4' },
close,
- closeProps = { size: 'large' },
+ closeProps = { size: 'default' },
} = props;
const { onOpenChange } = useContext(OverlayContext);
const titleId = useId();
diff --git a/src/tedi/components/overlays/tooltip/tooltip.tsx b/src/tedi/components/overlays/tooltip/tooltip.tsx
index 916df9ef9..554435b69 100644
--- a/src/tedi/components/overlays/tooltip/tooltip.tsx
+++ b/src/tedi/components/overlays/tooltip/tooltip.tsx
@@ -22,7 +22,7 @@ export interface TooltipProps
}
export const Tooltip = (props: TooltipProps) => {
- const { openWith = 'hover', ...rest } = props;
+ const { openWith = 'hover', focusManager, ...rest } = props;
return (
{
height: ARROW_HEIGHT,
}}
openWith={openWith}
+ role="tooltip"
+ focusManager={{
+ modal: false,
+ order: ['reference', 'content'],
+ returnFocus: true,
+ ...focusManager,
+ }}
{...rest}
/>
);
diff --git a/src/tedi/components/tags/tag/tag.tsx b/src/tedi/components/tags/tag/tag.tsx
index 61405973e..ed1194a15 100644
--- a/src/tedi/components/tags/tag/tag.tsx
+++ b/src/tedi/components/tags/tag/tag.tsx
@@ -71,7 +71,7 @@ export const Tag = (props: TagProps): JSX.Element => {