Merge c94f54b into 6c00e4b

textkernel · Sep 16, 2020 · 180ec44 · 180ec44
2 parents 6c00e4b + c94f54b
commit 180ec44
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 41 deletions.
diff --git a/src/components/Autosuggest/__tests__/__snapshots__/Autosuggest.spec.js.snap b/src/components/Autosuggest/__tests__/__snapshots__/Autosuggest.spec.js.snap
@@ -58,6 +58,7 @@ exports[`Autosuggest rendering should initially render empty component correctly
         <FieldWrapper
           className="Autosuggest__field"
           clearLabel="Clear"
+          disabled={false}
           isFocused={false}
           onClear={[Function]}
           onClick={[Function]}
@@ -66,6 +67,7 @@ exports[`Autosuggest rendering should initially render empty component correctly
         >
           <div
             className="FieldWrapper Autosuggest__field"
+            disabled={false}
             onClick={[Function]}
             onKeyDown={[Function]}
           >
@@ -175,6 +177,7 @@ exports[`Autosuggest rendering should render all suggestions from the list 1`] =
         <FieldWrapper
           className="Autosuggest__field"
           clearLabel="Clear"
+          disabled={false}
           isFocused={true}
           onClear={[Function]}
           onClick={[Function]}
@@ -183,6 +186,7 @@ exports[`Autosuggest rendering should render all suggestions from the list 1`] =
         >
           <div
             className="FieldWrapper FieldWrapper--isFocused Autosuggest__field"
+            disabled={false}
             onClick={[Function]}
             onKeyDown={[Function]}
           >
@@ -478,6 +482,7 @@ exports[`Autosuggest rendering should render icon correctly if passed 1`] = `
         <FieldWrapper
           className="Autosuggest__field"
           clearLabel="Clear"
+          disabled={false}
           isFocused={false}
           onClear={[Function]}
           onClick={[Function]}
@@ -486,6 +491,7 @@ exports[`Autosuggest rendering should render icon correctly if passed 1`] = `
         >
           <div
             className="FieldWrapper Autosuggest__field"
+            disabled={false}
             onClick={[Function]}
             onKeyDown={[Function]}
           >
@@ -647,6 +653,7 @@ exports[`Autosuggest rendering should render noSuggestions placeholder when empt
         <FieldWrapper
           className="Autosuggest__field"
           clearLabel="Clear"
+          disabled={false}
           isFocused={true}
           onClear={[Function]}
           onClick={[Function]}
@@ -655,6 +662,7 @@ exports[`Autosuggest rendering should render noSuggestions placeholder when empt
         >
           <div
             className="FieldWrapper FieldWrapper--isFocused Autosuggest__field"
+            disabled={false}
             onClick={[Function]}
             onKeyDown={[Function]}
           >
@@ -811,6 +819,7 @@ exports[`Autosuggest rendering should render suggestions also if it passed as an
         <FieldWrapper
           className="Autosuggest__field"
           clearLabel="Clear"
+          disabled={false}
           isFocused={true}
           onClear={[Function]}
           onClick={[Function]}
@@ -819,6 +828,7 @@ exports[`Autosuggest rendering should render suggestions also if it passed as an
         >
           <div
             className="FieldWrapper FieldWrapper--isFocused Autosuggest__field"
+            disabled={false}
             onClick={[Function]}
             onKeyDown={[Function]}
           >

diff --git a/src/components/FieldWrapper/FieldWrapper.js b/src/components/FieldWrapper/FieldWrapper.js
@@ -49,11 +49,14 @@ FieldWrapper.propTypes = {
     onClear: PropTypes.func,
     /** to style the field as it is focused */
     isFocused: PropTypes.bool,
+    /** defines if the component is disabled */
+    disabled: PropTypes.bool,
 };
 
 FieldWrapper.defaultProps = {
     showClearButton: false,
     clearLabel: '',
     onClear: null,
     isFocused: false,
+    disabled: false,
 };
diff --git a/src/components/FieldWrapper/FieldWrapper.scss b/src/components/FieldWrapper/FieldWrapper.scss
@@ -25,7 +25,13 @@
         width: 100%;
     }
 
-    &:hover {
+    &--isFocused,
+    &:focus {
+        border-color: var(--color-brand);
+        outline: none;
+    }
+
+    &:hover:not(.FieldWrapper--disabled) {
         border-color: var(--color-brand);
 
         & .FieldWrapper__content {
@@ -37,9 +43,7 @@
         }
     }
 
-    &--isFocused,
-    &:focus {
-        border-color: var(--color-brand);
-        outline: none;
+    &--disabled {
+        cursor: not-allowed;
     }
 }
diff --git a/src/components/FieldWrapper/__tests__/__snapshots__/FieldWrapper.spec.js.snap b/src/components/FieldWrapper/__tests__/__snapshots__/FieldWrapper.spec.js.snap
@@ -3,12 +3,14 @@
 exports[`FieldWrapper should add clear button if showClearButton is true 1`] = `
 <FieldWrapper
   clearLabel="Clear"
+  disabled={false}
   isFocused={false}
   onClear={null}
   showClearButton={true}
 >
   <div
     className="FieldWrapper"
+    disabled={false}
   >
     <div
       className="FieldWrapper__content"
@@ -41,12 +43,14 @@ exports[`FieldWrapper should add clear button if showClearButton is true 1`] = `
 exports[`FieldWrapper should render correctly 1`] = `
 <FieldWrapper
   clearLabel=""
+  disabled={false}
   isFocused={false}
   onClear={null}
   showClearButton={false}
 >
   <div
     className="FieldWrapper"
+    disabled={false}
   >
     <div
       className="FieldWrapper__content"

diff --git a/...components/LocationAutocomplete/__tests__/__snapshots__/LocationAutocomplete.spec.js.snap b/...components/LocationAutocomplete/__tests__/__snapshots__/LocationAutocomplete.spec.js.snap
@@ -270,6 +270,7 @@ exports[`<LocationAutocomplete/> that renders a location search field should pas
           <FieldWrapper
             className="Autosuggest__field"
             clearLabel=""
+            disabled={false}
             isFocused={true}
             onClear={[Function]}
             onClick={[Function]}
@@ -278,6 +279,7 @@ exports[`<LocationAutocomplete/> that renders a location search field should pas
           >
             <div
               className="FieldWrapper FieldWrapper--isFocused Autosuggest__field"
+              disabled={false}
               onClick={[Function]}
               onKeyDown={[Function]}
             >
@@ -680,6 +682,7 @@ exports[`<LocationAutocomplete/> that renders a location search field should ren
           <FieldWrapper
             className="Autosuggest__field"
             clearLabel=""
+            disabled={false}
             isFocused={false}
             onClear={[Function]}
             onClick={[Function]}
@@ -688,6 +691,7 @@ exports[`<LocationAutocomplete/> that renders a location search field should ren
           >
             <div
               className="FieldWrapper Autosuggest__field"
+              disabled={false}
               onClick={[Function]}
               onKeyDown={[Function]}
             >

diff --git a/...lector/LocationSelectorDialog/__tests__/__snapshots__/LocationSelectorDialog.spec.js.snap b/...lector/LocationSelectorDialog/__tests__/__snapshots__/LocationSelectorDialog.spec.js.snap
@@ -166,6 +166,7 @@ exports[`LocationSelectorDialog component should render correctly 1`] = `
               <FieldWrapper
                 className="Autosuggest__field"
                 clearLabel=""
+                disabled={false}
                 isFocused={true}
                 onClear={[Function]}
                 onClick={[Function]}
@@ -174,6 +175,7 @@ exports[`LocationSelectorDialog component should render correctly 1`] = `
               >
                 <div
                   className="FieldWrapper FieldWrapper--isFocused Autosuggest__field"
+                  disabled={false}
                   onClick={[Function]}
                   onKeyDown={[Function]}
                 >

diff --git a/src/components/LocationSelector/__tests__/__snapshots__/LocationSelector.spec.js.snap b/src/components/LocationSelector/__tests__/__snapshots__/LocationSelector.spec.js.snap
@@ -62,13 +62,15 @@ exports[`LocationSelector component should render LocationSelector properly when
     <FieldWrapper
       className="LocationSelector__mainTextButtonWrapper"
       clearLabel="Clear"
+      disabled={false}
       isFocused={true}
       onClear={[MockFunction]}
       onClick={[Function]}
       showClearButton={true}
     >
       <div
         className="FieldWrapper FieldWrapper--isFocused LocationSelector__mainTextButtonWrapper"
+        disabled={false}
         onClick={[Function]}
       >
         <div
@@ -475,13 +477,15 @@ exports[`LocationSelector component should render LocationSelector propertly whe
     <FieldWrapper
       className="LocationSelector__mainTextButtonWrapper"
       clearLabel="Clear"
+      disabled={false}
       isFocused={false}
       onClear={[MockFunction]}
       onClick={[Function]}
       showClearButton={true}
     >
       <div
         className="FieldWrapper LocationSelector__mainTextButtonWrapper"
+        disabled={false}
         onClick={[Function]}
       >
         <div

diff --git a/...s/SelectComponents/AutosuggestMulti/__tests__/__snapshots__/AutosuggestMulti.spec.js.snap b/...s/SelectComponents/AutosuggestMulti/__tests__/__snapshots__/AutosuggestMulti.spec.js.snap
@@ -79,13 +79,15 @@ exports[`AutosuggestMulti rendering should initially render empty component corr
           <FieldWrapper
             className="SelectBase__field"
             clearLabel=""
+            disabled={false}
             isFocused={false}
             onClear={[Function]}
             onClick={[Function]}
             showClearButton={false}
           >
             <div
               className="FieldWrapper SelectBase__field"
+              disabled={false}
               onClick={[Function]}
             >
               <div
@@ -215,13 +217,15 @@ exports[`AutosuggestMulti rendering should initially render focused component co
           <FieldWrapper
             className="SelectBase__field"
             clearLabel=""
+            disabled={false}
             isFocused={true}
             onClear={[Function]}
             onClick={[Function]}
             showClearButton={false}
           >
             <div
               className="FieldWrapper FieldWrapper--isFocused SelectBase__field"
+              disabled={false}
               onClick={[Function]}
             >
               <div
@@ -421,13 +425,15 @@ exports[`AutosuggestMulti rendering should render component with suggestions 1`]
           <FieldWrapper
             className="SelectBase__field"
             clearLabel=""
+            disabled={false}
             isFocused={true}
             onClear={[Function]}
             onClick={[Function]}
             showClearButton={false}
           >
             <div
               className="FieldWrapper FieldWrapper--isFocused SelectBase__field"
+              disabled={false}
               onClick={[Function]}
             >
               <div
@@ -984,13 +990,15 @@ exports[`AutosuggestMulti rendering should render isLoading state 1`] = `
           <FieldWrapper
             className="SelectBase__field"
             clearLabel=""
+            disabled={false}
             isFocused={true}
             onClear={[Function]}
             onClick={[Function]}
             showClearButton={false}
           >
             <div
               className="FieldWrapper FieldWrapper--isFocused SelectBase__field"
+              disabled={false}
               onClick={[Function]}
             >
               <div

diff --git a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.scss b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.scss
@@ -12,6 +12,11 @@
         &--focused {
             height: auto;
         }
+
+        &--disabled {
+            cursor: not-allowed;
+            background-color: var(--color-neutral-25);
+        }
     }
 
     &__input {
@@ -30,12 +35,21 @@
         &::placeholder {
             color: var(--color-muted);
         }
+
+        &--disabled {
+            cursor: not-allowed;
+            background-color: var(--color-neutral-25);
+        }
     }
 
     &__dropdownIcon {
         display: inline-block;
         vertical-align: middle;
         font-size: 20px;
         margin-right: var(--spacing-normal);
+
+        &--disabled {
+            color: var(--color-neutral-75);
+        }
     }
 }
diff --git a/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx b/src/components/SelectComponents/ComboboxMulti/ComboboxMulti.tsx
@@ -15,7 +15,7 @@ interface Props<S> extends BasicSelectProps<S>, SelectInputFieldProps {
     inputPlaceholder: string;
     /** to be shown when no suggestions are available */
     noSuggestionsPlaceholder: string;
-    /** Enable ListOptimizer component for decreasing render time */
+    /** enable ListOptimizer component for decreasing render time */
     useOptimizeListRender?: boolean;
 }
 
@@ -30,6 +30,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
         noSuggestionsPlaceholder,
         onBlur,
         onInputValueChange,
+        disabled,
         inputPlaceholder,
         useOptimizeListRender,
         ...rest
@@ -49,6 +50,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
                 <input
                     {...getInputProps({
                         id,
+                        disabled,
                         ref: inputRef,
                         placeholder: inputPlaceholder,
                         onKeyDown: handleInputKeyDown,
@@ -58,7 +60,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
                 />
                 <IoMdArrowDropup
                     {...elem('dropdownIcon', { ...props })}
-                    {...getToggleButtonProps({ onClick: blur })}
+                    {...getToggleButtonProps({ disabled, onClick: blur })}
                 />
             </div>
         );
@@ -70,6 +72,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
             <input
                 {...getInputProps({
                     id,
+                    disabled,
                     ref: inputRef,
                     placeholder: inputPlaceholder,
                     onFocus,
@@ -80,6 +83,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
             <IoMdArrowDropdown
                 {...elem('dropdownIcon', { ...props })}
                 {...getToggleButtonProps({
+                    disabled,
                     onClick: (e) => {
                         e?.stopPropagation();
                     },
@@ -93,6 +97,7 @@ export function ComboboxMulti<S>(props: Props<S>) {
             {...rest}
             suggestions={suggestions}
             suggestionToString={suggestionToString}
+            disabled={disabled}
             inputRef={inputRef}
             onBlur={onBlur}
             onSelectionAdd={onSelectionAdd}

diff --git a/src/components/SelectComponents/ComboboxMulti/__tests__/ComboboxMulti.spec.js b/src/components/SelectComponents/ComboboxMulti/__tests__/ComboboxMulti.spec.js
@@ -41,6 +41,11 @@ describe('ComboboxMulti', () => {
             setFocusOnInput();
             expect(inputNode).toBe(document.activeElement);
         });
+        it('should not set focus on the input field when the component is disabled', () => {
+            wrapper.setProps({ disabled: true });
+            setFocusOnInput();
+            expect(inputNode).not.toBe(document.activeElement);
+        });
         it('should render noSuggestions placeholder when empty suggestions list is passed', () => {
             wrapper.setProps({ suggestions: [] });
             setFocusOnInput();