New select input (#49)

* Initial draft - WIP

* Refactor SelectList component

* Extract refs reducer to a separate fn

* Port over missing funtionalities

* Bugfixes, add additional tests, CSS cleanup

* More CSS updates

* Small refactor and add more tests

* Extract options into the variable

* Final refactor

* Make value optional, pass missing prop to select-list and fix css

* CSS Updates, clear value from search select on input click etc.

* CSS Fixes

* Remove `scrollIntoView` functionality

* Remove Props export, change method name

* Remove constructor from select-list

* Change return type of optionsRenderer to `React.ReactNode`

* Review #1

* Review: rename `optionsRenderer` -> `renderOptions`

* Review: add classname to ul element, introduce `filterBy`

* Review: update search-input.tsx and use It in select.tsx

* CSS Updates

* small css updates

Author: bedakb

package-lock.json

@@ -8,7 +8,7 @@
         }
     }
 
-    input[type='text'], textarea {
+    .form-control, textarea {
         &::placeholder {
             color: @gray-darker;
         }

src/form/form.less

@@ -1,24 +1,25 @@
 .search-input {
     display: flex;
+    align-items: center;
     justify-content: space-between;
-    color: @gray-darker;
 
     width: 100%;
+    height: 100%;
+    padding: 0 10px;
+
     background-color: @white;
+    color: @gray-darker;
 
     .search-input-icon {
         &-filter {
             @table-search-bar-icon();
             font-size: 14px;
-            line-height: 30px;
-            padding: 0 8px;
         }
 
         &-clear {
             @close-icon();
+            padding-right: 0;
             font-size: 12px;
-            line-height: 30px;
-            padding: 0 8px;
             background: transparent;
             border: 0;
             color: @gray-darker;
@@ -35,6 +36,16 @@
         box-shadow: none;
         font-size: 12px;
 
+        &::placeholder {
+            color: @gray-darkest;
+        }
+
+        &:disabled {
+            &::placeholder {
+                color: @gray-light;
+            }
+        }
+
         &:focus {
             outline: none;
         }

src/input/search-input.less

@@ -16,7 +16,7 @@ describe('SearchInput', () => {
         const { getByDataQa } = render(
             <SearchInput id={id} value={value} onFilterChange={onFilterChange} searchPlaceholder={searchPlaceholder} />
         );
-        const searchInput = getByDataQa(id);
+        const searchInput = getByDataQa(`search-input-${id}`);
 
         expect(searchInput).toBeTruthy();
     });
@@ -30,14 +30,38 @@ describe('SearchInput', () => {
         const { getByDataQa } = render(
             <SearchInput id={id} value={value} onFilterChange={onFilterChange} searchPlaceholder={searchPlaceholder} />
         );
-        const searchInput = getByDataQa(id);
+        const searchInput = getByDataQa(`search-input-${id}`);
 
         const newValue = 'foo';
         fireEvent.change(searchInput, { target: { value: newValue } });
 
         expect(onFilterChange).toHaveBeenNthCalledWith(1, newValue);
     });
 
+    it('should NOT invoke `onFilterChange` if disabled', () => {
+        const id = 'search-input';
+        const value = '';
+        const searchPlaceholder = 'search';
+        const onFilterChange = jest.fn();
+        const disabled = true;
+
+        const { getByDataQa } = render(
+            <SearchInput
+                id={id}
+                value={value}
+                onFilterChange={onFilterChange}
+                searchPlaceholder={searchPlaceholder}
+                disabled={disabled}
+            />
+        );
+        const searchInput = getByDataQa(`search-input-${id}`);
+
+        const newValue = 'foo';
+        fireEvent.change(searchInput, { target: { value: newValue } });
+
+        expect(onFilterChange).not.toHaveBeenCalled();
+    });
+
     it('should have clear icon disabled if input does not have value', () => {
         const id = 'search-input';
         const value = '';
@@ -67,4 +91,84 @@ describe('SearchInput', () => {
 
         expect(onFilterChange).toHaveBeenNthCalledWith(1, '');
     });
+
+    it('should not invoke `onFilterChange` upon clicking clear icon if disabled', () => {
+        const id = 'search-input';
+        const value = 'value';
+        const searchPlaceholder = 'search';
+        const onFilterChange = jest.fn();
+        const disabled = true;
+
+        const { getByDataQa } = render(
+            <SearchInput
+                id={id}
+                value={value}
+                onFilterChange={onFilterChange}
+                searchPlaceholder={searchPlaceholder}
+                disabled={disabled}
+            />
+        );
+        const clearIcon = getByDataQa(`${id}-clear`) as HTMLButtonElement;
+
+        clearIcon.click();
+
+        expect(onFilterChange).not.toHaveBeenCalled();
+    });
+
+    it('should invoke `onClick` handler', () => {
+        const id = 'search-input';
+        const value = '';
+        const searchPlaceholder = 'search';
+        const onFilterChange = jest.fn();
+        const onClick = jest.fn();
+
+        const { getByDataQa } = render(
+            <SearchInput
+                id={id}
+                value={value}
+                onFilterChange={onFilterChange}
+                searchPlaceholder={searchPlaceholder}
+                onClick={onClick}
+            />
+        );
+        const searchInput = getByDataQa(`search-input-${id}`);
+        searchInput.click();
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should have autocomplete turned off by default', () => {
+        const id = 'search-input';
+        const value = '';
+        const searchPlaceholder = 'search';
+        const onFilterChange = jest.fn();
+
+        const { getByDataQa } = render(
+            <SearchInput id={id} value={value} onFilterChange={onFilterChange} searchPlaceholder={searchPlaceholder} />
+        );
+        const searchInput = getByDataQa(`search-input-${id}`) as HTMLInputElement;
+
+        expect(searchInput.autocomplete).toEqual('off');
+    });
+
+    it('should contain passed className', () => {
+        const id = 'search-input';
+        const value = '';
+        const searchPlaceholder = 'search';
+        const onFilterChange = jest.fn();
+        const className = 'foobar';
+
+        const { getByDataQa } = render(
+            <SearchInput
+                id={id}
+                value={value}
+                onFilterChange={onFilterChange}
+                searchPlaceholder={searchPlaceholder}
+                className={className}
+            />
+        );
+        const searchInput = getByDataQa(`search-input-${id}`);
+
+        expect(searchInput.classList.contains(className)).toBeTruthy();
+    });
 });

src/input/search-input.test.tsx

@@ -1,32 +1,49 @@
 import * as React from 'react';
 
+type Autocomplete = 'on' | 'off';
+
 interface Props {
     id: string;
     value: string;
+    disabled?: boolean;
+    className?: string;
     searchPlaceholder: string;
+    autoComplete?: Autocomplete;
     onFilterChange: (filter: string) => void;
+    onClick?: (event: React.MouseEvent) => void;
 }
 
 const SearchInput: React.FunctionComponent<Props> = (props) => {
-    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => props.onFilterChange(event.target.value);
-    const clearSearch = () => props.onFilterChange('');
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (!props.disabled) {
+            props.onFilterChange(event.target.value);
+        }
+    };
+    const clearSearch = () => {
+        if (!props.disabled) {
+            props.onFilterChange('');
+        }
+    };
     return (
         <div className="search-input">
             <span className="search-input-icon-filter" />
             <input
                 id={props.id}
                 type="text"
+                autoComplete={props.autoComplete || 'off'}
                 value={props.value}
-                className="search-input-filter"
+                className={`search-input-filter ${props.className ? props.className : ''}`}
                 onChange={onChange}
+                onClick={props.onClick}
                 placeholder={props.searchPlaceholder}
-                data-qa={props.id}
+                data-qa={`search-input-${props.id}`}
+                disabled={props.disabled}
             />
             <button
                 type="button"
                 className="search-input-icon-clear"
                 onClick={clearSearch}
-                disabled={!props.value.length}
+                disabled={!props.value.length || props.disabled}
                 data-qa={`${props.id}-clear`}
             />
         </div>

src/input/search-input.tsx

@@ -103,6 +103,7 @@
 .multi-level-checkbox-editor-filter {
     margin-left: 20px;
     width: 350px;
+    height: 32px;
     border: @default-border;
 }
 

src/multi-level-checkbox-editor/multi-level-checkbox-editor.less

@@ -4,7 +4,10 @@ import { cleanup, render } from '@config/testing';
 
 import { RadioGroup } from './';
 
-const options = [{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }];
+const options = [
+    { label: 'Yes', value: 'yes' },
+    { label: 'No', value: 'no' },
+];
 
 describe('RadioGroup', () => {
     afterEach(cleanup);

src/radio-group/radio-group.test.tsx

@@ -1,2 +1,3 @@
-export { Select, StringSelect, NumberSelect } from './select';
+export { Select } from './select';
 export { Option } from '../api/index';
+export { RendererProps } from './select-list';