Merge pull request #371 from storybookjs/update/form-icon-scale

Increase size of icons in standard form elements

Author: MichaelArestad

src/components/Input.tsx

@@ -106,99 +106,126 @@ const getStackLevelStyling = (props: Pick<Props, 'error' | 'stackLevel'>) => {
 };
 
 // prettier-ignore
-const InputWrapper = styled.div<Pick<Props, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>>`
+const InputWrapper = styled.div<
+  Pick<Props, 'error' | 'stackLevel' | 'appearance' | 'startingType' | 'icon'>
+>`
   display: inline-block;
   position: relative;
   vertical-align: top;
   width: 100%;
 
   ${InputEl} {
     position: relative;
-    ${props => getStackLevelStyling(props)}
+    ${(props) => getStackLevelStyling(props)}
 
     background: ${color.lightest};
     color: ${color.darkest};
     font-size: ${typography.size.s2}px;
     line-height: 20px;
     padding: 10px 15px; //40px tall
     box-shadow: ${color.border} 0 0 0 1px inset;
-    &:focus { box-shadow: ${color.secondary} 0 0 0 1px inset; }
-
-
-    ${props => props.appearance === 'pill' && css`
-      font-size: ${typography.size.s1}px;
-      line-height: 16px;
-      padding: 6px 12px; //28px tall
-      border-radius: 3em;
-      background: transparent;
-    `}
-
-    ${props => props.appearance === 'code' && css`
-      font-size: ${typography.size.s1 - 1}px;
-      line-height: 16px;
-      font-family: ${typography.type.code};
-      border-radius: ${spacing.borderRadius.small}px;
-      background: ${color.lightest};
-      padding: 8px 10px;
-    `}
-  }
-
-  ${props => props.startingType === 'password' && css`
-    ${InputEl} {
-      padding-right: 52px;
+    &:focus {
+      box-shadow: ${color.secondary} 0 0 0 1px inset;
     }
-  `}
 
-  ${props => props.icon && css`
-    > svg {
-      transition: all 150ms ease-out;
-      position: absolute;
-      top: 50%;
-      ${props.appearance === 'pill' || props.appearance === 'code' ? css`
+    ${(props) =>
+      props.appearance === 'pill' &&
+      css`
         font-size: ${typography.size.s1}px;
-      ` : css `
-        font-size: ${typography.size.s2}px;
+        line-height: 16px;
+        padding: 6px 12px; //28px tall
+        border-radius: 3em;
+        background: transparent;
       `}
-      height: 12px;
-      width: 12px;
-      margin-top: -6px;
-      z-index: 3;
-      ${props.appearance === 'pill' || props.appearance === 'code' ? css`
-        left: 10px;
-      ` : css `
-        left: ${props.appearance === 'tertiary' ? 0 : `15px` };
+
+    ${(props) =>
+      props.appearance === 'code' &&
+      css`
+        font-size: ${typography.size.s1 - 1}px;
+        line-height: 16px;
+        font-family: ${typography.type.code};
+        border-radius: ${spacing.borderRadius.small}px;
+        background: ${color.lightest};
+        padding: 8px 10px;
       `}
+  }
 
-      background: transparent;
+  ${(props) =>
+    props.startingType === 'password' &&
+    css`
+      ${InputEl} {
+        padding-right: 52px;
+      }
+    `}
 
-      path {
+  ${(props) =>
+    props.icon &&
+    css`
+      > svg {
         transition: all 150ms ease-out;
-        fill: ${color.mediumdark};
+        position: absolute;
+        top: 50%;
+        ${props.appearance === 'pill' || props.appearance === 'code'
+          ? css`
+              font-size: ${typography.size.s1}px;
+              height: 12px;
+              margin-top: -6px;
+              width: 12px;
+            `
+          : css`
+              font-size: ${typography.size.s2}px;
+              height: 14px;
+              margin-top: -7px;
+              width: 14px;
+            `}
+        z-index: 3;
+        ${props.appearance === 'pill' || props.appearance === 'code'
+          ? css`
+              left: 10px;
+            `
+          : css`
+              left: ${props.appearance === 'tertiary' ? 0 : `15px`};
+            `}
+
+        background: transparent;
+
+        path {
+          transition: all 150ms ease-out;
+          fill: ${color.mediumdark};
+        }
       }
-    }
 
-    ${InputEl}:focus + svg path {
-      fill: ${color.darker};
-    }
+      ${InputEl}:focus + svg path {
+        fill: ${color.darker};
+      }
 
-    ${InputEl} {
-      padding-left: 40px;
+      ${InputEl} {
+        padding-left: 40px;
 
-      ${(props.appearance === 'pill' || props.appearance === 'code') && css` padding-left: 30px; `};
-    }
-  `}
+        ${(props.appearance === 'pill' || props.appearance === 'code') &&
+        css`
+          padding-left: 30px;
+        `};
+      }
+    `}
 
-  ${props => props.error && css`
-    ${InputEl} {
+  ${(props) =>
+    props.error &&
+    css`
+      ${InputEl} {
         box-shadow: ${color.red} 0 0 0 1px inset;
-        &:focus { box-shadow: ${color.red} 0 0 0 1px inset !important;  }
-    }
+        &:focus {
+          box-shadow: ${color.red} 0 0 0 1px inset !important;
+        }
+      }
 
-    svg {
-      animation: ${jiggle} 700ms ease-out;
-      path { fill: ${color.red}; }
-    }
-  `}
+      svg {
+        animation: ${jiggle} 700ms ease-out;
+        path {
+          fill: ${color.red};
+        }
+      }
+    `}
 `;
 // prettier-ignore
 const InputContainer = styled.div<Pick<Props, 'orientation'>>`