@atlaskit/form 10.1.0 → 10.2.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 (12) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/form-header.js +6 -1
  3. package/dist/cjs/label.js +6 -13
  4. package/dist/es2019/form-header.js +5 -1
  5. package/dist/es2019/label.js +6 -13
  6. package/dist/esm/form-header.js +5 -1
  7. package/dist/esm/label.js +6 -13
  8. package/dist/types/form-header.d.ts +1 -1
  9. package/dist/types/label.d.ts +1 -1
  10. package/dist/types-ts4.5/form-header.d.ts +1 -1
  11. package/dist/types-ts4.5/label.d.ts +1 -1
  12. package/package.json +12 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/form
2
2
 
3
+ ## 10.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#99625](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99625)
8
+ [`f60a622d5890`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f60a622d5890) -
9
+ FormHeader refactor to follow new typography system behind a feature flag. FormHeader title does
10
+ not truncate any more.
11
+
12
+ ## 10.1.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#100993](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100993)
17
+ [`cb7514abb833`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cb7514abb833) -
18
+ Typography tokens for form labels.
19
+
3
20
  ## 10.1.0
4
21
 
5
22
  ### Minor Changes
package/dist/cjs/form-header.js CHANGED
@@ -1,10 +1,13 @@
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 = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
7
8
  var _react = require("@emotion/react");
9
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
11
  var _primitives = require("@atlaskit/primitives");
9
12
  var _constants = require("@atlaskit/theme/constants");
10
13
  var _typography = require("@atlaskit/theme/typography");
@@ -75,6 +78,8 @@ var FormHeader = function FormHeader(_ref5) {
75
78
  var children = _ref5.children,
76
79
  description = _ref5.description,
77
80
  title = _ref5.title;
78
- return (0, _react.jsx)(FormHeaderWrapper, null, title && (0, _react.jsx)(FormHeaderTitle, null, title), description && (0, _react.jsx)(FormHeaderDescription, null, description), children && (0, _react.jsx)(FormHeaderContent, null, children));
81
+ return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.form-header-typography-updates_4f1g6') ? (0, _react.jsx)(_primitives.Box, null, title && (0, _react.jsx)(_heading.default, {
82
+ size: "large"
83
+ }, title), description && (0, _react.jsx)(FormHeaderDescription, null, description), children && (0, _react.jsx)(FormHeaderContent, null, children)) : (0, _react.jsx)(FormHeaderWrapper, null, title && (0, _react.jsx)(FormHeaderTitle, null, title), description && (0, _react.jsx)(FormHeaderDescription, null, description), children && (0, _react.jsx)(FormHeaderContent, null, children));
79
84
  };
80
85
  var _default = exports.default = FormHeader;
package/dist/cjs/label.js CHANGED
@@ -6,23 +6,16 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = exports.Legend = exports.Label = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  var _colors = require("@atlaskit/theme/colors");
9
- var _constants = require("@atlaskit/theme/constants");
10
- var _typography = require("@atlaskit/theme/typography");
11
9
  /** @jsx jsx */
12
10
 
13
- var fontFamily = (0, _constants.fontFamily)();
14
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
15
- var fieldsetLabelStyles = (0, _react.css)([(0, _typography.h200)({
16
- theme: {
17
- mode: 'light'
18
- }
19
- }), {
11
+ var fieldsetLabelStyles = (0, _react.css)({
20
12
  display: 'inline-block',
21
- marginTop: 0,
22
- marginBottom: "var(--ds-space-050, 4px)",
23
13
  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
24
- fontFamily: fontFamily
25
- }]);
14
+ 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)",
15
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
16
+ marginBlockEnd: "var(--ds-space-050, 4px)",
17
+ marginBlockStart: 0
18
+ });
26
19
 
27
20
  /**
28
21
  * __Label__
package/dist/es2019/form-header.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import Heading from '@atlaskit/heading';
5
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
6
  import { Box, xcss } from '@atlaskit/primitives';
5
7
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
8
  import { h700 } from '@atlaskit/theme/typography';
@@ -74,7 +76,9 @@ const FormHeader = ({
74
76
  description,
75
77
  title
76
78
  }) => {
77
- return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
79
+ return getBooleanFF('platform.design-system-team.form-header-typography-updates_4f1g6') ? jsx(Box, null, title && jsx(Heading, {
80
+ size: "large"
81
+ }, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children)) : jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
78
82
  };
79
83
  export default FormHeader;
80
84
  export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };
package/dist/es2019/label.js CHANGED
@@ -2,21 +2,14 @@
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { N200 } from '@atlaskit/theme/colors';
5
- import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
- import { h200 } from '@atlaskit/theme/typography';
7
- const fontFamily = getFontFamily();
8
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
9
- const fieldsetLabelStyles = css([h200({
10
- theme: {
11
- mode: 'light'
12
- }
13
- }), {
5
+ const fieldsetLabelStyles = css({
14
6
  display: 'inline-block',
15
- marginTop: 0,
16
- marginBottom: "var(--ds-space-050, 4px)",
17
7
  color: `var(--ds-text-subtle, ${N200})`,
18
- fontFamily: fontFamily
19
- }]);
8
+ 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)",
9
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
10
+ marginBlockEnd: "var(--ds-space-050, 4px)",
11
+ marginBlockStart: 0
12
+ });
20
13
 
21
14
  /**
22
15
  * __Label__
package/dist/esm/form-header.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
+ import Heading from '@atlaskit/heading';
5
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
6
  import { Box, xcss } from '@atlaskit/primitives';
5
7
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
8
  import { h700 } from '@atlaskit/theme/typography';
@@ -69,7 +71,9 @@ var FormHeader = function FormHeader(_ref5) {
69
71
  var children = _ref5.children,
70
72
  description = _ref5.description,
71
73
  title = _ref5.title;
72
- return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
74
+ return getBooleanFF('platform.design-system-team.form-header-typography-updates_4f1g6') ? jsx(Box, null, title && jsx(Heading, {
75
+ size: "large"
76
+ }, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children)) : jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
73
77
  };
74
78
  export default FormHeader;
75
79
  export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };
package/dist/esm/label.js CHANGED
@@ -2,21 +2,14 @@
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import { N200 } from '@atlaskit/theme/colors';
5
- import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
- import { h200 } from '@atlaskit/theme/typography';
7
- var fontFamily = getFontFamily();
8
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
9
- var fieldsetLabelStyles = css([h200({
10
- theme: {
11
- mode: 'light'
12
- }
13
- }), {
5
+ var fieldsetLabelStyles = css({
14
6
  display: 'inline-block',
15
- marginTop: 0,
16
- marginBottom: "var(--ds-space-050, 4px)",
17
7
  color: "var(--ds-text-subtle, ".concat(N200, ")"),
18
- fontFamily: fontFamily
19
- }]);
8
+ 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)",
9
+ fontWeight: "var(--ds-font-weight-semibold, 600)",
10
+ marginBlockEnd: "var(--ds-space-050, 4px)",
11
+ marginBlockStart: 0
12
+ });
20
13
 
21
14
  /**
22
15
  * __Label__
package/dist/types/form-header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { ReactNode } from 'react';
2
+ import { type ReactNode } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  export interface FormHeaderProps {
5
5
  /**
package/dist/types/label.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  export interface LabelProps {
4
4
  id?: string;
5
5
  htmlFor: string;
package/dist/types-ts4.5/form-header.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { ReactNode } from 'react';
2
+ import { type ReactNode } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  export interface FormHeaderProps {
5
5
  /**
package/dist/types-ts4.5/label.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  export interface LabelProps {
4
4
  id?: string;
5
5
  htmlFor: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/form",
3
- "version": "10.1.0",
3
+ "version": "10.2.0",
4
4
  "description": "A form allows users to input information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,10 +29,11 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/heading": "^2.2.0",
32
- "@atlaskit/icon": "^22.2.0",
33
- "@atlaskit/primitives": "^6.1.0",
32
+ "@atlaskit/icon": "^22.3.0",
33
+ "@atlaskit/platform-feature-flags": "^0.2.5",
34
+ "@atlaskit/primitives": "^6.3.0",
34
35
  "@atlaskit/theme": "^12.8.0",
35
- "@atlaskit/tokens": "^1.48.0",
36
+ "@atlaskit/tokens": "^1.49.0",
36
37
  "@babel/runtime": "^7.0.0",
37
38
  "@emotion/react": "^11.7.1",
38
39
  "final-form": "^4.20.3",
@@ -49,7 +50,7 @@
49
50
  "@af/integration-testing": "*",
50
51
  "@af/visual-regression": "*",
51
52
  "@atlaskit/banner": "^12.3.0",
52
- "@atlaskit/button": "^17.14.0",
53
+ "@atlaskit/button": "^17.15.0",
53
54
  "@atlaskit/checkbox": "^13.3.0",
54
55
  "@atlaskit/ds-lib": "^2.3.0",
55
56
  "@atlaskit/modal-dialog": "^12.13.0",
@@ -123,5 +124,10 @@
123
124
  ".": "./src/index.tsx"
124
125
  },
125
126
  "homepage": "https://atlassian.design/components/form/",
126
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
127
+ "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
128
+ "platform-feature-flags": {
129
+ "platform.design-system-team.form-header-typography-updates_4f1g6": {
130
+ "type": "boolean"
131
+ }
132
+ }
127
133
  }