@instructure/ui-elements - npm Package Compare versions

Comparing version 5.13.0-rc.7 to 5.13.0-rc.18

es/components/Link/index.js

@@ -49,2 +49,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 findDOMNode from '@instructure/ui-utils/lib/dom/findDOMNode';
+import hasVisibleChildren from '@instructure/ui-a11y/lib/utils/hasVisibleChildren';
 
@@ -54,3 +55,3 @@ var styles = {
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, no-descending-specificity, selector-max-type */\n\n._3VIJ7BJ a._5tkGIfX:link,\n._3VIJ7BJ a._5tkGIfX:visited,\n._3VIJ7BJ button._5tkGIfX {\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  color: ' + theme.color + ';\n  -webkit-text-decoration: ' + theme.textDecoration + ';\n          text-decoration: ' + theme.textDecoration + ';\n  transition: color 0.2s;\n  outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.outlineColor + ';\n}\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusOutlineColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:hover,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:hover,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:hover,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    -webkit-text-decoration: ' + theme.hoverTextDecoration + ';\n            text-decoration: ' + theme.hoverTextDecoration + ';\n    color: ' + theme.hoverColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link[aria-disabled], ._3VIJ7BJ a._5tkGIfX:visited[aria-disabled], ._3VIJ7BJ button._5tkGIfX[aria-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n._3VIJ7BJ a._1sGWAA4:link,\n._3VIJ7BJ a._1sGWAA4:visited,\n._3VIJ7BJ button._1sGWAA4 {\n  color: ' + theme.colorInverse + ';\n}\n\n._3VIJ7BJ a._1sGWAA4:link:hover,\n  ._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:hover,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:hover,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    color: ' + theme.colorInverse + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseOutlineColor + ';\n  }\n\n._3VIJ7BJ button._5tkGIfX {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1em;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  align-content: flex-start;\n  text-align: inherit;\n}\n\n[dir="ltr"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n[dir="rtl"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n._1brJmps {\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n}\n\n.vWEDqYW {\n  box-sizing: border-box;\n  display: block;\n  line-height: 1.2;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n/* stylelint-enable selector-max-class, no-descending-specificity, selector-max-type */\n';
+      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, no-descending-specificity, selector-max-type */\n\n._3VIJ7BJ a._5tkGIfX:link,\n._3VIJ7BJ a._5tkGIfX:visited,\n._3VIJ7BJ button._5tkGIfX {\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  color: ' + theme.color + ';\n  -webkit-text-decoration: ' + theme.textDecoration + ';\n          text-decoration: ' + theme.textDecoration + ';\n  transition: color 0.2s;\n  outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.outlineColor + ';\n  outline-offset: ' + theme.outlineOffset + ';\n}\n\n/* does not work in Edge or IE */\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusOutlineColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link._3DAxUVR:focus,\n    ._3VIJ7BJ a._5tkGIfX:link._3DAxUVR:active,\n    ._3VIJ7BJ a._5tkGIfX:visited._3DAxUVR:focus,\n    ._3VIJ7BJ a._5tkGIfX:visited._3DAxUVR:active,\n    ._3VIJ7BJ button._5tkGIfX._3DAxUVR:focus,\n    ._3VIJ7BJ button._5tkGIfX._3DAxUVR:active {\n      outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusIconOutlineColor + ';\n    }\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:hover,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:hover,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:hover,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    -webkit-text-decoration: ' + theme.hoverTextDecoration + ';\n            text-decoration: ' + theme.hoverTextDecoration + ';\n    color: ' + theme.hoverColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link[aria-disabled], ._3VIJ7BJ a._5tkGIfX:visited[aria-disabled], ._3VIJ7BJ button._5tkGIfX[aria-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n._3VIJ7BJ a._1sGWAA4:link,\n._3VIJ7BJ a._1sGWAA4:visited,\n._3VIJ7BJ button._1sGWAA4 {\n  color: ' + theme.colorInverse + ';\n}\n\n._3VIJ7BJ a._1sGWAA4:link:hover,\n  ._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:hover,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:hover,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    color: ' + theme.colorInverse + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseOutlineColor + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link._3DAxUVR:focus,\n    ._3VIJ7BJ a._1sGWAA4:link._3DAxUVR:active,\n    ._3VIJ7BJ a._1sGWAA4:visited._3DAxUVR:focus,\n    ._3VIJ7BJ a._1sGWAA4:visited._3DAxUVR:active,\n    ._3VIJ7BJ button._1sGWAA4._3DAxUVR:focus,\n    ._3VIJ7BJ button._1sGWAA4._3DAxUVR:active {\n      outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseIconOutlineColor + ';\n    }\n\n._3VIJ7BJ button._5tkGIfX {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1em;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  align-content: flex-start;\n  text-align: inherit;\n}\n\n[dir="ltr"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n[dir="rtl"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n._1brJmps {\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n}\n\n.vWEDqYW {\n  box-sizing: border-box;\n  display: block;\n  line-height: 1.2;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n._1BwzOB4 {\n  font-size: 1.125em; /* make icon slightly larger than inherited font-size */\n}\n\n._2fUL3mU ._1BwzOB4 {\n  -webkit-margin-end: ' + theme.iconPlusTextMargin + ';\n          margin-inline-end: ' + theme.iconPlusTextMargin + ';\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n\n[dir="ltr"] ._2fUL3mU ._1BwzOB4 {\n  margin-right: ' + theme.iconPlusTextMargin + ';\n  margin-left: 0;\n}\n\n[dir="rtl"] ._2fUL3mU ._1BwzOB4 {\n  margin-left: ' + theme.iconPlusTextMargin + ';\n  margin-right: 0;\n}\n\n.eOfYul7 ._1BwzOB4 {\n  -webkit-margin-end: 0;\n          margin-inline-end: 0;\n  -webkit-margin-start: ' + theme.iconPlusTextMargin + ';\n          margin-inline-start: ' + theme.iconPlusTextMargin + ';\n}\n\n[dir="ltr"] .eOfYul7 ._1BwzOB4 {\n  margin-right: 0;\n  margin-left: ' + theme.iconPlusTextMargin + ';\n}\n\n[dir="rtl"] .eOfYul7 ._1BwzOB4 {\n  margin-left: 0;\n  margin-right: ' + theme.iconPlusTextMargin + ';\n}\n\n/* stylelint-enable selector-max-class, no-descending-specificity, selector-max-type */\n';
     };
@@ -62,5 +63,9 @@
   'link': '_5tkGIfX',
+  'iconOnly': '_3DAxUVR',
   'inverse': '_1sGWAA4',
   'ellipsis': '_1brJmps',
-  'text': 'vWEDqYW'
+  'text': 'vWEDqYW',
+  'icon': '_1BwzOB4',
+  'iconPlacement--start': '_2fUL3mU',
+  'iconPlacement--end': 'eOfYul7'
 };
@@ -110,2 +115,22 @@
   }, {
+    key: 'renderIcon',
+    value: function renderIcon() {
+      var Icon = this.props.icon;
+      if (typeof this.props.icon === 'function') {
+        return React.createElement(
+          'span',
+          { className: styles.icon },
+          React.createElement(Icon, null)
+        );
+      } else if (Icon) {
+        return React.createElement(
+          'span',
+          { className: styles.icon },
+          Icon
+        );
+      } else {
+        return null;
+      }
+    }
+  }, {
     key: 'render',
@@ -117,4 +142,4 @@ value: function render() {
       var _props = this.props,
+          disabled = _props.disabled,
           children = _props.children,
-          disabled = _props.disabled,
           onClick = _props.onClick,
@@ -126,3 +151,5 @@ variant = _props.variant,
           ellipsis = _props.ellipsis,
-          elementRef = _props.elementRef;
+          elementRef = _props.elementRef,
+          icon = _props.icon,
+          iconPlacement = _props.iconPlacement;
 
@@ -132,3 +159,3 @@
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.link, true), _defineProperty(_classes, styles[variant], true), _defineProperty(_classes, styles.ellipsis, ellipsis), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.link, true), _defineProperty(_classes, styles.inverse, variant === 'inverse'), _defineProperty(_classes, styles.ellipsis, ellipsis), _defineProperty(_classes, styles['iconPlacement--' + iconPlacement], icon && this.hasVisibleChildren), _defineProperty(_classes, styles.iconOnly, icon && !this.hasVisibleChildren), _classes);
 
@@ -154,8 +181,2 @@ var props = Object.assign({
 
-      var text = ellipsis ? React.createElement(
-        'span',
-        { className: styles.text },
-        children
-      ) : children;
-
       return React.createElement(
@@ -171,3 +192,9 @@ View,
           props,
-          text
+          React.createElement(
+            'span',
+            { className: ellipsis ? styles.text : null },
+            icon && iconPlacement === 'start' && this.renderIcon(),
+            children,
+            icon && iconPlacement === 'end' && this.renderIcon()
+          )
         )
@@ -181,2 +208,7 @@ );
     }
+  }, {
+    key: 'hasVisibleChildren',
+    get: function get() {
+      return hasVisibleChildren(this.props.children);
+    }
   }]);
@@ -210,3 +242,12 @@
   */
-  margin: ThemeablePropTypes.spacing
+  margin: ThemeablePropTypes.spacing,
+  /**
+  * Add an SVG icon to the Link. Do not add icons directly as
+  * children.
+  */
+  icon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  /**
+  * Place the icon before or after the text in the Link.
+  */
+  iconPlacement: PropTypes.oneOf(['start', 'end'])
 }, _class2.defaultProps = {
@@ -216,3 +257,4 @@ variant: 'default',
   linkRef: function linkRef(link) {},
-  ellipsis: false
+  ellipsis: false,
+  iconPlacement: 'start'
 }, _temp2)) || _class);
@@ -219,0 +261,0 @@

es/components/Link/theme.js

@@ -30,3 +30,4 @@ /*
       typography = _ref.typography,
-      borders = _ref.borders;
+      borders = _ref.borders,
+      spacing = _ref.spacing;
 
@@ -43,6 +44,11 @@ return {
     outlineStyle: borders.style,
+    outlineOffset: spacing.xxxSmall,
     focusOutlineColor: 'transparent',
+    focusIconOutlineColor: colors.textBrand,
 
     colorInverse: colors.textLight,
-    focusInverseOutlineColor: 'transparent'
+    focusInverseOutlineColor: 'transparent',
+    focusInverseIconOutlineColor: colors.textLight,
+
+    iconPlusTextMargin: spacing.xxSmall
   };
@@ -49,0 +55,0 @@ }

es/components/Tag/index.js

@@ -137,2 +137,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; }; }();
           ref: this.handleRef,
+          elementRef: this.props.elementRef,
           className: classNames(className, classes),
@@ -189,2 +190,6 @@ as: onClick ? 'button' : 'span',
   onClick: PropTypes.func,
+  /**
+  * Provides a reference to the underlying html root element
+  */
+  elementRef: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -191,0 +196,0 @@ variant: PropTypes.oneOf(['default', 'inline'])

lib/components/Link/index.js

@@ -76,2 +76,6 @@ 'use strict';
 
+var _hasVisibleChildren = require('@instructure/ui-a11y/lib/utils/hasVisibleChildren');
+
+var _hasVisibleChildren2 = _interopRequireDefault(_hasVisibleChildren);
+
 var _theme = require('./theme');
@@ -94,3 +98,3 @@
     var tmpl = function tmpl() {
-      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, no-descending-specificity, selector-max-type */\n\n._3VIJ7BJ a._5tkGIfX:link,\n._3VIJ7BJ a._5tkGIfX:visited,\n._3VIJ7BJ button._5tkGIfX {\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  color: ' + theme.color + ';\n  -webkit-text-decoration: ' + theme.textDecoration + ';\n          text-decoration: ' + theme.textDecoration + ';\n  transition: color 0.2s;\n  outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.outlineColor + ';\n}\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusOutlineColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:hover,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:hover,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:hover,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    -webkit-text-decoration: ' + theme.hoverTextDecoration + ';\n            text-decoration: ' + theme.hoverTextDecoration + ';\n    color: ' + theme.hoverColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link[aria-disabled], ._3VIJ7BJ a._5tkGIfX:visited[aria-disabled], ._3VIJ7BJ button._5tkGIfX[aria-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n._3VIJ7BJ a._1sGWAA4:link,\n._3VIJ7BJ a._1sGWAA4:visited,\n._3VIJ7BJ button._1sGWAA4 {\n  color: ' + theme.colorInverse + ';\n}\n\n._3VIJ7BJ a._1sGWAA4:link:hover,\n  ._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:hover,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:hover,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    color: ' + theme.colorInverse + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseOutlineColor + ';\n  }\n\n._3VIJ7BJ button._5tkGIfX {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1em;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  align-content: flex-start;\n  text-align: inherit;\n}\n\n[dir="ltr"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n[dir="rtl"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n._1brJmps {\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n}\n\n.vWEDqYW {\n  box-sizing: border-box;\n  display: block;\n  line-height: 1.2;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n/* stylelint-enable selector-max-class, no-descending-specificity, selector-max-type */\n';
+      return '/*  imported from styles.css  */\n\n/* stylelint-disable selector-max-class, no-descending-specificity, selector-max-type */\n\n._3VIJ7BJ a._5tkGIfX:link,\n._3VIJ7BJ a._5tkGIfX:visited,\n._3VIJ7BJ button._5tkGIfX {\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-family: ' + theme.fontFamily + ';\n  font-weight: ' + theme.fontWeight + ';\n  color: ' + theme.color + ';\n  -webkit-text-decoration: ' + theme.textDecoration + ';\n          text-decoration: ' + theme.textDecoration + ';\n  transition: color 0.2s;\n  outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.outlineColor + ';\n  outline-offset: ' + theme.outlineOffset + ';\n}\n\n/* does not work in Edge or IE */\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusOutlineColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link._3DAxUVR:focus,\n    ._3VIJ7BJ a._5tkGIfX:link._3DAxUVR:active,\n    ._3VIJ7BJ a._5tkGIfX:visited._3DAxUVR:focus,\n    ._3VIJ7BJ a._5tkGIfX:visited._3DAxUVR:active,\n    ._3VIJ7BJ button._5tkGIfX._3DAxUVR:focus,\n    ._3VIJ7BJ button._5tkGIfX._3DAxUVR:active {\n      outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusIconOutlineColor + ';\n    }\n\n._3VIJ7BJ a._5tkGIfX:link:focus,\n  ._3VIJ7BJ a._5tkGIfX:link:hover,\n  ._3VIJ7BJ a._5tkGIfX:link:active,\n  ._3VIJ7BJ a._5tkGIfX:visited:focus,\n  ._3VIJ7BJ a._5tkGIfX:visited:hover,\n  ._3VIJ7BJ a._5tkGIfX:visited:active,\n  ._3VIJ7BJ button._5tkGIfX:focus,\n  ._3VIJ7BJ button._5tkGIfX:hover,\n  ._3VIJ7BJ button._5tkGIfX:active {\n    -webkit-text-decoration: ' + theme.hoverTextDecoration + ';\n            text-decoration: ' + theme.hoverTextDecoration + ';\n    color: ' + theme.hoverColor + ';\n  }\n\n._3VIJ7BJ a._5tkGIfX:link[aria-disabled], ._3VIJ7BJ a._5tkGIfX:visited[aria-disabled], ._3VIJ7BJ button._5tkGIfX[aria-disabled] {\n    cursor: not-allowed;\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n._3VIJ7BJ a._1sGWAA4:link,\n._3VIJ7BJ a._1sGWAA4:visited,\n._3VIJ7BJ button._1sGWAA4 {\n  color: ' + theme.colorInverse + ';\n}\n\n._3VIJ7BJ a._1sGWAA4:link:hover,\n  ._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:hover,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:hover,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    color: ' + theme.colorInverse + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link:focus,\n  ._3VIJ7BJ a._1sGWAA4:link:active,\n  ._3VIJ7BJ a._1sGWAA4:visited:focus,\n  ._3VIJ7BJ a._1sGWAA4:visited:active,\n  ._3VIJ7BJ button._1sGWAA4:focus,\n  ._3VIJ7BJ button._1sGWAA4:active {\n    outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseOutlineColor + ';\n  }\n\n._3VIJ7BJ a._1sGWAA4:link._3DAxUVR:focus,\n    ._3VIJ7BJ a._1sGWAA4:link._3DAxUVR:active,\n    ._3VIJ7BJ a._1sGWAA4:visited._3DAxUVR:focus,\n    ._3VIJ7BJ a._1sGWAA4:visited._3DAxUVR:active,\n    ._3VIJ7BJ button._1sGWAA4._3DAxUVR:focus,\n    ._3VIJ7BJ button._1sGWAA4._3DAxUVR:active {\n      outline: ' + theme.outlineWidth + ' ' + theme.outlineStyle + ' ' + theme.focusInverseIconOutlineColor + ';\n    }\n\n._3VIJ7BJ button._5tkGIfX {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 1em;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  align-content: flex-start;\n  text-align: inherit;\n}\n\n[dir="ltr"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n[dir="rtl"] ._3VIJ7BJ button._5tkGIfX {\n  text-align: inherit;\n}\n\n._1brJmps {\n  display: inline-block;\n  vertical-align: middle;\n  width: 100%;\n}\n\n.vWEDqYW {\n  box-sizing: border-box;\n  display: block;\n  line-height: 1.2;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n._1BwzOB4 {\n  font-size: 1.125em; /* make icon slightly larger than inherited font-size */\n}\n\n._2fUL3mU ._1BwzOB4 {\n  -webkit-margin-end: ' + theme.iconPlusTextMargin + ';\n          margin-inline-end: ' + theme.iconPlusTextMargin + ';\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n\n[dir="ltr"] ._2fUL3mU ._1BwzOB4 {\n  margin-right: ' + theme.iconPlusTextMargin + ';\n  margin-left: 0;\n}\n\n[dir="rtl"] ._2fUL3mU ._1BwzOB4 {\n  margin-left: ' + theme.iconPlusTextMargin + ';\n  margin-right: 0;\n}\n\n.eOfYul7 ._1BwzOB4 {\n  -webkit-margin-end: 0;\n          margin-inline-end: 0;\n  -webkit-margin-start: ' + theme.iconPlusTextMargin + ';\n          margin-inline-start: ' + theme.iconPlusTextMargin + ';\n}\n\n[dir="ltr"] .eOfYul7 ._1BwzOB4 {\n  margin-right: 0;\n  margin-left: ' + theme.iconPlusTextMargin + ';\n}\n\n[dir="rtl"] .eOfYul7 ._1BwzOB4 {\n  margin-left: 0;\n  margin-right: ' + theme.iconPlusTextMargin + ';\n}\n\n/* stylelint-enable selector-max-class, no-descending-specificity, selector-max-type */\n';
     };
@@ -102,5 +106,9 @@
   'link': '_5tkGIfX',
+  'iconOnly': '_3DAxUVR',
   'inverse': '_1sGWAA4',
   'ellipsis': '_1brJmps',
-  'text': 'vWEDqYW'
+  'text': 'vWEDqYW',
+  'icon': '_1BwzOB4',
+  'iconPlacement--start': '_2fUL3mU',
+  'iconPlacement--end': 'eOfYul7'
 };
@@ -149,2 +157,22 @@
   }, {
+    key: 'renderIcon',
+    value: function renderIcon() {
+      var Icon = this.props.icon;
+      if (typeof this.props.icon === 'function') {
+        return _react2.default.createElement(
+          'span',
+          { className: styles.icon },
+          _react2.default.createElement(Icon, null)
+        );
+      } else if (Icon) {
+        return _react2.default.createElement(
+          'span',
+          { className: styles.icon },
+          Icon
+        );
+      } else {
+        return null;
+      }
+    }
+  }, {
     key: 'render',
@@ -156,4 +184,4 @@ value: function render() {
       var _props = this.props,
+          disabled = _props.disabled,
           children = _props.children,
-          disabled = _props.disabled,
           onClick = _props.onClick,
@@ -165,3 +193,5 @@ variant = _props.variant,
           ellipsis = _props.ellipsis,
-          elementRef = _props.elementRef;
+          elementRef = _props.elementRef,
+          icon = _props.icon,
+          iconPlacement = _props.iconPlacement;
 
@@ -171,3 +201,3 @@
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.link, true), _defineProperty(_classes, styles[variant], true), _defineProperty(_classes, styles.ellipsis, ellipsis), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.link, true), _defineProperty(_classes, styles.inverse, variant === 'inverse'), _defineProperty(_classes, styles.ellipsis, ellipsis), _defineProperty(_classes, styles['iconPlacement--' + iconPlacement], icon && this.hasVisibleChildren), _defineProperty(_classes, styles.iconOnly, icon && !this.hasVisibleChildren), _classes);
 
@@ -193,8 +223,2 @@ var props = Object.assign({
 
-      var text = ellipsis ? _react2.default.createElement(
-        'span',
-        { className: styles.text },
-        children
-      ) : children;
-
       return _react2.default.createElement(
@@ -210,3 +234,9 @@ _View2.default,
           props,
-          text
+          _react2.default.createElement(
+            'span',
+            { className: ellipsis ? styles.text : null },
+            icon && iconPlacement === 'start' && this.renderIcon(),
+            children,
+            icon && iconPlacement === 'end' && this.renderIcon()
+          )
         )
@@ -220,2 +250,7 @@ );
     }
+  }, {
+    key: 'hasVisibleChildren',
+    get: function get() {
+      return (0, _hasVisibleChildren2.default)(this.props.children);
+    }
   }]);
@@ -249,3 +284,12 @@
   */
-  margin: _ThemeablePropTypes2.default.spacing
+  margin: _ThemeablePropTypes2.default.spacing,
+  /**
+  * Add an SVG icon to the Link. Do not add icons directly as
+  * children.
+  */
+  icon: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.element]),
+  /**
+  * Place the icon before or after the text in the Link.
+  */
+  iconPlacement: _propTypes2.default.oneOf(['start', 'end'])
 }, _class2.defaultProps = {
@@ -255,4 +299,5 @@ variant: 'default',
   linkRef: function linkRef(link) {},
-  ellipsis: false
+  ellipsis: false,
+  iconPlacement: 'start'
 }, _temp2)) || _class);
 exports.default = Link;

lib/components/Link/theme.js

@@ -13,3 +13,4 @@ 'use strict';
       typography = _ref.typography,
-      borders = _ref.borders;
+      borders = _ref.borders,
+      spacing = _ref.spacing;
 
@@ -26,6 +27,11 @@ return {
     outlineStyle: borders.style,
+    outlineOffset: spacing.xxxSmall,
     focusOutlineColor: 'transparent',
+    focusIconOutlineColor: colors.textBrand,
 
     colorInverse: colors.textLight,
-    focusInverseOutlineColor: 'transparent'
+    focusInverseOutlineColor: 'transparent',
+    focusInverseIconOutlineColor: colors.textLight,
+
+    iconPlusTextMargin: spacing.xxSmall
   };
@@ -32,0 +38,0 @@ } /*

lib/components/Tag/index.js

@@ -170,2 +170,3 @@ 'use strict';
           ref: this.handleRef,
+          elementRef: this.props.elementRef,
           className: (0, _classnames2.default)(className, classes),
@@ -222,2 +223,6 @@ as: onClick ? 'button' : 'span',
   onClick: _propTypes2.default.func,
+  /**
+  * Provides a reference to the underlying html root element
+  */
+  elementRef: _propTypes2.default.func,
   size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
@@ -224,0 +229,0 @@ variant: _propTypes2.default.oneOf(['default', 'inline'])

package.json

 {
   "name": "@instructure/ui-elements",
-  "version": "5.13.0-rc.7",
+  "version": "5.13.0-rc.18",
   "description": "A UI component library made by Instructure Inc.",
@@ -25,5 +25,5 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "devDependencies": {
-    "@instructure/ui-presets": "^5.13.0-rc.7",
-    "@instructure/ui-testbed": "^5.13.0-rc.7",
-    "@instructure/ui-themes": "^5.13.0-rc.7",
+    "@instructure/ui-presets": "^5.13.0-rc.18",
+    "@instructure/ui-testbed": "^5.13.0-rc.18",
+    "@instructure/ui-themes": "^5.13.0-rc.18",
     "react": "15.6.2",
@@ -33,9 +33,9 @@ "react-dom": "15.6.2"
   "dependencies": {
-    "@instructure/ui-a11y": "^5.13.0-rc.7",
-    "@instructure/ui-container": "^5.13.0-rc.7",
-    "@instructure/ui-icons": "^5.13.0-rc.7",
-    "@instructure/ui-layout": "^5.13.0-rc.7",
-    "@instructure/ui-motion": "^5.13.0-rc.7",
-    "@instructure/ui-themeable": "^5.13.0-rc.7",
-    "@instructure/ui-utils": "^5.13.0-rc.7",
+    "@instructure/ui-a11y": "^5.13.0-rc.18",
+    "@instructure/ui-container": "^5.13.0-rc.18",
+    "@instructure/ui-icons": "^5.13.0-rc.18",
+    "@instructure/ui-layout": "^5.13.0-rc.18",
+    "@instructure/ui-motion": "^5.13.0-rc.18",
+    "@instructure/ui-themeable": "^5.13.0-rc.18",
+    "@instructure/ui-utils": "^5.13.0-rc.18",
     "classnames": "^2.2.5",
@@ -51,3 +51,3 @@ "prop-types": "^15.5.10"
   },
-  "gitHead": "3224dc80b000aab1b5d16c0ba5fc7908a5024877"
+  "gitHead": "57e6fe8d3b5b64d69bcccbcac561ebbbd9601468"
 }

src/components/Link/index.js

@@ -37,2 +37,3 @@ /*
 import findDOMNode from '@instructure/ui-utils/lib/dom/findDOMNode'
+import hasVisibleChildren from '@instructure/ui-a11y/lib/utils/hasVisibleChildren'
 
@@ -72,3 +73,12 @@ import styles from './styles.css'
     */
-    margin: ThemeablePropTypes.spacing
+    margin: ThemeablePropTypes.spacing,
+    /**
+    * Add an SVG icon to the Link. Do not add icons directly as
+    * children.
+    */
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    /**
+    * Place the icon before or after the text in the Link.
+    */
+    iconPlacement: PropTypes.oneOf(['start', 'end'])
   }
@@ -80,3 +90,4 @@
     linkRef: function (link) {},
-    ellipsis: false
+    ellipsis: false,
+    iconPlacement: 'start'
   }
@@ -99,2 +110,6 @@
 
+  get hasVisibleChildren () {
+    return hasVisibleChildren(this.props.children)
+  }
+
   focus () {
@@ -104,6 +119,17 @@ findDOMNode(this._link).focus() // eslint-disable-line react/no-find-dom-node
 
+  renderIcon () {
+    const Icon = this.props.icon
+    if (typeof this.props.icon === 'function') {
+      return <span className={styles.icon}><Icon /></span>
+    } else if (Icon) {
+      return <span className={styles.icon}>{Icon}</span>
+    } else {
+      return null
+    }
+  }
+
   render () {
     const {
+      disabled,
       children,
-      disabled,
       onClick,
@@ -115,3 +141,5 @@ variant,
       ellipsis,
-      elementRef
+      elementRef,
+      icon,
+      iconPlacement
     } = this.props
@@ -123,4 +151,6 @@
       [styles.link]: true,
-      [styles[variant]]: true,
-      [styles.ellipsis]: ellipsis
+      [styles.inverse]: variant === 'inverse',
+      [styles.ellipsis]: ellipsis,
+      [styles[`iconPlacement--${iconPlacement}`]]: icon && this.hasVisibleChildren,
+      [styles.iconOnly]: icon && !this.hasVisibleChildren
     }
@@ -143,8 +173,2 @@
 
-    const text = ellipsis
-      ? (<span className={styles.text}>
-        {children}
-      </span>)
-      : children
-
     return (
@@ -157,3 +181,7 @@ <View
         <ElementType {...props}>
-          {text}
+          <span className={(ellipsis) ? styles.text : null}>
+            {(icon && iconPlacement === 'start') && this.renderIcon()}
+            {children}
+            {(icon && iconPlacement === 'end') && this.renderIcon()}
+          </span>
         </ElementType>
@@ -160,0 +188,0 @@ </View>

src/components/Link/README.md

@@ -41,1 +41,36 @@ ---
 ```
+
+### Using icons
+
+Use the `icon` property to put an [icon](#iconography) inside a Link. To position the
+icon _after_ the link text, change the `iconPlacement` property to `end`. You can also
+render a Link with just an icon. Don't forget to add text for screen readers, though.
+
+```js
+---
+example: true
+---
+<div>
+  <p>
+    <Link href="https://instructure.design" icon={IconUser.Solid}>Icon before text</Link>
+  </p>
+  <p>
+    <Link
+      href="https://instructure.design"
+      icon={IconUser.Solid}
+      iconPlacement="end"
+    >
+      Icon after text
+    </Link>
+  </p>
+  <p>
+    Link consisting of only an icon&nbsp;
+    <Link
+      href="https://instructure.design"
+      icon={IconUser.Solid}
+    >
+      <ScreenReaderContent>Descriptive text</ScreenReaderContent>
+    </Link>.
+  </p>
+</div>
+```

src/components/Link/theme.js

@@ -27,3 +27,3 @@ /*
 
-export default function generator ({ colors, typography, borders }) {
+export default function generator ({ colors, typography, borders, spacing }) {
   return {
@@ -39,6 +39,11 @@ fontFamily: typography.fontFamily,
     outlineStyle: borders.style,
+    outlineOffset: spacing.xxxSmall,
     focusOutlineColor: 'transparent',
+    focusIconOutlineColor: colors.textBrand,
 
     colorInverse: colors.textLight,
-    focusInverseOutlineColor: 'transparent'
+    focusInverseOutlineColor: 'transparent',
+    focusInverseIconOutlineColor: colors.textLight,
+
+    iconPlusTextMargin: spacing.xxSmall
   }
@@ -45,0 +50,0 @@ }

src/components/Tag/index.js

@@ -70,2 +70,6 @@ /*
     onClick: PropTypes.func,
+    /**
+    * Provides a reference to the underlying html root element
+    */
+    elementRef: PropTypes.func,
     size: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -133,2 +137,3 @@ variant: PropTypes.oneOf(['default', 'inline'])
         ref={this.handleRef}
+        elementRef={this.props.elementRef}
         className={classNames(className, classes)}
@@ -135,0 +140,0 @@ as={(onClick) ? 'button' : 'span'}

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

Improved metrics

Total package byte prevSize

925122

increased by2.24%

Number of package files

183

increased by1.67%

Lines of code

17523

increased by2.49%

Dependency changes

• Updated@instructure/ui-a11y@^5.13.0-rc.18

• Updated@instructure/ui-container@^5.13.0-rc.18

• Updated@instructure/ui-icons@^5.13.0-rc.18

• Updated@instructure/ui-layout@^5.13.0-rc.18

• Updated@instructure/ui-motion@^5.13.0-rc.18

• Updated@instructure/ui-themeable@^5.13.0-rc.18

• Updated@instructure/ui-utils@^5.13.0-rc.18