From cbe28f9372831b897fb85444902834c1ae7cd34c Mon Sep 17 00:00:00 2001
From: Michael Arestad <marestad@gmail.com>
Date: Wed, 3 Aug 2022 16:59:17 -0600
Subject: [PATCH] Fixed missing chevrons, fixed icon size in buttons, fixed
 alert icon size, and resolved ts error

---
 .../a11y/src/components/Report/Item.tsx       |  2 +-
 .../src/components/StatusIcon.tsx             |  1 +
 code/addons/jest/src/components/Result.tsx    |  2 +-
 code/lib/components/src/Button/Button.tsx     |  8 +++---
 .../src/components/sidebar/RefIndicator.tsx   |  2 +-
 code/lib/ui/src/settings/release_notes.tsx    |  1 +
 docs/faq.md                                   | 26 +++++++++----------
 7 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx
index 3861e946540..48ae0ec3ded 100644
--- a/code/addons/a11y/src/components/Report/Item.tsx
+++ b/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)`,
diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx
index eabd93b87dc..b223a396052 100644
--- a/code/addons/interactions/src/components/StatusIcon.tsx
+++ b/code/addons/interactions/src/components/StatusIcon.tsx
@@ -9,6 +9,7 @@ import localTheme from '../theme';
 export interface StatusIconProps {
   status: Call['status'];
   useSymbol?: IconsProps['useSymbol'];
+  className?: string;
 }
 
 const {
diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx
index 1a82ed14b16..3a53fad6b21 100644
--- a/code/addons/jest/src/components/Result.tsx
+++ b/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)`,
diff --git a/code/lib/components/src/Button/Button.tsx b/code/lib/components/src/Button/Button.tsx
index 378c8f4f342..c111afd98b6 100644
--- a/code/lib/components/src/Button/Button.tsx
+++ b/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',
diff --git a/code/lib/ui/src/components/sidebar/RefIndicator.tsx b/code/lib/ui/src/components/sidebar/RefIndicator.tsx
index 569a952247b..7d1601e685e 100644
--- a/code/lib/ui/src/components/sidebar/RefIndicator.tsx
+++ b/code/lib/ui/src/components/sidebar/RefIndicator.tsx
@@ -157,7 +157,7 @@ const CurrentVersion: FC<CurrentVersionProps> = ({ url, versions }) => {
   return (
     <Version>
       <span>{currentVersionId}</span>
-      <Icons icon="chevrondown" />
+      <Icons icon="arrowdown" />
     </Version>
   );
 };
diff --git a/code/lib/ui/src/settings/release_notes.tsx b/code/lib/ui/src/settings/release_notes.tsx
index 4e279fde172..52b43124465 100644
--- a/code/lib/ui/src/settings/release_notes.tsx
+++ b/code/lib/ui/src/settings/release_notes.tsx
@@ -45,6 +45,7 @@ const AlertIcon = styled(((props) => <Icons icon="alert" {...props} />) as FC<
 >)(({ theme }) => ({
   color: theme.color.mediumdark,
   width: 40,
+  height: 40,
   margin: '0 auto',
 }));
 
diff --git a/docs/faq.md b/docs/faq.md
index fe91b55ce3f..3896d86295d 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -1,5 +1,5 @@
 ---
-title: 'Frequently Asked Questions'
+title: "Frequently Asked Questions"
 ---
 
 Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybookjs/storybook/).
@@ -17,7 +17,7 @@ module.exports = {
     /* ... */
   ],
   framework: {
-    name: '@storybook/angular',
+    name: "@storybook/angular",
     options: {
       enableIvy: false,
     },
@@ -53,7 +53,7 @@ You can generally reuse webpack rules by placing them in a file that is `require
 ```js
 module.exports = {
   webpackFinal: async (baseConfig) => {
-    const nextConfig = require('/path/to/next.config.js');
+    const nextConfig = require("/path/to/next.config.js");
 
     // merge whatever from nextConfig into the webpack config storybook will use
     return { ...baseConfig, ...nextConfig };
@@ -77,7 +77,7 @@ FAST_REFRESH=true
 ```js
 module.exports = {
   framework: {
-    name: '@storybook/react-webpack5',
+    name: "@storybook/react-webpack5",
     options: {
       fastRefresh: true,
     },
@@ -98,7 +98,7 @@ You can opt-out from the new React Root API by setting the following property in
 ```js
 module.exports = {
   framework: {
-    name: '@storybook/react-webpack5',
+    name: "@storybook/react-webpack5",
     options: {
       legacyRootApi: true,
     },
@@ -113,7 +113,7 @@ A common error is that an addon tries to access the "channel", but the channel i
 1.  You're trying to access addon channel (e.g., by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
 
     ```js
-    import { addons, mockChannel } from '@storybook/addons';
+    import { addons, mockChannel } from "@storybook/addons";
 
     addons.setChannel(mockChannel());
     ```
@@ -128,7 +128,7 @@ If you're adding Storybook's dependencies manually, make sure you include the [`
 // .storybook/main.js
 
 module.exports = {
-  addons: ['@storybook/addon-controls'],
+  addons: ["@storybook/addon-controls"],
 };
 ```
 
@@ -235,7 +235,7 @@ Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.co
 | beaker         | bell             | bitbucket    | book         | bookmark      |
 | bookmarkhollow | bottombar        | box          | branch       | browser       |
 | button         | calendar         | camera       | category     | certificate   |
-| check          | chevrondown      | chromatic    | circle       | circlehollow  |
+| check          |                  | chromatic    | circle       | circlehollow  |
 | close          | closeAlt         | cog          | collapse     | comment       |
 | commit         | compass          | component    | contrast     | copy          |
 | cpu            | credit           | cross        | dashboard    | database      |
@@ -418,15 +418,15 @@ We're aware that the default Typescript story construct might seem outdated and
 ```ts
 // Button.stories.ts | tsx
 
-import React from 'react';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from "react";
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
 
 const StoryMeta: ComponentMeta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: 'Button',
+  title: "Button",
   component: Button,
 };
 
@@ -454,7 +454,7 @@ export default {
   component: MyComponent,
   args: {
     //👇 Defining the arg's value at the component level.
-    text: 'Something',
+    text: "Something",
   },
 };
 ```
@@ -469,7 +469,7 @@ export default {
   argTypes: {
     //👇 Defining the arg's display value in docs.
     text: {
-      table: { defaultValue: { summary: 'SomeType<T>' } },
+      table: { defaultValue: { summary: "SomeType<T>" } },
     },
   },
 };