Use icon only button for diff file controls

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Option to use a function for default collapse state in diffs
 
 ### Changed
+- Use icon only buttons for diff file controls
 - Upgrade [Legman](https://github.com/sdorra/legman) to v1.6.2 in order to fix execution on Java versions > 8
 - Upgrade [Lombok](https://projectlombok.org/) to version 1.18.10 in order to fix build on Java versions > 8
 - Upgrade [Mockito](https://site.mockito.org/) to version 2.28.2 in order to fix tests on Java versions > 8  

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -6,10 +6,10 @@ import parser from "gitdiff-parser";
 import simpleDiff from "../__resources__/Diff.simple";
 import hunksDiff from "../__resources__/Diff.hunks";
 import binaryDiff from "../__resources__/Diff.binary";
-import Button from "../buttons/Button";
 import { DiffEventContext, File } from "./DiffTypes";
 import Toast from "../toast/Toast";
 import { getPath } from "./diffs";
+import DiffButton from "./DiffButton";
 
 const diffFiles = parser.parse(simpleDiff);
 
@@ -17,7 +17,14 @@ storiesOf("Diff", module)
   .add("Default", () => <Diff diff={diffFiles} />)
   .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
   .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
-  .add("File Controls", () => <Diff diff={diffFiles} fileControlFactory={() => <Button>Custom Control</Button>} />)
+  .add("File Controls", () => (
+    <Diff
+      diff={diffFiles}
+      fileControlFactory={() => (
+        <DiffButton title="Die!" icon="skull-crossbones" onClick={() => alert("Arrrgggghhhh ...")} />
+      )}
+    />
+  ))
   .add("File Annotation", () => (
     <Diff
       diff={diffFiles}

scm-ui/ui-components/src/repos/DiffButton.tsx

@@ -0,0 +1,31 @@
+import React, { FC, MouseEvent } from "react";
+import styled from "styled-components";
+
+const Button = styled.a`
+  width: 50px;
+  cursor: pointer;
+  &:hover {
+    color: #33b2e8;
+  }
+`;
+
+type Props = {
+  icon: string;
+  title: string;
+  onClick: () => void;
+};
+
+const DiffButton: FC<Props> = ({ icon, title, onClick }) => {
+  const handleClick = (e: MouseEvent) => {
+    e.preventDefault();
+    onClick();
+  };
+
+  return (
+    <Button title={title} className="button" onClick={handleClick}>
+      <i className={`fas fa-${icon}`} />
+    </Button>
+  );
+};
+
+export default DiffButton;

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -9,6 +9,7 @@ import Tag from "../Tag";
 import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
+import DiffButton from "./DiffButton";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -250,11 +251,10 @@ class DiffFile extends React.Component<Props, State> {
       file.hunks && file.hunks.length > 0 ? (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
-            <Button
-              action={this.toggleSideBySide}
+            <DiffButton
               icon={sideBySide ? "align-left" : "columns"}
-              label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-              reducedMobile={true}
+              title={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+              onClick={this.toggleSideBySide}
             />
             {fileControls}
           </ButtonGroup>

scm-ui/ui-components/src/repos/index.ts

@@ -19,6 +19,7 @@ export * from "./changesets";
 
 export { default as Diff } from "./Diff";
 export { default as DiffFile } from "./DiffFile";
+export { default as DiffButton } from "./DiffButton";
 export { default as LoadingDiff } from "./LoadingDiff";
 export { DefaultCollapsed, DefaultCollapsedFunction } from "./defaultCollapsed";