@instructure/ui-popover 8.10.3-snapshot.2 → 8.10.3-snapshot.21

package/es/Popover/props.js

@@ -25,6 +25,9 @@ import PropTypes from 'prop-types';
 import { element } from '@instructure/ui-prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 import { PositionPropTypes } from '@instructure/ui-position';
+// Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
+// TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
+const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
 const propTypes = {
   /**
    * Whether or not the `<Popover />` content is shown
@@ -54,7 +57,7 @@ const propTypes = {
   /**
    * The placement of the content in relation to the trigger
    */
-  placement: PositionPropTypes.placement,
+  placement: PropTypes.oneOf(placementPropValues),
 
   /**
    * Controls the shadow depth for the `<Popover />`

package/lib/Popover/props.js

@@ -38,6 +38,9 @@ var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
+// TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
+const placementPropValues = ['top', 'bottom', 'start', 'end', 'top start', 'top center', 'top end', 'top stretch', 'bottom start', 'bottom center', 'bottom end', 'bottom stretch', 'start top', 'start center', 'start bottom', 'start stretch', 'end top', 'end center', 'end bottom', 'end stretch', 'center start', 'center end', 'offscreen'];
 const propTypes = {
   /**
    * Whether or not the `<Popover />` content is shown
@@ -67,7 +70,7 @@ const propTypes = {
   /**
    * The placement of the content in relation to the trigger
    */
-  placement: _PositionPropTypes.PositionPropTypes.placement,
+  placement: _propTypes.default.oneOf(placementPropValues),
 
   /**
    * Controls the shadow depth for the `<Popover />`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-popover",
-  "version": "8.10.3-snapshot.2+ccdf8f43b",
+  "version": "8.10.3-snapshot.21+875db2a7e",
   "description": "A component for hiding or showing content based on user interaction.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,28 +25,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/emotion": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-a11y-utils": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-dialog": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-dom-utils": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-i18n": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-position": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-prop-types": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-react-utils": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-testable": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-utils": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-view": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/uid": "8.10.3-snapshot.2+ccdf8f43b",
+    "@instructure/console": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/emotion": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-a11y-utils": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-dialog": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-dom-utils": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-i18n": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-position": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-prop-types": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-react-utils": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-testable": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-utils": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-view": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/uid": "8.10.3-snapshot.21+875db2a7e",
     "keycode": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-color-utils": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-test-locator": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-test-queries": "8.10.3-snapshot.2+ccdf8f43b",
-    "@instructure/ui-test-utils": "8.10.3-snapshot.2+ccdf8f43b"
+    "@instructure/ui-babel-preset": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-color-utils": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-test-locator": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-test-queries": "8.10.3-snapshot.21+875db2a7e",
+    "@instructure/ui-test-utils": "8.10.3-snapshot.21+875db2a7e"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "ccdf8f43b56a8edef32600281692dfeb436d5a01"
+  "gitHead": "875db2a7e509e9b8a2c29edfe6d23830b106d472"
 }

package/src/Popover/README.md

@@ -9,25 +9,72 @@ Popovers hide or show content as a result of user interaction, such as clicking,
 ```js
 ---
 example: true
+render: false
 ---
-<Popover
-  renderTrigger={
-    <Link aria-describedby="tip">
-      Hover or focus me
-    </Link>
+class Example extends React.Component {
+  state = {
+    withArrow: true,
+    shouldAlignArrow: true,
+    color : "primary"
   }
-  shouldRenderOffscreen
-  shouldReturnFocus={false}
-  placement="top center"
-  mountNode={() => document.getElementById('main')}
-  onPositioned={() => console.log('positioned')}
-  onShowContent={() => console.log('showing')}
-  onHideContent={() => console.log('hidden')}
->
-  <View padding="x-small" display="block" as="div" id="tip">
-    Hello World
-  </View>
-</Popover>
+  toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
+  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+  changeColor = (event,color) =>  {this.setState({color})}
+  render() {
+    return (
+      <>
+        <FormFieldGroup description="Uncontrolled Popover Example">
+          <Checkbox
+            checked={this.state.withArrow}
+            label="With Arrow"
+            onChange={this.toggleWithArrow}
+          />
+          <Checkbox
+            checked={this.state.shouldAlignArrow}
+            label="Align Arrow"
+            onChange={this.toggleAlignArrow}
+          />
+        </FormFieldGroup>
+        <View display="block" margin="small none">
+          <RadioInputGroup
+            name="color"
+            defaultValue="primary"
+            description="Color:"
+            variant="toggle"
+            size="small"
+            onChange={this.changeColor} >
+            <RadioInput label="Primary" value="primary"/>
+            <RadioInput label="Primary inverse" value="primary-inverse" />
+          </RadioInputGroup>
+        </View>
+        <View display="block" as="div" margin="small">
+          <Popover
+            renderTrigger={
+              <Link aria-describedby="tip">
+                Hover or focus me
+              </Link>
+            }
+            shouldRenderOffscreen
+            shouldReturnFocus={false}
+            withArrow={this.state.withArrow}
+            shouldAlignArrow={this.state.shouldAlignArrow}
+            color = {this.state.color}
+            placement = "top end"
+            mountNode={() => document.getElementById('main')}
+            onPositioned={() => console.log('positioned')}
+            onShowContent={() => console.log('showing')}
+            onHideContent={() => console.log('hidden')}
+          >
+            <View padding="x-small" display="block" as="div" id="tip">
+              Hello World
+            </View>
+          </Popover>
+        </View>
+      </>
+    )
+  }
+}
+render(<Example />)
 
 ```
 
@@ -39,14 +86,12 @@ render: false
 example: true
 ---
 class Example extends React.Component {
-  constructor (props) {
-    super(props)
 
-    this.state = {
-      isShowingContent: false
-    }
+  state = {
+    isShowingContent: false
   }
 
+
   renderCloseButton () {
     return (
       <CloseButton
@@ -105,21 +150,35 @@ render: false
 example: true
 ---
 class Example extends React.Component {
-render () {
-  return (
+  state={
+    shouldAlignArrow : true
+  }
+  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+
+  render () {
+    return (
+      <>
+      <FormFieldGroup description="Align Arrow Example">
+        <Checkbox
+          checked={this.state.shouldAlignArrow}
+          label="Align Arrow"
+          onChange={this.toggleAlignArrow}
+        />
+      </FormFieldGroup>
       <div style={{ paddingBottom: 25, display: 'flex', justifyContent: 'center' }}>
         <Popover
           renderTrigger={<div style={{display: 'inline-block', height: '3px', width: '3px', background: 'blue'}}/>}
           isShowingContent={true}
           placement="end top"
-          shouldAlignArrow
+          shouldAlignArrow={this.state.shouldAlignArrow}
           mountNode={() => document.getElementById('main')}
         >
           <Heading>Small<br/>Target</Heading>
         </Popover>
       </div>
-  )
-}
+      </>
+    )
+  }
 }
 
 render(<Example />)
@@ -133,12 +192,9 @@ render: false
 example: true
 ---
 class Example extends React.Component {
-  constructor (props) {
-    super(props)
 
-    this.state = {
-      isShowingContent: false
-    }
+  state = {
+    isShowingContent: false
   }
 
   render () {
@@ -170,6 +226,187 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
+#### Custom elements as renderTrigger
+
+Popover and Tooltip attach mouse and focus event listeners to their `renderTrigger` components via props. These need to be propagated to the component for the listeners to work:
+
+```js
+---
+  example: true
+---
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props)
+    this.ref = React.createRef()
+  }
+  render() {
+    //  Spread the props to the underlying DOM element
+    return <div {...this.props} ref={this.ref} style={{width:"10rem"}}>My custom component</div>
+  }
+}
+<Popover renderTrigger={<MyComponent />} >
+  This text is wrapped by a Popover
+</Popover>
+```
+
+#### Popover playground
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+
+  state = {
+    shouldAlignArrow: true,
+    isShowingContent: true,
+    withArrow: true,
+    placement: 'top',
+    shadow: 'topmost',
+    color : 'primary'
+  }
+  static placementsValues = [
+      'top',
+      'end',
+      'bottom',
+      'start',
+      'top start',
+      'start top',
+      'start center',
+      'start bottom',
+      'bottom start',
+      'bottom center',
+      'bottom end',
+      'end bottom',
+      'end center',
+      'end top',
+      'top end',
+      'top center',
+      'center end',
+      'center start'
+    ];
+  static shadowValues = [
+      'none',
+      'resting',
+      'above',
+      'topmost'
+    ];
+  changePlacement = (e, { value }) => this.setState({ placement: value })
+  changeShadow = (e, { value }) => this.setState({ shadow: value})
+  toggleWithArrow = (event) => this.setState({ withArrow: !this.state.withArrow })
+  toggleAlignArrow = (event) => this.setState({ shouldAlignArrow: !this.state.shouldAlignArrow })
+  toggleShowContent = (event) => this.setState({ isShowingContent: !this.state.isShowingContent })
+  changeColor = (event,value) =>  this.setState({color:value})
+  render() {
+    return (
+      <View as="div" background="primary" padding="small">
+        <Flex margin="small small large" justifyItems="space-around">
+          <Flex.Item align="start">
+            <FormFieldGroup description="Popover Example">
+              <Checkbox
+                checked={this.state.isShowingContent}
+                label="Show Content"
+                onChange={this.toggleShowContent}
+              />
+              <Checkbox
+                checked={this.state.withArrow}
+                label="With Arrow"
+                onChange={this.toggleWithArrow}
+              />
+              <Checkbox
+                checked={this.state.shouldAlignArrow}
+                label="Align Arrow"
+                onChange={this.toggleAlignArrow}
+              />
+            </FormFieldGroup>
+          </Flex.Item>
+          <Flex.Item>
+            <View
+            as="div"
+            margin="none"
+            maxWidth="15rem"
+            >
+              <SimpleSelect
+                renderLabel="Placement"
+                value={this.state.placement}
+                onChange={this.changePlacement}
+              >
+                {Example.placementsValues.map((placement, index) => (
+                  <SimpleSelect.Option
+                    key={index}
+                    id={`${index}`}
+                    value={placement}
+                  >
+                    {placement}
+                  </SimpleSelect.Option>
+                ))}
+              </SimpleSelect>
+            </View>
+            <View
+              as="div"
+              margin="medium none"
+              maxWidth="15rem"
+            >
+              <SimpleSelect  value={this.state.shadow}
+                onChange={this.changeShadow}
+                renderLabel="Shadow"
+              >
+                {
+                  Example.shadowValues.map((shadow, index) => (
+                    <SimpleSelect.Option
+                      key={index}
+                      id={`${index}`}
+                      value={shadow}
+                    >
+                      {shadow}
+                    </SimpleSelect.Option>
+                  ))
+                }
+              </SimpleSelect>
+            </View>
+          </Flex.Item>
+          <Flex.Item align="start">
+            <View as="div" margin="none">
+              <RadioInputGroup
+                name="changeColor"
+                defaultValue="primary"
+                description="Color:"
+                variant="toggle"
+                size="small"
+                onChange={this.changeColor} >
+                <RadioInput label="Primary" value="primary"/>
+                <RadioInput label="Primary inverse" value="primary-inverse" />
+              </RadioInputGroup>
+            </View>
+          </Flex.Item>
+        </Flex>
+        <View
+          as="div"
+          display="block"
+          padding="large"
+          textAlign="center">
+          <Popover
+            renderTrigger={<div style={{ display: 'inline-block', height: '3px', width: '3px', background: 'blue' }}/>}
+            isShowingContent={this.state.isShowingContent}
+            placement={this.state.placement}
+            withArrow={this.state.withArrow}
+            shouldAlignArrow={this.state.shouldAlignArrow}
+            shadow={this.state.shadow}
+            color={this.state.color}
+            mountNode={() => document.getElementById('main')}
+          >
+            <Heading>Small<br />Target</Heading>
+          </Popover>
+        </View>
+      </View>
+    )
+  }
+}
+
+render(<Example />)
+```
+
 ### Guidelines
 
 ```js

package/src/Popover/props.ts

@@ -37,6 +37,33 @@ import type {
 } from '@instructure/ui-position'
 import type { BidirectionalProps } from '@instructure/ui-i18n'
 import type { PropValidators } from '@instructure/shared-types'
+// Copied list from "PositionPropTypes.placement" so that it appears as options in the properties table.
+// TODO: try to use "PositionPropTypes.placement" again once Popover is fully typed and uses @tsProps
+const placementPropValues = [
+  'top',
+  'bottom',
+  'start',
+  'end',
+  'top start',
+  'top center',
+  'top end',
+  'top stretch',
+  'bottom start',
+  'bottom center',
+  'bottom end',
+  'bottom stretch',
+  'start top',
+  'start center',
+  'start bottom',
+  'start stretch',
+  'end top',
+  'end center',
+  'end bottom',
+  'end stretch',
+  'center start',
+  'center end',
+  'offscreen'
+]
 
 type PopoverOwnProps = {
   isShowingContent?: boolean
@@ -118,7 +145,7 @@ const propTypes: PropValidators<PropKeys> = {
   /**
    * The placement of the content in relation to the trigger
    */
-  placement: PositionPropTypes.placement,
+  placement: PropTypes.oneOf(placementPropValues),
   /**
    * Controls the shadow depth for the `<Popover />`
    */

package/types/Popover/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Popover/props.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Popover/props.ts"],"names":[],"mappings":"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"}