ref(ui-components) Use new Button component (#11969)

Remove atlaskit deps

css/deep-linking/_desktop.scss

@@ -68,6 +68,12 @@
                 }
                 .buttons {
                     margin-top: 16px;
+                    display: flex;
+                    align-items: center;
+
+                    &>button:first-child {
+                        margin-right: 8px;
+                    }
                 }
             }
         }

package.json

@@ -16,7 +16,6 @@
   "readmeFilename": "README.md",
   "dependencies": {
     "@amplitude/react-native": "2.7.0",
-    "@atlaskit/button": "15.1.4",
     "@atlaskit/dropdown-menu": "10.1.2",
     "@atlaskit/field-text": "11.0.4",
     "@atlaskit/field-text-area": "8.0.4",
@@ -24,13 +23,11 @@
     "@atlaskit/icon": "21.2.0",
     "@atlaskit/inline-dialog": "13.0.9",
     "@atlaskit/inline-message": "11.0.8",
-    "@atlaskit/lozenge": "10.1.1",
     "@atlaskit/modal-dialog": "11.2.4",
     "@atlaskit/multi-select": "15.0.5",
     "@atlaskit/spinner": "15.0.6",
     "@atlaskit/tabs": "12.1.2",
     "@atlaskit/theme": "11.0.2",
-    "@atlaskit/toggle": "12.0.3",
     "@atlaskit/tooltip": "17.1.2",
     "@giphy/js-fetch-api": "4.1.2",
     "@giphy/react-components": "5.6.0",

react/features/base/react/components/web/InlineDialogFailure.js

@@ -1,9 +1,10 @@
 /* @flow */
 
-import Button from '@atlaskit/button/standard-button';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';
+import Button from '../../../ui/components/web/Button';
+
 
 declare var interfaceConfig: Object;
 
@@ -69,9 +70,8 @@ class InlineDialogFailure extends Component<Props> {
                 { supportLinkElem }
                 <Button
                     className = 'inline-dialog-error-button'
-                    onClick = { this.props.onRetry } >
+                    label = { t('inlineDialogFailure.retry') }
-                    { t('inlineDialogFailure.retry') }
+                    onClick = { this.props.onRetry } />
-                </Button>
             </div>
         );
     }

react/features/deep-linking/components/DeepLinkingDesktopPage.web.js

@@ -1,7 +1,5 @@
 // @flow
 
-import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/standard-button';
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
@@ -10,6 +8,8 @@ import { createDeepLinkingPageEvent, sendAnalytics } from '../../analytics';
 import { isSupportedBrowser } from '../../base/environment';
 import { translate } from '../../base/i18n';
 import { connect } from '../../base/redux';
+import { Button } from '../../base/ui/components/web';
+import { BUTTON_TYPES } from '../../base/ui/constants';
 import {
     openWebApp,
     openDesktopApp
@@ -22,7 +22,7 @@ declare var interfaceConfig: Object;
  * The type of the React {@code Component} props of
  * {@link DeepLinkingDesktopPage}.
  */
- type Props = {
+type Props = {
 
     /**
      * Used to dispatch actions from the buttons.
@@ -122,19 +122,17 @@ class DeepLinkingDesktopPage<P : Props> extends Component<P> {
                                     }
                                 </p>
                                 <div className = 'buttons'>
-                                    <ButtonGroup>
+                                    <Button
-                                        <Button
+                                        label = { t(`${_TNS}.tryAgainButton`) }
-                                            appearance = 'default'
+                                        onClick = { this._onTryAgain }
-                                            onClick = { this._onTryAgain }>
+                                        type = { BUTTON_TYPES.SECONDARY } />
-                                            { t(`${_TNS}.tryAgainButton`) }
+                                    {
-                                        </Button>
+                                        isSupportedBrowser()
-                                        {
+                                                && <Button
-                                            isSupportedBrowser()
+                                                    label = { t(`${_TNS}.launchWebButton`) }
-                                                && <Button onClick = { this._onLaunchWeb }>
+                                                    onClick = { this._onLaunchWeb }
-                                                    { t(`${_TNS}.launchWebButton`) }
+                                                    type = { BUTTON_TYPES.SECONDARY } />
-                                                </Button>
+                                    }
-                                        }
-                                    </ButtonGroup>
                                 </div>
                             </div>
                         </div>

react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-import Lozenge from '@atlaskit/lozenge';
 import { withStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
@@ -47,6 +46,13 @@ const styles = theme => {
                 display: 'flex',
                 justifyContent: 'space-between',
                 marginBottom: theme.spacing(2)
+            },
+
+            '& .item-action': {
+                backgroundColor: theme.palette.ui04,
+                fontWeight: 'bold',
+                padding: '1px 4px',
+                borderRadius: '4px'
             }
         }
     };
@@ -114,11 +120,9 @@ class KeyboardShortcutsDialog extends Component<Props> {
                     { this.props.t(translationKey) }
                 </span>
                 <span className = 'item-action'>
-                    <Lozenge isBold = { true }>
+                    { keyboardKey.startsWith(':')
-                        { keyboardKey.startsWith(':')
+                        ? `${modifierKey} + ${keyboardKey.slice(1)}`
-                            ? `${modifierKey} + ${keyboardKey.slice(1)}`
+                        : keyboardKey }
-                            : keyboardKey }
-                    </Lozenge>
                 </span>
             </li>
         );

react/features/settings/components/web/CalendarTab.js

@@ -1,11 +1,11 @@
 // @flow
 
-import Button from '@atlaskit/button/standard-button';
 import Spinner from '@atlaskit/spinner';
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
+import { Button } from '../../../base/ui/components/web';
 import {
     CALENDAR_TYPE,
     MicrosoftSignInButton,
@@ -252,13 +252,12 @@ class CalendarTab extends Component<Props, State> {
                     { t('settings.calendar.signedIn',
                         { email: _profileEmail }) }
                 </div>
-                <Button
+                <div className = 'sign-out-cta-button'>
-                    appearance = 'primary'
+                    <Button
-                    id = 'calendar_logout'
+                        id = 'calendar_logout'
-                    onClick = { this._onClickDisconnect }
+                        label = { t('settings.calendar.disconnect') }
-                    type = 'button'>
+                        onClick = { this._onClickDisconnect } />
-                    { t('settings.calendar.disconnect') }
+                </div>
-                </Button>
             </div>
         );
     }

react/features/settings/components/web/ProfileTab.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-import Button from '@atlaskit/button/standard-button';
 import React from 'react';
 
 // @ts-ignore
@@ -15,6 +14,7 @@ import { AbstractDialogTab } from '../../../base/dialog';
 import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
 // @ts-ignore
 import { translate } from '../../../base/i18n';
+import { Button } from '../../../base/ui/components/web';
 import Input from '../../../base/ui/components/web/Input';
 // @ts-ignore
 import { openLogoutDialog } from '../../actions';
@@ -202,12 +202,10 @@ class ProfileTab extends AbstractDialogTab<Props> {
                         { t('settings.loggedIn', { name: authLogin }) }
                     </div> }
                 <Button
-                    appearance = 'primary'
+                    accessibilityLabel = { authLogin ? t('toolbar.logout') : t('toolbar.login') }
                     id = 'login_button'
-                    onClick = { this._onAuthToggle }
+                    label = { authLogin ? t('toolbar.logout') : t('toolbar.login') }
-                    type = 'button'>
+                    onClick = { this._onAuthToggle } />
-                    { authLogin ? t('toolbar.logout') : t('toolbar.login') }
-                </Button>
             </div>
         );
     }

react/features/settings/components/web/SettingsDialog.js

@@ -170,6 +170,11 @@ const styles = theme => {
                 marginBottom: '20px'
             },
 
+            '& .sign-out-cta-button': {
+                display: 'flex',
+                justifyContent: 'center'
+            },
+
             '@media only screen and (max-width: 700px)': {
                 '& .device-selection': {
                     display: 'flex',