Revert "Changed type prop to buttonColor on EuiConfirmModal"

This reverts commit b27fe390272c84eda0af20434b83d588017b1b72.
elastic · Mar 22, 2018 · e52977b · e52977b
1 parent 2cf7fc3
commit e52977b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
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"
-            buttonColor="danger"
+            type="destroy"
             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 dangerous ConfirmModal
+          Show destroy type of 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. To change the main button color
-        change the the <EuiCode>buttonColor</EuiCode> property to any of the button color options.
+        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.
       </p>
     ),
     props: { EuiConfirmModal },

diff --git a/src/components/modal/confirm_modal.js b/src/components/modal/confirm_modal.js
@@ -25,6 +25,13 @@ 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
@@ -54,7 +61,7 @@ export class EuiConfirmModal extends Component {
       cancelButtonText,
       confirmButtonText,
       className,
-      buttonColor,
+      type,
       defaultFocusedButton, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
@@ -109,7 +116,7 @@ export class EuiConfirmModal extends Component {
             onClick={onConfirm}
             fill
             buttonRef={this.confirmRef}
-            color={buttonColor}
+            color={typeToButtonColorMap[type]}
           >
             {confirmButtonText}
           </EuiButton>
@@ -128,9 +135,9 @@ EuiConfirmModal.propTypes = {
   onConfirm: PropTypes.func,
   className: PropTypes.string,
   defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS),
-  buttonColor: PropTypes.string,
+  type: PropTypes.oneOf(MODAL_TYPES),
 };
 
 EuiConfirmModal.defaultProps = {
-  buttonColor: 'primary',
+  type: 'confirm',
 };