@atlaskit/form 8.9.0 → 8.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.10.0
+
+### Minor Changes
+
+- [`c71b0ac8222`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c71b0ac8222) - Added testId prop to the Field component for better testing.
+
+## 8.9.1
+
+### Patch Changes
+
+- [`eb179f0c089`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb179f0c089) - Migrates unit tests from enzyme to RTL.
+
 ## 8.9.0
 
 ### Minor Changes

package/dist/cjs/field.js

@@ -255,10 +255,12 @@ function Field(props) {
     id: fieldId
   });
   return (0, _react2.jsx)("div", {
-    css: fieldWrapperStyles
+    css: fieldWrapperStyles,
+    "data-testid": props.testId
   }, props.label && (0, _react2.jsx)(_label.default, {
     htmlFor: fieldId,
-    id: "".concat(fieldId, "-label")
+    id: "".concat(fieldId, "-label"),
+    testId: props.testId && "".concat(props.testId, "--label")
   }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
     value: fieldId
   }, props.children({

package/dist/cjs/label.js

@@ -55,13 +55,15 @@ var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 var Label = function Label(_ref) {
   var children = _ref.children,
     htmlFor = _ref.htmlFor,
-    id = _ref.id;
+    id = _ref.id,
+    testId = _ref.testId;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
-    htmlFor: htmlFor
+    htmlFor: htmlFor,
+    "data-testid": testId
   }, children);
 };
 var _default = Label;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"sideEffects": false
 }

package/dist/es2019/field.js

@@ -238,10 +238,12 @@ export default function Field(props) {
     id: fieldId
   };
   return jsx("div", {
-    css: fieldWrapperStyles
+    css: fieldWrapperStyles,
+    "data-testid": props.testId
   }, props.label && jsx(Label, {
     htmlFor: fieldId,
-    id: `${fieldId}-label`
+    id: `${fieldId}-label`,
+    testId: props.testId && `${props.testId}--label`
   }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({

package/dist/es2019/label.js

@@ -47,7 +47,8 @@ const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 const Label = ({
   children,
   htmlFor,
-  id
+  id,
+  testId
 }) => {
   const {
     mode
@@ -55,7 +56,8 @@ const Label = ({
   return jsx("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
-    htmlFor: htmlFor
+    htmlFor: htmlFor,
+    "data-testid": testId
   }, children);
 };
 export default Label;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"sideEffects": false
 }

package/dist/esm/field.js

@@ -247,10 +247,12 @@ export default function Field(props) {
     id: fieldId
   });
   return jsx("div", {
-    css: fieldWrapperStyles
+    css: fieldWrapperStyles,
+    "data-testid": props.testId
   }, props.label && jsx(Label, {
     htmlFor: fieldId,
-    id: "".concat(fieldId, "-label")
+    id: "".concat(fieldId, "-label"),
+    testId: props.testId && "".concat(props.testId, "--label")
   }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({

package/dist/esm/label.js

@@ -49,13 +49,15 @@ var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 var Label = function Label(_ref) {
   var children = _ref.children,
     htmlFor = _ref.htmlFor,
-    id = _ref.id;
+    id = _ref.id,
+    testId = _ref.testId;
   var _useGlobalTheme = useGlobalTheme(),
     mode = _useGlobalTheme.mode;
   return jsx("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
-    htmlFor: htmlFor
+    htmlFor: htmlFor,
+    "data-testid": testId
   }, children);
 };
 export default Label;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"sideEffects": false
 }

package/dist/types/field.d.ts

@@ -72,6 +72,10 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      * Checks whether the field input is valid. This is usually used to display a message relevant to the current value using `ErrorMessage`, `HelperMessage` or `ValidMessage`.
      */
     validate?: (value: FieldValue | undefined, formState: Object, fieldState: Meta) => string | void | Promise<string | void>;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     */
+    testId?: string;
 }
 /**
  * __Field id__

package/dist/types/label.d.ts

@@ -4,6 +4,7 @@ export interface LabelProps {
     id?: string;
     htmlFor: string;
     children: ReactNode;
+    testId?: string;
 }
 /**
  * __Label__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.9.0",
+  "version": "8.10.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -75,8 +75,8 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/final-form-focus": "^1.1.1",
-    "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",