feat(SelectInputV2): allow description as ReactNode and tooltip (#3810)

* feat(SelectInputV2): allow description as ReactNode and tooltip for an option * fix: double tooltip in tests resources * fix: update snapshots
scaleway · May 23, 2024 · 2c7da50 · 2c7da50
1 parent 6701696
commit 2c7da50
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 294 deletions.
diff --git a/.changeset/pretty-bats-beam.md b/.changeset/pretty-bats-beam.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Allow description of an option to be a ReactNode instead of a string in `<SelectInputV2 />`
diff --git a/.changeset/twenty-badgers-boil.md b/.changeset/twenty-badgers-boil.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Add possibility to put a tooltip on an option in `<SelectInputV2 />`
diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SelectInputFieldV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -2143,8 +2143,8 @@ exports[`SelectInputField > should trigger events 1`] = `
         class="emotion-0 emotion-1"
       >
         <div
-          aria-controls=":r10:"
-          aria-describedby=":r10:"
+          aria-controls=":r19:"
+          aria-describedby=":r19:"
           class="emotion-2 emotion-3"
           data-container-full-width="true"
           tabindex="0"
@@ -2163,7 +2163,7 @@ exports[`SelectInputField > should trigger events 1`] = `
               data-size="large"
               data-state="neutral"
               data-testid="select-bar"
-              id=":rv:"
+              id=":r18:"
               role="combobox"
               tabindex="0"
             >

diff --git a/packages/ui/src/components/SelectInputV2/DropdownOption.tsx b/packages/ui/src/components/SelectInputV2/DropdownOption.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
+import { Tooltip } from '../Tooltip'
 import type { OptionType } from './types'
 
 const StyledInfo = styled.div`
@@ -20,125 +21,133 @@ export const DisplayOption = ({
 }: DisplayOptionProps) => {
   if (descriptionDirection === 'row' && optionalInfoPlacement === 'left') {
     return (
-      <Stack
-        gap={0.5}
-        direction="row"
-        justifyContent="left"
-        data-testid={`option-stack-${option.value}`}
-      >
-        <Stack gap={0.5} direction="row" alignItems="center">
-          {option.optionalInfo ?? null}
-          <Text as="span" variant="body" placement="left">
-            {option.label}
-          </Text>
-          {option.description ? (
-            <Text
-              as="span"
-              variant="bodySmall"
-              sentiment="neutral"
-              placement="left"
-              prominence="weak"
-            >
-              {option.description}
+      <Tooltip text={option.tooltip}>
+        <Stack
+          gap={0.5}
+          direction="row"
+          justifyContent="left"
+          data-testid={`option-stack-${option.value}`}
+        >
+          <Stack gap={0.5} direction="row" alignItems="center">
+            {option.optionalInfo ?? null}
+            <Text as="span" variant="body" placement="left">
+              {option.label}
             </Text>
-          ) : null}
+            {option.description ? (
+              <Text
+                as="span"
+                variant="bodySmall"
+                sentiment="neutral"
+                placement="left"
+                prominence="weak"
+              >
+                {option.description}
+              </Text>
+            ) : null}
+          </Stack>
         </Stack>
-      </Stack>
+      </Tooltip>
     )
   }
 
   if (descriptionDirection === 'row' && optionalInfoPlacement === 'right') {
     return (
-      <Stack
-        gap={0.5}
-        direction="row"
-        justifyContent="space-between"
-        alignItems="baseline"
-        data-testid={`option-stack-${option.value}`}
-      >
-        <Stack gap={0.5} direction="row">
-          <Text as="span" variant="body" placement="left">
-            {option.label}
-          </Text>
-          {option.description ? (
-            <Text
-              as="span"
-              variant="bodySmall"
-              sentiment="neutral"
-              placement="left"
-              prominence="weak"
-            >
-              {option.description}
+      <Tooltip text={option.tooltip}>
+        <Stack
+          gap={0.5}
+          direction="row"
+          justifyContent="space-between"
+          alignItems="baseline"
+          data-testid={`option-stack-${option.value}`}
+        >
+          <Stack gap={0.5} direction="row">
+            <Text as="span" variant="body" placement="left">
+              {option.label}
             </Text>
+            {option.description ? (
+              <Text
+                as="span"
+                variant="bodySmall"
+                sentiment="neutral"
+                placement="left"
+                prominence="weak"
+              >
+                {option.description}
+              </Text>
+            ) : null}
+          </Stack>
+          {option.optionalInfo ? (
+            <StyledInfo>{option.optionalInfo}</StyledInfo>
           ) : null}
         </Stack>
-        {option.optionalInfo ? (
-          <StyledInfo>{option.optionalInfo}</StyledInfo>
-        ) : null}
-      </Stack>
+      </Tooltip>
     )
   }
 
   if (descriptionDirection === 'column' && optionalInfoPlacement === 'left') {
     return (
-      <Stack
-        gap={0.5}
-        direction="row"
-        justifyContent={option.optionalInfo ? 'left' : 'space-between'}
-        alignItems="normal"
-      >
-        {option.optionalInfo ?? null}
-
+      <Tooltip text={option.tooltip}>
         <Stack
           gap={0.5}
-          direction="column"
-          data-testid={`option-stack-${option.value}`}
+          direction="row"
+          justifyContent={option.optionalInfo ? 'left' : 'space-between'}
+          alignItems="normal"
         >
-          <Text as="span" variant="body" placement="left">
-            {option.label}
-          </Text>
-          {option.description ? (
-            <Text
-              as="span"
-              variant="bodySmall"
-              sentiment="neutral"
-              placement="left"
-              prominence="weak"
-            >
-              {option.description}
+          {option.optionalInfo ?? null}
+
+          <Stack
+            gap={0.5}
+            direction="column"
+            data-testid={`option-stack-${option.value}`}
+          >
+            <Text as="span" variant="body" placement="left">
+              {option.label}
             </Text>
-          ) : null}
+            {option.description ? (
+              <Text
+                as="span"
+                variant="bodySmall"
+                sentiment="neutral"
+                placement="left"
+                prominence="weak"
+              >
+                {option.description}
+              </Text>
+            ) : null}
+          </Stack>
         </Stack>
-      </Stack>
+      </Tooltip>
     )
   }
 
   return (
-    <Stack
-      gap={0.5}
-      direction="column"
-      alignItems="normal"
-      data-testid={`option-stack-${option.value}`}
-    >
-      <Stack gap={0.5} direction="row" justifyContent="space-between">
-        <Text as="span" variant="body" placement="left">
-          {option.label}
-        </Text>
-        {option.optionalInfo ? (
-          <StyledInfo>{option.optionalInfo}</StyledInfo>
+    <Tooltip text={option.tooltip}>
+      <Stack
+        gap={0.5}
+        direction="column"
+        alignItems="normal"
+        data-testid={`option-stack-${option.value}`}
+      >
+        <Stack gap={0.5} direction="row" justifyContent="space-between">
+          <Text as="span" variant="body" placement="left">
+            {option.label}
+          </Text>
+          {option.optionalInfo ? (
+            <StyledInfo>{option.optionalInfo}</StyledInfo>
+          ) : null}
+        </Stack>
+        {option.description ? (
+          <Text
+            as="span"
+            variant="bodySmall"
+            sentiment="neutral"
+            placement="left"
+            prominence="weak"
+          >
+            {option.description}
+          </Text>
         ) : null}
       </Stack>
-      {option.description ? (
-        <Text
-          as="span"
-          variant="bodySmall"
-          sentiment="neutral"
-          placement="left"
-          prominence="weak"
-        >
-          {option.description}
-        </Text>
-      ) : null}
-    </Stack>
+    </Tooltip>
   )
 }
diff --git a/packages/ui/src/components/SelectInputV2/__stories__/resources.tsx b/packages/ui/src/components/SelectInputV2/__stories__/resources.tsx
@@ -2,19 +2,13 @@ import { CategoryIcon } from '@ultraviolet/icons'
 import { Badge } from '../../Badge'
 import { Bullet } from '../../Bullet'
 import { Text } from '../../Text'
-import { Tooltip } from '../../Tooltip'
 
 const reactNeptune = (
   <Text as="div" variant="body">
     Neptune <Badge>Label</Badge>
   </Text>
 )
 
-const marsToolTip = (
-  <Tooltip placement="top" text="This option is disabled">
-    Mars
-  </Tooltip>
-)
 const optionalInfo1 = <Badge>Optional info</Badge>
 const optionalInfo2 = <Bullet text="1" />
 const optionalInfo3 = <CategoryIcon name="network" />
@@ -54,8 +48,9 @@ export const dataUnGrouped = [
   },
   {
     value: 'mars',
-    label: marsToolTip,
+    label: 'Mars',
     disabled: true,
+    tooltip: 'Mars cant be selected',
   },
   {
     value: 'jupiter',