Document how to use Dialog with a TransitionComponent

src/pattern-library/components/patterns/FadeComponent.tsx

@@ -0,0 +1,31 @@
+import classnames from 'classnames';
+import { useCallback } from 'preact/hooks';
+
+import type { TransitionComponent } from '../../../types';
+
+const FadeComponent: TransitionComponent = ({
+  children,
+  visible,
+  onTransitionEnd,
+}) => {
+  const handleTransitionEnd = useCallback(
+    () => onTransitionEnd?.(visible ? 'in' : 'out'),
+    [visible, onTransitionEnd]
+  );
+
+  return (
+    <div
+      className={classnames('transition-opacity duration-500', {
+        'opacity-100': visible,
+        'opacity-0': !visible,
+      })}
+      // @ts-expect-error react uses "ontransitionend" rather than "onTransitionEnd".
+      // eslint-disable-next-line react/no-unknown-property
+      ontransitionend={handleTransitionEnd}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FadeComponent;

src/pattern-library/components/patterns/feedback/DialogPage.tsx

@@ -17,6 +17,7 @@ import {
   Scroll,
 } from '../../../../next';
 import Library from '../../Library';
+import FadeComponent from '../FadeComponent';
 import { LoremIpsum, nabokovNovels } from '../samples';
 
 const nabokovRows = nabokovNovels();
@@ -322,6 +323,37 @@ export default function DialogPage() {
               </Dialog_>
             </Library.Demo>
           </Library.Example>
+
+          <Library.Example title="transitionComponent">
+            <p>
+              It allows to provide a component which supports transitions, but
+              keeping the internal behavior (initial focus, closing, etc)
+              transparent to consumers.
+            </p>
+            <p>
+              The only requirement is that provided component needs to conform
+              to the next props:
+            </p>
+            <Library.Code
+              content={`type TransitionComponentProps = {
+  visible: boolean;
+  onTransitionEnd?: (direction: 'in' | 'out') => void;
+}`}
+            />
+            <Library.Demo
+              title="Dialog with TransitionComponent example"
+              withSource
+            >
+              <Dialog_
+                title="Dialog with TransitionComponent example"
+                transitionComponent={FadeComponent}
+              >
+                <p>
+                  This dialog has a fade in/out transition when opened/closed.
+                </p>
+              </Dialog_>
+            </Library.Demo>
+          </Library.Example>
         </Library.Pattern>
 
         <Library.Pattern title="Forwarded Props: Panel">