@react-md/icon - npm Package Compare versions

Comparing version 2.4.2 to 2.5.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [2.5.0](https://github.com/mlaursen/react-md/compare/v2.4.3...v2.5.0) (2020-12-15)
+
+### Features
+
+- [@react-md/icon](../icon): added an error icon to the IconProvider Component
+  and useIcon Hook
+  ([4dfd50a](https://github.com/mlaursen/react-md/commit/4dfd50a3c41d450b88ff2f417b27113724813bb3))
+- [@react-md/icon](../icon): added flexReverse prop to TextIconSpacing
+  ([c4ee05b](https://github.com/mlaursen/react-md/commit/c4ee05b1d0f8b8f6ed4de51f904dce2995787b81))
+
 ## [2.4.2](https://github.com/mlaursen/react-md/compare/v2.4.1...v2.4.2) (2020-10-23)
@@ -8,0 +18,0 @@

es/IconProvider.js

@@ -8,2 +8,3 @@ import React, { createContext, useContext, useMemo, } from "react";
     dropdown: React.createElement(FontIcon, null, "arrow_drop_down"),
+    error: React.createElement(FontIcon, null, "error_outline"),
     expander: React.createElement(FontIcon, null, "keyboard_arrow_down"),
@@ -47,3 +48,3 @@ forward: React.createElement(FontIcon, null, "keyboard_arrow_right"),
 export function IconProvider(_a) {
-    var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.forward, forward = _g === void 0 ? DEFAULT_ICONS.forward : _g, _h = _a.menu, menu = _h === void 0 ? DEFAULT_ICONS.menu : _h, _j = _a.notification, notification = _j === void 0 ? DEFAULT_ICONS.notification : _j, _k = _a.password, password = _k === void 0 ? DEFAULT_ICONS.password : _k, _l = _a.radio, radio = _l === void 0 ? DEFAULT_ICONS.radio : _l, _m = _a.selected, selected = _m === void 0 ? DEFAULT_ICONS.selected : _m, _o = _a.sort, sort = _o === void 0 ? DEFAULT_ICONS.sort : _o;
+    var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.error, error = _g === void 0 ? DEFAULT_ICONS.error : _g, _h = _a.forward, forward = _h === void 0 ? DEFAULT_ICONS.forward : _h, _j = _a.menu, menu = _j === void 0 ? DEFAULT_ICONS.menu : _j, _k = _a.notification, notification = _k === void 0 ? DEFAULT_ICONS.notification : _k, _l = _a.password, password = _l === void 0 ? DEFAULT_ICONS.password : _l, _m = _a.radio, radio = _m === void 0 ? DEFAULT_ICONS.radio : _m, _o = _a.selected, selected = _o === void 0 ? DEFAULT_ICONS.selected : _o, _p = _a.sort, sort = _p === void 0 ? DEFAULT_ICONS.sort : _p;
     var value = useMemo(function () { return ({
@@ -54,2 +55,3 @@ back: back,
         dropdown: dropdown,
+        error: error,
         expander: expander,
@@ -68,2 +70,3 @@ forward: forward,
         dropdown,
+        error,
         expander,
@@ -89,2 +92,3 @@ forward,
             dropdown: PropTypes.node,
+            error: PropTypes.node,
             expander: PropTypes.node,
@@ -91,0 +95,0 @@ forward: PropTypes.node,

es/TextIconSpacing.js

@@ -5,11 +5,12 @@ import React, { Children, cloneElement, isValidElement, } from "react";
     var _b;
-    var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.forceIconWrap, forceIconWrap = _f === void 0 ? false : _f, _g = _a.beforeClassName, beforeClassName = _g === void 0 ? "rmd-icon--before" : _g, _h = _a.afterClassName, afterClassName = _h === void 0 ? "rmd-icon--after" : _h, _j = _a.aboveClassName, aboveClassName = _j === void 0 ? "rmd-icon--above" : _j, _k = _a.belowClassName, belowClassName = _k === void 0 ? "rmd-icon--below" : _k;
+    var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.flexReverse, flexReverse = _f === void 0 ? false : _f, _g = _a.forceIconWrap, forceIconWrap = _g === void 0 ? false : _g, _h = _a.beforeClassName, beforeClassName = _h === void 0 ? "rmd-icon--before" : _h, _j = _a.afterClassName, afterClassName = _j === void 0 ? "rmd-icon--after" : _j, _k = _a.aboveClassName, aboveClassName = _k === void 0 ? "rmd-icon--above" : _k, _l = _a.belowClassName, belowClassName = _l === void 0 ? "rmd-icon--below" : _l;
     if (!propIcon) {
         return React.createElement(React.Fragment, null, children);
     }
+    var isAfter = flexReverse ? !iconAfter : iconAfter;
     var baseClassName = cn((_b = {},
-        _b[beforeClassName] = !stacked && !iconAfter,
-        _b[afterClassName] = !stacked && iconAfter,
-        _b[aboveClassName] = stacked && !iconAfter,
-        _b[belowClassName] = stacked && iconAfter,
+        _b[beforeClassName] = !stacked && !isAfter,
+        _b[afterClassName] = !stacked && isAfter,
+        _b[aboveClassName] = stacked && !isAfter,
+        _b[belowClassName] = stacked && isAfter,
         _b), className);
@@ -16,0 +17,0 @@ var iconEl = propIcon;

lib/IconProvider.d.ts

@@ -21,2 +21,8 @@ import { ReactElement, ReactNode } from "react";
     /**
+     * The general icon to use when there are form errors.
+     *
+     * @since 2.5.0
+     */
+    error?: ReactNode;
+    /**
      * The general icon to use for expanding content vertically.
@@ -89,3 +95,3 @@ */
  */
-export declare function IconProvider({ children, back, checkbox, download, dropdown, expander, forward, menu, notification, password, radio, selected, sort, }: IconProviderProps): ReactElement;
+export declare function IconProvider({ children, back, checkbox, download, dropdown, expander, error, forward, menu, notification, password, radio, selected, sort, }: IconProviderProps): ReactElement;
 export declare namespace IconProvider {
@@ -98,2 +104,3 @@ var propTypes: {
         dropdown: any;
+        error: any;
         expander: any;
@@ -100,0 +107,0 @@ forward: any;

lib/IconProvider.js

@@ -30,2 +30,3 @@ "use strict";
     dropdown: react_1.default.createElement(FontIcon_1.FontIcon, null, "arrow_drop_down"),
+    error: react_1.default.createElement(FontIcon_1.FontIcon, null, "error_outline"),
     expander: react_1.default.createElement(FontIcon_1.FontIcon, null, "keyboard_arrow_down"),
@@ -70,3 +71,3 @@ forward: react_1.default.createElement(FontIcon_1.FontIcon, null, "keyboard_arrow_right"),
 function IconProvider(_a) {
-    var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.forward, forward = _g === void 0 ? DEFAULT_ICONS.forward : _g, _h = _a.menu, menu = _h === void 0 ? DEFAULT_ICONS.menu : _h, _j = _a.notification, notification = _j === void 0 ? DEFAULT_ICONS.notification : _j, _k = _a.password, password = _k === void 0 ? DEFAULT_ICONS.password : _k, _l = _a.radio, radio = _l === void 0 ? DEFAULT_ICONS.radio : _l, _m = _a.selected, selected = _m === void 0 ? DEFAULT_ICONS.selected : _m, _o = _a.sort, sort = _o === void 0 ? DEFAULT_ICONS.sort : _o;
+    var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.error, error = _g === void 0 ? DEFAULT_ICONS.error : _g, _h = _a.forward, forward = _h === void 0 ? DEFAULT_ICONS.forward : _h, _j = _a.menu, menu = _j === void 0 ? DEFAULT_ICONS.menu : _j, _k = _a.notification, notification = _k === void 0 ? DEFAULT_ICONS.notification : _k, _l = _a.password, password = _l === void 0 ? DEFAULT_ICONS.password : _l, _m = _a.radio, radio = _m === void 0 ? DEFAULT_ICONS.radio : _m, _o = _a.selected, selected = _o === void 0 ? DEFAULT_ICONS.selected : _o, _p = _a.sort, sort = _p === void 0 ? DEFAULT_ICONS.sort : _p;
     var value = react_1.useMemo(function () { return ({
@@ -77,2 +78,3 @@ back: back,
         dropdown: dropdown,
+        error: error,
         expander: expander,
@@ -91,2 +93,3 @@ forward: forward,
         dropdown,
+        error,
         expander,
@@ -113,2 +116,3 @@ forward,
             dropdown: PropTypes.node,
+            error: PropTypes.node,
             expander: PropTypes.node,
@@ -115,0 +119,0 @@ forward: PropTypes.node,

lib/TextIconSpacing.d.ts

@@ -62,4 +62,11 @@ import { ReactElement, ReactNode } from "react";
     stacked?: boolean;
+    /**
+     * Boolean if the icon and content are in a `column-reverse` or `row-reverse`
+     * `flex-direction`. This will swap the different classnames as needed.
+     *
+     * @since 2.5.0
+     */
+    flexReverse?: boolean;
 }
-export declare function TextIconSpacing({ className, icon: propIcon, children, stacked, iconAfter, forceIconWrap, beforeClassName, afterClassName, aboveClassName, belowClassName, }: TextIconSpacingProps): ReactElement;
+export declare function TextIconSpacing({ className, icon: propIcon, children, stacked, iconAfter, flexReverse, forceIconWrap, beforeClassName, afterClassName, aboveClassName, belowClassName, }: TextIconSpacingProps): ReactElement;
 export declare namespace TextIconSpacing {
@@ -66,0 +73,0 @@ var propTypes: {

lib/TextIconSpacing.js

@@ -30,11 +30,12 @@ "use strict";
     var _b;
-    var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.forceIconWrap, forceIconWrap = _f === void 0 ? false : _f, _g = _a.beforeClassName, beforeClassName = _g === void 0 ? "rmd-icon--before" : _g, _h = _a.afterClassName, afterClassName = _h === void 0 ? "rmd-icon--after" : _h, _j = _a.aboveClassName, aboveClassName = _j === void 0 ? "rmd-icon--above" : _j, _k = _a.belowClassName, belowClassName = _k === void 0 ? "rmd-icon--below" : _k;
+    var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.flexReverse, flexReverse = _f === void 0 ? false : _f, _g = _a.forceIconWrap, forceIconWrap = _g === void 0 ? false : _g, _h = _a.beforeClassName, beforeClassName = _h === void 0 ? "rmd-icon--before" : _h, _j = _a.afterClassName, afterClassName = _j === void 0 ? "rmd-icon--after" : _j, _k = _a.aboveClassName, aboveClassName = _k === void 0 ? "rmd-icon--above" : _k, _l = _a.belowClassName, belowClassName = _l === void 0 ? "rmd-icon--below" : _l;
     if (!propIcon) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
+    var isAfter = flexReverse ? !iconAfter : iconAfter;
     var baseClassName = classnames_1.default((_b = {},
-        _b[beforeClassName] = !stacked && !iconAfter,
-        _b[afterClassName] = !stacked && iconAfter,
-        _b[aboveClassName] = stacked && !iconAfter,
-        _b[belowClassName] = stacked && iconAfter,
+        _b[beforeClassName] = !stacked && !isAfter,
+        _b[afterClassName] = !stacked && isAfter,
+        _b[aboveClassName] = stacked && !isAfter,
+        _b[belowClassName] = stacked && isAfter,
         _b), className);
@@ -41,0 +42,0 @@ var iconEl = propIcon;

package.json

 {
   "name": "@react-md/icon",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "This package is for including icons within react-md. There is included support for both font icons and SVG icons.  There is also a helper component for applying spacing between icons and text.",
@@ -40,10 +40,10 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/theme": "^2.4.2",
-    "@react-md/typography": "^2.4.2",
-    "@react-md/utils": "^2.4.2",
+    "@react-md/theme": "^2.5.0",
+    "@react-md/typography": "^2.5.0",
+    "@react-md/utils": "^2.5.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
@@ -59,3 +59,3 @@ "peerDependencies": {
   },
-  "gitHead": "49577fdd48d1b52db51c3d05df6cadb3c9cf0bdc"
+  "gitHead": "589d2dd83a4949a893fd0bb71256993de8fcb9d9"
 }

types/IconProvider.d.ts

@@ -21,2 +21,8 @@ import { ReactElement, ReactNode } from "react";
     /**
+     * The general icon to use when there are form errors.
+     *
+     * @since 2.5.0
+     */
+    error?: ReactNode;
+    /**
      * The general icon to use for expanding content vertically.
@@ -89,3 +95,3 @@ */
  */
-export declare function IconProvider({ children, back, checkbox, download, dropdown, expander, forward, menu, notification, password, radio, selected, sort, }: IconProviderProps): ReactElement;
+export declare function IconProvider({ children, back, checkbox, download, dropdown, expander, error, forward, menu, notification, password, radio, selected, sort, }: IconProviderProps): ReactElement;
 export declare namespace IconProvider {
@@ -98,2 +104,3 @@ var propTypes: {
         dropdown: any;
+        error: any;
         expander: any;
@@ -100,0 +107,0 @@ forward: any;

types/TextIconSpacing.d.ts

@@ -62,4 +62,11 @@ import { ReactElement, ReactNode } from "react";
     stacked?: boolean;
+    /**
+     * Boolean if the icon and content are in a `column-reverse` or `row-reverse`
+     * `flex-direction`. This will swap the different classnames as needed.
+     *
+     * @since 2.5.0
+     */
+    flexReverse?: boolean;
 }
-export declare function TextIconSpacing({ className, icon: propIcon, children, stacked, iconAfter, forceIconWrap, beforeClassName, afterClassName, aboveClassName, belowClassName, }: TextIconSpacingProps): ReactElement;
+export declare function TextIconSpacing({ className, icon: propIcon, children, stacked, iconAfter, flexReverse, forceIconWrap, beforeClassName, afterClassName, aboveClassName, belowClassName, }: TextIconSpacingProps): ReactElement;
 export declare namespace TextIconSpacing {
@@ -66,0 +73,0 @@ var propTypes: {

No alert changes

Improved metrics

Total package byte prevSize

192984

increased by2.51%

Lines of code

2486

increased by3.45%

Dependency changes

• Updated@react-md/theme@^2.5.0

• Updated@react-md/typography@^2.5.0

• Updated@react-md/utils@^2.5.0