fix(dropdown placeholder and onclear): demostrate styledplaceholder a…

…nd fix onclear
Headstorm · Sep 15, 2020 · ce237c5 · ce237c5
1 parent c13e01c
commit ce237c5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/hs-react-ui/src/components/Dropdown/Dropdown.stories.tsx b/packages/hs-react-ui/src/components/Dropdown/Dropdown.stories.tsx
@@ -11,6 +11,7 @@ import Dropdown, { OptionProps } from './Dropdown';
 import variants from '../../enums/variants';
 import Label from '../Label';
 import { colors } from '../../index';
+import styled from 'styled-components';
 
 const design = {
   type: 'figma',
@@ -72,12 +73,16 @@ const teaOptions = [
   },
 ];
 
+const StyledPlaceHolder = styled.span`
+  color: blue;
+`;
+
 storiesOf('Dropdown', module)
   .addParameters({ component: Dropdown })
   .add(
     'Basic',
     () => {
-      const [values, setValues] = useState<(string | number)[] | undefined>([cities[0].id]);
+      const [values, setValues] = useState<(string | number)[] | undefined>();
       return (
         <>
           <Label labelText="City" htmlFor="cities-list">
@@ -98,6 +103,7 @@ storiesOf('Dropdown', module)
               optionsVariant={select('optionsVariant', variants, variants.outline)}
               valueVariant={select('valueVariant', variants, variants.text)}
               values={values}
+              StyledPlaceholder={StyledPlaceHolder}
             />
           </Label>
         </>

diff --git a/packages/hs-react-ui/src/components/Dropdown/Dropdown.tsx b/packages/hs-react-ui/src/components/Dropdown/Dropdown.tsx
@@ -74,6 +74,7 @@ const ValueIconContainer = styled(Div)`
 // TODO: Don't use explicit height here - this div is ending up larger than the icon otherwise
 const CloseIconContainer = styled(Div)`
   height: 1.125rem;
+  z-index: 1;
 `;
 
 const ValueItem = styled(Div)`