Merge branch 'main' into 10021-refactor-pagination-component

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "0.10.0-rc.0",
+  "version": "0.10.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.9.0-rc.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,11 +43,11 @@
   },
   "dependencies": {
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/icons-react": "^10.43.0-rc.0",
-    "@carbon/styles": "^0.9.0-rc.0",
+    "@carbon/icons-react": "^10.43.0",
+    "@carbon/styles": "^0.9.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.48.0-rc.0",
-    "carbon-components-react": "^7.48.0-rc.0",
+    "carbon-components": "^10.48.0",
+    "carbon-components-react": "^7.48.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/themes": "^10.47.0-rc.0",
+    "@carbon/themes": "^10.47.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -91,6 +91,8 @@
     "webpack": "^4.41.5"
   },
   "sideEffects": [
+    "es/index.js",
+    "lib/index.js",
     "es/feature-flags.js",
     "lib/feature-flags.js",
     "es/prefix.js",

packages/carbon-react/scss/components/stack/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/stack';

packages/carbon-react/tasks/build-styles.js

@@ -367,6 +367,16 @@ async function build() {
               },
             ],
           },
+          {
+            type: 'directory',
+            filepath: 'stack',
+            files: [
+              {
+                type: 'file',
+                filepath: '_index.scss',
+              },
+            ],
+          },
           {
             type: 'directory',
             filepath: 'structured-list',

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.48.0-rc.0",
+  "version": "10.48.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -81,9 +81,9 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
     "@carbon/cli": "^10.31.0",
-    "@carbon/elements": "^10.47.0-rc.0",
-    "@carbon/icons-handlebars": "^10.43.0-rc.0",
-    "@carbon/icons-react": "^10.43.0-rc.0",
+    "@carbon/elements": "^10.47.0",
+    "@carbon/icons-handlebars": "^10.43.0",
+    "@carbon/icons-react": "^10.43.0",
     "@carbon/test-utils": "^10.20.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.3.0",

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.47.0-rc.0",
+  "version": "10.47.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,11 +37,11 @@
   "dependencies": {
     "@carbon/colors": "^10.34.0",
     "@carbon/grid": "^10.39.0",
-    "@carbon/icons": "^10.43.0-rc.0",
+    "@carbon/icons": "^10.43.0",
     "@carbon/import-once": "^10.6.0",
     "@carbon/layout": "^10.34.0",
     "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.47.0-rc.0",
+    "@carbon/themes": "^10.47.0",
     "@carbon/type": "^10.38.0"
   },
   "devDependencies": {

packages/icons-handlebars/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.43.0-rc.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "^10.25.0",
-    "@carbon/icons": "^10.43.0-rc.0"
+    "@carbon/icons": "^10.43.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"

packages/icons-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.43.0-rc.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.30.0",
-    "@carbon/icons": "^10.43.0-rc.0",
+    "@carbon/icons": "^10.43.0",
     "rimraf": "^3.0.2"
   },
   "sideEffects": false

packages/icons-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.43.0-rc.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.5.0",
-    "@carbon/icons": "^10.43.0-rc.0",
+    "@carbon/icons": "^10.43.0",
     "fs-extra": "^8.1.0",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.0",

packages/icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "10.43.0-rc.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.48.0-rc.0",
+  "version": "7.48.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/icons-react": "^10.43.0-rc.0",
+    "@carbon/icons-react": "^10.43.0",
     "@carbon/layout": "^10.34.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
     "classnames": "2.3.1",
@@ -103,7 +103,7 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "browserslist-config-carbon": "^10.6.1",
-    "carbon-components": "^10.48.0-rc.0",
+    "carbon-components": "^10.48.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^4.1.1",
     "cli-table": "^0.3.0",

packages/react/src/components/ComposedModal/index.js

@@ -7,22 +7,26 @@
 
 import * as FeatureFlags from '@carbon/feature-flags';
 import { ModalHeader as ModalHeaderNext } from './next/ModalHeader';
+import { ModalFooter as ModalFooterNext } from './next/ModalFooter';
 import { default as ComposedModalNext } from './next/ComposedModal';
 import {
   default as ComposedModalClassic,
   ModalHeader as ModalHeaderClassic,
   ModalBody,
-  ModalFooter,
+  ModalFooter as ModalFooterClassic,
 } from './ComposedModal';
 
 export const ModalHeader = FeatureFlags.enabled('enable-v11-release')
   ? ModalHeaderNext
   : ModalHeaderClassic;
 
+export const ModalFooter = FeatureFlags.enabled('enable-v11-release')
+  ? ModalFooterNext
+  : ModalFooterClassic;
+
 export const ComposedModal = FeatureFlags.enabled('enable-v11-release')
   ? ComposedModalNext
   : ComposedModalClassic;
 
-export { ModalBody, ModalFooter };
-
+export { ModalBody };
 export default from './ComposedModal';

packages/react/src/components/ComposedModal/next/ComposedModal.js

@@ -3,19 +3,83 @@ import PropTypes from 'prop-types';
 import { ModalHeader } from './ModalHeader';
 import { ModalFooter } from '../ComposedModal';
 
-import classNames from 'classnames';
+import cx from 'classnames';
 
 import toggleClass from '../../../tools/toggleClass';
+import requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy';
 
 import wrapFocus from '../../../internal/wrapFocus';
 import { usePrefix } from '../../../internal/usePrefix';
 
+export function ModalBody({
+  className: customClassName,
+  children,
+  hasForm,
+  hasScrollingContent,
+  ...rest
+}) {
+  const prefix = usePrefix();
+  const contentClass = cx({
+    [`${prefix}--modal-content`]: true,
+    [`${prefix}--modal-content--with-form`]: hasForm,
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent,
+    [customClassName]: customClassName,
+  });
+  const hasScrollingContentProps = hasScrollingContent
+    ? {
+        tabIndex: 0,
+        role: 'region',
+      }
+    : {};
+  return (
+    <>
+      <div className={contentClass} {...hasScrollingContentProps} {...rest}>
+        {children}
+      </div>
+      {hasScrollingContent && (
+        <div className={`${prefix}--modal-content--overflow-indicator`} />
+      )}
+    </>
+  );
+}
+
+ModalBody.propTypes = {
+  /**
+   * Required props for the accessibility label of the header
+   */
+  ['aria-label']: requiredIfGivenPropIsTruthy(
+    'hasScrollingContent',
+    PropTypes.string
+  ),
+
+  /**
+   * Specify the content to be placed in the ModalBody
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to the Modal Body node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide whether the modal content has a form element.
+   * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+   */
+  hasForm: PropTypes.bool,
+
+  /**
+   * Specify whether the modal contains scrolling content
+   */
+  hasScrollingContent: PropTypes.bool,
+};
+
 const ComposedModal = React.forwardRef(function ComposedModal(
   {
     ['aria-labelledby']: ariaLabelledBy,
     ['aria-label']: ariaLabel,
     children,
-    className,
+    className: customClassName,
     containerClassName,
     danger,
     onClose,
@@ -88,14 +152,14 @@ const ComposedModal = React.forwardRef(function ComposedModal(
     }
   }
 
-  const modalClass = classNames({
+  const modalClass = cx({
     [`${prefix}--modal`]: true,
     'is-visible': isOpen,
-    [className]: className,
+    [customClassName]: customClassName,
     [`${prefix}--modal--danger`]: danger,
   });
 
-  const containerClass = classNames({
+  const containerClass = cx({
     [`${prefix}--modal-container`]: true,
     [`${prefix}--modal-container--${size}`]: size,
     [containerClassName]: containerClassName,

packages/react/src/components/ComposedModal/next/ComposedModal.stories.js

@@ -16,9 +16,9 @@ import {
   text,
   withKnobs,
 } from '@storybook/addon-knobs';
-import { ModalBody, ModalFooter } from '../ComposedModal';
-import ComposedModal from './ComposedModal';
+import ComposedModal, { ModalBody } from './ComposedModal';
 import { ModalHeader } from './ModalHeader';
+import { ModalFooter } from './ModalFooter';
 import Select from '../../Select';
 import SelectItem from '../../SelectItem';
 import TextInput from '../../TextInput';
@@ -120,8 +120,8 @@ const props = {
         false
       ),
       ...secondaryButtons(numberOfButtons),
-      onRequestClose: action('onRequestClose'),
-      onRequestSubmit: action('onRequestSubmit'),
+      onRequestClose: () => action('onRequestClose')(),
+      onRequestSubmit: () => action('onRequestSubmit')(),
     };
   },
 };