@hig/tabs - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

build/index.es.js

@@ -157,4 +157,4 @@ import memoize from 'lodash.memoize';
   var active = _ref.active,
-      hasFocus = _ref.hasFocus,
       hasHover = _ref.hasHover,
+      isPressed = _ref.isPressed,
       label = _ref.label;
@@ -196,3 +196,3 @@
         borderBottomWidth: themeData["tabs.general.tab.hover.borderBottomWidth"]
-      }, active && {
+      }, (active || isPressed) && {
         borderBottomColor: themeData["tabs.general.tab.selected.borderBottomColor"],
@@ -211,3 +211,3 @@ borderBottomWidth: themeData["tabs.general.tab.selected.borderBottomWidth"]
 
-      "&:after": _extends({
+      "&:after": {
         position: "absolute",
@@ -218,7 +218,4 @@ content: "''",
         width: "calc(100% - (2 * " + themeData["density.spacings.small"] + "))"
+      },
 
-      }, hasFocus && {
-        borderBottom: themeData["tabs.general.tab.focus.halo.width"] + " solid " + themeData["tabs.general.tab.focus.halo.color"]
-      }),
-
       "&:first-of-type:after": {
@@ -282,2 +279,3 @@ left: 0,
       hasHover = _ref.hasHover,
+      isPressed = _ref.isPressed,
       label = _ref.label,
@@ -288,4 +286,6 @@ onBlur = _ref.onBlur,
       onKeyDown = _ref.onKeyDown,
+      onMouseDown = _ref.onMouseDown,
       onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave;
+      onMouseLeave = _ref.onMouseLeave,
+      onMouseUp = _ref.onMouseUp;
 
@@ -298,3 +298,3 @@ return React.createElement(
 
-      var styles = stylesheet$1({ active: active, hasFocus: hasFocus, hasHover: hasHover, label: label }, resolvedRoles);
+      var styles = stylesheet$1({ active: active, hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, label: label }, resolvedRoles);
 
@@ -311,4 +311,6 @@ return React.createElement(
             onKeyDown: onKeyDown,
+            onMouseDown: onMouseDown,
             onMouseEnter: onMouseEnter,
             onMouseLeave: onMouseLeave,
+            onMouseUp: onMouseUp,
             role: "button",
@@ -334,2 +336,3 @@ tabIndex: "0",
   hasHover: PropTypes.bool,
+  isPressed: PropTypes.bool,
   onBlur: PropTypes.func,
@@ -339,4 +342,6 @@ onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  onMouseUp: PropTypes.func
 };
@@ -375,2 +380,9 @@ TabPresenter.__docgenInfo = {
     },
+    "isPressed": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "onBlur": {
@@ -404,2 +416,9 @@ "type": {
     },
+    "onMouseDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
     "onMouseEnter": {
@@ -418,2 +437,9 @@ "type": {
       "description": ""
+    },
+    "onMouseUp": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -465,22 +491,42 @@ }
         label = _ref.label,
-        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown", "label"]);
+        onBlur = _ref.onBlur,
+        onFocus = _ref.onFocus,
+        onMouseDown = _ref.onMouseDown,
+        onMouseEnter = _ref.onMouseEnter,
+        onMouseLeave = _ref.onMouseLeave,
+        onMouseUp = _ref.onMouseUp,
+        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown", "label", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
 
     return React.createElement(
       ControlBehavior,
-      { key: label },
+      {
+        key: label,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onMouseDown: onMouseDown,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseUp: onMouseUp
+      },
       function (_ref2) {
         var hasFocus = _ref2.hasFocus,
             hasHover = _ref2.hasHover,
-            onBlur = _ref2.onBlur,
-            onFocus = _ref2.onFocus,
-            onMouseEnter = _ref2.onMouseEnter,
-            onMouseLeave = _ref2.onMouseLeave;
+            isPressed = _ref2.isPressed,
+            handleBlur = _ref2.onBlur,
+            handleFocus = _ref2.onFocus,
+            handleMouseDown = _ref2.onMouseDown,
+            handleMouseEnter = _ref2.onMouseEnter,
+            handleMouseLeave = _ref2.onMouseLeave,
+            handleMouseUp = _ref2.onMouseUp;
         return React.createElement(TabPresenter, _extends$1({
           hasFocus: hasFocus,
           hasHover: hasHover,
+          isPressed: isPressed,
           label: label,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onMouseDown: handleMouseDown,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onMouseUp: handleMouseUp,
           onClick: handleClick,
@@ -487,0 +533,0 @@ onKeyDown: handleKeyDown

build/index.js

@@ -164,4 +164,4 @@ 'use strict';
   var active = _ref.active,
-      hasFocus = _ref.hasFocus,
       hasHover = _ref.hasHover,
+      isPressed = _ref.isPressed,
       label = _ref.label;
@@ -203,3 +203,3 @@
         borderBottomWidth: themeData["tabs.general.tab.hover.borderBottomWidth"]
-      }, active && {
+      }, (active || isPressed) && {
         borderBottomColor: themeData["tabs.general.tab.selected.borderBottomColor"],
@@ -218,3 +218,3 @@ borderBottomWidth: themeData["tabs.general.tab.selected.borderBottomWidth"]
 
-      "&:after": _extends({
+      "&:after": {
         position: "absolute",
@@ -225,7 +225,4 @@ content: "''",
         width: "calc(100% - (2 * " + themeData["density.spacings.small"] + "))"
+      },
 
-      }, hasFocus && {
-        borderBottom: themeData["tabs.general.tab.focus.halo.width"] + " solid " + themeData["tabs.general.tab.focus.halo.color"]
-      }),
-
       "&:first-of-type:after": {
@@ -289,2 +286,3 @@ left: 0,
       hasHover = _ref.hasHover,
+      isPressed = _ref.isPressed,
       label = _ref.label,
@@ -295,4 +293,6 @@ onBlur = _ref.onBlur,
       onKeyDown = _ref.onKeyDown,
+      onMouseDown = _ref.onMouseDown,
       onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave;
+      onMouseLeave = _ref.onMouseLeave,
+      onMouseUp = _ref.onMouseUp;
 
@@ -305,3 +305,3 @@ return React__default.createElement(
 
-      var styles = stylesheet$1({ active: active, hasFocus: hasFocus, hasHover: hasHover, label: label }, resolvedRoles);
+      var styles = stylesheet$1({ active: active, hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, label: label }, resolvedRoles);
 
@@ -318,4 +318,6 @@ return React__default.createElement(
             onKeyDown: onKeyDown,
+            onMouseDown: onMouseDown,
             onMouseEnter: onMouseEnter,
             onMouseLeave: onMouseLeave,
+            onMouseUp: onMouseUp,
             role: "button",
@@ -341,2 +343,3 @@ tabIndex: "0",
   hasHover: PropTypes.bool,
+  isPressed: PropTypes.bool,
   onBlur: PropTypes.func,
@@ -346,4 +349,6 @@ onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  onMouseUp: PropTypes.func
 };
@@ -382,2 +387,9 @@ TabPresenter.__docgenInfo = {
     },
+    "isPressed": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "onBlur": {
@@ -411,2 +423,9 @@ "type": {
     },
+    "onMouseDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
     "onMouseEnter": {
@@ -425,2 +444,9 @@ "type": {
       "description": ""
+    },
+    "onMouseUp": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -472,22 +498,42 @@ }
         label = _ref.label,
-        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown", "label"]);
+        onBlur = _ref.onBlur,
+        onFocus = _ref.onFocus,
+        onMouseDown = _ref.onMouseDown,
+        onMouseEnter = _ref.onMouseEnter,
+        onMouseLeave = _ref.onMouseLeave,
+        onMouseUp = _ref.onMouseUp,
+        otherProps = _objectWithoutProperties(_ref, ["handleClick", "handleKeyDown", "label", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp"]);
 
     return React__default.createElement(
       behaviors.ControlBehavior,
-      { key: label },
+      {
+        key: label,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onMouseDown: onMouseDown,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseUp: onMouseUp
+      },
       function (_ref2) {
         var hasFocus = _ref2.hasFocus,
             hasHover = _ref2.hasHover,
-            onBlur = _ref2.onBlur,
-            onFocus = _ref2.onFocus,
-            onMouseEnter = _ref2.onMouseEnter,
-            onMouseLeave = _ref2.onMouseLeave;
+            isPressed = _ref2.isPressed,
+            handleBlur = _ref2.onBlur,
+            handleFocus = _ref2.onFocus,
+            handleMouseDown = _ref2.onMouseDown,
+            handleMouseEnter = _ref2.onMouseEnter,
+            handleMouseLeave = _ref2.onMouseLeave,
+            handleMouseUp = _ref2.onMouseUp;
         return React__default.createElement(TabPresenter, _extends$1({
           hasFocus: hasFocus,
           hasHover: hasHover,
+          isPressed: isPressed,
           label: label,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onMouseDown: handleMouseDown,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onMouseUp: handleMouseUp,
           onClick: handleClick,
@@ -494,0 +540,0 @@ onKeyDown: handleKeyDown

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/tabs-v1.0.2](https://github.com/Autodesk/hig/compare/@hig/tabs@1.0.1...@hig/tabs@1.0.2) (2019-03-20)
+
+
+### Bug Fixes
+
+* use active underline for pressed state ([8f9885a](https://github.com/Autodesk/hig/commit/8f9885a))
+
 # [@hig/tabs-v1.0.1](https://github.com/Autodesk/hig/compare/@hig/tabs@1.0.0...@hig/tabs@1.0.1) (2019-03-13)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "HIG Tabs",
@@ -5,0 +5,0 @@ "author": "Autodesk Inc.",

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

54430

increased by5.44%

Lines of code

1470

increased by6.83%

No dependency changes