@storybook/components 6.4.0-beta.8 → 6.4.0-rc.2

package/dist/cjs/ActionBar/ActionBar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.manyItems = exports.singleItem = exports.default = void 0;
+exports.ManyItems = exports.SingleItem = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -34,7 +34,7 @@ var _default = {
 };
 exports.default = _default;
 
-var singleItem = function singleItem() {
+var SingleItem = function SingleItem() {
   return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
     actionItems: [{
       title: 'Clear',
@@ -43,10 +43,10 @@ var singleItem = function singleItem() {
   });
 };
 
-exports.singleItem = singleItem;
-singleItem.displayName = "singleItem";
+exports.SingleItem = SingleItem;
+SingleItem.displayName = "SingleItem";
 
-var manyItems = function manyItems() {
+var ManyItems = function ManyItems() {
   return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
     actionItems: [{
       title: 'Action string',
@@ -62,5 +62,5 @@ var manyItems = function manyItems() {
   });
 };
 
-exports.manyItems = manyItems;
-manyItems.displayName = "manyItems";
+exports.ManyItems = ManyItems;
+ManyItems.displayName = "ManyItems";

package/dist/cjs/ScrollArea/GlobalScrollAreaStyles.js

@@ -431,7 +431,7 @@ var getScrollAreaStyles = function getScrollAreaStyles(theme) {
       borderRadius: 10
     },
     '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-      background: theme.color.darker,
+      background: theme.color.mediumdark,
       opacity: 0.5
     },
     '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {

package/dist/cjs/ScrollArea/ScrollArea.stories.js

@@ -23,7 +23,7 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withOuterBorder = exports.both = exports.horizontal = exports.vertical = exports.default = void 0;
+exports.WithOuterBorder = exports.Both = exports.Horizontal = exports.Vertical = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -74,7 +74,7 @@ var _default = {
 };
 exports.default = _default;
 
-var vertical = function vertical() {
+var Vertical = function Vertical() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     vertical: true
   }, list(function (i) {
@@ -84,10 +84,10 @@ var vertical = function vertical() {
   }));
 };
 
-exports.vertical = vertical;
-vertical.displayName = "vertical";
+exports.Vertical = Vertical;
+Vertical.displayName = "Vertical";
 
-var horizontal = function horizontal() {
+var Horizontal = function Horizontal() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true
   }, list(function (i) {
@@ -97,10 +97,10 @@ var horizontal = function horizontal() {
   }));
 };
 
-exports.horizontal = horizontal;
-horizontal.displayName = "horizontal";
+exports.Horizontal = Horizontal;
+Horizontal.displayName = "Horizontal";
 
-var both = function both() {
+var Both = function Both() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true,
     vertical: true
@@ -115,10 +115,10 @@ var both = function both() {
   }));
 };
 
-exports.both = both;
-both.displayName = "both";
+exports.Both = Both;
+Both.displayName = "Both";
 
-var withOuterBorder = function withOuterBorder() {
+var WithOuterBorder = function WithOuterBorder() {
   return /*#__PURE__*/_react.default.createElement(_ScrollArea.ScrollArea, {
     horizontal: true,
     vertical: true
@@ -132,5 +132,5 @@ var withOuterBorder = function withOuterBorder() {
   }));
 };
 
-exports.withOuterBorder = withOuterBorder;
-withOuterBorder.displayName = "withOuterBorder";
+exports.WithOuterBorder = WithOuterBorder;
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/cjs/Zoom/Zoom.stories.js

@@ -29,7 +29,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iFrameZoomedOut = exports.iFrameZoomedIn = exports.iFrameActualSize = exports.elementZoomedOut = exports.elementZoomedIn = exports.elementActualSize = exports.default = void 0;
+exports.IFrameZoomedOut = exports.IFrameZoomedIn = exports.IFrameActualSize = exports.ElementZoomedOut = exports.ElementZoomedIn = exports.ElementActualSize = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -87,21 +87,21 @@ var TemplateElement = function TemplateElement(args) {
 };
 
 TemplateElement.displayName = "TemplateElement";
-var elementActualSize = TemplateElement.bind({});
-exports.elementActualSize = elementActualSize;
-elementActualSize.args = {
+var ElementActualSize = TemplateElement.bind({});
+exports.ElementActualSize = ElementActualSize;
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-var elementZoomedIn = TemplateElement.bind({});
-exports.elementZoomedIn = elementZoomedIn;
-elementZoomedIn.args = {
+var ElementZoomedIn = TemplateElement.bind({});
+exports.ElementZoomedIn = ElementZoomedIn;
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-var elementZoomedOut = TemplateElement.bind({});
-exports.elementZoomedOut = elementZoomedOut;
-elementZoomedOut.args = {
+var ElementZoomedOut = TemplateElement.bind({});
+exports.ElementZoomedOut = ElementZoomedOut;
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -148,37 +148,37 @@ var TemplateIFrame = function TemplateIFrame(args) {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-var iFrameActualSize = TemplateIFrame.bind({});
-exports.iFrameActualSize = iFrameActualSize;
-iFrameActualSize.args = {
+var IFrameActualSize = TemplateIFrame.bind({});
+exports.IFrameActualSize = IFrameActualSize;
+IFrameActualSize.args = {
   scale: 1,
   active: true
 }; // The iFrame stories are disabled because useGlobals works in practice
 // but, for some reason breaks in the stories for Zoom.iFrame
 
-iFrameActualSize.parameters = {
+IFrameActualSize.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-var iFrameZoomedIn = TemplateIFrame.bind({});
-exports.iFrameZoomedIn = iFrameZoomedIn;
-iFrameZoomedIn.args = {
+var IFrameZoomedIn = TemplateIFrame.bind({});
+exports.IFrameZoomedIn = IFrameZoomedIn;
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-var iFrameZoomedOut = TemplateIFrame.bind({});
-exports.iFrameZoomedOut = iFrameZoomedOut;
-iFrameZoomedOut.args = {
+var IFrameZoomedOut = TemplateIFrame.bind({});
+exports.IFrameZoomedOut = IFrameZoomedOut;
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/cjs/bar/bar.js

@@ -63,12 +63,14 @@ var Side = _theming.styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, function (_ref) {
   var left = _ref.left;
   return left ? {
     '& > *': {
-      marginLeft: 15
+      marginLeft: 4
     }
   } : {};
 }, function (_ref2) {
@@ -76,7 +78,7 @@ var Side = _theming.styled.div({
   return right ? {
     marginLeft: 30,
     '& > *': {
-      marginRight: 15
+      marginRight: 4
     }
   } : {};
 });

package/dist/cjs/bar/button.js

@@ -7,7 +7,7 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.TabButton = void 0;
+exports.IconButtonSkeleton = exports.IconButton = exports.TabButton = void 0;
 
 require("core-js/modules/es.object.keys.js");
 
@@ -15,6 +15,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _theming = require("@storybook/theming");
 
+var _polished = require("polished");
+
+var _core = require("@popperjs/core");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -81,40 +85,74 @@ exports.TabButton = TabButton;
 TabButton.displayName = 'TabButton';
 var IconButton = (0, _theming.styled)(ButtonOrLink, {
   shouldForwardProp: _theming.isPropValid
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(function () {
   return {
-    display: 'inline-flex',
-    justifyContent: 'center',
     alignItems: 'center',
-    height: 40,
-    background: 'none',
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 4,
     color: 'inherit',
-    padding: 0,
     cursor: 'pointer',
-    // Icon Buttons may have text depending on user preferences.
-    // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size.
-    fontWeight: 'bold',
+    display: 'inline-flex',
     fontSize: 13,
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    '&:hover, &:focus': {
-      outline: '0 none',
-      color: theme.color.secondary
-    },
+    fontWeight: 'bold',
+    height: 28,
+    justifyContent: 'center',
+    marginTop: 6,
+    padding: '8px 7px',
     '& > svg': {
-      width: 15
+      width: 14
     }
   };
-}, function (_ref5) {
-  var active = _ref5.active,
-      theme = _ref5.theme;
+}, function (_ref4) {
+  var active = _ref4.active,
+      theme = _ref4.theme;
   return active ? {
-    outline: '0 none',
-    borderBottomColor: theme.color.secondary
+    backgroundColor: theme.background.hoverable,
+    color: theme.color.secondary
   } : {};
+}, function (_ref5) {
+  var disabled = _ref5.disabled,
+      theme = _ref5.theme;
+  return disabled ? {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  } : {
+    '&:hover, &:focus-visible': {
+      background: (0, _polished.transparentize)(0.88, theme.color.secondary),
+      color: theme.color.secondary
+    },
+    '&:focus-visible': {
+      outline: _core.auto // Ensures links have the same focus style
+
+    },
+    '&:focus:not(:focus-visible)': {
+      outline: 'none'
+    }
+  };
 });
 exports.IconButton = IconButton;
-IconButton.displayName = 'IconButton';
+IconButton.displayName = 'IconButton';
+
+var IconPlaceholder = _theming.styled.div(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    width: 14,
+    height: 14,
+    backgroundColor: theme.appBorderColor,
+    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite")
+  };
+});
+
+var IconButtonSkeletonWrapper = _theming.styled.div(function () {
+  return {
+    padding: 5
+  };
+});
+
+var IconButtonSkeleton = function IconButtonSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(IconPlaceholder, null));
+};
+
+exports.IconButtonSkeleton = IconButtonSkeleton;
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

package/dist/cjs/bar/button.stories.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithTextDisabled = exports.WithTextActive = exports.WithText = exports.Disabled = exports.Active = exports._IconButton = exports.Loading = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("./button");
+
+var _icon = require("../icon/icon");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  component: _button.IconButton,
+  title: 'Basics/IconButton'
+};
+exports.default = _default;
+
+var Loading = function Loading() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButtonSkeleton, null);
+};
+
+exports.Loading = Loading;
+Loading.displayName = "Loading";
+
+// eslint-disable-next-line no-underscore-dangle
+var _IconButton = function _IconButton() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "bookmark"
+  }));
+};
+
+exports._IconButton = _IconButton;
+_IconButton.displayName = "_IconButton";
+
+var Active = function Active() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "beaker"
+  }));
+};
+
+exports.Active = Active;
+Active.displayName = "Active";
+
+var Disabled = function Disabled() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    disabled: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "beaker"
+  }));
+};
+
+exports.Disabled = Disabled;
+Disabled.displayName = "Disabled";
+
+var WithText = function WithText() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, null, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithText = WithText;
+WithText.displayName = "WithText";
+
+var WithTextActive = function WithTextActive() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    active: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithTextActive = WithTextActive;
+WithTextActive.displayName = "WithTextActive";
+
+var WithTextDisabled = function WithTextDisabled() {
+  return /*#__PURE__*/_react.default.createElement(_button.IconButton, {
+    disabled: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "circlehollow"
+  }), "\xA0Howdy!");
+};
+
+exports.WithTextDisabled = WithTextDisabled;
+WithTextDisabled.displayName = "WithTextDisabled";

package/dist/cjs/bar/separator.js

@@ -37,9 +37,11 @@ var Separator = _theming.styled.span(function (_ref) {
   var theme = _ref.theme;
   return {
     width: 1,
-    height: 24,
+    height: 20,
     background: theme.appBorderColor,
-    marginTop: 8
+    marginTop: 10,
+    marginLeft: 6,
+    marginRight: 2
   };
 }, function (_ref2) {
   var force = _ref2.force;

package/dist/cjs/blocks/ArgsTable/ArgRow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArgRow = void 0;
+exports.ArgRow = exports.argRowLoadingData = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -31,6 +31,15 @@ var _shared = require("../../typography/shared");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var argRowLoadingData = {
+  row: {
+    name: 'loading',
+    description: 'loading'
+  },
+  arg: 0
+};
+exports.argRowLoadingData = argRowLoadingData;
+
 var Name = _theming.styled.span({
   fontWeight: 'bold'
 });
@@ -101,11 +110,14 @@ var StyledTd = _theming.styled.td(function (_ref5) {
 var ArgRow = function ArgRow(props) {
   var _row$type;
 
-  var row = props.row,
-      updateArgs = props.updateArgs,
-      compact = props.compact,
-      expandable = props.expandable,
-      initialExpandedArgs = props.initialExpandedArgs;
+  // const isLoading = 'isLoading' in props;
+  var _ref6 = 'row' in props ? props : argRowLoadingData,
+      row = _ref6.row,
+      updateArgs = _ref6.updateArgs,
+      compact = _ref6.compact,
+      expandable = _ref6.expandable,
+      initialExpandedArgs = _ref6.initialExpandedArgs;
+
   var name = row.name,
       description = row.description;
   var table = row.table || {};

package/dist/cjs/blocks/ArgsTable/ArgRow.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StringNoControlsCompact = exports.StringNoControls = exports.StringCompact = exports.Markdown = exports.ComplexUnion = exports.LongEnum = exports.Enum = exports.Func = exports.ComplexObject = exports.ArrayOf = exports.ObjectOf = exports.MultiSelect = exports.Select = exports.InlineCheck = exports.Check = exports.InlineRadio = exports.Radio = exports.Range = exports.Number = exports.Date = exports.Color = exports.Boolean = exports.LongDesc = exports.LongName = exports.String = exports.default = void 0;
+exports.StringNoControlsCompact = exports.StringNoControls = exports.StringCompact = exports.Markdown = exports.ComplexUnion = exports.LongEnum = exports.Enum = exports.Func = exports.ComplexObject = exports.ArrayOf = exports.ObjectOf = exports.MultiSelect = exports.Select = exports.InlineCheck = exports.Check = exports.InlineRadio = exports.Radio = exports.Range = exports.Number = exports.Date = exports.Color = exports.Boolean = exports.LongDesc = exports.LongName = exports.String = exports.Loading = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
@@ -36,6 +36,11 @@ Template.displayName = "Template";
 var baseArgs = {
   updateArgs: (0, _addonActions.action)('updateArgs')
 };
+var Loading = Template.bind({});
+exports.Loading = Loading;
+Loading.args = {
+  isLoading: true
+};
 var String = Template.bind({});
 exports.String = String;
 String.args = Object.assign({}, baseArgs, {