Merge branch 'chats' into alex-chats

app/soapbox/components/ui/hstack/hstack.tsx

@@ -42,11 +42,13 @@ interface IHStack {
   grow?: boolean,
   /** Extra CSS styles for the <div> */
   style?: React.CSSProperties
+  /** Whether to let the flexbox wrap onto multiple lines. */
+  wrap?: boolean,
 }
 
 /** Horizontal row of child elements. */
 const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
-  const { space, alignItems, grow, justifyContent, className, ...filteredProps } = props;
+  const { space, alignItems, grow, justifyContent, wrap, className, ...filteredProps } = props;
 
   return (
     <div
@@ -60,6 +62,7 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
         'flex-grow': grow,
+        'flex-wrap': wrap,
       }, className)}
     />
   );

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

@@ -39,12 +39,13 @@ interface IStack extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 /** Vertical stack of child elements. */
-const Stack: React.FC<IStack> = (props) => {
+const Stack: React.FC<IStack> = React.forwardRef((props, ref: React.LegacyRef<HTMLDivElement> | undefined) => {
   const { space, alignItems, justifyContent, className, grow, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
@@ -56,6 +57,6 @@ const Stack: React.FC<IStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default Stack;

app/soapbox/components/ui/text/text.tsx

@@ -84,7 +84,9 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   /** Whether to truncate the text if its container is too small. */
   truncate?: boolean,
   /** Font weight of the text. */
-  weight?: Weights
+  weight?: Weights,
+  /** Tooltip title. */
+  title?: string,
 }
 
 /** UI-friendly text container with dark mode support. */
@@ -133,4 +135,7 @@ const Text: React.FC<IText> = React.forwardRef(
   },
 );
 
-export default Text;
+export {
+  Text as default,
+  IText,
+};