fix(TextInput): input styling (#733)

Author: tenphi

.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,7 +608,7 @@ 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]
@@ -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,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
           listRef={listRef}
           stateRef={listStateRef}
           listStyles={listStyles}
+          shouldFocusWrap={shouldFocusWrap}
           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: {