fix: Use css buttons for popup and modal css stories

Workday · Mar 13, 2020 · 4d75bc4 · 4d75bc4
1 parent d66891e
commit 4d75bc4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/modules/modal/css/stories.tsx b/modules/modal/css/stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 import README from './README.md';
-import {beta_Button as Button} from '@workday/canvas-kit-react-button';
+import '@workday/canvas-kit-css-button/index.scss';
 import './index.scss';
 // @ts-ignore
 import initializeIcons from '../../icon/css/lib/canvas-kit-css-icon';
@@ -28,9 +28,9 @@ class ModalWrapper extends React.Component<{}, ModalWrapperState> {
     const {open} = this.state;
     return (
       <div>
-        <Button variant={Button.Variant.Delete} onClick={this.onOpenPopupClick}>
+        <button className="wdc-btn wdc-btn-delete" onClick={this.onOpenPopupClick}>
           Delete Item
-        </Button>
+        </button>
         {open ? (
           <div className="wdc-modal-bg" onClick={this.onOverlayClick}>
             <div
@@ -54,16 +54,16 @@ class ModalWrapper extends React.Component<{}, ModalWrapperState> {
               <div style={{marginBottom: '24px'}} className="wdc-modal-body">
                 Are you sure you'd like to delete the item titled 'My Item'?
               </div>
-              <Button
-                style={{marginRight: '16px'}}
+              <button
+                className="wdc-btn wdc-btn-delete"
                 onClick={this.onDeleteClick}
-                variant={Button.Variant.Delete}
+                style={{marginRight: '16px'}}
               >
-                Delete
-              </Button>
-              <Button onClick={this.onCancelClick} variant={Button.Variant.Secondary}>
+                Delete Item
+              </button>
+              <button className="wdc-btn" onClick={this.onCancelClick}>
                 Cancel
-              </Button>
+              </button>
             </div>
           </div>
         ) : null}

diff --git a/modules/popup/css/stories.tsx b/modules/popup/css/stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 import README from './README.md';
-import {beta_Button as Button} from '@workday/canvas-kit-react-button';
+import '@workday/canvas-kit-css-button/index.scss';
 import './index.scss';
 // @ts-ignore
 import initializeIcons from '../../icon/css/lib/canvas-kit-css-icon';
@@ -34,9 +34,9 @@ class PopupWrapper extends React.Component<{}, PopupWrapperState> {
           position: 'relative',
         }}
       >
-        <Button variant={Button.Variant.Delete} onClick={this.onOpenPopupClick}>
+        <button className="wdc-btn wdc-btn-delete" onClick={this.onOpenPopupClick}>
           Delete Item
-        </Button>
+        </button>
         {open ? (
           <div
             className="wdc-popup wdc-popup-padding-s wdc-popup-animation-origin-top-center"
@@ -59,16 +59,16 @@ class PopupWrapper extends React.Component<{}, PopupWrapperState> {
             <div style={{marginBottom: '24px'}} className="wdc-popup-body">
               Are you sure you'd like to delete the item titled 'My Item'?
             </div>
-            <Button
-              style={{marginRight: '16px'}}
+            <button
+              className="wdc-btn wdc-btn-delete"
               onClick={this.onDeleteClick}
-              variant={Button.Variant.Delete}
+              style={{marginRight: '16px'}}
             >
-              Delete
-            </Button>
-            <Button onClick={this.onCancelClick} variant={Button.Variant.Secondary}>
+              Delete Item
+            </button>
+            <button className="wdc-btn" onClick={this.onCancelClick}>
               Cancel
-            </Button>
+            </button>
           </div>
         ) : null}
       </div>