Merge pull request #333 from storybookjs/select-focus-color

Select integration fixes

Author: Dominic Nguyen

src/components/Select.stories.tsx

@@ -11,7 +11,6 @@ export default {
   component: UnstyledSelect,
 };
 
-
 export const Template = (args) => <Select {...args} />;
 Template.args = {
   value: 'value1',
@@ -23,7 +22,6 @@ Template.args = {
 };
 Template.story = { name: 'Playground' };
 
-
 const Form = styled.form`
   padding: 3em 12em;
 `;
@@ -49,7 +47,6 @@ const All = ({ appearance }) => (
       ]}
       onChange={onChange}
       appearance={appearance}
-      
     />
     <Select
       id="disabled"
@@ -139,6 +136,47 @@ export const Default = () => (
   </DarkForm>
 );
 
+export const Stacked = () => (
+  <Form>
+    <UnstyledSelect
+      id="default"
+      value="value1"
+      label="Animal"
+      hideLabel
+      options={[
+        { label: 'Default', value: 'value1' },
+        { label: 'Dog', value: 'value2' },
+      ]}
+      onChange={onChange}
+      stackLevel="top"
+    />
+    <UnstyledSelect
+      id="default1"
+      value="value1"
+      label="Animal"
+      hideLabel
+      options={[
+        { label: 'Default', value: 'value1' },
+        { label: 'Dog', value: 'value2' },
+      ]}
+      onChange={onChange}
+      stackLevel="middle"
+    />
+    <UnstyledSelect
+      id="default2"
+      value="value1"
+      label="Animal"
+      hideLabel
+      options={[
+        { label: 'Default', value: 'value1' },
+        { label: 'Dog', value: 'value2' },
+      ]}
+      onChange={onChange}
+      stackLevel="bottom"
+    />
+  </Form>
+);
+
 export const Tertiary = () => (
   <Form>
     <All appearance="tertiary" />

src/components/Select.tsx

@@ -34,8 +34,8 @@ const LabelWrapper = styled.div<LabelProps>`
 `;
 
 interface SelectProps {
-  disabled: boolean;
-  inProgress: boolean;
+  disabled?: boolean;
+  inProgress?: boolean;
 }
 
 const Selector = styled.select<SelectProps>`
@@ -44,11 +44,12 @@ const Selector = styled.select<SelectProps>`
   border-radius: 0;
   font-size: ${typography.size.s2}px;
   line-height: 20px;
-  padding: 10px 3em 10px 1em;
+  padding: 10px 3em 10px 15px;
   position: relative;
   outline: none;
   width: 100%;
   margin: 0;
+  display: block;
 
   ${(props) =>
     props.disabled &&
@@ -74,7 +75,7 @@ const SelectIcon = styled(Icon)``;
 const SelectSpinner = styled(Spinner)`
   right: 16px;
   left: auto;
-  z-index: 1;
+  z-index: 2;
 `;
 
 const SelectError = styled.div`
@@ -89,36 +90,66 @@ const SelectError = styled.div`
   color: ${color.negative};
   line-height: 40px;
   padding-right: 2.75em;
+  pointer-events: none;
 `;
 
 interface WrapperProps {
-  disabled: boolean;
   appearance: 'default' | 'tertiary';
   hasIcon: boolean;
   error: any;
-  inProgress: boolean;
+  disabled?: boolean;
+  inProgress?: boolean;
+  stackLevel?: 'top' | 'middle' | 'bottom';
 }
 
+const getStackLevelStyling = (props: Pick<Props, 'stackLevel'>) => {
+  const radius = 4;
+
+  const stackLevelDefinedStyling = css`
+    position: relative;
+
+    &:focus {
+      z-index: 2;
+    }
+  `;
+
+  switch (props.stackLevel) {
+    case 'top':
+      return css`
+        border-top-left-radius: ${radius}px;
+        border-top-right-radius: ${radius}px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        ${stackLevelDefinedStyling}
+      `;
+    case 'middle':
+      return css`
+        border-radius: 0px;
+        margin-top: -1px;
+        ${stackLevelDefinedStyling}
+      `;
+    case 'bottom':
+      return css`
+        border-bottom-left-radius: ${radius}px;
+        border-bottom-right-radius: ${radius}px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        margin-top: -1px;
+        ${stackLevelDefinedStyling}
+      `;
+    default:
+      return css`
+        border-radius: ${radius}px;
+      `;
+  }
+};
+
 const SelectWrapper = styled.span<WrapperProps>`
   display: inline-block;
-  height: 40px;
-  line-height: normal;
-  overflow: hidden;
   position: relative;
   vertical-align: top;
   width: 100%;
 
-  transition: all 150ms ease-out;
-  transform: translate3d(0, 0, 0);
-
-  &:hover {
-    transform: translate3d(0, -1px, 0);
-  }
-
-  &:active {
-    transform: translate3d(0, 0, 0);
-  }
-
   &:before {
     content: '';
     bottom: 1px;
@@ -127,14 +158,13 @@ const SelectWrapper = styled.span<WrapperProps>`
     width: 2em;
     margin-left: 1px;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     pointer-events: none;
-    border-radius: ${spacing.borderRadius.small}px;
   }
 
   ${Arrow} {
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     pointer-events: none;
     height: 12px;
     margin-top: -6px;
@@ -148,7 +178,7 @@ const SelectWrapper = styled.span<WrapperProps>`
 
   ${Selector} {
     box-shadow: ${color.border} 0 0 0 1px inset;
-    border-radius: 4px;
+    ${(props) => getStackLevelStyling(props)}
   }
   ${Selector}:focus {
     box-shadow: ${color.secondary} 0 0 0 1px inset;
@@ -183,14 +213,14 @@ const SelectWrapper = styled.span<WrapperProps>`
       }
       ${Arrow} {
         right: 0;
-        top: 12px;
+        top: 10px;
       }
       ${SelectSpinner} {
         right: 0;
       }
       ${SelectIcon} {
         left: 0;
-        top: 12px;
+        top: 10px;
       }
       ${SelectError} {
         position: relative;
@@ -209,7 +239,7 @@ const SelectWrapper = styled.span<WrapperProps>`
       ${Selector} + ${SelectIcon} {
         transition: all 150ms ease-out;
         position: absolute;
-        top: ${props.appearance === 'tertiary' ? '12px' : '50%'};
+        top: ${props.appearance === 'tertiary' ? '10px' : '50%'};
         left: ${props.appearance === 'tertiary' ? 0 : '0.8em'};
         height: 1em;
         width: 1em;
@@ -236,7 +266,9 @@ const SelectWrapper = styled.span<WrapperProps>`
       }
 
       ${Selector} + ${SelectIcon} {
-        animation: ${jiggle} 700ms ease-out;
+        ${css`
+          animation: ${jiggle} 700ms ease-out;
+        `}
         path {
           fill: ${color.red};
         }
@@ -264,6 +296,7 @@ interface Props {
   className?: string;
   inProgress?: boolean;
   disabled?: boolean;
+  stackLevel?: 'top' | 'middle' | 'bottom';
 }
 
 export const Select: FunctionComponent<Props & ComponentProps<typeof Selector>> = ({
@@ -278,6 +311,7 @@ export const Select: FunctionComponent<Props & ComponentProps<typeof Selector>>
   className,
   inProgress = false,
   disabled = false,
+  stackLevel = undefined,
   ...other
 }) => {
   let spinnerId;
@@ -304,6 +338,7 @@ export const Select: FunctionComponent<Props & ComponentProps<typeof Selector>>
         error={error}
         disabled={disabled}
         inProgress={inProgress}
+        stackLevel={stackLevel}
       >
         {!inProgress && <Arrow />}
         <Selector