@atlaskit/form 8.8.2 → 8.8.4

package/dist/es2019/form-section.js

@@ -18,20 +18,20 @@ const formSectionTitleStyles = css({
 });
 const formSectionWrapperStyles = css({
   marginTop: `${gridSize * 3}px`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const lightH600Styles = css(h600({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
   }
 }));
-
 const FormSectionWrapper = ({
   children
 }) => {
@@ -39,7 +39,6 @@ const FormSectionWrapper = ({
     css: formSectionWrapperStyles
   }, children);
 };
-
 const FormSectionTitle = ({
   children
 }) => {
@@ -50,7 +49,6 @@ const FormSectionTitle = ({
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
-
 const FormSectionDescription = ({
   children
 }) => {
@@ -58,6 +56,7 @@ const FormSectionDescription = ({
     css: formSectionDescriptionStyles
   }, children);
 };
+
 /**
  * __Form section__
  *
@@ -68,8 +67,6 @@ const FormSectionDescription = ({
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 const FormSection = ({
   children,
   description,
@@ -77,5 +74,4 @@ const FormSection = ({
 }) => {
   return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
 };
-
 export default FormSection;

package/dist/es2019/form.js

@@ -2,7 +2,6 @@ import React, { createContext, useCallback, useEffect, useMemo, useRef, useState
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
-
 /**
  * __Form context__
  *
@@ -14,12 +13,12 @@ export const FormContext = /*#__PURE__*/createContext({
   },
   getCurrentValue: () => undefined
 });
+
 /**
  * __Is disabled context__
  *
  * An is disabled context creates the context for when a value is disabled.
  */
-
 export const IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   const formRef = useRef(null);
@@ -37,8 +36,8 @@ export default function Form(props) {
             const initialValues = state.formState.initialValues;
             const values = state.formState.values;
             const value = name && typeof defaultValue === 'function' ? defaultValue(initialValues[name]) : defaultValue;
-            /* eslint-disable no-param-reassign */
 
+            /* eslint-disable no-param-reassign */
             set(initialValues, name, value);
             set(values, name, value);
             /* eslint-enable */
@@ -46,6 +45,7 @@ export default function Form(props) {
         }
       }
     });
+
     createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [])(finalForm);
     return finalForm;
   });
@@ -75,31 +75,24 @@ export default function Form(props) {
     form.resumeValidation();
     return unsubscribe;
   }, [form]);
-
   const handleSubmit = e => {
     if (e) {
       e.preventDefault();
     }
-
     form.submit();
   };
-
   const handleReset = initialValues => {
     form.reset(initialValues);
   };
-
   const handleKeyDown = e => {
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && formRef.current) {
       const submitButton = formRef.current.querySelector('button:not([type]), button[type="submit"], input[type="submit"]');
-
       if (submitButton) {
         submitButton.click();
       }
-
       e.preventDefault();
     }
   };
-
   const {
     isDisabled = false,
     children
@@ -108,11 +101,11 @@ export default function Form(props) {
     dirty,
     submitting
   } = state;
+
   /**
    * This method is needed in FormContext to use it on the field level
    * to check the current value of the field in case of the component re-mounting.
    */
-
   const getCurrentValue = useCallback(name => {
     const formState = form.getState();
     return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;

package/dist/es2019/index.js

@@ -7,4 +7,5 @@ export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
 export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
-export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved
+export { default as Fieldset } from './fieldset';
+// eslint-disable-next-line import/no-unresolved

package/dist/es2019/label.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -10,19 +12,30 @@ const labelStyles = css({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
-const lightH200Styles = css(h200({
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
-    mode: 'light'
+    mode
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+}), {
+  color: `var(--ds-text-subtle, ${subtleHeading({
+    theme: {
+      mode
+    }
+  })})`
+}]);
+
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const lightH200Styles = getFieldsetLabelDynamicStyles('light');
+
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
 /**
  * __Label__
  *
@@ -31,7 +44,6 @@ const darkH200Styles = css(h200({
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-
 const Label = ({
   children,
   htmlFor,
@@ -46,5 +58,4 @@ const Label = ({
     htmlFor: htmlFor
   }, children);
 };
-
 export default Label;

package/dist/es2019/messages.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
@@ -9,28 +10,20 @@ import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
 const gridSize = getGridSize();
-const fontFamily = getFontFamily(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const fontFamily = getFontFamily();
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const lightH200Styles = css(h200({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH200Styles = css(h200({
   theme: {
     mode: 'dark'
   }
 }));
-const messageErrorColorStyles = css({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-const messageNeutralColorStyles = css({
-  color: `var(--ds-text-subtlest, ${N200})`
-});
-const messageValidColorStyles = css({
-  color: "var(--ds-text-success, #216E4E)"
-});
 const messageStyles = css({
   display: 'flex',
   marginTop: `${gridSize * 0.5}px`,
@@ -38,10 +31,20 @@ const messageStyles = css({
   fontFamily: `${fontFamily}`,
   fontWeight: 'normal'
 });
+const messageAppearanceStyles = {
+  default: css({
+    color: `var(--ds-text-subtlest, ${N200})`
+  }),
+  error: css({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: css({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 const iconWrapperStyles = css({
   display: 'flex'
 });
-
 const IconWrapper = ({
   children
 }) => {
@@ -49,22 +52,41 @@ const IconWrapper = ({
     css: iconWrapperStyles
   }, children);
 };
-
+const messageIcons = {
+  error: jsx(ErrorIcon, {
+    size: "small",
+    label: "error"
+  }),
+  valid: jsx(SuccessIcon, {
+    size: "small",
+    label: "success"
+  })
+};
 const Message = ({
   children,
-  error,
-  valid,
+  appearance = 'default',
   fieldId,
   testId
 }) => {
   const {
     mode
   } = useGlobalTheme();
+  const icon = messageIcons[appearance];
+
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * If the child is just a string, this is not required and we can use one
+   * less DOM element.
+   */
+  const content = typeof children === 'string' ? children : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && jsx(IconWrapper, null, icon), content);
 };
 
 /**
@@ -81,6 +103,7 @@ export const HelperMessage = ({
   fieldId: fieldId ? `${fieldId}-helper` : undefined,
   testId: testId
 }, children));
+
 /**
  * __Error message__
  *
@@ -88,18 +111,15 @@ export const HelperMessage = ({
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-
 export const ErrorMessage = ({
   children,
   testId
 }) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
-  error: true,
+  appearance: "error",
   fieldId: fieldId ? `${fieldId}-error` : undefined,
   testId: testId
-}, jsx(IconWrapper, null, jsx(ErrorIcon, {
-  size: "small",
-  label: "error"
-})), children));
+}, children));
+
 /**
  * __Valid message__
  *
@@ -107,15 +127,11 @@ export const ErrorMessage = ({
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-
 export const ValidMessage = ({
   children,
   testId
 }) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+  appearance: "valid",
   fieldId: fieldId ? `${fieldId}-valid` : undefined,
-  testId: testId,
-  valid: true
-}, jsx(IconWrapper, null, jsx(SuccessIcon, {
-  size: "small",
-  label: "success"
-})), children));
+  testId: testId
+}, children));

package/dist/es2019/range-field.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Field from './field';
-
 /**
  * __Range field__
  *
@@ -15,8 +14,8 @@ const RangeField = props => {
   const {
     children,
     ...strippedProps
-  } = props; // isInvalid and isRequired are specifically invalid for range inputs
-
+  } = props;
+  // isInvalid and isRequired are specifically invalid for range inputs
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -35,5 +34,4 @@ const RangeField = props => {
     }))
   );
 };
-
 export default RangeField;

package/dist/es2019/version.json

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

package/dist/esm/checkbox-field.js

@@ -3,18 +3,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "defaultIsChecked", "value"],
-    _excluded2 = ["value"],
-    _excluded3 = ["fieldProps"],
-    _excluded4 = ["value"],
-    _excluded5 = ["fieldProps"];
-
+  _excluded2 = ["value"],
+  _excluded3 = ["fieldProps"],
+  _excluded4 = ["value"],
+  _excluded5 = ["fieldProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useCallback } from 'react';
 import Field from './field';
-
 /**
  * __Checkbox field__
  *
@@ -26,12 +22,12 @@ import Field from './field';
  */
 var CheckboxField = function CheckboxField(props) {
   var children = props.children,
-      _props$defaultIsCheck = props.defaultIsChecked,
-      defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
-      value = props.value,
-      rest = _objectWithoutProperties(props, _excluded); // Maintains a memoised list of the default values
-
+    _props$defaultIsCheck = props.defaultIsChecked,
+    defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
+    value = props.value,
+    rest = _objectWithoutProperties(props, _excluded);
 
+  // Maintains a memoised list of the default values
   var defaultValue = useCallback(function () {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat(_toConsumableArray(currentValue), [value]) : currentValue;
@@ -45,10 +41,9 @@ var CheckboxField = function CheckboxField(props) {
     }
   }), function (_ref) {
     var _ref$fieldProps = _ref.fieldProps,
-        fieldValue = _ref$fieldProps.value,
-        otherFieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
-        others = _objectWithoutProperties(_ref, _excluded3);
-
+      fieldValue = _ref$fieldProps.value,
+      otherFieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
+      others = _objectWithoutProperties(_ref, _excluded3);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: !!fieldValue.find(function (v) {
@@ -64,10 +59,9 @@ var CheckboxField = function CheckboxField(props) {
     }
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
-        fieldValue = _ref2$fieldProps.value,
-        otherFieldProps = _objectWithoutProperties(_ref2$fieldProps, _excluded4),
-        others = _objectWithoutProperties(_ref2, _excluded5);
-
+      fieldValue = _ref2$fieldProps.value,
+      otherFieldProps = _objectWithoutProperties(_ref2$fieldProps, _excluded4),
+      others = _objectWithoutProperties(_ref2, _excluded5);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: fieldValue,
@@ -76,7 +70,6 @@ var CheckboxField = function CheckboxField(props) {
     }, others));
   });
 };
-
 CheckboxField.defaultProps = {
   defaultIsChecked: false
 };