@atlaskit/form 10.3.1 → 10.4.1
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.
- package/CHANGELOG.md +20 -1
- package/README.md +2 -1
- package/__perf__/default.tsx +46 -57
- package/dist/cjs/field.js +3 -1
- package/dist/cjs/fieldset.js +6 -1
- package/dist/cjs/form-footer.js +7 -2
- package/dist/cjs/form-header.js +6 -1
- package/dist/cjs/form-section.js +5 -0
- package/dist/cjs/label.js +11 -2
- package/dist/cjs/messages.js +5 -0
- package/dist/cjs/required-asterisk.js +4 -0
- package/dist/es2019/field.js +5 -0
- package/dist/es2019/fieldset.js +5 -1
- package/dist/es2019/form-footer.js +6 -2
- package/dist/es2019/form-header.js +5 -1
- package/dist/es2019/form-section.js +4 -0
- package/dist/es2019/label.js +10 -2
- package/dist/es2019/messages.js +4 -0
- package/dist/es2019/required-asterisk.js +4 -0
- package/dist/esm/field.js +5 -0
- package/dist/esm/fieldset.js +5 -1
- package/dist/esm/form-footer.js +6 -2
- package/dist/esm/form-header.js +5 -1
- package/dist/esm/form-section.js +4 -0
- package/dist/esm/label.js +10 -2
- package/dist/esm/messages.js +4 -0
- package/dist/esm/required-asterisk.js +4 -0
- package/dist/types/field.d.ts +3 -0
- package/dist/types/fieldset.d.ts +3 -0
- package/dist/types/form-footer.d.ts +4 -1
- package/dist/types/form-header.d.ts +3 -0
- package/dist/types/form-section.d.ts +3 -0
- package/dist/types/label.d.ts +3 -0
- package/dist/types/messages.d.ts +3 -0
- package/dist/types/required-asterisk.d.ts +3 -0
- package/dist/types-ts4.5/field.d.ts +3 -0
- package/dist/types-ts4.5/fieldset.d.ts +3 -0
- package/dist/types-ts4.5/form-footer.d.ts +4 -1
- package/dist/types-ts4.5/form-header.d.ts +3 -0
- package/dist/types-ts4.5/form-section.d.ts +3 -0
- package/dist/types-ts4.5/label.d.ts +3 -0
- package/dist/types-ts4.5/messages.d.ts +3 -0
- package/dist/types-ts4.5/required-asterisk.d.ts +3 -0
- package/extract-react-types/checkbox-field-props.tsx +1 -1
- package/extract-react-types/field-props.tsx +1 -1
- package/extract-react-types/fieldset-props.tsx +1 -1
- package/extract-react-types/form-footer-props.tsx +1 -1
- package/extract-react-types/form-header-props.tsx +1 -1
- package/extract-react-types/form-props.tsx +1 -1
- package/extract-react-types/form-section-props.tsx +1 -1
- package/extract-react-types/range-field-props.tsx +1 -1
- package/package.json +133 -133
- package/report.api.md +144 -181
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/form
|
|
2
2
|
|
|
3
|
+
## 10.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 10.4.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#110670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110670)
|
|
14
|
+
[`c733254a2dd6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c733254a2dd6e) -
|
|
15
|
+
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
|
|
16
|
+
is implicitly set to automatic.
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 10.3.1
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -38,7 +57,7 @@
|
|
|
38
57
|
|
|
39
58
|
- [#98612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98612)
|
|
40
59
|
[`7a11b97d325a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7a11b97d325a) -
|
|
41
|
-
Add support for React 18.
|
|
60
|
+
Add support for React 18 in non-strict mode.
|
|
42
61
|
|
|
43
62
|
### Patch Changes
|
|
44
63
|
|
package/README.md
CHANGED
package/__perf__/default.tsx
CHANGED
|
@@ -7,61 +7,50 @@ import TextField from '@atlaskit/textfield';
|
|
|
7
7
|
import Form, { ErrorMessage, Field, FormFooter, HelperMessage } from '../src';
|
|
8
8
|
|
|
9
9
|
export default () => (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
13
|
-
|
|
14
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
15
|
-
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
17
|
-
|
|
18
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
19
|
-
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<ButtonGroup label="Form submit options">
|
|
57
|
-
<Button appearance="subtle">Cancel</Button>
|
|
58
|
-
<Button type="submit" appearance="primary" isLoading={submitting}>
|
|
59
|
-
Sign up
|
|
60
|
-
</Button>
|
|
61
|
-
</ButtonGroup>
|
|
62
|
-
</FormFooter>
|
|
63
|
-
</form>
|
|
64
|
-
)}
|
|
65
|
-
</Form>
|
|
66
|
-
</div>
|
|
10
|
+
<div
|
|
11
|
+
style={{
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
13
|
+
display: 'flex',
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
15
|
+
width: '400px',
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
17
|
+
maxWidth: '100%',
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
19
|
+
margin: '0 auto',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
}}
|
|
23
|
+
>
|
|
24
|
+
<Form<{ username: string; password: string; remember: boolean }>
|
|
25
|
+
onSubmit={(data) => {
|
|
26
|
+
return new Promise((resolve) => setTimeout(resolve, 2000)).then(() =>
|
|
27
|
+
data.username === 'error' ? { username: 'IN_USE' } : undefined,
|
|
28
|
+
);
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
{({ formProps, submitting }) => (
|
|
32
|
+
<form {...formProps}>
|
|
33
|
+
<Field name="username" label="User name" isRequired defaultValue="hello">
|
|
34
|
+
{({ fieldProps, error }) => (
|
|
35
|
+
<Fragment>
|
|
36
|
+
<TextField autoComplete="off" {...fieldProps} />
|
|
37
|
+
{!error && <HelperMessage>You can use letters, numbers & periods.</HelperMessage>}
|
|
38
|
+
{error && (
|
|
39
|
+
<ErrorMessage>This user name is already in use, try another one.</ErrorMessage>
|
|
40
|
+
)}
|
|
41
|
+
</Fragment>
|
|
42
|
+
)}
|
|
43
|
+
</Field>
|
|
44
|
+
<FormFooter>
|
|
45
|
+
<ButtonGroup label="Form submit options">
|
|
46
|
+
<Button appearance="subtle">Cancel</Button>
|
|
47
|
+
<Button type="submit" appearance="primary" isLoading={submitting}>
|
|
48
|
+
Sign up
|
|
49
|
+
</Button>
|
|
50
|
+
</ButtonGroup>
|
|
51
|
+
</FormFooter>
|
|
52
|
+
</form>
|
|
53
|
+
)}
|
|
54
|
+
</Form>
|
|
55
|
+
</div>
|
|
67
56
|
);
|
package/dist/cjs/field.js
CHANGED
|
@@ -17,7 +17,9 @@ var _form = require("./form");
|
|
|
17
17
|
var _label = require("./label");
|
|
18
18
|
var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
|
|
19
19
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
20
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
21
|
+
* @jsxRuntime classic
|
|
22
|
+
*/ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
21
23
|
var fieldWrapperStyles = (0, _react2.css)({
|
|
22
24
|
marginBlockStart: "var(--ds-space-100, 8px)"
|
|
23
25
|
});
|
package/dist/cjs/fieldset.js
CHANGED
|
@@ -6,10 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _label = require("./label");
|
|
9
|
+
/**
|
|
10
|
+
* @jsxRuntime classic
|
|
11
|
+
*/
|
|
9
12
|
/** @jsx jsx */
|
|
10
13
|
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
15
|
+
|
|
11
16
|
var fieldSetStyles = (0, _react.css)({
|
|
12
|
-
|
|
17
|
+
marginBlockStart: "var(--ds-space-100, 8px)"
|
|
13
18
|
});
|
|
14
19
|
|
|
15
20
|
/**
|
package/dist/cjs/form-footer.js
CHANGED
|
@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = FormFooter;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
|
+
/**
|
|
9
|
+
* @jsxRuntime classic
|
|
10
|
+
*/
|
|
8
11
|
/** @jsx jsx */
|
|
9
12
|
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
14
|
+
|
|
10
15
|
var formFooterWrapperStyles = (0, _react.css)({
|
|
11
16
|
display: 'flex',
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
justifyContent: 'flex-end',
|
|
18
|
+
marginBlockStart: "var(--ds-space-300, 24px)"
|
|
14
19
|
});
|
|
15
20
|
var justifyContentStyles = (0, _react.css)({
|
|
16
21
|
justifyContent: 'flex-start'
|
package/dist/cjs/form-header.js
CHANGED
|
@@ -11,8 +11,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
11
11
|
var _primitives = require("@atlaskit/primitives");
|
|
12
12
|
var _constants = require("@atlaskit/theme/constants");
|
|
13
13
|
var _typography = require("@atlaskit/theme/typography");
|
|
14
|
+
/**
|
|
15
|
+
* @jsxRuntime classic
|
|
16
|
+
*/
|
|
14
17
|
/** @jsx jsx */
|
|
15
18
|
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
20
|
+
|
|
16
21
|
var fontFamily = (0, _constants.fontFamily)();
|
|
17
22
|
var formHeaderContentStyles = (0, _primitives.xcss)({
|
|
18
23
|
minWidth: '100%',
|
|
@@ -33,7 +38,7 @@ var formHeaderWrapperStyles = (0, _react.css)({
|
|
|
33
38
|
fontFamily: "".concat(fontFamily)
|
|
34
39
|
});
|
|
35
40
|
|
|
36
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
41
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
42
|
var lightH700Styles = (0, _react.css)((0, _typography.h700)({
|
|
38
43
|
theme: {
|
|
39
44
|
mode: 'light'
|
package/dist/cjs/form-section.js
CHANGED
|
@@ -8,8 +8,13 @@ exports.default = void 0;
|
|
|
8
8
|
var _react = require("@emotion/react");
|
|
9
9
|
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
|
|
10
10
|
var _primitives = require("@atlaskit/primitives");
|
|
11
|
+
/**
|
|
12
|
+
* @jsxRuntime classic
|
|
13
|
+
*/
|
|
11
14
|
/** @jsx jsx */
|
|
12
15
|
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
17
|
+
|
|
13
18
|
var formSectionDescriptionStyles = (0, _primitives.xcss)({
|
|
14
19
|
marginBlockStart: 'space.100'
|
|
15
20
|
});
|
package/dist/cjs/label.js
CHANGED
|
@@ -7,8 +7,13 @@ exports.default = exports.Legend = exports.Label = void 0;
|
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
10
|
+
/**
|
|
11
|
+
* @jsxRuntime classic
|
|
12
|
+
*/
|
|
10
13
|
/** @jsx jsx */
|
|
11
14
|
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
|
+
|
|
12
17
|
var fieldsetLabelStyles = (0, _react.css)({
|
|
13
18
|
display: 'inline-block',
|
|
14
19
|
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)",
|
|
@@ -38,7 +43,9 @@ var Label = exports.Label = function Label(_ref) {
|
|
|
38
43
|
id = _ref.id,
|
|
39
44
|
testId = _ref.testId;
|
|
40
45
|
return (0, _react.jsx)("label", {
|
|
41
|
-
css: [fieldsetLabelStyles,
|
|
46
|
+
css: [fieldsetLabelStyles,
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
48
|
+
(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
|
|
42
49
|
id: id,
|
|
43
50
|
htmlFor: htmlFor,
|
|
44
51
|
"data-testid": testId
|
|
@@ -53,7 +60,9 @@ var Label = exports.Label = function Label(_ref) {
|
|
|
53
60
|
var Legend = exports.Legend = function Legend(_ref2) {
|
|
54
61
|
var children = _ref2.children;
|
|
55
62
|
return (0, _react.jsx)("legend", {
|
|
56
|
-
css: [fieldsetLabelStyles,
|
|
63
|
+
css: [fieldsetLabelStyles,
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
65
|
+
(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
|
|
57
66
|
}, children);
|
|
58
67
|
};
|
|
59
68
|
var _default = exports.default = Label;
|
package/dist/cjs/messages.js
CHANGED
|
@@ -10,8 +10,13 @@ var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/succe
|
|
|
10
10
|
var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
12
|
var _fieldIdContext = require("./field-id-context");
|
|
13
|
+
/**
|
|
14
|
+
* @jsxRuntime classic
|
|
15
|
+
*/
|
|
13
16
|
/** @jsx jsx */
|
|
14
17
|
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
|
+
|
|
15
20
|
/**
|
|
16
21
|
* API for the internal `<Message />` component. This is not public API.
|
|
17
22
|
*/
|
|
@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = RequiredAsterisk;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
|
+
/**
|
|
10
|
+
* @jsxRuntime classic
|
|
11
|
+
*/
|
|
9
12
|
/** @jsx jsx */
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
14
|
|
|
11
15
|
var requiredIndicatorStyles = (0, _react.css)({
|
|
12
16
|
color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
|
package/dist/es2019/field.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
8
|
import { css, jsx } from '@emotion/react';
|
|
4
9
|
import { uid } from 'react-uid';
|
|
5
10
|
import invariant from 'tiny-invariant';
|
package/dist/es2019/fieldset.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { Legend } from './label';
|
|
5
9
|
const fieldSetStyles = css({
|
|
6
|
-
|
|
10
|
+
marginBlockStart: "var(--ds-space-100, 8px)"
|
|
7
11
|
});
|
|
8
12
|
|
|
9
13
|
/**
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
const formFooterWrapperStyles = css({
|
|
5
9
|
display: 'flex',
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
justifyContent: 'flex-end',
|
|
11
|
+
marginBlockStart: "var(--ds-space-300, 24px)"
|
|
8
12
|
});
|
|
9
13
|
const justifyContentStyles = css({
|
|
10
14
|
justifyContent: 'flex-start'
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import Heading from '@atlaskit/heading';
|
|
5
9
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
@@ -26,7 +30,7 @@ const formHeaderWrapperStyles = css({
|
|
|
26
30
|
fontFamily: `${fontFamily}`
|
|
27
31
|
});
|
|
28
32
|
|
|
29
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
30
34
|
const lightH700Styles = css(h700({
|
|
31
35
|
theme: {
|
|
32
36
|
mode: 'light'
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { jsx } from '@emotion/react';
|
|
4
8
|
import Heading from '@atlaskit/heading';
|
|
5
9
|
import { Box, xcss } from '@atlaskit/primitives';
|
package/dist/es2019/label.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
9
|
import { N200 } from '@atlaskit/theme/colors';
|
|
@@ -32,7 +36,9 @@ export const Label = ({
|
|
|
32
36
|
id,
|
|
33
37
|
testId
|
|
34
38
|
}) => jsx("label", {
|
|
35
|
-
css: [fieldsetLabelStyles,
|
|
39
|
+
css: [fieldsetLabelStyles,
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
41
|
+
getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
|
|
36
42
|
id: id,
|
|
37
43
|
htmlFor: htmlFor,
|
|
38
44
|
"data-testid": testId
|
|
@@ -47,7 +53,9 @@ export const Legend = ({
|
|
|
47
53
|
children
|
|
48
54
|
}) => {
|
|
49
55
|
return jsx("legend", {
|
|
50
|
-
css: [fieldsetLabelStyles,
|
|
56
|
+
css: [fieldsetLabelStyles,
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
58
|
+
getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
|
|
51
59
|
}, children);
|
|
52
60
|
};
|
|
53
61
|
export default Label;
|
package/dist/es2019/messages.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
|
|
5
9
|
import ErrorIcon from '@atlaskit/icon/glyph/error';
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { R400 } from '@atlaskit/theme/colors';
|
|
4
8
|
const requiredIndicatorStyles = css({
|
package/dist/esm/field.js
CHANGED
|
@@ -3,8 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
/**
|
|
7
|
+
* @jsxRuntime classic
|
|
8
|
+
*/
|
|
6
9
|
/** @jsx jsx */
|
|
7
10
|
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
13
|
import { css, jsx } from '@emotion/react';
|
|
9
14
|
import { uid } from 'react-uid';
|
|
10
15
|
import invariant from 'tiny-invariant';
|
package/dist/esm/fieldset.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { Legend } from './label';
|
|
5
9
|
var fieldSetStyles = css({
|
|
6
|
-
|
|
10
|
+
marginBlockStart: "var(--ds-space-100, 8px)"
|
|
7
11
|
});
|
|
8
12
|
|
|
9
13
|
/**
|
package/dist/esm/form-footer.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
var formFooterWrapperStyles = css({
|
|
5
9
|
display: 'flex',
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
justifyContent: 'flex-end',
|
|
11
|
+
marginBlockStart: "var(--ds-space-300, 24px)"
|
|
8
12
|
});
|
|
9
13
|
var justifyContentStyles = css({
|
|
10
14
|
justifyContent: 'flex-start'
|
package/dist/esm/form-header.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import Heading from '@atlaskit/heading';
|
|
5
9
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
@@ -26,7 +30,7 @@ var formHeaderWrapperStyles = css({
|
|
|
26
30
|
fontFamily: "".concat(fontFamily)
|
|
27
31
|
});
|
|
28
32
|
|
|
29
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
30
34
|
var lightH700Styles = css(h700({
|
|
31
35
|
theme: {
|
|
32
36
|
mode: 'light'
|
package/dist/esm/form-section.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { jsx } from '@emotion/react';
|
|
4
8
|
import Heading from '@atlaskit/heading';
|
|
5
9
|
import { Box, xcss } from '@atlaskit/primitives';
|
package/dist/esm/label.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
9
|
import { N200 } from '@atlaskit/theme/colors';
|
|
@@ -32,7 +36,9 @@ export var Label = function Label(_ref) {
|
|
|
32
36
|
id = _ref.id,
|
|
33
37
|
testId = _ref.testId;
|
|
34
38
|
return jsx("label", {
|
|
35
|
-
css: [fieldsetLabelStyles,
|
|
39
|
+
css: [fieldsetLabelStyles,
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
41
|
+
getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles],
|
|
36
42
|
id: id,
|
|
37
43
|
htmlFor: htmlFor,
|
|
38
44
|
"data-testid": testId
|
|
@@ -47,7 +53,9 @@ export var Label = function Label(_ref) {
|
|
|
47
53
|
export var Legend = function Legend(_ref2) {
|
|
48
54
|
var children = _ref2.children;
|
|
49
55
|
return jsx("legend", {
|
|
50
|
-
css: [fieldsetLabelStyles,
|
|
56
|
+
css: [fieldsetLabelStyles,
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
58
|
+
getBooleanFF('platform.design-system-team.form-label-typography-updates') ? newFieldsetLabelStyles : oldFieldsetLabelStyles]
|
|
51
59
|
}, children);
|
|
52
60
|
};
|
|
53
61
|
export default Label;
|
package/dist/esm/messages.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
|
|
5
9
|
import ErrorIcon from '@atlaskit/icon/glyph/error';
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { R400 } from '@atlaskit/theme/colors';
|
|
4
8
|
var requiredIndicatorStyles = css({
|
package/dist/types/field.d.ts
CHANGED
package/dist/types/fieldset.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { type ReactNode } from 'react';
|
|
3
6
|
import { jsx } from '@emotion/react';
|
|
@@ -21,4 +24,4 @@ export interface FormFooterProps {
|
|
|
21
24
|
* - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
|
|
22
25
|
* - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
|
|
23
26
|
*/
|
|
24
|
-
export default function FormFooter({ align, children
|
|
27
|
+
export default function FormFooter({ align, children }: FormFooterProps): jsx.JSX.Element;
|
package/dist/types/label.d.ts
CHANGED
package/dist/types/messages.d.ts
CHANGED