@react-md/icon - npm Package Compare versions

Comparing version 2.0.0-alpha.10 to 2.0.0-alpha.11

es/TextIconSpacing.js

 import React, { Children, cloneElement, Fragment, isValidElement, } from "react";
 import cn from "classnames";
 var TextIconSpacing = function (props) {
-    var _a, _b;
-    var _c = props, propIcon = _c.icon, iconAfter = _c.iconAfter, children = _c.children, className = _c.className, beforeClassName = _c.beforeClassName, afterClassName = _c.afterClassName, forceIconWrap = _c.forceIconWrap;
+    var _a;
+    var _b = props, propIcon = _b.icon, stacked = _b.stacked, iconAfter = _b.iconAfter, children = _b.children, className = _b.className, beforeClassName = _b.beforeClassName, afterClassName = _b.afterClassName, aboveClassName = _b.aboveClassName, belowClassName = _b.belowClassName, forceIconWrap = _b.forceIconWrap;
     if (!propIcon) {
         return children;
     }
+    var baseClassName = cn((_a = {},
+        _a[beforeClassName] = !stacked && !iconAfter,
+        _a[afterClassName] = !stacked && iconAfter,
+        _a[aboveClassName] = stacked && !iconAfter,
+        _a[belowClassName] = stacked && iconAfter,
+        _a), className);
     var iconEl = propIcon;
@@ -14,13 +20,7 @@ var content = children;
         iconEl = cloneElement(icon, {
-            className: cn(className, (_a = {},
-                _a[beforeClassName] = !iconAfter,
-                _a[afterClassName] = iconAfter,
-                _a), icon.props.className),
+            className: cn(baseClassName, icon.props.className),
         });
     }
     else if (propIcon) {
-        iconEl = (React.createElement("span", { className: cn("rmd-text-icon-spacing", (_b = {},
-                _b[beforeClassName] = !iconAfter,
-                _b[afterClassName] = iconAfter,
-                _b), className) }, propIcon));
+        iconEl = (React.createElement("span", { className: cn("rmd-text-icon-spacing", baseClassName) }, propIcon));
     }
@@ -37,2 +37,3 @@ if (iconEl) {
     children: null,
+    stacked: false,
     iconAfter: false,
@@ -42,2 +43,4 @@ forceIconWrap: false,
     afterClassName: "rmd-icon--after",
+    aboveClassName: "rmd-icon--above",
+    belowClassName: "rmd-icon--below",
 };
@@ -61,5 +64,8 @@ TextIconSpacing.defaultProps = defaultProps;
             iconAfter: PropTypes.bool,
+            stacked: PropTypes.bool,
             children: PropTypes.node,
             beforeClassName: PropTypes.string,
             afterClassName: PropTypes.string,
+            aboveClassName: PropTypes.string,
+            belowClassName: PropTypes.string,
             forceIconWrap: PropTypes.bool,
@@ -66,0 +72,0 @@ };

lib/TextIconSpacing.js

@@ -16,7 +16,13 @@ "use strict";
 var TextIconSpacing = function (props) {
-    var _a, _b;
-    var _c = props, propIcon = _c.icon, iconAfter = _c.iconAfter, children = _c.children, className = _c.className, beforeClassName = _c.beforeClassName, afterClassName = _c.afterClassName, forceIconWrap = _c.forceIconWrap;
+    var _a;
+    var _b = props, propIcon = _b.icon, stacked = _b.stacked, iconAfter = _b.iconAfter, children = _b.children, className = _b.className, beforeClassName = _b.beforeClassName, afterClassName = _b.afterClassName, aboveClassName = _b.aboveClassName, belowClassName = _b.belowClassName, forceIconWrap = _b.forceIconWrap;
     if (!propIcon) {
         return children;
     }
+    var baseClassName = classnames_1.default((_a = {},
+        _a[beforeClassName] = !stacked && !iconAfter,
+        _a[afterClassName] = !stacked && iconAfter,
+        _a[aboveClassName] = stacked && !iconAfter,
+        _a[belowClassName] = stacked && iconAfter,
+        _a), className);
     var iconEl = propIcon;
@@ -27,13 +33,7 @@ var content = children;
         iconEl = react_1.cloneElement(icon, {
-            className: classnames_1.default(className, (_a = {},
-                _a[beforeClassName] = !iconAfter,
-                _a[afterClassName] = iconAfter,
-                _a), icon.props.className),
+            className: classnames_1.default(baseClassName, icon.props.className),
         });
     }
     else if (propIcon) {
-        iconEl = (react_1.default.createElement("span", { className: classnames_1.default("rmd-text-icon-spacing", (_b = {},
-                _b[beforeClassName] = !iconAfter,
-                _b[afterClassName] = iconAfter,
-                _b), className) }, propIcon));
+        iconEl = (react_1.default.createElement("span", { className: classnames_1.default("rmd-text-icon-spacing", baseClassName) }, propIcon));
     }
@@ -50,2 +50,3 @@ if (iconEl) {
     children: null,
+    stacked: false,
     iconAfter: false,
@@ -55,2 +56,4 @@ forceIconWrap: false,
     afterClassName: "rmd-icon--after",
+    aboveClassName: "rmd-icon--above",
+    belowClassName: "rmd-icon--below",
 };
@@ -74,5 +77,8 @@ TextIconSpacing.defaultProps = defaultProps;
             iconAfter: PropTypes.bool,
+            stacked: PropTypes.bool,
             children: PropTypes.node,
             beforeClassName: PropTypes.string,
             afterClassName: PropTypes.string,
+            aboveClassName: PropTypes.string,
+            belowClassName: PropTypes.string,
             forceIconWrap: PropTypes.bool,
@@ -79,0 +85,0 @@ };

package.json

 {
   "name": "@react-md/icon",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-alpha.11",
   "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,5 +40,5 @@ "scripts": {
   "dependencies": {
-    "@react-md/theme": "^2.0.0-alpha.10",
-    "@react-md/typography": "^2.0.0-alpha.10",
-    "@react-md/utils": "^2.0.0-alpha.10",
+    "@react-md/theme": "^2.0.0-alpha.11",
+    "@react-md/typography": "^2.0.0-alpha.11",
+    "@react-md/utils": "^2.0.0-alpha.11",
     "classnames": "^2.2.6"
@@ -55,3 +55,3 @@ },
   },
-  "gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
+  "gitHead": "740017d534dece692a4520df98de74df4d2e55c7"
 }

README.md

@@ -36,4 +36,2 @@ # @react-md/icon
 
-<!-- INCLUDING_STYLES -->
-
 ## Usage
@@ -40,0 +38,0 @@

types/SVGIcon.d.ts

@@ -7,3 +7,3 @@ import React, { HTMLAttributes, ReactNode } from "react";
      */
-    focusable?: string;
+    focusable?: "false" | "true" | boolean;
     /**
@@ -10,0 +10,0 @@ * The `viewBox` attribute allows you to specify that a given set of graphics stretch to

types/TextIconSpacing.d.ts

@@ -37,2 +37,12 @@ import { FC, ReactElement, ReactNode } from "react";
     /**
+     * The class name to use for an icon that is placed before above the text. This is used when
+     * the `stacked` prop is enabled and the `iconAfter` prop is disabled or omitted.
+     */
+    aboveClassName?: string;
+    /**
+     * The class name to use for an icon that is placed before above the text. This is used when
+     * the `stacked` prop is enabled and the `iconAfter` prop is enabled.
+     */
+    belowClassName?: string;
+    /**
      * Boolean if the icon should be forced into a `<span>` with the class names applied instead of
@@ -42,4 +52,10 @@ * attempting to clone into the provided icon.
     forceIconWrap?: boolean;
+    /**
+     * Boolean if the icon and text should be stacked instead of inline. Note: You'll normally want
+     * to update the container element to have `display: flex` and `flex-direction: column` for
+     * this to work.
+     */
+    stacked?: boolean;
 }
 declare const TextIconSpacing: FC<TextIconSpacingProps>;
 export default TextIconSpacing;

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

476886

increased by233.53%

Number of package files

63

increased by3.28%

Lines of code

1641

increased by2.88%

Worsened metrics

Number of lines in readme file

102

decreased by-1.92%

Dependency changes

• Updated@react-md/theme@^2.0.0-alpha.11

• Updated@react-md/typography@^2.0.0-alpha.11

• Updated@react-md/utils@^2.0.0-alpha.11