@atlaskit/link-create 0.8.2 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-create
 
+## 0.9.1
+
+### Patch Changes
+
+- [`84b33e5a4b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84b33e5a4b6) - EDM-6544: minor internal refactors with no expected functional change
+
+## 0.9.0
+
+### Minor Changes
+
+- [`c209f670761`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c209f670761) - Improved testIds
+
 ## 0.8.2
 
 ### Patch Changes

package/dist/cjs/ui/create-form/async-select/main.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AsyncSelect = AsyncSelect;
+exports.TEST_ID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
@@ -15,18 +16,21 @@ var _form2 = require("../../../common/utils/form");
 var _formContext = require("../../../controllers/form-context");
 var _excluded = ["label", "name", "validationHelpText", "isRequired", "testId", "validators", "defaultValue"];
 /** @jsx jsx */
+var TEST_ID = 'link-create-async-select';
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
+exports.TEST_ID = TEST_ID;
 function AsyncSelect(_ref) {
   var label = _ref.label,
     name = _ref.name,
     validationHelpText = _ref.validationHelpText,
     isRequired = _ref.isRequired,
-    testId = _ref.testId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     validators = _ref.validators,
     defaultValue = _ref.defaultValue,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -51,7 +55,9 @@ function AsyncSelect(_ref) {
     var isInvalid = (0, _form2.validateSubmitErrors)(meta);
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({}, fieldProps, rest, {
       isInvalid: isInvalid
-    })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
+    })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, {
+      testId: "".concat(testId, "-helper-message")
+    }, validationHelpText), isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
       testId: "".concat(testId, "-error-message")
     }, error));
   }));

package/dist/cjs/ui/create-form/form-footer/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CreateFormFooter", {
+  enumerable: true,
+  get: function get() {
+    return _main.CreateFormFooter;
+  }
+});
+var _main = require("./main");

package/dist/cjs/ui/create-form/form-footer/main.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFormFooter = CreateFormFooter;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireWildcard(require("@atlaskit/button"));
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _form = require("@atlaskit/form");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _messages = require("./messages");
+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 errorStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+function CreateFormFooter(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    submitting = _ref.submitting,
+    testId = _ref.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react.jsx)("div", {
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, (0, _react.jsx)(_error.default, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), (0, _react.jsx)(_button.ButtonGroup, null, (0, _react.jsx)(_button.default, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_loadingButton.default, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: "".concat(testId, "-button-submit")
+  }, intl.formatMessage(_messages.messages.create))));
+}

package/dist/cjs/ui/create-form/main.js

@@ -1,31 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CreateForm = void 0;
+exports.TEST_ID = exports.CreateForm = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _button = require("@atlaskit/button");
-var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _form = _interopRequireWildcard(require("@atlaskit/form"));
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _form = _interopRequireDefault(require("@atlaskit/form"));
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _formContext = require("../../controllers/form-context");
+var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
-var _messages = require("./messages");
 var _utils = require("./utils");
-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 formStyles = (0, _react2.css)({
@@ -33,19 +25,16 @@ var formStyles = (0, _react2.css)({
   padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
   margin: "var(--ds-space-0, 0px)".concat(" auto")
 });
-var errorStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+var TEST_ID = 'link-create-form';
+exports.TEST_ID = TEST_ID;
 var CreateForm = function CreateForm(_ref) {
   var children = _ref.children,
-    testId = _ref.testId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     isLoading = _ref.isLoading,
     hideFooter = _ref.hideFooter;
-  var intl = (0, _reactIntlNext.useIntl)();
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = (0, _formContext.useFormContext)(),
@@ -93,26 +82,15 @@ var CreateForm = function CreateForm(_ref) {
     var formProps = _ref3.formProps,
       submitting = _ref3.submitting;
     return (0, _react2.jsx)("form", (0, _extends2.default)({}, formProps, {
-      name: "confluence-creation-form",
+      name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
-      css: errorStyles,
-      "data-testid": "link-create-form-error"
-    }, (0, _react2.jsx)(_error.default, {
-      label: formErrorMessage,
-      primaryColor: "var(--ds-icon-danger, #E34935)"
-    }), formErrorMessage), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_standardButton.default, {
-      type: "button",
-      appearance: "subtle",
-      onClick: handleCancel,
-      testId: 'close-button'
-    }, intl.formatMessage(_messages.messages.close)), (0, _react2.jsx)(_loadingButton.default, {
-      type: "submit",
-      appearance: "primary",
-      isLoading: submitting,
-      testId: 'create-button'
-    }, intl.formatMessage(_messages.messages.create)))));
+    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
+      formErrorMessage: formErrorMessage,
+      handleCancel: handleCancel,
+      submitting: submitting,
+      testId: testId
+    }));
   });
 };
 exports.CreateForm = CreateForm;

package/dist/cjs/ui/create-form/textfield/main.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.TEST_ID = void 0;
 exports.TextField = TextField;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,18 +14,22 @@ var _form = require("@atlaskit/form");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _form2 = require("../../../common/utils/form");
 var _formContext = require("../../../controllers/form-context");
-var _excluded = ["label", "name", "validationHelpText", "validators", "defaultValue", "isRequired"];
+var _excluded = ["label", "name", "testId", "validationHelpText", "validators", "defaultValue", "isRequired"];
 /** @jsx jsx */
+var TEST_ID = 'link-create-text-field';
+
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
-
+exports.TEST_ID = TEST_ID;
 function TextField(_ref) {
   var label = _ref.label,
     name = _ref.name,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     validationHelpText = _ref.validationHelpText,
     validators = _ref.validators,
     defaultValue = _ref.defaultValue,
@@ -45,6 +50,7 @@ function TextField(_ref) {
      * `value` will be populated again in `fieldProps` which cause the TextField to be changed
      * to a controlled component and raise a warning from React.
      */
+
     (0, _react2.jsx)(_form.Field, {
       name: name,
       label: label,
@@ -56,10 +62,13 @@ function TextField(_ref) {
         error = _ref2.error;
       var isInvalid = (0, _form2.validateSubmitErrors)(meta);
       return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+        testId: testId,
         isInvalid: isInvalid,
         isRequired: false // Remove the default browser validation
-      })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
-        testId: "".concat(restProps.testId, "-error-message")
+      })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, {
+        testId: "".concat(testId, "-helper-message")
+      }, validationHelpText), error && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
+        testId: "".concat(testId, "-error-message")
       }, error));
     })
   );

package/dist/cjs/ui/link-create/main.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TEST_ID = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -24,6 +24,8 @@ var _excluded = ["testId", "onCreate", "onFailure", "onCancel"],
 /** @jsx jsx */
 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; }
+var TEST_ID = 'link-create';
+exports.TEST_ID = TEST_ID;
 var LinkCreateContent = function LinkCreateContent(_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey;
@@ -36,7 +38,8 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   return (0, _react2.jsx)(_react.Fragment, null, chosenOne.form);
 };
 var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
-  var testId = _ref2.testId,
+  var _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
     onCreate = _ref2.onCreate,
     onFailure = _ref2.onFailure,
     onCancel = _ref2.onCancel,
@@ -87,7 +90,7 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref4) {
     createProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
   var intl = (0, _reactIntlNext.useIntl)();
   return (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
-    testId: createProps.testId && "".concat(createProps.testId, "--modal"),
+    testId: "link-create-modal",
     onClose: createProps.onCancel,
     shouldScrollInViewport: true,
     onOpenComplete: onOpenComplete,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.8.2",
+	"version": "0.9.1",
 	"sideEffects": false
 }

package/dist/es2019/ui/create-form/async-select/main.js

@@ -6,6 +6,7 @@ import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
 import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
+export const TEST_ID = 'link-create-async-select';
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
@@ -17,7 +18,7 @@ export function AsyncSelect({
   name,
   validationHelpText,
   isRequired,
-  testId,
+  testId = TEST_ID,
   validators,
   defaultValue,
   ...rest
@@ -45,7 +46,9 @@ export function AsyncSelect({
     const isInvalid = validateSubmitErrors(meta);
     return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
       isInvalid: isInvalid
-    })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), isInvalid && jsx(ErrorMessage, {
+    })), !error && validationHelpText && jsx(HelperMessage, {
+      testId: `${testId}-helper-message`
+    }, validationHelpText), isInvalid && jsx(ErrorMessage, {
       testId: `${testId}-error-message`
     }, error));
   }));

package/dist/es2019/ui/create-form/form-footer/index.js

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/es2019/ui/create-form/form-footer/main.js

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { FormFooter } from '@atlaskit/form';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { messages } from './messages';
+const errorStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+export function CreateFormFooter({
+  formErrorMessage,
+  handleCancel,
+  submitting,
+  testId
+}) {
+  const intl = useIntl();
+  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+    css: errorStyles,
+    "data-testid": `${testId}-error`
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: `${testId}-button-cancel`
+  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: `${testId}-button-submit`
+  }, intl.formatMessage(messages.create))));
+}

package/dist/es2019/ui/create-form/main.js

@@ -2,38 +2,28 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
-import Form, { FormFooter } from '@atlaskit/form';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Form from '@atlaskit/form';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-import { messages } from './messages';
 import { validateFormData } from './utils';
 const formStyles = css({
   maxWidth: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`,
   padding: `0 0 ${"var(--ds-space-300, 24px)"} 0`,
   margin: `${"var(--ds-space-0, 0px)"} auto`
 });
-const errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+export const TEST_ID = 'link-create-form';
 export const CreateForm = ({
   children,
-  testId,
+  testId = TEST_ID,
   onSubmit,
   onCancel,
   isLoading,
   hideFooter
 }) => {
-  const intl = useIntl();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -66,24 +56,13 @@ export const CreateForm = ({
     formProps,
     submitting
   }) => jsx("form", _extends({}, formProps, {
-    name: "confluence-creation-form",
+    name: "link-create-form",
     "data-testid": testId,
     css: formStyles
-  }), jsx("div", null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
-    css: errorStyles,
-    "data-testid": "link-create-form-error"
-  }, jsx(ErrorIcon, {
-    label: formErrorMessage,
-    primaryColor: "var(--ds-icon-danger, #E34935)"
-  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
-    type: "button",
-    appearance: "subtle",
-    onClick: handleCancel,
-    testId: 'close-button'
-  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
-    type: "submit",
-    appearance: "primary",
-    isLoading: submitting,
-    testId: 'create-button'
-  }, intl.formatMessage(messages.create))))));
+  }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+    formErrorMessage: formErrorMessage,
+    handleCancel: handleCancel,
+    submitting: submitting,
+    testId: testId
+  })));
 };

package/dist/es2019/ui/create-form/textfield/main.js

@@ -6,6 +6,8 @@ import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import AkTextfield from '@atlaskit/textfield';
 import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
+export const TEST_ID = 'link-create-text-field';
+
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
@@ -16,6 +18,7 @@ import { useFormContext } from '../../../controllers/form-context';
 export function TextField({
   label,
   name,
+  testId = TEST_ID,
   validationHelpText,
   validators,
   defaultValue,
@@ -38,6 +41,7 @@ export function TextField({
      * `value` will be populated again in `fieldProps` which cause the TextField to be changed
      * to a controlled component and raise a warning from React.
      */
+
     jsx(Field, {
       name: name,
       label: label,
@@ -50,10 +54,13 @@ export function TextField({
     }) => {
       const isInvalid = validateSubmitErrors(meta);
       return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
+        testId: testId,
         isInvalid: isInvalid,
         isRequired: false // Remove the default browser validation
-      })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
-        testId: `${restProps.testId}-error-message`
+      })), !error && validationHelpText && jsx(HelperMessage, {
+        testId: `${testId}-helper-message`
+      }, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
+        testId: `${testId}-error-message`
       }, error));
     })
   );

package/dist/es2019/ui/link-create/main.js

@@ -9,6 +9,7 @@ import { useFormContext, withLinkCreateFormContext } from '../../controllers/for
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
+export const TEST_ID = 'link-create';
 const LinkCreateContent = ({
   plugins,
   entityKey
@@ -20,7 +21,7 @@ const LinkCreateContent = ({
   return jsx(Fragment, null, chosenOne.form);
 };
 const LinkCreate = withLinkCreateFormContext(({
-  testId,
+  testId = TEST_ID,
   onCreate,
   onFailure,
   onCancel,
@@ -58,7 +59,7 @@ const LinkCreateWithModal = ({
 }) => {
   const intl = useIntl();
   return jsx(ModalTransition, null, !!active && jsx(Modal, {
-    testId: createProps.testId && `${createProps.testId}--modal`,
+    testId: "link-create-modal",
     onClose: createProps.onCancel,
     shouldScrollInViewport: true,
     onOpenComplete: onOpenComplete,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.8.2",
+	"version": "0.9.1",
 	"sideEffects": false
 }

package/dist/esm/ui/create-form/async-select/main.js

@@ -8,6 +8,7 @@ import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
 import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
+export var TEST_ID = 'link-create-async-select';
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
@@ -19,7 +20,8 @@ export function AsyncSelect(_ref) {
     name = _ref.name,
     validationHelpText = _ref.validationHelpText,
     isRequired = _ref.isRequired,
-    testId = _ref.testId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     validators = _ref.validators,
     defaultValue = _ref.defaultValue,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -44,7 +46,9 @@ export function AsyncSelect(_ref) {
     var isInvalid = validateSubmitErrors(meta);
     return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
       isInvalid: isInvalid
-    })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), isInvalid && jsx(ErrorMessage, {
+    })), !error && validationHelpText && jsx(HelperMessage, {
+      testId: "".concat(testId, "-helper-message")
+    }, validationHelpText), isInvalid && jsx(ErrorMessage, {
       testId: "".concat(testId, "-error-message")
     }, error));
   }));

package/dist/esm/ui/create-form/form-footer/index.js

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/esm/ui/create-form/form-footer/main.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { FormFooter } from '@atlaskit/form';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { messages } from './messages';
+var errorStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+export function CreateFormFooter(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    submitting = _ref.submitting,
+    testId = _ref.testId;
+  var intl = useIntl();
+  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    primaryColor: "var(--ds-icon-danger, #E34935)"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    appearance: "subtle",
+    onClick: handleCancel,
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting,
+    testId: "".concat(testId, "-button-submit")
+  }, intl.formatMessage(messages.create))));
+}

package/dist/esm/ui/create-form/main.js

@@ -4,37 +4,28 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
-import Button from '@atlaskit/button/standard-button';
-import Form, { FormFooter } from '@atlaskit/form';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Form from '@atlaskit/form';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-import { messages } from './messages';
 import { validateFormData } from './utils';
 var formStyles = css({
   maxWidth: "".concat(CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
   padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
   margin: "var(--ds-space-0, 0px)".concat(" auto")
 });
-var errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+export var TEST_ID = 'link-create-form';
 export var CreateForm = function CreateForm(_ref) {
   var children = _ref.children,
-    testId = _ref.testId,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     isLoading = _ref.isLoading,
     hideFooter = _ref.hideFooter;
-  var intl = useIntl();
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = useFormContext(),
@@ -82,25 +73,14 @@ export var CreateForm = function CreateForm(_ref) {
     var formProps = _ref3.formProps,
       submitting = _ref3.submitting;
     return jsx("form", _extends({}, formProps, {
-      name: "confluence-creation-form",
+      name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), jsx("div", null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
-      css: errorStyles,
-      "data-testid": "link-create-form-error"
-    }, jsx(ErrorIcon, {
-      label: formErrorMessage,
-      primaryColor: "var(--ds-icon-danger, #E34935)"
-    }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
-      type: "button",
-      appearance: "subtle",
-      onClick: handleCancel,
-      testId: 'close-button'
-    }, intl.formatMessage(messages.close)), jsx(LoadingButton, {
-      type: "submit",
-      appearance: "primary",
-      isLoading: submitting,
-      testId: 'create-button'
-    }, intl.formatMessage(messages.create)))));
+    }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+      formErrorMessage: formErrorMessage,
+      handleCancel: handleCancel,
+      submitting: submitting,
+      testId: testId
+    }));
   });
 };

package/dist/esm/ui/create-form/textfield/main.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "name", "validationHelpText", "validators", "defaultValue", "isRequired"];
+var _excluded = ["label", "name", "testId", "validationHelpText", "validators", "defaultValue", "isRequired"];
 /** @jsx jsx */
 import { Fragment, useEffect } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,6 +8,8 @@ import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import AkTextfield from '@atlaskit/textfield';
 import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
+export var TEST_ID = 'link-create-text-field';
+
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
@@ -18,6 +20,8 @@ import { useFormContext } from '../../../controllers/form-context';
 export function TextField(_ref) {
   var label = _ref.label,
     name = _ref.name,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     validationHelpText = _ref.validationHelpText,
     validators = _ref.validators,
     defaultValue = _ref.defaultValue,
@@ -38,6 +42,7 @@ export function TextField(_ref) {
      * `value` will be populated again in `fieldProps` which cause the TextField to be changed
      * to a controlled component and raise a warning from React.
      */
+
     jsx(Field, {
       name: name,
       label: label,
@@ -49,10 +54,13 @@ export function TextField(_ref) {
         error = _ref2.error;
       var isInvalid = validateSubmitErrors(meta);
       return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
+        testId: testId,
         isInvalid: isInvalid,
         isRequired: false // Remove the default browser validation
-      })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
-        testId: "".concat(restProps.testId, "-error-message")
+      })), !error && validationHelpText && jsx(HelperMessage, {
+        testId: "".concat(testId, "-helper-message")
+      }, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
+        testId: "".concat(testId, "-error-message")
       }, error));
     })
   );

package/dist/esm/ui/link-create/main.js

@@ -14,6 +14,7 @@ import { useFormContext, withLinkCreateFormContext } from '../../controllers/for
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
+export var TEST_ID = 'link-create';
 var LinkCreateContent = function LinkCreateContent(_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey;
@@ -26,7 +27,8 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   return jsx(Fragment, null, chosenOne.form);
 };
 var LinkCreate = withLinkCreateFormContext(function (_ref2) {
-  var testId = _ref2.testId,
+  var _ref2$testId = _ref2.testId,
+    testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
     onCreate = _ref2.onCreate,
     onFailure = _ref2.onFailure,
     onCancel = _ref2.onCancel,
@@ -77,7 +79,7 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref4) {
     createProps = _objectWithoutProperties(_ref4, _excluded2);
   var intl = useIntl();
   return jsx(ModalTransition, null, !!active && jsx(Modal, {
-    testId: createProps.testId && "".concat(createProps.testId, "--modal"),
+    testId: "link-create-modal",
     onClose: createProps.onCancel,
     shouldScrollInViewport: true,
     onOpenComplete: onOpenComplete,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.8.2",
+	"version": "0.9.1",
 	"sideEffects": false
 }

package/dist/types/ui/create-form/async-select/main.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { OptionType } from '@atlaskit/select';
 import { AsyncSelectProps } from './types';
+export declare const TEST_ID = "link-create-async-select";
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by

package/dist/types/ui/create-form/form-footer/index.d.ts

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/types/ui/create-form/form-footer/main.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export interface CreateFormFooterProps {
+    formErrorMessage: string | undefined;
+    handleCancel: () => void;
+    submitting: boolean;
+    testId?: string;
+}
+export declare function CreateFormFooter({ formErrorMessage, handleCancel, submitting, testId, }: CreateFormFooterProps): jsx.JSX.Element;

package/dist/types/ui/create-form/main.d.ts

@@ -9,4 +9,5 @@ export interface CreateFormProps<FormData> {
     isLoading?: boolean;
     hideFooter?: boolean;
 }
+export declare const TEST_ID = "link-create-form";
 export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types/ui/create-form/textfield/main.d.ts

@@ -1,9 +1,10 @@
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from './types';
+export declare const TEST_ID = "link-create-text-field";
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
-export declare function TextField({ label, name, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;
+export declare function TextField({ label, name, testId, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;

package/dist/types/ui/link-create/main.d.ts

@@ -1,4 +1,5 @@
 import { jsx } from '@emotion/react';
 import { LinkCreateWithModalProps } from '../../common/types';
+export declare const TEST_ID = "link-create";
 declare const LinkCreateWithModal: ({ active, modalTitle, onOpenComplete, onCloseComplete, ...createProps }: LinkCreateWithModalProps) => jsx.JSX.Element;
 export default LinkCreateWithModal;

package/dist/types-ts4.5/ui/create-form/async-select/main.d.ts

@@ -1,6 +1,7 @@
 import { jsx } from '@emotion/react';
 import { OptionType } from '@atlaskit/select';
 import { AsyncSelectProps } from './types';
+export declare const TEST_ID = "link-create-async-select";
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by

package/dist/types-ts4.5/ui/create-form/form-footer/index.d.ts

@@ -0,0 +1 @@
+export { CreateFormFooter } from './main';

package/dist/types-ts4.5/ui/create-form/form-footer/main.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export interface CreateFormFooterProps {
+    formErrorMessage: string | undefined;
+    handleCancel: () => void;
+    submitting: boolean;
+    testId?: string;
+}
+export declare function CreateFormFooter({ formErrorMessage, handleCancel, submitting, testId, }: CreateFormFooterProps): jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/main.d.ts

@@ -9,4 +9,5 @@ export interface CreateFormProps<FormData> {
     isLoading?: boolean;
     hideFooter?: boolean;
 }
+export declare const TEST_ID = "link-create-form";
 export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/textfield/main.d.ts

@@ -1,9 +1,10 @@
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from './types';
+export declare const TEST_ID = "link-create-text-field";
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
  * Validation is handled by the form as it is on form submission. Any errors returned by
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
-export declare function TextField({ label, name, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;
+export declare function TextField({ label, name, testId, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;

package/dist/types-ts4.5/ui/link-create/main.d.ts

@@ -1,4 +1,5 @@
 import { jsx } from '@emotion/react';
 import { LinkCreateWithModalProps } from '../../common/types';
+export declare const TEST_ID = "link-create";
 declare const LinkCreateWithModal: ({ active, modalTitle, onOpenComplete, onCloseComplete, ...createProps }: LinkCreateWithModalProps) => jsx.JSX.Element;
 export default LinkCreateWithModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -44,7 +44,7 @@
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,6 +53,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/link-test-helpers": "^4.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
@@ -102,5 +103,10 @@
       ]
     }
   },
+  "techstackIgnore": {
+    "stricter": [
+      "@atlassian/tangerine/project-structure"
+    ]
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }

package/report.api.md

@@ -145,6 +145,7 @@ export interface LinkCreateWithModalProps
 export function TextField({
   label,
   name,
+  testId,
   validationHelpText,
   validators,
   defaultValue,