@atlaskit/form 9.0.6 → 9.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/__perf__/default.tsx +1 -1
  3. package/dist/cjs/form-header.js +7 -6
  4. package/dist/cjs/form-section.js +11 -10
  5. package/dist/es2019/form-header.js +7 -6
  6. package/dist/es2019/form-section.js +11 -10
  7. package/dist/esm/form-header.js +7 -6
  8. package/dist/esm/form-section.js +11 -10
  9. package/dist/types/form-header.d.ts +2 -2
  10. package/dist/types/form-section.d.ts +2 -2
  11. package/dist/types-ts4.5/form-header.d.ts +2 -2
  12. package/dist/types-ts4.5/form-section.d.ts +2 -2
  13. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/form
2
2
 
3
+ ## 9.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#70460](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70460) [`2f37600156ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f37600156ae) - The internal composition of a component in this package has changed. There is no expected change in behaviour.
8
+
3
9
  ## 9.0.6
4
10
 
5
11
  ### Patch Changes
package/__perf__/default.tsx CHANGED
@@ -48,7 +48,7 @@ export default () => (
48
48
  )}
49
49
  </Field>
50
50
  <FormFooter>
51
- <ButtonGroup>
51
+ <ButtonGroup label="Form submit options">
52
52
  <Button appearance="subtle">Cancel</Button>
53
53
  <Button type="submit" appearance="primary" isLoading={submitting}>
54
54
  Sign up
package/dist/cjs/form-header.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _primitives = require("@atlaskit/primitives");
8
9
  var _constants = require("@atlaskit/theme/constants");
9
10
  var _typography = require("@atlaskit/theme/typography");
10
11
  /** @jsx jsx */
@@ -14,8 +15,8 @@ var formHeaderContentStyles = (0, _react.css)({
14
15
  minWidth: '100%',
15
16
  marginBlockStart: "var(--ds-space-100, 8px)"
16
17
  });
17
- var formHeaderDescriptionStyles = (0, _react.css)({
18
- marginBlockStart: "var(--ds-space-100, 8px)"
18
+ var formHeaderDescriptionStyles = (0, _primitives.xcss)({
19
+ marginBlockStart: 'space.100'
19
20
  });
20
21
  var formHeaderTitleStyles = (0, _react.css)({
21
22
  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
@@ -43,8 +44,8 @@ var FormHeaderContent = exports.FormHeaderContent = function FormHeaderContent(_
43
44
  };
44
45
  var FormHeaderDescription = exports.FormHeaderDescription = function FormHeaderDescription(_ref2) {
45
46
  var children = _ref2.children;
46
- return (0, _react.jsx)("div", {
47
- css: formHeaderDescriptionStyles
47
+ return (0, _react.jsx)(_primitives.Box, {
48
+ xcss: formHeaderDescriptionStyles
48
49
  }, children);
49
50
  };
50
51
  var FormHeaderTitle = exports.FormHeaderTitle = function FormHeaderTitle(_ref3) {
@@ -61,14 +62,14 @@ var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
61
62
  };
62
63
 
63
64
  /**
64
- * __Form header__
65
+ * __Form header__.
65
66
  *
66
67
  * A form header contains the form component's heading and subheadings. This provides the correct padding
67
68
  * and styling for it.
68
69
  *
69
70
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
70
71
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
71
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
72
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
72
73
  */
73
74
  var FormHeader = function FormHeader(_ref5) {
74
75
  var children = _ref5.children,
package/dist/cjs/form-section.js CHANGED
@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _primitives = require("@atlaskit/primitives");
8
9
  var _typography = require("@atlaskit/theme/typography");
9
10
  /** @jsx jsx */
10
11
 
11
- var formSectionDescriptionStyles = (0, _react.css)({
12
- marginBlockStart: "var(--ds-space-100, 8px)"
12
+ var formSectionDescriptionStyles = (0, _primitives.xcss)({
13
+ marginBlockStart: 'space.100'
13
14
  });
14
15
  var formSectionTitleStyles = (0, _react.css)({
15
16
  lineHeight: "var(--ds-space-400, 32px)",
@@ -19,8 +20,8 @@ var formSectionTitleStyles = (0, _react.css)({
19
20
  textOverflow: 'ellipsis',
20
21
  whiteSpace: 'nowrap'
21
22
  });
22
- var formSectionWrapperStyles = (0, _react.css)({
23
- marginBlockStart: "var(--ds-space-300, 24px)"
23
+ var formSectionWrapperStyles = (0, _primitives.xcss)({
24
+ marginBlockStart: 'space.300'
24
25
  });
25
26
 
26
27
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -31,8 +32,8 @@ var lightH600Styles = (0, _react.css)((0, _typography.h600)({
31
32
  }));
32
33
  var FormSectionWrapper = function FormSectionWrapper(_ref) {
33
34
  var children = _ref.children;
34
- return (0, _react.jsx)("div", {
35
- css: formSectionWrapperStyles
35
+ return (0, _react.jsx)(_primitives.Box, {
36
+ xcss: formSectionWrapperStyles
36
37
  }, children);
37
38
  };
38
39
  var FormSectionTitle = function FormSectionTitle(_ref2) {
@@ -43,20 +44,20 @@ var FormSectionTitle = function FormSectionTitle(_ref2) {
43
44
  };
44
45
  var FormSectionDescription = function FormSectionDescription(_ref3) {
45
46
  var children = _ref3.children;
46
- return (0, _react.jsx)("div", {
47
- css: formSectionDescriptionStyles
47
+ return (0, _react.jsx)(_primitives.Box, {
48
+ xcss: formSectionDescriptionStyles
48
49
  }, children);
49
50
  };
50
51
 
51
52
  /**
52
- * __Form section__
53
+ * __Form section__.
53
54
  *
54
55
  * A form section is used to define a section of a form layout. This contains a section title, content
55
56
  * and a description of the section.
56
57
  *
57
58
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
58
59
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
59
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
60
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
60
61
  */
61
62
  var FormSection = function FormSection(_ref4) {
62
63
  var children = _ref4.children,
package/dist/es2019/form-header.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { Box, xcss } from '@atlaskit/primitives';
4
5
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
5
6
  import { h700 } from '@atlaskit/theme/typography';
6
7
  const fontFamily = getFontFamily();
@@ -8,8 +9,8 @@ const formHeaderContentStyles = css({
8
9
  minWidth: '100%',
9
10
  marginBlockStart: "var(--ds-space-100, 8px)"
10
11
  });
11
- const formHeaderDescriptionStyles = css({
12
- marginBlockStart: "var(--ds-space-100, 8px)"
12
+ const formHeaderDescriptionStyles = xcss({
13
+ marginBlockStart: 'space.100'
13
14
  });
14
15
  const formHeaderTitleStyles = css({
15
16
  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
@@ -39,8 +40,8 @@ const FormHeaderContent = ({
39
40
  const FormHeaderDescription = ({
40
41
  children
41
42
  }) => {
42
- return jsx("div", {
43
- css: formHeaderDescriptionStyles
43
+ return jsx(Box, {
44
+ xcss: formHeaderDescriptionStyles
44
45
  }, children);
45
46
  };
46
47
  const FormHeaderTitle = ({
@@ -59,14 +60,14 @@ const FormHeaderWrapper = ({
59
60
  };
60
61
 
61
62
  /**
62
- * __Form header__
63
+ * __Form header__.
63
64
  *
64
65
  * A form header contains the form component's heading and subheadings. This provides the correct padding
65
66
  * and styling for it.
66
67
  *
67
68
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
68
69
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
69
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
70
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
70
71
  */
71
72
  const FormHeader = ({
72
73
  children,
package/dist/es2019/form-section.js CHANGED
@@ -1,9 +1,10 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { Box, xcss } from '@atlaskit/primitives';
4
5
  import { h600 } from '@atlaskit/theme/typography';
5
- const formSectionDescriptionStyles = css({
6
- marginBlockStart: "var(--ds-space-100, 8px)"
6
+ const formSectionDescriptionStyles = xcss({
7
+ marginBlockStart: 'space.100'
7
8
  });
8
9
  const formSectionTitleStyles = css({
9
10
  lineHeight: "var(--ds-space-400, 32px)",
@@ -13,8 +14,8 @@ const formSectionTitleStyles = css({
13
14
  textOverflow: 'ellipsis',
14
15
  whiteSpace: 'nowrap'
15
16
  });
16
- const formSectionWrapperStyles = css({
17
- marginBlockStart: "var(--ds-space-300, 24px)"
17
+ const formSectionWrapperStyles = xcss({
18
+ marginBlockStart: 'space.300'
18
19
  });
19
20
 
20
21
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -26,8 +27,8 @@ const lightH600Styles = css(h600({
26
27
  const FormSectionWrapper = ({
27
28
  children
28
29
  }) => {
29
- return jsx("div", {
30
- css: formSectionWrapperStyles
30
+ return jsx(Box, {
31
+ xcss: formSectionWrapperStyles
31
32
  }, children);
32
33
  };
33
34
  const FormSectionTitle = ({
@@ -40,20 +41,20 @@ const FormSectionTitle = ({
40
41
  const FormSectionDescription = ({
41
42
  children
42
43
  }) => {
43
- return jsx("div", {
44
- css: formSectionDescriptionStyles
44
+ return jsx(Box, {
45
+ xcss: formSectionDescriptionStyles
45
46
  }, children);
46
47
  };
47
48
 
48
49
  /**
49
- * __Form section__
50
+ * __Form section__.
50
51
  *
51
52
  * A form section is used to define a section of a form layout. This contains a section title, content
52
53
  * and a description of the section.
53
54
  *
54
55
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
55
56
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
56
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
57
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
57
58
  */
58
59
  const FormSection = ({
59
60
  children,
package/dist/esm/form-header.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { Box, xcss } from '@atlaskit/primitives';
4
5
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
5
6
  import { h700 } from '@atlaskit/theme/typography';
6
7
  var fontFamily = getFontFamily();
@@ -8,8 +9,8 @@ var formHeaderContentStyles = css({
8
9
  minWidth: '100%',
9
10
  marginBlockStart: "var(--ds-space-100, 8px)"
10
11
  });
11
- var formHeaderDescriptionStyles = css({
12
- marginBlockStart: "var(--ds-space-100, 8px)"
12
+ var formHeaderDescriptionStyles = xcss({
13
+ marginBlockStart: 'space.100'
13
14
  });
14
15
  var formHeaderTitleStyles = css({
15
16
  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
@@ -37,8 +38,8 @@ var FormHeaderContent = function FormHeaderContent(_ref) {
37
38
  };
38
39
  var FormHeaderDescription = function FormHeaderDescription(_ref2) {
39
40
  var children = _ref2.children;
40
- return jsx("div", {
41
- css: formHeaderDescriptionStyles
41
+ return jsx(Box, {
42
+ xcss: formHeaderDescriptionStyles
42
43
  }, children);
43
44
  };
44
45
  var FormHeaderTitle = function FormHeaderTitle(_ref3) {
@@ -55,14 +56,14 @@ var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
55
56
  };
56
57
 
57
58
  /**
58
- * __Form header__
59
+ * __Form header__.
59
60
  *
60
61
  * A form header contains the form component's heading and subheadings. This provides the correct padding
61
62
  * and styling for it.
62
63
  *
63
64
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
64
65
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
65
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
66
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
66
67
  */
67
68
  var FormHeader = function FormHeader(_ref5) {
68
69
  var children = _ref5.children,
package/dist/esm/form-section.js CHANGED
@@ -1,9 +1,10 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import { Box, xcss } from '@atlaskit/primitives';
4
5
  import { h600 } from '@atlaskit/theme/typography';
5
- var formSectionDescriptionStyles = css({
6
- marginBlockStart: "var(--ds-space-100, 8px)"
6
+ var formSectionDescriptionStyles = xcss({
7
+ marginBlockStart: 'space.100'
7
8
  });
8
9
  var formSectionTitleStyles = css({
9
10
  lineHeight: "var(--ds-space-400, 32px)",
@@ -13,8 +14,8 @@ var formSectionTitleStyles = css({
13
14
  textOverflow: 'ellipsis',
14
15
  whiteSpace: 'nowrap'
15
16
  });
16
- var formSectionWrapperStyles = css({
17
- marginBlockStart: "var(--ds-space-300, 24px)"
17
+ var formSectionWrapperStyles = xcss({
18
+ marginBlockStart: 'space.300'
18
19
  });
19
20
 
20
21
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -25,8 +26,8 @@ var lightH600Styles = css(h600({
25
26
  }));
26
27
  var FormSectionWrapper = function FormSectionWrapper(_ref) {
27
28
  var children = _ref.children;
28
- return jsx("div", {
29
- css: formSectionWrapperStyles
29
+ return jsx(Box, {
30
+ xcss: formSectionWrapperStyles
30
31
  }, children);
31
32
  };
32
33
  var FormSectionTitle = function FormSectionTitle(_ref2) {
@@ -37,20 +38,20 @@ var FormSectionTitle = function FormSectionTitle(_ref2) {
37
38
  };
38
39
  var FormSectionDescription = function FormSectionDescription(_ref3) {
39
40
  var children = _ref3.children;
40
- return jsx("div", {
41
- css: formSectionDescriptionStyles
41
+ return jsx(Box, {
42
+ xcss: formSectionDescriptionStyles
42
43
  }, children);
43
44
  };
44
45
 
45
46
  /**
46
- * __Form section__
47
+ * __Form section__.
47
48
  *
48
49
  * A form section is used to define a section of a form layout. This contains a section title, content
49
50
  * and a description of the section.
50
51
  *
51
52
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
52
53
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
53
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
54
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
54
55
  */
55
56
  var FormSection = function FormSection(_ref4) {
56
57
  var children = _ref4.children,
package/dist/types/form-header.d.ts CHANGED
@@ -25,14 +25,14 @@ declare const FormHeaderTitle: ({ children }: {
25
25
  children: ReactNode;
26
26
  }) => jsx.JSX.Element;
27
27
  /**
28
- * __Form header__
28
+ * __Form header__.
29
29
  *
30
30
  * A form header contains the form component's heading and subheadings. This provides the correct padding
31
31
  * and styling for it.
32
32
  *
33
33
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
34
34
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
35
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
35
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
36
36
  */
37
37
  declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
38
38
  export default FormHeader;
package/dist/types/form-section.d.ts CHANGED
@@ -16,14 +16,14 @@ export interface FormSectionProps {
16
16
  description?: ReactNode;
17
17
  }
18
18
  /**
19
- * __Form section__
19
+ * __Form section__.
20
20
  *
21
21
  * A form section is used to define a section of a form layout. This contains a section title, content
22
22
  * and a description of the section.
23
23
  *
24
24
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
25
25
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
26
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
26
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
27
27
  */
28
28
  declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
29
29
  export default FormSection;
package/dist/types-ts4.5/form-header.d.ts CHANGED
@@ -25,14 +25,14 @@ declare const FormHeaderTitle: ({ children }: {
25
25
  children: ReactNode;
26
26
  }) => jsx.JSX.Element;
27
27
  /**
28
- * __Form header__
28
+ * __Form header__.
29
29
  *
30
30
  * A form header contains the form component's heading and subheadings. This provides the correct padding
31
31
  * and styling for it.
32
32
  *
33
33
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
34
34
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
35
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
35
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
36
36
  */
37
37
  declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
38
38
  export default FormHeader;
package/dist/types-ts4.5/form-section.d.ts CHANGED
@@ -16,14 +16,14 @@ export interface FormSectionProps {
16
16
  description?: ReactNode;
17
17
  }
18
18
  /**
19
- * __Form section__
19
+ * __Form section__.
20
20
  *
21
21
  * A form section is used to define a section of a form layout. This contains a section title, content
22
22
  * and a description of the section.
23
23
  *
24
24
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
25
25
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
26
- * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
26
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
27
27
  */
28
28
  declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
29
29
  export default FormSection;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/form",
3
- "version": "9.0.6",
3
+ "version": "9.0.7",
4
4
  "description": "A form allows users to input information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,8 +28,9 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/icon": "^22.0.0",
31
+ "@atlaskit/primitives": "^2.0.0",
31
32
  "@atlaskit/theme": "^12.6.0",
32
- "@atlaskit/tokens": "^1.34.0",
33
+ "@atlaskit/tokens": "^1.35.0",
33
34
  "@babel/runtime": "^7.0.0",
34
35
  "@emotion/react": "^11.7.1",
35
36
  "final-form": "^4.20.3",
@@ -45,7 +46,7 @@
45
46
  "@af/accessibility-testing": "*",
46
47
  "@af/integration-testing": "*",
47
48
  "@af/visual-regression": "*",
48
- "@atlaskit/button": "^17.2.0",
49
+ "@atlaskit/button": "^17.3.0",
49
50
  "@atlaskit/checkbox": "^13.0.0",
50
51
  "@atlaskit/ds-lib": "^2.2.0",
51
52
  "@atlaskit/range": "^7.1.0",