ref(dialog) Use new button component (#11922)

react/features/base/dialog/components/web/ModalHeader.js

@@ -12,8 +12,10 @@ import { withStyles } from '@material-ui/core/styles';
 import React from 'react';
 
 import { translate } from '../../../i18n';
-import { Icon, IconClose } from '../../../icons';
+import { IconClose } from '../../../icons/svg/index';
 import { withPixelLineHeight } from '../../../styles/functions';
+import Button from '../../../ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../ui/constants';
 
 const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
     if (!appearance) {
@@ -155,18 +157,13 @@ class ModalHeader extends React.Component<Props> {
                 </Title>
 
                 {
-                    !hideCloseIconButton
-                        && <div
-                            className = { classes.closeButton }
-                            id = 'modal-header-close-button'
-                            onClick = { onClose }>
-                            <Icon
-                                ariaLabel = { t('dialog.close') }
-                                onKeyPress = { this._onKeyPress }
-                                role = 'button'
-                                src = { IconClose }
-                                tabIndex = { 0 } />
-                        </div>
+                    !hideCloseIconButton && <Button
+                        accessibilityLabel = { t('dialog.close') }
+                        icon = { IconClose }
+                        id = 'modal-header-close-button'
+                        onClick = { onClose }
+                        size = 'large'
+                        type = { BUTTON_TYPES.TERTIARY } />
                 }
             </Header>
         );

react/features/base/dialog/components/web/StatelessDialog.js

@@ -1,13 +1,13 @@
 // @flow
 
-import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
 import { withStyles } from '@material-ui/core/styles';
 import _ from 'lodash';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n/functions';
+import Button from '../../../ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../ui/constants';
 import type { DialogProps } from '../../constants';
 
 import ModalHeader from './ModalHeader';
@@ -112,12 +112,21 @@ type Props = DialogProps & {
 /**
  * Creates the styles for the component.
  *
+ * @param {Object} theme - The theme.
  * @returns {Object}
  */
-const styles = () => {
+const styles = theme => {
     return {
         footer: {
             boxShadow: 'none'
+        },
+
+        buttonContainer: {
+            display: 'flex',
+
+            '& > button:first-child': {
+                marginRight: `${theme.spacing(2)}px`
+            }
         }
     };
 };
@@ -217,8 +226,8 @@ class StatelessDialog extends Component<Props> {
         // Filter out falsy (null) values because {@code ButtonGroup} will error
         // if passed in anything but buttons with valid type props.
         const buttons = [
-            this._renderOKButton(),
-            this._renderCancelButton()
+            this._renderCancelButton(),
+            this._renderOKButton()
         ].filter(Boolean);
 
         if (this.props.disableFooter) {
@@ -236,9 +245,9 @@ class StatelessDialog extends Component<Props> {
                      */
                 }
                 <span />
-                <ButtonGroup>
+                <div className = { this.props.classes.buttonContainer }>
                     { buttons }
-                </ButtonGroup>
+                </div>
             </ModalFooter>
         );
     }
@@ -307,13 +316,11 @@ class StatelessDialog extends Component<Props> {
 
         return (
             <Button
-                appearance = 'subtle'
                 id = { CANCEL_BUTTON_ID }
-                key = 'cancel'
+                label = { t(this.props.cancelKey || 'dialog.Cancel') }
                 onClick = { onDecline || this._onCancel }
-                type = 'button'>
-                { t(this.props.cancelKey || 'dialog.Cancel') }
-            </Button>
+                size = 'small'
+                type = { BUTTON_TYPES.TERTIARY } />
         );
     }
 
@@ -334,15 +341,11 @@ class StatelessDialog extends Component<Props> {
 
         return (
             <Button
-                appearance = 'primary'
-                form = 'modal-dialog-form'
+                disabled = { this.props.okDisabled }
                 id = { OK_BUTTON_ID }
-                isDisabled = { this.props.okDisabled }
-                key = 'submit'
+                label = { t(this.props.okKey || 'dialog.Ok') }
                 onClick = { this._onSubmit }
-                type = 'button'>
-                { t(this.props.okKey || 'dialog.Ok') }
-            </Button>
+                size = 'small' />
         );
     }