@atlaskit/modal-dialog 12.2.12 → 12.2.15

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/modal-dialog
 
+## 12.2.15
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 12.2.14
+
+### Patch Changes
+
+- [`454ec1bbf07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/454ec1bbf07) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 12.2.13
+
+### Patch Changes
+
+- [`1c3948738f9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c3948738f9) - Adjust the styles for an internal positioning element to constrain the height for ModalBody and restore support for custom scrolling regions"
+
 ## 12.2.12
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -17,7 +17,9 @@ export default function Example() {
 
   return (
     <>
-      <button onClick={open}>open modal</button>
+      <button onClick={open} type="button">
+        open modal
+      </button>
 
       <ModalTransition>
         {isOpen && (

package/__perf__/interactions.tsx

@@ -27,7 +27,7 @@ const InteractionPerformance = ({ index = 0 }: { index?: number }) => {
 
   return (
     <>
-      <button data-testid="open-button" onClick={open}>
+      <button data-testid="open-button" onClick={open} type="button">
         {openText(index)}
       </button>
 

package/__perf__/scroll.tsx

@@ -34,7 +34,7 @@ const ScrollPerformance = () => {
 
   return (
     <>
-      <button data-testid="open" onClick={open}>
+      <button data-testid="open" onClick={open} type="button">
         {openText}
       </button>
 

package/codemods/{12.0.0-lite-mode.ts → 12.0.0-lite-mode.tsx}

@@ -7,7 +7,7 @@ import {
 } from '@atlaskit/codemod-utils';
 
 import { handlePropSpread } from './migrations/handle-prop-spread';
-import { inlineWidthNamesDeclaration } from './migrations/inline-WidthNames-declaration';
+import { inlineWidthNamesDeclaration } from './migrations/inline-width-names-declaration';
 import { mapActionsProp } from './migrations/map-actions-prop';
 import { mapBodyFromProps } from './migrations/map-body-from-props';
 import { mapContainerFromProps } from './migrations/map-container-from-props';
@@ -19,7 +19,7 @@ import { removeComponentOverrideProps } from './migrations/remove-component-over
 import { removeIsChromeless } from './migrations/remove-is-chromeless';
 import { renameAppearanceType } from './migrations/rename-appearance-type';
 import { renameInnerComponentPropTypes } from './migrations/rename-inner-component-prop-types';
-import { renameScrollBehaviorToShouldScrollInViewport } from './migrations/rename-scrollBehavior-to-shouldScrollInViewport';
+import { renameScrollBehaviorToShouldScrollInViewport } from './migrations/rename-scroll-behavior-to-should-scroll-in-viewport';
 
 /**
  * The order of these migrations matters!

package/codemods/__tests__/{inline-WidthNames-declaration.test.ts → inline-width-names-declaration.test.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { inlineWidthNamesDeclaration } from '../migrations/inline-WidthNames-declaration';
+import { inlineWidthNamesDeclaration } from '../migrations/inline-width-names-declaration';
 
 const transformer = createTransformer([inlineWidthNamesDeclaration]);
 

package/codemods/__tests__/{rename-scrollBehavior-to-shouldScrollInViewport.test.ts → rename-scroll-behavior-to-should-scroll-in-viewport.test.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { renameScrollBehaviorToShouldScrollInViewport } from '../migrations/rename-scrollBehavior-to-shouldScrollInViewport';
+import { renameScrollBehaviorToShouldScrollInViewport } from '../migrations/rename-scroll-behavior-to-should-scroll-in-viewport';
 
 const transformer = createTransformer([
   renameScrollBehaviorToShouldScrollInViewport,

package/dist/cjs/internal/components/modal-dialog.js

@@ -47,7 +47,8 @@ var dialogStyles = (0, _core.css)({
   height: '100%',
   minHeight: 0,
   maxHeight: '100vh',
-  flex: '1 1 auto',
+  // Flex-grow set to 0 to prevent this element from filling its parent flexbox container
+  flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   color: _constants.textColor,
@@ -151,7 +152,8 @@ var ModalDialog = function ModalDialog(props) {
       "aria-modal": true
     }), children));
   }))));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = ModalDialog;
 exports.default = _default;

package/dist/cjs/internal/components/positioner.js

@@ -17,15 +17,18 @@ var _constants2 = require("../constants");
 
 /** @jsx jsx */
 var maxWidthDimensions = "calc(100vw - ".concat(_constants2.gutter * 2, "px)");
-var maxHeightDimensions = "calc(100vh - ".concat(_constants2.gutter * 2 - 1, "px)");
+var maxHeightDimensions = "calc(100vh - ".concat(_constants2.gutter * 2 - 1, "px)"); // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
+
 var positionerStyles = (0, _core.css)({
+  display: 'flex',
   width: '100%',
   maxWidth: '100%',
   height: '100%',
   position: 'fixed',
   zIndex: _constants.layers.modal(),
   top: 0,
-  left: 0
+  left: 0,
+  flexDirection: 'column'
 });
 var viewportScrollStyles = (0, _core.css)({
   height: 'auto',
@@ -53,9 +56,11 @@ var stackTransitionStyles = (0, _core.css)({
   transitionProperty: 'transform',
   transitionTimingFunction: _curves.easeInOut,
 
-  /** Duplicated from @atlaskit/motion/accessibility
+  /**
+   * Duplicated from @atlaskit/motion/accessibility
    * because @repo/internal/styles/consistent-style-ordering
-   * doesn't work well with object spreading. */
+   * doesn't work well with object spreading.
+   */
   '@media (prefers-reduced-motion: reduce)': {
     animation: 'none',
     transition: 'none'
@@ -82,7 +87,8 @@ var Positioner = function Positioner(props) {
     stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
     "data-testid": testId && "".concat(testId, "--positioner")
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = Positioner;
 exports.default = _default;

package/dist/cjs/internal/components/scroll-container.js

@@ -37,15 +37,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var baseStyles = (0, _core.css)({
-  /**
-   * We need to inherit flex styles from its parent here
-   * in case they're set because we're essentially being a proxy container
-   * between the original flex parent and its children (the modal body).
-   */
   display: 'inherit',
   margin: 0,
   flex: 'inherit',
   flexDirection: 'inherit',
+  flexGrow: 1,
   overflowX: 'hidden',
   overflowY: 'auto',
   '@media (min-width: 480px)': {

package/dist/cjs/internal/context.js

@@ -7,6 +7,7 @@ exports.ScrollContext = exports.ModalContext = void 0;
 
 var _react = require("react");
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
 var ModalContext = /*#__PURE__*/(0, _react.createContext)(null);
 exports.ModalContext = ModalContext;
 var ScrollContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/internal/hooks/use-on-motion-finish.js

@@ -7,6 +7,7 @@ exports.default = useOnMotionFinish;
 
 var _react = require("react");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useOnMotionFinish(_ref) {
   var onOpenComplete = _ref.onOpenComplete,
       onCloseComplete = _ref.onCloseComplete;

package/dist/cjs/internal/hooks/use-scroll.js

@@ -9,6 +9,7 @@ var _react = require("react");
 
 var _context = require("../context");
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 function useScroll() {
   var shouldScrollInViewport = (0, _react.useContext)(_context.ScrollContext);
 

package/dist/cjs/modal-body.js

@@ -29,19 +29,30 @@ var bodyStyles = (0, _core.css)({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer. */
+ * keyline height from header and footer.
+ */
 
 var bodyScrollStyles = (0, _core.css)({
   padding: "".concat(_constants.keylineHeight, "px ").concat(_constants.padding, "px")
 });
 /**
  * Keylines will not be shown if scrolling in viewport so we do
- * not account for them in this case. */
+ * not account for them in this case.
+ */
 
 var viewportScrollStyles = (0, _core.css)({
   padding: "0px ".concat(_constants.padding, "px")
 });
 
+/**
+ * __Modal body__
+ *
+ * A modal body is used to display the main content of a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-body-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalBody = function ModalBody(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/cjs/modal-footer.js

@@ -22,6 +22,15 @@ var footerStyles = (0, _core.css)({
   gap: "".concat(_constants.footerItemGap, "px")
 });
 
+/**
+ * __Modal footer__
+ *
+ * A modal footer often contains a primary action and the ability to cancel and close the dialog, though can contain any React element.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-footer)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-footer-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalFooter = function ModalFooter(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/cjs/modal-header.js

@@ -25,6 +25,15 @@ var headerStyles = (0, _core.css)({
   justifyContent: 'space-between'
 });
 
+/**
+ * __Modal header__
+ *
+ * A modal header contains the title of the modal and can contain other React elements such as a close button.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalHeader = function ModalHeader(props) {
   var children = props.children,
       userDefinedTestId = props.testId;

package/dist/cjs/modal-title.js

@@ -38,7 +38,8 @@ var textStyles = (0, _core.css)({
   /**
    * This ensures that the element fills the whole header space
    * and its content does not overflow (since flex items don't
-   * shrink past its content size by default). */
+   * shrink past its content size by default).
+   */
   flex: '1 1 auto',
   wordWrap: 'break-word'
 });
@@ -50,7 +51,8 @@ var iconStyles = (0, _core.css)({
 /**
  * When the title is truncated (not multi-line), we adjust the
  * line height to avoid cropping the descenders. This removes
- * the extra spacing that we get from that adjustment. */
+ * the extra spacing that we get from that adjustment.
+ */
 
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = (0, _core.css)({
@@ -78,6 +80,15 @@ var TitleIcon = function TitleIcon(_ref) {
   }));
 };
 
+/**
+ * __Modal title__
+ *
+ * A modal title is used to display a title within a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalTitle = function ModalTitle(props) {
   var appearance = props.appearance,
       children = props.children,

package/dist/cjs/modal-transition.js

@@ -11,6 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
 
+/**
+ * __Modal transition__
+ *
+ * A modal transition wraps a modal to provide a fluid transition upon opening and closing.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 var ModalTransition = function ModalTransition(props) {
   return /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, {
     appear: true

package/dist/cjs/modal-wrapper.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
 
 var _core = require("@emotion/core");
@@ -41,12 +39,11 @@ var _useModalStack = _interopRequireDefault(require("./internal/hooks/use-modal-
 
 var _usePreventProgrammaticScroll = _interopRequireDefault(require("./internal/hooks/use-prevent-programmatic-scroll"));
 
-var _excluded = ["autoFocus", "shouldCloseOnEscapePress", "shouldCloseOnOverlayClick", "shouldScrollInViewport", "stackIndex", "onClose", "onStackChange", "isBlanketHidden", "testId"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/** @jsx jsx */
 var fillScreenStyles = (0, _core.css)({
   width: '100vw',
   height: '100vh',
@@ -56,6 +53,16 @@ var fillScreenStyles = (0, _core.css)({
   overflowY: 'auto',
   WebkitOverflowScrolling: 'touch'
 });
+/**
+ * __Modal wrapper__
+ *
+ * A modal wrapper displays content that requires user interaction, in a layer above the page.
+ * This component is primary container for other modal components.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 
 var ModalWrapper = function ModalWrapper(props) {
   var _props$autoFocus = props.autoFocus,
@@ -72,8 +79,12 @@ var ModalWrapper = function ModalWrapper(props) {
       _props$onStackChange = props.onStackChange,
       onStackChange = _props$onStackChange === void 0 ? _noop.default : _props$onStackChange,
       isBlanketHidden = props.isBlanketHidden,
-      testId = props.testId,
-      modalDialogProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+      children = props.children,
+      height = props.height,
+      width = props.width,
+      onCloseComplete = props.onCloseComplete,
+      onOpenComplete = props.onOpenComplete,
+      testId = props.testId;
   var calculatedStackIndex = (0, _useModalStack.default)({
     onStackChange: onStackChange
   });
@@ -86,7 +97,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.2.12"
+    packageVersion: "12.2.15"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -102,13 +113,17 @@ var ModalWrapper = function ModalWrapper(props) {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,
     testId: testId && "".concat(testId, "--blanket")
-  }, (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
+  }, (0, _core.jsx)(_modalDialog.default, {
     testId: testId,
     autoFocus: autoFocus,
     stackIndex: stackIndex,
     onClose: onCloseHandler,
-    shouldScrollInViewport: shouldScrollInViewport
-  }, modalDialogProps)));
+    shouldScrollInViewport: shouldScrollInViewport,
+    height: height,
+    width: width,
+    onCloseComplete: onCloseComplete,
+    onOpenComplete: onOpenComplete
+  }, children));
   return (0, _core.jsx)(_portal.default, {
     zIndex: _constants.layers.modal()
   }, (0, _core.jsx)(_fadeIn.default, null, function (fadeInProps) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.2.12",
+	"version": "12.2.15",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/modal-dialog.js

@@ -21,7 +21,8 @@ const dialogStyles = css({
   height: '100%',
   minHeight: 0,
   maxHeight: '100vh',
-  flex: '1 1 auto',
+  // Flex-grow set to 0 to prevent this element from filling its parent flexbox container
+  flex: '0 1 auto',
   flexDirection: 'column',
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   color: textColor,
@@ -116,6 +117,7 @@ const ModalDialog = props => {
     tabIndex: -1,
     "aria-modal": true
   }), children))))));
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default ModalDialog;

package/dist/es2019/internal/components/positioner.js

@@ -5,15 +5,18 @@ import { mediumDurationMs } from '@atlaskit/motion/durations';
 import { layers } from '@atlaskit/theme/constants';
 import { gutter, verticalOffset } from '../constants';
 const maxWidthDimensions = `calc(100vw - ${gutter * 2}px)`;
-const maxHeightDimensions = `calc(100vh - ${gutter * 2 - 1}px)`;
+const maxHeightDimensions = `calc(100vh - ${gutter * 2 - 1}px)`; // Flex and min-content are set to constrain the height of the body and support multi-column scrolling experiences
+
 const positionerStyles = css({
+  display: 'flex',
   width: '100%',
   maxWidth: '100%',
   height: '100%',
   position: 'fixed',
   zIndex: layers.modal(),
   top: 0,
-  left: 0
+  left: 0,
+  flexDirection: 'column'
 });
 const viewportScrollStyles = css({
   height: 'auto',
@@ -41,9 +44,11 @@ const stackTransitionStyles = css({
   transitionProperty: 'transform',
   transitionTimingFunction: easeInOut,
 
-  /** Duplicated from @atlaskit/motion/accessibility
+  /**
+   * Duplicated from @atlaskit/motion/accessibility
    * because @repo/internal/styles/consistent-style-ordering
-   * doesn't work well with object spreading. */
+   * doesn't work well with object spreading.
+   */
   '@media (prefers-reduced-motion: reduce)': {
     animation: 'none',
     transition: 'none'
@@ -72,6 +77,7 @@ const Positioner = props => {
     stackIndex > 0 ? stackTransformStyles : stackIdleStyles, shouldScrollInViewport ? viewportScrollStyles : bodyScrollStyles],
     "data-testid": testId && `${testId}--positioner`
   }, children);
-};
+}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default Positioner;

package/dist/es2019/internal/components/scroll-container.js

@@ -10,15 +10,11 @@ import useStateRef from '@atlaskit/ds-lib/use-state-ref';
 import FocusRing from '@atlaskit/focus-ring';
 import { keylineColor, keylineHeight } from '../constants';
 const baseStyles = css({
-  /**
-   * We need to inherit flex styles from its parent here
-   * in case they're set because we're essentially being a proxy container
-   * between the original flex parent and its children (the modal body).
-   */
   display: 'inherit',
   margin: 0,
   flex: 'inherit',
   flexDirection: 'inherit',
+  flexGrow: 1,
   overflowX: 'hidden',
   overflowY: 'auto',
   '@media (min-width: 480px)': {

package/dist/es2019/internal/context.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
 export const ModalContext = /*#__PURE__*/createContext(null);
 export const ScrollContext = /*#__PURE__*/createContext(null);

package/dist/es2019/internal/hooks/use-on-motion-finish.js

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default function useOnMotionFinish({
   onOpenComplete,
   onCloseComplete

package/dist/es2019/internal/hooks/use-scroll.js

@@ -1,5 +1,6 @@
 import { useContext } from 'react';
-import { ScrollContext } from '../context';
+import { ScrollContext } from '../context'; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default function useScroll() {
   const shouldScrollInViewport = useContext(ScrollContext);
 

package/dist/es2019/modal-body.js

@@ -13,19 +13,30 @@ const bodyStyles = css({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer. */
+ * keyline height from header and footer.
+ */
 
 const bodyScrollStyles = css({
   padding: `${keylineHeight}px ${padding}px`
 });
 /**
  * Keylines will not be shown if scrolling in viewport so we do
- * not account for them in this case. */
+ * not account for them in this case.
+ */
 
 const viewportScrollStyles = css({
   padding: `0px ${padding}px`
 });
 
+/**
+ * __Modal body__
+ *
+ * A modal body is used to display the main content of a modal.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-body-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 const ModalBody = props => {
   const {
     children,

package/dist/es2019/modal-footer.js

@@ -12,6 +12,15 @@ const footerStyles = css({
   gap: `${footerItemGap}px`
 });
 
+/**
+ * __Modal footer__
+ *
+ * A modal footer often contains a primary action and the ability to cancel and close the dialog, though can contain any React element.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-footer)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-footer-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 const ModalFooter = props => {
   const {
     children,

package/dist/es2019/modal-header.js

@@ -12,6 +12,15 @@ const headerStyles = css({
   justifyContent: 'space-between'
 });
 
+/**
+ * __Modal header__
+ *
+ * A modal header contains the title of the modal and can contain other React elements such as a close button.
+ *
+ * - [Examples](https://atlassian.design/components/modal-dialog/examples#modal-header)
+ * - [Code](https://atlassian.design/components/modal-dialog/code#modal-header-props)
+ * - [Usage](https://atlassian.design/components/modal-dialog/usage)
+ */
 const ModalHeader = props => {
   const {
     children,