ref(dialog) Use new button component (#11922)
This commit is contained in:
parent
5ec6581d2e
commit
abc752635d
|
@ -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 }
|
||||
!hideCloseIconButton && <Button
|
||||
accessibilityLabel = { t('dialog.close') }
|
||||
icon = { IconClose }
|
||||
id = 'modal-header-close-button'
|
||||
onClick = { onClose }>
|
||||
<Icon
|
||||
ariaLabel = { t('dialog.close') }
|
||||
onKeyPress = { this._onKeyPress }
|
||||
role = 'button'
|
||||
src = { IconClose }
|
||||
tabIndex = { 0 } />
|
||||
</div>
|
||||
onClick = { onClose }
|
||||
size = 'large'
|
||||
type = { BUTTON_TYPES.TERTIARY } />
|
||||
}
|
||||
</Header>
|
||||
);
|
||||
|
|
|
@ -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' />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue