use react children for Button and ButtonGroup

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

@@ -1,16 +1,17 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import classNames from "classnames";
 import { withRouter } from "react-router-dom";
 
 export type ButtonProps = {
-  label: string,
+  label?: string,
   loading?: boolean,
   disabled?: boolean,
   action?: (event: Event) => void,
   link?: string,
   fullWidth?: boolean,
   className?: string,
+  children?: React.Node,
   classes: any
 };
 
@@ -45,6 +46,7 @@ class Button extends React.Component<Props> {
       type,
       color,
       fullWidth,
+      children,
       className
     } = this.props;
     const loadingClass = loading ? "is-loading" : "";
@@ -62,7 +64,7 @@ class Button extends React.Component<Props> {
           className
         )}
       >
-        {label}
+        {label} {children}
       </button>
     );
   };

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

@@ -1,41 +1,30 @@
 // @flow
-import React from "react";
-import Button from "./Button";
+import * as React from "react";
 
 type Props = {
-  firstlabel: string,
-  secondlabel: string,
-  firstAction?: (event: Event) => void,
-  secondAction?: (event: Event) => void,
-  firstIsSelected: boolean
+  addons?: boolean,
+  className?: string,
+  children: React.Node
 };
 
 class ButtonGroup extends React.Component<Props> {
 
+  static defaultProps = {
+    addons: true
+  };
+
   render() {
-    const { firstlabel, secondlabel, firstAction, secondAction, firstIsSelected } = this.props;
-
-    let showFirstColor = "";
-    let showSecondColor = "";
-
-    if (firstIsSelected) {
-      showFirstColor += "link is-selected";
-    } else {
-      showSecondColor += "link is-selected";
+    const { addons, className, children } = this.props;
+    let styleClasses = "buttons";
+    if (addons) {
+      styleClasses += " has-addons";
+    }
+    if (className) {
+      styleClasses += " " + className;
     }
-
     return (
-      <div className="buttons has-addons">
-        <Button
-          label={firstlabel}
-          color={showFirstColor}
-          action={firstAction}
-        />
-        <Button
-          label={secondlabel}
-          color={showSecondColor}
-          action={secondAction}
-        />
+      <div className={styleClasses}>
+        { children }
       </div>
     );
   }

scm-ui/src/repos/sources/components/content/FileButtonGroup.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { ButtonGroup } from "@scm-manager/ui-components";
+import { ButtonGroup, Button } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
@@ -18,39 +18,32 @@ class FileButtonGroup extends React.Component<Props> {
     this.props.showHistory(false);
   };
 
+  color = (selected: boolean) => {
+    return selected ? "link is-selected" : null;
+  };
+
   render() {
     const { t, historyIsSelected } = this.props;
 
-    const sourcesLabel = (
-      <>
-        <span className="icon">
-          <i className="fas fa-code" />
-        </span>
-        <span className="is-hidden-mobile">
-          {t("sources.content.sourcesButton")}
-        </span>
-      </>
-    );
-
-    const historyLabel = (
-      <>
-        <span className="icon">
-          <i className="fas fa-history" />
-        </span>
-        <span className="is-hidden-mobile">
-          {t("sources.content.historyButton")}
-        </span>
-      </>
-    );
-
     return (
-      <ButtonGroup
-        firstlabel={sourcesLabel}
-        secondlabel={historyLabel}
-        firstAction={this.showSources}
-        secondAction={this.showHistory}
-        firstIsSelected={!historyIsSelected}
-      />
+      <ButtonGroup>
+        <Button action={this.showSources} color={ this.color(!historyIsSelected) }>
+          <span className="icon">
+            <i className="fas fa-code"/>
+          </span>
+            <span className="is-hidden-mobile">
+            {t("sources.content.sourcesButton")}
+          </span>
+        </Button>
+        <Button action={this.showHistory} color={ this.color(historyIsSelected) }>
+          <span className="icon">
+            <i className="fas fa-history"/>
+          </span>
+            <span className="is-hidden-mobile">
+            {t("sources.content.historyButton")}
+          </span>
+          </Button>
+      </ButtonGroup>
     );
   }
 }