Support setting transition-delay in Slider

This can be used to defer the exit animation. The initial use case is the
moderation list, where we want annotations to be briefly visible with their new
moderation status after being moderated, before being hidden.

Author: robertknight

src/components/transition/Slider.tsx

@@ -6,6 +6,7 @@ const Slider: TransitionComponent = ({
   children,
   direction = 'in',
   onTransitionEnd,
+  delay,
 }) => {
   const visible = direction === 'in';
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -93,6 +94,8 @@ const Slider: TransitionComponent = ({
         // are visible.
         overflow: isFullyVisible ? 'visible' : 'hidden',
         transition: `height 0.15s ease-in`,
+
+        transitionDelay: delay,
       }}
     >
       {children}

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

@@ -268,6 +268,21 @@ export default function UsingComponentsPage() {
           </Library.Link>
         </p>
         <Library.Section title="API" id="transition-components-api">
+          <Library.SectionL3 title="delay">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Sets delay before transitions begin. See the{' '}
+                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay">
+                  transition-delay
+                </a>{' '}
+                CSS property.
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>string | undefined</code>
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.SectionL3>
+
           <Library.SectionL3 title="direction">
             <Library.Info>
               <Library.InfoItem label="description">

src/pattern-library/components/patterns/transition/SliderPage.tsx

@@ -72,7 +72,7 @@ export default function SliderPage() {
 
         <Library.SectionL2 title="Component API">
           <p>
-            <code>Button</code> accepts{' '}
+            <code>Slider</code> accepts{' '}
             <Library.Link href="/using-components#transition-components-api">
               transition component props
             </Library.Link>

src/types.ts

@@ -55,8 +55,17 @@ export type IconComponent = FunctionComponent<JSX.SVGAttributes<SVGSVGElement>>;
  * animate the mounting and unmounting of a child component.
  */
 export type TransitionComponent = FunctionComponent<{
+  /** Whether the children should be revealed ("in") or hidden ("out"). */
   direction?: 'in' | 'out';
+
+  /** Callback invoked when transition ends. */
   onTransitionEnd?: (direction: 'in' | 'out') => void;
+
+  /**
+   * Delay before transitions begin. This corresponds to the `transition-delay`
+   * CSS property.
+   */
+  delay?: string;
 }>;
 
 export type OrderDirection = 'ascending' | 'descending';