fix(button): Misc. fixes after refactor

modules/_labs/pagination/react/lib/Pages.tsx

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import {css, jsx} from '@emotion/core';
+import styled from '@emotion/styled';
 import range from 'lodash/range';
 import React from 'react';
 
@@ -15,27 +16,24 @@ interface PagesProps {
   pageButtonAriaLabel: (page: number, selected: boolean) => string;
 }
 
-const noPointerEvents = css({
+const ellipsisStyle = css({
   pointerEvents: 'none',
-});
-
-const autoWidth = css({
-  width: 'auto',
-});
-
-const ellipsisStyle = css(noPointerEvents, {
   width: canvas.spacing.l,
   textAlign: 'center',
   display: 'inline-block',
 });
 
-const noTransitions = css(autoWidth, {
-  '&:not(:hover)': {transition: 'none !important'},
-});
-
-const activeStyling = css(noPointerEvents, noTransitions, autoWidth, {
-  color: canvas.colors.frenchVanilla100,
-});
+const PageButton = styled(IconButton)<{current: boolean}>(
+  {
+    width: 'auto',
+    ...type.small,
+  },
+  ({current}) => ({
+    color: current ? canvas.colors.frenchVanilla100 : undefined,
+    pointerEvents: current ? 'none' : undefined,
+    '&:not(:hover)': {transition: current ? 'none !important' : undefined},
+  })
+);
 
 /**
  * Given some information about the page, return a tuple of left and right number
@@ -74,18 +72,18 @@ export function getPages(total: number, current: number, isMobile: boolean): [nu
 
 const Pages = ({total, current, onPageClick, isMobile, pageButtonAriaLabel}: PagesProps) => {
   const pageToButton = (page: number) => (
-    <IconButton
+    <PageButton
       key={page}
       aria-label={pageButtonAriaLabel(page, page === current)}
       aria-pressed={undefined}
       variant={page === current ? IconButton.Variant.SquareFilled : IconButton.Variant.Square}
       size={IconButton.Size.Small}
       onClick={_ => onPageClick(page)}
       toggled={page === current}
-      css={page === current ? activeStyling : noTransitions}
+      current={page === current}
     >
       {page}
-    </IconButton>
+    </PageButton>
   );
 
   const [left, right] = getPages(total, current, isMobile);

modules/button/css/README.md

@@ -47,10 +47,10 @@ to use the class name `wdc-btn-deprecated` for the old styling. Note: this will
 in a future release.
 
 ```html
-<button class="wdc-btn-deprecated">Primary</button>
+<button class="wdc-btn-deprecated">Secondary</button>
 <button class="wdc-btn-deprecated wdc-btn-primary">Primary</button>
-<button class="wdc-btn-deprecated wdc-btn-delete">Primary</button>
-<button class="wdc-btn-deprecated wdc-btn-split">Primary</button>
+<button class="wdc-btn-deprecated wdc-btn-delete">Delete</button>
+<button class="wdc-btn-deprecated wdc-btn-split">Split</button>
 ```
 
 ---
@@ -284,7 +284,9 @@ Apply primary styling to the button by adding `.wdc-btn-primary` to the buttons
 ```
 
 ### Text Button
-> Use by adding `.wdc-btn-text` when you want text to behave like a button. If you want display text on a dark background you can use `.wdc-btn-text-inverse`.
+
+> Use by adding `.wdc-btn-text` when you want text to behave like a button. If you want display text
+> on a dark background you can use `.wdc-btn-text-inverse`.
 
 ```html
 <button class="wdc-btn-text">Text Button</button>
@@ -293,7 +295,10 @@ Apply primary styling to the button by adding `.wdc-btn-primary` to the buttons
 ```
 
 ### Inline Icon
-You can use a [System Icon](../../icon/css/README.md) either before or after the text of Primary, Secondary, Delete and Text buttons. The class `.wdc-icon-position-left` (default) or  `.wdc-icon-position-right` adjust the margin of the icon.
+
+You can use a [System Icon](../../icon/css/README.md) either before or after the text of Primary,
+Secondary, Delete and Text buttons. The class `.wdc-icon-position-left` (default) or
+`.wdc-icon-position-right` adjust the margin of the icon.
 
 `System Icon` requires a JavaScript import for the injector:
 
@@ -309,11 +314,11 @@ initializeIcons();
 </button>
 
 <a href="#" className="wdc-btn-text">
-  Continue <i className="wdc-icon wdc-icon-position-right" data-icon="arrowRight" data-category="system" />
+  Continue
+  <i className="wdc-icon wdc-icon-position-right" data-icon="arrowRight" data-category="system" />
 </a>
 ```
 
-
 **Accessibility note**: When an attached menu is displayed, add `aria-expanded="true"` to the
 button.
 

modules/button/react/index.ts

@@ -1,4 +1,4 @@
-export {default as Button, default as beta_Button, ButtonProps} from './lib/Button';
+export {default, default as Button, default as beta_Button, ButtonProps} from './lib/Button';
 
 export {default as DeleteButton, DeleteButtonProps} from './lib/DeleteButton';
 export {default as deprecated_Button, DeprecatedButtonProps} from './lib/deprecated_Button';

modules/button/react/package.json

@@ -11,7 +11,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Workday/canvas-kit/tree/master/modules/_labs/button/react"
+    "url": "https://github.com/Workday/canvas-kit/tree/master/modules/button/react"
   },
   "files": [
     "dist/",

modules/button/react/stories/stories_IconButton.tsx

@@ -33,7 +33,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
   .addParameters({component: IconButton})
   .addDecorator(withReadme(README))
   .add('Circle', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -82,7 +82,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Square', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -131,7 +131,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Square Filled', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -178,7 +178,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Plain', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -225,7 +225,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Circle Filled', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -272,7 +272,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Inverse', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };
@@ -325,7 +325,7 @@ storiesOf('Components|Buttons/Button/React/Icon Button', module)
     );
   })
   .add('Inverse Filled', () => {
-    const [toggled, setToggled] = React.useState();
+    const [toggled, setToggled] = React.useState<boolean | undefined>();
     const handleToggle = () => {
       setToggled(!toggled);
     };

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}

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>

modules/popup/react/lib/Popup.tsx

@@ -4,7 +4,7 @@ import {keyframes} from '@emotion/core';
 import uuid from 'uuid/v4';
 
 import Card from '@workday/canvas-kit-react-card';
-import {IconButton, IconButtonSize} from '@workday/canvas-kit-react-button';
+import {IconButton} from '@workday/canvas-kit-react-button';
 import {CanvasDepthValue, spacing} from '@workday/canvas-kit-react-core';
 import {TransformOrigin, getTranslateFromOrigin} from '@workday/canvas-kit-react-common';
 import {xIcon} from '@workday/canvas-system-icons-web';
@@ -27,10 +27,10 @@ export interface PopupProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   transformOrigin: TransformOrigin;
   /**
-   * The size of the Popup close button. Accepts `Small` or `Medium`.
-   * @default IconButtonSize.Medium
+   * The size of the Popup close button. Accepts `small` or `medium`.
+   * @default 'medium'
    */
-  closeIconSize: IconButtonSize;
+  closeIconSize: 'small' | 'medium';
   /**
    * The ref to the underlying popup container element. Use this to check click targets against when closing the Popup.
    */
@@ -106,7 +106,7 @@ export default class Popup extends React.Component<PopupProps> {
 
   static defaultProps = {
     padding: Popup.Padding.l,
-    closeIconSize: IconButton.Size.Medium,
+    closeIconSize: 'medium',
     closeLabel: 'Close',
     transformOrigin: {
       horizontal: 'center',
@@ -144,7 +144,7 @@ export default class Popup extends React.Component<PopupProps> {
           <CloseIconContainer closeIconSize={closeIconSize}>
             <IconButton
               data-close="close" // Allows for grabbing focus to the close button rather than relying on the aria label "Close" which will change based on different languages
-              ref={this.closeButtonRef}
+              buttonRef={this.closeButtonRef}
               variant={IconButton.Variant.Plain}
               size={closeIconSize}
               onClick={handleClose}

modules/popup/react/stories/stories.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 
-import {Button} from '@workday/canvas-kit-react-button';
+import {Button, DeleteButton} from '@workday/canvas-kit-react-button';
 import {Popper} from '@workday/canvas-kit-react-common';
 import {Popup} from '../index';
 import README from '../README.md';
@@ -23,9 +23,7 @@ class PopupWrapper extends React.Component<{}, PopupWrapperState> {
     const {anchorEl, open} = this.state;
     return (
       <div style={{display: 'flex', justifyContent: 'center'}}>
-        <Button variant={Button.Variant.Delete} onClick={this.handleClick}>
-          Delete Item
-        </Button>
+        <DeleteButton onClick={this.handleClick}>Delete Item</DeleteButton>
         <Popper placement={'bottom'} open={open} anchorElement={anchorEl}>
           <Popup
             width={400}
@@ -37,16 +35,10 @@ class PopupWrapper extends React.Component<{}, PopupWrapperState> {
               Are you sure you'd like to delete the item titled 'My Item'?
             </div>
 
-            <Button
-              style={{marginRight: '16px'}}
-              onClick={this.handleSubmit}
-              variant={Button.Variant.Delete}
-            >
+            <DeleteButton style={{marginRight: '16px'}} onClick={this.handleSubmit}>
               Delete
-            </Button>
-            <Button onClick={this.handleSubmit} variant={Button.Variant.Secondary}>
-              Cancel
-            </Button>
+            </DeleteButton>
+            <Button onClick={this.handleSubmit}>Cancel</Button>
           </Popup>
         </Popper>
       </div>
@@ -90,12 +82,10 @@ storiesOf('Components|Popups/Popup/React', module)
           Are you sure you'd like to delete the item titled 'My Item'?
         </div>
 
-        <Button style={{marginRight: '16px'}} onClick={() => null} variant={Button.Variant.Delete}>
+        <DeleteButton style={{marginRight: '16px'}} onClick={() => null}>
           Delete
-        </Button>
-        <Button onClick={() => null} variant={Button.Variant.Secondary}>
-          Cancel
-        </Button>
+        </DeleteButton>
+        <Button onClick={() => null}>Cancel</Button>
       </Popup>
     ),
     {