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.
This commit is contained in:
Leonard Kim 2017-11-09 14:02:57 -08:00 committed by yanas
parent dc26b17d8b
commit c2901808ca
2 changed files with 21 additions and 13 deletions

View File

@ -17,7 +17,6 @@
"dependencies": { "dependencies": {
"@atlaskit/avatar": "8.0.5", "@atlaskit/avatar": "8.0.5",
"@atlaskit/button": "5.4.2", "@atlaskit/button": "5.4.2",
"@atlaskit/button-group": "1.5.3",
"@atlaskit/dropdown-menu": "3.10.2", "@atlaskit/dropdown-menu": "3.10.2",
"@atlaskit/droplist": "4.11.1", "@atlaskit/droplist": "4.11.1",
"@atlaskit/field-text": "4.0.1", "@atlaskit/field-text": "4.0.1",

View File

@ -1,5 +1,4 @@
import AKButton from '@atlaskit/button'; import Button, { ButtonGroup } from '@atlaskit/button';
import AKButtonGroup from '@atlaskit/button-group';
import ModalDialog from '@atlaskit/modal-dialog'; import ModalDialog from '@atlaskit/modal-dialog';
import { AtlasKitThemeProvider } from '@atlaskit/theme'; import { AtlasKitThemeProvider } from '@atlaskit/theme';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -189,12 +188,14 @@ class StatelessDialog extends Component {
} }
return ( return (
<AKButton <Button
appearance = 'subtle' appearance = 'subtle'
id = { CANCEL_BUTTON_ID } id = { CANCEL_BUTTON_ID }
onClick = { this._onCancel }> key = 'cancel'
onClick = { this._onCancel }
type = 'button'>
{ this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') } { this.props.t(this.props.cancelTitleKey || 'dialog.Cancel') }
</AKButton> </Button>
); );
} }
@ -205,12 +206,18 @@ class StatelessDialog extends Component {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
_renderFooter() { _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 ( return (
<footer className = 'modal-dialog-footer'> <footer className = 'modal-dialog-footer'>
<AKButtonGroup> <ButtonGroup>
{ this._renderCancelButton() } { buttons }
{ this._renderOKButton() } </ButtonGroup>
</AKButtonGroup>
</footer> </footer>
); );
} }
@ -245,14 +252,16 @@ class StatelessDialog extends Component {
} }
return ( return (
<AKButton <Button
appearance = 'primary' appearance = 'primary'
form = 'modal-dialog-form' form = 'modal-dialog-form'
id = { OK_BUTTON_ID } id = { OK_BUTTON_ID }
isDisabled = { this.props.okDisabled } isDisabled = { this.props.okDisabled }
onClick = { this._onSubmit }> key = 'submit'
onClick = { this._onSubmit }
type = 'button'>
{ this.props.t(this.props.okTitleKey || 'dialog.Ok') } { this.props.t(this.props.okTitleKey || 'dialog.Ok') }
</AKButton> </Button>
); );
} }