From c2901808cac7bdb5d3e9203a5d6763a6c25e5714 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Thu, 9 Nov 2017 14:02:57 -0800
Subject: [PATCH] fix(button-group): use ButtonGroup from the Button package

That standalone ButtonGroup package has been deprecated.
The deprecation warning says to use the ButtonGroup component
from the Button package.
---
 package.json                                  |  1 -
 .../dialog/components/StatelessDialog.web.js  | 33 ++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 8aa164a48..5639a8394 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
   "dependencies": {
     "@atlaskit/avatar": "8.0.5",
     "@atlaskit/button": "5.4.2",
-    "@atlaskit/button-group": "1.5.3",
     "@atlaskit/dropdown-menu": "3.10.2",
     "@atlaskit/droplist": "4.11.1",
     "@atlaskit/field-text": "4.0.1",
diff --git a/react/features/base/dialog/components/StatelessDialog.web.js b/react/features/base/dialog/components/StatelessDialog.web.js
index 260536333..52ce022c8 100644
--- a/react/features/base/dialog/components/StatelessDialog.web.js
+++ b/react/features/base/dialog/components/StatelessDialog.web.js
@@ -1,5 +1,4 @@
-import AKButton from '@atlaskit/button';
-import AKButtonGroup from '@atlaskit/button-group';
+import Button, { ButtonGroup } from '@atlaskit/button';
 import ModalDialog from '@atlaskit/modal-dialog';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import PropTypes from 'prop-types';
@@ -189,12 +188,14 @@ class StatelessDialog extends Component {
         }
 
         return (
-            <AKButton
+            <Button
                 appearance = 'subtle'
                 id = { CANCEL_BUTTON_ID }
-                onClick = { this._onCancel }>
+                key = 'cancel'
+                onClick = { this._onCancel }
+                type = 'button'>
                 { this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') }
-            </AKButton>
+            </Button>
         );
     }
 
@@ -205,12 +206,18 @@ class StatelessDialog extends Component {
      * @returns {ReactElement}
      */
     _renderFooter() {
+        // Filter out falsy (null) values because {@code ButtonGroup} will error
+        // if passed in anything but buttons with valid type props.
+        const buttons = [
+            this._renderCancelButton(),
+            this._renderOKButton()
+        ].filter(Boolean);
+
         return (
             <footer className = 'modal-dialog-footer'>
-                <AKButtonGroup>
-                    { this._renderCancelButton() }
-                    { this._renderOKButton() }
-                </AKButtonGroup>
+                <ButtonGroup>
+                    { buttons }
+                </ButtonGroup>
             </footer>
         );
     }
@@ -245,14 +252,16 @@ class StatelessDialog extends Component {
         }
 
         return (
-            <AKButton
+            <Button
                 appearance = 'primary'
                 form = 'modal-dialog-form'
                 id = { OK_BUTTON_ID }
                 isDisabled = { this.props.okDisabled }
-                onClick = { this._onSubmit }>
+                key = 'submit'
+                onClick = { this._onSubmit }
+                type = 'button'>
                 { this.props.t(this.props.okTitleKey || 'dialog.Ok') }
-            </AKButton>
+            </Button>
         );
     }