Fixed number and tooltip align (deephaven#293)

bmingles · Mar 6, 2024 · 3882a01 · 3882a01
1 parent 878ea37
commit 3882a01
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/code-studio/src/styleguide/Pickers.tsx b/packages/code-studio/src/styleguide/Pickers.tsx
@@ -57,13 +57,23 @@ export function Pickers(): JSX.Element {
               <Text>Complex Ccc</Text>
             </Item>
           </Section>
-          <Section>
+          <Section key="Key B">
             <Item>Item Ddd</Item>
             <Item>Item Eee</Item>
             <Item textValue="Complex Fff">
               <PersonIcon />
               <Text>Complex Fff</Text>
             </Item>
+            <Item key="Ggg">
+              <PersonIcon />
+              <Text>Label</Text>
+              <Text slot="description">Description</Text>
+            </Item>
+            <Item key="Hhh">
+              <PersonIcon />
+              <Text>Label that causes overflow</Text>
+              <Text slot="description">Description that causes overflow</Text>
+            </Item>
           </Section>
         </Picker>
       </Flex>

diff --git a/packages/components/src/spectrum/picker/Picker.tsx b/packages/components/src/spectrum/picker/Picker.tsx
@@ -62,7 +62,7 @@ function createTooltipContent(content: ReactNode) {
 
   if (Array.isArray(content)) {
     return (
-      <Flex direction="column">
+      <Flex direction="column" alignItems="start">
         {content.filter(node => isElementOfType(node, Text))}
       </Flex>
     );

diff --git a/packages/components/src/spectrum/picker/PickerItemContent.tsx b/packages/components/src/spectrum/picker/PickerItemContent.tsx
@@ -48,7 +48,7 @@ export function PickerItemContent({
   }
   /* eslint-enable no-param-reassign */
 
-  return typeof content === 'string' ? (
+  return typeof content === 'string' || typeof content === 'number' ? (
     <Text UNSAFE_className={stylesCommon.spectrumEllipsis}>{content}</Text>
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment