[Enhancement] pass light theme through to item selector (#1276)

* add tests Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Sep 18, 2020 · 6681d2e · 6681d2e
1 parent 0184cf1
commit 6681d2e
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 28 deletions.
diff --git a/src/components/common/item-selector/chickleted-input.js b/src/components/common/item-selector/chickleted-input.js
@@ -41,9 +41,11 @@ const propTypes = {
 };
 
 export const ChickletButton = styled.div`
-  background: ${props => props.theme.chickletBgd};
+  background: ${props =>
+    props.inputTheme === 'light' ? props.theme.chickletBgdLT : props.theme.chickletBgd};
   border-radius: 1px;
-  color: ${props => props.theme.textColor};
+  color: ${props =>
+    props.inputTheme === 'light' ? props.theme.textColorLT : props.theme.textColor};
   font-size: 11px;
   line-height: 20px;
   margin: 4px 10px 4px 3px;
@@ -53,7 +55,8 @@ export const ChickletButton = styled.div`
   max-width: calc(100% - 8px);
 
   :hover {
-    color: ${props => props.theme.textColorHl};
+    color: ${props =>
+      props.inputTheme === 'light' ? props.theme.textColorHlLT : props.theme.textColorHl};
   }
 `;
 
@@ -68,8 +71,8 @@ export const ChickletTag = styled.span`
   }
 `;
 
-const Chicklet = ({disabled, name, remove}) => (
-  <ChickletButton>
+const Chicklet = ({disabled, name, remove, inputTheme}) => (
+  <ChickletButton inputTheme={inputTheme}>
     <ChickletTag>{name}</ChickletTag>
     <Delete onClick={disabled ? null : remove} />
   </ChickletButton>
@@ -79,7 +82,9 @@ const ChickletedInputContainer = styled.div`
   ${props =>
     props.inputTheme === 'secondary'
       ? props.theme.secondaryChickletedInput
-      : props.theme.chickletedInput}
+      : props.inputTheme === 'light'
+        ? props.theme.chickletedInputLT
+        : props.theme.chickletedInput}
 
   color: ${props =>
     props.hasPlaceholder ? props.theme.selectColorPlaceHolder : props.theme.selectColor};
@@ -109,23 +114,20 @@ const ChickletedInput = ({
     hasPlaceholder={!selectedItems || !selectedItems.length}
   >
     {selectedItems.length > 0 ? (
-      selectedItems.map((item, i) =>
-        CustomChickletComponent ? (
-          <CustomChickletComponent
-            disabled={disabled}
-            key={`${displayOption(item)}_${i}`}
-            name={displayOption(item)}
-            remove={e => removeItem(item, e)}
-          />
+      selectedItems.map((item, i) => {
+        const chickletProps = {
+          inputTheme,
+          disabled,
+          key: `${displayOption(item)}_${i}`,
+          name: displayOption(item),
+          remove: e => removeItem(item, e)
+        };
+        return CustomChickletComponent ? (
+          <CustomChickletComponent {...chickletProps} />
         ) : (
-          <Chicklet
-            disabled={disabled}
-            key={`${displayOption(item)}_${i}`}
-            name={displayOption(item)}
-            remove={e => removeItem(item, e)}
-          />
-        )
-      )
+          <Chicklet {...chickletProps} />
+        );
+      })
     ) : (
       <span className={`${className} chickleted-input__placeholder`}>
         <FormattedMessage id={placeholder} />

diff --git a/src/components/common/item-selector/item-selector.js b/src/components/common/item-selector/item-selector.js
@@ -38,7 +38,12 @@ import {FormattedMessage} from 'localization';
 const StyledDropdownSelect = styled.div.attrs({
   className: 'item-selector__dropdown'
 })`
-  ${props => (props.inputTheme === 'secondary' ? props.theme.secondaryInput : props.theme.input)};
+  ${props =>
+    props.inputTheme === 'secondary'
+      ? props.theme.secondaryInput
+      : props.inputTheme === 'light'
+      ? props.theme.inputLT
+      : props.theme.input};
 
   height: ${props => props.theme.dropdownSelectHeight}px;
 
@@ -49,8 +54,24 @@ const StyledDropdownSelect = styled.div.attrs({
 
 const DropdownSelectValue = styled.span`
   color: ${props =>
-    props.hasPlaceholder ? props.theme.selectColorPlaceHolder : props.theme.selectColor};
+    props.hasPlaceholder
+      ? props.theme.selectColorPlaceHolder
+      : props.inputTheme === 'light'
+      ? props.theme.selectColorLT
+      : props.theme.selectColor};
   overflow: hidden;
+
+  .list__item {
+    ${props =>
+      props.inputTheme === 'light' ? props.theme.dropdownListItemLT : props.theme.dropdownListItem};
+  }
+
+  .list__item__anchor {
+    ${props =>
+      props.inputTheme === 'light'
+        ? props.theme.dropdownListAnchorLT
+        : props.theme.dropdownListAnchor};
+  }
 `;
 
 const DropdownSelectErase = styled.div`
@@ -98,6 +119,7 @@ class ItemSelector extends Component {
     onBlur: PropTypes.func,
     placeholder: PropTypes.string,
     closeOnSelect: PropTypes.bool,
+    typeaheadPlaceholder: PropTypes.string,
     DropdownHeaderComponent: PropTypes.func,
     DropDownRenderComponent: PropTypes.func,
     DropDownLineItemRenderComponent: PropTypes.func,
@@ -215,7 +237,11 @@ class ItemSelector extends Component {
           options={this.props.options}
           filterOption={this.props.filterOption}
           fixedOptions={this.props.fixedOptions}
-          placeholder={intl.formatMessage({id: 'placeholder.search'})}
+          placeholder={
+            this.props.typeaheadPlaceholder || intl
+              ? intl.formatMessage({id: 'placeholder.search'})
+              : 'Search'
+          }
           onOptionSelected={this._selectItem}
           customListComponent={this.props.DropDownRenderComponent}
           customListHeaderComponent={this.props.DropdownHeaderComponent}
@@ -224,6 +250,7 @@ class ItemSelector extends Component {
           searchable={this.props.searchable}
           showOptionsWhenEmpty
           selectedItems={toArray(this.props.selectedItems)}
+          light={this.props.inputTheme === 'light'}
         />
       </DropdownWrapper>
     );
@@ -258,17 +285,20 @@ class ItemSelector extends Component {
               displayOption={displayOption}
               removeItem={this._removeItem}
               CustomChickletComponent={this.props.CustomChickletComponent}
+              inputTheme={this.props.inputTheme}
             />
           ) : (
             <StyledDropdownSelect {...dropdownSelectProps}>
               <DropdownSelectValue
                 hasPlaceholder={!hasValue}
+                inputTheme={this.props.inputTheme}
                 className="item-selector__dropdown__value"
               >
                 {hasValue ? (
                   <this.props.DropDownLineItemRenderComponent
                     displayOption={displayOption}
                     value={selected[0]}
+                    light={this.props.inputTheme === 'light'}
                   />
                 ) : (
                   <FormattedMessage id={this.props.placeholder} />
@@ -289,4 +319,5 @@ class ItemSelector extends Component {
   }
 }
 
+export const ItemSelectorListen = listensToClickOutside(ItemSelector);
 export default injectIntl(listensToClickOutside(ItemSelector));
diff --git a/src/components/common/item-selector/typeahead.js b/src/components/common/item-selector/typeahead.js
@@ -258,6 +258,7 @@ class Typeahead extends Component {
         defaultClassNames={this.props.defaultClassNames}
         displayOption={this.props.displayOption}
         selectedItems={this.props.selectedItems}
+        light={this.props.light}
       />
     );
   }

diff --git a/src/styles/base.js b/src/styles/base.js
@@ -222,7 +222,7 @@ export const panelContentBackground = '#292E36';
 export const panelBackgroundHover = '#3A4552';
 export const panelHeaderBorderRadius = '0px';
 export const chickletBgd = '#3A4552';
-export const chickletBgdLT = '#6A7485';
+export const chickletBgdLT = '#D3D8E0';
 export const panelHeaderIcon = '#6A7485';
 export const panelHeaderIconActive = '#A0A7B4';
 export const panelHeaderIconHover = textColorHl;
@@ -553,6 +553,11 @@ const chickletedInput = css`
   ${props => props.theme.chickletedInputContainer}
 `;
 
+const chickletedInputLT = css`
+  ${props => props.theme.inputLT}
+  ${props => props.theme.chickletedInputContainer}
+`;
+
 const secondaryChickletedInput = css`
   ${props => props.theme.secondaryInput}
   ${props => props.theme.chickletedInputContainer}
@@ -733,13 +738,42 @@ const dropdownScrollBar = css`
   }
 `;
 
+const dropdownScrollBarLT = css`
+  ${dropdownScrollBar}
+
+  ::-webkit-scrollbar-corner {
+    background: ${props => props.theme.dropdownListBgdLT};
+  }
+
+  ::-webkit-scrollbar-track {
+    background: ${props => props.theme.dropdownListBgdLT};
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: ${props => props.theme.labelColorLT};
+    border: 3px solid ${props => props.theme.dropdownListBgdLT};
+  }
+
+  :vertical:hover {
+    background: ${props => props.theme.textColorHlLT};
+    cursor: pointer;
+  }
+`;
+
+
 const dropdownListAnchor = css`
   color: ${props => props.theme.selectColor};
   padding-left: 3px;
   font-size: ${props => props.theme.selectFontSize};
   line-height: ${props => props.theme.dropdownListLineHeight}px;
 `;
 
+const dropdownListAnchorLT = css`
+  ${dropdownListAnchor}
+  color: ${props => props.theme.selectColorLT};
+`;
+
 const dropdownListSize = css`
   font-size: 11px;
   padding: 3px 9px;
@@ -771,7 +805,7 @@ const dropdownListItemLT = css`
     background-color: ${props => props.theme.dropdownListHighlightBgLT};
 
     .list__item__anchor {
-      color: ${props => props.theme.textColorHlLT};
+      color: ${props => props.theme.selectColorLT};
     }
   }
 `;
@@ -817,6 +851,12 @@ const dropdownListLT = css`
   .list__item {
     ${props => props.theme.dropdownListItemLT};
   }
+
+  .list__item__anchor {
+    ${props => props.theme.dropdownListAnchorLT};
+  }
+
+  ${props => props.theme.dropdownScrollBarLT};
 `;
 const sidePanelScrollBar = css`
   ::-webkit-scrollbar {
@@ -942,6 +982,7 @@ export const theme = {
   inputLT,
   inlineInput,
   chickletedInput,
+  chickletedInputLT,
   chickletedInputContainer,
   secondaryChickletedInput,
 
@@ -950,11 +991,13 @@ export const theme = {
 
   secondaryInput,
   dropdownScrollBar,
+  dropdownScrollBarLT,
   dropdownList,
   dropdownListLT,
   dropdownListItem,
   dropdownListItemLT,
   dropdownListAnchor,
+  dropdownListAnchorLT,
   dropdownListHeader,
   dropdownListSection,
   dropdownListShadow,
@@ -1168,6 +1211,7 @@ export const theme = {
 
   // Side Panel Panel
   chickletBgd,
+  chickletBgdLT,
   panelBackground,
   panelContentBackground,
   panelBackgroundHover,

diff --git a/test/browser/components/common/index.js b/test/browser/components/common/index.js
@@ -20,4 +20,5 @@
 
 import './file-uploader-test';
 import './color-legend-test';
-import './range-slider';
+import './range-slider-test';
+import './item-selector-test';