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

package/dist/esm/placeholder/placeholder.stories.js

@@ -5,11 +5,11 @@ export default {
   component: Placeholder,
   title: 'Basics/Placeholder'
 };
-export var singleChild = function singleChild() {
+export var SingleChild = function SingleChild() {
   return /*#__PURE__*/React.createElement(Placeholder, null, "This is a placeholder with single child, it's bolded");
 };
-singleChild.displayName = "singleChild";
-export var twoChildren = function twoChildren() {
+SingleChild.displayName = "SingleChild";
+export var TwoChildren = function TwoChildren() {
   return /*#__PURE__*/React.createElement(Placeholder, null, /*#__PURE__*/React.createElement(Fragment, {
     key: "title"
   }, "This has two children, the first bold"), /*#__PURE__*/React.createElement(Fragment, {
@@ -20,4 +20,4 @@ export var twoChildren = function twoChildren() {
     cancel: false
   }, "link")));
 };
-twoChildren.displayName = "twoChildren";
+TwoChildren.displayName = "TwoChildren";

package/dist/esm/tabs/tabs.js

@@ -65,7 +65,7 @@ var Wrapper = styled.div(function (_ref) {
 export var TabBar = styled.div({
   overflow: 'hidden',
   '&:first-of-type': {
-    marginLeft: 0
+    marginLeft: -3
   }
 });
 var Content = styled.div({

package/dist/esm/tooltip/TooltipNote.js

@@ -20,7 +20,7 @@ var Note = styled.div(function (_ref) {
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     zIndex: -1,
-    background: 'rgba(0, 0, 0, 0.4)',
+    background: theme.base === 'light' ? 'rgba(60, 60, 60, 0.9)' : 'rgba(20, 20, 20, 0.85)',
     margin: 6
   };
 });

package/dist/esm/typography/DocumentWrapper.stories.js

@@ -12,11 +12,11 @@ export default {
     }, storyFn());
   }]
 };
-export var withMarkdown = function withMarkdown() {
+export var WithMarkdown = function WithMarkdown() {
   return /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement(MarkdownSample, null));
 };
-withMarkdown.displayName = "withMarkdown";
-export var withDOM = function withDOM() {
+WithMarkdown.displayName = "WithMarkdown";
+export var WithDOM = function WithDOM() {
   return /*#__PURE__*/React.createElement(DocumentWrapper, null, /*#__PURE__*/React.createElement("h1", null, "h1 Heading"), /*#__PURE__*/React.createElement("h2", null, "h2 Heading"), /*#__PURE__*/React.createElement("h3", null, "h3 Heading"), /*#__PURE__*/React.createElement("h4", null, "h4 Heading"), /*#__PURE__*/React.createElement("h5", null, "h5 Heading"), /*#__PURE__*/React.createElement("h6", null, "h6 Heading"), /*#__PURE__*/React.createElement("h2", null, "Typographic replacements"), /*#__PURE__*/React.createElement("p", null, "Enable typographer option to see result."), /*#__PURE__*/React.createElement("p", null, "\xA9 \xA9 \xAE \xAE \u2122 \u2122 \xA7 \xA7 \xB1"), /*#__PURE__*/React.createElement("p", null, "test\u2026 test\u2026 test\u2026 test?.. test!.."), /*#__PURE__*/React.createElement("p", null, "!!! ??? , \u2013 \u2014"), /*#__PURE__*/React.createElement("p", null, "\u201CSmartypants, double quotes\u201D and \u2018single quotes\u2019"), /*#__PURE__*/React.createElement("h2", null, "Emphasis"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "This is bold text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("strong", null, "This is bold text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "This is italic text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "This is italic text")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, /*#__PURE__*/React.createElement("strong", null, "This is bold italic text"))), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("s", null, "Strikethrough")), /*#__PURE__*/React.createElement("h2", null, "Blockquotes"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "Blockquotes can also be nested\u2026"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "\u2026by using additional greater-than signs right next to each other\u2026"), /*#__PURE__*/React.createElement("blockquote", null, /*#__PURE__*/React.createElement("p", null, "\u2026or with spaces between arrows.")))), /*#__PURE__*/React.createElement("h2", null, "Lists"), /*#__PURE__*/React.createElement("p", null, "Unordered"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Create a list by starting a line with ", /*#__PURE__*/React.createElement("code", null, "+"), ", ", /*#__PURE__*/React.createElement("code", null, "-"), ", or ", /*#__PURE__*/React.createElement("code", null, "*")), /*#__PURE__*/React.createElement("li", null, "Sub-lists are made by indenting 2 spaces:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Marker character change forces new list start:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Ac tristique libero volutpat at")), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Facilisis in pretium nisl aliquet")), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Nulla volutpat aliquam velit"))))), /*#__PURE__*/React.createElement("li", null, "Very easy!")), /*#__PURE__*/React.createElement("p", null, "Ordered"), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Consectetur adipiscing elit")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "Integer molestie lorem at massa")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "You can use sequential numbers\u2026")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("p", null, "\u2026or keep all the numbers as ", /*#__PURE__*/React.createElement("code", null, "1.")))), /*#__PURE__*/React.createElement("p", null, "Start numbering with offset:"), /*#__PURE__*/React.createElement("ol", {
     start: 57
   }, /*#__PURE__*/React.createElement("li", null, "foo"), /*#__PURE__*/React.createElement("li", null, "bar")), /*#__PURE__*/React.createElement("h2", null, "Horizontal Rule"), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h2", null, "Tables"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Option"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "data"), /*#__PURE__*/React.createElement("td", null, "path to data files to supply the data that will be passed into templates.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "engine"), /*#__PURE__*/React.createElement("td", null, "engine to be used for processing templates. Handlebars is the default.")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "ext"), /*#__PURE__*/React.createElement("td", null, "extension to be used for dest files.")))), /*#__PURE__*/React.createElement("p", null, "Right aligned columns"), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
@@ -67,4 +67,4 @@ export var withDOM = function withDOM() {
     title: "The Stormtroopocat"
   })));
 };
-withDOM.displayName = "withDOM";
+WithDOM.displayName = "WithDOM";

package/dist/esm/typography/link/link.js

@@ -166,7 +166,7 @@ export var Link = function Link(_ref8) {
       rest = _objectWithoutProperties(_ref8, ["cancel", "children", "onClick", "withArrow", "containsIcon", "className"]);
 
   return /*#__PURE__*/React.createElement(A, _extends({}, rest, {
-    onClick: cancel ? function (e) {
+    onClick: onClick && cancel ? function (e) {
       return cancelled(e, onClick);
     } : onClick,
     className: className
@@ -182,7 +182,7 @@ Link.defaultProps = {
   cancel: true,
   className: undefined,
   style: undefined,
-  onClick: function onClick() {},
+  onClick: undefined,
   withArrow: false,
   containsIcon: false
 };

package/dist/esm/typography/typography.stories.mdx

@@ -0,0 +1,75 @@
+import { typography } from '@storybook/theming';
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+export const fontSizes = ['l3', 'l2', 'l1', 'm3', 'm2', 'm1', 's3', 's2', 's1'].map(
+  (size) => `${typography.size[size]}px`
+);
+
+export const sampleText =
+  'Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.';
+
+<Meta title="Basics/Typography" />
+
+## Sans-serif
+
+```
+font-family:
+  "Nunito Sans",
+  -apple-system,
+  ".SFNSText-Regular",
+  "San Francisco",
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
+```
+
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.base}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.black}
+  sampleText={sampleText}
+/>
+
+## Monospace
+
+```
+font-family:
+  ui-monospace,
+  Menlo,
+  Monaco,
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  "Source Code Pro",
+  "Droid Sans Mono",
+  "Courier New",
+  monospace;
+```
+
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.regular}
+  sampleText={sampleText}
+/>
+<Typeset
+  fontFamily={typography.fonts.mono}
+  fontSizes={fontSizes}
+  fontWeight={typography.weight.bold}
+  sampleText={sampleText}
+/>

package/dist/modern/ActionBar/ActionBar.stories.js

@@ -18,14 +18,14 @@ export default {
     }
   }, storyFn())]
 };
-export const singleItem = () => /*#__PURE__*/React.createElement(ActionBar, {
+export const SingleItem = () => /*#__PURE__*/React.createElement(ActionBar, {
   actionItems: [{
     title: 'Clear',
     onClick: action1
   }]
 });
-singleItem.displayName = "singleItem";
-export const manyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
+SingleItem.displayName = "SingleItem";
+export const ManyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
   actionItems: [{
     title: 'Action string',
     onClick: action1
@@ -38,4 +38,4 @@ export const manyItems = () => /*#__PURE__*/React.createElement(ActionBar, {
     onClick: action3
   }]
 });
-manyItems.displayName = "manyItems";
+ManyItems.displayName = "ManyItems";

package/dist/modern/ScrollArea/GlobalScrollAreaStyles.js

@@ -410,7 +410,7 @@ export const 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/modern/ScrollArea/ScrollArea.stories.js

@@ -35,19 +35,19 @@ export default {
   title: 'Basics/ScrollArea',
   decorators: [storyFn => /*#__PURE__*/React.createElement(Wrapper, null, storyFn())]
 };
-export const vertical = () => /*#__PURE__*/React.createElement(ScrollArea, {
+export const Vertical = () => /*#__PURE__*/React.createElement(ScrollArea, {
   vertical: true
 }, list(i => /*#__PURE__*/React.createElement(Fragment, {
   key: i
 }, /*#__PURE__*/React.createElement(Block, null, i), /*#__PURE__*/React.createElement("br", null))));
-vertical.displayName = "vertical";
-export const horizontal = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Vertical.displayName = "Vertical";
+export const Horizontal = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true
 }, list(i => /*#__PURE__*/React.createElement(Block, {
   key: i
 }, i)));
-horizontal.displayName = "horizontal";
-export const both = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Horizontal.displayName = "Horizontal";
+export const Both = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true,
   vertical: true
 }, list(i => /*#__PURE__*/React.createElement(Fragment, {
@@ -55,8 +55,8 @@ export const both = () => /*#__PURE__*/React.createElement(ScrollArea, {
 }, list(ii => /*#__PURE__*/React.createElement(Block, {
   key: ii
 }, ii * i)), /*#__PURE__*/React.createElement("br", null))));
-both.displayName = "both";
-export const withOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea, {
+Both.displayName = "Both";
+export const WithOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea, {
   horizontal: true,
   vertical: true
 }, /*#__PURE__*/React.createElement("div", {
@@ -67,4 +67,4 @@ export const withOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea
     background: `url('data:image/png;base64,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')`
   }
 }));
-withOuterBorder.displayName = "withOuterBorder";
+WithOuterBorder.displayName = "WithOuterBorder";

package/dist/modern/Zoom/Zoom.stories.js

@@ -32,18 +32,18 @@ const EXAMPLE_ELEMENT = /*#__PURE__*/React.createElement("div", {
 const TemplateElement = args => /*#__PURE__*/React.createElement(Zoom.Element, args);
 
 TemplateElement.displayName = "TemplateElement";
-export const elementActualSize = TemplateElement.bind({});
-elementActualSize.args = {
+export const ElementActualSize = TemplateElement.bind({});
+ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT
 };
-export const elementZoomedIn = TemplateElement.bind({});
-elementZoomedIn.args = {
+export const ElementZoomedIn = TemplateElement.bind({});
+ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT
 };
-export const elementZoomedOut = TemplateElement.bind({});
-elementZoomedOut.args = {
+export const ElementZoomedOut = TemplateElement.bind({});
+ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT
 };
@@ -79,34 +79,34 @@ const TemplateIFrame = args => {
 };
 
 TemplateIFrame.displayName = "TemplateIFrame";
-export const iFrameActualSize = TemplateIFrame.bind({});
-iFrameActualSize.args = {
+export const IFrameActualSize = TemplateIFrame.bind({});
+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
   }
 };
-export const iFrameZoomedIn = TemplateIFrame.bind({});
-iFrameZoomedIn.args = {
+export const IFrameZoomedIn = TemplateIFrame.bind({});
+IFrameZoomedIn.args = {
   scale: 0.7,
   active: true
 };
-iFrameZoomedIn.parameters = {
+IFrameZoomedIn.parameters = {
   chromatic: {
     disableSnapshot: true
   }
 };
-export const iFrameZoomedOut = TemplateIFrame.bind({});
-iFrameZoomedOut.args = {
+export const IFrameZoomedOut = TemplateIFrame.bind({});
+IFrameZoomedOut.args = {
   scale: 3,
   active: true
 };
-iFrameZoomedOut.parameters = {
+IFrameZoomedOut.parameters = {
   chromatic: {
     disableSnapshot: true
   }

package/dist/modern/bar/bar.js

@@ -7,19 +7,21 @@ const Side = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  flexShrink: 0
+  flexShrink: 0,
+  marginLeft: 3,
+  marginRight: 3
 }, ({
   left
 }) => left ? {
   '& > *': {
-    marginLeft: 15
+    marginLeft: 4
   }
 } : {}, ({
   right
 }) => right ? {
   marginLeft: 30,
   '& > *': {
-    marginRight: 15
+    marginRight: 4
   }
 } : {});
 Side.displayName = 'Side';

package/dist/modern/bar/button.js

@@ -4,6 +4,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import { styled, isPropValid } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { auto } from '@popperjs/core';
 
 const ButtonOrLink = (_ref) => {
   let {
@@ -62,37 +64,59 @@ export const TabButton = styled(ButtonOrLink, {
 TabButton.displayName = 'TabButton';
 export const IconButton = styled(ButtonOrLink, {
   shouldForwardProp: isPropValid
-})(({
-  theme
-}) => ({
-  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
   }
 }), ({
   active,
   theme
 }) => active ? {
-  outline: '0 none',
-  borderBottomColor: theme.color.secondary
-} : {});
-IconButton.displayName = 'IconButton';
+  backgroundColor: theme.background.hoverable,
+  color: theme.color.secondary
+} : {}, ({
+  disabled,
+  theme
+}) => disabled ? {
+  opacity: 0.5,
+  cursor: 'not-allowed'
+} : {
+  '&:hover, &:focus-visible': {
+    background: transparentize(0.88, theme.color.secondary),
+    color: theme.color.secondary
+  },
+  '&:focus-visible': {
+    outline: auto // Ensures links have the same focus style
+
+  },
+  '&:focus:not(:focus-visible)': {
+    outline: 'none'
+  }
+});
+IconButton.displayName = 'IconButton';
+const IconPlaceholder = styled.div(({
+  theme
+}) => ({
+  width: 14,
+  height: 14,
+  backgroundColor: theme.appBorderColor,
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`
+}));
+const IconButtonSkeletonWrapper = styled.div(() => ({
+  padding: 5
+}));
+export const IconButtonSkeleton = () => /*#__PURE__*/React.createElement(IconButtonSkeletonWrapper, null, /*#__PURE__*/React.createElement(IconPlaceholder, null));
+IconButtonSkeleton.displayName = "IconButtonSkeleton";

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconButton, IconButtonSkeleton } from './button';
+import { Icons } from '../icon/icon';
+export default {
+  component: IconButton,
+  title: 'Basics/IconButton'
+};
+export const Loading = () => /*#__PURE__*/React.createElement(IconButtonSkeleton, null);
+Loading.displayName = "Loading";
+// eslint-disable-next-line no-underscore-dangle
+export const _IconButton = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "bookmark"
+}));
+_IconButton.displayName = "_IconButton";
+export const Active = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "beaker"
+}));
+Active.displayName = "Active";
+export const Disabled = () => /*#__PURE__*/React.createElement(IconButton, {
+  disabled: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "beaker"
+}));
+Disabled.displayName = "Disabled";
+export const WithText = () => /*#__PURE__*/React.createElement(IconButton, null, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithText.displayName = "WithText";
+export const WithTextActive = () => /*#__PURE__*/React.createElement(IconButton, {
+  active: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithTextActive.displayName = "WithTextActive";
+export const WithTextDisabled = () => /*#__PURE__*/React.createElement(IconButton, {
+  disabled: true
+}, /*#__PURE__*/React.createElement(Icons, {
+  icon: "circlehollow"
+}), "\xA0Howdy!");
+WithTextDisabled.displayName = "WithTextDisabled";

package/dist/modern/bar/separator.js

@@ -5,9 +5,11 @@ export const Separator = styled.span(({
   theme
 }) => ({
   width: 1,
-  height: 24,
+  height: 20,
   background: theme.appBorderColor,
-  marginTop: 8
+  marginTop: 10,
+  marginLeft: 6,
+  marginRight: 2
 }), ({
   force
 }) => force ? {} : {

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

@@ -6,6 +6,13 @@ import { ArgJsDoc } from './ArgJsDoc';
 import { ArgValue } from './ArgValue';
 import { ArgControl } from './ArgControl';
 import { codeCommon } from '../../typography/shared';
+export const argRowLoadingData = {
+  row: {
+    name: 'loading',
+    description: 'loading'
+  },
+  arg: 0
+};
 const Name = styled.span({
   fontWeight: 'bold'
 });
@@ -65,13 +72,14 @@ const StyledTd = styled.td(({
 export const ArgRow = props => {
   var _row$type;
 
+  // const isLoading = 'isLoading' in props;
   const {
     row,
     updateArgs,
     compact,
     expandable,
     initialExpandedArgs
-  } = props;
+  } = 'row' in props ? props : argRowLoadingData;
   const {
     name,
     description

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

@@ -15,6 +15,10 @@ Template.displayName = "Template";
 const baseArgs = {
   updateArgs: action('updateArgs')
 };
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
 export const String = Template.bind({});
 String.args = Object.assign({}, baseArgs, {
   row: {