@instructure/ui-elements - npm Package Compare versions

Comparing version 5.4.0 to 5.4.1-dev.0

es/components/Avatar/index.js

@@ -40,3 +40,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 '@instructure/ui-layout/lib/components/View';
 import addEventListener from '@instructure/ui-utils/lib/dom/addEventListener';
@@ -46,2 +46,3 @@
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes';
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps';
 
@@ -146,20 +147,18 @@ var styles = {
     value: function render() {
-      var _classes;
+      var _classnames;
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles[this.props.size], true), _defineProperty(_classes, styles[this.props.variant], true), _classes);
-
-      var style = this.state.loaded ? {
-        backgroundImage: 'url(\'' + this.props.src + '\')'
-      } : null;
-
       return React.createElement(
-        Container,
-        {
-          style: style,
-          className: classnames(classes),
+        View,
+        Object.assign({}, omitProps(this.props, Object.assign({}, Avatar.propTypes, View.propTypes)), {
+          style: {
+            backgroundImage: this.state.loaded ? 'url(\'' + this.props.src + '\')' : undefined
+          },
+          className: classnames((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles[this.props.variant], true), _classnames)),
           'aria-label': this.props.alt ? this.props.alt : null,
           role: this.props.alt ? 'img' : null,
+          as: this.props.as,
+          elementRef: this.props.elementRef,
           margin: this.props.margin,
-          display: this.props.inline ? 'inline' : 'block'
-        },
+          display: this.props.inline ? 'inline-block' : 'block'
+        }),
         !this.state.loaded && this.renderInitials()
@@ -166,0 +165,0 @@ );

lib/components/Avatar/index.js

@@ -43,9 +43,9 @@ 'use strict';
 
-var _classnames = require('classnames');
+var _classnames2 = require('classnames');
 
-var _classnames2 = _interopRequireDefault(_classnames);
+var _classnames3 = _interopRequireDefault(_classnames2);
 
-var _Container = require('@instructure/ui-container/lib/components/Container');
+var _View = require('@instructure/ui-layout/lib/components/View');
 
-var _Container2 = _interopRequireDefault(_Container);
+var _View2 = _interopRequireDefault(_View);
 
@@ -64,2 +64,4 @@ var _addEventListener = require('@instructure/ui-utils/lib/dom/addEventListener');
 
+var _passthroughProps = require('@instructure/ui-utils/lib/react/passthroughProps');
+
 var _theme = require('./theme');
@@ -176,20 +178,18 @@
     value: function render() {
-      var _classes;
+      var _classnames;
 
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles[this.props.size], true), _defineProperty(_classes, styles[this.props.variant], true), _classes);
-
-      var style = this.state.loaded ? {
-        backgroundImage: 'url(\'' + this.props.src + '\')'
-      } : null;
-
       return _react2.default.createElement(
-        _Container2.default,
-        {
-          style: style,
-          className: (0, _classnames2.default)(classes),
+        _View2.default,
+        Object.assign({}, (0, _passthroughProps.omitProps)(this.props, Object.assign({}, Avatar.propTypes, _View2.default.propTypes)), {
+          style: {
+            backgroundImage: this.state.loaded ? 'url(\'' + this.props.src + '\')' : undefined
+          },
+          className: (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, styles.root, true), _defineProperty(_classnames, styles[this.props.size], true), _defineProperty(_classnames, styles[this.props.variant], true), _classnames)),
           'aria-label': this.props.alt ? this.props.alt : null,
           role: this.props.alt ? 'img' : null,
+          as: this.props.as,
+          elementRef: this.props.elementRef,
           margin: this.props.margin,
-          display: this.props.inline ? 'inline' : 'block'
-        },
+          display: this.props.inline ? 'inline-block' : 'block'
+        }),
         !this.state.loaded && this.renderInitials()
@@ -196,0 +196,0 @@ );

package.json

 {
   "name": "@instructure/ui-elements",
-  "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",
     "react": "15.6.2",
@@ -32,9 +32,9 @@ "react-dom": "15.6.2"
   "dependencies": {
-    "@instructure/ui-a11y": "^5.4.0",
-    "@instructure/ui-container": "^5.4.0",
-    "@instructure/ui-icons": "^5.4.0",
-    "@instructure/ui-layout": "^5.4.0",
-    "@instructure/ui-motion": "^5.4.0",
-    "@instructure/ui-themeable": "^5.4.0",
-    "@instructure/ui-utils": "^5.4.0",
+    "@instructure/ui-a11y": "^5.4.1-dev.0",
+    "@instructure/ui-container": "^5.4.1-dev.0",
+    "@instructure/ui-icons": "^5.4.1-dev.0",
+    "@instructure/ui-layout": "^5.4.1-dev.0",
+    "@instructure/ui-motion": "^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",
@@ -41,0 +41,0 @@ "prop-types": "^15.5.10"

src/components/Avatar/index.js

@@ -28,3 +28,3 @@ /*
 
-import Container from '@instructure/ui-container/lib/components/Container'
+import View from '@instructure/ui-layout/lib/components/View'
 import addEventListener from '@instructure/ui-utils/lib/dom/addEventListener'
@@ -34,2 +34,3 @@
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
+import { omitProps } from '@instructure/ui-utils/lib/react/passthroughProps'
 
@@ -123,25 +124,24 @@ import styles from './styles.css'
   render () {
-    const classes = {
-      [styles.root]: true,
-      [styles[this.props.size]]: true,
-      [styles[this.props.variant]]: true
-    }
-
-    const style = this.state.loaded ? {
-      backgroundImage: `url('${this.props.src}')`
-    } : null
-
     return (
-      <Container
-        style={style}
-        className={classnames(classes)}
+      <View
+        {...omitProps(this.props, { ...Avatar.propTypes, ...View.propTypes })}
+        style={{
+          backgroundImage: this.state.loaded ? `url('${this.props.src}')` : undefined
+        }}
+        className={classnames({
+          [styles.root]: true,
+          [styles[this.props.size]]: true,
+          [styles[this.props.variant]]: true
+        })}
         aria-label={this.props.alt ? this.props.alt : null}
         role={this.props.alt ? 'img' : null}
+        as={this.props.as}
+        elementRef={this.props.elementRef}
         margin={this.props.margin}
-        display={this.props.inline ? 'inline' : 'block'}
+        display={this.props.inline ? 'inline-block' : 'block'}
       >
         {!this.state.loaded && this.renderInitials()}
-      </Container>
+      </View>
     )
   }
 }

src/components/MetricsList/README.md

@@ -22,3 +22,3 @@ ---
 ---
-<ContextBox padding="small">
+<ContextView padding="small" placement="center start">
   <MetricsList>
@@ -42,3 +42,3 @@ <MetricsListItem
   </MetricsList>
-</ContextBox>
+</ContextView>
 ```

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

737306

increased by0.1%

Lines of code

14145

increased by0.03%

Number of medium maintenance alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

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

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

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

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

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

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

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