fix instUI deprecation in DashboardCardMenu

Test plan:
Open DashboardCardMenu Popover,
You shouldn’t see
Warning: [Popover] `closeButtonLabel` was deprecated in 5.0.0.
Warning: [Popover] `closeButtonRef` was deprecated in 5.0.0.
It should put focus on the first input of the popover
It should have “Close” screenreader text for the “x” button
Clicking it should close the menu

Change-Id: Idd0483b2173741289050528c9746dcb55dace02f
Reviewed-on: https://gerrit.instructure.com/165984
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>

app/jsx/dashboard_card/DashboardCardMenu.js

@@ -19,8 +19,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import I18n from 'i18n!dashcards'
-import Popover, {PopoverTrigger, PopoverContent} from '@instructure/ui-overlays/lib/components/Popover'
+import Popover, {
+  PopoverTrigger,
+  PopoverContent
+} from '@instructure/ui-overlays/lib/components/Popover'
 import TabList, {TabPanel} from '@instructure/ui-tabs/lib/components/TabList'
+import CloseButton from '@instructure/ui-buttons/lib/components/CloseButton'
+
 import ColorPicker from '../shared/ColorPicker'
 import DashboardCardMovementMenu from './DashboardCardMovementMenu'
 
@@ -60,30 +65,18 @@ export default class DashboardCardMenu extends React.Component {
     menuOptions: null
   }
 
-  constructor (props) {
-    super(props)
-
-    this.state = {
+  state = {
     show: false
   }
 
-    this._closeButton = null
-    this._colorTab = null
-
-    // for testing
-    this._movementMenu = null
-    this._colorPicker = null
-    this._tabList = null
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     // Don't rerender the popover every time the color changes
     // only when we open and close (flashes on each color select otherwise)
-    return (this.state !== nextState)
+    return this.state !== nextState
   }
 
-  handleMenuToggle = (show) => {
-    this.setState({ show })
+  handleMenuToggle = show => {
+    this.setState({show})
   }
 
   handleClose = () => {
@@ -94,7 +87,7 @@ export default class DashboardCardMenu extends React.Component {
     this.setState({show: false})
   }
 
-  render () {
+  render() {
     const {
       afterUpdateColor,
       currentColor,
@@ -113,7 +106,7 @@ export default class DashboardCardMenu extends React.Component {
     const colorPicker = (
       <div className="DashboardCardMenu__ColorPicker">
         <ColorPicker
-          ref = {(c) => { this._colorPicker = c }}
+          ref={c => (this._colorPicker = c)}
           assetString={assetString}
           afterUpdateColor={afterUpdateColor}
           hidePrompt
@@ -134,7 +127,7 @@ export default class DashboardCardMenu extends React.Component {
 
     const movementMenu = reorderingEnabled ? (
       <DashboardCardMovementMenu
-        ref={(c) => { this._movementMenu = c }}
+        ref={c => (this._movementMenu = c)}
         cardTitle={nicknameInfo.nickname}
         currentPosition={currentPosition}
         lastPosition={lastPosition}
@@ -158,21 +151,26 @@ export default class DashboardCardMenu extends React.Component {
         onToggle={this.handleMenuToggle}
         shouldContainFocus
         shouldReturnFocus
-        closeButtonLabel={I18n.t('Close')}
-        closeButtonRef={(c) => { this._closeButton = c }}
-        defaultFocusElement={() => reorderingEnabled ? this._colorTab : document.getElementById('NicknameInput')}
+        defaultFocusElement={() =>
+          reorderingEnabled ? this._colorTab : document.getElementById('NicknameInput')
+        }
         onShow={handleShow}
         contentRef={popoverContentRef}
       >
-        <PopoverTrigger>
-          {trigger}
-        </PopoverTrigger>
+        <PopoverTrigger>{trigger}</PopoverTrigger>
         <PopoverContent>
+          <CloseButton
+            buttonRef={c => (this._closeButton = c)}
+            placement="end"
+            onClick={() => this.setState({show:false})}
+          >
+            {I18n.t('Close')}
+          </CloseButton>
           <div style={menuStyles}>
-            {reorderingEnabled ?
+            {reorderingEnabled ? (
               <div>
                 <TabList
-                  ref={(c) => { this._tabList = c }}
+                  ref={c => (this._tabList = c)}
                   padding="none"
                   variant="minimal"
                   size="small"
@@ -180,27 +178,21 @@ export default class DashboardCardMenu extends React.Component {
                   <TabPanel
                     padding="none"
                     title={I18n.t('Color')}
-                    tabRef={(c) => { this._colorTab = c }}
+                    tabRef={c => (this._colorTab = c)}
                   >
                     {colorPicker}
                   </TabPanel>
-                  <TabPanel
-                    padding="none"
-                    title={I18n.t('Move')}
-                  >
+                  <TabPanel padding="none" title={I18n.t('Move')}>
                     {movementMenu}
                   </TabPanel>
                 </TabList>
               </div>
-            :
-            <div className="DashboardCardMenu">
-              {colorPicker}
-            </div>
-          }
+            ) : (
+              <div className="DashboardCardMenu">{colorPicker}</div>
+            )}
           </div>
         </PopoverContent>
       </Popover>
     )
   }
-
 }