@primer/components 31.0.0-rc.f601fc1f → 31.0.2-rc.1e80de40

package/lib-esm/stories/Autocomplete.stories.js

@@ -7,49 +7,28 @@ import Autocomplete from '../Autocomplete/Autocomplete';
 import { AnchoredOverlay } from '../AnchoredOverlay';
 import { ButtonInvisible } from '../Button';
 const items = [{
-  text: 'zero',
+  text: 'css',
   id: 0
 }, {
-  text: 'one',
+  text: 'css-in-js',
   id: 1
 }, {
-  text: 'two',
+  text: 'styled-system',
   id: 2
 }, {
-  text: 'three',
+  text: 'javascript',
   id: 3
 }, {
-  text: 'four',
+  text: 'typescript',
   id: 4
 }, {
-  text: 'five',
+  text: 'react',
   id: 5
 }, {
-  text: 'six',
+  text: 'design-systems',
   id: 6
-}, {
-  text: 'seven',
-  id: 7
-}, {
-  text: 'twenty',
-  id: 20
-}, {
-  text: 'twentyone',
-  id: 21
-}];
-const mockTokens = [{
-  text: 'zero',
-  id: 0
-}, {
-  text: 'one',
-  id: 1
-}, {
-  text: 'three',
-  id: 3
-}, {
-  text: 'four',
-  id: 4
 }];
+const mockTokens = [...items].slice(0, 3);
 export default {
   title: 'Forms/Autocomplete',
   decorators: [Story => {
@@ -69,12 +48,15 @@ export default {
   }]
 };
 export const SingleSelect = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+    block: true,
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -100,12 +82,14 @@ export const MultiSelect = () => {
     sx: {
       gap: '1em'
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -126,7 +110,8 @@ export const MultiSelect = () => {
 };
 MultiSelect.displayName = "MultiSelect";
 export const MultiSelectWithTokenInput = () => {
-  const [tokens, setTokens] = useState(mockTokens);
+  const [tokens, setTokens] = useState([]); // [items[0], items[2]]
+
   const selectedTokenIds = tokens.map(token => token.id);
   const [selectedItemIds, setSelectedItemIds] = useState(selectedTokenIds);
 
@@ -164,12 +149,15 @@ export const MultiSelectWithTokenInput = () => {
     })));
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick options"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick tags"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+    block: true,
     as: TextInputTokens,
     tokens: tokens,
     onTokenRemove: onTokenRemove,
@@ -235,14 +223,19 @@ export const MultiSelectAddNewItem = () => {
     setFilterVal(e.currentTarget.value);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick options"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick tags"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+    block: true,
     as: TextInputTokens,
-    tokens: tokens,
+    tokens: [],
     onTokenRemove: onTokenRemove,
     onChange: handleChange,
     id: "autocompleteInput"
@@ -264,13 +257,16 @@ export const MultiSelectAddNewItem = () => {
     "aria-labelledby": "autocompleteLabel"
   }))));
 };
+MultiSelectAddNewItem.displayName = "MultiSelectAddNewItem";
 export const CustomEmptyStateMessage = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -288,12 +284,14 @@ export const CustomSearchFilter = () => {
 
   const customFilterFn = item => item.text.includes(filterVal);
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput",
     onChange: handleChange
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
@@ -323,12 +321,14 @@ export const CustomSortAfterMenuClose = () => {
 
   const customSortFn = (itemIdA, itemIdB) => isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1;
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -356,12 +356,14 @@ export const WithCallbackWhenOverlayOpenStateChanges = () => {
     sx: {
       gap: '1em'
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -380,12 +382,14 @@ export const AsyncLoadingOfItems = () => {
     }, 1500);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, null, /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: loadedItems,
@@ -396,12 +400,14 @@ export const AsyncLoadingOfItems = () => {
   }))));
 };
 export const RenderingTheMenuOutsideAnOverlay = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Menu, {
     items: items,
@@ -420,11 +426,14 @@ export const CustomOverlayMenuAnchor = () => {
     border: '1px solid black',
     padding: '1em'
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
+    display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick labels"), /*#__PURE__*/React.createElement(Box, _extends({}, anchorWrapperStyles, {
+  }, "Pick tags"), /*#__PURE__*/React.createElement(Box, _extends({}, anchorWrapperStyles, {
     ref: menuAnchorRef
   }), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     as: TextInput,
@@ -452,12 +461,14 @@ export const CustomOverlayMenuAnchor = () => {
   }, "The overlay menu's position is anchored to the div with the black border instead of to the text input"));
 };
 export const WithCustomOverlayProps = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: "bold",
+    fontSize: 1,
     as: "label",
     display: "block",
     htmlFor: "autocompleteInput",
     id: "autocompleteLabel"
-  }, "Pick an option"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
+  }, "Pick a tag"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Autocomplete.Input, {
     id: "autocompleteInput"
   }), /*#__PURE__*/React.createElement(Autocomplete.Overlay, {
     overlayProps: {
@@ -508,7 +519,7 @@ export const InOverlayWithCustomScrollContainerRef = () => {
       whiteSpace: 'nowrap',
       borderWidth: '0'
     }
-  }, "Pick options"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Box, {
+  }, "Pick tags"), /*#__PURE__*/React.createElement(Autocomplete, null, /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     height: "100%"

package/lib-esm/stories/Button.stories.js

@@ -52,6 +52,14 @@ export const buttonGroup = args => /*#__PURE__*/React.createElement(ButtonGroup,
 buttonGroup.displayName = "buttonGroup";
 export const buttonTableList = args => /*#__PURE__*/React.createElement(ButtonTableList, args, "Button Table List");
 buttonTableList.displayName = "buttonTableList";
+export const disabledButton = args => {
+  const props = {
+    disabled: true,
+    ...args
+  };
+  return /*#__PURE__*/React.createElement(Button, props, "Disabled");
+};
+disabledButton.displayName = "disabledButton";
 defaultButton.args = {
   variant: 'medium'
 };

package/lib-esm/stories/useAnchoredPosition.stories.js

@@ -117,7 +117,7 @@ export const UseAnchoredPosition = args => {
     anchorOffset: args.anchorOffset && parseInt(args.anchorOffset, 10),
     alignmentOffset: args.alignmentOffset && parseInt(args.alignmentOffset, 10),
     allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
-  }, [args]);
+  }, [args.anchorY, args.anchorX, args.anchorPosition, args.anchorSide, args.anchorAlignment, args.anchorOffset, args.alignmentOffset, args.allowOutOfBounds, args.floatHeight, args.floatWidth]);
   return /*#__PURE__*/React.createElement(Box, {
     position: "relative",
     m: 2