@atlaskit/form 9.3.1 → 10.1.0

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 (5) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/form-section.js +10 -28
  3. package/dist/es2019/form-section.js +5 -25
  4. package/dist/esm/form-section.js +10 -29
  5. package/package.json +11 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/form
2
2
 
3
+ ## 10.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#98612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98612)
8
+ [`7a11b97d325a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7a11b97d325a) -
9
+ Add support for React 18.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 10.0.0
16
+
17
+ ### Major Changes
18
+
19
+ - [#95117](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95117)
20
+ [`34507dd83e5e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34507dd83e5e) -
21
+ Typography changes to form section titles. Form section titles don't truncate content anymore.
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies
26
+
3
27
  ## 9.3.1
4
28
 
5
29
  ### Patch Changes
package/dist/cjs/form-section.js CHANGED
@@ -1,49 +1,29 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
6
7
  exports.default = void 0;
7
8
  var _react = require("@emotion/react");
9
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
8
10
  var _primitives = require("@atlaskit/primitives");
9
- var _typography = require("@atlaskit/theme/typography");
10
11
  /** @jsx jsx */
11
12
 
12
13
  var formSectionDescriptionStyles = (0, _primitives.xcss)({
13
14
  marginBlockStart: 'space.100'
14
15
  });
15
- var formSectionTitleStyles = (0, _react.css)({
16
- lineHeight: "var(--ds-space-400, 32px)",
17
- marginBlockStart: 0,
18
- marginInlineEnd: "var(--ds-space-400, 32px)",
19
- overflow: 'hidden',
20
- textOverflow: 'ellipsis',
21
- whiteSpace: 'nowrap'
22
- });
23
16
  var formSectionWrapperStyles = (0, _primitives.xcss)({
24
17
  marginBlockStart: 'space.300'
25
18
  });
26
-
27
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
28
- var lightH600Styles = (0, _react.css)((0, _typography.h600)({
29
- theme: {
30
- mode: 'light'
31
- }
32
- }));
33
19
  var FormSectionWrapper = function FormSectionWrapper(_ref) {
34
20
  var children = _ref.children;
35
21
  return (0, _react.jsx)(_primitives.Box, {
36
22
  xcss: formSectionWrapperStyles
37
23
  }, children);
38
24
  };
39
- var FormSectionTitle = function FormSectionTitle(_ref2) {
25
+ var FormSectionDescription = function FormSectionDescription(_ref2) {
40
26
  var children = _ref2.children;
41
- return (0, _react.jsx)("h3", {
42
- css: [formSectionTitleStyles, lightH600Styles]
43
- }, children);
44
- };
45
- var FormSectionDescription = function FormSectionDescription(_ref3) {
46
- var children = _ref3.children;
47
27
  return (0, _react.jsx)(_primitives.Box, {
48
28
  xcss: formSectionDescriptionStyles
49
29
  }, children);
@@ -59,10 +39,12 @@ var FormSectionDescription = function FormSectionDescription(_ref3) {
59
39
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
60
40
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
61
41
  */
62
- var FormSection = function FormSection(_ref4) {
63
- var children = _ref4.children,
64
- description = _ref4.description,
65
- title = _ref4.title;
66
- return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(FormSectionTitle, null, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
42
+ var FormSection = function FormSection(_ref3) {
43
+ var children = _ref3.children,
44
+ description = _ref3.description,
45
+ title = _ref3.title;
46
+ return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(_heading.default, {
47
+ size: "medium"
48
+ }, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
67
49
  };
68
50
  var _default = exports.default = FormSection;
package/dist/es2019/form-section.js CHANGED
@@ -1,29 +1,14 @@
1
1
  /** @jsx jsx */
2
2
 
3
- import { css, jsx } from '@emotion/react';
3
+ import { jsx } from '@emotion/react';
4
+ import Heading from '@atlaskit/heading';
4
5
  import { Box, xcss } from '@atlaskit/primitives';
5
- import { h600 } from '@atlaskit/theme/typography';
6
6
  const formSectionDescriptionStyles = xcss({
7
7
  marginBlockStart: 'space.100'
8
8
  });
9
- const formSectionTitleStyles = css({
10
- lineHeight: "var(--ds-space-400, 32px)",
11
- marginBlockStart: 0,
12
- marginInlineEnd: "var(--ds-space-400, 32px)",
13
- overflow: 'hidden',
14
- textOverflow: 'ellipsis',
15
- whiteSpace: 'nowrap'
16
- });
17
9
  const formSectionWrapperStyles = xcss({
18
10
  marginBlockStart: 'space.300'
19
11
  });
20
-
21
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
22
- const lightH600Styles = css(h600({
23
- theme: {
24
- mode: 'light'
25
- }
26
- }));
27
12
  const FormSectionWrapper = ({
28
13
  children
29
14
  }) => {
@@ -31,13 +16,6 @@ const FormSectionWrapper = ({
31
16
  xcss: formSectionWrapperStyles
32
17
  }, children);
33
18
  };
34
- const FormSectionTitle = ({
35
- children
36
- }) => {
37
- return jsx("h3", {
38
- css: [formSectionTitleStyles, lightH600Styles]
39
- }, children);
40
- };
41
19
  const FormSectionDescription = ({
42
20
  children
43
21
  }) => {
@@ -61,6 +39,8 @@ const FormSection = ({
61
39
  description,
62
40
  title
63
41
  }) => {
64
- return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
42
+ return jsx(FormSectionWrapper, null, title && jsx(Heading, {
43
+ size: "medium"
44
+ }, title), description && jsx(FormSectionDescription, null, description), children);
65
45
  };
66
46
  export default FormSection;
package/dist/esm/form-section.js CHANGED
@@ -1,43 +1,22 @@
1
1
  /** @jsx jsx */
2
2
 
3
- import { css, jsx } from '@emotion/react';
3
+ import { jsx } from '@emotion/react';
4
+ import Heading from '@atlaskit/heading';
4
5
  import { Box, xcss } from '@atlaskit/primitives';
5
- import { h600 } from '@atlaskit/theme/typography';
6
6
  var formSectionDescriptionStyles = xcss({
7
7
  marginBlockStart: 'space.100'
8
8
  });
9
- var formSectionTitleStyles = css({
10
- lineHeight: "var(--ds-space-400, 32px)",
11
- marginBlockStart: 0,
12
- marginInlineEnd: "var(--ds-space-400, 32px)",
13
- overflow: 'hidden',
14
- textOverflow: 'ellipsis',
15
- whiteSpace: 'nowrap'
16
- });
17
9
  var formSectionWrapperStyles = xcss({
18
10
  marginBlockStart: 'space.300'
19
11
  });
20
-
21
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
22
- var lightH600Styles = css(h600({
23
- theme: {
24
- mode: 'light'
25
- }
26
- }));
27
12
  var FormSectionWrapper = function FormSectionWrapper(_ref) {
28
13
  var children = _ref.children;
29
14
  return jsx(Box, {
30
15
  xcss: formSectionWrapperStyles
31
16
  }, children);
32
17
  };
33
- var FormSectionTitle = function FormSectionTitle(_ref2) {
18
+ var FormSectionDescription = function FormSectionDescription(_ref2) {
34
19
  var children = _ref2.children;
35
- return jsx("h3", {
36
- css: [formSectionTitleStyles, lightH600Styles]
37
- }, children);
38
- };
39
- var FormSectionDescription = function FormSectionDescription(_ref3) {
40
- var children = _ref3.children;
41
20
  return jsx(Box, {
42
21
  xcss: formSectionDescriptionStyles
43
22
  }, children);
@@ -53,10 +32,12 @@ var FormSectionDescription = function FormSectionDescription(_ref3) {
53
32
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
54
33
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
55
34
  */
56
- var FormSection = function FormSection(_ref4) {
57
- var children = _ref4.children,
58
- description = _ref4.description,
59
- title = _ref4.title;
60
- return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
35
+ var FormSection = function FormSection(_ref3) {
36
+ var children = _ref3.children,
37
+ description = _ref3.description,
38
+ title = _ref3.title;
39
+ return jsx(FormSectionWrapper, null, title && jsx(Heading, {
40
+ size: "medium"
41
+ }, title), description && jsx(FormSectionDescription, null, description), children);
61
42
  };
62
43
  export default FormSection;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/form",
3
- "version": "9.3.1",
3
+ "version": "10.1.0",
4
4
  "description": "A form allows users to input information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,13 +24,15 @@
24
24
  "website": {
25
25
  "name": "Form",
26
26
  "category": "Components"
27
- }
27
+ },
28
+ "runReact18": true
28
29
  },
29
30
  "dependencies": {
30
- "@atlaskit/icon": "^22.1.0",
31
- "@atlaskit/primitives": "^6.0.0",
32
- "@atlaskit/theme": "^12.7.0",
33
- "@atlaskit/tokens": "^1.45.0",
31
+ "@atlaskit/heading": "^2.2.0",
32
+ "@atlaskit/icon": "^22.2.0",
33
+ "@atlaskit/primitives": "^6.1.0",
34
+ "@atlaskit/theme": "^12.8.0",
35
+ "@atlaskit/tokens": "^1.48.0",
34
36
  "@babel/runtime": "^7.0.0",
35
37
  "@emotion/react": "^11.7.1",
36
38
  "final-form": "^4.20.3",
@@ -40,7 +42,7 @@
40
42
  "tiny-invariant": "^1.2.0"
41
43
  },
42
44
  "peerDependencies": {
43
- "react": "^16.8.0"
45
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
44
46
  },
45
47
  "devDependencies": {
46
48
  "@af/accessibility-testing": "*",
@@ -53,10 +55,10 @@
53
55
  "@atlaskit/modal-dialog": "^12.13.0",
54
56
  "@atlaskit/radio": "^6.3.0",
55
57
  "@atlaskit/range": "^7.2.0",
56
- "@atlaskit/select": "^17.8.0",
58
+ "@atlaskit/select": "^17.9.0",
57
59
  "@atlaskit/ssr": "*",
58
60
  "@atlaskit/textfield": "^6.3.0",
59
- "@atlaskit/toggle": "^13.0.0",
61
+ "@atlaskit/toggle": "^13.1.0",
60
62
  "@atlaskit/visual-regression": "*",
61
63
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
62
64
  "@testing-library/react": "^12.1.5",