UI: Update every icon for v7 design

MIGRATION.md

@@ -17,6 +17,7 @@
     - [Babel mode v7 by default](#babel-mode-v7-by-default)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
+    - [Icons API changed](#icons-api-changed)
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -234,7 +235,6 @@ In the meantime, these migration notes are the best available documentation on t
 
 ### Breaking changes
 
-
 #### No more default export from `@storybook/addons`
 
 The default export from `@storybook/addons` has been removed. Please use the named exports instead:
@@ -244,6 +244,7 @@ import { addons } from '@storybook/addons';
 ```
 
 The named export has been available since 6.0 or earlier, so your updated code will be backwards-compatible with older versions of Storybook.
+
 #### Modern browser support
 
 Starting in storybook 7.0, storybook will no longer support IE11, amongst other legacy browser versions.
@@ -253,10 +254,13 @@ This means code-features such as (but not limited to) `async/await`, arrow-funct
 Not just the runtime needs to support it, but some legacy loaders for webpack or other transpilation tools might need to be updated as well. For example certain versions of webpack 4 had parsers that could not parse the new syntax (e.g. optional chaining).
 
 Some addons or libraries might depended on this legacy browser support, and thus might break. You might get an error like:
+
 ```
 regeneratorRuntime is not defined
 ```
+
 To fix these errors, the addon will have to be re-released with a newer browser-target for transpilation. This often looks something like this (but it's dependent on the build system the addon uses):
+
 ```js
 // babel.config.js
 module.exports = {
@@ -272,7 +276,7 @@ module.exports = {
       },
     ],
   ],
-}
+};
 ```
 
 Here's an example PR to one of the storybook addons: https://github.com/storybookjs/addon-coverage/pull/3 doing just that.
@@ -468,6 +472,21 @@ In 7.0 we've removed the following feature flags:
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
 
+#### Icons API changed
+
+For addon authors who use the `Icons` component, its API has been udpated in Storybook 7.
+
+```diff
+export interface IconsProps extends ComponentProps<typeof Svg> {
+-  icon?: IconKey;
+-  symbol?: IconKey;
++  icon: IconType;
++  useSymbol?: boolean;
+}
+```
+
+Full change here: https://github.com/storybookjs/storybook/pull/18809
+
 ### Docs Changes
 
 The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
@@ -597,7 +616,9 @@ import * as previewAnnotations from '../.storybook/preview';
 
 export default function App({ Component, pageProps }) {
   return (
-    <ExternalDocs projectAnnotationsList={[reactAnnotations, previewAnnotations]}>
+    <ExternalDocs
+      projectAnnotationsList={[reactAnnotations, previewAnnotations]}
+    >
       <Component {...pageProps} />
     </ExternalDocs>
   );
@@ -721,7 +742,8 @@ import startCase from 'lodash/startCase';
 
 addons.setConfig({
   sidebar: {
-    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+    renderLabel: ({ name, type }) =>
+      type === 'story' ? name : startCase(name),
   },
 });
 ```
@@ -1148,7 +1170,11 @@ After:
 ```js
 // .storybook/main.js
 module.exports = {
-  staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
+  staticDirs: [
+    '../public',
+    '../static',
+    { from: '../foo/assets', to: '/assets' },
+  ],
 };
 ```
 
@@ -1696,13 +1722,17 @@ This breaking change only affects you if your stories actually use the context,
 Consider the following story that uses the context:
 
 ```js
-export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>;
+export const Dummy = ({ parameters }) => (
+  <div>{JSON.stringify(parameters)}</div>
+);
 ```
 
 Here's an updated story for 6.0 that ignores the args object:
 
 ```js
-export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>;
+export const Dummy = (_args, { parameters }) => (
+  <div>{JSON.stringify(parameters)}</div>
+);
 ```
 
 Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
@@ -2492,7 +2522,9 @@ For example, here's how to sort by story ID using `storySort`:
 addParameters({
   options: {
     storySort: (a, b) =>
-      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+      a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
 });
 ```
@@ -2538,7 +2570,9 @@ Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with An
 {
   "compilerOptions": {
     "paths": {
-      "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
+      "core-js/es7/reflect": [
+        "node_modules/core-js/proposals/reflect-metadata"
+      ],
       "core-js/es6/*": ["node_modules/core-js/es"]
     }
   }

code/addons/a11y/src/components/Report/Item.tsx

@@ -75,7 +75,7 @@ export const Item = (props: ItemProps) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="chevrondown"
+            icon="arrowdown"
             color="#9DA5AB"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,

code/addons/interactions/src/components/AccountForm/AccountForm.tsx

@@ -490,7 +490,7 @@ const ErrorIcon = styled(Icons)(({ theme }) => ({
   opacity: 0.8,
   marginRight: 6,
   marginLeft: 2,
-  marginTop: 1,
+  marginTop: 4,
 }));
 
 const ErrorTooltip = styled.div(({ theme }) => ({

code/addons/interactions/src/components/List.tsx

@@ -68,7 +68,7 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="chevrondown"
+            icon="arrowdown"
             color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,

code/addons/interactions/src/components/StatusIcon.tsx

@@ -6,8 +6,10 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import localTheme from '../theme';
 
-export interface StatusIconProps extends IconsProps {
+export interface StatusIconProps {
   status: Call['status'];
+  useSymbol?: IconsProps['useSymbol'];
+  className?: string;
 }
 
 const {

code/addons/jest/src/components/Result.tsx

@@ -65,7 +65,7 @@ export function Result(props: ResultProps) {
         <HeaderBar onClick={onToggle} role="button" status={status}>
           {status === `failed` ? (
             <Icon
-              icon="chevrondown"
+              icon="arrowdown"
               color={convert(themes.light).color.mediumdark}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,

code/addons/toolbars/src/components/ToolbarMenuButton.tsx

@@ -4,7 +4,7 @@ import { Icons, IconButton, IconsProps } from '@storybook/components';
 interface ToolbarMenuButtonProps {
   active: boolean;
   title: string;
-  icon: IconsProps['icon'] | '';
+  icon?: IconsProps['icon'];
   description: string;
   onClick?: () => void;
 }

code/addons/toolbars/src/components/ToolbarMenuListItem.tsx

@@ -26,7 +26,7 @@ export const ToolbarMenuListItem = ({
   onClick,
   currentValue,
 }: ToolbarMenuListItemProps) => {
-  const Icon = <Icons style={{ opacity: 1 }} icon={icon} />;
+  const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
   const hasContent = left || right || title;
 
   const Item: ListItem = {

code/addons/toolbars/src/types.ts

@@ -26,7 +26,7 @@ export interface NormalizedToolbarConfig {
   /** The label to show for this toolbar item */
   title?: string;
   /** Choose an icon to show for this toolbar item */
-  icon?: IconsProps['icon'];
+  icon: IconsProps['icon'];
   /** Set to true to prevent default update of icon to match any present selected items icon */
   preventDynamicIcon?: boolean;
   items: ToolbarItem[];

code/examples/official-storybook/stories/title/AutoTitle.stories.js

@@ -9,4 +9,4 @@ export default {
   component: Button,
 };
 
-export const Basic = () => <Button label="Click me" />;
+export const Basic = () => <Button>Click me</Button>;

code/examples/official-storybook/stories/title/CustomTitle.stories.js

@@ -8,4 +8,4 @@ export default {
   component: Button,
 };
 
-export const Basic = () => <Button label="Click me" />;
+export const Basic = () => <Button>Click me</Button>;

code/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap

@@ -46,12 +46,12 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
 
 .emotion-0 svg {
   display: inline-block;
-  height: 14px;
-  width: 14px;
+  height: 12px;
+  width: 12px;
   vertical-align: top;
   margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
+  margin-top: 0;
+  margin-bottom: 0;
   pointer-events: none;
 }
 
@@ -81,8 +81,9 @@ exports[`Storyshots Custom Prefix/AutoTitle Basic 1`] = `
 
 <button
   className="emotion-0"
-  label="Click me"
-/>
+>
+  Click me
+</button>
 `;
 
 exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
@@ -131,12 +132,12 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
 
 .emotion-0 svg {
   display: inline-block;
-  height: 14px;
-  width: 14px;
+  height: 12px;
+  width: 12px;
   vertical-align: top;
   margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
+  margin-top: 0;
+  margin-bottom: 0;
   pointer-events: none;
 }
 
@@ -166,8 +167,9 @@ exports[`Storyshots Custom Prefix/CustomTitle Basic 1`] = `
 
 <button
   className="emotion-0"
-  label="Click me"
-/>
+>
+  Click me
+</button>
 `;
 
 exports[`Storyshots Demo/AccountForm Standard 1`] = `

code/examples/react-ts/src/title/AutoTitle.stories.js

@@ -9,4 +9,4 @@ export default {
   component: Button,
 };
 
-export const Basic = () => <Button label="Click me" />;
+export const Basic = () => <Button>Click me</Button>;

code/examples/react-ts/src/title/CustomTitle.stories.js

@@ -8,4 +8,4 @@ export default {
   component: Button,
 };
 
-export const Basic = () => <Button label="Click me" />;
+export const Basic = () => <Button>Click me</Button>;

code/lib/components/src/Button/Button.tsx

@@ -41,13 +41,13 @@ const ButtonWrapper = styled.button<{
 
     svg: {
       display: 'inline-block',
-      height: small ? 14 : 16,
-      width: small ? 14 : 16,
+      height: small ? 12 : 14,
+      width: small ? 12 : 14,
 
       verticalAlign: 'top',
       marginRight: small ? 4 : 6,
-      marginTop: small ? -1 : -2,
-      marginBottom: small ? -1 : -2,
+      marginTop: small ? 0 : -1,
+      marginBottom: small ? 0 : -1,
 
       /* Necessary for js mouse events to not glitch out when hovering on svgs */
       pointerEvents: 'none',
@@ -74,7 +74,7 @@ const ButtonWrapper = styled.button<{
             display: 'block',
             margin: 0,
           },
-          ...(small ? { padding: 9 } : { padding: 12 }),
+          ...(small ? { padding: 10 } : { padding: 13 }),
         }
       : {},
   ({ theme, primary, secondary, gray }) => {