@atlaskit/form 10.2.0 → 10.3.0

package/__perf__/default.tsx

@@ -9,10 +9,15 @@ import Form, { ErrorMessage, Field, FormFooter, HelperMessage } from '../src';
 export default () => (
   <div
     style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'flex',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: '400px',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       maxWidth: '100%',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: '0 auto',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       flexDirection: 'column',
     }}
   >

package/dist/cjs/label.js

@@ -5,16 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Legend = exports.Label = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
 var fieldsetLabelStyles = (0, _react.css)({
   display: 'inline-block',
-  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
   marginBlockEnd: "var(--ds-space-050, 4px)",
-  marginBlockStart: 0
+  marginBlockStart: "var(--ds-space-0, 0px)"
+});
+var oldFieldsetLabelStyles = (0, _react.css)({
+  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+var newFieldsetLabelStyles = (0, _react.css)({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontWeight: "var(--ds-font-weight-bold, 700)"
 });
 
 /**
@@ -22,7 +29,7 @@ var fieldsetLabelStyles = (0, _react.css)({
  *
  * A label represents a caption for an item in a user interface.
  *
- * It's recommended that a label has a `4px` spacing above its associated
+ * It's recommended that a label has a `space.050` spacing above its associated
  * control element.
  */
 var Label = exports.Label = function Label(_ref) {
@@ -31,7 +38,7 @@ var Label = exports.Label = function Label(_ref) {
     id = _ref.id,
     testId = _ref.testId;
   return (0, _react.jsx)("label", {
-    css: fieldsetLabelStyles,
+    css: [fieldsetLabelStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
@@ -46,7 +53,7 @@ var Label = exports.Label = function Label(_ref) {
 var Legend = exports.Legend = function Legend(_ref2) {
   var children = _ref2.children;
   return (0, _react.jsx)("legend", {
-    css: fieldsetLabelStyles
+    css: [fieldsetLabelStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
   }, children);
 };
 var _default = exports.default = Label;

package/dist/es2019/label.js

@@ -1,14 +1,21 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N200 } from '@atlaskit/theme/colors';
 const fieldsetLabelStyles = css({
   display: 'inline-block',
-  color: `var(--ds-text-subtle, ${N200})`,
   font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
   marginBlockEnd: "var(--ds-space-050, 4px)",
-  marginBlockStart: 0
+  marginBlockStart: "var(--ds-space-0, 0px)"
+});
+const oldFieldsetLabelStyles = css({
+  color: `var(--ds-text-subtle, ${N200})`,
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+const newFieldsetLabelStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontWeight: "var(--ds-font-weight-bold, 700)"
 });
 
 /**
@@ -16,7 +23,7 @@ const fieldsetLabelStyles = css({
  *
  * A label represents a caption for an item in a user interface.
  *
- * It's recommended that a label has a `4px` spacing above its associated
+ * It's recommended that a label has a `space.050` spacing above its associated
  * control element.
  */
 export const Label = ({
@@ -25,7 +32,7 @@ export const Label = ({
   id,
   testId
 }) => jsx("label", {
-  css: fieldsetLabelStyles,
+  css: [fieldsetLabelStyles, getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
   id: id,
   htmlFor: htmlFor,
   "data-testid": testId
@@ -40,7 +47,7 @@ export const Legend = ({
   children
 }) => {
   return jsx("legend", {
-    css: fieldsetLabelStyles
+    css: [fieldsetLabelStyles, getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
   }, children);
 };
 export default Label;

package/dist/esm/label.js

@@ -1,14 +1,21 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N200 } from '@atlaskit/theme/colors';
 var fieldsetLabelStyles = css({
   display: 'inline-block',
-  color: "var(--ds-text-subtle, ".concat(N200, ")"),
   font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
   marginBlockEnd: "var(--ds-space-050, 4px)",
-  marginBlockStart: 0
+  marginBlockStart: "var(--ds-space-0, 0px)"
+});
+var oldFieldsetLabelStyles = css({
+  color: "var(--ds-text-subtle, ".concat(N200, ")"),
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+var newFieldsetLabelStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  fontWeight: "var(--ds-font-weight-bold, 700)"
 });
 
 /**
@@ -16,7 +23,7 @@ var fieldsetLabelStyles = css({
  *
  * A label represents a caption for an item in a user interface.
  *
- * It's recommended that a label has a `4px` spacing above its associated
+ * It's recommended that a label has a `space.050` spacing above its associated
  * control element.
  */
 export var Label = function Label(_ref) {
@@ -25,7 +32,7 @@ export var Label = function Label(_ref) {
     id = _ref.id,
     testId = _ref.testId;
   return jsx("label", {
-    css: fieldsetLabelStyles,
+    css: [fieldsetLabelStyles, getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
@@ -40,7 +47,7 @@ export var Label = function Label(_ref) {
 export var Legend = function Legend(_ref2) {
   var children = _ref2.children;
   return jsx("legend", {
-    css: fieldsetLabelStyles
+    css: [fieldsetLabelStyles, getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
   }, children);
 };
 export default Label;

package/dist/types/checkbox-field.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { FieldProps, Meta } from './field';
+import { type FC, type ReactNode } from 'react';
+import { type FieldProps, type Meta } from './field';
 export interface CheckboxFieldProps extends FieldProps<string | undefined> {
     isChecked: boolean;
 }

package/dist/types/field.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FormEvent, ReactNode } from 'react';
+import { type FormEvent, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {

package/dist/types/fieldset.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**

package/dist/types/form-footer.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { Align } from './types';
+import { type Align } from './types';
 export interface FormFooterProps {
     /**
      * Content to render in the footer of the form.

package/dist/types/form-section.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**

package/dist/types/form.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { FieldConfig, FieldSubscriber, FieldSubscription, FormApi, FormState, Unsubscribe } from 'final-form';
-import { OnSubmitHandler } from './types';
+import React, { type ReactNode } from 'react';
+import { type FieldConfig, type FieldSubscriber, type FieldSubscription, type FormApi, type FormState, type Unsubscribe } from 'final-form';
+import { type OnSubmitHandler } from './types';
 type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
 type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
 type GetCurrentValue = <FormValues>(name: string) => FormValues[keyof FormValues] | undefined;

package/dist/types/label.d.ts

@@ -14,7 +14,7 @@ export interface LegendProps {
  *
  * A label represents a caption for an item in a user interface.
  *
- * It's recommended that a label has a `4px` spacing above its associated
+ * It's recommended that a label has a `space.050` spacing above its associated
  * control element.
  */
 export declare const Label: FC<LabelProps>;

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**

package/dist/types/range-field.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-import { FieldProps, Meta } from './field';
+import React, { type FC, type ReactNode } from 'react';
+import { type FieldProps, type Meta } from './field';
 type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 export interface RangeFieldProps {
     children: (args: {

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { FormApi as FinalFormAPI } from 'final-form';
+import { type FormApi as FinalFormAPI } from 'final-form';
 export type Align = 'start' | 'end';
 export type FormApi<FormData> = FinalFormAPI<FormData>;
 export type OnSubmitHandler<FormData> = (values: FormData, form: FormApi<FormData>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<Object | void>;

package/dist/types/use-form-state.d.ts

@@ -1,4 +1,4 @@
-import { FormState, FormSubscription } from 'final-form';
+import { type FormState, type FormSubscription } from 'final-form';
 /**
  * A hook to return a recent form state for use within the `<Form>` as it requires context access.
  * This is useful for previewing form state, or for building custom fields that need to react to form state.

package/dist/types-ts4.5/checkbox-field.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { FieldProps, Meta } from './field';
+import { type FC, type ReactNode } from 'react';
+import { type FieldProps, type Meta } from './field';
 export interface CheckboxFieldProps extends FieldProps<string | undefined> {
     isChecked: boolean;
 }

package/dist/types-ts4.5/field.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FormEvent, ReactNode } from 'react';
+import { type FormEvent, type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {

package/dist/types-ts4.5/fieldset.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { Align } from './types';
+import { type Align } from './types';
 export interface FormFooterProps {
     /**
      * Content to render in the footer of the form.

package/dist/types-ts4.5/form-section.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**

package/dist/types-ts4.5/form.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
-import { FieldConfig, FieldSubscriber, FieldSubscription, FormApi, FormState, Unsubscribe } from 'final-form';
-import { OnSubmitHandler } from './types';
+import React, { type ReactNode } from 'react';
+import { type FieldConfig, type FieldSubscriber, type FieldSubscription, type FormApi, type FormState, type Unsubscribe } from 'final-form';
+import { type OnSubmitHandler } from './types';
 type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
 type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
 type GetCurrentValue = <FormValues>(name: string) => FormValues[keyof FormValues] | undefined;

package/dist/types-ts4.5/label.d.ts

@@ -14,7 +14,7 @@ export interface LegendProps {
  *
  * A label represents a caption for an item in a user interface.
  *
- * It's recommended that a label has a `4px` spacing above its associated
+ * It's recommended that a label has a `space.050` spacing above its associated
  * control element.
  */
 export declare const Label: FC<LabelProps>;

package/dist/types-ts4.5/messages.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**

package/dist/types-ts4.5/range-field.d.ts

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode } from 'react';
-import { FieldProps, Meta } from './field';
+import React, { type FC, type ReactNode } from 'react';
+import { type FieldProps, type Meta } from './field';
 type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 export interface RangeFieldProps {
     children: (args: {

package/dist/types-ts4.5/types.d.ts

@@ -1,4 +1,4 @@
-import { FormApi as FinalFormAPI } from 'final-form';
+import { type FormApi as FinalFormAPI } from 'final-form';
 export type Align = 'start' | 'end';
 export type FormApi<FormData> = FinalFormAPI<FormData>;
 export type OnSubmitHandler<FormData> = (values: FormData, form: FormApi<FormData>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<Object | void>;

package/dist/types-ts4.5/use-form-state.d.ts

@@ -1,4 +1,4 @@
-import { FormState, FormSubscription } from 'final-form';
+import { type FormState, type FormSubscription } from 'final-form';
 /**
  * A hook to return a recent form state for use within the `<Form>` as it requires context access.
  * This is useful for previewing form state, or for building custom fields that need to react to form state.

package/extract-react-types/form-props.tsx

@@ -1,4 +1,4 @@
-import { FormProps } from '../src/form';
+import { type FormProps } from '../src/form';
 
 export default function FormReactProps(props: FormProps<any>) {
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/heading": "^2.2.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
-    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/primitives": "^6.4.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -50,18 +50,17 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/banner": "^12.3.0",
-    "@atlaskit/button": "^17.15.0",
-    "@atlaskit/checkbox": "^13.3.0",
+    "@atlaskit/button": "^17.17.0",
+    "@atlaskit/checkbox": "^13.4.0",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/radio": "^6.3.0",
     "@atlaskit/range": "^7.2.0",
-    "@atlaskit/select": "^17.9.0",
+    "@atlaskit/select": "^17.10.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
-    "@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/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
@@ -124,10 +123,12 @@
     ".": "./src/index.tsx"
   },
   "homepage": "https://atlassian.design/components/form/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "platform-feature-flags": {
     "platform.design-system-team.form-header-typography-updates_4f1g6": {
       "type": "boolean"
+    },
+    "platform.design-system-team.form-label-typography-updates": {
+      "type": "boolean"
     }
   }
 }