@atlaskit/modal-dialog 12.19.2 → 12.19.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/modal-dialog
 
+## 12.19.3
+
+### Patch Changes
+
+- [#107054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107054)
+  [`046508790857d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/046508790857d) -
+  Add appearance to modal title for better AT support
+
 ## 12.19.2
 
 ### Patch Changes

package/dist/cjs/modal-title.js

@@ -8,8 +8,6 @@ exports.default = void 0;
 var _react = require("@emotion/react");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
 var _hooks = require("./hooks");
 var _constants = require("./internal/constants");
 /**
@@ -87,28 +85,18 @@ var ModalTitle = function ModalTitle(props) {
     titleId = _useModal.titleId,
     modalTestId = _useModal.testId;
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
-  return (0, _platformFeatureFlags.fg)('platform_modal-dialog-heading-icon-a11y-fix') ? (0, _react.jsx)(_primitives.Flex, {
-    gap: "space.100"
-  }, appearance && (0, _react.jsx)(TitleIcon, {
-    appearance: appearance
-  }), (0, _react.jsx)("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, (0, _react.jsx)("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && "".concat(testId, "-text")
-  }, children))) :
-  // eslint-disable-next-line @atlaskit/design-system/use-heading
-  (0, _react.jsx)("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, appearance && (0, _react.jsx)(TitleIcon, {
-    appearance: appearance
-  }), (0, _react.jsx)("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && "".concat(testId, "-text")
-  }, children));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-heading
+    (0, _react.jsx)("h1", {
+      css: titleStyles,
+      "data-testid": testId
+    }, appearance && (0, _react.jsx)(TitleIcon, {
+      appearance: appearance
+    }), (0, _react.jsx)("span", {
+      id: titleId,
+      css: [textStyles, !isMultiline && truncatedTextStyles],
+      "data-testid": testId && "".concat(testId, "-text")
+    }, children))
+  );
 };
 var _default = exports.default = ModalTitle;

package/dist/cjs/modal-wrapper.js

@@ -108,7 +108,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.19.2"
+    packageVersion: "12.19.3"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/modal-title.js

@@ -7,8 +7,6 @@
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Flex } from '@atlaskit/primitives';
 import { useModal } from './hooks';
 import { iconColor } from './internal/constants';
 const titleStyles = css({
@@ -82,28 +80,18 @@ const ModalTitle = props => {
     testId: modalTestId
   } = useModal();
   const testId = userDefinedTestId || modalTestId && `${modalTestId}--title`;
-  return fg('platform_modal-dialog-heading-icon-a11y-fix') ? jsx(Flex, {
-    gap: "space.100"
-  }, appearance && jsx(TitleIcon, {
-    appearance: appearance
-  }), jsx("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, jsx("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && `${testId}-text`
-  }, children))) :
-  // eslint-disable-next-line @atlaskit/design-system/use-heading
-  jsx("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, appearance && jsx(TitleIcon, {
-    appearance: appearance
-  }), jsx("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && `${testId}-text`
-  }, children));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-heading
+    jsx("h1", {
+      css: titleStyles,
+      "data-testid": testId
+    }, appearance && jsx(TitleIcon, {
+      appearance: appearance
+    }), jsx("span", {
+      id: titleId,
+      css: [textStyles, !isMultiline && truncatedTextStyles],
+      "data-testid": testId && `${testId}-text`
+    }, children))
+  );
 };
 export default ModalTitle;

package/dist/es2019/modal-wrapper.js

@@ -93,7 +93,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.19.2"
+    packageVersion: "12.19.3"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/modal-title.js

@@ -7,8 +7,6 @@
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import WarningIcon from '@atlaskit/icon/core/migration/warning';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Flex } from '@atlaskit/primitives';
 import { useModal } from './hooks';
 import { iconColor } from './internal/constants';
 var titleStyles = css({
@@ -79,28 +77,18 @@ var ModalTitle = function ModalTitle(props) {
     titleId = _useModal.titleId,
     modalTestId = _useModal.testId;
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
-  return fg('platform_modal-dialog-heading-icon-a11y-fix') ? jsx(Flex, {
-    gap: "space.100"
-  }, appearance && jsx(TitleIcon, {
-    appearance: appearance
-  }), jsx("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, jsx("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && "".concat(testId, "-text")
-  }, children))) :
-  // eslint-disable-next-line @atlaskit/design-system/use-heading
-  jsx("h1", {
-    css: titleStyles,
-    "data-testid": testId
-  }, appearance && jsx(TitleIcon, {
-    appearance: appearance
-  }), jsx("span", {
-    id: titleId,
-    css: [textStyles, !isMultiline && truncatedTextStyles],
-    "data-testid": testId && "".concat(testId, "-text")
-  }, children));
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-heading
+    jsx("h1", {
+      css: titleStyles,
+      "data-testid": testId
+    }, appearance && jsx(TitleIcon, {
+      appearance: appearance
+    }), jsx("span", {
+      id: titleId,
+      css: [textStyles, !isMultiline && truncatedTextStyles],
+      "data-testid": testId && "".concat(testId, "-text")
+    }, children))
+  );
 };
 export default ModalTitle;

package/dist/esm/modal-wrapper.js

@@ -98,7 +98,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.19.2"
+    packageVersion: "12.19.3"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.19.2",
+	"version": "12.19.3",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^3.1.0",
+		"@atlaskit/tokens": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -58,7 +58,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "*",
 		"@atlaskit/checkbox": "^15.2.0",
-		"@atlaskit/dropdown-menu": "^12.24.0",
+		"@atlaskit/dropdown-menu": "^12.25.0",
 		"@atlaskit/popup": "^1.30.0",
 		"@atlaskit/radio": "^7.0.0",
 		"@atlaskit/select": "^18.9.0",

package/__perf__/default.tsx

@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-
-import Button from '@atlaskit/button/new';
-
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
-
-export default function Example() {
-	const [isOpen, setIsOpen] = useState(false);
-	const close = () => setIsOpen(false);
-	const open = () => setIsOpen(true);
-
-	return (
-		<>
-			<button onClick={open} type="button">
-				open modal
-			</button>
-
-			<ModalTransition>
-				{isOpen && (
-					<Modal onClose={close}>
-						<ModalHeader>
-							<ModalTitle>Modal title</ModalTitle>
-						</ModalHeader>
-						<ModalBody>A simple Modal</ModalBody>
-						<ModalFooter>
-							<Button testId="primary" appearance="primary" onClick={close}>
-								Close
-							</Button>
-							<Button testId="secondary" appearance="subtle">
-								Secondary Action
-							</Button>
-						</ModalFooter>
-					</Modal>
-				)}
-			</ModalTransition>
-		</>
-	);
-}

package/__perf__/interactions.tsx

@@ -1,115 +0,0 @@
-import React, { useCallback, useState } from 'react';
-
-import { findByText, fireEvent } from '@testing-library/dom';
-import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
-
-import Button from '@atlaskit/button/new';
-
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
-
-const modalText = (index: number) => `Hello, world (${index})`;
-const closeText = (index: number) => `Close (${index})`;
-const openText = (index: number) => `Open (${index})`;
-
-const InteractionPerformance = ({ index = 0 }: { index?: number }) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => setIsOpen(false), []);
-
-	return (
-		<>
-			<button data-testid="open-button" onClick={open} type="button">
-				{openText(index)}
-			</button>
-
-			<ModalTransition>
-				{isOpen && (
-					<Modal onClose={close}>
-						<ModalHeader>
-							<ModalTitle>Modal dialog</ModalTitle>
-						</ModalHeader>
-						<ModalBody>
-							{modalText(index)}
-							<InteractionPerformance index={index + 1} />
-						</ModalBody>
-						<ModalFooter>
-							<Button testId="primary" appearance="primary" onClick={close}>
-								{closeText(index)}
-							</Button>
-						</ModalFooter>
-					</Modal>
-				)}
-			</ModalTransition>
-		</>
-	);
-};
-
-const interactionTasks: PublicInteractionTask[] = [
-	{
-		name: 'Open first',
-		description: 'Opens the modal dialog',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const openButton = await findByText(container, openText(0));
-
-			await controls.time(async () => {
-				fireEvent.click(openButton);
-				await findByText(document.body, modalText(0));
-			});
-		},
-	},
-	{
-		name: 'Close first',
-		description: 'Closes the modal dialog',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const openButton = await findByText(container, openText(0));
-			fireEvent.click(openButton);
-
-			await controls.time(async () => {
-				const closeButton = await findByText(document.body, closeText(0));
-				fireEvent.click(closeButton);
-			});
-		},
-	},
-	{
-		name: 'Open second',
-		description: 'Opens the a second modal',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const openButton = await findByText(container, openText(0));
-			fireEvent.click(openButton);
-			await findByText(document.body, modalText(0));
-			const secondOpenButton = await findByText(document.body, openText(1));
-
-			await controls.time(async () => {
-				fireEvent.click(secondOpenButton);
-				await findByText(document.body, modalText(1));
-			});
-		},
-	},
-	{
-		name: 'Close second',
-		description: 'Closes the a second modal',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const openButton = await findByText(container, openText(0));
-			fireEvent.click(openButton);
-			await findByText(document.body, modalText(0));
-			const secondOpenButton = await findByText(document.body, openText(1));
-			fireEvent.click(secondOpenButton);
-			await findByText(document.body, modalText(1));
-
-			await controls.time(async () => {
-				const closeButton = await findByText(document.body, closeText(1));
-				fireEvent.click(closeButton);
-			});
-		},
-	},
-];
-
-InteractionPerformance.story = {
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default InteractionPerformance;

package/__perf__/scroll.tsx

@@ -1,81 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import { findByTestId, findByText, fireEvent } from '@testing-library/dom';
-import Lorem from 'react-lorem-component';
-import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
-
-import Button from '@atlaskit/button/new';
-
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '../src';
-
-const openText = 'Open modal';
-const closeText = 'Close';
-const scrollToBottomText = 'Scroll to bottom';
-
-const ScrollPerformance = () => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const bottomRef = useRef<HTMLDivElement>(null);
-
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => setIsOpen(false), []);
-
-	const scrollToBottom = () => bottomRef.current && bottomRef.current.scrollIntoView(true);
-
-	return (
-		<>
-			<button data-testid="open" onClick={open} type="button">
-				{openText}
-			</button>
-
-			<ModalTransition>
-				{isOpen && (
-					<Modal onClose={close} testId="modal">
-						<ModalHeader>
-							<ModalTitle>Modal dialog</ModalTitle>
-						</ModalHeader>
-						<ModalBody>
-							<Lorem count={10} />
-							<div ref={bottomRef} />
-						</ModalBody>
-						<ModalFooter>
-							<Button testId="close" appearance="primary" onClick={close}>
-								{closeText}
-							</Button>
-							<Button testId="scroll-to-bottom" appearance="subtle" onClick={scrollToBottom}>
-								{scrollToBottomText}
-							</Button>
-						</ModalFooter>
-					</Modal>
-				)}
-			</ModalTransition>
-		</>
-	);
-};
-
-const interactionTasks: PublicInteractionTask[] = [
-	{
-		name: 'Scroll to bottom',
-		description: 'Opens the modal dialog',
-		run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
-			const openButton = await findByText(container, openText);
-			fireEvent.click(openButton);
-
-			const content = await findByTestId(document.body, 'modal--scrollable');
-
-			await controls.time(async () => {
-				content.scrollTo(0, content.scrollHeight);
-			});
-		},
-	},
-];
-
-ScrollPerformance.story = {
-	parameters: {
-		performance: {
-			interactions: interactionTasks,
-		},
-	},
-};
-
-export default ScrollPerformance;