Changed type prop to buttonColor on EuiConfirmModal

elastic · Mar 22, 2018 · ae3421d · ae3421d
1 parent b0b6dae
commit ae3421d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `stop` and `stopFilled` icons ([#543](https://github.com/elastic/eui/pull/543))
-- Added a `type` ('confirm' or 'destroy') prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
+- Added a `buttonColor` prop to `EuiConfirmModal` ([#546](https://github.com/elastic/eui/pull/546))
 - Added ‘baseline’ as option to `EuiFlexGroup`'s `alignItems` prop ([#546](https://github.com/elastic/eui/pull/546))
 
 **Bug fixes**

diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js
@@ -73,7 +73,7 @@ export class ConfirmModal extends Component {
             onConfirm={this.closeDestroyModal}
             cancelButtonText="No, don't do it"
             confirmButtonText="Yes, do it"
-            type="destroy"
+            buttonColor="danger"
             defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
           >
             <p>You&rsquo;re about to destroy something.</p>
@@ -92,7 +92,7 @@ export class ConfirmModal extends Component {
         &nbsp;
 
         <EuiButton onClick={this.showDestroyModal}>
-          Show destroy type of ConfirmModal
+          Show dangerous ConfirmModal
         </EuiButton>
 
         {modal}

diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
@@ -55,8 +55,8 @@ export const ModalExample = {
     text: (
       <p>
         Use the <EuiCode>EuiConfirmModal</EuiCode> to ask the user to confirm a decision.
-        The default type is a positive or neutral confirmation. Change the <EuiCode>type</EuiCode>
-        property to <EuiCode>&quot;destroy&quot;</EuiCode> for those that are destructive and potentially regrettable.
+        The default type is a positive or neutral confirmation. To change the main button color
+        change the the <EuiCode>buttonColor</EuiCode> property to any of the button color options.
       </p>
     ),
     props: { EuiConfirmModal },

diff --git a/src/components/modal/confirm_modal.js b/src/components/modal/confirm_modal.js
@@ -25,13 +25,6 @@ const CONFIRM_MODAL_BUTTONS = [
   CANCEL_BUTTON,
 ];
 
-const typeToButtonColorMap = {
-  'confirm': 'primary',
-  'destroy': 'danger',
-};
-
-export const MODAL_TYPES = Object.keys(typeToButtonColorMap);
-
 export class EuiConfirmModal extends Component {
   componentDidMount() {
     // We have to do this instead of using `autoFocus` because React's polyfill for auto-focusing
@@ -60,7 +53,7 @@ export class EuiConfirmModal extends Component {
       cancelButtonText,
       confirmButtonText,
       className,
-      type,
+      buttonColor,
       defaultFocusedButton, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
@@ -115,7 +108,7 @@ export class EuiConfirmModal extends Component {
             onClick={onConfirm}
             fill
             buttonRef={this.confirmRef}
-            color={typeToButtonColorMap[type]}
+            color={buttonColor}
           >
             {confirmButtonText}
           </EuiButton>
@@ -134,9 +127,9 @@ EuiConfirmModal.propTypes = {
   onConfirm: PropTypes.func,
   className: PropTypes.string,
   defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS),
-  type: PropTypes.oneOf(MODAL_TYPES),
+  buttonColor: PropTypes.string,
 };
 
 EuiConfirmModal.defaultProps = {
-  type: 'confirm',
+  buttonColor: 'primary',
 };