From 73740d77c0ef30f7be80ade9be28c086363c2045 Mon Sep 17 00:00:00 2001
From: Ryan Shaw <ryan@instructure.com>
Date: Wed, 26 Sep 2018 15:50:54 -0600
Subject: [PATCH] fix instUI deprecation in DashboardCardMenu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 72 +++++++++------------
 1 file changed, 32 insertions(+), 40 deletions(-)

diff --git a/app/jsx/dashboard_card/DashboardCardMenu.js b/app/jsx/dashboard_card/DashboardCardMenu.js
index ecc69fcda70..0b61e18b76d 100644
--- a/app/jsx/dashboard_card/DashboardCardMenu.js
+++ b/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 = {
-      show: false
-    }
-
-    this._closeButton = null
-    this._colorTab = null
-
-    // for testing
-    this._movementMenu = null
-    this._colorPicker = null
-    this._tabList = null
+  state = {
+    show: false
   }
 
   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>
     )
   }
-
 }