feat(ui-popover): make ui-popover backwards compatible

refs: INSTUI-2333

This commit makes ui-popover backwards compatible with
the API from ui-overlays/Popover. This should allow
consumers to upgade to ui-popover without any breaking
changes.

TEST PLAN:
- verify there are no regressions to old/new Popover
- ensure new popover supported the same props/api as
old popover
- verify new popover throws deprecation warnings only
when old api/props are used
- unit tests should pass

Change-Id: Ibc2547118ba1c042621df2924a9e71457badb60d
Reviewed-on: https://gerrit.instructure.com/c/instructure-ui/+/213080
Reviewed-by: Steve Jensen <sejensen@instructure.com>
Product-Review: Steve Jensen <sejensen@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
Visual-Regression-Test: Ken Meleta <kmeleta@instructure.com>

Author: kmeleta

packages/instui-config/codemod-configs/v8/propNames.config.json

@@ -1,4 +1,3 @@
-
 {
   "Avatar": {
     "8.0.0": [
@@ -75,6 +74,21 @@
       { "old": "trackPosition", "new": "shouldTrackPosition" }
     ]
   },
+  "Popover": {
+    "8.0.0": [
+      { "old": "show", "new": "isShowingContent" },
+      { "old": "label", "new": "screenReaderLabel" },
+      { "old": "alignArrow", "new": "shouldAlignArrow" },
+      { "old": "trackPosition", "new": "shouldTrackPosition" },
+      { "old": "defaultShow", "new": "defaultIsShowingContent" },
+      { "old": "onShow", "new": "onPositioned" },
+      { "old": "onDismiss", "new": "onHideContent" },
+      { "old": "variant", "new": "color", "values": [
+        { "old": "default", "new": "primary" },
+        { "old": "inverse", "new": "primary-inverse" }
+      ]}
+    ]
+  },
   "View": {
     "8.0.0": [
       { "old": "borderColor", "new": "borderColor", "values": [

packages/ui-date-input/src/DateInput/index.js

@@ -433,7 +433,6 @@ class DateInput extends Component {
             positionTarget={this._input}
             shouldReturnFocus={false}
             shouldFocusContentOnTriggerBlur
-            __dangerouslyIgnoreExperimentalWarnings
           >
             {this.renderCalendar({ getListProps, getOptionProps })}
           </Popover>

packages/ui-overlays/src/Popover/README.md

@@ -5,12 +5,6 @@ id: DeprecatedPopover__README
 
 **DEPRECATED:** Popover will be removed from `ui-overlays` in version 7.0.0. Use the [Popover from ui-popover](#Popover) instead.
 
-### Important Upgrade Notes
-Codemods are available to automatically update imports to the new package as well as any props that have changed. However, there are some breaking changes that will need to be addressed manually. These changes and other things to note are described below.
-- `Popover.Trigger` and `Popover.Content` are no longer in use. The trigger is now defined via the `renderTrigger` prop and the `children` of a `Popover` will be rendered as the content.
-- Some callbacks have changed. Instead of `onShow`, `onDismiss`, and `onToggle`, there is only `onRequestShowContent` and `onRequestHideContent`. When Popover is controlled, these callbacks will also be fired as prompts for updating the `isShowingContent` prop.
-<br/><br/>
-
 Popovers are actionable containers that are triggered by click. When opened, it remains connected with element that triggered it. Popovers are on the same hierarchy as the [Tray](#Tray) but contains less content.
 
 ```js

packages/ui-overlays/src/Popover/__tests__/Popover.test.js

@@ -160,7 +160,7 @@ describe('<Popover />', async () => {
     it('should call onToggle', async () => {
       const onToggle = spy()
       await mount(
-        <Popover on="click" show={false} onToggle={onToggle}>
+        <Popover on="click" onToggle={onToggle}>
           <PopoverTrigger>
             <button>Click Me</button>
           </PopoverTrigger>

packages/ui-overlays/src/Popover/index.js

@@ -29,7 +29,7 @@ import { LayoutPropTypes } from '@instructure/ui-layout'
 import { Popover as UIPopover } from '@instructure/ui-popover'
 import { bidirectional } from '@instructure/ui-i18n'
 import { Children, controllable, element } from '@instructure/ui-prop-types'
-import { ComponentIdentifier } from '@instructure/ui-react-utils'
+import { ComponentIdentifier, deprecated } from '@instructure/ui-react-utils'
 import { ThemeablePropTypes } from '@instructure/ui-themeable'
 import { testable } from '@instructure/ui-testable'
 
@@ -49,6 +49,7 @@ category: components/deprecated
 id: DeprecatedPopover
 ---
 **/
+@deprecated('7.0.0', null, 'Use @instructure/ui-popover instead')
 @testable()
 @bidirectional()
 class Popover extends Component {
@@ -346,8 +347,10 @@ class Popover extends Component {
         color={variant === 'inverse' ? 'primary-inverse' : 'primary'}
         shouldAlignArrow={alignArrow}
         shouldTrackPosition={trackPosition}
-        onRequestShowContent={() => onToggle(true)}
-        onRequestHideContent={(e, { documentClick }) => {
+        onShowContent={() => {
+          onToggle(true)
+        }}
+        onHideContent={(e, { documentClick }) => {
           onDismiss(e, documentClick)
           onToggle(false)
         }}

packages/ui-popover/README.md

@@ -1,6 +1,5 @@
 ---
 category: packages
-experimental: true
 ---
 
 ## ui-popover

packages/ui-popover/src/Popover/README.md

@@ -1,8 +1,30 @@
 ---
 describes: Popover
 ---
+
+```js
+---
+guidelines: true
+---
+<Guidelines>
+  <Figure title="Upgrade Notes for v8.0.0" recommendation="none">
+    <Figure.Item>
+      <code>Popover.Trigger</code> and <code>Popover.Content</code> are no longer in use. The trigger is now defined via the <code>renderTrigger</code> prop and the <code>children</code> of a Popover will be rendered as the content.
+    </Figure.Item>
+    <Figure.Item>
+      The <code>onToggle</code> callback has been replaced by <code>onShowContent</code> and <code>onHideContent</code> When controlled, these will also be called as prompts for updating the <code>isShowingContent</code> prop.
+    </Figure.Item>
+    <Figure.Item>
+      The <code>onShow</code> callback has been renamed to <code>onPositioned</code>.
+    </Figure.Item>
+  </Figure>
+</Guidelines>
+
+```
+
 Popovers hide or show content as a result of user interaction, such as clicking, hovering, or focusing. When opened, the content remains connected to the element that triggered it. If you only need to display a small amount of text-only content, you might consider using a [Tooltip](#Tooltip). If you need to display a larger amount of content, a [Tray](#Tray) could be a better choice.
 
+
 #### Uncontrolled Popover
 ```js
 ---
@@ -18,8 +40,8 @@ example: true
   placement="top center"
   mountNode={() => document.getElementById('main')}
   onPositioned={() => console.log('positioned')}
-  onRequestShowContent={() => console.log('showing')}
-  onRequestHideContent={() => console.log('hidden')}
+  onShowContent={() => console.log('showing')}
+  onHideContent={() => console.log('hidden')}
 >
   <View padding="x-small" display="block" as="div" id="tip">
     Hello World
@@ -62,10 +84,10 @@ class Example extends React.Component {
         <Popover
           renderTrigger={<Button>Sign In</Button>}
           isShowingContent={this.state.isShowingContent}
-          onRequestShowContent={(e) => {
+          onShowContent={(e) => {
             this.setState({ isShowingContent: true })
           }}
-          onRequestHideContent={(e, { documentClick }) => {
+          onHideContent={(e, { documentClick }) => {
             this.setState({ isShowingContent: false })
           }}
           on="click"
@@ -145,10 +167,10 @@ class Example extends React.Component {
         <Popover
           renderTrigger={<Button margin="small">focus me</Button>}
           isShowingContent={this.state.isShowingContent}
-          onRequestShowContent={(e) => {
+          onShowContent={(e) => {
             this.setState({ isShowingContent: true })
           }}
-          onRequestHideContent={(e) => {
+          onHideContent={(e) => {
             this.setState({ isShowingContent: false })
           }}
           on={['focus', 'click']}

packages/ui-popover/src/Popover/__tests__/Popover.test.js

@@ -58,11 +58,11 @@ describe('<Popover />', async () => {
   testEventHandler('onBlur', 'focus', 'blur')
 
   it('should hide content when clicked outside content by default', async () => {
-    const onRequestHideContent = spy()
+    const onHideContent = spy()
     await mount(
       <Popover
         on="click"
-        onRequestHideContent={onRequestHideContent}
+        onHideContent={onHideContent}
         renderTrigger={<button>Click Me</button>}
       >
         <h2>Foo Bar Baz</h2>
@@ -88,15 +88,15 @@ describe('<Popover />', async () => {
     content = await popover.findContent({ expectEmpty: true })
 
     expect(content).to.not.exist()
-    expect(onRequestHideContent.lastCall.args[1].documentClick).to.be.true()
+    expect(onHideContent.lastCall.args[1].documentClick).to.be.true()
   })
 
   it('should hide content when trigger is clicked', async () => {
-    const onRequestHideContent = spy()
+    const onHideContent = spy()
     await mount(
       <Popover
         on="click"
-        onRequestHideContent={onRequestHideContent}
+        onHideContent={onHideContent}
         shouldCloseOnDocumentClick={false}
         renderTrigger={<button>Click Me</button>}
       >
@@ -113,7 +113,7 @@ describe('<Popover />', async () => {
     const content = await popover.findContent({ expectEmpty: true })
 
     expect(content).to.not.exist()
-    expect(onRequestHideContent.lastCall.args[1].documentClick).to.be.false()
+    expect(onHideContent.lastCall.args[1].documentClick).to.be.false()
   })
 
   it('should show content if defaultIsShowingContent is true', async () => {
@@ -171,16 +171,16 @@ describe('<Popover />', async () => {
       expect(content.getTextContent()).to.equal('Foo Bar Baz')
     })
 
-    it('should call onRequestShowContent and onRequestHideContent', async () => {
-      const onRequestShowContent = spy()
-      const onRequestHideContent = spy()
+    it('should call onShowContent and onHideContent', async () => {
+      const onShowContent = spy()
+      const onHideContent = spy()
       const subject = await mount(
         <Popover
           on="click"
           isShowingContent={false}
           shouldCloseOnDocumentClick={false}
-          onRequestShowContent={onRequestShowContent}
-          onRequestHideContent={onRequestHideContent}
+          onShowContent={onShowContent}
+          onHideContent={onHideContent}
           renderTrigger={<button>Click Me</button>}
         >
           <h2>Foo Bar Baz</h2>
@@ -190,12 +190,12 @@ describe('<Popover />', async () => {
       const trigger = await popover.findTrigger()
 
       await trigger.click()
-      expect(onRequestShowContent).to.have.been.calledOnce()
+      expect(onShowContent).to.have.been.calledOnce()
 
       await subject.setProps({ isShowingContent: true })
 
       await trigger.click()
-      expect(onRequestHideContent.lastCall.args[1].documentClick).to.be.false()
+      expect(onHideContent.lastCall.args[1].documentClick).to.be.false()
     })
 
     it('should not show content on click', async () => {
@@ -221,13 +221,13 @@ describe('<Popover />', async () => {
 
   describe('when shouldFocusContentOnTriggerBlur=true and shouldContainFocus=false', async () => {
     it('should move focus into the content when the trigger is blurred', async () => {
-      const onRequestHideContent = spy()
+      const onHideContent = spy()
       await mount(
         <span>
           <button>focus me first</button>
           <Popover
             isShowingContent={true}
-            onRequestHideContent={onRequestHideContent}
+            onHideContent={onHideContent}
             renderTrigger={<button>focus me</button>}
             on={['hover', 'focus', 'click']}
             mountNode={() => document.getElementById('container')}
@@ -260,7 +260,7 @@ describe('<Popover />', async () => {
       })
 
       await button.keyDown('tab')
-      expect(onRequestHideContent).to.have.been.calledOnce()
+      expect(onHideContent).to.have.been.calledOnce()
     })
   })
 })