feat(Item): add generic item component

cube-js · tenphi · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025 · 367252a496a017bc82150bbd10ec5fa8e3497065
commit 367252a496a017bc82150bbd10ec5fa8e3497065
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import { Item } from 'react-stately';
+
+import { Styles } from '../tasty';
+
+const _Item = Item as unknown as (props: {
+  description?: ReactNode;
+  icon?: ReactElement;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  rightIcon?: ReactElement;
+  styles?: Styles;
+  [key: string]: any;
+}) => ReactElement;
+
+export { _Item as Item };
diff --git a/src/components/actions/Menu/Menu.tsx b/src/components/actions/Menu/Menu.tsx
@@ -3,11 +3,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { DOMRef, FocusStrategy, ItemProps } from '@react-types/shared';
 import React, { ReactElement, ReactNode, useMemo } from 'react';
 import { AriaMenuProps, useMenu } from 'react-aria';
-import {
-  Item as BaseItem,
-  Section as BaseSection,
-  useTreeState,
-} from 'react-stately';
+import { Section as BaseSection, useTreeState } from 'react-stately';
 
 import {
   BasePropsWithoutChildren,
@@ -19,6 +15,7 @@ import {
 } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { CubeBlockProps } from '../../Block';
+import { Item } from '../../Item';
 import {
   CubeTooltipProviderProps,
   TooltipProvider,
@@ -309,10 +306,6 @@ type ItemComponent = <T>(
 
 type SectionComponent = typeof BaseSection;
 
-const Item = Object.assign(BaseItem, {
-  displayName: 'Item',
-}) as ItemComponent;
-
 const Section = Object.assign(BaseSection, {
   displayName: 'Section',
 }) as SectionComponent;
@@ -323,10 +316,7 @@ type __MenuComponent = typeof _Menu & {
 };
 
 const __Menu = Object.assign(_Menu as __MenuComponent, {
-  Item: Item as unknown as (props: {
-    description?: ReactNode;
-    [key: string]: any;
-  }) => ReactElement,
+  Item,
   Section,
   displayName: 'Menu',
 });

diff --git a/src/components/content/ItemBase/ItemBase.tsx b/src/components/content/ItemBase/ItemBase.tsx
@@ -34,6 +34,7 @@ export interface CubeItemBaseProps extends BaseProps {
   rightIcon?: ReactNode;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  description?: ReactNode;
   size?:
     | 'xsmall'
     | 'small'
@@ -53,14 +54,19 @@ export interface CubeItemBaseProps extends BaseProps {
     | (string & {});
   theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
   variant?: ItemVariant;
+  /**
+   * HTML button type to avoid implicit form submission when used as `as="button"`.
+   * Kept separate from visual `type` prop.
+   */
+  buttonType?: 'button' | 'submit' | 'reset';
 }
 
 const DEFAULT_ICON_STYLES: Styles = {
   display: 'grid',
   placeItems: 'center',
   placeContent: 'stretch',
   aspectRatio: '1 / 1',
-  height: 'max $size',
+  width: '($size - 2bw)',
 };
 
 const ADDITION_STYLES: Styles = {
@@ -82,13 +88,15 @@ const ItemBaseElement = tasty({
       'with-icon & with-prefix':
         'max-content max-content 1sf max-content max-content',
     },
+    flexShrink: 0,
     position: 'relative',
     padding: 0,
     margin: 0,
     radius: true,
     height: {
       '': '$size',
       '[data-size="inline"]': 'initial',
+      'with-description': 'max-content',
     },
     preset: {
       '': 't3m',
@@ -99,21 +107,18 @@ const ItemBaseElement = tasty({
     textDecoration: 'none',
     transition: 'theme',
     reset: 'button',
-    border: {
-      '': '#clear',
-      focused: '#purple-text',
-    },
-    fill: {
-      '': '#dark.0',
-      hovered: '#dark.03',
-      'pressed | (selected & !hovered)': '#dark.06',
-    },
-    color: {
-      '': '#dark-02',
-      hovered: '#dark-02',
-      pressed: '#dark',
-      '[disabled] | disabled': '#dark-04',
-    },
+    border: '#clear',
+    // fill: {
+    //   '': '#dark.0',
+    //   hovered: '#dark.03',
+    //   'pressed | (selected & !hovered)': '#dark.06',
+    // },
+    // color: {
+    //   '': '#dark-02',
+    //   hovered: '#dark-02',
+    //   pressed: '#dark',
+    //   '[disabled] | disabled': '#dark-04',
+    // },
     outlineOffset: 1,
     cursor: {
       '': 'default',
@@ -131,26 +136,24 @@ const ItemBaseElement = tasty({
       '[data-size="inline"]': '',
     },
     '$inline-padding': {
-      '': 'max(1x, (($size - 1lh) / 2 + 4px))',
+      '': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
       '[data-size="inline"]': 0,
     },
     '$block-padding': {
       '': '.5x',
       '[data-size="xsmall"]': '.25x',
       '[data-size="inline"]': 0,
     },
+    '$inline-compensation': '.5x',
+    '$min-inline-padding': '1x',
 
     Icon: DEFAULT_ICON_STYLES,
 
     RightIcon: DEFAULT_ICON_STYLES,
 
     Content: {
       display: 'block',
-      placeSelf: {
-        '': 'center',
-        'with-icon | with-right-icon | with-prefix | with-suffix':
-          'center start',
-      },
+      placeSelf: 'center start',
       boxSizing: 'border-box',
       placeContent: 'stretch',
       whiteSpace: 'nowrap',
@@ -172,6 +175,15 @@ const ItemBaseElement = tasty({
       },
     },
 
+    Description: {
+      preset: 't4',
+      color: '#dark-03',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%',
+    },
+
     Prefix: {
       ...ADDITION_STYLES,
       padding: {
@@ -238,7 +250,9 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
     contentProps,
     prefix,
     suffix,
+    description,
     styles,
+    buttonType,
     ...rest
   } = props;
 
@@ -248,9 +262,10 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
       'with-right-icon': !!rightIcon,
       'with-prefix': !!prefix,
       'with-suffix': !!suffix,
+      'with-description': !!description,
       ...mods,
     };
-  }, [icon, rightIcon, prefix, suffix, mods]);
+  }, [icon, rightIcon, prefix, suffix, description, mods]);
 
   return (
     <ItemBaseElement
@@ -261,12 +276,16 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
       data-theme={theme}
       mods={mods}
       styles={styles}
+      type={buttonType as any}
       {...rest}
     >
       {icon && <div data-element="Icon">{icon}</div>}
       {prefix && <div data-element="Prefix">{prefix}</div>}
       <div data-element="Content" {...contentProps}>
         {children}
+        {description ? (
+          <div data-element="Description">{description}</div>
+        ) : null}
       </div>
       {suffix && <div data-element="Suffix">{suffix}</div>}
       {rightIcon && <div data-element="RightIcon">{rightIcon}</div>}

diff --git a/src/components/content/List/SectionHeading.tsx b/src/components/content/List/SectionHeading.tsx
@@ -0,0 +1,15 @@
+import { tasty } from '../../../tasty';
+import { Space } from '../../layout/Space';
+
+export const SectionHeading = tasty(Space, {
+  qa: 'SectionHeading',
+  as: 'div',
+  styles: {
+    color: '#dark-04',
+    preset: 'c2',
+    padding: '.5x 1x',
+    height: '3x',
+    placeContent: 'center space-between',
+    align: 'start',
+  },
+});
diff --git a/src/components/content/List/index.ts b/src/components/content/List/index.ts
@@ -0,0 +1 @@
+export * from './SectionHeading';
diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
@@ -17,7 +17,7 @@ import {
   useHover,
   useOverlayPosition,
 } from 'react-aria';
-import { Section as BaseSection, Item, useComboBoxState } from 'react-stately';
+import { Section as BaseSection, useComboBoxState } from 'react-stately';
 
 import { useEvent } from '../../../_internal/index';
 import { DownIcon, LoadingIcon } from '../../../icons';
@@ -39,6 +39,7 @@ import {
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Item } from '../../Item';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
@@ -512,10 +513,7 @@ const ComboBoxSectionComponent = Object.assign(BaseSection, {
   displayName: 'Section',
 }) as SectionComponentCB;
 
-ComboBox.Item = Item as unknown as (props: {
-  description?: ReactNode;
-  [key: string]: any;
-}) => ReactElement;
+ComboBox.Item = Item;
 
 ComboBox.Section = ComboBoxSectionComponent;
 

diff --git a/src/components/fields/ListBox/ListBox.tsx b/src/components/fields/ListBox/ListBox.tsx
@@ -21,7 +21,7 @@ import {
   useListBoxSection,
   useOption,
 } from 'react-aria';
-import { Section as BaseSection, Item, useListState } from 'react-stately';
+import { Section as BaseSection, useListState } from 'react-stately';
 
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CheckIcon } from '../../../icons';
@@ -47,6 +47,7 @@ import {
   StyledSectionHeading,
 } from '../../actions/Menu/styled';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { Item } from '../../Item';
 
 import type { CollectionBase, Key } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
@@ -1202,11 +1203,7 @@ const ListBoxSectionComponent = Object.assign(BaseSection, {
   displayName: 'Section',
 }) as SectionComponent;
 
-ListBox.Item = Item as unknown as (props: {
-  description?: ReactNode;
-  textValue?: string;
-  [key: string]: any;
-}) => ReactElement;
+ListBox.Item = Item;
 
 ListBox.Section = ListBoxSectionComponent;
 

diff --git a/src/components/fields/Select/Select.stories.tsx b/src/components/fields/Select/Select.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import { IconCoin } from '@tabler/icons-react';
+import { IconCoin, IconUser } from '@tabler/icons-react';
 
 import { baseProps } from '../../../stories/lists/baseProps';
 import { Text } from '../../content/Text';
@@ -462,6 +462,43 @@ export const WithDescription: StoryFn<CubeSelectProps<any>> = (args) => (
 WithDescription.args = {};
 WithDescription.play = WithDisabledOption.play;
 
+export const WithIconsAndDescriptions: StoryFn<CubeSelectProps<any>> = (
+  args,
+) => (
+  <Select
+    {...args}
+    placeholder="Select a color"
+    listBoxStyles={{ width: 'max 36x' }}
+  >
+    <Select.Item key="yellow" description="Child and light" icon={<IconUser />}>
+      Yellow
+    </Select.Item>
+    <Select.Item
+      key="red"
+      description="Hot and strong"
+      prefix={<span>🔥</span>}
+    >
+      Red
+    </Select.Item>
+    <Select.Item
+      key="green"
+      description="Fresh and calm"
+      suffix={<Text color="#dark-03">#00A000</Text>}
+    >
+      Green
+    </Select.Item>
+    <Select.Item
+      key="blue"
+      description="Cold and deep"
+      rightIcon={<span>→</span>}
+    >
+      Blue
+    </Select.Item>
+  </Select>
+);
+WithIconsAndDescriptions.args = {};
+WithIconsAndDescriptions.storyName = 'With icons and descriptions';
+
 // ------------------------------
 // Section stories
 // ------------------------------