@hig/icon-button - npm Package Compare versions

Comparing version 2.1.3 to 2.2.0

build/index.es.js

@@ -17,48 +17,77 @@ import React, { Component } from 'react';
 
+var variants = Object.freeze({
+  DYNAMIC: "dynamic",
+  STATIC: "static"
+});
+
+var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function getStylesByHover(themeData, on) {
+function getDefaultIconTransitionProperties() {
   return {
-    boxShadow: "none",
-    "& svg *": {
-      fill: on ? themeData["iconButton.hover.on.iconColor"] : themeData["iconButton.hover.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    transitionDuration: "0.3s",
+    transitionProperty: "fill"
   };
 }
 
-function getStylesByFocus(themeData, on) {
+function getStylesByHover(themeData, surface, on, variant) {
+  var surfaceLevel = Number(surface);
+  var isDynamic = variant === "dynamic";
+  var dynamicHoverIconColor = on ? themeData["iconButton.hover.on.iconColor"] : themeData["iconButton.hover.iconColor"];
+  var hoverIconColor = isDynamic ? dynamicHoverIconColor : themeData["iconButton.static.iconColor"];
+  var staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.level100To250.backgroundColor"] : themeData["iconButton.static.hover.level300To350.backgroundColor"];
+  var staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.level100To250.backgroundColor"] : staticSurfaceLevelBackgroundColor;
+  var backgroundColor = !isDynamic ? staticHoverBackgroundColor : "transparent";
+  var staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : "transparent";
+  var borderColor = !isDynamic ? staticBorderColor : "transparent";
+
   return {
-    boxShadow: "0 0 0 " + themeData["iconButton.focus.halo.width"] + " " + themeData["iconButton.focus.halo.color"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": {
-      fill: on ? themeData["iconButton.focus.on.iconColor"] : themeData["iconButton.focus.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    boxShadow: "none",
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: hoverIconColor
+    })
   };
 }
 
-function getStylesByDisabled(themeData) {
+function getStylesByFocus(themeData, on, variant) {
+  var isDynamic = variant === "dynamic";
+  var dynamicFocusIconColor = on ? themeData["iconButton.focus.on.iconColor"] : themeData["iconButton.focus.iconColor"];
+  var focusIconColor = isDynamic ? dynamicFocusIconColor : themeData["iconButton.static.iconColor"];
+  var staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : "transparent";
+  var borderColor = !isDynamic ? staticBorderColor : "transparent";
+
   return {
-    opacity: themeData["component.disabled.opacity"],
-    pointerEvents: "none"
+    borderColor: borderColor,
+    boxShadow: "0 0 0 " + themeData["iconButton.focus.halo.width"] + " " + themeData["iconButton.focus.halo.color"],
+    transitionDuration: "0.3s, 0.3s",
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: focusIconColor
+    })
   };
 }
 
-function getStylesByPressed(themeData, surface, on) {
+function getStylesByPressed(themeData, surface, on, variant) {
   var surfaceLevel = Number(surface);
-
+  var dynamicPressedIconColor = on ? themeData["iconButton.pressed.on.iconColor"] : themeData["iconButton.pressed.iconColor"];
+  var pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : themeData["iconButton.static.iconColor"];
   return {
     backgroundColor: surfaceLevel <= 250 ? themeData["iconButton.pressed.level100To250.backgroundColor"] : themeData["iconButton.pressed.level300To350.backgroundColor"],
+    borderColor: "transparent",
     transitionDuration: "0.3s, 0.3s",
-    "& svg *": {
-      fill: on ? themeData["iconButton.pressed.on.iconColor"] : themeData["iconButton.pressed.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: pressedIconColor
+    })
   };
 }
 
+function getStylesByDisabled(themeData) {
+  return {
+    opacity: themeData["component.disabled.opacity"],
+    pointerEvents: "none"
+  };
+}
+
 function stylesheet(props, themeData, density) {
@@ -70,9 +99,16 @@ var disabled = props.disabled,
       on = props.on,
-      surface = props.surface;
+      surface = props.surface,
+      variant = props.variant;
 
   var contentHeight = density === "medium-density" ? "20px" : "16px";
+  var isDynamic = variant === "dynamic";
+  var dynamicIconColor = on ? themeData["iconButton.on.iconColor"] : themeData["iconButton.iconColor"];
+  var iconColor = isDynamic ? dynamicIconColor : "initial";
 
   return {
     iconButton: _extends({
-      border: "2px solid transparent",
+      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.backgroundColor"] : "transparent",
+      borderColor: !isDynamic && on ? themeData["iconButton.static.on.borderColor"] : "transparent",
+      borderStyle: "solid",
+      borderWidth: "1px",
       display: "inline-block",
@@ -92,7 +128,7 @@ position: "relative",
       "& svg *": {
-        fill: on ? themeData["iconButton.on.iconColor"] : themeData["iconButton.iconColor"],
+        fill: iconColor,
         transitionDuration: "0.3s",
         transitionProperty: "fill"
       }
-    }, hasFocus ? getStylesByFocus(themeData, on) : { boxShadow: "none" }, hasHover ? getStylesByHover(themeData, on) : {}, isPressed ? getStylesByPressed(themeData, surface, on) : { backgroundColor: "transparent" }, disabled ? getStylesByDisabled(themeData) : {}),
+    }, hasFocus ? getStylesByFocus(themeData, on, variant) : {}, hasHover ? getStylesByHover(themeData, surface, on, variant) : {}, isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}, disabled ? getStylesByDisabled(themeData) : {}),
     iconSpacer: {
@@ -152,3 +188,4 @@ width: "24px"
           surface = _props.surface,
-          title = _props.title;
+          title = _props.title,
+          variant = _props.variant;
 
@@ -181,3 +218,4 @@
             surface: surface,
-            title: title
+            title: title,
+            variant: variant
           });
@@ -232,3 +270,4 @@ var Element = _this2.props.link ? "a" : "button";
   surface: PropTypes.oneOf(AVAILABLE_SURFACES),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
@@ -352,2 +391,11 @@ IconButtonPresenter.__docgenInfo = {
       "description": ""
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": ""
     }
@@ -481,6 +529,11 @@ }
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * The visual variant of the icon-button
+   */
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
 IconButton.defaultProps = {
-  surface: surfaces.SURFACELEVEL100
+  surface: surfaces.SURFACELEVEL100,
+  variant: variants.DYNAMIC
 };
@@ -587,2 +640,15 @@ IconButton.__docgenInfo = {
       "description": "Title of the button for accessibility purposes"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": "The visual variant of the icon-button",
+      "defaultValue": {
+        "value": "variants.DYNAMIC",
+        "computed": true
+      }
     }
@@ -589,0 +655,0 @@ }

build/index.js

@@ -24,48 +24,77 @@ 'use strict';
 
+var variants = Object.freeze({
+  DYNAMIC: "dynamic",
+  STATIC: "static"
+});
+
+var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function getStylesByHover(themeData, on) {
+function getDefaultIconTransitionProperties() {
   return {
-    boxShadow: "none",
-    "& svg *": {
-      fill: on ? themeData["iconButton.hover.on.iconColor"] : themeData["iconButton.hover.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    transitionDuration: "0.3s",
+    transitionProperty: "fill"
   };
 }
 
-function getStylesByFocus(themeData, on) {
+function getStylesByHover(themeData, surface, on, variant) {
+  var surfaceLevel = Number(surface);
+  var isDynamic = variant === "dynamic";
+  var dynamicHoverIconColor = on ? themeData["iconButton.hover.on.iconColor"] : themeData["iconButton.hover.iconColor"];
+  var hoverIconColor = isDynamic ? dynamicHoverIconColor : themeData["iconButton.static.iconColor"];
+  var staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.level100To250.backgroundColor"] : themeData["iconButton.static.hover.level300To350.backgroundColor"];
+  var staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.level100To250.backgroundColor"] : staticSurfaceLevelBackgroundColor;
+  var backgroundColor = !isDynamic ? staticHoverBackgroundColor : "transparent";
+  var staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : "transparent";
+  var borderColor = !isDynamic ? staticBorderColor : "transparent";
+
   return {
-    boxShadow: "0 0 0 " + themeData["iconButton.focus.halo.width"] + " " + themeData["iconButton.focus.halo.color"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": {
-      fill: on ? themeData["iconButton.focus.on.iconColor"] : themeData["iconButton.focus.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
+    boxShadow: "none",
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: hoverIconColor
+    })
   };
 }
 
-function getStylesByDisabled(themeData) {
+function getStylesByFocus(themeData, on, variant) {
+  var isDynamic = variant === "dynamic";
+  var dynamicFocusIconColor = on ? themeData["iconButton.focus.on.iconColor"] : themeData["iconButton.focus.iconColor"];
+  var focusIconColor = isDynamic ? dynamicFocusIconColor : themeData["iconButton.static.iconColor"];
+  var staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : "transparent";
+  var borderColor = !isDynamic ? staticBorderColor : "transparent";
+
   return {
-    opacity: themeData["component.disabled.opacity"],
-    pointerEvents: "none"
+    borderColor: borderColor,
+    boxShadow: "0 0 0 " + themeData["iconButton.focus.halo.width"] + " " + themeData["iconButton.focus.halo.color"],
+    transitionDuration: "0.3s, 0.3s",
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: focusIconColor
+    })
   };
 }
 
-function getStylesByPressed(themeData, surface, on) {
+function getStylesByPressed(themeData, surface, on, variant) {
   var surfaceLevel = Number(surface);
-
+  var dynamicPressedIconColor = on ? themeData["iconButton.pressed.on.iconColor"] : themeData["iconButton.pressed.iconColor"];
+  var pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : themeData["iconButton.static.iconColor"];
   return {
     backgroundColor: surfaceLevel <= 250 ? themeData["iconButton.pressed.level100To250.backgroundColor"] : themeData["iconButton.pressed.level300To350.backgroundColor"],
+    borderColor: "transparent",
     transitionDuration: "0.3s, 0.3s",
-    "& svg *": {
-      fill: on ? themeData["iconButton.pressed.on.iconColor"] : themeData["iconButton.pressed.iconColor"],
-      transitionDuration: "0.3s",
-      transitionProperty: "fill"
-    }
+    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+      fill: pressedIconColor
+    })
   };
 }
 
+function getStylesByDisabled(themeData) {
+  return {
+    opacity: themeData["component.disabled.opacity"],
+    pointerEvents: "none"
+  };
+}
+
 function stylesheet(props, themeData, density) {
@@ -77,9 +106,16 @@ var disabled = props.disabled,
       on = props.on,
-      surface = props.surface;
+      surface = props.surface,
+      variant = props.variant;
 
   var contentHeight = density === "medium-density" ? "20px" : "16px";
+  var isDynamic = variant === "dynamic";
+  var dynamicIconColor = on ? themeData["iconButton.on.iconColor"] : themeData["iconButton.iconColor"];
+  var iconColor = isDynamic ? dynamicIconColor : "initial";
 
   return {
     iconButton: _extends({
-      border: "2px solid transparent",
+      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.backgroundColor"] : "transparent",
+      borderColor: !isDynamic && on ? themeData["iconButton.static.on.borderColor"] : "transparent",
+      borderStyle: "solid",
+      borderWidth: "1px",
       display: "inline-block",
@@ -99,7 +135,7 @@ position: "relative",
       "& svg *": {
-        fill: on ? themeData["iconButton.on.iconColor"] : themeData["iconButton.iconColor"],
+        fill: iconColor,
         transitionDuration: "0.3s",
         transitionProperty: "fill"
       }
-    }, hasFocus ? getStylesByFocus(themeData, on) : { boxShadow: "none" }, hasHover ? getStylesByHover(themeData, on) : {}, isPressed ? getStylesByPressed(themeData, surface, on) : { backgroundColor: "transparent" }, disabled ? getStylesByDisabled(themeData) : {}),
+    }, hasFocus ? getStylesByFocus(themeData, on, variant) : {}, hasHover ? getStylesByHover(themeData, surface, on, variant) : {}, isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}, disabled ? getStylesByDisabled(themeData) : {}),
     iconSpacer: {
@@ -159,3 +195,4 @@ width: "24px"
           surface = _props.surface,
-          title = _props.title;
+          title = _props.title,
+          variant = _props.variant;
 
@@ -188,3 +225,4 @@
             surface: surface,
-            title: title
+            title: title,
+            variant: variant
           });
@@ -239,3 +277,4 @@ var Element = _this2.props.link ? "a" : "button";
   surface: PropTypes.oneOf(AVAILABLE_SURFACES),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
@@ -359,2 +398,11 @@ IconButtonPresenter.__docgenInfo = {
       "description": ""
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": ""
     }
@@ -488,6 +536,11 @@ }
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * The visual variant of the icon-button
+   */
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
 IconButton.defaultProps = {
-  surface: surfaces.SURFACELEVEL100
+  surface: surfaces.SURFACELEVEL100,
+  variant: variants.DYNAMIC
 };
@@ -594,2 +647,15 @@ IconButton.__docgenInfo = {
       "description": "Title of the button for accessibility purposes"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": "The visual variant of the icon-button",
+      "defaultValue": {
+        "value": "variants.DYNAMIC",
+        "computed": true
+      }
     }
@@ -596,0 +662,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/icon-button-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/icon-button@2.1.3...@hig/icon-button@2.2.0) (2019-08-01)
+
+
+### Features
+
+* add static variant ([d8ace9d](https://github.com/Autodesk/hig/commit/d8ace9d))
+
 # [@hig/icon-button-v2.1.3](https://github.com/Autodesk/hig/compare/@hig/icon-button@2.1.2...@hig/icon-button@2.1.3) (2019-07-26)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/icon-button",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "HIG IconButton component",
@@ -34,3 +34,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.8.0",
+    "@hig/theme-data": "^2.8.1",
     "react": "^15.4.1 || ^16.3.2"
@@ -37,0 +37,0 @@ },

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

50407

increased by13.41%

Lines of code

1220

increased by11.31%

No dependency changes