tharaday 0.8.2 → 0.8.3

package/src/components/Text/Text.module.css

@@ -121,524 +121,3 @@
   text-overflow: ellipsis;
   width: 100%;
 }
-/* Padding */
-.p-0 {
-  padding: 0;
-}
-.p-1 {
-  padding: var(--ds-space-1);
-}
-.p-2 {
-  padding: var(--ds-space-2);
-}
-.p-3 {
-  padding: var(--ds-space-3);
-}
-.p-4 {
-  padding: var(--ds-space-4);
-}
-.p-5 {
-  padding: var(--ds-space-5);
-}
-.p-6 {
-  padding: var(--ds-space-6);
-}
-.p-8 {
-  padding: var(--ds-space-8);
-}
-.p-10 {
-  padding: var(--ds-space-10);
-}
-.p-12 {
-  padding: var(--ds-space-12);
-}
-.p-14 {
-  padding: var(--ds-space-14);
-}
-
-.px-0 {
-  padding-left: 0;
-  padding-right: 0;
-}
-.px-1 {
-  padding-left: var(--ds-space-1);
-  padding-right: var(--ds-space-1);
-}
-.px-2 {
-  padding-left: var(--ds-space-2);
-  padding-right: var(--ds-space-2);
-}
-.px-3 {
-  padding-left: var(--ds-space-3);
-  padding-right: var(--ds-space-3);
-}
-.px-4 {
-  padding-left: var(--ds-space-4);
-  padding-right: var(--ds-space-4);
-}
-.px-5 {
-  padding-left: var(--ds-space-5);
-  padding-right: var(--ds-space-5);
-}
-.px-6 {
-  padding-left: var(--ds-space-6);
-  padding-right: var(--ds-space-6);
-}
-.px-8 {
-  padding-left: var(--ds-space-8);
-  padding-right: var(--ds-space-8);
-}
-.px-10 {
-  padding-left: var(--ds-space-10);
-  padding-right: var(--ds-space-10);
-}
-.px-12 {
-  padding-left: var(--ds-space-12);
-  padding-right: var(--ds-space-12);
-}
-.px-14 {
-  padding-left: var(--ds-space-14);
-  padding-right: var(--ds-space-14);
-}
-
-.py-0 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.py-1 {
-  padding-top: var(--ds-space-1);
-  padding-bottom: var(--ds-space-1);
-}
-.py-2 {
-  padding-top: var(--ds-space-2);
-  padding-bottom: var(--ds-space-2);
-}
-.py-3 {
-  padding-top: var(--ds-space-3);
-  padding-bottom: var(--ds-space-3);
-}
-.py-4 {
-  padding-top: var(--ds-space-4);
-  padding-bottom: var(--ds-space-4);
-}
-.py-5 {
-  padding-top: var(--ds-space-5);
-  padding-bottom: var(--ds-space-5);
-}
-.py-6 {
-  padding-top: var(--ds-space-6);
-  padding-bottom: var(--ds-space-6);
-}
-.py-8 {
-  padding-top: var(--ds-space-8);
-  padding-bottom: var(--ds-space-8);
-}
-.py-10 {
-  padding-top: var(--ds-space-10);
-  padding-bottom: var(--ds-space-10);
-}
-.py-12 {
-  padding-top: var(--ds-space-12);
-  padding-bottom: var(--ds-space-12);
-}
-.py-14 {
-  padding-top: var(--ds-space-14);
-  padding-bottom: var(--ds-space-14);
-}
-
-.pt-0 {
-  padding-top: 0;
-}
-.pt-1 {
-  padding-top: var(--ds-space-1);
-}
-.pt-2 {
-  padding-top: var(--ds-space-2);
-}
-.pt-3 {
-  padding-top: var(--ds-space-3);
-}
-.pt-4 {
-  padding-top: var(--ds-space-4);
-}
-.pt-5 {
-  padding-top: var(--ds-space-5);
-}
-.pt-6 {
-  padding-top: var(--ds-space-6);
-}
-.pt-8 {
-  padding-top: var(--ds-space-8);
-}
-.pt-10 {
-  padding-top: var(--ds-space-10);
-}
-.pt-12 {
-  padding-top: var(--ds-space-12);
-}
-.pt-14 {
-  padding-top: var(--ds-space-14);
-}
-
-.pb-0 {
-  padding-bottom: 0;
-}
-.pb-1 {
-  padding-bottom: var(--ds-space-1);
-}
-.pb-2 {
-  padding-bottom: var(--ds-space-2);
-}
-.pb-3 {
-  padding-bottom: var(--ds-space-3);
-}
-.pb-4 {
-  padding-bottom: var(--ds-space-4);
-}
-.pb-5 {
-  padding-bottom: var(--ds-space-5);
-}
-.pb-6 {
-  padding-bottom: var(--ds-space-6);
-}
-.pb-8 {
-  padding-bottom: var(--ds-space-8);
-}
-.pb-10 {
-  padding-bottom: var(--ds-space-10);
-}
-.pb-12 {
-  padding-bottom: var(--ds-space-12);
-}
-.pb-14 {
-  padding-bottom: var(--ds-space-14);
-}
-
-.pl-0 {
-  padding-left: 0;
-}
-.pl-1 {
-  padding-left: var(--ds-space-1);
-}
-.pl-2 {
-  padding-left: var(--ds-space-2);
-}
-.pl-3 {
-  padding-left: var(--ds-space-3);
-}
-.pl-4 {
-  padding-left: var(--ds-space-4);
-}
-.pl-5 {
-  padding-left: var(--ds-space-5);
-}
-.pl-6 {
-  padding-left: var(--ds-space-6);
-}
-.pl-8 {
-  padding-left: var(--ds-space-8);
-}
-.pl-10 {
-  padding-left: var(--ds-space-10);
-}
-.pl-12 {
-  padding-left: var(--ds-space-12);
-}
-.pl-14 {
-  padding-left: var(--ds-space-14);
-}
-
-.pr-0 {
-  padding-right: 0;
-}
-.pr-1 {
-  padding-right: var(--ds-space-1);
-}
-.pr-2 {
-  padding-right: var(--ds-space-2);
-}
-.pr-3 {
-  padding-right: var(--ds-space-3);
-}
-.pr-4 {
-  padding-right: var(--ds-space-4);
-}
-.pr-5 {
-  padding-right: var(--ds-space-5);
-}
-.pr-6 {
-  padding-right: var(--ds-space-6);
-}
-.pr-8 {
-  padding-right: var(--ds-space-8);
-}
-.pr-10 {
-  padding-right: var(--ds-space-10);
-}
-.pr-12 {
-  padding-right: var(--ds-space-12);
-}
-.pr-14 {
-  padding-right: var(--ds-space-14);
-}
-
-/* Margin */
-.m-0 {
-  margin: 0;
-}
-.m-1 {
-  margin: var(--ds-space-1);
-}
-.m-2 {
-  margin: var(--ds-space-2);
-}
-.m-3 {
-  margin: var(--ds-space-3);
-}
-.m-4 {
-  margin: var(--ds-space-4);
-}
-.m-5 {
-  margin: var(--ds-space-5);
-}
-.m-6 {
-  margin: var(--ds-space-6);
-}
-.m-8 {
-  margin: var(--ds-space-8);
-}
-.m-10 {
-  margin: var(--ds-space-10);
-}
-.m-12 {
-  margin: var(--ds-space-12);
-}
-.m-14 {
-  margin: var(--ds-space-14);
-}
-
-.mx-0 {
-  margin-left: 0;
-  margin-right: 0;
-}
-.mx-1 {
-  margin-left: var(--ds-space-1);
-  margin-right: var(--ds-space-1);
-}
-.mx-2 {
-  margin-left: var(--ds-space-2);
-  margin-right: var(--ds-space-2);
-}
-.mx-3 {
-  margin-left: var(--ds-space-3);
-  margin-right: var(--ds-space-3);
-}
-.mx-4 {
-  margin-left: var(--ds-space-4);
-  margin-right: var(--ds-space-4);
-}
-.mx-5 {
-  margin-left: var(--ds-space-5);
-  margin-right: var(--ds-space-5);
-}
-.mx-6 {
-  margin-left: var(--ds-space-6);
-  margin-right: var(--ds-space-6);
-}
-.mx-8 {
-  margin-left: var(--ds-space-8);
-  margin-right: var(--ds-space-8);
-}
-.mx-10 {
-  margin-left: var(--ds-space-10);
-  margin-right: var(--ds-space-10);
-}
-.mx-12 {
-  margin-left: var(--ds-space-12);
-  margin-right: var(--ds-space-12);
-}
-.mx-14 {
-  margin-left: var(--ds-space-14);
-  margin-right: var(--ds-space-14);
-}
-
-.my-0 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.my-1 {
-  margin-top: var(--ds-space-1);
-  margin-bottom: var(--ds-space-1);
-}
-.my-2 {
-  margin-top: var(--ds-space-2);
-  margin-bottom: var(--ds-space-2);
-}
-.my-3 {
-  margin-top: var(--ds-space-3);
-  margin-bottom: var(--ds-space-3);
-}
-.my-4 {
-  margin-top: var(--ds-space-4);
-  margin-bottom: var(--ds-space-4);
-}
-.my-5 {
-  margin-top: var(--ds-space-5);
-  margin-bottom: var(--ds-space-5);
-}
-.my-6 {
-  margin-top: var(--ds-space-6);
-  margin-bottom: var(--ds-space-6);
-}
-.my-8 {
-  margin-top: var(--ds-space-8);
-  margin-bottom: var(--ds-space-8);
-}
-.my-10 {
-  margin-top: var(--ds-space-10);
-  margin-bottom: var(--ds-space-10);
-}
-.my-12 {
-  margin-top: var(--ds-space-12);
-  margin-bottom: var(--ds-space-12);
-}
-.my-14 {
-  margin-top: var(--ds-space-14);
-  margin-bottom: var(--ds-space-14);
-}
-
-.mt-0 {
-  margin-top: 0;
-}
-.mt-1 {
-  margin-top: var(--ds-space-1);
-}
-.mt-2 {
-  margin-top: var(--ds-space-2);
-}
-.mt-3 {
-  margin-top: var(--ds-space-3);
-}
-.mt-4 {
-  margin-top: var(--ds-space-4);
-}
-.mt-5 {
-  margin-top: var(--ds-space-5);
-}
-.mt-6 {
-  margin-top: var(--ds-space-6);
-}
-.mt-8 {
-  margin-top: var(--ds-space-8);
-}
-.mt-10 {
-  margin-top: var(--ds-space-10);
-}
-.mt-12 {
-  margin-top: var(--ds-space-12);
-}
-.mt-14 {
-  margin-top: var(--ds-space-14);
-}
-
-.mb-0 {
-  margin-bottom: 0;
-}
-.mb-1 {
-  margin-bottom: var(--ds-space-1);
-}
-.mb-2 {
-  margin-bottom: var(--ds-space-2);
-}
-.mb-3 {
-  margin-bottom: var(--ds-space-3);
-}
-.mb-4 {
-  margin-bottom: var(--ds-space-4);
-}
-.mb-5 {
-  margin-bottom: var(--ds-space-5);
-}
-.mb-6 {
-  margin-bottom: var(--ds-space-6);
-}
-.mb-8 {
-  margin-bottom: var(--ds-space-8);
-}
-.mb-10 {
-  margin-bottom: var(--ds-space-10);
-}
-.mb-12 {
-  margin-bottom: var(--ds-space-12);
-}
-.mb-14 {
-  margin-bottom: var(--ds-space-14);
-}
-
-.ml-0 {
-  margin-left: 0;
-}
-.ml-1 {
-  margin-left: var(--ds-space-1);
-}
-.ml-2 {
-  margin-left: var(--ds-space-2);
-}
-.ml-3 {
-  margin-left: var(--ds-space-3);
-}
-.ml-4 {
-  margin-left: var(--ds-space-4);
-}
-.ml-5 {
-  margin-left: var(--ds-space-5);
-}
-.ml-6 {
-  margin-left: var(--ds-space-6);
-}
-.ml-8 {
-  margin-left: var(--ds-space-8);
-}
-.ml-10 {
-  margin-left: var(--ds-space-10);
-}
-.ml-12 {
-  margin-left: var(--ds-space-12);
-}
-.ml-14 {
-  margin-left: var(--ds-space-14);
-}
-
-.mr-0 {
-  margin-right: 0;
-}
-.mr-1 {
-  margin-right: var(--ds-space-1);
-}
-.mr-2 {
-  margin-right: var(--ds-space-2);
-}
-.mr-3 {
-  margin-right: var(--ds-space-3);
-}
-.mr-4 {
-  margin-right: var(--ds-space-4);
-}
-.mr-5 {
-  margin-right: var(--ds-space-5);
-}
-.mr-6 {
-  margin-right: var(--ds-space-6);
-}
-.mr-8 {
-  margin-right: var(--ds-space-8);
-}
-.mr-10 {
-  margin-right: var(--ds-space-10);
-}
-.mr-12 {
-  margin-right: var(--ds-space-12);
-}
-.mr-14 {
-  margin-right: var(--ds-space-14);
-}

package/src/components/Text/Text.test.tsx

@@ -33,9 +33,9 @@ describe('Text', () => {
     expect(container.querySelector('span')).toBeInTheDocument();
   });
 
-  it('applies numeric padding as a CSS class', () => {
+  it('applies numeric padding as inline style', () => {
     const { container } = render(<Text padding={4}>Text</Text>);
-    expect(container.firstChild).toHaveClass('p-4');
+    expect((container.firstChild as HTMLElement).style.padding).toBe('var(--ds-space-4)');
   });
 
   it('applies string padding as inline style', () => {
@@ -43,9 +43,9 @@ describe('Text', () => {
     expect((container.firstChild as HTMLElement).style.padding).toBe('1.5rem');
   });
 
-  it('applies numeric margin as a CSS class', () => {
+  it('applies numeric margin as inline style', () => {
     const { container } = render(<Text margin={2}>Text</Text>);
-    expect(container.firstChild).toHaveClass('m-2');
+    expect((container.firstChild as HTMLElement).style.margin).toBe('var(--ds-space-2)');
   });
 
   it('applies noWrap class when noWrap is true', () => {

package/src/components/Text/Text.tsx

@@ -80,20 +80,6 @@ export const Text = ({
         weight && styles[weight],
         color && styles[`color-${color}`],
         noWrap && styles.noWrap,
-        typeof padding === 'number' && styles[`p-${padding}`],
-        typeof paddingX === 'number' && styles[`px-${paddingX}`],
-        typeof paddingY === 'number' && styles[`py-${paddingY}`],
-        typeof paddingTop === 'number' && styles[`pt-${paddingTop}`],
-        typeof paddingBottom === 'number' && styles[`pb-${paddingBottom}`],
-        typeof paddingLeft === 'number' && styles[`pl-${paddingLeft}`],
-        typeof paddingRight === 'number' && styles[`pr-${paddingRight}`],
-        typeof margin === 'number' && styles[`m-${margin}`],
-        typeof marginX === 'number' && styles[`mx-${marginX}`],
-        typeof marginY === 'number' && styles[`my-${marginY}`],
-        typeof marginTop === 'number' && styles[`mt-${marginTop}`],
-        typeof marginBottom === 'number' && styles[`mb-${marginBottom}`],
-        typeof marginLeft === 'number' && styles[`ml-${marginLeft}`],
-        typeof marginRight === 'number' && styles[`mr-${marginRight}`],
         className
       )}
       style={spacingStyles}

package/src/components/Tooltip/Tooltip.module.css

@@ -31,7 +31,7 @@
   box-shadow: var(--ds-shadow-md);
 }
 
-.visible {
+.tooltip[data-state='visible'] {
   opacity: 1;
 }
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -42,9 +42,9 @@ describe('Tooltip', () => {
       </Tooltip>
     );
     const tooltip = screen.getByRole('tooltip');
-    expect(tooltip).not.toHaveClass('visible');
+    expect(tooltip).toHaveAttribute('data-state', 'hidden');
     await userEvent.hover(screen.getByRole('button'));
-    expect(tooltip).toHaveClass('visible');
+    expect(tooltip).toHaveAttribute('data-state', 'visible');
   });
 
   it('hides tooltip on mouse leave', async () => {
@@ -56,7 +56,7 @@ describe('Tooltip', () => {
     const trigger = screen.getByRole('button');
     await userEvent.hover(trigger);
     await userEvent.unhover(trigger);
-    expect(screen.getByRole('tooltip')).not.toHaveClass('visible');
+    expect(screen.getByRole('tooltip')).toHaveAttribute('data-state', 'hidden');
   });
 
   it('hides tooltip on Escape key', async () => {
@@ -66,8 +66,8 @@ describe('Tooltip', () => {
       </Tooltip>
     );
     await userEvent.tab(); // focuses the button, onFocus shows the tooltip
-    expect(screen.getByRole('tooltip')).toHaveClass('visible');
+    expect(screen.getByRole('tooltip')).toHaveAttribute('data-state', 'visible');
     await userEvent.keyboard('{Escape}');
-    expect(screen.getByRole('tooltip')).not.toHaveClass('visible');
+    expect(screen.getByRole('tooltip')).toHaveAttribute('data-state', 'hidden');
   });
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -68,12 +68,8 @@ export const Tooltip = ({
     >
       <div className={styles.trigger}>{trigger}</div>
       <div
-        className={classnames(
-          styles.tooltip,
-          styles[position],
-          styles[variant],
-          isVisible && styles.visible
-        )}
+        className={classnames(styles.tooltip, styles[position], styles[variant])}
+        data-state={isVisible ? 'visible' : 'hidden'}
         id={tooltipId}
         role="tooltip"
       >

package/src/hooks/useClickOutside.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRef } from 'react';
+
+import { useClickOutside } from './useClickOutside.ts';
+
+interface Props {
+  onClose: () => void;
+  enabled: boolean;
+}
+
+const TestComponent = ({ onClose, enabled }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, onClose, enabled);
+  return (
+    <div data-testid="container">
+      <div ref={ref} data-testid="inside">
+        Inside
+      </div>
+      <div data-testid="outside">Outside</div>
+    </div>
+  );
+};
+
+describe('useClickOutside', () => {
+  it('calls onClose when clicking outside the ref element', async () => {
+    const onClose = vi.fn();
+    render(<TestComponent onClose={onClose} enabled />);
+    await userEvent.click(screen.getByTestId('outside'));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onClose when clicking inside the ref element', async () => {
+    const onClose = vi.fn();
+    render(<TestComponent onClose={onClose} enabled />);
+    await userEvent.click(screen.getByTestId('inside'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('calls onClose when Escape is pressed', async () => {
+    const onClose = vi.fn();
+    render(<TestComponent onClose={onClose} enabled />);
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onClose on outside click when disabled', async () => {
+    const onClose = vi.fn();
+    render(<TestComponent onClose={onClose} enabled={false} />);
+    await userEvent.click(screen.getByTestId('outside'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('does not call onClose on Escape when disabled', async () => {
+    const onClose = vi.fn();
+    render(<TestComponent onClose={onClose} enabled={false} />);
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('stops calling onClose after enabled becomes false', async () => {
+    const onClose = vi.fn();
+    const { rerender } = render(<TestComponent onClose={onClose} enabled />);
+    rerender(<TestComponent onClose={onClose} enabled={false} />);
+    await userEvent.click(screen.getByTestId('outside'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});