fix(TextInput): input styling

.changeset/curly-trainers-walk.md

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

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/FilterListBox/FilterListBox.tsx

@@ -785,6 +785,13 @@ export const FilterListBox = forwardRef(function FilterListBox<
 
   const searchInput = (
     <SearchWrapperElement mods={mods} data-size="small">
+      {isLoading && (
+        <div data-element="Prefix">
+          <div data-element="InputIcon">
+            {isLoading ? <LoadingIcon /> : null}
+          </div>
+        </div>
+      )}
       <SearchInputElement
         ref={searchInputRef}
         data-is-prefix={isLoading ? '' : undefined}
@@ -811,13 +818,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>
   );
 

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/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',

src/components/fields/TextInput/TextInputBase.tsx

@@ -48,9 +48,14 @@ const ADD_STYLES = {
 
 export const INPUT_WRAPPER_STYLES: Styles = {
   display: 'grid',
+  flow: 'row',
   position: 'relative',
-  gridAreas: '"prefix input suffix"',
-  gridColumns: 'auto 1sf auto',
+  gridColumns: {
+    '': '1sf',
+    prefix: 'max-content 1sf',
+    suffix: '1sf max-content',
+    'prefix & suffix': 'max-content 1sf max-content',
+  },
   placeItems: 'stretch',
   fill: {
     '': '#white',
@@ -83,15 +88,9 @@ export const INPUT_WRAPPER_STYLES: Styles = {
   transition: 'theme',
   backgroundClip: 'content-box',
 
-  Prefix: {
-    ...ADD_STYLES,
-    gridArea: 'prefix',
-  },
+  Prefix: ADD_STYLES,
 
-  Suffix: {
-    ...ADD_STYLES,
-    gridArea: 'suffix',
-  },
+  Suffix: ADD_STYLES,
 
   State: {
     display: 'flex',
@@ -123,11 +122,6 @@ const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 
 export const DEFAULT_INPUT_STYLES: Styles = {
-  display: 'grid',
-  placeItems: 'center stretch',
-  placeContent: 'center stretch',
-  gridRows: 'min(1lh)',
-  gridArea: 'input',
   width: 'initial 100% 100%',
   color: 'inherit',
   fill: '#clear',
@@ -139,7 +133,12 @@ export const DEFAULT_INPUT_STYLES: Styles = {
   reset: 'input',
   preset: 't3',
   flexGrow: 1,
-  margin: 0,
+  margin: {
+    '': 0,
+    multiline: '(((@size-md - 1lh) / 2) - 1bw) 0',
+    'multiline & [data-size="small"]': '(((@size-sm - 1lh) / 2) - 1bw) 0',
+    'multiline & [data-size="large"]': '(((@size-lg - 1lh) / 2) - 1bw) 0',
+  },
   resize: 'none',
   boxSizing: 'border-box',
   userSelect: 'auto',
@@ -154,7 +153,7 @@ export const DEFAULT_INPUT_STYLES: Styles = {
     '[data-size="large"] & multiline': 'min (@size-lg - 2bw)',
   },
 
-  '@vertical-padding': '(.5x - 1bw)',
+  '@vertical-padding': 0,
   '@left-padding': {
     '': '(1x - 1bw)',
     '[data-size="small"]': '(1x - 1bw)',
@@ -359,6 +358,7 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
       styles={wrapperStyles}
       {...wrapperProps}
     >
+      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       <InputElement
         as={ElementType}
         {...mergeProps(inputProps, focusProps, hoverProps)}
@@ -375,7 +375,6 @@ function _TextInputBase(props: CubeTextInputBaseProps, ref) {
         maxLength={maxLength}
         minLength={minLength}
       />
-      {prefix ? <div data-element="Prefix">{prefix}</div> : null}
       {(validationState && !isLoading) || isLoading || suffix ? (
         <div data-element="Suffix">
           {suffixPosition === 'before' ? suffix : null}