merged

scm-plugins/scm-git-plugin/src/main/js/ProtocolInformation.js

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import { ButtonGroup, Button } from "@scm-manager/ui-components";
+import { ButtonAddons, Button } from "@scm-manager/ui-components";
 import type { Repository } from "@scm-manager/ui-types";
 import CloneInformation from "./CloneInformation";
 import type { Link } from "@scm-manager/ui-types";
@@ -95,9 +95,9 @@ class ProtocolInformation extends React.Component<Props, State> {
 
     return (
      <div className={classes.protocols}>
-       <ButtonGroup className={classes.switcher}>
+       <ButtonAddons className={classes.switcher}>
          {protocols.map(this.renderProtocolButton)}
-       </ButtonGroup>
+       </ButtonAddons>
        { cloneInformation }
      </div>
     );

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

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children: React.Node
+};
+
+class ButtonAddons extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+
+    const childWrapper = [];
+    React.Children.forEach(children, child => {
+      if (child) {
+        childWrapper.push(<p className="control">{child}</p>);
+      }
+    });
+
+    return (
+      <div className={classNames("field", "has-addons", className)}>
+        {childWrapper}
+      </div>
+    );
+  }
+}
+
+export default ButtonAddons;

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

@@ -1,30 +1,26 @@
 // @flow
 import * as React from "react";
+import classNames from "classnames";
 
 type Props = {
-  addons?: boolean,
   className?: string,
   children: React.Node
 };
 
 class ButtonGroup extends React.Component<Props> {
-
-  static defaultProps = {
-    addons: true
-  };
-
   render() {
-    const { addons, className, children } = this.props;
-    let styleClasses = "buttons";
-    if (addons) {
-      styleClasses += " has-addons";
-    }
-    if (className) {
-      styleClasses += " " + className;
-    }
+    const { className, children } = this.props;
+
+    const childWrapper = [];
+    React.Children.forEach(children, child => {
+      if (child) {
+        childWrapper.push(<p className="control">{child}</p>);
+      }
+    });
+
     return (
-      <div className={styleClasses}>
-        { children }
+      <div className={classNames("field", "is-grouped", className)}>
+        {childWrapper}
       </div>
     );
   }

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

@@ -8,6 +8,7 @@ export { default as EditButton } from "./EditButton.js";
 export { default as SubmitButton } from "./SubmitButton.js";
 export { default as DownloadButton } from "./DownloadButton.js";
 export { default as ButtonGroup } from "./ButtonGroup.js";
+export { default as ButtonAddons } from "./ButtonAddons.js";
 export {
   default as RemoveEntryOfTableButton
 } from "./RemoveEntryOfTableButton.js";

scm-ui-components/packages/ui-components/src/repos/DiffFile.js

@@ -11,7 +11,7 @@ import {
 import injectSheets from "react-jss";
 import classNames from "classnames";
 import { translate } from "react-i18next";
-import { Button } from "../buttons";
+import { ButtonGroup, Button } from "../buttons";
 
 const styles = {
   panel: {
@@ -241,20 +241,25 @@ class DiffFile extends React.Component<Props, State> {
               {this.renderChangeTag(file)}
             </div>
             <div className={classNames("level-right", classes.buttonHeader)}>
-              <Button action={this.toggleSideBySide} className="reduced-mobile">
-                <span className="icon is-small">
-                  <i
-                    className={classNames(
-                      "fas",
-                      sideBySide ? "fa-align-left" : "fa-columns"
-                    )}
-                  />
-                </span>
-                <span>
-                  {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                </span>
-              </Button>
-              {fileControls}
+              <ButtonGroup>
+                <Button
+                  action={this.toggleSideBySide}
+                  className="reduced-mobile"
+                >
+                  <span className="icon is-small">
+                    <i
+                      className={classNames(
+                        "fas",
+                        sideBySide ? "fa-align-left" : "fa-columns"
+                      )}
+                    />
+                  </span>
+                  <span>
+                    {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+                  </span>
+                </Button>
+                {fileControls}
+              </ButtonGroup>
             </div>
           </div>
         </div>

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js

@@ -1,8 +1,7 @@
 //@flow
 import React from "react";
 import type { Changeset, Repository } from "@scm-manager/ui-types";
-import ButtonGroup from "../../buttons/ButtonGroup";
-import Button from "../../buttons/Button";
+import { ButtonAddons, Button } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
 import { translate } from "react-i18next";
 
@@ -22,7 +21,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
     const sourcesLink = createSourcesLink(repository, changeset);
 
     return (
-      <ButtonGroup className="is-pulled-right">
+      <ButtonAddons className="is-pulled-right">
         <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
@@ -35,7 +34,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
           </span>
           <span>{t("changeset.buttons.sources")}</span>
         </Button>
-      </ButtonGroup>
+      </ButtonAddons>
     );
   }
 }

scm-ui/src/repos/branches/components/BranchButtonGroup.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import type { Repository, Branch } from "@scm-manager/ui-types";
-import { ButtonGroup, Button } from "@scm-manager/ui-components";
+import { ButtonAddons, Button } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 
 type Props = {
@@ -24,7 +24,7 @@ class BranchButtonGroup extends React.Component<Props> {
     }/sources/${encodeURIComponent(branch.name)}/`;
 
     return (
-      <ButtonGroup>
+      <ButtonAddons>
         <Button link={changesetLink} className="reduced-mobile">
           <span className="icon">
             <i className="fas fa-exchange-alt" />
@@ -37,7 +37,7 @@ class BranchButtonGroup extends React.Component<Props> {
           </span>
           <span>{t("branch.sources")}</span>
         </Button>
-      </ButtonGroup>
+      </ButtonAddons>
     );
   }
 }

scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js

@@ -1,7 +1,11 @@
 // @flow
-
 import React from "react";
-import { Button, SubmitButton, Modal } from "@scm-manager/ui-components";
+import {
+  ButtonGroup,
+  Button,
+  SubmitButton,
+  Modal
+} from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
@@ -56,15 +60,13 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const footer = (
       <form onSubmit={this.onSubmit}>
-        <div className="field is-grouped">
-          <p className="control">{submitButton}</p>
-          <p className="control">
-            <Button
-              label={t("permission.advanced.dialog.abort")}
-              action={onClose}
-            />
-          </p>
-        </div>
+        <ButtonGroup>
+          {submitButton}
+          <Button
+            label={t("permission.advanced.dialog.abort")}
+            action={onClose}
+          />
+        </ButtonGroup>
       </form>
     );
 

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, Button } from "@scm-manager/ui-components";
+import { ButtonAddons, Button } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
@@ -26,7 +26,7 @@ class FileButtonGroup extends React.Component<Props> {
     const { t, historyIsSelected } = this.props;
 
     return (
-      <ButtonGroup>
+      <ButtonAddons>
         <Button
           action={this.showSources}
           className="reduced-mobile"
@@ -47,7 +47,7 @@ class FileButtonGroup extends React.Component<Props> {
           </span>
           <span>{t("sources.content.historyButton")}</span>
         </Button>
-      </ButtonGroup>
+      </ButtonAddons>
     );
   }
 }