add icon support for button and reduced-mobile option if icon is set

scm-ui-components/packages/ui-components/src/buttons/Button.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router-dom";
+import Icon from "../Icon";
 
 export type ButtonProps = {
   label?: string,
@@ -9,10 +10,12 @@ export type ButtonProps = {
   disabled?: boolean,
   action?: (event: Event) => void,
   link?: string,
-  fullWidth?: boolean,
   className?: string,
+  icon?: string,
+  fullWidth?: boolean,
+  reducedMobile?: boolean,
   children?: React.Node,
-  
+
   // context props
   classes: any
 };
@@ -47,12 +50,40 @@ class Button extends React.Component<Props> {
       disabled,
       type,
       color,
+      className,
+      icon,
       fullWidth,
-      children,
-      className
+      reducedMobile,
+      children
     } = this.props;
     const loadingClass = loading ? "is-loading" : "";
     const fullWidthClass = fullWidth ? "is-fullwidth" : "";
+    const reducedMobileClass = reducedMobile ? "is-reduced-mobile" : "";
+    if (icon) {
+      return (
+        <button
+          type={type}
+          disabled={disabled}
+          onClick={this.onClick}
+          className={classNames(
+            "button",
+            "is-" + color,
+            loadingClass,
+            fullWidthClass,
+            reducedMobileClass,
+            className
+          )}
+        >
+          <span className="icon is-medium">
+            <Icon name={icon} color="inherit" />
+          </span>
+          <span>
+            {label} {children}
+          </span>
+        </button>
+      );
+    }
+
     return (
       <button
         type={type}
@@ -69,8 +100,7 @@ class Button extends React.Component<Props> {
         {label} {children}
       </button>
     );
-  };
-
+  }
 }
 
 export default withRouter(Button);

scm-ui/styles/scm.scss

@@ -363,6 +363,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
     background-color: scale-color($danger, $lightness: 75%);
   }
 
+  &.is-reduced-mobile,
   &.reduced-mobile {
     font-size: 0.9rem;
 
@@ -555,7 +556,7 @@ ul.is-separated {
 
   .panel-heading {
     border: none;
-    border-bottom: 1px solid #dbdbdb;
+    border-bottom: 1px solid $border;
     border-radius: 0.25rem 0.25rem 0 0;
 
     > .field {
@@ -567,12 +568,8 @@ ul.is-separated {
     display: block;
     border: none;
 
-    & .comment-wrapper:first-child div:first-child {
-      border-top: none;
-    }
-
-    & .diff-widget-content div {
-      border-bottom: none;
+    & .inline-comment + .inline-comment {
+      border-top: 1px solid $border,
     }
   }
 
@@ -584,7 +581,7 @@ ul.is-separated {
     line-height: 1.25;
     padding: 0.5em 0.75em;
     border: none;
-    border-top: 1px solid #dbdbdb;
+    border-top: 1px solid $border;
     border-radius: 0 0 0.25rem 0.25rem;
   }
 }