@instructure/ui-layout - npm Package Compare versions

Comparing version 5.4.0 to 5.4.1-dev.0

es/components/DrawerLayout/DrawerTray/index.js

@@ -40,3 +40,2 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-import Dialog from '@instructure/ui-a11y/lib/components/Dialog';
 import BaseTransition from '@instructure/ui-motion/lib/components/Transition/BaseTransition';
@@ -48,4 +47,6 @@
 import getClassList from '@instructure/ui-utils/lib/dom/getClassList';
+import getDisplayName from '@instructure/ui-utils/lib/react/getDisplayName';
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction';
 import ms from '@instructure/ui-utils/lib/ms';
+import warning from '@instructure/ui-utils/lib/warning';
 
@@ -136,2 +137,4 @@ var styles = {
       }
+
+      warning(this.props.render || this.props.children, '[' + getDisplayName(DrawerTray) + '] must have either a `render` prop or `children` prop.');
     }
@@ -185,2 +188,3 @@ }, {
           open = _props2.open,
+          label = _props2.label,
           border = _props2.border,
@@ -191,24 +195,9 @@ placement = _props2.placement,
           onExit = _props2.onExit,
-          children = _props2.children;
+          children = _props2.children,
+          render = _props2.render;
 
 
       var duration = ms(this.theme.duration);
+      var renderFunc = children || render;
 
-      var trayContent = children;
-
-      // If we render the dialog before the content is positioned, we get
-      // jolted offscreen when the default focus element gets focus
-      if (this.state.positioned) {
-        trayContent = React.createElement(
-          Dialog,
-          Object.assign({}, pickProps(this.props, Dialog.propTypes), {
-            open: true,
-            shouldCloseOnDocumentClick: false,
-            shouldReturnFocus: true,
-            role: 'region'
-          }),
-          trayContent
-        );
-      }
-
       return React.createElement(
@@ -234,5 +223,7 @@ BaseTransition,
             ref: this.handleContentRef,
+            role: 'region',
+            'aria-label': label,
             className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, border), _defineProperty(_classnames, styles['placement--' + placement], true), _classnames))
           },
-          trayContent
+          renderFunc(this.state.positioned)
         )
@@ -253,5 +244,13 @@ );
   label: PropTypes.string.isRequired,
+  /**
+   * Function returning content for `<DrawerTray />` which is called with a single boolean
+   * argument indicating when the tray has finished positioning.
+   */
+  children: PropTypes.func,
+  /**
+   * Function returning content for `<DrawerTray />`  which is called with a single boolean
+   * argument indicating when the tray has finished positioning.
+   */
+  render: PropTypes.func,
 
-  children: PropTypes.node,
-
   /**
@@ -287,12 +286,2 @@ * Placement of the `<DrawerTray />`
   /**
-   * Should `<DrawerTray />` contain focus
-   */
-  shouldContainFocus: PropTypes.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
-  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-  /**
    * Callback fired before the <DrawerTray /> transitions in
@@ -328,10 +317,4 @@ */
    */
-  contentRef: PropTypes.func,
-
-  /**
-   * Function that returns the DIV where screenreader alerts will be placed.
-   */
-  liveRegion: PropTypes.func
+  contentRef: PropTypes.func
 }, _class2.defaultProps = {
-  children: null,
   open: false,
@@ -343,4 +326,2 @@ onOpen: function onOpen() {},
   placement: 'start',
-  shouldContainFocus: true,
-  defaultFocusElement: null,
   onEnter: function onEnter() {},
@@ -347,0 +328,0 @@ onEntering: function onEntering() {},

es/components/Flex/FlexItem/index.js

@@ -46,3 +46,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-import Container from '@instructure/ui-container/lib/components/Container';
+import View from '../../View';
 
@@ -52,3 +52,3 @@ var styles = {
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._2CNXCzJ {\n  box-sizing: border-box;\n  min-width: 0.0625rem;\n\n  /* initial value is 1, but we want 0 as our default,\n  so users can opt in to shrink like they do grow */\n  flex-shrink: 0;\n}\n\n._3RdXVIz {\n  /* useful defaults for column layouts */\n  width: 100%;\n  overflow-y: auto;\n}\n\n._3bbPwtW {\n  align-self: flex-start;\n}\n\n.OKGbLDF {\n  align-self: flex-end;\n}\n\n._2BsJ1kI {\n  align-self: center;\n}\n\n._2EOm21Q {\n  align-self: stretch;\n}\n\n._apYc09 {\n  flex-grow: 1;\n}\n\n._2N9AXaf {\n  flex-shrink: 1;\n}\n\n._3giPai7 {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
+      return '/*  imported from styles.css  */\n\n._2CNXCzJ {\n  box-sizing: border-box;\n  min-width: 0.0625rem;\n\n  /* initial value is 1, but we want 0 as our default,\n  so users can opt in to shrink like they do grow */\n  flex-shrink: 0;\n}\n\n._3RdXVIz {\n  /* useful defaults for column layouts */\n  overflow-y: auto;\n}\n\n._3bbPwtW {\n  align-self: flex-start;\n}\n\n.OKGbLDF {\n  align-self: flex-end;\n}\n\n._2BsJ1kI {\n  align-self: center;\n}\n\n._2EOm21Q {\n  align-self: stretch;\n}\n\n._apYc09 {\n  flex-grow: 1;\n}\n\n._2N9AXaf {\n  flex-shrink: 1;\n}\n\n._3giPai7 {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
     };
@@ -106,17 +106,20 @@
 
+      var dirColumn = direction === 'column';
+
       var style = {
-        flexBasis: size,
-        minWidth: direction === "row" ? size : null,
-        minHeight: direction === "column" ? size : null
+        flexBasis: size
       };
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.grow, grow), _defineProperty(_classes, styles.shrink, shrink), _defineProperty(_classes, styles['align--' + align], align), _defineProperty(_classes, styles.column, direction === 'column'), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.grow, grow), _defineProperty(_classes, styles.shrink, shrink), _defineProperty(_classes, styles['align--' + align], align), _defineProperty(_classes, styles.column, dirColumn), _classes);
 
       return React.createElement(
-        Container,
+        View,
         Object.assign({}, props, {
           className: classnames(classes),
           style: style,
+          as: as,
+          width: dirColumn ? '100%' : undefined,
+          minHeight: dirColumn ? size : undefined,
+          minWidth: direction === 'row' ? size : undefined,
           textAlign: textAlign,
-          as: as,
           margin: margin,
@@ -123,0 +126,0 @@ padding: padding

es/components/Flex/index.js

@@ -47,3 +47,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-import Container from '@instructure/ui-container/lib/components/Container';
+import View from '../View';
 import FlexItem from './FlexItem';
@@ -54,3 +54,3 @@
     var tmpl = function tmpl() {
-      return '/*\n  imported from styles.css \n */\n\n/*\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 - present Instructure, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the "Software"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n._2QQI3Dw {\n  font-family: ' + theme.fontFamily + ';\n  box-sizing: border-box;\n}\n\n._2RfhTuJ {\n  display: flex;\n}\n\n.R2GbM1e {\n  display: inline-flex;\n}\n\n.qcqR94G {\n  flex-direction: column;\n}\n\n._29WDzhx {\n  flex-wrap: wrap;\n}\n\n._27AMFvI {\n  justify-content: flex-start;\n}\n\n._3ltBbmp {\n  justify-content: flex-end;\n}\n\n._1qeQOk9 {\n  justify-content: center;\n}\n\n._2IsWSG1 {\n  justify-content: space-around;\n}\n\n.Pv1eK2A {\n  justify-content: space-between;\n}\n\n._3R1Yytl {\n  align-items: center;\n}\n\n.iFSC8GD {\n  align-items: flex-start;\n}\n\n._1o1D80A {\n  align-items: flex-end;\n}\n\n.Mi-rf-P {\n  align-items: stretch;\n}\n\n._2BVpy1k {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
+      return '/*\n  imported from styles.css \n */\n\n/*\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 - present Instructure, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the "Software"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n._2QQI3Dw {\n  font-family: ' + theme.fontFamily + ';\n  box-sizing: border-box;\n}\n\n.qcqR94G {\n  flex-direction: column;\n}\n\n._29WDzhx {\n  flex-wrap: wrap;\n}\n\n._27AMFvI {\n  justify-content: flex-start;\n}\n\n._3ltBbmp {\n  justify-content: flex-end;\n}\n\n._1qeQOk9 {\n  justify-content: center;\n}\n\n._2IsWSG1 {\n  justify-content: space-around;\n}\n\n.Pv1eK2A {\n  justify-content: space-between;\n}\n\n._3R1Yytl {\n  align-items: center;\n}\n\n.iFSC8GD {\n  align-items: flex-start;\n}\n\n._1o1D80A {\n  align-items: flex-end;\n}\n\n.Mi-rf-P {\n  align-items: stretch;\n}\n\n._2BVpy1k {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
     };
@@ -61,4 +61,2 @@
   'root': '_2QQI3Dw',
-  'flex': '_2RfhTuJ',
-  'inline': 'R2GbM1e',
   'column': 'qcqR94G',
@@ -129,15 +127,15 @@ 'wrapItems': '_29WDzhx',
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.flex, !inline), _defineProperty(_classes, styles.inline, inline), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.column, direction === 'column'), _defineProperty(_classes, styles['justifyItems--' + justifyItems], true), _defineProperty(_classes, styles['alignItems--' + alignItems], true), _defineProperty(_classes, styles.wrapItems, wrapItems), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.column, direction === 'column'), _defineProperty(_classes, styles['justifyItems--' + justifyItems], true), _defineProperty(_classes, styles['alignItems--' + alignItems], true), _defineProperty(_classes, styles.wrapItems, wrapItems), _classes);
 
-      var style = { width: width, height: height };
-
       return React.createElement(
-        Container,
+        View,
         Object.assign({}, props, {
           className: classnames(classes),
-          style: style,
           as: as,
-          textAlign: textAlign,
+          display: inline ? 'inline-flex' : 'flex',
+          width: width,
+          height: height,
           margin: margin,
-          padding: padding
+          padding: padding,
+          textAlign: textAlign
         }),
@@ -168,7 +166,7 @@ this.renderChildren()
   */
-  height: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
   * Sets the width of the component's container (optional)
   */
-  width: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inline: PropTypes.bool,
@@ -175,0 +173,0 @@ textAlign: PropTypes.oneOf(['start', 'center', 'end']),

es/components/Media/index.js

@@ -45,3 +45,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-import Container from '@instructure/ui-container/lib/components/Container';
+import View from '../View';
 
@@ -92,7 +92,7 @@ var styles = {
       return React.createElement(
-        Container,
+        View,
         Object.assign({}, props, classes, {
           as: 'figure',
           margin: this.props.margin,
-          size: this.props.size
+          maxWidth: this.theme[this.props.size]
         }),
@@ -99,0 +99,0 @@ React.createElement(

es/components/Media/theme.js

@@ -28,3 +28,4 @@ /*
       spacing = _ref.spacing,
-      typography = _ref.typography;
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
 
@@ -45,3 +46,7 @@ return {
     descriptionFontWeight: typography.fontWeightNormal,
-    descriptionLineHeight: typography.lineHeightCondensed
+    descriptionLineHeight: typography.lineHeightCondensed,
+
+    small: breakpoints.small,
+    medium: breakpoints.medium,
+    large: breakpoints.large
   };
@@ -48,0 +53,0 @@ }

es/components/View/index.js

@@ -42,8 +42,5 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import themeable from '@instructure/ui-themeable';
-import { convertRtlShorthandCorners, convertRtlShorthandEdges } from '@instructure/ui-themeable/lib/utils/convertRtlShorthand';
 import getShorthandPropValue from '@instructure/ui-themeable/lib/utils/getShorthandPropValue';
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes';
 
-import getTextDirection from '@instructure/ui-i18n/lib/utils/getTextDirection';
-
 import warning from '@instructure/ui-utils/lib/warning';
@@ -54,3 +51,3 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes';
 import getElementType from '@instructure/ui-utils/lib/react/getElementType';
-import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
+import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 
@@ -60,3 +57,3 @@ var styles = {
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._6q8Mxga {\n  box-sizing: border-box;\n  font-size: ' + theme.fontSize + ';\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  border-style: ' + theme.borderStyle + ';\n}\n\n.BYp-jPW {\n  display: block;\n}\n\n.ChHxxOF {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._3lRBJhv {\n  text-align: left;\n}\n\nhtml[dir="rtl"] ._3lRBJhv {\n  text-align: right;\n}\n\n._2XkSl_k {\n  display: flex;\n}\n\n._3_QvTCJ {\n  display: inline-flex;\n}\n\n._2F6zZeL {\n  text-align: center;\n}\n\n._3Fq2ues {\n  text-align: right;\n}\n\nhtml[dir="rtl"] ._3Fq2ues {\n  text-align: left;\n}\n\n._2NuNYOw {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n\n._3MhT6PY {\n  color: ' + theme.color + ';\n  background: ' + theme.background + ';\n  border-color: ' + theme.borderColor + ';\n}\n\n._2UXeFCj {\n  color: ' + theme.colorInverse + ';\n  background: ' + theme.backgroundInverse + ';\n  border-color: ' + theme.borderColorInverse + ';\n}\n\n.hfX7V3B {\n  max-width: ' + theme.xSmallMaxWidth + ';\n}\n\n._2B6-l5P {\n  max-width: ' + theme.smallMaxWidth + ';\n}\n\n._35nQT03 {\n  max-width: ' + theme.mediumMaxWidth + ';\n}\n\n._1laC_KJ {\n  max-width: ' + theme.largeMaxWidth + ';\n}\n\n.Wsn6FxC {\n  max-width: 100vw;\n}\n';
+      return '/*  imported from styles.css  */\n\n._6q8Mxga {\n  box-sizing: border-box;\n}\n\n.BYp-jPW {\n  display: block;\n}\n\n.ChHxxOF {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._2XkSl_k {\n  display: flex;\n}\n\n._3_QvTCJ {\n  display: inline-flex;\n}\n\n._3lRBJhv {\n  text-align: left;\n}\n\nhtml[dir="rtl"] ._3lRBJhv {\n  text-align: right;\n}\n\n._2F6zZeL {\n  text-align: center;\n}\n\n._3Fq2ues {\n  text-align: right;\n}\n\nhtml[dir="rtl"] ._3Fq2ues {\n  text-align: left;\n}\n\n._2NuNYOw {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n\n.iOrq0-P {\n  border-style: ' + theme.borderStyle + ';\n  border-color: ' + theme.borderColor + ';\n}\n\n.iOrq0-P._2UXeFCj {\n    border-color: ' + theme.borderColorInverse + ';\n  }\n\n._3MhT6PY {\n  color: ' + theme.color + ';\n  background: ' + theme.background + ';\n}\n\n._2UXeFCj {\n  color: ' + theme.colorInverse + ';\n  background: ' + theme.backgroundInverse + ';\n}\n\n.hfX7V3B {\n  max-width: ' + theme.xSmallMaxWidth + ';\n}\n\n._2B6-l5P {\n  max-width: ' + theme.smallMaxWidth + ';\n}\n\n._35nQT03 {\n  max-width: ' + theme.mediumMaxWidth + ';\n}\n\n._1laC_KJ {\n  max-width: ' + theme.largeMaxWidth + ';\n}\n\n.Wsn6FxC {\n  max-width: 100vw;\n}\n';
     };
@@ -69,10 +66,11 @@
   'display--inline-block': 'ChHxxOF',
-  'textAlign--start': '_3lRBJhv',
   'display--flex': '_2XkSl_k',
   'display--inline-flex': '_3_QvTCJ',
+  'textAlign--start': '_3lRBJhv',
   'textAlign--center': '_2F6zZeL',
   'textAlign--end': '_3Fq2ues',
   'debug': '_2NuNYOw',
+  'border': 'iOrq0-P',
+  'background--inverse': '_2UXeFCj',
   'background--default': '_3MhT6PY',
-  'background--inverse': '_2UXeFCj',
   'size--x-small': 'hfX7V3B',
@@ -110,7 +108,2 @@ 'size--small': '_2B6-l5P',
     _this.verifySpanMargin(props);
-
-    _this.state = {
-      dir: 'ltr'
-    };
-
     _this._element = null;
@@ -121,9 +114,2 @@ return _this;
   _createClass(View, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setState({
-        dir: getTextDirection(this._element)
-      });
-    }
-  }, {
     key: 'componentWillReceiveProps',
@@ -169,4 +155,4 @@ value: function componentWillReceiveProps(nextProps) {
         Object.assign({}, omitProps(this.props, View.propTypes), {
-          className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.debug, debug), _defineProperty(_classnames, styles['textAlign--' + textAlign], textAlign), _defineProperty(_classnames, styles['background--' + background], background), _defineProperty(_classnames, styles['display--' + display], display && display !== 'auto'), _defineProperty(_classnames, styles['size--' + size], size && size !== 'auto'), _defineProperty(_classnames, className, className), _classnames)),
-          style: Object.assign({}, this.positionStyle, this.spacingStyle, this.borderStyle, this.shadowStyle, {
+          className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, this.hasBorder), _defineProperty(_classnames, styles.debug, debug), _defineProperty(_classnames, styles['textAlign--' + textAlign], textAlign), _defineProperty(_classnames, styles['background--' + background], background), _defineProperty(_classnames, styles['display--' + display], display && display !== 'auto'), _defineProperty(_classnames, styles['size--' + size], size && size !== 'auto'), _defineProperty(_classnames, className, className), _classnames)),
+          style: Object.assign({}, this.spacingStyle, this.borderStyle, this.shadowStyle, {
             width: width,
@@ -178,3 +164,3 @@ height: height,
             maxHeight: maxHeight
-          }),
+          }, this.styleProps),
           ref: this.handleElementRef
@@ -191,2 +177,9 @@ }),
   }, {
+    key: 'hasBorder',
+    get: function get() {
+      var borderWidth = this.props.borderWidth;
+
+      return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
+    }
+  }, {
     key: 'borderStyle',
@@ -198,8 +191,8 @@ get: function get() {
 
+      // TODO: Restore once we get a fixed direction for RTL support
+      // if (dir === 'rtl') {
+      //   borderRadius = convertRtlShorthandCorners(borderRadius)
+      //   borderWidth = convertRtlShorthandEdges(borderWidth)
+      // }
 
-      if (this.state.dir === 'rtl') {
-        borderRadius = convertRtlShorthandCorners(borderRadius);
-        borderWidth = convertRtlShorthandEdges(borderWidth);
-      }
-
       return {
@@ -217,8 +210,8 @@ borderRadius: getShorthandPropValue(this.displayName, this.theme, borderRadius, 'borderRadius'),
 
+      // TODO: Restore once we get a fixed direction for RTL support
+      // if (dir === 'rtl') {
+      //   margin = convertRtlShorthandEdges(margin)
+      //   padding = convertRtlShorthandEdges(padding)
+      // }
 
-      if (this.state.dir === 'rtl') {
-        margin = convertRtlShorthandEdges(margin);
-        padding = convertRtlShorthandEdges(padding);
-      }
-
       return {
@@ -237,12 +230,15 @@ margin: getShorthandPropValue(this.displayName, this.theme, margin, 'margin'),
   }, {
-    key: 'positionStyle',
+    key: 'styleProps',
     get: function get() {
       var style = this.props.style; // eslint-disable-line react/prop-types
 
-      return {
-        position: style && style.position,
-        left: style && style.left,
-        top: style && style.top,
-        transform: style && style.transform
-      };
+      return pickProps(style, {}, [
+      // Position/calculateElementPosition:
+      'top', 'left', 'position', 'transform', 'overflow', 'minWidth', 'minHeight',
+      // Img:
+      'filter',
+      // FlexItem:
+      'flexBasis',
+      // Avatar:
+      'backgroundImage']);
     }
@@ -256,3 +252,3 @@ }]);
   /**
-  * The element to render as the component root
+  * The element to render as the component root, `span` by default
   */
@@ -327,13 +323,25 @@ as: CustomPropTypes.elementType,
 }, _class2.defaultProps = {
-  as: 'span',
-  elementRef: function elementRef(el) {},
   display: 'auto',
-  width: 'auto',
-  height: 'auto',
-  children: null,
-  textAlign: 'start',
-  borderWidth: '0',
-  borderRadius: '0',
-  background: 'transparent',
-  debug: false
+  // `as` will default to type span via getElementType, so for consistency and
+  // compatibility with Container we are leaving it undefined here. Otherwise
+  // it modifies behavior for consuming components because of the logic around
+  // default props in getElementType
+  as: undefined,
+  // textAlign is undefined by default so that View can inherit text alignment
+  // from parents
+  textAlign: undefined,
+  // The following props should be undefined because default values are passed in
+  // as inline styles which break the styling of the consuming components
+  background: undefined,
+  margin: undefined,
+  padding: undefined,
+  height: undefined,
+  width: undefined,
+  maxHeight: undefined,
+  maxWidth: undefined,
+  minHeight: undefined,
+  minWidth: undefined,
+  borderWidth: undefined,
+  borderRadius: undefined,
+  shadow: undefined
 }, _temp)) || _class) || _class);
@@ -340,0 +348,0 @@

es/components/View/theme.js

@@ -38,6 +38,2 @@ /*
   return Object.assign({
-    fontSize: typography.fontSizeMedium,
-    fontFamily: typography.fontFamily,
-    fontWeight: typography.fontWeightNormal,
-
     color: colors.oxford,
@@ -44,0 +40,0 @@ background: colors.white,

es/utils/calculateElementPosition.js

@@ -63,2 +63,5 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
   if (!element || options.placement === 'offscreen') {
+    // hide offscreen content at the bottom of the DOM from screenreaders
+    // unless content is contained somewhere else
+    var hide = !options.container && element;
     return {
@@ -69,3 +72,4 @@ placement: options.placement,
         overflow: 'hidden',
-        position: 'absolute'
+        position: 'absolute',
+        display: hide ? 'none' : null
       }
@@ -72,0 +76,0 @@ };

lib/components/DrawerLayout/DrawerTray/index.js

@@ -46,6 +46,2 @@ 'use strict';
 
-var _Dialog = require('@instructure/ui-a11y/lib/components/Dialog');
-
-var _Dialog2 = _interopRequireDefault(_Dialog);
-
 var _BaseTransition = require('@instructure/ui-motion/lib/components/Transition/BaseTransition');
@@ -69,2 +65,6 @@
 
+var _getDisplayName = require('@instructure/ui-utils/lib/react/getDisplayName');
+
+var _getDisplayName2 = _interopRequireDefault(_getDisplayName);
+
 var _createChainedFunction = require('@instructure/ui-utils/lib/createChainedFunction');
@@ -78,2 +78,6 @@
 
+var _warning = require('@instructure/ui-utils/lib/warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
 var _theme = require('./theme');
@@ -176,2 +180,4 @@
       }
+
+      (0, _warning2.default)(this.props.render || this.props.children, '[' + (0, _getDisplayName2.default)(DrawerTray) + '] must have either a `render` prop or `children` prop.');
     }
@@ -225,2 +231,3 @@ }, {
           open = _props2.open,
+          label = _props2.label,
           border = _props2.border,
@@ -231,24 +238,9 @@ placement = _props2.placement,
           onExit = _props2.onExit,
-          children = _props2.children;
+          children = _props2.children,
+          render = _props2.render;
 
 
       var duration = (0, _ms2.default)(this.theme.duration);
+      var renderFunc = children || render;
 
-      var trayContent = children;
-
-      // If we render the dialog before the content is positioned, we get
-      // jolted offscreen when the default focus element gets focus
-      if (this.state.positioned) {
-        trayContent = _react2.default.createElement(
-          _Dialog2.default,
-          Object.assign({}, (0, _passthroughProps.pickProps)(this.props, _Dialog2.default.propTypes), {
-            open: true,
-            shouldCloseOnDocumentClick: false,
-            shouldReturnFocus: true,
-            role: 'region'
-          }),
-          trayContent
-        );
-      }
-
       return _react2.default.createElement(
@@ -274,5 +266,7 @@ _BaseTransition2.default,
             ref: this.handleContentRef,
+            role: 'region',
+            'aria-label': label,
             className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, border), _defineProperty(_classnames, styles['placement--' + placement], true), _classnames))
           },
-          trayContent
+          renderFunc(this.state.positioned)
         )
@@ -293,5 +287,13 @@ );
   label: _propTypes2.default.string.isRequired,
+  /**
+   * Function returning content for `<DrawerTray />` which is called with a single boolean
+   * argument indicating when the tray has finished positioning.
+   */
+  children: _propTypes2.default.func,
+  /**
+   * Function returning content for `<DrawerTray />`  which is called with a single boolean
+   * argument indicating when the tray has finished positioning.
+   */
+  render: _propTypes2.default.func,
 
-  children: _propTypes2.default.node,
-
   /**
@@ -327,12 +329,2 @@ * Placement of the `<DrawerTray />`
   /**
-   * Should `<DrawerTray />` contain focus
-   */
-  shouldContainFocus: _propTypes2.default.bool,
-
-  /**
-   * An element or a function returning an element to focus by default
-   */
-  defaultFocusElement: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
-
-  /**
    * Callback fired before the <DrawerTray /> transitions in
@@ -368,10 +360,4 @@ */
    */
-  contentRef: _propTypes2.default.func,
-
-  /**
-   * Function that returns the DIV where screenreader alerts will be placed.
-   */
-  liveRegion: _propTypes2.default.func
+  contentRef: _propTypes2.default.func
 }, _class2.defaultProps = {
-  children: null,
   open: false,
@@ -383,4 +369,2 @@ onOpen: function onOpen() {},
   placement: 'start',
-  shouldContainFocus: true,
-  defaultFocusElement: null,
   onEnter: function onEnter() {},
@@ -387,0 +371,0 @@ onEntering: function onEntering() {},

lib/components/Flex/FlexItem/index.js

@@ -60,5 +60,5 @@ 'use strict';
 
-var _Container = require('@instructure/ui-container/lib/components/Container');
+var _View = require('../../View');
 
-var _Container2 = _interopRequireDefault(_Container);
+var _View2 = _interopRequireDefault(_View);
 
@@ -82,3 +82,3 @@ var _theme = require('./theme');
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._2CNXCzJ {\n  box-sizing: border-box;\n  min-width: 0.0625rem;\n\n  /* initial value is 1, but we want 0 as our default,\n  so users can opt in to shrink like they do grow */\n  flex-shrink: 0;\n}\n\n._3RdXVIz {\n  /* useful defaults for column layouts */\n  width: 100%;\n  overflow-y: auto;\n}\n\n._3bbPwtW {\n  align-self: flex-start;\n}\n\n.OKGbLDF {\n  align-self: flex-end;\n}\n\n._2BsJ1kI {\n  align-self: center;\n}\n\n._2EOm21Q {\n  align-self: stretch;\n}\n\n._apYc09 {\n  flex-grow: 1;\n}\n\n._2N9AXaf {\n  flex-shrink: 1;\n}\n\n._3giPai7 {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
+      return '/*  imported from styles.css  */\n\n._2CNXCzJ {\n  box-sizing: border-box;\n  min-width: 0.0625rem;\n\n  /* initial value is 1, but we want 0 as our default,\n  so users can opt in to shrink like they do grow */\n  flex-shrink: 0;\n}\n\n._3RdXVIz {\n  /* useful defaults for column layouts */\n  overflow-y: auto;\n}\n\n._3bbPwtW {\n  align-self: flex-start;\n}\n\n.OKGbLDF {\n  align-self: flex-end;\n}\n\n._2BsJ1kI {\n  align-self: center;\n}\n\n._2EOm21Q {\n  align-self: stretch;\n}\n\n._apYc09 {\n  flex-grow: 1;\n}\n\n._2N9AXaf {\n  flex-shrink: 1;\n}\n\n._3giPai7 {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
     };
@@ -135,17 +135,20 @@
 
+      var dirColumn = direction === 'column';
+
       var style = {
-        flexBasis: size,
-        minWidth: direction === "row" ? size : null,
-        minHeight: direction === "column" ? size : null
+        flexBasis: size
       };
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.grow, grow), _defineProperty(_classes, styles.shrink, shrink), _defineProperty(_classes, styles['align--' + align], align), _defineProperty(_classes, styles.column, direction === 'column'), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.grow, grow), _defineProperty(_classes, styles.shrink, shrink), _defineProperty(_classes, styles['align--' + align], align), _defineProperty(_classes, styles.column, dirColumn), _classes);
 
       return _react2.default.createElement(
-        _Container2.default,
+        _View2.default,
         Object.assign({}, props, {
           className: (0, _classnames2.default)(classes),
           style: style,
+          as: as,
+          width: dirColumn ? '100%' : undefined,
+          minHeight: dirColumn ? size : undefined,
+          minWidth: direction === 'row' ? size : undefined,
           textAlign: textAlign,
-          as: as,
           margin: margin,
@@ -152,0 +155,0 @@ padding: padding

lib/components/Flex/index.js

@@ -73,5 +73,5 @@ 'use strict';
 
-var _Container = require('@instructure/ui-container/lib/components/Container');
+var _View = require('../View');
 
-var _Container2 = _interopRequireDefault(_Container);
+var _View2 = _interopRequireDefault(_View);
 
@@ -97,3 +97,3 @@ var _FlexItem2 = _interopRequireDefault(_FlexItem);
     var tmpl = function tmpl() {
-      return '/*\n  imported from styles.css \n */\n\n/*\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 - present Instructure, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the "Software"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n._2QQI3Dw {\n  font-family: ' + theme.fontFamily + ';\n  box-sizing: border-box;\n}\n\n._2RfhTuJ {\n  display: flex;\n}\n\n.R2GbM1e {\n  display: inline-flex;\n}\n\n.qcqR94G {\n  flex-direction: column;\n}\n\n._29WDzhx {\n  flex-wrap: wrap;\n}\n\n._27AMFvI {\n  justify-content: flex-start;\n}\n\n._3ltBbmp {\n  justify-content: flex-end;\n}\n\n._1qeQOk9 {\n  justify-content: center;\n}\n\n._2IsWSG1 {\n  justify-content: space-around;\n}\n\n.Pv1eK2A {\n  justify-content: space-between;\n}\n\n._3R1Yytl {\n  align-items: center;\n}\n\n.iFSC8GD {\n  align-items: flex-start;\n}\n\n._1o1D80A {\n  align-items: flex-end;\n}\n\n.Mi-rf-P {\n  align-items: stretch;\n}\n\n._2BVpy1k {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
+      return '/*\n  imported from styles.css \n */\n\n/*\n * The MIT License (MIT)\n *\n * Copyright (c) 2015 - present Instructure, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the "Software"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n._2QQI3Dw {\n  font-family: ' + theme.fontFamily + ';\n  box-sizing: border-box;\n}\n\n.qcqR94G {\n  flex-direction: column;\n}\n\n._29WDzhx {\n  flex-wrap: wrap;\n}\n\n._27AMFvI {\n  justify-content: flex-start;\n}\n\n._3ltBbmp {\n  justify-content: flex-end;\n}\n\n._1qeQOk9 {\n  justify-content: center;\n}\n\n._2IsWSG1 {\n  justify-content: space-around;\n}\n\n.Pv1eK2A {\n  justify-content: space-between;\n}\n\n._3R1Yytl {\n  align-items: center;\n}\n\n.iFSC8GD {\n  align-items: flex-start;\n}\n\n._1o1D80A {\n  align-items: flex-end;\n}\n\n.Mi-rf-P {\n  align-items: stretch;\n}\n\n._2BVpy1k {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n';
     };
@@ -104,4 +104,2 @@
   'root': '_2QQI3Dw',
-  'flex': '_2RfhTuJ',
-  'inline': 'R2GbM1e',
   'column': 'qcqR94G',
@@ -171,15 +169,15 @@ 'wrapItems': '_29WDzhx',
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.flex, !inline), _defineProperty(_classes, styles.inline, inline), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.column, direction === 'column'), _defineProperty(_classes, styles['justifyItems--' + justifyItems], true), _defineProperty(_classes, styles['alignItems--' + alignItems], true), _defineProperty(_classes, styles.wrapItems, wrapItems), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles.visualDebug, visualDebug), _defineProperty(_classes, styles.column, direction === 'column'), _defineProperty(_classes, styles['justifyItems--' + justifyItems], true), _defineProperty(_classes, styles['alignItems--' + alignItems], true), _defineProperty(_classes, styles.wrapItems, wrapItems), _classes);
 
-      var style = { width: width, height: height };
-
       return _react2.default.createElement(
-        _Container2.default,
+        _View2.default,
         Object.assign({}, props, {
           className: (0, _classnames2.default)(classes),
-          style: style,
           as: as,
-          textAlign: textAlign,
+          display: inline ? 'inline-flex' : 'flex',
+          width: width,
+          height: height,
           margin: margin,
-          padding: padding
+          padding: padding,
+          textAlign: textAlign
         }),
@@ -210,7 +208,7 @@ this.renderChildren()
   */
-  height: _propTypes2.default.string,
+  height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   /**
   * Sets the width of the component's container (optional)
   */
-  width: _propTypes2.default.string,
+  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   inline: _propTypes2.default.bool,
@@ -217,0 +215,0 @@ textAlign: _propTypes2.default.oneOf(['start', 'center', 'end']),

lib/components/Media/index.js

@@ -55,5 +55,5 @@ 'use strict';
 
-var _Container = require('@instructure/ui-container/lib/components/Container');
+var _View = require('../View');
 
-var _Container2 = _interopRequireDefault(_Container);
+var _View2 = _interopRequireDefault(_View);
 
@@ -117,7 +117,7 @@ var _theme = require('./theme');
       return _react2.default.createElement(
-        _Container2.default,
+        _View2.default,
         Object.assign({}, props, classes, {
           as: 'figure',
           margin: this.props.margin,
-          size: this.props.size
+          maxWidth: this.theme[this.props.size]
         }),
@@ -124,0 +124,0 @@ _react2.default.createElement(

lib/components/Media/theme.js

@@ -34,3 +34,4 @@ 'use strict';
       spacing = _ref.spacing,
-      typography = _ref.typography;
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
 
@@ -51,3 +52,7 @@ return {
     descriptionFontWeight: typography.fontWeightNormal,
-    descriptionLineHeight: typography.lineHeightCondensed
+    descriptionLineHeight: typography.lineHeightCondensed,
+
+    small: breakpoints.small,
+    medium: breakpoints.medium,
+    large: breakpoints.large
   };
@@ -54,0 +59,0 @@ }

lib/components/View/index.js

@@ -49,4 +49,2 @@ 'use strict';
 
-var _convertRtlShorthand = require('@instructure/ui-themeable/lib/utils/convertRtlShorthand');
-
 var _getShorthandPropValue = require('@instructure/ui-themeable/lib/utils/getShorthandPropValue');
@@ -60,6 +58,2 @@
 
-var _getTextDirection = require('@instructure/ui-i18n/lib/utils/getTextDirection');
-
-var _getTextDirection2 = _interopRequireDefault(_getTextDirection);
-
 var _warning = require('@instructure/ui-utils/lib/warning');
@@ -104,3 +98,3 @@
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._6q8Mxga {\n  box-sizing: border-box;\n  font-size: ' + theme.fontSize + ';\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  border-style: ' + theme.borderStyle + ';\n}\n\n.BYp-jPW {\n  display: block;\n}\n\n.ChHxxOF {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._3lRBJhv {\n  text-align: left;\n}\n\nhtml[dir="rtl"] ._3lRBJhv {\n  text-align: right;\n}\n\n._2XkSl_k {\n  display: flex;\n}\n\n._3_QvTCJ {\n  display: inline-flex;\n}\n\n._2F6zZeL {\n  text-align: center;\n}\n\n._3Fq2ues {\n  text-align: right;\n}\n\nhtml[dir="rtl"] ._3Fq2ues {\n  text-align: left;\n}\n\n._2NuNYOw {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n\n._3MhT6PY {\n  color: ' + theme.color + ';\n  background: ' + theme.background + ';\n  border-color: ' + theme.borderColor + ';\n}\n\n._2UXeFCj {\n  color: ' + theme.colorInverse + ';\n  background: ' + theme.backgroundInverse + ';\n  border-color: ' + theme.borderColorInverse + ';\n}\n\n.hfX7V3B {\n  max-width: ' + theme.xSmallMaxWidth + ';\n}\n\n._2B6-l5P {\n  max-width: ' + theme.smallMaxWidth + ';\n}\n\n._35nQT03 {\n  max-width: ' + theme.mediumMaxWidth + ';\n}\n\n._1laC_KJ {\n  max-width: ' + theme.largeMaxWidth + ';\n}\n\n.Wsn6FxC {\n  max-width: 100vw;\n}\n';
+      return '/*  imported from styles.css  */\n\n._6q8Mxga {\n  box-sizing: border-box;\n}\n\n.BYp-jPW {\n  display: block;\n}\n\n.ChHxxOF {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._2XkSl_k {\n  display: flex;\n}\n\n._3_QvTCJ {\n  display: inline-flex;\n}\n\n._3lRBJhv {\n  text-align: left;\n}\n\nhtml[dir="rtl"] ._3lRBJhv {\n  text-align: right;\n}\n\n._2F6zZeL {\n  text-align: center;\n}\n\n._3Fq2ues {\n  text-align: right;\n}\n\nhtml[dir="rtl"] ._3Fq2ues {\n  text-align: left;\n}\n\n._2NuNYOw {\n  outline: 0.0625rem dashed ' + theme.debugOutlineColor + ';\n}\n\n.iOrq0-P {\n  border-style: ' + theme.borderStyle + ';\n  border-color: ' + theme.borderColor + ';\n}\n\n.iOrq0-P._2UXeFCj {\n    border-color: ' + theme.borderColorInverse + ';\n  }\n\n._3MhT6PY {\n  color: ' + theme.color + ';\n  background: ' + theme.background + ';\n}\n\n._2UXeFCj {\n  color: ' + theme.colorInverse + ';\n  background: ' + theme.backgroundInverse + ';\n}\n\n.hfX7V3B {\n  max-width: ' + theme.xSmallMaxWidth + ';\n}\n\n._2B6-l5P {\n  max-width: ' + theme.smallMaxWidth + ';\n}\n\n._35nQT03 {\n  max-width: ' + theme.mediumMaxWidth + ';\n}\n\n._1laC_KJ {\n  max-width: ' + theme.largeMaxWidth + ';\n}\n\n.Wsn6FxC {\n  max-width: 100vw;\n}\n';
     };
@@ -113,10 +107,11 @@
   'display--inline-block': 'ChHxxOF',
-  'textAlign--start': '_3lRBJhv',
   'display--flex': '_2XkSl_k',
   'display--inline-flex': '_3_QvTCJ',
+  'textAlign--start': '_3lRBJhv',
   'textAlign--center': '_2F6zZeL',
   'textAlign--end': '_3Fq2ues',
   'debug': '_2NuNYOw',
+  'border': 'iOrq0-P',
+  'background--inverse': '_2UXeFCj',
   'background--default': '_3MhT6PY',
-  'background--inverse': '_2UXeFCj',
   'size--x-small': 'hfX7V3B',
@@ -153,7 +148,2 @@ 'size--small': '_2B6-l5P',
     _this.verifySpanMargin(props);
-
-    _this.state = {
-      dir: 'ltr'
-    };
-
     _this._element = null;
@@ -164,9 +154,2 @@ return _this;
   _createClass(View, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.setState({
-        dir: (0, _getTextDirection2.default)(this._element)
-      });
-    }
-  }, {
     key: 'componentWillReceiveProps',
@@ -212,4 +195,4 @@ value: function componentWillReceiveProps(nextProps) {
         Object.assign({}, (0, _passthroughProps.omitProps)(this.props, View.propTypes), {
-          className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.debug, debug), _defineProperty(_classnames, styles['textAlign--' + textAlign], textAlign), _defineProperty(_classnames, styles['background--' + background], background), _defineProperty(_classnames, styles['display--' + display], display && display !== 'auto'), _defineProperty(_classnames, styles['size--' + size], size && size !== 'auto'), _defineProperty(_classnames, className, className), _classnames)),
-          style: Object.assign({}, this.positionStyle, this.spacingStyle, this.borderStyle, this.shadowStyle, {
+          className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles.border, this.hasBorder), _defineProperty(_classnames, styles.debug, debug), _defineProperty(_classnames, styles['textAlign--' + textAlign], textAlign), _defineProperty(_classnames, styles['background--' + background], background), _defineProperty(_classnames, styles['display--' + display], display && display !== 'auto'), _defineProperty(_classnames, styles['size--' + size], size && size !== 'auto'), _defineProperty(_classnames, className, className), _classnames)),
+          style: Object.assign({}, this.spacingStyle, this.borderStyle, this.shadowStyle, {
             width: width,
@@ -221,3 +204,3 @@ height: height,
             maxHeight: maxHeight
-          }),
+          }, this.styleProps),
           ref: this.handleElementRef
@@ -234,2 +217,9 @@ }),
   }, {
+    key: 'hasBorder',
+    get: function get() {
+      var borderWidth = this.props.borderWidth;
+
+      return borderWidth && borderWidth !== '0' && borderWidth !== 'none';
+    }
+  }, {
     key: 'borderStyle',
@@ -241,8 +231,8 @@ get: function get() {
 
+      // TODO: Restore once we get a fixed direction for RTL support
+      // if (dir === 'rtl') {
+      //   borderRadius = convertRtlShorthandCorners(borderRadius)
+      //   borderWidth = convertRtlShorthandEdges(borderWidth)
+      // }
 
-      if (this.state.dir === 'rtl') {
-        borderRadius = (0, _convertRtlShorthand.convertRtlShorthandCorners)(borderRadius);
-        borderWidth = (0, _convertRtlShorthand.convertRtlShorthandEdges)(borderWidth);
-      }
-
       return {
@@ -260,8 +250,8 @@ borderRadius: (0, _getShorthandPropValue2.default)(this.displayName, this.theme, borderRadius, 'borderRadius'),
 
+      // TODO: Restore once we get a fixed direction for RTL support
+      // if (dir === 'rtl') {
+      //   margin = convertRtlShorthandEdges(margin)
+      //   padding = convertRtlShorthandEdges(padding)
+      // }
 
-      if (this.state.dir === 'rtl') {
-        margin = (0, _convertRtlShorthand.convertRtlShorthandEdges)(margin);
-        padding = (0, _convertRtlShorthand.convertRtlShorthandEdges)(padding);
-      }
-
       return {
@@ -280,12 +270,15 @@ margin: (0, _getShorthandPropValue2.default)(this.displayName, this.theme, margin, 'margin'),
   }, {
-    key: 'positionStyle',
+    key: 'styleProps',
     get: function get() {
       var style = this.props.style; // eslint-disable-line react/prop-types
 
-      return {
-        position: style && style.position,
-        left: style && style.left,
-        top: style && style.top,
-        transform: style && style.transform
-      };
+      return (0, _passthroughProps.pickProps)(style, {}, [
+      // Position/calculateElementPosition:
+      'top', 'left', 'position', 'transform', 'overflow', 'minWidth', 'minHeight',
+      // Img:
+      'filter',
+      // FlexItem:
+      'flexBasis',
+      // Avatar:
+      'backgroundImage']);
     }
@@ -299,3 +292,3 @@ }]);
   /**
-  * The element to render as the component root
+  * The element to render as the component root, `span` by default
   */
@@ -370,14 +363,26 @@ as: _CustomPropTypes2.default.elementType,
 }, _class2.defaultProps = {
-  as: 'span',
-  elementRef: function elementRef(el) {},
   display: 'auto',
-  width: 'auto',
-  height: 'auto',
-  children: null,
-  textAlign: 'start',
-  borderWidth: '0',
-  borderRadius: '0',
-  background: 'transparent',
-  debug: false
+  // `as` will default to type span via getElementType, so for consistency and
+  // compatibility with Container we are leaving it undefined here. Otherwise
+  // it modifies behavior for consuming components because of the logic around
+  // default props in getElementType
+  as: undefined,
+  // textAlign is undefined by default so that View can inherit text alignment
+  // from parents
+  textAlign: undefined,
+  // The following props should be undefined because default values are passed in
+  // as inline styles which break the styling of the consuming components
+  background: undefined,
+  margin: undefined,
+  padding: undefined,
+  height: undefined,
+  width: undefined,
+  maxHeight: undefined,
+  maxWidth: undefined,
+  minHeight: undefined,
+  minWidth: undefined,
+  borderWidth: undefined,
+  borderRadius: undefined,
+  shadow: undefined
 }, _temp)) || _class) || _class);
 exports.default = View;

lib/components/View/theme.js

@@ -23,6 +23,2 @@ 'use strict';
   return Object.assign({
-    fontSize: typography.fontSizeMedium,
-    fontFamily: typography.fontFamily,
-    fontWeight: typography.fontWeightNormal,
-
     color: colors.oxford,
@@ -29,0 +25,0 @@ background: colors.white,

lib/utils/calculateElementPosition.js

@@ -93,2 +93,5 @@ 'use strict';
   if (!element || options.placement === 'offscreen') {
+    // hide offscreen content at the bottom of the DOM from screenreaders
+    // unless content is contained somewhere else
+    var hide = !options.container && element;
     return {
@@ -99,3 +102,4 @@ placement: options.placement,
         overflow: 'hidden',
-        position: 'absolute'
+        position: 'absolute',
+        display: hide ? 'none' : null
       }
@@ -102,0 +106,0 @@ };

package.json

 {
   "name": "@instructure/ui-layout",
-  "version": "5.4.0",
+  "version": "5.4.1-dev.0",
   "description": "A UI component library made by Instructure Inc.",
@@ -25,4 +25,4 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-presets": "^5.4.0",
-    "@instructure/ui-themes": "^5.4.0",
+    "@instructure/ui-presets": "^5.4.1-dev.0",
+    "@instructure/ui-themes": "^5.4.1-dev.0",
     "postcss-mixins": "6.2.0",
@@ -34,9 +34,7 @@ "postcss-simple-vars": "4.1.0",
   "dependencies": {
-    "@instructure/ui-a11y": "^5.4.0",
-    "@instructure/ui-container": "^5.4.0",
-    "@instructure/ui-i18n": "^5.4.0",
-    "@instructure/ui-motion": "^5.4.0",
-    "@instructure/ui-portal": "^5.4.0",
-    "@instructure/ui-themeable": "^5.4.0",
-    "@instructure/ui-utils": "^5.4.0",
+    "@instructure/ui-i18n": "^5.4.1-dev.0",
+    "@instructure/ui-motion": "^5.4.1-dev.0",
+    "@instructure/ui-portal": "^5.4.1-dev.0",
+    "@instructure/ui-themeable": "^5.4.1-dev.0",
+    "@instructure/ui-utils": "^5.4.1-dev.0",
     "classnames": "^2.2.5",
@@ -43,0 +41,0 @@ "prop-types": "^15.5.10"

src/components/DrawerLayout/DrawerTray/index.js

@@ -28,3 +28,2 @@ /*
 
-import Dialog from '@instructure/ui-a11y/lib/components/Dialog'
 import BaseTransition from '@instructure/ui-motion/lib/components/Transition/BaseTransition'
@@ -36,4 +35,6 @@
 import getClassList from '@instructure/ui-utils/lib/dom/getClassList'
+import getDisplayName from '@instructure/ui-utils/lib/react/getDisplayName'
 import createChainedFunction from '@instructure/ui-utils/lib/createChainedFunction'
 import ms from '@instructure/ui-utils/lib/ms'
+import warning from '@instructure/ui-utils/lib/warning'
 
@@ -53,5 +54,13 @@ import styles from './styles.css'
     label: PropTypes.string.isRequired,
+    /**
+     * Function returning content for `<DrawerTray />` which is called with a single boolean
+     * argument indicating when the tray has finished positioning.
+     */
+    children: PropTypes.func,
+    /**
+     * Function returning content for `<DrawerTray />`  which is called with a single boolean
+     * argument indicating when the tray has finished positioning.
+     */
+    render: PropTypes.func,
 
-    children: PropTypes.node,
-
     /**
@@ -87,12 +96,2 @@ * Placement of the `<DrawerTray />`
     /**
-     * Should `<DrawerTray />` contain focus
-     */
-    shouldContainFocus: PropTypes.bool,
-
-    /**
-     * An element or a function returning an element to focus by default
-     */
-    defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
-    /**
      * Callback fired before the <DrawerTray /> transitions in
@@ -128,12 +127,6 @@ */
      */
-    contentRef: PropTypes.func,
-
-    /**
-     * Function that returns the DIV where screenreader alerts will be placed.
-     */
-    liveRegion: PropTypes.func
+    contentRef: PropTypes.func
   }
 
   static defaultProps = {
-    children: null,
     open: false,
@@ -145,4 +138,2 @@ onOpen: () => {},
     placement: 'start',
-    shouldContainFocus: true,
-    defaultFocusElement: null,
     onEnter: () => {},
@@ -173,2 +164,7 @@ onEntering: () => {},
     }
+
+    warning(
+      (this.props.render || this.props.children),
+      `[${getDisplayName(DrawerTray)}] must have either a \`render\` prop or \`children\` prop.`
+    )
   }
@@ -250,2 +246,3 @@
       open,
+      label,
       border,
@@ -256,25 +253,9 @@ placement,
       onExit,
-      children
+      children,
+      render
     } = this.props
 
     const duration = ms(this.theme.duration)
+    const renderFunc = children || render
 
-    let trayContent = children
-
-    // If we render the dialog before the content is positioned, we get
-    // jolted offscreen when the default focus element gets focus
-    if (this.state.positioned) {
-      trayContent = (
-        <Dialog
-          {...pickProps(this.props, Dialog.propTypes)}
-          open
-          shouldCloseOnDocumentClick={false}
-          shouldReturnFocus
-          role="region"
-        >
-          {trayContent}
-        </Dialog>
-      )
-    }
-
     return (
@@ -298,2 +279,4 @@ <BaseTransition
           ref={this.handleContentRef}
+          role="region"
+          aria-label={label}
           className={classnames({
@@ -305,3 +288,3 @@ [styles.root]: true,
         >
-          {trayContent}
+          {renderFunc(this.state.positioned)}
         </span>
@@ -308,0 +291,0 @@ </BaseTransition>

src/components/DrawerLayout/README.md

@@ -13,2 +13,9 @@ ---
 
+### Rendering Tray Content
+`<DrawerTray />` accepts a `render` function or `children` function which gets passed a single boolean
+argument `positioned`. The `positioned` argument indicates when the tray has finished transitioning.
+When rendering a `Dialog` for accessibility, the `positioned` argument can be used to conditionally
+render the `Dialog` after the `<DrawerTray />` is completely positioned. Otherwise the screen will
+jolt to the side when the `Dialog` receives focus and is yet to transition onscreen.
+
 ```js
@@ -42,3 +49,3 @@ ---
     return (
-      <div style={{height: '25rem'}}>
+      <View height="25rem">
         <DrawerLayout>
@@ -51,19 +58,38 @@ <DrawerTray
             liveRegion={() => document.getElementById('flash-messages')}
-          >
-            <Container
-              as="div"
-              size="x-small"
-              textAlign="center"
-              margin="large auto"
-              padding="small"
-            >
-              {this.renderCloseButton(() => { 
-                this.setState({ open: false }) 
-              })}
-              <Avatar name="foo bar" margin="0 0 small 0" />
-              <Text as="div" size="x-small">
-                Hello from start tray with a small amount of placeholder content
-              </Text>
-            </Container>
-          </DrawerTray>
+            render={(positioned) => {
+              let trayContent = (
+                <View
+                  as="div"
+                  maxWidth="16rem"
+                  textAlign="center"
+                  margin="large auto"
+                  padding="small"
+                >
+                  {this.renderCloseButton(() => { 
+                    this.setState({ open: false }) 
+                  })}
+                  <Avatar name="foo bar" margin="0 0 small 0" />
+                  <Text as="div" size="x-small">
+                    Hello from start tray with a small amount of placeholder content
+                  </Text>
+                </View>
+              )
+
+              if (positioned) {
+                trayContent = (
+                  <Dialog
+                    open
+                    shouldContainFocus
+                    shouldCloseOnDocumentClick={false}
+                    shouldReturnFocus
+                    role="region"
+                  >
+                    {trayContent}
+                  </Dialog>
+                )
+              }
+
+              return trayContent
+            }}
+          />
           <DrawerContent label="Drawer content example">
@@ -96,3 +122,3 @@ <div style={{background: 'white', height: '100%'}}>
         </DrawerLayout>
-      </div>
+      </View>
     )
@@ -137,3 +163,3 @@ }
     return (
-      <div style={{height: '40rem'}}>
+      <View height="40rem">
         <DrawerLayout>
@@ -146,18 +172,37 @@ <DrawerTray
             onDismiss={() => {this.setState({ endOpen: false })}}
-          >
-            <Container
-              as="div"
-              size="medium"
-              textAlign="center"
-              margin="large auto"
-              padding="large"
-            >
-              {this.renderCloseButton(() => { 
-                this.setState({ endOpen: false }) 
-              })}   
-              <Text as="div" size="x-small">
-                Hello from end tray with a good amount of content as well
-              </Text>
-            </Container>
-          </DrawerTray>
+            render={(positioned) => {
+              let trayContent = (
+                <View
+                  as="div"
+                  maxWidth="48rem"
+                  textAlign="center"
+                  margin="large auto"
+                  padding="large"
+                >
+                  {this.renderCloseButton(() => { 
+                    this.setState({ endOpen: false }) 
+                  })}   
+                  <Text as="div" size="x-small">
+                    Hello from end tray with a good amount of content as well
+                  </Text>
+                </View>
+              )
+
+              if (positioned) {
+                trayContent = (
+                  <Dialog
+                    open
+                    shouldContainFocus
+                    shouldCloseOnDocumentClick={false}
+                    shouldReturnFocus
+                    role="region"
+                  >
+                    {trayContent}
+                  </Dialog>
+                )
+              }
+
+              return trayContent
+            }}
+          />
           <DrawerContent label="Drawer content example containing another layout">
@@ -170,19 +215,38 @@ <DrawerLayout>
                 placement="start"
-              >
-                <Container
-                  as="div"
-                  size="x-small"
-                  textAlign="center"
-                  margin="large auto"
-                  padding="small"
-                >
-                  {this.renderCloseButton(() => { 
-                    this.setState({ startOpen: false }) 
-                  })}
-                  <Avatar name="foo bar" margin="0 0 small 0" />
-                  <Text as="div" size="x-small">
-                    Hello from start tray with a small amount of placeholder content
-                  </Text>
-                </Container>
-              </DrawerTray>
+                render={(positioned) => {
+                  let trayContent = (
+                    <View
+                      as="div"
+                      maxWidth="16rem"
+                      textAlign="center"
+                      margin="large auto"
+                      padding="small"
+                    >
+                      {this.renderCloseButton(() => { 
+                        this.setState({ startOpen: false }) 
+                      })}
+                      <Avatar name="foo bar" margin="0 0 small 0" />
+                      <Text as="div" size="x-small">
+                        Hello from start tray with a small amount of placeholder content
+                      </Text>
+                    </View>
+                  )
+
+                  if (positioned) {
+                    trayContent = (
+                      <Dialog
+                        open
+                        shouldContainFocus
+                        shouldCloseOnDocumentClick={false}
+                        shouldReturnFocus
+                        role="region"
+                      >
+                        {trayContent}
+                      </Dialog>
+                    )
+                  }
+
+                  return trayContent
+                }}
+              />
               <DrawerContent label="Drawer content example containing a responsive ">
@@ -237,3 +301,3 @@ <div style={{background: 'white', height: '100%'}}>
         </DrawerLayout>
-      </div>
+      </View>
     )
@@ -240,0 +304,0 @@ }

src/components/Flex/FlexItem/index.js

@@ -34,3 +34,3 @@ /*
 
-import Container from '@instructure/ui-container/lib/components/Container'
+import View from '../../View'
 
@@ -116,6 +116,6 @@ import styles from './styles.css'
 
+   const dirColumn = direction === 'column'
+
    const style = {
-     flexBasis: size,
-     minWidth: (direction === "row") ? size : null,
-     minHeight: (direction === "column") ? size : null
+     flexBasis: size
    }
@@ -129,12 +129,15 @@
      [styles[`align--${align}`]]: align,
-     [styles.column]: direction === 'column'
+     [styles.column]: dirColumn
    }
 
    return (
-     <Container
+     <View
        {...props}
        className={classnames(classes)}
        style={style}
+       as={as}
+       width={dirColumn ? '100%' : undefined}
+       minHeight={dirColumn ? size : undefined}
+       minWidth={direction === 'row' ? size : undefined}
        textAlign={textAlign}
-       as={as}
        margin={margin}
@@ -144,5 +147,5 @@ padding={padding}
        {children}
-     </Container>
+     </View>
    )
   }
 }

src/components/Flex/index.js

@@ -35,3 +35,3 @@ /*
 
-import Container from '@instructure/ui-container/lib/components/Container'
+import View from '../View'
 import FlexItem from './FlexItem'
@@ -65,7 +65,7 @@
     */
-    height: PropTypes.string,
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
     * Sets the width of the component's container (optional)
     */
-    width: PropTypes.string,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     inline: PropTypes.bool,
@@ -137,4 +137,2 @@ textAlign: PropTypes.oneOf(['start', 'center', 'end']),
       [styles.root]: true,
-      [styles.flex]: !inline,
-      [styles.inline]: inline,
       [styles.visualDebug]: visualDebug,
@@ -147,16 +145,16 @@ [styles.column]: direction === 'column',
 
-    const style = { width, height }
-
     return (
-      <Container
+      <View
         {...props}
         className={classnames(classes)}
-        style={style}
         as={as}
-        textAlign={textAlign}
+        display={inline ? 'inline-flex' : 'flex'}
+        width={width}
+        height={height}
         margin={margin}
         padding={padding}
+        textAlign={textAlign}
       >
         {this.renderChildren()}
-      </Container>
+      </View>
     )
@@ -163,0 +161,0 @@ }

src/components/Flex/README.md

@@ -15,2 +15,5 @@ ---
 
+When `direction` is set to `column`, FlexItems are set to handle vertical overflow by scrolling.
+_Note that this means that the overflow of FlexItems is no longer `visible` by default._
+
 ```js
@@ -17,0 +20,0 @@ ---

src/components/Media/index.js

@@ -33,3 +33,3 @@ /*
 
-import Container from '@instructure/ui-container/lib/components/Container'
+import View from '../View'
 
@@ -86,3 +86,3 @@ import styles from './styles.css'
     return (
-      <Container
+      <View
         {...props}
@@ -92,3 +92,3 @@ {...classes}
         margin={this.props.margin}
-        size={this.props.size}
+        maxWidth={this.theme[this.props.size]}
       >
@@ -114,3 +114,3 @@ <div className={styles.figure}>
         </figcaption>
-      </Container>
+      </View>
     )
@@ -117,0 +117,0 @@ }

src/components/Media/theme.js

@@ -25,3 +25,3 @@ /*
 
-export default function generator ({ colors, spacing, typography }) {
+export default function generator ({ colors, spacing, typography, breakpoints }) {
   return {
@@ -41,3 +41,7 @@ fontFamily: typography.fontFamily,
     descriptionFontWeight: typography.fontWeightNormal,
-    descriptionLineHeight: typography.lineHeightCondensed
+    descriptionLineHeight: typography.lineHeightCondensed,
+
+    small: breakpoints.small,
+    medium: breakpoints.medium,
+    large: breakpoints.large
   }
@@ -44,0 +48,0 @@ }

src/components/Position/README.md

@@ -68,3 +68,3 @@ ---
   return (
-    <Container as="div" padding="medium" textAlign="center">
+    <View as="div" padding="medium" textAlign="center">
       <Position
@@ -90,3 +90,3 @@ placement={placement}
       </Position>
-    </Container>
+    </View>
   )
@@ -93,0 +93,0 @@ }

src/components/View/index.js

@@ -30,11 +30,5 @@ /*
 import themeable from '@instructure/ui-themeable'
-import {
-  convertRtlShorthandCorners,
-  convertRtlShorthandEdges
-} from '@instructure/ui-themeable/lib/utils/convertRtlShorthand'
 import getShorthandPropValue from '@instructure/ui-themeable/lib/utils/getShorthandPropValue'
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
 
-import getTextDirection from '@instructure/ui-i18n/lib/utils/getTextDirection'
-
 import warning from '@instructure/ui-utils/lib/warning'
@@ -45,3 +39,3 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 import getElementType from '@instructure/ui-utils/lib/react/getElementType'
-import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
+import { omitProps, pickProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 
@@ -63,3 +57,3 @@ import styles from './styles.css'
     /**
-    * The element to render as the component root
+    * The element to render as the component root, `span` by default
     */
@@ -136,13 +130,25 @@ as: CustomPropTypes.elementType,
   static defaultProps = {
-    as: 'span',
-    elementRef: el => {},
     display: 'auto',
-    width: 'auto',
-    height: 'auto',
-    children: null,
-    textAlign: 'start',
-    borderWidth: '0',
-    borderRadius: '0',
-    background: 'transparent',
-    debug: false
+    // `as` will default to type span via getElementType, so for consistency and
+    // compatibility with Container we are leaving it undefined here. Otherwise
+    // it modifies behavior for consuming components because of the logic around
+    // default props in getElementType
+    as: undefined,
+    // textAlign is undefined by default so that View can inherit text alignment
+    // from parents
+    textAlign: undefined,
+    // The following props should be undefined because default values are passed in
+    // as inline styles which break the styling of the consuming components
+    background: undefined,
+    margin: undefined,
+    padding: undefined,
+    height: undefined,
+    width: undefined,
+    maxHeight: undefined,
+    maxWidth: undefined,
+    minHeight: undefined,
+    minWidth: undefined,
+    borderWidth: undefined,
+    borderRadius: undefined,
+    shadow: undefined
   }
@@ -153,16 +159,5 @@
     this.verifySpanMargin(props)
-
-    this.state = {
-      dir: 'ltr'
-    }
-
     this._element = null
   }
 
-  componentDidMount () {
-    this.setState({
-      dir: getTextDirection(this._element)
-    })
-  }
-
   componentWillReceiveProps (nextProps) {
@@ -186,9 +181,15 @@ this.verifySpanMargin(nextProps)
 
+  get hasBorder () {
+    const { borderWidth } = this.props
+    return borderWidth && borderWidth !== '0' && borderWidth !== 'none'
+  }
+
   get borderStyle () {
-    let { borderRadius, borderWidth } = this.props
+    const { borderRadius, borderWidth } = this.props
 
-    if (this.state.dir === 'rtl') {
-      borderRadius = convertRtlShorthandCorners(borderRadius)
-      borderWidth = convertRtlShorthandEdges(borderWidth)
-    }
+    // TODO: Restore once we get a fixed direction for RTL support
+    // if (dir === 'rtl') {
+    //   borderRadius = convertRtlShorthandCorners(borderRadius)
+    //   borderWidth = convertRtlShorthandEdges(borderWidth)
+    // }
 
@@ -202,8 +203,9 @@ return {
   get spacingStyle () {
-    let { margin, padding } = this.props
+    const { margin, padding } = this.props
 
-    if (this.state.dir === 'rtl') {
-      margin = convertRtlShorthandEdges(margin)
-      padding = convertRtlShorthandEdges(padding)
-    }
+    // TODO: Restore once we get a fixed direction for RTL support
+    // if (dir === 'rtl') {
+    //   margin = convertRtlShorthandEdges(margin)
+    //   padding = convertRtlShorthandEdges(padding)
+    // }
 
@@ -222,11 +224,20 @@ return {
 
-  get positionStyle () {
+  get styleProps () {
     const { style } = this.props // eslint-disable-line react/prop-types
-
-    return {
-      position: style && style.position,
-      left: style && style.left,
-      top: style && style.top,
-      transform: style && style.transform
-    }
+    return pickProps(style, {}, [
+      // Position/calculateElementPosition:
+      'top',
+      'left',
+      'position',
+      'transform',
+      'overflow',
+      'minWidth',
+      'minHeight',
+      // Img:
+      'filter',
+      // FlexItem:
+      'flexBasis',
+      // Avatar:
+      'backgroundImage'
+    ])
   }
@@ -265,2 +276,3 @@
           [styles.root]: true,
+          [styles.border]: this.hasBorder,
           [styles.debug]: debug,
@@ -274,3 +286,2 @@ [styles[`textAlign--${textAlign}`]]: textAlign,
         style={{
-          ...this.positionStyle,
           ...this.spacingStyle,
@@ -284,3 +295,4 @@ ...this.borderStyle,
           maxWidth,
-          maxHeight
+          maxHeight,
+          ...this.styleProps, // whitelisted style props will override View defaults
         }}
@@ -287,0 +299,0 @@ ref={this.handleElementRef}

src/components/View/theme.js

@@ -31,6 +31,2 @@ /*
   return {
-    fontSize: typography.fontSizeMedium,
-    fontFamily: typography.fontFamily,
-    fontWeight: typography.fontWeightNormal,
-
     color: colors.oxford,
@@ -37,0 +33,0 @@ background: colors.white,

src/utils/calculateElementPosition.js

@@ -57,2 +57,5 @@ /*
   if (!element || options.placement === 'offscreen') {
+    // hide offscreen content at the bottom of the DOM from screenreaders
+    // unless content is contained somewhere else
+    const hide = !options.container && element
     return {
@@ -63,3 +66,4 @@ placement: options.placement,
         overflow: 'hidden',
-        position: 'absolute'
+        position: 'absolute',
+        display: hide ? 'none' : null
       }
@@ -66,0 +70,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

673832

increased by0.58%

Dependency count

9

decreased by-18.18%

Lines of code

12710

increased by0.1%

Number of medium maintenance alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• - Removed@instructure/ui-a11y@^5.4.0

• - Removed@instructure/ui-container@^5.4.0

• - Removed@instructure/ui-a11y@5.52.3(transitive)

• - Removed@instructure/ui-container@5.52.3(transitive)

• Updated@instructure/ui-i18n@^5.4.1-dev.0

• Updated@instructure/ui-motion@^5.4.1-dev.0

• Updated@instructure/ui-portal@^5.4.1-dev.0

• Updated@instructure/ui-themeable@^5.4.1-dev.0

• Updated@instructure/ui-utils@^5.4.1-dev.0