@storybook/design-system - npm Package Compare versions

Comparing version 5.1.28-canary.568712e.0 to 5.1.28-canary.7a134c2.0

dist/components/FormErrorState.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
@@ -21,2 +23,3 @@
   var children = _ref.children,
+      onSubmit = _ref.onSubmit,
       _onMouseEnter = _ref.onMouseEnter,
@@ -57,3 +60,4 @@ _onMouseLeave = _ref.onMouseLeave,
   return children({
-    getFormErrorFieldProps: getFormErrorFieldProps
+    getFormErrorFieldProps: getFormErrorFieldProps,
+    onSubmit: onSubmit
   });
@@ -64,3 +68,6 @@ };
 
-var FormErrorState = function FormErrorState(props) {
+var FormErrorState = function FormErrorState(_ref3) {
+  var onSubmit = _ref3.onSubmit,
+      rest = (0, _objectWithoutProperties2["default"])(_ref3, ["onSubmit"]);
+
   var _useState = (0, _react.useState)(undefined),
@@ -89,7 +96,23 @@ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      didAttemptSubmission = _useState10[0],
+      setDidAttemptSubmission = _useState10[1];
+
   (0, _react.useEffect)(function () {
     if (hoveredFieldId) setPrimaryFieldId(hoveredFieldId);else if (focusedFieldId) setPrimaryFieldId(focusedFieldId);else setPrimaryFieldId(undefined);
-  }, [focusedFieldId, hoveredFieldId, setPrimaryFieldId]);
-  return /*#__PURE__*/_react["default"].createElement(PureFormErrorState, (0, _extends2["default"])({}, props, {
+  }, [focusedFieldId, hoveredFieldId, setPrimaryFieldId]); // Wrap the submit handler to control form error state once it has been submitted
+
+  var handleSubmit = (0, _react.useCallback)(function () {
+    setDidAttemptSubmission(true);
+    onSubmit.apply(void 0, arguments);
+  }, [onSubmit]);
+
+  var isErrorVisible = function isErrorVisible(id) {
+    return blurredFieldIds.has(id) || didAttemptSubmission;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(PureFormErrorState, (0, _extends2["default"])({}, rest, {
     primaryFieldId: primaryFieldId,
+    onSubmit: handleSubmit,
     onFocus: function onFocus(id) {
@@ -105,13 +128,14 @@ return setFocusedFieldId(id);
       // We don't want to show error tooltips for fields that haven't been
-      // visited yet.
-      if (blurredFieldIds.has(id)) setHoveredFieldId(id);
+      // visited yet. In the case that the form has already had an attempted
+      // submission, all errors will be visible.
+      if (isErrorVisible(id)) setHoveredFieldId(id);
     },
     onMouseLeave: function onMouseLeave(id) {
-      if (blurredFieldIds.has(id)) setHoveredFieldId(undefined);
+      if (isErrorVisible(id)) setHoveredFieldId(undefined);
     },
-    getError: function getError(_ref3) {
-      var id = _ref3.id,
-          value = _ref3.value,
-          validate = _ref3.validate;
-      return blurredFieldIds.has(id) && validate(value);
+    getError: function getError(_ref4) {
+      var id = _ref4.id,
+          value = _ref4.value,
+          validate = _ref4.validate;
+      return isErrorVisible(id) && validate(value);
     }
@@ -118,0 +142,0 @@ }));

dist/components/Input.js

@@ -38,4 +38,54 @@ "use strict";
 
+function _templateObject25() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0;\n  min-width: 45px;\n  top: 50%;\n  transform: translateY(-50%);\n  font-weight: bold;\n  font-size: 11px;\n  z-index: 2;\n"]);
+
+  _templateObject25 = function _templateObject25() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject24() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 170px;\n"]);
+
+  _templateObject24 = function _templateObject24() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject23() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
+
+  _templateObject23 = function _templateObject23() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject22() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: table-row;\n\n    ", ", ", " {\n      display: table-cell;\n    }\n\n    ", " {\n      width: 1px;\n      padding-right: 20px;\n      vertical-align: middle;\n    }\n\n    ", " {\n      width: auto;\n    }\n\n  "]);
+
+  _templateObject22 = function _templateObject22() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject21() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
+
+  _templateObject21 = function _templateObject21() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject20() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0;\n  min-width: 45px;\n  top: 50%;\n  transform: translateY(-50%);\n  font-weight: bold;\n  font-size: 11px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n          box-shadow: ", " 0 0 0 1px inset;\n          &:focus { box-shadow: ", " 0 0 0 1px inset !important;  }\n      }\n    "]);
 
@@ -50,3 +100,3 @@ _templateObject20 = function _templateObject20() {
 function _templateObject19() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 170px;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", ";\n\n    svg {\n      animation: ", " 700ms ease-out;\n      path { fill: ", "; }\n    }\n  "]);
 
@@ -61,3 +111,3 @@ _templateObject19 = function _templateObject19() {
 function _templateObject18() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 1.75em; "]);
 
@@ -72,3 +122,3 @@ _templateObject18 = function _templateObject18() {
 function _templateObject17() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: table-row;\n\n    ", ", ", " {\n      display: table-cell;\n    }\n\n    ", " {\n      width: 1px;\n      padding-right: 20px;\n      vertical-align: middle;\n    }\n\n    ", " {\n      width: auto;\n    }\n\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 2.4em; "]);
 
@@ -83,3 +133,3 @@ _templateObject17 = function _templateObject17() {
 function _templateObject16() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    > svg {\n      transition: all 150ms ease-out;\n      position: absolute;\n      top: 50%;\n      height: 1em;\n      width: 1em;\n      font-size: ", ";\n      margin-top: -.525em;\n      z-index: 3;\n\n      background: transparent;\n\n      path {\n        transition: all 150ms ease-out;\n        fill: ", ";\n      }\n    }\n\n    ", ":focus + svg path {\n      fill: ", ";\n    }\n\n    ", " {\n      padding-left: 2.4em;\n\n      ", ";\n      ", ";\n    }\n    > svg { left: ", "em; }\n\n  "]);
 
@@ -94,3 +144,3 @@ _templateObject16 = function _templateObject16() {
 function _templateObject15() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n          box-shadow: ", " 0 0 0 1px inset;\n          &:focus { box-shadow: ", " 0 0 0 1px inset !important;  }\n      }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", " {\n      padding-right: 3.8em;\n    }\n  "]);
 
@@ -105,3 +155,3 @@ _templateObject15 = function _templateObject15() {
 function _templateObject14() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", ";\n\n    svg {\n      animation: ", " 700ms ease-out;\n      path { fill: ", "; }\n    }\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      font-family: ", ";\n      border-radius: 2px;\n      background: rgba(0,0,0,.05);\n      padding: 3px 6px;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -116,3 +166,3 @@ _templateObject14 = function _templateObject14() {
 function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 1.75em; "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      padding: .5em 1em; //28\n      border-radius: 3em;\n      background: transparent;\n\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -127,3 +177,3 @@ _templateObject13 = function _templateObject13() {
 function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 2.4em; "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      padding: 0;\n      border: none;\n      box-shadow: none;\n      background: none;\n\n      &:focus { box-shadow: none !important; }\n    "]);
 
@@ -138,3 +188,3 @@ _templateObject12 = function _templateObject12() {
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    > svg {\n      transition: all 150ms ease-out;\n      position: absolute;\n      top: 50%;\n      height: 0.75em;\n      width: 0.75em;\n  \t\tfont-size: ", "em;\n      margin-top: -.375em;\n  \t\tz-index: 1;\n\n      background: transparent;\n\n      path {\n        transition: all 150ms ease-out;\n        fill: ", ";\n      }\n    }\n\n    ", ":focus + svg path {\n      fill: ", ";\n    }\n\n    ", " {\n      padding-left: 2.45em;\n\n      ", ";\n      ", ";\n    }\n    > svg { left: ", "em; }\n\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -149,3 +199,3 @@ _templateObject11 = function _templateObject11() {
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", " {\n      padding-right: 3.8em;\n    }\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n  width: 100%;\n\n  ", " {\n    position: relative;\n    ", "\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 20px;\n    padding: .715em 1em; //40\n\n    &:focus { box-shadow: ", " 0 0 0 1px inset; }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
 
@@ -160,3 +210,3 @@ _templateObject10 = function _templateObject10() {
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      font-family: ", ";\n      border-radius: 2px;\n      background: rgba(0,0,0,.05);\n      padding: 3px 6px;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n        border-radius: ", "px;\n      "]);
 
@@ -171,3 +221,3 @@ _templateObject9 = function _templateObject9() {
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      padding: .5em 1em; //28\n      border-radius: 3em;\n      background: transparent;\n\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n        border-bottom-left-radius: ", "px;\n        border-bottom-right-radius: ", "px;\n        margin-top: -1px;\n        ", "\n      "]);
 
@@ -182,3 +232,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      padding: 0;\n      border: none;\n      box-shadow: none;\n      background: none;\n\n      &:focus { box-shadow: none !important; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n        border-radius: 0px;\n        margin-top: -1px;\n        ", "\n      "]);
 
@@ -193,3 +243,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n        border-top-left-radius: ", "px;\n        border-top-right-radius: ", "px;\n        ", "\n      "]);
 
@@ -204,3 +254,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n  width: 100%;\n\n  ", " {\n    background: ", ";\n    border-radius: 4px;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 20px;\n    padding: .715em 1em; //40\n\n    &:focus { box-shadow: ", " 0 0 0 1px inset; }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    ", "\n\n    &:focus {\n      z-index: 2;\n    }\n  "]);
 
@@ -215,3 +265,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ::placeholder {\n    color: ", ";\n    font-weight: ", ";\n  }\n  appearance: none;\n  border:none;\n  box-sizing: border-box;\n  display: block;\n  outline: none;\n  width: 100%;\n  margin: 0;\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: .5;\n  }\n\n  &:-webkit-autofill { -webkit-box-shadow: 0 0 0 3em ", " inset; }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ::placeholder {\n    color: ", ";\n  }\n  appearance: none;\n  border:none;\n  box-sizing: border-box;\n  display: block;\n  outline: none;\n  width: 100%;\n  margin: 0;\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: .5;\n  }\n\n  &:-webkit-autofill { -webkit-box-shadow: 0 0 0 3em ", " inset; }\n"]);
 
@@ -270,6 +320,27 @@ _templateObject4 = function _templateObject4() {
 
-var InputEl = _styledComponents["default"].input(_templateObject4(), _styles.color.mediumdark, _styles.typography.weight.bold, _styles.color.lightest); // prettier-ignore
+var InputEl = _styledComponents["default"].input(_templateObject4(), _styles.color.mediumdark, _styles.color.lightest);
 
+var getStackLevelStyling = function getStackLevelStyling(props) {
+  var radius = 4;
+  var stackLevelDefinedStyling = (0, _styledComponents.css)(_templateObject5(), props.error && "z-index: 1;");
 
-var InputWrapper = _styledComponents["default"].div(_templateObject5(), InputEl, _styles.color.lightest, _styles.color.darkest, function (props) {
+  switch (props.stackLevel) {
+    case 'top':
+      return (0, _styledComponents.css)(_templateObject6(), radius, radius, stackLevelDefinedStyling);
+
+    case 'middle':
+      return (0, _styledComponents.css)(_templateObject7(), stackLevelDefinedStyling);
+
+    case 'bottom':
+      return (0, _styledComponents.css)(_templateObject8(), radius, radius, stackLevelDefinedStyling);
+
+    default:
+      return (0, _styledComponents.css)(_templateObject9(), radius);
+  }
+}; // prettier-ignore
+
+
+var InputWrapper = _styledComponents["default"].div(_templateObject10(), InputEl, function (props) {
+  return getStackLevelStyling(props);
+}, _styles.color.lightest, _styles.color.darkest, function (props) {
   return props.appearance === 'code' && _styles.typography.type.code;
@@ -279,26 +350,26 @@ }, function (props) {
 }, _styles.color.primary, function (props) {
-  return props.appearance === 'secondary' && (0, _styledComponents.css)(_templateObject6(), _styles.color.mediumlight, _styles.color.secondary);
+  return props.appearance === 'secondary' && (0, _styledComponents.css)(_templateObject11(), _styles.color.border, _styles.color.secondary);
 }, function (props) {
-  return props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject7());
+  return props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject12());
 }, function (props) {
-  return props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject8(), _styles.typography.size.s1, _styles.color.medium, _styles.color.secondary);
+  return props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject13(), _styles.typography.size.s1, _styles.color.medium, _styles.color.secondary);
 }, function (props) {
-  return props.appearance === 'code' && (0, _styledComponents.css)(_templateObject9(), _styles.typography.size.s2 - 1, _styles.typography.type.code, _styles.color.secondary);
+  return props.appearance === 'code' && (0, _styledComponents.css)(_templateObject14(), _styles.typography.size.s2 - 1, _styles.typography.type.code, _styles.color.secondary);
 }, function (props) {
-  return props.startingType === 'password' && (0, _styledComponents.css)(_templateObject10(), InputEl);
+  return props.startingType === 'password' && (0, _styledComponents.css)(_templateObject15(), InputEl);
 }, function (props) {
-  return props.icon && (0, _styledComponents.css)(_templateObject11(), props.appearance === 'pill' ? 0.75 : 1, _styles.color.mediumdark, InputEl, _styles.color.darker, InputEl, props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject12()), props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject13()), props.appearance === 'tertiary' ? 0 : 0.8);
+  return props.icon && (0, _styledComponents.css)(_templateObject16(), props.appearance === 'pill' ? '0.75em' : '0.875em', _styles.color.mediumdark, InputEl, _styles.color.darker, InputEl, props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject17()), props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject18()), props.appearance === 'tertiary' ? 0 : 0.8);
 }, function (props) {
-  return props.error && (0, _styledComponents.css)(_templateObject14(), props.appearance !== 'tertiary' && (0, _styledComponents.css)(_templateObject15(), InputEl, _styles.color.negative, _styles.color.negative), _animation.jiggle, _styles.color.negative);
+  return props.error && (0, _styledComponents.css)(_templateObject19(), props.appearance !== 'tertiary' && (0, _styledComponents.css)(_templateObject20(), InputEl, _styles.color.negative, _styles.color.negative), _animation.jiggle, _styles.color.negative);
 }); // prettier-ignore
 
 
-var InputContainer = _styledComponents["default"].div(_templateObject16(), function (props) {
-  return props.orientation === 'horizontal' && (0, _styledComponents.css)(_templateObject17(), LabelWrapper, InputWrapper, LabelWrapper, InputWrapper);
+var InputContainer = _styledComponents["default"].div(_templateObject21(), function (props) {
+  return props.orientation === 'horizontal' && (0, _styledComponents.css)(_templateObject22(), LabelWrapper, InputWrapper, LabelWrapper, InputWrapper);
 });
 
-var ErrorTooltip = (0, _styledComponents["default"])(_WithTooltip["default"])(_templateObject18());
-var ErrorTooltipMessage = (0, _styledComponents["default"])(_TooltipMessage.TooltipMessage)(_templateObject19());
+var ErrorTooltip = (0, _styledComponents["default"])(_WithTooltip["default"])(_templateObject23());
+var ErrorTooltipMessage = (0, _styledComponents["default"])(_TooltipMessage.TooltipMessage)(_templateObject24());
 
-var Action = _styledComponents["default"].div(_templateObject20());
+var Action = _styledComponents["default"].div(_templateObject25());
 
@@ -319,4 +390,5 @@ var PureInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onActionClick = _ref.onActionClick,
+      stackLevel = _ref.stackLevel,
       suppressErrorMessage = _ref.suppressErrorMessage,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "value", "label", "hideLabel", "orientation", "icon", "error", "appearance", "className", "lastErrorValue", "startingType", "type", "onActionClick", "suppressErrorMessage"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "value", "label", "hideLabel", "orientation", "icon", "error", "appearance", "className", "lastErrorValue", "startingType", "type", "onActionClick", "stackLevel", "suppressErrorMessage"]);
   var errorId = "".concat(id, "-error");
@@ -355,2 +427,3 @@ var errorMessage = typeof error === 'function' ? error(value) : error;
     appearance: appearance,
+    stackLevel: stackLevel,
     startingType: startingType
@@ -373,3 +446,4 @@ }, icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     tertiary: true,
-    onClick: onActionClick
+    onClick: onActionClick,
+    type: "button"
   }, type === 'password' ? 'Show' : 'Hide'))));
@@ -382,2 +456,3 @@ });
   appearance: _propTypes["default"].oneOf(['default', 'secondary', 'tertiary', 'pill', 'code']),
+  stackLevel: _propTypes["default"].oneOf(['top', 'middle', 'bottom']),
   label: _propTypes["default"].string.isRequired,
@@ -398,2 +473,3 @@ hideLabel: _propTypes["default"].bool,
   appearance: 'default',
+  stackLevel: undefined,
   hideLabel: false,
@@ -423,2 +499,3 @@ orientation: 'vertical',
     event.preventDefault();
+    event.stopPropagation();
 
@@ -425,0 +502,0 @@ if (type === 'password') {

dist/components/modal/WithModal.js

@@ -50,3 +50,4 @@ "use strict";
   var startOpen = _ref2.startOpen,
-      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["startOpen"]);
+      onClose = _ref2.onClose,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["startOpen", "onClose"]);
 
@@ -62,3 +63,3 @@ var _useState = (0, _react.useState)(startOpen),
 
-  var onClose = function onClose() {
+  var handleClose = function handleClose() {
     onSetIsOpen(false);
@@ -74,3 +75,3 @@
     onOpen: onOpen,
-    onClose: onClose
+    onClose: handleClose
   }, rest));
@@ -80,6 +81,8 @@ }
 WithModal.propTypes = {
-  startOpen: _propTypes.PropTypes.bool
+  startOpen: _propTypes.PropTypes.bool,
+  onClose: _propTypes.PropTypes.func
 };
 WithModal.defaultProps = {
-  startOpen: false
+  startOpen: false,
+  onClose: undefined
 };

dist/components/tooltip/WithTooltip.js

@@ -38,2 +38,12 @@ "use strict";
 
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject() {
@@ -54,2 +64,6 @@ var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  border: 0;\n  cursor: ", ";\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: inherit;\n  text-decoration: none;\n"]);
 
+var StyledTooltip = (0, _styledComponents["default"])(_Tooltip.Tooltip)(_templateObject2(), function (props) {
+  return !props.hasTooltipContent && "display: none;";
+});
+
 var isDescendantOfAction = function isDescendantOfAction(element) {
@@ -177,3 +191,3 @@ var parentElement = element.parentElement;
           tooltipPlacement = _ref3.placement;
-      return /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(StyledTooltip, (0, _extends2["default"])({
         hasChrome: hasChrome,
@@ -187,3 +201,4 @@ placement: tooltipPlacement,
         id: id,
-        role: "tooltip"
+        role: "tooltip",
+        hasTooltipContent: !!_tooltip
       }), typeof _tooltip === 'function' ? _tooltip({
@@ -190,0 +205,0 @@ onHide: closeTooltip

package.json

 {
   "name": "@storybook/design-system",
-  "version": "5.1.28-canary.568712e.0",
+  "version": "5.1.28-canary.7a134c2.0",
   "description": "Storybook design system",
@@ -5,0 +5,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

424989

increased by0.9%

Lines of code

5599

increased by1.62%

No dependency changes