fix(TextInput): input styling

.changeset/curly-trainers-walk.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix minor issues with input styling.

.changeset/famous-items-shop.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Expose shouldFocusWrap for ListBox, FilterListBox, and FilterPicker to control whether keyboard navigation should wrap around.

src/components/fields/ComboBox/ComboBox.tsx

@@ -437,6 +437,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       }}
       data-size={size}
     >
+      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <InputElement
         ref={inputRef}
         qa="Input"
@@ -448,7 +449,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
         {...modAttrs(mods)}
         data-size={size}
       />
-      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <div data-element="Suffix">
         {suffixPosition === 'before' ? suffix : null}
         {validationState || isLoading ? (

src/components/fields/DatePicker/DateInputBase.tsx

@@ -32,6 +32,11 @@ const DateInputElement = tasty({
   role: 'presentation',
   styles: {
     ...DEFAULT_INPUT_STYLES,
+    height: {
+      '': '(@size-md - 2bw)',
+      '[data-size="small"]': '(@size-sm - 2bw)',
+      '[data-size="large"]': '(@size-lg - 2bw)',
+    },
     display: 'flex',
     flow: 'row',
     placeItems: 'center start',

src/components/fields/FilterListBox/FilterListBox.stories.tsx

@@ -135,6 +135,13 @@ const meta: Meta<typeof FilterListBox> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isLoading: {

src/components/fields/FilterListBox/FilterListBox.tsx

@@ -84,8 +84,8 @@ const SearchInputElement = tasty({
     ...DEFAULT_INPUT_STYLES,
     fill: '#clear',
     padding: {
-      '': '.5x 1.5x',
-      prefix: '.5x 1.5x .5x .5x',
+      '': '0 1.5x',
+      prefix: '0 1.5x 0 .5x',
     },
   },
 });
@@ -194,6 +194,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
     description,
     styles,
     focusOnHover,
+    shouldFocusWrap,
     labelSuffix,
     selectedKey,
     defaultSelectedKey,
@@ -607,13 +608,13 @@ export const FilterListBox = forwardRef(function FilterListBox<
             const newIndex = currentIndex + direction;
             if (newIndex >= 0 && newIndex < visibleKeys.length) {
               nextKey = visibleKeys[newIndex];
-            } else {
+            } else if (shouldFocusWrap) {
               // Wrap around
               nextKey = isArrowDown
                 ? visibleKeys[0]
                 : visibleKeys[visibleKeys.length - 1];
             }
-          } else {
+          } else if (shouldFocusWrap) {
             // Fallback
             nextKey = isArrowDown
               ? visibleKeys[0]
@@ -715,6 +716,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
       focused: isFocused,
       loading: !!isLoading,
       searchable: true,
+      prefix: !!isLoading,
       ...externalMods,
     }),
     [
@@ -784,7 +786,14 @@ export const FilterListBox = forwardRef(function FilterListBox<
   };
 
   const searchInput = (
-    <SearchWrapperElement mods={mods} data-size="small">
+    <SearchWrapperElement mods={mods} data-size={size}>
+      {isLoading && (
+        <div data-element="Prefix">
+          <div data-element="InputIcon">
+            {isLoading ? <LoadingIcon /> : null}
+          </div>
+        </div>
+      )}
       <SearchInputElement
         ref={searchInputRef}
         data-is-prefix={isLoading ? '' : undefined}
@@ -811,13 +820,6 @@ export const FilterListBox = forwardRef(function FilterListBox<
         {...keyboardProps}
         {...modAttrs(mods)}
       />
-      {isLoading && (
-        <div data-element="Prefix">
-          <div data-element="InputIcon">
-            {isLoading ? <LoadingIcon /> : null}
-          </div>
-        </div>
-      )}
     </SearchWrapperElement>
   );
 
@@ -856,6 +858,8 @@ export const FilterListBox = forwardRef(function FilterListBox<
           listRef={listRef}
           stateRef={listStateRef}
           listStyles={listStyles}
+          shouldFocusWrap={shouldFocusWrap}
+          hoverOnFocus={focusOnHover}
           optionStyles={optionStyles}
           sectionStyles={sectionStyles}
           headingStyles={headingStyles}

src/components/fields/FilterPicker/FilterPicker.stories.tsx

@@ -161,6 +161,13 @@ const meta: Meta<typeof FilterPicker> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isDisabled: {

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -149,6 +149,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     type = 'outline',
     theme = 'default',
     labelSuffix,
+    shouldFocusWrap,
     children,
     selectedKey,
     defaultSelectedKey,
@@ -604,6 +605,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
             }
             disabledKeys={disabledKeys}
             focusOnHover={focusOnHover}
+            shouldFocusWrap={shouldFocusWrap}
             allowsCustomValue={allowsCustomValue}
             selectionMode={selectionMode}
             validationState={validationState}

src/components/fields/ListBox/ListBox.stories.tsx

@@ -112,6 +112,13 @@ const meta: Meta<typeof ListBox> = {
         defaultValue: { summary: false },
       },
     },
+    shouldFocusWrap: {
+      control: { type: 'boolean' },
+      description: 'Whether keyboard navigation should wrap around',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* State */
     isDisabled: {
@@ -833,7 +840,7 @@ export const VirtualizedList: StoryFn<CubeListBoxProps<any>> = (args) => {
   // Generate a large list of items with varying content to test virtualization
   // Mix items with and without descriptions to test dynamic sizing
   const items = Array.from({ length: 100 }, (_, i) => ({
-    id: `item-${i}`,
+    key: `item-${i}`,
     name: `Item ${i + 1}${i % 7 === 0 ? ' - This is a longer item name to test dynamic sizing' : ''}`,
     description:
       i % 3 === 0
@@ -851,17 +858,18 @@ export const VirtualizedList: StoryFn<CubeListBoxProps<any>> = (args) => {
 
       <ListBox
         {...args}
+        items={items}
         label="Virtualized List with Mixed Content"
         selectedKey={selected}
         height="300px"
         overflow="auto"
         onSelectionChange={setSelected}
       >
-        {items.map((item) => (
-          <ListBox.Item key={item.id} description={item.description}>
+        {(item) => (
+          <ListBox.Item key={item.key} description={item.description}>
             {item.name}
           </ListBox.Item>
-        ))}
+        )}
       </ListBox>
 
       <Text>
@@ -1016,3 +1024,24 @@ EscapeKeyHandling.parameters = {
     },
   },
 };
+
+export const WithItemsProp: Story = {
+  render: (args) => (
+    <ListBox {...args} items={fruits}>
+      {(item) => <ListBox.Item key={item.key}>{item.label}</ListBox.Item>}
+    </ListBox>
+  ),
+  args: {
+    label: 'Select a fruit using items prop',
+    selectionMode: 'single',
+    defaultSelectedKey: 'apple',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ListBox supports the `items` prop pattern where you provide an array of data objects and use a render function to create the items. This is useful when working with dynamic data or when you want to separate data from presentation.',
+      },
+    },
+  },
+};

src/components/fields/ListBox/ListBox.tsx

@@ -26,6 +26,7 @@ import { CheckIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import {
   BASE_STYLES,
+  BasePropsWithoutChildren,
   COLOR_STYLES,
   extractStyles,
   OUTER_STYLES,
@@ -241,7 +242,8 @@ const SectionListElement = tasty({
 export interface CubeListBoxProps<T>
   extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>,
     CollectionBase<T>,
-    FieldBaseProps {
+    FieldBaseProps,
+    BasePropsWithoutChildren {
   /** Custom styles for the list container */
   listStyles?: Styles;
   /** Custom styles for options */
@@ -508,7 +510,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
       'aria-label': props['aria-label'] || label?.toString(),
       isDisabled,
       shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
-      shouldFocusWrap: true,
+      // shouldVirtualize: true,
       escapeKeyBehavior: onEscape ? 'none' : 'clearSelection',
     },
     listState,

src/components/fields/NumberInput/NumberInput.stories.tsx

@@ -56,11 +56,11 @@ export default {
       description: 'Amount to increment or decrement the value',
     },
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
     /* State */

src/components/fields/NumberInput/NumberInput.tsx

@@ -29,8 +29,8 @@ const StyledTextInputBase = tasty(TextInputBase, {
 const StepperContainer = tasty({
   styles: {
     display: 'grid',
-    gridColumns: '1fr',
-    gridRows: 'minmax(1px, 1fr) minmax(1px, 1fr)',
+    gridColumns: '1sf',
+    gridRows: '1sf 1sf',
     flow: 'column',
     placeSelf: 'stretch',
   },

src/components/fields/NumberInput/StepButton.tsx

@@ -1,39 +1,39 @@
-import { CaretDownIcon, CaretUpIcon } from '../../../icons';
-import { Styles } from '../../../tasty';
+import { CaretDownIcon, CaretUpIcon, DirectionIcon } from '../../../icons';
+import { Styles, tasty } from '../../../tasty';
 import { Button } from '../../actions';
 
-const STEP_BUTTON_STYLES: Styles = {
-  width: '4x',
-  radius: {
-    '': '0 (1r - 1bw) 0 0',
-    down: '0 0 (1r - 1bw) 0',
-  },
-  fontSize: '12px',
-  lineHeight: '12px',
-  height: 'auto',
-  fill: {
-    '': '#dark.0',
-    hovered: '#dark.04',
-    pressed: '#purple.10',
-    '[disabled]': '#dark.0',
-  },
+const StepButtonElement = tasty(Button, {
+  preventDefault: true,
+  type: 'neutral',
+  styles: {
+    width: '2.5x',
+    height: 'auto',
+    radius: {
+      '': '0 (1r - 1bw) 0 0',
+      down: '0 0 (1r - 1bw) 0',
+    },
+    fontSize: '12px',
+    lineHeight: '12px',
+    fill: {
+      '': '#dark.0',
+      hovered: '#dark.04',
+      pressed: '#purple.10',
+      '[disabled]': '#dark.0',
+    },
 
-  '@icon-size': {
-    '': '14px',
-    '[data-size="small"]': '13px',
+    '@icon-size': '1fs',
   },
-};
+});
 
 /**
  * Buttons for NumberField.
  */
 export function StepButton(props) {
   return (
-    <Button
+    <StepButtonElement
       preventDefault
       type="neutral"
-      styles={STEP_BUTTON_STYLES}
-      icon={props.direction === 'up' ? <CaretUpIcon /> : <CaretDownIcon />}
+      icon={<DirectionIcon to={props.direction} />}
       mods={{
         up: props.direction === 'up',
         down: props.direction === 'down',

src/components/fields/PasswordInput/PasswordInput.stories.tsx

@@ -43,11 +43,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
 

src/components/fields/SearchInput/SearchInput.stories.tsx

@@ -43,11 +43,11 @@ export default {
 
     /* Presentation */
     size: {
-      options: ['small', 'default', 'large'],
+      options: ['small', 'medium', 'large'],
       control: { type: 'radio' },
       description: 'Input size',
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'medium' },
       },
     },
 

src/components/fields/Select/Select.tsx

@@ -92,6 +92,8 @@ const SelectWrapperElement = tasty({
 
     Value: {
       ...DEFAULT_INPUT_STYLES,
+      display: 'grid',
+      placeItems: 'center stretch',
       preset: {
         '': 't3',
         '[data-type="primary"]': 't3m',