Merge pull request #213 from WTTJ/FIX-select-indicators-styles

fix: broken styles of select indicators when using `size` prop on Select
WTTJ · Jul 17, 2019 · 6eeec3a · 6eeec3a
2 parents a0ac1c8 + 3725bb0
commit 6eeec3a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/src/components/Select/doc.mdx b/src/components/Select/doc.mdx
@@ -72,6 +72,32 @@ To be able to filter (i.e. search) the results, add the `isSearchable` prop.
   }}
 </Playground>
 
+## Sizes
+
+Use size property with `sm` `md` or `lg`(default).
+
+<Playground>
+  {() => {
+    const ITEMS = [
+      { value: 'angular', label: 'Angular' },
+      { value: 'backbone', label: 'Backbone' },
+      { value: 'elm', label: 'Elm' },
+      { value: 'ember', label: 'Ember' },
+      { value: 'react', label: 'React' },
+      { value: 'vue', label: 'Vue' }
+    ]
+    const [value, setValue] = useState(ITEMS[2])
+    const handleChange = e => setValue(e.target.value)
+    return (
+      <>
+        <Select options={ITEMS} name="default" onChange={handleChange} size="sm" value={value} />
+        <Select options={ITEMS} name="default" onChange={handleChange} size="md" value={value} />
+        <Select options={ITEMS} name="default" onChange={handleChange} size="lg" value={value} />
+      </>
+    )
+  }}
+</Playground>
+
 ## Creatable
 
 If your field is searchable (i.e. has the `isSearchable` prop, you can _add_ items by passing the `isCreatable` prop. The returned item will be of the shape:

diff --git a/src/components/Select/index.js b/src/components/Select/index.js
@@ -144,11 +144,12 @@ export const Select = forwardRef(
                   variant: isOpen ? 'focused' : variant
                 })}
               />
-              <S.Indicators>
+              <S.Indicators size={size}>
                 {!inputValue || isOpen ? (
                   <S.DropDownIndicator
                     disabled={disabled}
                     isOpen={isOpen}
+                    size={size}
                     {...getToggleButtonProps()}
                   >
                     <Icon name="down" size="xs" />
@@ -159,6 +160,7 @@ export const Select = forwardRef(
                     disabled={disabled}
                     onClick={clearSelection}
                     role="button"
+                    size={size}
                     type="button"
                   >
                     <Icon name="cross" size="xs" />

diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js
@@ -1,6 +1,7 @@
 import styled, { css } from '@xstyled/styled-components'
 import { th } from '@xstyled/system'
 
+import { overflowEllipsis } from '../../common/styles/text'
 import { fieldStyles } from '../../common/styles/form'
 import { system } from '../../utils/'
 import { Icon } from '../Icon/styles'
@@ -10,10 +11,14 @@ export const Wrapper = styled.div`
   position: relative;
 `
 
-export const Input = styled.input`
-  ${fieldStyles};
-  cursor: default;
-`
+export const Input = styled.input(
+  ({ size }) => css`
+    ${fieldStyles};
+    ${overflowEllipsis};
+    padding-right: ${th(`fields.sizes.${size}.height`)};
+    cursor: default;
+  `
+)
 
 export const Menu = styled.ul`
   ${system};
@@ -49,25 +54,27 @@ export const Item = styled.li(
 )
 
 export const Indicators = styled.div(
-  () => css`
+  ({ size }) => css`
     position: absolute;
-    ${th('fields.sizes.lg')};
+    height: ${th(`fields.sizes.${size}.height`)};
     padding: 0;
     top: 0;
     right: 0;
   `
 )
 
 export const DropDownIndicator = styled.button(
-  ({ actionType, isOpen }) => css`
+  ({ actionType, isOpen, size }) => css`
     &[type='button'] {
-      appearance: none;
-      border: none;
-      background: transparent;
+      position: relative;
+      width: ${th(`fields.sizes.${size}.height`)};
       height: 100%;
-      padding: md lg;
+      padding: 0;
       outline: none;
+      appearance: none;
       cursor: pointer;
+      border: none;
+      background: transparent;
 
       ${Icon} {
         transform: ${isOpen ? 'rotate(180deg)' : 'rotate(0)'};