Merge branch 'main' into 12248-grid-playground-story

package.json

@@ -30,7 +30,7 @@
   },
   "resolutions": {
     "@types/react": "~17.0.2",
-    "@types/prop-types": "15.7.4",
+    "@types/prop-types": "15.7.5",
     "ast-types": "^0.14.0",
     "node-sass": "^6.0.0",
     "react": "~17.0.2",

packages/layout/examples/preview/yarn.lock

@@ -4137,13 +4137,13 @@ fsevents@~2.3.2:
   linkType: hard
 
 "loader-utils@npm:^1.1.0":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
+  version: 1.4.1
+  resolution: "loader-utils@npm:1.4.1"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^1.0.1
-  checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717
+  checksum: ea0b648cba0194e04a90aab6270619f0e35be009e33a443d9e642e93056cd49e6ca4c9678bd1c777a2392551bc5f4d0f24a87f5040608da1274aa84c6eebb502
   languageName: node
   linkType: hard
 

packages/pictograms/examples/preview/yarn.lock

@@ -4271,13 +4271,13 @@ fsevents@~2.3.2:
   linkType: hard
 
 "loader-utils@npm:^1.1.0":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
+  version: 1.4.1
+  resolution: "loader-utils@npm:1.4.1"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^1.0.1
-  checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717
+  checksum: ea0b648cba0194e04a90aab6270619f0e35be009e33a443d9e642e93056cd49e6ca4c9678bd1c777a2392551bc5f4d0f24a87f5040608da1274aa84c6eebb502
   languageName: node
   linkType: hard
 

packages/react/src/components/DatePicker/DatePicker.js

@@ -350,6 +350,10 @@ const DatePicker = React.forwardRef(function DatePicker(
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match(event, keys.Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match(event, keys.ArrowDown)) {
         const {
           calendarContainer,
@@ -370,6 +374,10 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -446,7 +454,7 @@ const DatePicker = React.forwardRef(function DatePicker(
 
   useEffect(() => {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
 

packages/react/src/components/Icons/Icons.stories.js

@@ -34,3 +34,15 @@ export const Default = () => {
     </>
   );
 };
+
+export const Playground = (args) => {
+  return <Bee {...args} />;
+};
+
+Playground.argTypes = {
+  size: {
+    options: ['16', '20', '32'],
+    control: { type: 'select' },
+    defaultValue: 16,
+  },
+};

packages/react/src/components/Popover/next/Popover.stories.js → packages/react/src/components/Popover/Popover.stories.js

@@ -8,7 +8,7 @@
 import './story.scss';
 import { Checkbox } from '@carbon/icons-react';
 import React from 'react';
-import { Popover, PopoverContent } from '../../Popover';
+import { Popover, PopoverContent } from '../Popover';
 import mdx from './Popover.mdx';
 
 export default {

packages/react/src/components/SkeletonIcon/SkeletonIcon-story.js → packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import SkeletonIcon from '../SkeletonIcon';
+import SkeletonIcon from '.';
 
 const propsSkeleton = {
   style: {

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -22,7 +22,8 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes.string,
 };

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonPlaceholder
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletonplaceholder--default" />
+</Preview>
+
 ## Component API
 
 <Props />

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import SkeletonPlaceholder from '.';
+import mdx from './SkeletonPlaceholder.mdx';
+
+export default {
+  title: 'Components/Skeleton/SkeletonPlaceholder',
+  component: SkeletonPlaceholder,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => <SkeletonPlaceholder />;

packages/react/src/components/SkeletonText/SkeletonText.js

@@ -83,7 +83,7 @@ SkeletonText.propTypes = {
    */
   heading: PropTypes.bool,
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes.number,
   /**

packages/react/src/components/SkeletonText/SkeletonText.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonText
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletontext--default" />
+</Preview>
+
 ## Component API
 
 <Props />