Merge pull request #364 from storybookjs/update/all-icons

Update every icon (and add a few new ones)

Author: MichaelArestad

src/components/Icon.stories.tsx

@@ -13,15 +13,14 @@ const Item = styled.li<{ minimal?: boolean }>`
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  flex: 0 1 20%;
+  flex: 0 1 16%;
   min-width: 120px;
-
-  padding: 0px 7.5px 20px;
+  margin: 16px;
 
   svg {
-    margin-right: 10px;
-    width: 24px;
-    height: 24px;
+    margin-right: 6px;
+    width: 14px;
+    height: 14px;
   }
 
   ${(props) =>
@@ -31,13 +30,13 @@ const Item = styled.li<{ minimal?: boolean }>`
       min-width: auto;
       padding: 0;
       background: #fff;
-      border: 1px solid #666;
+      margin: 16px;
 
       svg {
         display: block;
         margin-right: 0;
-        width: 48px;
-        height: 48px;
+        width: 14px;
+        height: 14px;
       }
     `};
 `;
@@ -46,6 +45,13 @@ const List = styled.ul`
   display: flex;
   flex-flow: row wrap;
   list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const Header = styled.h2`
+  font-size: 16px;
+  margin: 16px;
 `;
 
 export default {
@@ -58,7 +64,7 @@ Basic.args = { icon: 'watch' };
 
 export const Labels = () => (
   <>
-    There are {Object.keys(icons).length} icons
+    <Header>{Object.keys(icons).length} icons</Header>
     <List>
       {Object.keys(icons).map((key) => (
         <Item key={key}>
@@ -71,11 +77,14 @@ export const Labels = () => (
 );
 
 export const NoLabels = () => (
-  <List>
-    {Object.keys(icons).map((key) => (
-      <Item minimal key={key}>
-        <Icon icon={key as keyof typeof icons} aria-label={key} />
-      </Item>
-    ))}
-  </List>
+  <>
+    <Header>{Object.keys(icons).length} icons</Header>
+    <List>
+      {Object.keys(icons).map((key) => (
+        <Item minimal key={key}>
+          <Icon icon={key as keyof typeof icons} aria-label={key} />
+        </Item>
+      ))}
+    </List>
+  </>
 );

src/components/Icon.tsx

@@ -22,12 +22,12 @@ const Svg = styled.svg`
  */
 export const Icon: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
   return (
-    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" {...props}>
-      <path d={icons[icon]} />
+    <Svg viewBox="0 0 14 14" width="14px" height="14px" {...props}>
+      <>{icons[icon]}</>
     </Svg>
   );
 };
 
-interface Props {
+export interface Props {
   icon: keyof typeof icons;
 }

src/components/Input.tsx

@@ -159,9 +159,9 @@ const InputWrapper = styled.div<Pick<Props, 'error' | 'stackLevel' | 'appearance
       ` : css `
         font-size: ${typography.size.s2}px;
       `}
-      height: 1em;
-      width: 1em;
-      margin-top: -.525em;
+      height: 12px;
+      width: 12px;
+      margin-top: -6px;
       z-index: 3;
       ${props.appearance === 'pill' || props.appearance === 'code' ? css`
         left: 10px;

src/components/Link.tsx

@@ -10,8 +10,8 @@ const LinkInner = styled.span<{ withArrow: boolean }>`
     props.withArrow &&
     css`
       > svg:last-of-type {
-        height: 0.7em;
-        width: 0.7em;
+        height: 0.65em;
+        width: 0.65em;
         margin-right: 0;
         margin-left: 0.25em;
         bottom: auto;

src/components/clipboard/ClipboardCode.tsx

@@ -18,8 +18,8 @@ const Code = styled.pre`
 
 const StyledClipboardIcon = styled(ClipboardIcon)`
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 4px;
+  right: 4px;
 `;
 
 interface ClipboardCodeProps {

src/components/clipboard/ClipboardIcon.tsx

@@ -5,8 +5,8 @@ import { Icon } from '../Icon';
 import { Clipboard } from './Clipboard';
 
 const StyledClipboard = styled(Clipboard)`
-  line-height: 14px;
-  padding: 5px;
+  line-height: 10px;
+  padding: 10px;
   color: ${color.mediumdark};
   &:hover {
     color: ${color.darker};
@@ -18,8 +18,8 @@ interface StyledIconProps {
 }
 
 const StyledIcon = styled(Icon)<StyledIconProps>`
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   vertical-align: top;
   color: ${(props) => (props.copied ? color.positive : 'inherit')};
 `;

src/components/clipboard/ClipboardInput.stories.tsx

@@ -7,7 +7,7 @@ export default {
 };
 
 export const Default = () => (
-  <div style={{ padding: '3em', width: 300 }}>
+  <div style={{ padding: '3em', width: 320 }}>
     <ClipboardInput label="Label" value="https://www.chromatic.com" />
   </div>
 );

src/components/clipboard/ClipboardInput.tsx

@@ -11,14 +11,14 @@ const StyledInput = styled(Input as any)`
   width: 100%;
   display: block;
   && input {
-    padding-right: 26px !important;
+    padding-right: 32px !important;
   }
 `;
 
 const StyledClipboardIcon = styled(ClipboardIcon)`
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 0px;
+  right: 0px;
 `;
 
 type SubProps = React.ComponentPropsWithoutRef<typeof Input>;