feat(Select): add description support (#695)

Author: tenphi

.changeset/curly-toes-burn.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Remove `ellipsis` flag from `<Select/>`. Text overflow ellipsis is now always used.

.changeset/spicy-mails-whisper.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add support for description in `Select.Item`.

src/components/fields/Select/Select.stories.tsx

@@ -65,7 +65,7 @@ export const Primary = Template.bind({});
 Primary.args = { type: 'primary', placeholder: 'primary' };
 
 export const Clear = Template.bind({});
-Clear.args = { type: 'clear', placeholder: 'clear', width: 'min-content' };
+Clear.args = { type: 'clear', placeholder: 'clear', width: 'max-content' };
 
 export const Invalid = Template.bind({});
 Invalid.args = { selectedKey: 'yellow', validationState: 'invalid' };
@@ -107,11 +107,33 @@ export const Wide: StoryFn<CubeSelectProps<any>> = (args) => (
     ))}
   </Select>
 );
-Wide.args = { width: '500px', defaultSelectedKey: options[0] };
+Wide.args = { width: 'max-content', defaultSelectedKey: options[0] };
 
 export const WithEllipsis = Template.bind({});
 WithEllipsis.args = {
-  ellipsis: true,
   styles: { width: 'max 30x' },
   defaultSelectedKey: 'very-long-option-value-with-suffix',
 };
+
+export const WithDescription: StoryFn<CubeSelectProps<any>> = (args) => (
+  <Select
+    {...args}
+    placeholder="Select a color"
+    listBoxStyles={{ width: 'max 30x' }}
+  >
+    <Select.Item key="red" description="The color of fire">
+      Red
+    </Select.Item>
+    <Select.Item key="green" description="The color of nature">
+      Green
+    </Select.Item>
+    <Select.Item
+      key="blue"
+      description="The color of the sky (very long description)"
+    >
+      Blue
+    </Select.Item>
+  </Select>
+);
+WithDescription.args = {};
+WithDescription.play = WithDisabledOption.play;

src/components/fields/Select/Select.tsx

@@ -95,10 +95,7 @@ const SelectWrapperElement = tasty({
       textAlign: 'left',
       fill: '#clear',
       textOverflow: 'ellipsis',
-      overflow: {
-        '': 'initial',
-        ellipsis: 'hidden',
-      },
+      overflow: 'hidden',
     },
 
     CaretIcon: {
@@ -179,7 +176,7 @@ const ListBoxElement = tasty({
   as: 'ul',
   styles: {
     display: 'flex',
-    gap: '.5x',
+    gap: '1bw',
     flow: 'column',
     margin: '0',
     padding: '.5x',
@@ -196,7 +193,9 @@ const ListBoxElement = tasty({
 const OptionElement = tasty({
   as: 'li',
   styles: {
-    display: 'block',
+    display: 'flex',
+    flow: 'column',
+    gap: '0',
     padding: '(1x - 1px) (1.5x - 1px)',
     cursor: 'pointer',
     radius: true,
@@ -214,6 +213,23 @@ const OptionElement = tasty({
     },
     preset: 't3',
     transition: 'theme',
+    width: 'max 100%',
+
+    Label: {
+      preset: 't3',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      width: 'max 100%',
+    },
+
+    Description: {
+      preset: 't4',
+      color: '#dark-03',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      width: 'max 100%',
+    },
   },
 });
 
@@ -265,7 +281,6 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
   /** The ref for the list box. */
   listBoxRef?: RefObject<HTMLElement>;
   size?: 'small' | 'default' | 'large' | string;
-  ellipsis?: boolean;
   placeholder?: string;
 }
 
@@ -321,7 +336,6 @@ function Select<T extends object>(
     type = 'outline',
     theme = 'default',
     labelSuffix,
-    ellipsis,
     suffixPosition = 'before',
     ...otherProps
   } = props;
@@ -383,7 +397,6 @@ function Select<T extends object>(
 
   const modifiers = useMemo(
     () => ({
-      ellipsis,
       invalid: isInvalid,
       valid: validationState === 'valid',
       disabled: isDisabled,
@@ -395,7 +408,6 @@ function Select<T extends object>(
       suffix: true,
     }),
     [
-      ellipsis,
       validationState,
       isDisabled,
       isLoading,
@@ -575,11 +587,12 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
   // style to the focused option
   let { isFocused, focusProps } = useFocus({ isDisabled });
 
+  const description = (item as any)?.props?.description;
+
   return (
     <OptionElement
       {...mergeProps(optionProps, focusProps)}
       ref={ref}
-      key={item.key}
       mods={{
         selected: isSelected,
         focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
@@ -588,7 +601,8 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
       data-theme={isSelected ? 'special' : undefined}
       styles={styles}
     >
-      {item.rendered}
+      <div data-element="Label">{item.rendered}</div>
+      {description ? <div data-element="Description">{description}</div> : null}
     </OptionElement>
   );
 }
@@ -601,7 +615,12 @@ const __Select = Object.assign(
   _Select as typeof _Select & {
     Item: typeof Item;
   },
-  { Item },
+  {
+    Item: Item as unknown as (props: {
+      description?: ReactNode;
+      [key: string]: any;
+    }) => null,
+  },
 );
 
 __Select.displayName = 'Select';