@instructure/ui-elements - npm Package Compare versions

Comparing version 5.0.0-dev.6 to 5.0.0-dev.7

es/components/Badge/index.js

@@ -50,3 +50,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; }; }();
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, max-nesting-depth */\n\n._28UqLzn {\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  box-sizing: border-box;\n  pointer-events: none;\n  text-align: center;\n  color: ' + theme.color + ';\n  font-size: ' + theme.fontSize + ';\n  white-space: nowrap;\n  border-radius: ' + theme.borderRadius + ';\n}\n\n._28UqLzn:not(.qetKZbY) {\n    display: block;\n    position: absolute;\n    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */\n    z-index: 1;\n  }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2kqUmdx {\n        top: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2csksjN {\n        top: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2kqUmdx {\n        bottom: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2csksjN {\n        bottom: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        top: calc(50% - (' + theme.size + ' / 2));\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        top: calc(50% - (' + theme.sizeNotification + ' / 2));\n      }\n\n/*\n    * The diagonally positioned badges looked better closer to\n    * the button/child, while the centered badges looked happier a\n    * bit further away. Hence the special treatment below.\n    */\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn.qetKZbY {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n._28UqLzn._2kqUmdx {\n    line-height: ' + theme.size + ';\n    min-width: ' + theme.size + ';\n    padding-left: ' + theme.padding + ';\n    padding-right: ' + theme.padding + ';\n  }\n\n._28UqLzn._2csksjN {\n    width: ' + theme.sizeNotification + ';\n    height: ' + theme.sizeNotification + ';\n  }\n\n._22x-xrU {\n  background-color: ' + theme.colorDanger + ';\n}\n\n._22x-xrU._1DH9iwY::before {\n    border-color: ' + theme.colorDanger + ';\n  }\n\n.mE3P6Nt {\n  background-color: ' + theme.colorSuccess + ';\n}\n\n.mE3P6Nt._1DH9iwY::before {\n    border-color: ' + theme.colorSuccess + ';\n  }\n\n.QO-AI7c {\n  background-color: ' + theme.colorPrimary + ';\n}\n\n.QO-AI7c._1DH9iwY::before {\n    border-color: ' + theme.colorPrimary + ';\n  }\n\n@keyframes _1DH9iwY {\n  to {\n    transform: scale(1);\n    opacity: 0.9;\n  }\n}\n\n._1DH9iwY {\n  position: relative;\n}\n\n._1DH9iwY::before {\n    content: "";\n    width: calc(100% + 0.5rem);\n    height: calc(100% + 0.5rem);\n    border-radius: ' + theme.borderRadius + ';\n    position: absolute;\n    top: -0.25rem;\n    left: -0.25rem;\n    box-sizing: border-box;\n    border: ' + theme.pulseBorderThickness + ' solid;\n    opacity: 0;\n    transform: scale(0.75);\n    animation-name: _1DH9iwY;\n    animation-duration: 1s;\n    animation-iteration-count: 4;\n    animation-direction: alternate;\n  }\n\n._2zPmqnS {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n\n._2zPmqnS svg { /* stylelint-disable-line selector-max-type */\n    display: block;\n  }\n\n/* stylelint-enable selector-max-class, max-nesting-depth */\n';
+      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, max-nesting-depth */\n\n._28UqLzn {\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  box-sizing: border-box;\n  pointer-events: none;\n  text-align: center;\n  color: ' + theme.color + ';\n  font-size: ' + theme.fontSize + ';\n  white-space: nowrap;\n  border-radius: ' + theme.borderRadius + ';\n}\n\n._28UqLzn:not(.qetKZbY) {\n    display: block;\n    position: absolute;\n    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */\n    z-index: 1;\n  }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2kqUmdx {\n        top: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2csksjN {\n        top: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2kqUmdx {\n        bottom: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2csksjN {\n        bottom: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        top: calc(50% - (' + theme.size + ' / 2));\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        top: calc(50% - (' + theme.sizeNotification + ' / 2));\n      }\n\n/*\n    * The diagonally positioned badges looked better closer to\n    * the button/child, while the centered badges looked happier a\n    * bit further away. Hence the special treatment below.\n    */\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn.qetKZbY {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n._28UqLzn._2kqUmdx {\n    line-height: ' + theme.size + ';\n    min-width: ' + theme.size + ';\n    padding-left: ' + theme.padding + ';\n    padding-right: ' + theme.padding + ';\n  }\n\nhtml[dir="rtl"] ._28UqLzn._2kqUmdx {\n    padding-right: ' + theme.padding + ';\n    padding-left: ' + theme.padding + ';\n  }\n\n._28UqLzn._2csksjN {\n    width: ' + theme.sizeNotification + ';\n    height: ' + theme.sizeNotification + ';\n  }\n\n._22x-xrU {\n  background-color: ' + theme.colorDanger + ';\n}\n\n._22x-xrU._1DH9iwY::before {\n    border-color: ' + theme.colorDanger + ';\n  }\n\n.mE3P6Nt {\n  background-color: ' + theme.colorSuccess + ';\n}\n\n.mE3P6Nt._1DH9iwY::before {\n    border-color: ' + theme.colorSuccess + ';\n  }\n\n.QO-AI7c {\n  background-color: ' + theme.colorPrimary + ';\n}\n\n.QO-AI7c._1DH9iwY::before {\n    border-color: ' + theme.colorPrimary + ';\n  }\n\n@keyframes _1DH9iwY {\n  to {\n    transform: scale(1);\n    opacity: 0.9;\n  }\n}\n\n._1DH9iwY {\n  position: relative;\n}\n\n._1DH9iwY::before {\n    content: "";\n    width: calc(100% + 0.5rem);\n    height: calc(100% + 0.5rem);\n    border-radius: ' + theme.borderRadius + ';\n    position: absolute;\n    top: -0.25rem;\n    right: auto;\n    left: -0.25rem;\n    box-sizing: border-box;\n    border: ' + theme.pulseBorderThickness + ' solid;\n    opacity: 0;\n    transform: scale(0.75);\n    animation-name: _1DH9iwY;\n    animation-duration: 1s;\n    animation-iteration-count: 4;\n    animation-direction: alternate;\n  }\n\nhtml[dir="rtl"] ._1DH9iwY::before {\n    left: auto;\n    right: -0.25rem;\n  }\n\n._2zPmqnS {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n\n._2zPmqnS svg { /* stylelint-disable-line selector-max-type */\n    display: block;\n  }\n\n/* stylelint-enable selector-max-class, max-nesting-depth */\n';
     };
@@ -53,0 +53,0 @@

es/components/Heading/index.js

@@ -44,2 +44,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 CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes';
+import { deprecatePropValues } from '@instructure/ui-utils/lib/react/deprecated';
 import getElementType from '@instructure/ui-utils/lib/react/getElementType';
@@ -84,2 +85,3 @@ import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 **/
+
 var Heading = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = function (_Component) {
@@ -139,3 +141,3 @@ _inherits(Heading, _Component);
   children: PropTypes.node.isRequired,
-  color: PropTypes.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'success', 'warning', 'error', 'brand', 'inherit']),
+  color: deprecatePropValues(PropTypes.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']), ['success', 'warning', 'error', 'brand']),
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
@@ -142,0 +144,0 @@ /**

es/components/Image/index.js

@@ -41,2 +41,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 ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent';
 
@@ -50,3 +51,3 @@ import themeable from '@instructure/ui-themeable';
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._3zp79oO {\n  animation: none 0s ease 0s 1 normal none running;\n  backface-visibility: visible;\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  border: medium none currentColor;\n  border-collapse: separate;\n  border-image: none;\n  border-radius: 0;\n  border-spacing: 0;\n  bottom: auto;\n  box-shadow: none;\n  box-sizing: content-box;\n  caption-side: top;\n  clear: none;\n  clip: auto;\n  color: #000;\n  columns: auto;\n  column-count: auto;\n  column-fill: balance;\n  column-gap: normal;\n  column-rule: medium none currentColor;\n  column-span: 1;\n  column-width: auto;\n  content: normal;\n  counter-increment: none;\n  counter-reset: none;\n  cursor: auto;\n  direction: ltr;\n  display: inline;\n  empty-cells: show;\n  float: none;\n  font-family: serif;\n  font-size: medium;\n  font-style: normal;\n  font-variant: normal;\n  font-weight: normal;\n  font-stretch: normal;\n  line-height: normal;\n  height: auto;\n  hyphens: none;\n  left: auto;\n  letter-spacing: normal;\n  list-style: disc outside none;\n  margin: 0;\n  max-height: none;\n  max-width: none;\n  min-height: 0;\n  min-width: 0;\n  opacity: 1;\n  orphans: 2;\n  outline: medium none invert;\n  overflow: visible;\n  overflow-x: visible;\n  overflow-y: visible;\n  padding: 0;\n  page-break-after: auto;\n  page-break-before: auto;\n  page-break-inside: auto;\n  perspective: none;\n  perspective-origin: 50% 50%;\n  position: static;\n  right: auto;\n  tab-size: 8;\n  table-layout: auto;\n  text-align: left;\n  text-align-last: auto;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  top: auto;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  transform-style: flat;\n  transition: none 0s ease 0s;\n  unicode-bidi: normal;\n  vertical-align: baseline;\n  visibility: visible;\n  white-space: normal;\n  widows: 2;\n  width: auto;\n  word-spacing: normal;\n  z-index: auto;\n  all: initial;\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\n._3yjK8GL {\n  display: inline-block;\n}\n\n._3i-Mq7- {\n  display: inline-block;\n  position: relative;\n}\n\n._3hRJq0e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: all ' + theme.overlayTransitionDuration + ';\n}\n\n/* if overlay or filters are updated via props, make the transition look smooth */\n\n._2weQbei,\n._3hRJq0e {\n  transition: all ' + theme.effectTransitionDuration + ';\n}\n';
+      return '/*\n   imported from styles.css \n  */\n\n._3zp79oO {\n  /*\n  * reset image styles (initial: all was causing conflicts\n  * w/ Container\'s CSS and overriding height/width attrs)\n  */\n  margin: 0;\n  padding: 0;\n  float: none;\n  top: auto;\n  bottom: auto;\n  left: auto;\n  right: auto;\n  line-height: normal;\n  position: static;\n  transform: none;\n  max-height: none;\n  min-height: 0;\n  min-width: 0;\n  max-width: 100%;\n}\n\n._3i-Mq7- {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._3hRJq0e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: all ' + theme.overlayTransitionDuration + ';\n}\n\n._3Vycm95 {\n  display: block; /* when image is contained in overlay, avoid extra space at bottom from inline/line-height */\n}\n\n/* if overlay or filters are updated via props, make the transition look smooth */\n\n._2weQbei,\n._3hRJq0e {\n  transition: all ' + theme.effectTransitionDuration + ';\n}\n\n._2uoXJl5,\n._2Uv7IUk {\n  width: 100%;\n  height: 100%;\n}\n\n._2uoXJl5 {\n  object-fit: cover;\n}\n\n._192UfLf {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n}\n\n._3I4_qu3 {\n  position: relative;\n  overflow: hidden; /* stops blurred images extending past overlay borders */\n}\n';
     };
@@ -57,6 +58,10 @@
   'image': '_3zp79oO',
-  'inline': '_3yjK8GL',
   'overlayLayout': '_3i-Mq7-',
   'overlay': '_3hRJq0e',
-  'has-filter': '_2weQbei'
+  'has-overlay': '_3Vycm95',
+  'has-filter': '_2weQbei',
+  'cover': '_2uoXJl5',
+  'container--has-cover': '_2Uv7IUk',
+  'container--has-background': '_192UfLf',
+  'container--has-overlay': '_3I4_qu3'
 };
@@ -108,7 +113,12 @@
           grayscale = _props.grayscale,
-          blur = _props.blur;
+          blur = _props.blur,
+          cover = _props.cover;
 
+      // Detect browser support for object-fit
+      // Don't need to sniff for Edge 16 bc it supports object-fit for <img>
 
-      var imgClasses = (_imgClasses = {}, _defineProperty(_imgClasses, styles.image, true), _defineProperty(_imgClasses, styles.inline, inline || !overlay), _defineProperty(_imgClasses, styles['has-filter'], blur || grayscale), _imgClasses);
+      var supportsObjectFit = 'objectFit' in document.documentElement.style !== false;
 
+      var imgClasses = (_imgClasses = {}, _defineProperty(_imgClasses, styles.image, true), _defineProperty(_imgClasses, styles['has-overlay'], overlay), _defineProperty(_imgClasses, styles['has-filter'], blur || grayscale), _defineProperty(_imgClasses, styles.cover, cover && supportsObjectFit), _imgClasses);
+
       var imgStyle = {
@@ -125,3 +135,11 @@ filter: blur || grayscale ? this.renderFilter() : 'none'
       if (overlay) {
-        var overlayStyles = {
+        var _containerClasses;
+
+        var containerClasses = (_containerClasses = {}, _defineProperty(_containerClasses, styles['container--has-overlay'], true), _defineProperty(_containerClasses, styles['container--has-cover'], cover), _defineProperty(_containerClasses, styles['container--has-background'], !supportsObjectFit), _containerClasses);
+
+        var containerStyle = {
+          backgroundImage: !supportsObjectFit ? 'url(' + src + ')' : null
+        };
+
+        var overlayStyle = {
           backgroundColor: overlay.color,
@@ -132,3 +150,6 @@ opacity: overlay.opacity * 0.1,
           /* eslint-disable jsx-a11y/alt-text */
-        };return React.createElement(
+        };var image = React.createElement('img', Object.assign({}, props, { className: classnames(imgClasses), style: imgStyle }));
+        /* eslint-enable jsx-a11y/alt-text */
+
+        return React.createElement(
           Container,
@@ -138,12 +159,13 @@ {
             margin: margin,
-            display: inline ? 'inline' : 'block'
+            display: inline ? 'inline' : 'block',
+            className: classnames(containerClasses),
+            style: containerStyle
           },
-          React.createElement(
-            'span',
-            { className: styles.overlayLayout },
-            React.createElement('img', Object.assign({}, props, { className: classnames(imgClasses), style: imgStyle })),
-            React.createElement('span', { className: styles.overlay, style: overlayStyles })
-          )
+          !supportsObjectFit ? React.createElement(
+            ScreenReaderContent,
+            null,
+            image
+          ) : image,
+          React.createElement('span', { className: styles.overlay, style: overlayStyle })
         );
-        /* eslint-enable jsx-a11y/alt-text */
       } else {
@@ -153,2 +175,3 @@ return React.createElement(Container, Object.assign({}, props, {
           margin: margin,
+          display: inline ? 'inline' : 'block',
           className: classnames(imgClasses),
@@ -184,3 +207,4 @@ style: imgStyle
   grayscale: PropTypes.bool,
-  blur: PropTypes.bool
+  blur: PropTypes.bool,
+  cover: PropTypes.bool
 }, _class2.defaultProps = {
@@ -190,4 +214,5 @@ alt: '',
   grayscale: false,
-  blur: false
+  blur: false,
+  cover: false
 }, _temp)) || _class);
 export { Image as default };

es/components/List/ListItem/index.js

@@ -46,2 +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 warning from '@instructure/ui-utils/lib/warning';
+import { deprecatePropValues } from '@instructure/ui-utils/lib/react/deprecated';
 
@@ -135,3 +136,3 @@ var styles = {
   children: PropTypes.node.isRequired,
-  variant: CustomPropTypes.deprecatedVariant(PropTypes.oneOf(['default', 'unstyled', 'pipe', 'inline']), 'pipe', 'For the same functionality, use `inline` on the `variant` prop and set the `delimiter` prop to `pipe`.'),
+  variant: deprecatePropValues(PropTypes.oneOf(['default', 'unstyled', 'inline']), ['pipe'], 'For the same functionality, use `inline` on the `variant` prop and set the `delimiter` prop to `pipe`.'),
   delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow']),
@@ -138,0 +139,0 @@ size: PropTypes.oneOf(['small', 'medium', 'large']),

es/components/Tag/index.js

@@ -141,2 +141,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; }; }();
           display: null,
+          disabled: disabled,
           title: title || (typeof text === 'string' ? text : null)
@@ -143,0 +144,0 @@ }),

lib/components/Badge/index.js

@@ -83,3 +83,3 @@ 'use strict';
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, max-nesting-depth */\n\n._28UqLzn {\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  box-sizing: border-box;\n  pointer-events: none;\n  text-align: center;\n  color: ' + theme.color + ';\n  font-size: ' + theme.fontSize + ';\n  white-space: nowrap;\n  border-radius: ' + theme.borderRadius + ';\n}\n\n._28UqLzn:not(.qetKZbY) {\n    display: block;\n    position: absolute;\n    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */\n    z-index: 1;\n  }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2kqUmdx {\n        top: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2csksjN {\n        top: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2kqUmdx {\n        bottom: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2csksjN {\n        bottom: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        top: calc(50% - (' + theme.size + ' / 2));\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        top: calc(50% - (' + theme.sizeNotification + ' / 2));\n      }\n\n/*\n    * The diagonally positioned badges looked better closer to\n    * the button/child, while the centered badges looked happier a\n    * bit further away. Hence the special treatment below.\n    */\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn.qetKZbY {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n._28UqLzn._2kqUmdx {\n    line-height: ' + theme.size + ';\n    min-width: ' + theme.size + ';\n    padding-left: ' + theme.padding + ';\n    padding-right: ' + theme.padding + ';\n  }\n\n._28UqLzn._2csksjN {\n    width: ' + theme.sizeNotification + ';\n    height: ' + theme.sizeNotification + ';\n  }\n\n._22x-xrU {\n  background-color: ' + theme.colorDanger + ';\n}\n\n._22x-xrU._1DH9iwY::before {\n    border-color: ' + theme.colorDanger + ';\n  }\n\n.mE3P6Nt {\n  background-color: ' + theme.colorSuccess + ';\n}\n\n.mE3P6Nt._1DH9iwY::before {\n    border-color: ' + theme.colorSuccess + ';\n  }\n\n.QO-AI7c {\n  background-color: ' + theme.colorPrimary + ';\n}\n\n.QO-AI7c._1DH9iwY::before {\n    border-color: ' + theme.colorPrimary + ';\n  }\n\n@keyframes _1DH9iwY {\n  to {\n    transform: scale(1);\n    opacity: 0.9;\n  }\n}\n\n._1DH9iwY {\n  position: relative;\n}\n\n._1DH9iwY::before {\n    content: "";\n    width: calc(100% + 0.5rem);\n    height: calc(100% + 0.5rem);\n    border-radius: ' + theme.borderRadius + ';\n    position: absolute;\n    top: -0.25rem;\n    left: -0.25rem;\n    box-sizing: border-box;\n    border: ' + theme.pulseBorderThickness + ' solid;\n    opacity: 0;\n    transform: scale(0.75);\n    animation-name: _1DH9iwY;\n    animation-duration: 1s;\n    animation-iteration-count: 4;\n    animation-direction: alternate;\n  }\n\n._2zPmqnS {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n\n._2zPmqnS svg { /* stylelint-disable-line selector-max-type */\n    display: block;\n  }\n\n/* stylelint-enable selector-max-class, max-nesting-depth */\n';
+      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, max-nesting-depth */\n\n._28UqLzn {\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  box-sizing: border-box;\n  pointer-events: none;\n  text-align: center;\n  color: ' + theme.color + ';\n  font-size: ' + theme.fontSize + ';\n  white-space: nowrap;\n  border-radius: ' + theme.borderRadius + ';\n}\n\n._28UqLzn:not(.qetKZbY) {\n    display: block;\n    position: absolute;\n    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */\n    z-index: 1;\n  }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2kqUmdx {\n        top: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._12Dsa8B._2csksjN {\n        top: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2kqUmdx {\n        bottom: calc(-1 * ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._9yMY2To._2csksjN {\n        bottom: ' + theme.notificationOffset + ';\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY).c550snP._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        right: calc(-1 * ' + theme.countOffset + ');\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2kqUmdx {\n        left: calc(-1 * ' + theme.countOffset + ');\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        right: ' + theme.notificationOffset + ';\n        left: auto;\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._341-d2J._2csksjN {\n        left: ' + theme.notificationOffset + ';\n        right: auto;\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        top: calc(50% - (' + theme.size + ' / 2));\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN, ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        top: calc(50% - (' + theme.sizeNotification + ' / 2));\n      }\n\n/*\n    * The diagonally positioned badges looked better closer to\n    * the button/child, while the centered badges looked happier a\n    * bit further away. Hence the special treatment below.\n    */\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A.c550snP._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        right: auto;\n        left: calc(100% - ' + theme.countOffset + ');\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2kqUmdx {\n        left: auto;\n        right: calc(100% - ' + theme.countOffset + ');\n      }\n\n._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        right: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\nhtml[dir="rtl"] ._28UqLzn:not(.qetKZbY)._23rqT_A._341-d2J._2csksjN {\n        left: calc(-1 * ' + theme.sizeNotification + ' / 2);\n      }\n\n._28UqLzn.qetKZbY {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n._28UqLzn._2kqUmdx {\n    line-height: ' + theme.size + ';\n    min-width: ' + theme.size + ';\n    padding-left: ' + theme.padding + ';\n    padding-right: ' + theme.padding + ';\n  }\n\nhtml[dir="rtl"] ._28UqLzn._2kqUmdx {\n    padding-right: ' + theme.padding + ';\n    padding-left: ' + theme.padding + ';\n  }\n\n._28UqLzn._2csksjN {\n    width: ' + theme.sizeNotification + ';\n    height: ' + theme.sizeNotification + ';\n  }\n\n._22x-xrU {\n  background-color: ' + theme.colorDanger + ';\n}\n\n._22x-xrU._1DH9iwY::before {\n    border-color: ' + theme.colorDanger + ';\n  }\n\n.mE3P6Nt {\n  background-color: ' + theme.colorSuccess + ';\n}\n\n.mE3P6Nt._1DH9iwY::before {\n    border-color: ' + theme.colorSuccess + ';\n  }\n\n.QO-AI7c {\n  background-color: ' + theme.colorPrimary + ';\n}\n\n.QO-AI7c._1DH9iwY::before {\n    border-color: ' + theme.colorPrimary + ';\n  }\n\n@keyframes _1DH9iwY {\n  to {\n    transform: scale(1);\n    opacity: 0.9;\n  }\n}\n\n._1DH9iwY {\n  position: relative;\n}\n\n._1DH9iwY::before {\n    content: "";\n    width: calc(100% + 0.5rem);\n    height: calc(100% + 0.5rem);\n    border-radius: ' + theme.borderRadius + ';\n    position: absolute;\n    top: -0.25rem;\n    right: auto;\n    left: -0.25rem;\n    box-sizing: border-box;\n    border: ' + theme.pulseBorderThickness + ' solid;\n    opacity: 0;\n    transform: scale(0.75);\n    animation-name: _1DH9iwY;\n    animation-duration: 1s;\n    animation-iteration-count: 4;\n    animation-direction: alternate;\n  }\n\nhtml[dir="rtl"] ._1DH9iwY::before {\n    left: auto;\n    right: -0.25rem;\n  }\n\n._2zPmqnS {\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n\n._2zPmqnS svg { /* stylelint-disable-line selector-max-type */\n    display: block;\n  }\n\n/* stylelint-enable selector-max-class, max-nesting-depth */\n';
     };
@@ -86,0 +86,0 @@

lib/components/Heading/index.js

@@ -59,2 +59,4 @@ 'use strict';
 
+var _deprecated = require('@instructure/ui-utils/lib/react/deprecated');
+
 var _getElementType = require('@instructure/ui-utils/lib/react/getElementType');
@@ -115,2 +117,3 @@
 **/
+
 var Heading = (_dec = (0, _uiThemeable2.default)(_theme2.default, styles), _dec(_class = (_temp = _class2 = function (_Component) {
@@ -170,3 +173,3 @@ _inherits(Heading, _Component);
   children: _propTypes2.default.node.isRequired,
-  color: _propTypes2.default.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'success', 'warning', 'error', 'brand', 'inherit']),
+  color: (0, _deprecated.deprecatePropValues)(_propTypes2.default.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']), ['success', 'warning', 'error', 'brand']),
   level: _propTypes2.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
@@ -173,0 +176,0 @@ /**

lib/components/Image/index.js

@@ -51,2 +51,6 @@ 'use strict';
 
+var _ScreenReaderContent = require('@instructure/ui-a11y/lib/components/ScreenReaderContent');
+
+var _ScreenReaderContent2 = _interopRequireDefault(_ScreenReaderContent);
+
 var _uiThemeable = require('@instructure/ui-themeable');
@@ -79,3 +83,3 @@
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n._3zp79oO {\n  animation: none 0s ease 0s 1 normal none running;\n  backface-visibility: visible;\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  border: medium none currentColor;\n  border-collapse: separate;\n  border-image: none;\n  border-radius: 0;\n  border-spacing: 0;\n  bottom: auto;\n  box-shadow: none;\n  box-sizing: content-box;\n  caption-side: top;\n  clear: none;\n  clip: auto;\n  color: #000;\n  columns: auto;\n  column-count: auto;\n  column-fill: balance;\n  column-gap: normal;\n  column-rule: medium none currentColor;\n  column-span: 1;\n  column-width: auto;\n  content: normal;\n  counter-increment: none;\n  counter-reset: none;\n  cursor: auto;\n  direction: ltr;\n  display: inline;\n  empty-cells: show;\n  float: none;\n  font-family: serif;\n  font-size: medium;\n  font-style: normal;\n  font-variant: normal;\n  font-weight: normal;\n  font-stretch: normal;\n  line-height: normal;\n  height: auto;\n  hyphens: none;\n  left: auto;\n  letter-spacing: normal;\n  list-style: disc outside none;\n  margin: 0;\n  max-height: none;\n  max-width: none;\n  min-height: 0;\n  min-width: 0;\n  opacity: 1;\n  orphans: 2;\n  outline: medium none invert;\n  overflow: visible;\n  overflow-x: visible;\n  overflow-y: visible;\n  padding: 0;\n  page-break-after: auto;\n  page-break-before: auto;\n  page-break-inside: auto;\n  perspective: none;\n  perspective-origin: 50% 50%;\n  position: static;\n  right: auto;\n  tab-size: 8;\n  table-layout: auto;\n  text-align: left;\n  text-align-last: auto;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  top: auto;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  transform-style: flat;\n  transition: none 0s ease 0s;\n  unicode-bidi: normal;\n  vertical-align: baseline;\n  visibility: visible;\n  white-space: normal;\n  widows: 2;\n  width: auto;\n  word-spacing: normal;\n  z-index: auto;\n  all: initial;\n  max-width: 100%;\n  height: auto;\n  display: block;\n}\n\n._3yjK8GL {\n  display: inline-block;\n}\n\n._3i-Mq7- {\n  display: inline-block;\n  position: relative;\n}\n\n._3hRJq0e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: all ' + theme.overlayTransitionDuration + ';\n}\n\n/* if overlay or filters are updated via props, make the transition look smooth */\n\n._2weQbei,\n._3hRJq0e {\n  transition: all ' + theme.effectTransitionDuration + ';\n}\n';
+      return '/*\n   imported from styles.css \n  */\n\n._3zp79oO {\n  /*\n  * reset image styles (initial: all was causing conflicts\n  * w/ Container\'s CSS and overriding height/width attrs)\n  */\n  margin: 0;\n  padding: 0;\n  float: none;\n  top: auto;\n  bottom: auto;\n  left: auto;\n  right: auto;\n  line-height: normal;\n  position: static;\n  transform: none;\n  max-height: none;\n  min-height: 0;\n  min-width: 0;\n  max-width: 100%;\n}\n\n._3i-Mq7- {\n  display: inline-block;\n  vertical-align: middle;\n}\n\n._3hRJq0e {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transition: all ' + theme.overlayTransitionDuration + ';\n}\n\n._3Vycm95 {\n  display: block; /* when image is contained in overlay, avoid extra space at bottom from inline/line-height */\n}\n\n/* if overlay or filters are updated via props, make the transition look smooth */\n\n._2weQbei,\n._3hRJq0e {\n  transition: all ' + theme.effectTransitionDuration + ';\n}\n\n._2uoXJl5,\n._2Uv7IUk {\n  width: 100%;\n  height: 100%;\n}\n\n._2uoXJl5 {\n  object-fit: cover;\n}\n\n._192UfLf {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n}\n\n._3I4_qu3 {\n  position: relative;\n  overflow: hidden; /* stops blurred images extending past overlay borders */\n}\n';
     };
@@ -86,6 +90,10 @@
   'image': '_3zp79oO',
-  'inline': '_3yjK8GL',
   'overlayLayout': '_3i-Mq7-',
   'overlay': '_3hRJq0e',
-  'has-filter': '_2weQbei'
+  'has-overlay': '_3Vycm95',
+  'has-filter': '_2weQbei',
+  'cover': '_2uoXJl5',
+  'container--has-cover': '_2Uv7IUk',
+  'container--has-background': '_192UfLf',
+  'container--has-overlay': '_3I4_qu3'
 };
@@ -136,7 +144,12 @@
           grayscale = _props.grayscale,
-          blur = _props.blur;
+          blur = _props.blur,
+          cover = _props.cover;
 
+      // Detect browser support for object-fit
+      // Don't need to sniff for Edge 16 bc it supports object-fit for <img>
 
-      var imgClasses = (_imgClasses = {}, _defineProperty(_imgClasses, styles.image, true), _defineProperty(_imgClasses, styles.inline, inline || !overlay), _defineProperty(_imgClasses, styles['has-filter'], blur || grayscale), _imgClasses);
+      var supportsObjectFit = 'objectFit' in document.documentElement.style !== false;
 
+      var imgClasses = (_imgClasses = {}, _defineProperty(_imgClasses, styles.image, true), _defineProperty(_imgClasses, styles['has-overlay'], overlay), _defineProperty(_imgClasses, styles['has-filter'], blur || grayscale), _defineProperty(_imgClasses, styles.cover, cover && supportsObjectFit), _imgClasses);
+
       var imgStyle = {
@@ -153,3 +166,11 @@ filter: blur || grayscale ? this.renderFilter() : 'none'
       if (overlay) {
-        var overlayStyles = {
+        var _containerClasses;
+
+        var containerClasses = (_containerClasses = {}, _defineProperty(_containerClasses, styles['container--has-overlay'], true), _defineProperty(_containerClasses, styles['container--has-cover'], cover), _defineProperty(_containerClasses, styles['container--has-background'], !supportsObjectFit), _containerClasses);
+
+        var containerStyle = {
+          backgroundImage: !supportsObjectFit ? 'url(' + src + ')' : null
+        };
+
+        var overlayStyle = {
           backgroundColor: overlay.color,
@@ -160,3 +181,6 @@ opacity: overlay.opacity * 0.1,
           /* eslint-disable jsx-a11y/alt-text */
-        };return _react2.default.createElement(
+        };var image = _react2.default.createElement('img', Object.assign({}, props, { className: (0, _classnames2.default)(imgClasses), style: imgStyle }));
+        /* eslint-enable jsx-a11y/alt-text */
+
+        return _react2.default.createElement(
           _Container2.default,
@@ -166,12 +190,13 @@ {
             margin: margin,
-            display: inline ? 'inline' : 'block'
+            display: inline ? 'inline' : 'block',
+            className: (0, _classnames2.default)(containerClasses),
+            style: containerStyle
           },
-          _react2.default.createElement(
-            'span',
-            { className: styles.overlayLayout },
-            _react2.default.createElement('img', Object.assign({}, props, { className: (0, _classnames2.default)(imgClasses), style: imgStyle })),
-            _react2.default.createElement('span', { className: styles.overlay, style: overlayStyles })
-          )
+          !supportsObjectFit ? _react2.default.createElement(
+            _ScreenReaderContent2.default,
+            null,
+            image
+          ) : image,
+          _react2.default.createElement('span', { className: styles.overlay, style: overlayStyle })
         );
-        /* eslint-enable jsx-a11y/alt-text */
       } else {
@@ -181,2 +206,3 @@ return _react2.default.createElement(_Container2.default, Object.assign({}, props, {
           margin: margin,
+          display: inline ? 'inline' : 'block',
           className: (0, _classnames2.default)(imgClasses),
@@ -212,3 +238,4 @@ style: imgStyle
   grayscale: _propTypes2.default.bool,
-  blur: _propTypes2.default.bool
+  blur: _propTypes2.default.bool,
+  cover: _propTypes2.default.bool
 }, _class2.defaultProps = {
@@ -218,4 +245,5 @@ alt: '',
   grayscale: false,
-  blur: false
+  blur: false,
+  cover: false
 }, _temp)) || _class);
 exports.default = Image;

lib/components/List/ListItem/index.js

@@ -65,2 +65,4 @@ 'use strict';
 
+var _deprecated = require('@instructure/ui-utils/lib/react/deprecated');
+
 var _theme = require('./theme');
@@ -166,3 +168,3 @@
   children: _propTypes2.default.node.isRequired,
-  variant: _CustomPropTypes2.default.deprecatedVariant(_propTypes2.default.oneOf(['default', 'unstyled', 'pipe', 'inline']), 'pipe', 'For the same functionality, use `inline` on the `variant` prop and set the `delimiter` prop to `pipe`.'),
+  variant: (0, _deprecated.deprecatePropValues)(_propTypes2.default.oneOf(['default', 'unstyled', 'inline']), ['pipe'], 'For the same functionality, use `inline` on the `variant` prop and set the `delimiter` prop to `pipe`.'),
   delimiter: _propTypes2.default.oneOf(['none', 'pipe', 'slash', 'arrow']),
@@ -169,0 +171,0 @@ size: _propTypes2.default.oneOf(['small', 'medium', 'large']),

lib/components/Tag/index.js

@@ -174,2 +174,3 @@ 'use strict';
           display: null,
+          disabled: disabled,
           title: title || (typeof text === 'string' ? text : null)
@@ -176,0 +177,0 @@ }),

package.json

 {
   "name": "@instructure/ui-elements",
-  "version": "5.0.0-dev.6",
+  "version": "5.0.0-dev.7",
   "description": "A UI component library made by Instructure Inc.",
@@ -25,3 +25,3 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-presets": "^5.0.0-dev.6",
+    "@instructure/ui-presets": "^5.0.0-dev.7",
     "react": "15.6.2",
@@ -31,6 +31,6 @@ "react-dom": "15.6.2"
   "dependencies": {
-    "@instructure/ui-container": "^5.0.0-dev.6",
-    "@instructure/ui-icons": "^5.0.0-dev.6",
-    "@instructure/ui-themeable": "^5.0.0-dev.6",
-    "@instructure/ui-utils": "^5.0.0-dev.6",
+    "@instructure/ui-container": "^5.0.0-dev.7",
+    "@instructure/ui-icons": "^5.0.0-dev.7",
+    "@instructure/ui-themeable": "^5.0.0-dev.7",
+    "@instructure/ui-utils": "^5.0.0-dev.7",
     "classnames": "^2.2.5",
@@ -37,0 +37,0 @@ "prop-types": "^15.5.10"

src/components/Heading/index.js

@@ -32,2 +32,3 @@ /*
 import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
+import { deprecatePropValues } from '@instructure/ui-utils/lib/react/deprecated'
 import getElementType from '@instructure/ui-utils/lib/react/getElementType'
@@ -44,3 +45,4 @@ import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 **/
- @themeable(theme, styles)
+
+@themeable(theme, styles)
 export default class Heading extends Component {
@@ -50,13 +52,12 @@ static propTypes = {
      children: PropTypes.node.isRequired,
-     color: PropTypes.oneOf([
-       'primary',
-       'secondary',
-       'primary-inverse',
-       'secondary-inverse',
-       'success',
-       'warning',
-       'error',
-       'brand',
-       'inherit'
-     ]),
+     color: deprecatePropValues(
+       PropTypes.oneOf([
+         'primary',
+         'secondary',
+         'primary-inverse',
+         'secondary-inverse',
+         'inherit'
+       ]),
+       ['success', 'warning', 'error', 'brand']
+     ),
      level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
@@ -63,0 +64,0 @@ /**

src/components/Heading/README.md

@@ -25,5 +25,2 @@ ---
 
-Headings default to the theme's 'oxford' text color. However, the text color
-can be changed, if desired.
-
 ```js
@@ -37,6 +34,2 @@ ---
   <Heading color="secondary">I am secondary color</Heading>
-  <Heading color="brand">I am brand color</Heading>
-  <Heading color="success">I am success color</Heading>
-  <Heading color="warning">I am warning color</Heading>
-  <Heading color="error">I am error/danger color</Heading>
 </div>
@@ -43,0 +36,0 @@ ```

src/components/Image/index.js

@@ -29,2 +29,3 @@ /*
 import Container from '@instructure/ui-container/lib/components/Container'
+import ScreenReaderContent from '@instructure/ui-a11y/lib/components/ScreenReaderContent'
 
@@ -65,3 +66,4 @@ import themeable from '@instructure/ui-themeable'
     grayscale: PropTypes.bool,
-    blur: PropTypes.bool
+    blur: PropTypes.bool,
+    cover: PropTypes.bool
   }
@@ -73,3 +75,4 @@
     grayscale: false,
-    blur: false
+    blur: false,
+    cover: false
   }
@@ -100,9 +103,15 @@
       grayscale,
-      blur
+      blur,
+      cover
     } = this.props
 
+    // Detect browser support for object-fit
+    // Don't need to sniff for Edge 16 bc it supports object-fit for <img>
+    const supportsObjectFit = 'objectFit' in document.documentElement.style !== false
+
     const imgClasses = {
       [styles.image]: true,
-      [styles.inline]: inline || !overlay,
-      [styles['has-filter']]: blur || grayscale
+      [styles['has-overlay']]: overlay,
+      [styles['has-filter']]: blur || grayscale,
+      [styles.cover]: cover && supportsObjectFit
     }
@@ -122,3 +131,13 @@
     if (overlay) {
-      const overlayStyles = {
+      const containerClasses = {
+        [styles['container--has-overlay']]: true,
+        [styles['container--has-cover']]: cover,
+        [styles['container--has-background']]: !supportsObjectFit
+      }
+
+      const containerStyle = {
+        backgroundImage: !supportsObjectFit ? `url(${src})` : null
+      }
+
+      const overlayStyle = {
         backgroundColor: overlay.color,
@@ -130,2 +149,5 @@ opacity: overlay.opacity * 0.1,
       /* eslint-disable jsx-a11y/alt-text */
+      const image = <img {...props} className={classnames(imgClasses)} style={imgStyle} />
+      /* eslint-enable jsx-a11y/alt-text */
+
       return (
@@ -136,10 +158,9 @@ <Container
           display={(inline) ? 'inline' : 'block'}
+          className={classnames(containerClasses)}
+          style={containerStyle}
         >
-          <span className={styles.overlayLayout}>
-            <img {...props} className={classnames(imgClasses)} style={imgStyle} />
-            <span className={styles.overlay} style={overlayStyles} />
-          </span>
+          {(!supportsObjectFit) ? <ScreenReaderContent>{image}</ScreenReaderContent> : image}
+          <span className={styles.overlay} style={overlayStyle} />
         </Container>
       )
-      /* eslint-enable jsx-a11y/alt-text */
     } else {
@@ -151,2 +172,3 @@ return (
           margin={margin}
+          display={(inline) ? 'inline' : 'block'}
           className={classnames(imgClasses)}
@@ -153,0 +175,0 @@ style={imgStyle}

src/components/Image/README.md

@@ -14,6 +14,6 @@ ---
 
-### Display and margin
+### Margin and display
 
-Use the `margin` prop to add space around `<Image/>`. Adding `display="block"` makes
-the image a block-level element
+Use the `margin` prop to add space around `<Image />`. Setting the `inline` prop to `false` makes
+the image a block-level element.
 
@@ -24,7 +24,7 @@ ```js
 ---
-<div>
+<Container textAlign="center" as="div">
   <Image margin="small" alt="A placeholder image" src={placeholderImage(300, 200)} />
   <Image margin="small" src={placeholderImage(200, 200)} />
-  <Image display="block" margin="medium" src={placeholderImage(400, 200)} />
-</div>
+  <Image inline={false} margin="small auto" src={placeholderImage(400, 200)} />
+</Container>
 ```
@@ -41,3 +41,3 @@
 ---
-  <Container textAlign="center">
+  <Container textAlign="center" as="div">
     <Image
@@ -64,2 +64,20 @@ src={placeholderImage(200, 200)}
 
+### Cover
+
+When the `cover` prop is `true` Image fills the full width and height of its
+containing element, while maintaining the aspect ratio of the source image.
+
+```js
+---
+example: true
+---
+<div style={{width: '66%', height: '11rem'}}>
+  <Image
+    src={avatarImage}
+    overlay={{color: 'rebeccapurple', opacity: 8}}
+    cover
+  />
+</div>
+```
+
 ### Grayscale and blur filters
@@ -74,3 +92,3 @@
 ---
-  <Container textAlign="center">
+  <Container textAlign="center" as="div">
     <Image
@@ -77,0 +95,0 @@ grayscale

src/components/List/ListItem/index.js

@@ -34,2 +34,3 @@ /*
 import warning from '@instructure/ui-utils/lib/warning'
+import { deprecatePropValues } from '@instructure/ui-utils/lib/react/deprecated'
 
@@ -49,5 +50,5 @@ import styles from './styles.css'
     children: PropTypes.node.isRequired,
-    variant: CustomPropTypes.deprecatedVariant(
-      PropTypes.oneOf(['default', 'unstyled', 'pipe', 'inline']),
-      'pipe',
+    variant: deprecatePropValues(
+      PropTypes.oneOf(['default', 'unstyled', 'inline']),
+      ['pipe'],
       'For the same functionality, use `inline` on the `variant` prop and set the `delimiter` prop to `pipe`.'
@@ -54,0 +55,0 @@ ),

src/components/Tag/index.js

@@ -133,2 +133,3 @@ /*
         display={null}
+        disabled={disabled}
         title={title || ((typeof text === 'string') ? text : null)}
@@ -135,0 +136,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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

730068

increased by0.41%

Lines of code

14027

increased by0.7%

Number of low supply chain risk alerts

2

decreased by-50%

Dependency changes

• Updated@instructure/ui-container@^5.0.0-dev.7

• Updated@instructure/ui-icons@^5.0.0-dev.7

• Updated@instructure/ui-themeable@^5.0.0-dev.7

• Updated@instructure/ui-utils@^5.0.0-dev.7