Merge remote-tracking branch 'origin/develop' into chats

app/soapbox/components/ui/stack/stack.tsx

@@ -20,29 +20,35 @@ const justifyContentOptions = {
 };
 
 const alignItemsOptions = {
+  top: 'items-start',
+  bottom: 'items-end',
   center: 'items-center',
   start: 'items-start',
 };
 
 interface IStack extends React.HTMLAttributes<HTMLDivElement> {
-  /** Size of the gap between elements. */
-  space?: keyof typeof spaces
   /** Horizontal alignment of children. */
-  alignItems?: 'center' | 'start',
+  alignItems?: keyof typeof alignItemsOptions
+  /** Extra class names on the element. */
+  className?: string
   /** Vertical alignment of children. */
   justifyContent?: keyof typeof justifyContentOptions
-  /** Extra class names on the <div> element. */
-  className?: string
+  /** Size of the gap between elements. */
+  space?: keyof typeof spaces
   /** Whether to let the flexbox grow. */
   grow?: boolean
+  /** HTML element to use for container. */
+  element?: keyof JSX.IntrinsicElements,
 }
 
 /** Vertical stack of child elements. */
 const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
-  const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
+  const { space, alignItems, justifyContent, className, grow, element = 'div', ...filteredProps } = props;
+
+  const Elem = element as 'div';
 
   return (
-    <div
+    <Elem
       {...filteredProps}
       ref={ref}
       className={classNames('flex flex-col', {