@instructure/ui-responsive 7.19.0 → 7.20.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.20.0](https://github.com/instructure/instructure-ui/compare/v7.19.0...v7.20.0) (2022-06-22)
+
+### Features
+
+- **ui-responsive:** add `display` prop to Responsive ([36ea2e4](https://github.com/instructure/instructure-ui/commit/36ea2e4))
+
 # [7.19.0](https://github.com/instructure/instructure-ui/compare/v7.18.0...v7.19.0) (2022-06-03)
 
 **Note:** Version bump only for package @instructure/ui-responsive

package/es/Responsive/index.js

@@ -170,6 +170,7 @@ var Responsive = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           props = _this$props2.props,
           render = _this$props2.render,
+          display = _this$props2.display,
           children = _this$props2.children;
       var renderFunc; // Responsive needs to render once to measure the dom and obtain matches.
       // Calling the render prop on this initial render can cause visual side
@@ -181,7 +182,11 @@ var Responsive = /*#__PURE__*/function (_Component) {
         renderFunc = children || render;
       }
 
-      return /*#__PURE__*/React.createElement("div", null, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: display
+        }
+      }, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
     }
   }]);
 
@@ -220,13 +225,21 @@ Responsive.propTypes = {
    * Function that takes the same form and arguments as the render prop. Either this or a `render`
    * prop function must be supplied.
    */
-  children: PropTypes.func
+  children: PropTypes.func,
+
+  /**
+   * The Responsive component is rendered as a `<div>`,
+   * so it has `display="block"` by default.
+   * You can override the display value with this prop.
+   */
+  display: PropTypes.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex'])
 };
 Responsive.defaultProps = {
   children: null,
   render: void 0,
   match: 'element',
-  props: null
+  props: null,
+  display: void 0
 };
 export default Responsive;
 export { Responsive };

package/lib/Responsive/index.js

@@ -186,6 +186,7 @@ var Responsive = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           props = _this$props2.props,
           render = _this$props2.render,
+          display = _this$props2.display,
           children = _this$props2.children;
       var renderFunc; // Responsive needs to render once to measure the dom and obtain matches.
       // Calling the render prop on this initial render can cause visual side
@@ -197,7 +198,11 @@ var Responsive = /*#__PURE__*/function (_Component) {
         renderFunc = children || render;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", null, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: display
+        }
+      }, renderFunc && renderFunc(this.mergeProps(matches, props), matches));
     }
   }]);
   Responsive.displayName = "Responsive";
@@ -236,13 +241,21 @@ Responsive.propTypes = {
    * Function that takes the same form and arguments as the render prop. Either this or a `render`
    * prop function must be supplied.
    */
-  children: _propTypes.default.func
+  children: _propTypes.default.func,
+
+  /**
+   * The Responsive component is rendered as a `<div>`,
+   * so it has `display="block"` by default.
+   * You can override the display value with this prop.
+   */
+  display: _propTypes.default.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex'])
 };
 Responsive.defaultProps = {
   children: null,
   render: void 0,
   match: 'element',
-  props: null
+  props: null,
+  display: void 0
 };
 var _default = Responsive;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-responsive",
-  "version": "7.19.0",
+  "version": "7.20.0",
   "description": "A component that allows for rendering a component differently based on either the element or the viewport size",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,19 +23,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.19.0",
-    "@instructure/debounce": "^7.19.0",
-    "@instructure/ui-dom-utils": "^7.19.0",
-    "@instructure/ui-react-utils": "^7.19.0",
-    "@instructure/ui-testable": "^7.19.0",
-    "@instructure/ui-themeable": "^7.19.0",
-    "@instructure/ui-utils": "^7.19.0",
+    "@instructure/console": "^7.20.0",
+    "@instructure/debounce": "^7.20.0",
+    "@instructure/ui-dom-utils": "^7.20.0",
+    "@instructure/ui-react-utils": "^7.20.0",
+    "@instructure/ui-testable": "^7.20.0",
+    "@instructure/ui-themeable": "^7.20.0",
+    "@instructure/ui-utils": "^7.20.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.19.0",
-    "@instructure/ui-color-utils": "^7.19.0",
-    "@instructure/ui-test-utils": "^7.19.0"
+    "@instructure/ui-babel-preset": "^7.20.0",
+    "@instructure/ui-color-utils": "^7.20.0",
+    "@instructure/ui-test-utils": "^7.20.0"
   },
   "peerDependencies": {
     "react": "^16.8"

package/src/Responsive/index.js

@@ -69,14 +69,27 @@ class Responsive extends Component {
      * Function that takes the same form and arguments as the render prop. Either this or a `render`
      * prop function must be supplied.
      */
-    children: PropTypes.func
+    children: PropTypes.func,
+    /**
+     * The Responsive component is rendered as a `<div>`,
+     * so it has `display="block"` by default.
+     * You can override the display value with this prop.
+     */
+    display: PropTypes.oneOf([
+      'inline',
+      'block',
+      'inline-block',
+      'flex',
+      'inline-flex'
+    ])
   }
 
   static defaultProps = {
     children: null,
     render: undefined,
     match: 'element',
-    props: null
+    props: null,
+    display: undefined
   }
 
   _matchListener = null
@@ -182,7 +195,7 @@ class Responsive extends Component {
 
   render() {
     const { matches, hasRendered } = this.state
-    const { props, render, children } = this.props
+    const { props, render, display, children } = this.props
     let renderFunc
     // Responsive needs to render once to measure the dom and obtain matches.
     // Calling the render prop on this initial render can cause visual side
@@ -193,7 +206,7 @@ class Responsive extends Component {
       renderFunc = children || render
     }
     return (
-      <div>
+      <div style={{ display }}>
         {renderFunc && renderFunc(this.mergeProps(matches, props), matches)}
       </div>
     )

package/types/index.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 
 export type ResponsiveMatch = "element" | "media";
 
+export type ResponsiveDisplay = "inline" | "block" | "inline-block" | "flex" | "inline-flex";
+
 export interface ResponsiveProps {
     /**
      * Specifies if the `<Responsive />` component should use element or media queries
@@ -30,6 +32,12 @@ export interface ResponsiveProps {
      * prop function must be supplied.
      */
     children?: (...args: any[])=>any;
+    /**
+     * The Responsive component is rendered as a `<div>`,
+     * so it has `display="block"` by default.
+     * You can override the display value with this prop.
+     */
+    display?: ResponsiveDisplay;
 }
 
 export class Responsive extends React.Component<ResponsiveProps, any> {