@instructure/ui-layout - npm Package Compare versions

Comparing version 5.9.0 to 5.10.0

es/components/View/index.js

 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 _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
@@ -44,2 +44,4 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes';
+import { mirrorShorthandEdges, mirrorShorthandCorners } from '@instructure/ui-themeable/lib/utils/mirrorShorthand';
+import bidirectional, { DIRECTION } from '@instructure/ui-i18n/lib/bidirectional';
 
@@ -97,3 +99,3 @@ import warning from '@instructure/ui-utils/lib/warning';
   size: 'maxWidth'
-}), _dec2 = themeable(theme, styles), _dec(_class = _dec2(_class = (_temp = _class2 = function (_Component) {
+}), _dec2 = bidirectional(), _dec3 = themeable(theme, styles), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = function (_Component) {
   _inherits(View, _Component);
@@ -194,8 +196,8 @@
 
-      // TODO: Restore once we get a fixed direction for RTL support
-      // if (dir === 'rtl') {
-      //   borderRadius = convertRtlShorthandCorners(borderRadius)
-      //   borderWidth = convertRtlShorthandEdges(borderWidth)
-      // }
 
+      if (this.dir === DIRECTION.rtl) {
+        borderRadius = mirrorShorthandCorners(borderRadius);
+        borderWidth = mirrorShorthandEdges(borderWidth);
+      }
+
       return {
@@ -213,8 +215,8 @@ borderRadius: getShorthandPropValue(this.displayName, this.theme, borderRadius, 'borderRadius'),
 
-      // TODO: Restore once we get a fixed direction for RTL support
-      // if (dir === 'rtl') {
-      //   margin = convertRtlShorthandEdges(margin)
-      //   padding = convertRtlShorthandEdges(padding)
-      // }
 
+      if (this.dir === 'rtl') {
+        margin = mirrorShorthandEdges(margin);
+        padding = mirrorShorthandEdges(padding);
+      }
+
       return {
@@ -332,5 +334,5 @@ margin: getShorthandPropValue(this.displayName, this.theme, margin, 'margin'),
   // don't break consuming components' CSS
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 
 
 export default View;

lib/components/View/index.js

@@ -9,25 +9,25 @@ 'use strict';
 
-var _dec, _dec2, _class, _class2, _temp; /*
-                                          * The MIT License (MIT)
-                                          *
-                                          * Copyright (c) 2015 - present Instructure, Inc.
-                                          *
-                                          * Permission is hereby granted, free of charge, to any person obtaining a copy
-                                          * of this software and associated documentation files (the "Software"), to deal
-                                          * in the Software without restriction, including without limitation the rights
-                                          * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-                                          * copies of the Software, and to permit persons to whom the Software is
-                                          * furnished to do so, subject to the following conditions:
-                                          *
-                                          * The above copyright notice and this permission notice shall be included in all
-                                          * copies or substantial portions of the Software.
-                                          *
-                                          * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-                                          * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-                                          * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-                                          * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-                                          * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-                                          * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-                                          * SOFTWARE.
-                                          */
+var _dec, _dec2, _dec3, _class, _class2, _temp; /*
+                                                 * The MIT License (MIT)
+                                                 *
+                                                 * Copyright (c) 2015 - present Instructure, Inc.
+                                                 *
+                                                 * Permission is hereby granted, free of charge, to any person obtaining a copy
+                                                 * of this software and associated documentation files (the "Software"), to deal
+                                                 * in the Software without restriction, including without limitation the rights
+                                                 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+                                                 * copies of the Software, and to permit persons to whom the Software is
+                                                 * furnished to do so, subject to the following conditions:
+                                                 *
+                                                 * The above copyright notice and this permission notice shall be included in all
+                                                 * copies or substantial portions of the Software.
+                                                 *
+                                                 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+                                                 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+                                                 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+                                                 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+                                                 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+                                                 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+                                                 * SOFTWARE.
+                                                 */
 
@@ -58,2 +58,8 @@ var _react = require('react');
 
+var _mirrorShorthand = require('@instructure/ui-themeable/lib/utils/mirrorShorthand');
+
+var _bidirectional = require('@instructure/ui-i18n/lib/bidirectional');
+
+var _bidirectional2 = _interopRequireDefault(_bidirectional);
+
 var _warning = require('@instructure/ui-utils/lib/warning');
@@ -138,3 +144,3 @@
   size: 'maxWidth'
-}), _dec2 = (0, _uiThemeable2.default)(_theme2.default, styles), _dec(_class = _dec2(_class = (_temp = _class2 = function (_Component) {
+}), _dec2 = (0, _bidirectional2.default)(), _dec3 = (0, _uiThemeable2.default)(_theme2.default, styles), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = function (_Component) {
   _inherits(View, _Component);
@@ -235,8 +241,8 @@
 
-      // TODO: Restore once we get a fixed direction for RTL support
-      // if (dir === 'rtl') {
-      //   borderRadius = convertRtlShorthandCorners(borderRadius)
-      //   borderWidth = convertRtlShorthandEdges(borderWidth)
-      // }
 
+      if (this.dir === _bidirectional.DIRECTION.rtl) {
+        borderRadius = (0, _mirrorShorthand.mirrorShorthandCorners)(borderRadius);
+        borderWidth = (0, _mirrorShorthand.mirrorShorthandEdges)(borderWidth);
+      }
+
       return {
@@ -254,8 +260,8 @@ borderRadius: (0, _getShorthandPropValue2.default)(this.displayName, this.theme, borderRadius, 'borderRadius'),
 
-      // TODO: Restore once we get a fixed direction for RTL support
-      // if (dir === 'rtl') {
-      //   margin = convertRtlShorthandEdges(margin)
-      //   padding = convertRtlShorthandEdges(padding)
-      // }
 
+      if (this.dir === 'rtl') {
+        margin = (0, _mirrorShorthand.mirrorShorthandEdges)(margin);
+        padding = (0, _mirrorShorthand.mirrorShorthandEdges)(padding);
+      }
+
       return {
@@ -373,3 +379,3 @@ margin: (0, _getShorthandPropValue2.default)(this.displayName, this.theme, margin, 'margin'),
   // don't break consuming components' CSS
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 exports.default = View;

package.json

 {
   "name": "@instructure/ui-layout",
-  "version": "5.9.0",
+  "version": "5.10.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.9.0",
-    "@instructure/ui-themes": "^5.9.0",
+    "@instructure/ui-presets": "^5.10.0",
+    "@instructure/ui-themes": "^5.10.0",
     "postcss-mixins": "6.2.0",
@@ -34,7 +34,7 @@ "postcss-simple-vars": "4.1.0",
   "dependencies": {
-    "@instructure/ui-i18n": "^5.9.0",
-    "@instructure/ui-motion": "^5.9.0",
-    "@instructure/ui-portal": "^5.9.0",
-    "@instructure/ui-themeable": "^5.9.0",
-    "@instructure/ui-utils": "^5.9.0",
+    "@instructure/ui-i18n": "^5.10.0",
+    "@instructure/ui-motion": "^5.10.0",
+    "@instructure/ui-portal": "^5.10.0",
+    "@instructure/ui-themeable": "^5.10.0",
+    "@instructure/ui-utils": "^5.10.0",
     "classnames": "^2.2.5",
@@ -41,0 +41,0 @@ "prop-types": "^15.5.10"

src/components/View/index.js

@@ -32,3 +32,6 @@ /*
 import ThemeablePropTypes from '@instructure/ui-themeable/lib/utils/ThemeablePropTypes'
+import { mirrorShorthandEdges, mirrorShorthandCorners } from '@instructure/ui-themeable/lib/utils/mirrorShorthand'
+import bidirectional, { DIRECTION } from '@instructure/ui-i18n/lib/bidirectional'
 
+
 import warning from '@instructure/ui-utils/lib/warning'
@@ -52,2 +55,3 @@ import CustomPropTypes from '@instructure/ui-utils/lib/react/CustomPropTypes'
 })
+@bidirectional()
 @themeable(theme, styles)
@@ -176,9 +180,8 @@ class View extends Component {
   get borderStyle () {
-    const { borderRadius, borderWidth } = this.props
+    let { borderRadius, borderWidth } = this.props
 
-    // TODO: Restore once we get a fixed direction for RTL support
-    // if (dir === 'rtl') {
-    //   borderRadius = convertRtlShorthandCorners(borderRadius)
-    //   borderWidth = convertRtlShorthandEdges(borderWidth)
-    // }
+    if (this.dir === DIRECTION.rtl) {
+      borderRadius = mirrorShorthandCorners(borderRadius)
+      borderWidth = mirrorShorthandEdges(borderWidth)
+    }
 
@@ -192,9 +195,8 @@ return {
   get spacingStyle () {
-    const { margin, padding } = this.props
+    let { margin, padding } = this.props
 
-    // TODO: Restore once we get a fixed direction for RTL support
-    // if (dir === 'rtl') {
-    //   margin = convertRtlShorthandEdges(margin)
-    //   padding = convertRtlShorthandEdges(padding)
-    // }
+    if (this.dir === 'rtl') {
+      margin = mirrorShorthandEdges(margin)
+      padding = mirrorShorthandEdges(padding)
+    }
 
@@ -201,0 +203,0 @@ return {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

712728

increased by0.08%

Lines of code

12975

increased by0.02%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@instructure/ui-i18n@^5.10.0

• Updated@instructure/ui-motion@^5.10.0

• Updated@instructure/ui-portal@^5.10.0

• Updated@instructure/ui-themeable@^5.10.0

• Updated@instructure/ui-utils@^5.10.0