ref(ui-components) Use new Button component (#11969)
Remove atlaskit deps
This commit is contained in:
Robert Pintilii
GitHub
parent
d3c7b074d4
commit
5601a62b60
|
|
@ -68,6 +68,12 @@
|
|||
}
|
||||
.buttons {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&>button:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 } >
|
||||
{ t('inlineDialogFailure.retry') }
|
||||
</Button>
|
||||
label = { t('inlineDialogFailure.retry') }
|
||||
onClick = { this.props.onRetry } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
appearance = 'default'
|
||||
onClick = { this._onTryAgain }>
|
||||
{ t(`${_TNS}.tryAgainButton`) }
|
||||
</Button>
|
||||
{
|
||||
isSupportedBrowser()
|
||||
&& <Button onClick = { this._onLaunchWeb }>
|
||||
{ t(`${_TNS}.launchWebButton`) }
|
||||
</Button>
|
||||
}
|
||||
</ButtonGroup>
|
||||
<Button
|
||||
label = { t(`${_TNS}.tryAgainButton`) }
|
||||
onClick = { this._onTryAgain }
|
||||
type = { BUTTON_TYPES.SECONDARY } />
|
||||
{
|
||||
isSupportedBrowser()
|
||||
&& <Button
|
||||
label = { t(`${_TNS}.launchWebButton`) }
|
||||
onClick = { this._onLaunchWeb }
|
||||
type = { BUTTON_TYPES.SECONDARY } />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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(':')
|
||||
? `${modifierKey} + ${keyboardKey.slice(1)}`
|
||||
: keyboardKey }
|
||||
</Lozenge>
|
||||
{ keyboardKey.startsWith(':')
|
||||
? `${modifierKey} + ${keyboardKey.slice(1)}`
|
||||
: keyboardKey }
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
appearance = 'primary'
|
||||
id = 'calendar_logout'
|
||||
onClick = { this._onClickDisconnect }
|
||||
type = 'button'>
|
||||
{ t('settings.calendar.disconnect') }
|
||||
</Button>
|
||||
<div className = 'sign-out-cta-button'>
|
||||
<Button
|
||||
id = 'calendar_logout'
|
||||
label = { t('settings.calendar.disconnect') }
|
||||
onClick = { this._onClickDisconnect } />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
type = 'button'>
|
||||
{ authLogin ? t('toolbar.logout') : t('toolbar.login') }
|
||||
</Button>
|
||||
label = { authLogin ? t('toolbar.logout') : t('toolbar.login') }
|
||||
onClick = { this._onAuthToggle } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue