Merge pull request #449 from acelaya-forks/feature/tailwind-improvements

Add Details tailwind-based component

Author: acelaya

CHANGELOG.md

@@ -4,13 +4,16 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.8.11] - 2025-04-20
 ### Added
-* *Nothing*
+* Add default tailwind styles for `code` elements.
+* Add tailwind-based `Details` component.
 
 ### Changed
 * `useToggle` can now return its result as a tuple or as an object, with the former being deprecated.
 * Change focus ring for secondary tailwind-based buttons, to match the button color.
+* Add `cursor-pointer` to `Label` component.
+* Add `cursor-[inherit]` to tailwind-based `Checkbox` and `ToggleSwitch` components.
 
 ### Deprecated
 * *Nothing*

dev/Menu.tsx

@@ -16,6 +16,7 @@ export const Menu: FC = () => {
           <li><Link to="/tailwind/form/buttons">Buttons</Link></li>
           <li><Link to="/tailwind/surfaces/cards">Cards</Link></li>
           <li><Link to="/tailwind/content/tables">Tables</Link></li>
+          <li><Link to="/tailwind/content/details">Details</Link></li>
           <li><Link to="/tailwind/navigation/paginator">Paginator</Link></li>
           <li><Link to="/tailwind/navigation/nav-pills">NavPills</Link></li>
           <li><Link to="/tailwind/feedback/dialogs">Dialogs</Link></li>

dev/tailwind/TailwindComponents.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import { Route, Routes } from 'react-router';
+import { DetailsPage } from './content/DetailsPage';
 import { TablePage } from './content/TablePage';
 import { MessagePage } from './feedback/MessagePage';
 import { ModalDialogPage } from './feedback/ModalDialogPage';
@@ -22,6 +23,7 @@ export const TailwindComponents: FC = () => {
       <Route path="/form/buttons" element={<ButtonsPage />} />
       <Route path="/surfaces/cards" element={<CardsPage />} />
       <Route path="/content/tables" element={<TablePage />} />
+      <Route path="/content/details" element={<DetailsPage />} />
       <Route path="/navigation/paginator" element={<PaginatorPage />} />
       <Route path="/navigation/nav-pills">
         <Route path="" element={<NavPillsPage />} />

dev/tailwind/content/DetailsPage.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import { Checkbox, Label } from '../../../src/tailwind';
+import { Details } from '../../../src/tailwind/content/Details';
+
+export const DetailsPage: FC = () => {
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-y-4">
+      <div className="tw:flex tw:flex-col tw:gap-y-2">
+        <h2>Details</h2>
+        <Details summary="Click here to toggle">
+          <div>This is the content</div>
+          <div>And this is more content</div>
+          <Label className="tw:flex tw:items-center tw:gap-1">
+            <Checkbox /> The content is mounted only while the details are open
+          </Label>
+        </Details>
+      </div>
+    </div>
+  );
+};

src/hooks/use-timeout.ts

@@ -21,7 +21,7 @@ export function useTimeout(
   /** Test seam. Defaults to global clearTimeout */
   clearTimeout_ = globalThis.clearTimeout,
 ): UseTimeoutResult {
-  const timeoutRef = useRef<ReturnType<typeof setTimeout_> | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout_>>(null);
 
   const clearCurrentTimeout = useCallback(() => {
     if (timeoutRef.current) {

src/tailwind/content/Details.tsx

@@ -0,0 +1,32 @@
+import { clsx } from 'clsx';
+import type { FC, HTMLProps, ReactNode } from 'react';
+import { useEffect , useRef,useState  } from 'react';
+
+export type DetailsProps = Omit<HTMLProps<HTMLDetailsElement>, 'ref'> & {
+  summary: ReactNode;
+  summaryClasses?: string;
+};
+
+export const Details: FC<DetailsProps> = ({ children, summary, summaryClasses, ...rest }) => {
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const detailsEl = detailsRef.current;
+    const toggleHandler = () => setIsOpen(!!detailsEl?.open);
+
+    detailsEl?.addEventListener('toggle', toggleHandler);
+    return () => detailsEl?.removeEventListener('toggle', toggleHandler);
+  }, []);
+
+  return (
+    <details ref={detailsRef} {...rest}>
+      <summary className={clsx('tw:focus-ring tw:px-1 tw:-mx-1 tw:rounded-sm', summaryClasses)}>{summary}</summary>
+      {isOpen && (
+        <div className="tw:mt-3 tw:flex tw:flex-col tw:gap-y-3">
+          {children}
+        </div>
+      )}
+    </details>
+  );
+};

src/tailwind/form/BooleanControl.tsx

@@ -17,7 +17,7 @@ export const BooleanControl = forwardRef<HTMLInputElement, BooleanControlProps>(
       ref={ref}
       type="checkbox"
       className={clsx(
-        'tw:appearance-none tw:focus-ring',
+        'tw:appearance-none tw:focus-ring tw:cursor-[inherit]',
         'tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border',
         'tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat',
         // Use different background color when rendered inside a card

src/tailwind/form/Label.tsx

@@ -1,11 +1,12 @@
+import { clsx } from 'clsx';
 import type { FC, HTMLProps } from 'react';
 
 export type LabelProps = HTMLProps<HTMLLabelElement> & {
   required?: boolean;
 };
 
-export const Label: FC<LabelProps> = ({ required, children, ...rest }) => (
-  <label {...rest}>
+export const Label: FC<LabelProps> = ({ required, children, className, ...rest }) => (
+  <label className={clsx('tw:cursor-pointer', className)} {...rest}>
     {children}
     {required && <span className="tw:text-danger tw:ml-1" data-testid="required-indicator">*</span>}
   </label>

src/tailwind/tailwind.preset.css

@@ -143,6 +143,10 @@
     p {
         @apply tw:m-0;
     }
+
+    code {
+        @apply tw:text-sm tw:text-pink-600 tw:dark:text-pink-500 tw:font-mono;
+    }
 }
 
 @utility focus-ring-base {

test/tailwind/content/Details.test.tsx

@@ -0,0 +1,32 @@
+import { screen } from '@testing-library/react';
+import type { UserEvent } from '@testing-library/user-event';
+import type { DetailsProps } from '../../../src/tailwind/content/Details';
+import { Details } from '../../../src/tailwind/content/Details';
+import { checkAccessibility } from '../../__helpers__/accessibility';
+import { renderWithEvents } from '../../__helpers__/setUpTest';
+
+describe('<Details />', () => {
+  const setUp = (props: Omit<DetailsProps, 'summary' | 'children'> = {}) => renderWithEvents(
+    <Details summary="Click me" {...props}>
+      <div>These are the children</div>
+    </Details>,
+  );
+  const openDetails = (user: UserEvent) => user.click(screen.getByText('Click me'));
+
+  it.each([
+    setUp,
+    async () => {
+      const { user, container } = setUp();
+      await openDetails(user);
+      return { container };
+    },
+  ])('passes a11y checks', (doSetUp) => checkAccessibility(doSetUp()));
+
+  it('renders children only while it is open', async () => {
+    const { user } = setUp();
+
+    expect(screen.queryByText('These are the children')).not.toBeInTheDocument();
+    await openDetails(user);
+    expect(screen.getByText('These are the children')).toBeInTheDocument();
+  });
+});