implemented *awesome* new ButtonGrouped ui-component

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

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

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 ButtonGrouped } from "./ButtonGrouped.js";
 export {
   default as RemoveEntryOfTableButton
 } from "./RemoveEntryOfTableButton.js";

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 {
+  ButtonGrouped,
+  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">
+        <ButtonGrouped>
-          <p className="control">{submitButton}</p>
+          {submitButton}
-          <p className="control">
+          <Button
-            <Button
+            label={t("permission.advanced.dialog.abort")}
-              label={t("permission.advanced.dialog.abort")}
+            action={onClose}
-              action={onClose}
+          />
-            />
+        </ButtonGrouped>
-          </p>
-        </div>
       </form>
     );