@hig/tabs - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

build/index.es.js

@@ -53,3 +53,3 @@ import React, { Component, Children } from 'react';
 
-  if (variant === variants.UNDERLINE) {
+  if (variant && variant === variants.UNDERLINE) {
     styles = _extends({}, styles, {
@@ -80,3 +80,3 @@ bottom: 0,
     }
-  } else if (variant === variants.BOX) {
+  } else if (variant && variant === variants.BOX) {
     styles = _extends({}, styles, {
@@ -87,3 +87,3 @@ top: 0,
 
-    if (orientation === orientations.VERTICAL) {
+    if (orientation && orientation === orientations.VERTICAL) {
       styles.height = "100%";
@@ -111,3 +111,3 @@ if (!disabled && hasFocus) {
 
-  if (!disabled && variant !== variants.UNDERLINE) {
+  if (!disabled && variant && variant !== variants.UNDERLINE) {
     if (active || isPressed) {
@@ -137,4 +137,15 @@ return themeData["tabs." + variant + ".tab.active.backgroundColor"];
 
+function getIconColor(_ref4, themeData) {
+  var hasHover = _ref4.hasHover,
+      isPressed = _ref4.isPressed;
+
+  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
+  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
+  return themeData["tabs.closeButton.default.iconColor"];
+}
+
 function stylesheet(props, themeData) {
   var active = props.active,
+      hasHover = props.hasHover,
+      isPressed = props.isPressed,
       label = props.label,
@@ -145,6 +156,7 @@ icon = props.icon,
       disabled = props.disabled,
-      closable = props.closable;
+      closable = props.closable,
+      customStylesheet = props.stylesheet;
 
 
-  return {
+  var styles = {
     tab: _extends({
@@ -155,3 +167,3 @@ position: "relative",
 
-    }, variant === variants.UNDERLINE && {
+    }, variant && variant === variants.UNDERLINE && {
       marginRight: themeData["tabs.underline.tab.gutter"],
@@ -165,3 +177,3 @@ "&:last-of-type": {
       display: "flex",
-      width: orientation === orientations.VERTICAL ? "100%" : "auto",
+      width: orientation && orientation === orientations.VERTICAL ? "100%" : "auto",
       userSelect: "none",
@@ -178,8 +190,8 @@ cursor: disabled ? "default" : "pointer",
 
-    }, variant === variants.UNDERLINE && {
+    }, variant && variant === variants.UNDERLINE && {
       marginBottom: "-" + themeData["tabs.underline.wrapper.borderBottomWidth"],
       padding: "0 0 " + themeData["tabs.underline.tab.paddingBottom"] + " 0"
-    }, variant === variants.BOX && {
+    }, variant && variant === variants.BOX && {
       padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
-    }, variant === variants.CANVAS && {
+    }, variant && variant === variants.CANVAS && {
       padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
@@ -192,6 +204,6 @@ transform: "skewX(-23deg)",
       flexGrow: "1",
-      transform: variant === variants.CANVAS ? "skewX(23deg)" : "none",
+      transform: variant && variant === variants.CANVAS ? "skewX(23deg)" : "none",
       opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "1",
       width: getContentWrapperWidth(props, themeData),
-      display: orientation === orientations.VERTICAL ? "block" : "flex"
+      display: orientation && orientation === orientations.VERTICAL ? "block" : "flex"
     },
@@ -207,5 +219,5 @@ label: {
       textAlign: "center",
-      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
+      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
 
-      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
+      paddingRight: closable && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
 
@@ -229,3 +241,3 @@ color: themeData["tabs.label.fontColor"],
     halo: getHaloStyles(props, themeData),
-    divider: _extends({}, variant !== variants.UNDERLINE && {
+    divider: _extends({}, variant && variant !== variants.UNDERLINE && {
       position: "absolute",
@@ -254,20 +266,3 @@ top: "50%",
       transform: "translateY(-50%)"
-    }
-  };
-}
-
-function getIconColor(_ref, themeData) {
-  var hasHover = _ref.hasHover,
-      isPressed = _ref.isPressed;
-
-  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
-  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
-  return themeData["tabs.closeButton.default.iconColor"];
-}
-
-function stylesheet$1(_ref2, themeData) {
-  var hasHover = _ref2.hasHover,
-      isPressed = _ref2.isPressed;
-
-  return {
+    },
     button: {
@@ -289,4 +284,14 @@ boxShadow: "none",
       }
+    },
+    content: {
+      flexGrow: 1,
+      flexShrink: 1
     }
   };
+
+  if (customStylesheet) {
+    return customStylesheet(styles, props, themeData);
+  }
+
+  return styles;
 }
@@ -325,3 +330,4 @@
           onClick = _props.onClick,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
 
@@ -361,3 +367,3 @@ function handleClick(event) {
 
-              var styles = stylesheet$1({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed }, resolvedRoles, metadata);
+              var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
               var className = otherProps.className;
@@ -426,3 +432,7 @@
    */
-  onMouseUp: PropTypes.func
+  onMouseUp: PropTypes.func,
+  /**
+   * Function to modify the component's styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -488,2 +498,9 @@ TabCloseButtonPresenter.__docgenInfo = {
       "description": "Called when mouse is released over the button"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -514,3 +531,4 @@ }
       onClose = _ref.onClose,
-      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose"]);
+      customStylesheet = _ref.stylesheet,
+      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"]);
 
@@ -534,3 +552,4 @@ return React.createElement(
         disabled: disabled,
-        closable: closable
+        closable: closable,
+        stylesheet: customStylesheet
       }, resolvedRoles, metadata);
@@ -589,3 +608,4 @@
               className: cx(css(styles.closeButton), closeButtonClassName),
-              onClick: onClose
+              onClick: onClose,
+              stylesheet: customStylesheet
             })
@@ -619,3 +639,4 @@ ),
   onMouseLeave: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  stylesheet: PropTypes.func
 };
@@ -773,2 +794,9 @@
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -804,7 +832,8 @@ }
           active = _props.active,
+          closable = _props.closable,
+          disabled = _props.disabled,
+          icon = _props.icon,
           label = _props.label,
-          icon = _props.icon,
-          disabled = _props.disabled,
-          closable = _props.closable,
-          otherProps = _objectWithoutProperties$2(_props, ["active", "label", "icon", "disabled", "closable"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties$2(_props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
 
@@ -857,3 +886,4 @@ var className = otherProps.className;
             onClose: onClose,
-            className: className
+            className: className,
+            stylesheet: customStylesheet
           });
@@ -878,6 +908,11 @@ }
   /**
-   * Sets the label of a tab
+   * Specify if the tab will have a close button
+   * Only works when varient prop of parent Tabs is set to "box" or "canvas"
    */
-  label: PropTypes.string,
+  closable: PropTypes.bool,
   /**
+   * Specify if the tab is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
    * A @hig/icon element
@@ -888,10 +923,9 @@ * Icon will only be displayed when varient prop of parent Tabs is set to "box" or "canvas"
   /**
-   * Specify if the tab is disabled
+   * Sets the label of a tab
    */
-  disabled: PropTypes.bool,
+  label: PropTypes.string,
   /**
-   * Specify if the tab will have a close button
-   * Only works when varient prop of parent Tabs is set to "box" or "canvas"
+   * Function to modify the component's styles
    */
-  closable: PropTypes.bool
+  stylesheet: PropTypes.func
 };
@@ -918,16 +952,13 @@ Tab.defaultProps = {
     },
-    "label": {
+    "closable": {
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false,
-      "description": "Sets the label of a tab"
+      "description": "Specify if the tab will have a close button\nOnly works when varient prop of parent Tabs is set to \"box\" or \"canvas\"",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
     },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": "A @hig/icon element\nIcon will only be displayed when varient prop of parent Tabs is set to \"box\" or \"canvas\""
-    },
     "disabled": {
@@ -944,12 +975,22 @@ "type": {
     },
-    "closable": {
+    "icon": {
       "type": {
-        "name": "bool"
+        "name": "node"
       },
       "required": false,
-      "description": "Specify if the tab will have a close button\nOnly works when varient prop of parent Tabs is set to \"box\" or \"canvas\"",
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      }
+      "description": "A @hig/icon element\nIcon will only be displayed when varient prop of parent Tabs is set to \"box\" or \"canvas\""
+    },
+    "label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Sets the label of a tab"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -959,16 +1000,2 @@ }
 
-function stylesheet$2(_ref) {
-  var orientation = _ref.orientation;
-
-  return {
-    wrapper: {
-      display: "flex",
-      flexWrap: "nowrap",
-      justifyContent: "flex-start",
-      alignItems: "stretch",
-      flexDirection: orientation === orientations.HORIZONTAL ? "column" : "row"
-    }
-  };
-}
-
 var _extends$2 = 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; };
@@ -988,12 +1015,21 @@
 
-function stylesheet$3(_ref, themeData) {
+function stylesheet$1(props, themeData) {
   var _justifyContent;
 
-  var align = _ref.align,
-      variant = _ref.variant,
-      orientation = _ref.orientation;
+  var align = props.align,
+      orientation = props.orientation,
+      customStylesheet = props.stylesheet,
+      variant = props.variant;
 
+
   var justifyContent = (_justifyContent = {}, _defineProperty(_justifyContent, alignments.LEFT, "flex-start"), _defineProperty(_justifyContent, alignments.CENTER, "center"), _defineProperty(_justifyContent, alignments.RIGHT, "flex-end"), _justifyContent);
 
-  return {
+  var styles = {
+    wrapper: {
+      display: "flex",
+      flexWrap: "nowrap",
+      justifyContent: "flex-start",
+      alignItems: "stretch",
+      flexDirection: orientation === orientations.HORIZONTAL ? "column" : "row"
+    },
     tabsWrapper: _extends$2({
@@ -1016,2 +1052,8 @@ boxSizing: "border-box",
   };
+
+  if (customStylesheet) {
+    return customStylesheet(styles, props, themeData);
+  }
+
+  return styles;
 }
@@ -1022,7 +1064,8 @@
 function TabsPresenter(_ref) {
-  var children = _ref.children,
-      align = _ref.align,
+  var align = _ref.align,
+      children = _ref.children,
+      orientation = _ref.orientation,
+      customStylesheet = _ref.stylesheet,
       variant = _ref.variant,
-      orientation = _ref.orientation,
-      otherProps = _objectWithoutProperties$3(_ref, ["children", "align", "variant", "orientation"]);
+      otherProps = _objectWithoutProperties$3(_ref, ["align", "children", "orientation", "stylesheet", "variant"]);
 
@@ -1035,3 +1078,3 @@ return React.createElement(
 
-      var styles = stylesheet$3({ align: align, variant: variant, orientation: orientation }, resolvedRoles);
+      var styles = stylesheet$1({ align: align, orientation: orientation, stylesheet: customStylesheet, variant: variant }, resolvedRoles);
 
@@ -1055,3 +1098,4 @@ var className = otherProps.className;
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  children: PropTypes.node
+  children: PropTypes.node,
+  stylesheet: PropTypes.func
 };
@@ -1113,2 +1157,9 @@
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -1118,11 +1169,2 @@ }
 
-function stylesheet$4() {
-  return {
-    content: {
-      flexGrow: 1,
-      flexShrink: 1
-    }
-  };
-}
-
 function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -1132,7 +1174,9 @@
   var children = _ref.children,
-      otherProps = _objectWithoutProperties$4(_ref, ["children"]);
+      customStylesheet = _ref.stylesheet,
+      otherProps = _objectWithoutProperties$4(_ref, ["children", "stylesheet"]);
 
-  var styles = stylesheet$4();
-  var customClassName = createCustomClassNames(otherProps.className, "content");
+  var className = otherProps.className;
 
+  var styles = stylesheet({ stylesheet: customStylesheet }, {});
+  var customClassName = createCustomClassNames(className, "content");
   return React.createElement(
@@ -1146,3 +1190,4 @@ "div",
 ContentPresenter.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  stylesheet: PropTypes.func
 };
@@ -1159,2 +1204,9 @@ ContentPresenter.__docgenInfo = {
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -1418,4 +1470,5 @@ }
       var _props = this.props,
+          className = _props.className,
           variant = _props.variant,
-          className = _props.className;
+          customStylesheet = _props.stylesheet;
       var _state = this.state,
@@ -1431,3 +1484,4 @@ effectiveAlign = _state.effectiveAlign,
           orientation: effectiveOrientation,
-          className: className
+          className: className,
+          stylesheet: customStylesheet
         },
@@ -1445,3 +1499,5 @@ this.getTabs().map(this.renderTab)
     value: function renderContent() {
-      var className = this.props.className;
+      var _props2 = this.props,
+          className = _props2.className,
+          customStylesheet = _props2.stylesheet;
 
@@ -1452,3 +1508,3 @@ var activeTab = this.getActiveTab();
         ContentPresenter,
-        { className: className },
+        { className: className, stylesheet: customStylesheet },
         activeTab ? activeTab.props.children : null
@@ -1462,3 +1518,3 @@ );
 
-      var styles = stylesheet$2({ orientation: effectiveOrientation });
+      var styles = stylesheet$1({ orientation: effectiveOrientation });
 
@@ -1540,5 +1596,6 @@ return React.createElement(
   /**
-   * The visual variant of the tabs
+   * Control the active tab.
+   * Overrides the deprecated active property on the Tab component.
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+  activeTabIndex: PropTypes.number,
   /**
@@ -1550,12 +1607,2 @@ * Specify how to justify the tabs within their container
   /**
-   * The list orientation of the tabs
-   * Vertical tabs only works when variant is set to "box"
-   */
-  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  /**
-   * Show dividers between tabs
-   * Only works in horizontal tabs and when variant is set to "box" or "canvas"
-   */
-  showTabDivider: PropTypes.bool,
-  /**
    * Accepts Tab components
@@ -1570,7 +1617,2 @@ */
   /**
-   * Control the active tab.
-   * Overrides the deprecated active property on the Tab component.
-   */
-  activeTabIndex: PropTypes.number,
-  /**
    * Called when user activates a tab
@@ -1582,3 +1624,21 @@ */
    */
-  onTabClose: PropTypes.func
+  onTabClose: PropTypes.func,
+  /**
+   * The list orientation of the tabs
+   * Vertical tabs only works when variant is set to "box"
+   */
+  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
+  /**
+   * Show dividers between tabs
+   * Only works in horizontal tabs and when variant is set to "box" or "canvas"
+   */
+  showTabDivider: PropTypes.bool,
+  /**
+   * Function to modify the component's styles
+   */
+  stylesheet: PropTypes.func,
+  /**
+   * The visual variant of the tabs
+   */
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
@@ -1600,14 +1660,8 @@ Tabs.defaultProps = {
   "props": {
-    "variant": {
+    "activeTabIndex": {
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_VARIANTS"
+        "name": "number"
       },
       "required": false,
-      "description": "The visual variant of the tabs",
-      "defaultValue": {
-        "value": "variants.UNDERLINE",
-        "computed": true
-      }
+      "description": "Control the active tab.\nOverrides the deprecated active property on the Tab component."
     },
@@ -1627,26 +1681,2 @@ "align": {
     },
-    "orientation": {
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_ORIENTATIONS"
-      },
-      "required": false,
-      "description": "The list orientation of the tabs\nVertical tabs only works when variant is set to \"box\"",
-      "defaultValue": {
-        "value": "orientations.HORIZONTAL",
-        "computed": true
-      }
-    },
-    "showTabDivider": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Show dividers between tabs\nOnly works in horizontal tabs and when variant is set to \"box\" or \"canvas\"",
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      }
-    },
     "children": {
@@ -1666,9 +1696,2 @@ "type": {
     },
-    "activeTabIndex": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Control the active tab.\nOverrides the deprecated active property on the Tab component."
-    },
     "onTabChange": {
@@ -1695,2 +1718,46 @@ "type": {
       }
+    },
+    "orientation": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_ORIENTATIONS"
+      },
+      "required": false,
+      "description": "The list orientation of the tabs\nVertical tabs only works when variant is set to \"box\"",
+      "defaultValue": {
+        "value": "orientations.HORIZONTAL",
+        "computed": true
+      }
+    },
+    "showTabDivider": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Show dividers between tabs\nOnly works in horizontal tabs and when variant is set to \"box\" or \"canvas\"",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": "The visual variant of the tabs",
+      "defaultValue": {
+        "value": "variants.UNDERLINE",
+        "computed": true
+      }
     }
@@ -1697,0 +1764,0 @@ }

build/index.js

@@ -60,3 +60,3 @@ 'use strict';
 
-  if (variant === variants.UNDERLINE) {
+  if (variant && variant === variants.UNDERLINE) {
     styles = _extends({}, styles, {
@@ -87,3 +87,3 @@ bottom: 0,
     }
-  } else if (variant === variants.BOX) {
+  } else if (variant && variant === variants.BOX) {
     styles = _extends({}, styles, {
@@ -94,3 +94,3 @@ top: 0,
 
-    if (orientation === orientations.VERTICAL) {
+    if (orientation && orientation === orientations.VERTICAL) {
       styles.height = "100%";
@@ -118,3 +118,3 @@ if (!disabled && hasFocus) {
 
-  if (!disabled && variant !== variants.UNDERLINE) {
+  if (!disabled && variant && variant !== variants.UNDERLINE) {
     if (active || isPressed) {
@@ -144,4 +144,15 @@ return themeData["tabs." + variant + ".tab.active.backgroundColor"];
 
+function getIconColor(_ref4, themeData) {
+  var hasHover = _ref4.hasHover,
+      isPressed = _ref4.isPressed;
+
+  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
+  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
+  return themeData["tabs.closeButton.default.iconColor"];
+}
+
 function stylesheet(props, themeData) {
   var active = props.active,
+      hasHover = props.hasHover,
+      isPressed = props.isPressed,
       label = props.label,
@@ -152,6 +163,7 @@ icon = props.icon,
       disabled = props.disabled,
-      closable = props.closable;
+      closable = props.closable,
+      customStylesheet = props.stylesheet;
 
 
-  return {
+  var styles = {
     tab: _extends({
@@ -162,3 +174,3 @@ position: "relative",
 
-    }, variant === variants.UNDERLINE && {
+    }, variant && variant === variants.UNDERLINE && {
       marginRight: themeData["tabs.underline.tab.gutter"],
@@ -172,3 +184,3 @@ "&:last-of-type": {
       display: "flex",
-      width: orientation === orientations.VERTICAL ? "100%" : "auto",
+      width: orientation && orientation === orientations.VERTICAL ? "100%" : "auto",
       userSelect: "none",
@@ -185,8 +197,8 @@ cursor: disabled ? "default" : "pointer",
 
-    }, variant === variants.UNDERLINE && {
+    }, variant && variant === variants.UNDERLINE && {
       marginBottom: "-" + themeData["tabs.underline.wrapper.borderBottomWidth"],
       padding: "0 0 " + themeData["tabs.underline.tab.paddingBottom"] + " 0"
-    }, variant === variants.BOX && {
+    }, variant && variant === variants.BOX && {
       padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
-    }, variant === variants.CANVAS && {
+    }, variant && variant === variants.CANVAS && {
       padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
@@ -199,6 +211,6 @@ transform: "skewX(-23deg)",
       flexGrow: "1",
-      transform: variant === variants.CANVAS ? "skewX(23deg)" : "none",
+      transform: variant && variant === variants.CANVAS ? "skewX(23deg)" : "none",
       opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "1",
       width: getContentWrapperWidth(props, themeData),
-      display: orientation === orientations.VERTICAL ? "block" : "flex"
+      display: orientation && orientation === orientations.VERTICAL ? "block" : "flex"
     },
@@ -214,5 +226,5 @@ label: {
       textAlign: "center",
-      paddingLeft: icon && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
+      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
 
-      paddingRight: closable && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
+      paddingRight: closable && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
 
@@ -236,3 +248,3 @@ color: themeData["tabs.label.fontColor"],
     halo: getHaloStyles(props, themeData),
-    divider: _extends({}, variant !== variants.UNDERLINE && {
+    divider: _extends({}, variant && variant !== variants.UNDERLINE && {
       position: "absolute",
@@ -261,20 +273,3 @@ top: "50%",
       transform: "translateY(-50%)"
-    }
-  };
-}
-
-function getIconColor(_ref, themeData) {
-  var hasHover = _ref.hasHover,
-      isPressed = _ref.isPressed;
-
-  if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
-  if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
-  return themeData["tabs.closeButton.default.iconColor"];
-}
-
-function stylesheet$1(_ref2, themeData) {
-  var hasHover = _ref2.hasHover,
-      isPressed = _ref2.isPressed;
-
-  return {
+    },
     button: {
@@ -296,4 +291,14 @@ boxShadow: "none",
       }
+    },
+    content: {
+      flexGrow: 1,
+      flexShrink: 1
     }
   };
+
+  if (customStylesheet) {
+    return customStylesheet(styles, props, themeData);
+  }
+
+  return styles;
 }
@@ -332,3 +337,4 @@
           onClick = _props.onClick,
-          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties(_props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
 
@@ -368,3 +374,3 @@ function handleClick(event) {
 
-              var styles = stylesheet$1({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed }, resolvedRoles, metadata);
+              var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
               var className = otherProps.className;
@@ -433,3 +439,7 @@
    */
-  onMouseUp: PropTypes.func
+  onMouseUp: PropTypes.func,
+  /**
+   * Function to modify the component's styles
+   */
+  stylesheet: PropTypes.func
 };
@@ -495,2 +505,9 @@ TabCloseButtonPresenter.__docgenInfo = {
       "description": "Called when mouse is released over the button"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -521,3 +538,4 @@ }
       onClose = _ref.onClose,
-      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose"]);
+      customStylesheet = _ref.stylesheet,
+      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"]);
 
@@ -541,3 +559,4 @@ return React__default.createElement(
         disabled: disabled,
-        closable: closable
+        closable: closable,
+        stylesheet: customStylesheet
       }, resolvedRoles, metadata);
@@ -596,3 +615,4 @@
               className: emotion.cx(emotion.css(styles.closeButton), closeButtonClassName),
-              onClick: onClose
+              onClick: onClose,
+              stylesheet: customStylesheet
             })
@@ -626,3 +646,4 @@ ),
   onMouseLeave: PropTypes.func,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  stylesheet: PropTypes.func
 };
@@ -780,2 +801,9 @@
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -811,7 +839,8 @@ }
           active = _props.active,
+          closable = _props.closable,
+          disabled = _props.disabled,
+          icon = _props.icon,
           label = _props.label,
-          icon = _props.icon,
-          disabled = _props.disabled,
-          closable = _props.closable,
-          otherProps = _objectWithoutProperties$2(_props, ["active", "label", "icon", "disabled", "closable"]);
+          customStylesheet = _props.stylesheet,
+          otherProps = _objectWithoutProperties$2(_props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
 
@@ -864,3 +893,4 @@ var className = otherProps.className;
             onClose: onClose,
-            className: className
+            className: className,
+            stylesheet: customStylesheet
           });
@@ -885,6 +915,11 @@ }
   /**
-   * Sets the label of a tab
+   * Specify if the tab will have a close button
+   * Only works when varient prop of parent Tabs is set to "box" or "canvas"
    */
-  label: PropTypes.string,
+  closable: PropTypes.bool,
   /**
+   * Specify if the tab is disabled
+   */
+  disabled: PropTypes.bool,
+  /**
    * A @hig/icon element
@@ -895,10 +930,9 @@ * Icon will only be displayed when varient prop of parent Tabs is set to "box" or "canvas"
   /**
-   * Specify if the tab is disabled
+   * Sets the label of a tab
    */
-  disabled: PropTypes.bool,
+  label: PropTypes.string,
   /**
-   * Specify if the tab will have a close button
-   * Only works when varient prop of parent Tabs is set to "box" or "canvas"
+   * Function to modify the component's styles
    */
-  closable: PropTypes.bool
+  stylesheet: PropTypes.func
 };
@@ -925,16 +959,13 @@ Tab.defaultProps = {
     },
-    "label": {
+    "closable": {
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false,
-      "description": "Sets the label of a tab"
+      "description": "Specify if the tab will have a close button\nOnly works when varient prop of parent Tabs is set to \"box\" or \"canvas\"",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
     },
-    "icon": {
-      "type": {
-        "name": "node"
-      },
-      "required": false,
-      "description": "A @hig/icon element\nIcon will only be displayed when varient prop of parent Tabs is set to \"box\" or \"canvas\""
-    },
     "disabled": {
@@ -951,12 +982,22 @@ "type": {
     },
-    "closable": {
+    "icon": {
       "type": {
-        "name": "bool"
+        "name": "node"
       },
       "required": false,
-      "description": "Specify if the tab will have a close button\nOnly works when varient prop of parent Tabs is set to \"box\" or \"canvas\"",
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      }
+      "description": "A @hig/icon element\nIcon will only be displayed when varient prop of parent Tabs is set to \"box\" or \"canvas\""
+    },
+    "label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Sets the label of a tab"
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
     }
@@ -966,16 +1007,2 @@ }
 
-function stylesheet$2(_ref) {
-  var orientation = _ref.orientation;
-
-  return {
-    wrapper: {
-      display: "flex",
-      flexWrap: "nowrap",
-      justifyContent: "flex-start",
-      alignItems: "stretch",
-      flexDirection: orientation === orientations.HORIZONTAL ? "column" : "row"
-    }
-  };
-}
-
 var _extends$2 = 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; };
@@ -995,12 +1022,21 @@
 
-function stylesheet$3(_ref, themeData) {
+function stylesheet$1(props, themeData) {
   var _justifyContent;
 
-  var align = _ref.align,
-      variant = _ref.variant,
-      orientation = _ref.orientation;
+  var align = props.align,
+      orientation = props.orientation,
+      customStylesheet = props.stylesheet,
+      variant = props.variant;
 
+
   var justifyContent = (_justifyContent = {}, _defineProperty(_justifyContent, alignments.LEFT, "flex-start"), _defineProperty(_justifyContent, alignments.CENTER, "center"), _defineProperty(_justifyContent, alignments.RIGHT, "flex-end"), _justifyContent);
 
-  return {
+  var styles = {
+    wrapper: {
+      display: "flex",
+      flexWrap: "nowrap",
+      justifyContent: "flex-start",
+      alignItems: "stretch",
+      flexDirection: orientation === orientations.HORIZONTAL ? "column" : "row"
+    },
     tabsWrapper: _extends$2({
@@ -1023,2 +1059,8 @@ boxSizing: "border-box",
   };
+
+  if (customStylesheet) {
+    return customStylesheet(styles, props, themeData);
+  }
+
+  return styles;
 }
@@ -1029,7 +1071,8 @@
 function TabsPresenter(_ref) {
-  var children = _ref.children,
-      align = _ref.align,
+  var align = _ref.align,
+      children = _ref.children,
+      orientation = _ref.orientation,
+      customStylesheet = _ref.stylesheet,
       variant = _ref.variant,
-      orientation = _ref.orientation,
-      otherProps = _objectWithoutProperties$3(_ref, ["children", "align", "variant", "orientation"]);
+      otherProps = _objectWithoutProperties$3(_ref, ["align", "children", "orientation", "stylesheet", "variant"]);
 
@@ -1042,3 +1085,3 @@ return React__default.createElement(
 
-      var styles = stylesheet$3({ align: align, variant: variant, orientation: orientation }, resolvedRoles);
+      var styles = stylesheet$1({ align: align, orientation: orientation, stylesheet: customStylesheet, variant: variant }, resolvedRoles);
 
@@ -1062,3 +1105,4 @@ var className = otherProps.className;
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  children: PropTypes.node
+  children: PropTypes.node,
+  stylesheet: PropTypes.func
 };
@@ -1120,2 +1164,9 @@
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -1125,11 +1176,2 @@ }
 
-function stylesheet$4() {
-  return {
-    content: {
-      flexGrow: 1,
-      flexShrink: 1
-    }
-  };
-}
-
 function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -1139,7 +1181,9 @@
   var children = _ref.children,
-      otherProps = _objectWithoutProperties$4(_ref, ["children"]);
+      customStylesheet = _ref.stylesheet,
+      otherProps = _objectWithoutProperties$4(_ref, ["children", "stylesheet"]);
 
-  var styles = stylesheet$4();
-  var customClassName = utils.createCustomClassNames(otherProps.className, "content");
+  var className = otherProps.className;
 
+  var styles = stylesheet({ stylesheet: customStylesheet }, {});
+  var customClassName = utils.createCustomClassNames(className, "content");
   return React__default.createElement(
@@ -1153,3 +1197,4 @@ "div",
 ContentPresenter.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  stylesheet: PropTypes.func
 };
@@ -1166,2 +1211,9 @@ ContentPresenter.__docgenInfo = {
       "description": ""
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
     }
@@ -1425,4 +1477,5 @@ }
       var _props = this.props,
+          className = _props.className,
           variant = _props.variant,
-          className = _props.className;
+          customStylesheet = _props.stylesheet;
       var _state = this.state,
@@ -1438,3 +1491,4 @@ effectiveAlign = _state.effectiveAlign,
           orientation: effectiveOrientation,
-          className: className
+          className: className,
+          stylesheet: customStylesheet
         },
@@ -1452,3 +1506,5 @@ this.getTabs().map(this.renderTab)
     value: function renderContent() {
-      var className = this.props.className;
+      var _props2 = this.props,
+          className = _props2.className,
+          customStylesheet = _props2.stylesheet;
 
@@ -1459,3 +1515,3 @@ var activeTab = this.getActiveTab();
         ContentPresenter,
-        { className: className },
+        { className: className, stylesheet: customStylesheet },
         activeTab ? activeTab.props.children : null
@@ -1469,3 +1525,3 @@ );
 
-      var styles = stylesheet$2({ orientation: effectiveOrientation });
+      var styles = stylesheet$1({ orientation: effectiveOrientation });
 
@@ -1547,5 +1603,6 @@ return React__default.createElement(
   /**
-   * The visual variant of the tabs
+   * Control the active tab.
+   * Overrides the deprecated active property on the Tab component.
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
+  activeTabIndex: PropTypes.number,
   /**
@@ -1557,12 +1614,2 @@ * Specify how to justify the tabs within their container
   /**
-   * The list orientation of the tabs
-   * Vertical tabs only works when variant is set to "box"
-   */
-  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  /**
-   * Show dividers between tabs
-   * Only works in horizontal tabs and when variant is set to "box" or "canvas"
-   */
-  showTabDivider: PropTypes.bool,
-  /**
    * Accepts Tab components
@@ -1577,7 +1624,2 @@ */
   /**
-   * Control the active tab.
-   * Overrides the deprecated active property on the Tab component.
-   */
-  activeTabIndex: PropTypes.number,
-  /**
    * Called when user activates a tab
@@ -1589,3 +1631,21 @@ */
    */
-  onTabClose: PropTypes.func
+  onTabClose: PropTypes.func,
+  /**
+   * The list orientation of the tabs
+   * Vertical tabs only works when variant is set to "box"
+   */
+  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
+  /**
+   * Show dividers between tabs
+   * Only works in horizontal tabs and when variant is set to "box" or "canvas"
+   */
+  showTabDivider: PropTypes.bool,
+  /**
+   * Function to modify the component's styles
+   */
+  stylesheet: PropTypes.func,
+  /**
+   * The visual variant of the tabs
+   */
+  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
 };
@@ -1607,14 +1667,8 @@ Tabs.defaultProps = {
   "props": {
-    "variant": {
+    "activeTabIndex": {
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_VARIANTS"
+        "name": "number"
       },
       "required": false,
-      "description": "The visual variant of the tabs",
-      "defaultValue": {
-        "value": "variants.UNDERLINE",
-        "computed": true
-      }
+      "description": "Control the active tab.\nOverrides the deprecated active property on the Tab component."
     },
@@ -1634,26 +1688,2 @@ "align": {
     },
-    "orientation": {
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_ORIENTATIONS"
-      },
-      "required": false,
-      "description": "The list orientation of the tabs\nVertical tabs only works when variant is set to \"box\"",
-      "defaultValue": {
-        "value": "orientations.HORIZONTAL",
-        "computed": true
-      }
-    },
-    "showTabDivider": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Show dividers between tabs\nOnly works in horizontal tabs and when variant is set to \"box\" or \"canvas\"",
-      "defaultValue": {
-        "value": "true",
-        "computed": false
-      }
-    },
     "children": {
@@ -1673,9 +1703,2 @@ "type": {
     },
-    "activeTabIndex": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Control the active tab.\nOverrides the deprecated active property on the Tab component."
-    },
     "onTabChange": {
@@ -1702,2 +1725,46 @@ "type": {
       }
+    },
+    "orientation": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_ORIENTATIONS"
+      },
+      "required": false,
+      "description": "The list orientation of the tabs\nVertical tabs only works when variant is set to \"box\"",
+      "defaultValue": {
+        "value": "orientations.HORIZONTAL",
+        "computed": true
+      }
+    },
+    "showTabDivider": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Show dividers between tabs\nOnly works in horizontal tabs and when variant is set to \"box\" or \"canvas\"",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Function to modify the component's styles"
+    },
+    "variant": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_VARIANTS"
+      },
+      "required": false,
+      "description": "The visual variant of the tabs",
+      "defaultValue": {
+        "value": "variants.UNDERLINE",
+        "computed": true
+      }
     }
@@ -1704,0 +1771,0 @@ }

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/tabs-v1.3.0](https://github.com/Autodesk/hig/compare/@hig/tabs@1.2.1...@hig/tabs@1.3.0) (2020-07-10)
+
+
+### Features
+
+* add stylesheet prop ([67a432c](https://github.com/Autodesk/hig/commit/67a432c))
+
 # [@hig/tabs-v1.2.1](https://github.com/Autodesk/hig/compare/@hig/tabs@1.2.0...@hig/tabs@1.2.1) (2020-05-13)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "HIG Tabs",
@@ -31,3 +31,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.16.0",
+    "@hig/theme-data": "^2.16.1",
     "react": "^15.4.1 || ^16.3.2"
@@ -34,0 +34,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

114988

increased by4.26%

Lines of code

3104

increased by4.58%

No dependency changes