addressed feedbacks

Author: mxdi9i7

src/components/Button/index.scss

@@ -157,4 +157,14 @@ a.#{$baseClass} {
     object-position: 50% 50%;
     margin-right: 5px;
   }
+
+  .vant-icon__container {
+    margin-right: 5px;
+  }
+
+  &__onlyIcon {
+    .vant-icon__container {
+      margin-right: 0px;
+    }
+  }
 }

src/components/Button/index.stories.tsx

@@ -127,7 +127,7 @@ export const BlockButtons = () => (
 );
 
 export const IconButton = () => (
-  <div className='container'>
+  <div className='container button'>
     <Button icon='star-o' type='primary' />
     <Button icon='star-o' type='info'>
       Custom Icon Button

src/components/Button/index.tsx

@@ -46,7 +46,8 @@ export default function Button({
       { square },
       { block },
       { hairline },
-      { [size]: size }
+      { [size]: size },
+      { onlyIcon: !text && !children }
     ]),
     style: {}
   };

src/components/Field/index.stories.tsx

@@ -97,6 +97,7 @@ export const FieldEvents = () => {
 export const FieldRef = () => {
   const [containerRef, setContainerRef] = useState(null);
   const [fieldRef, setFieldRef] = useState(null);
+  const [clickOutside, setClickOutside] = useState(false);
 
   window.addEventListener('click', (e) => {
     if (
@@ -106,7 +107,9 @@ export const FieldRef = () => {
       // @ts-ignore: Object is possibly 'null'.
       !containerRef.current.contains(e.target)
     ) {
-      alert('Click outside of container detected');
+      setClickOutside(true);
+    } else {
+      setClickOutside(false);
     }
   });
 
@@ -127,6 +130,7 @@ export const FieldRef = () => {
         }
       </p>
       <Field
+        placeholder={`Click outside? ${clickOutside}`}
         leftIcon='music-o'
         rightIcon='success'
         getContainerRef={(ref) => setContainerRef(ref)}

src/styles/stories.scss

@@ -2,9 +2,8 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
-    Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft Yahei', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
 }
 
 .container {
@@ -24,6 +23,9 @@ body {
       margin-bottom: 20px;
       margin-right: 20px;
     }
+    i {
+      margin-right: 5px;
+    }
   }
 
   &.column {
@@ -43,10 +45,6 @@ body {
       margin: 0;
     }
   }
-
-  .vant-button {
-    margin-right: 20px;
-  }
 }
 
 .icons-container {