From ec30ef84af201c9590e418462b4b75f6b17d9acb Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 1 Apr 2024 21:23:38 -0400
Subject: [PATCH] Improve InputSelect, Text components

---
 app/components/InputSelect.tsx |  2 +-
 app/components/Text.ts         | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx
index 26980f650..ee0960ee7 100644
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -174,7 +174,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
         {opt.description && (
           <>
             &nbsp;
-            <Text as="span" type="tertiary" size="small">
+            <Text as="span" type="tertiary" size="small" ellipsis>
               – {opt.description}
             </Text>
           </>
diff --git a/app/components/Text.ts b/app/components/Text.ts
index 88070b0a6..07dd36e69 100644
--- a/app/components/Text.ts
+++ b/app/components/Text.ts
@@ -1,11 +1,19 @@
 import styled, { css } from "styled-components";
+import { ellipsis } from "@shared/styles";
 
 type Props = {
+  /** The type of text to render */
   type?: "secondary" | "tertiary" | "danger";
+  /** The size of the text */
   size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+  /** The direction of the text (defaults to ltr) */
   dir?: "ltr" | "rtl" | "auto";
+  /** Whether the text should be selectable (defaults to false) */
   selectable?: boolean;
+  /** The font weight of the text */
   weight?: "bold" | "normal";
+  /** Whether the text should be truncated with an ellipsis */
+  ellipsis?: boolean;
 };
 
 /**
@@ -48,6 +56,8 @@ const Text = styled.span<Props>`
 
   white-space: normal;
   user-select: ${(props) => (props.selectable ? "text" : "none")};
+
+  ${(props) => props.ellipsis && ellipsis()}
 `;
 
 export default Text;