carbon-react 142.13.0 → 142.13.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/esm/components/form/__internal__/form-summary.style.js +16 -16
- package/esm/components/form/form.component.js +5 -19
- package/esm/components/form/form.style.d.ts +0 -1
- package/esm/components/form/form.style.js +8 -21
- package/lib/components/form/__internal__/form-summary.style.js +16 -16
- package/lib/components/form/form.component.js +4 -18
- package/lib/components/form/form.style.d.ts +0 -1
- package/lib/components/form/form.style.js +9 -22
- package/package.json +1 -1
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import StyledIcon from "../../icon/icon.style";
|
|
3
|
-
import StyledButton from "../../button/button.style";
|
|
4
3
|
export const StyledFormSummary = styled.div`
|
|
5
4
|
display: inline-flex;
|
|
5
|
+
flex-wrap: wrap;
|
|
6
6
|
align-items: center;
|
|
7
|
-
|
|
7
|
+
justify-content: end;
|
|
8
|
+
font-size: var(--fontSizes100);
|
|
8
9
|
font-weight: 500;
|
|
9
|
-
margin: -8px;
|
|
10
|
-
padding: 8px;
|
|
11
|
-
white-space: nowrap;
|
|
12
10
|
|
|
13
11
|
${({
|
|
14
12
|
fullWidth
|
|
@@ -20,27 +18,30 @@ export const StyledFormSummary = styled.div`
|
|
|
20
18
|
`}
|
|
21
19
|
|
|
22
20
|
${({
|
|
23
|
-
showSummary
|
|
21
|
+
showSummary,
|
|
22
|
+
fullWidth
|
|
24
23
|
}) => showSummary && css`
|
|
25
24
|
background-color: var(--colorsUtilityMajor025);
|
|
25
|
+
border: solid var(--borderWidth100) var(--colorsActionMinor250);
|
|
26
|
+
border-radius: var(--borderRadius100);
|
|
27
|
+
margin: calc(-1 * var(--sizing100)) 0;
|
|
28
|
+
padding: var(--sizing100);
|
|
29
|
+
gap: var(--sizing125);
|
|
30
|
+
|
|
31
|
+
${fullWidth && css`
|
|
32
|
+
margin: 0 calc(-1 * var(--sizing100));
|
|
33
|
+
`}
|
|
26
34
|
`}
|
|
27
|
-
${StyledButton} {
|
|
28
|
-
margin-right: 0;
|
|
29
|
-
}
|
|
30
35
|
`;
|
|
31
36
|
export const StyledMessagePrefix = styled.div`
|
|
32
37
|
&:first-of-type {
|
|
33
|
-
margin-left:
|
|
38
|
+
margin-left: var(--sizing100);
|
|
34
39
|
}
|
|
35
|
-
margin-right: 4px;
|
|
36
40
|
`;
|
|
37
41
|
export const StyledInternalSummary = styled.div`
|
|
38
42
|
display: flex;
|
|
39
43
|
align-items: center;
|
|
40
|
-
|
|
41
|
-
&:last-of-type {
|
|
42
|
-
margin-right: 16px;
|
|
43
|
-
}
|
|
44
|
+
gap: var(--sizing100);
|
|
44
45
|
${({
|
|
45
46
|
type
|
|
46
47
|
}) => type === "warning" && css`
|
|
@@ -53,7 +54,6 @@ export const StyledInternalSummary = styled.div`
|
|
|
53
54
|
`}
|
|
54
55
|
|
|
55
56
|
${StyledIcon} {
|
|
56
|
-
margin-right: 4px;
|
|
57
57
|
${({
|
|
58
58
|
type
|
|
59
59
|
}) => type === "warning" && css`
|
|
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
|
|
|
4
4
|
import SidebarContext from "../sidebar/__internal__/sidebar.context";
|
|
5
5
|
import ModalContext from "../modal/__internal__/modal.context";
|
|
6
6
|
import FormSummary from "./__internal__/form-summary.component";
|
|
7
|
-
import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons
|
|
7
|
+
import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons } from "./form.style";
|
|
8
8
|
import { formSpacing } from "./form.config";
|
|
9
9
|
import FormSpacingProvider from "../../__internal__/form-spacing-provider";
|
|
10
10
|
export const Form = ({
|
|
@@ -54,40 +54,26 @@ export const Form = ({
|
|
|
54
54
|
tabIndex: -1
|
|
55
55
|
}, /*#__PURE__*/React.createElement(FormSpacingProvider, {
|
|
56
56
|
marginBottom: formSpacing[fieldSpacing]
|
|
57
|
-
}, children)),
|
|
57
|
+
}, children)), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
|
|
58
58
|
"data-element": "form-footer",
|
|
59
59
|
"data-role": "form-footer",
|
|
60
60
|
className: classNames,
|
|
61
61
|
ref: formFooterRef,
|
|
62
62
|
stickyFooter: stickyFooter,
|
|
63
63
|
buttonAlignment: buttonAlignment,
|
|
64
|
+
fullWidthButtons: fullWidthButtons,
|
|
64
65
|
isInModal: isInModal
|
|
65
66
|
}, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
|
|
66
67
|
"data-role": "form-left-buttons",
|
|
67
68
|
buttonAlignment: buttonAlignment
|
|
68
69
|
}, leftSideButtons), /*#__PURE__*/React.createElement(FormSummary, {
|
|
70
|
+
fullWidth: fullWidthButtons,
|
|
69
71
|
errorCount: errorCount,
|
|
70
72
|
warningCount: warningCount
|
|
71
73
|
}, saveButton), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
|
|
72
74
|
"data-role": "form-right-buttons",
|
|
73
75
|
buttonAlignment: buttonAlignment
|
|
74
|
-
}, rightSideButtons))
|
|
75
|
-
"data-element": "form-footer",
|
|
76
|
-
"data-role": "form-footer",
|
|
77
|
-
className: classNames,
|
|
78
|
-
ref: formFooterRef,
|
|
79
|
-
stickyFooter: stickyFooter,
|
|
80
|
-
buttonAlignment: buttonAlignment,
|
|
81
|
-
fullWidthButtons: fullWidthButtons
|
|
82
|
-
}, footerPadding), leftSideButtons && /*#__PURE__*/React.createElement(StyledLeftButtons, {
|
|
83
|
-
fullWidthButtons: fullWidthButtons
|
|
84
|
-
}, leftSideButtons), rightSideButtons && /*#__PURE__*/React.createElement(StyledRightButtons, {
|
|
85
|
-
fullWidthButtons: fullWidthButtons
|
|
86
|
-
}, rightSideButtons), /*#__PURE__*/React.createElement(StyledFullWidthButtons, null, /*#__PURE__*/React.createElement(FormSummary, {
|
|
87
|
-
fullWidth: fullWidthButtons,
|
|
88
|
-
errorCount: errorCount,
|
|
89
|
-
warningCount: warningCount
|
|
90
|
-
}, saveButton))));
|
|
76
|
+
}, rightSideButtons)));
|
|
91
77
|
};
|
|
92
78
|
Form.displayName = "Form";
|
|
93
79
|
export default Form;
|
|
@@ -16,6 +16,5 @@ interface StyledFormProps extends StyledFormContentProps {
|
|
|
16
16
|
}
|
|
17
17
|
export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
|
|
18
18
|
export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
|
|
19
|
-
export declare const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
19
|
export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
|
|
21
20
|
export {};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import { space, padding } from "styled-system";
|
|
3
3
|
import StyledFormField from "../../__internal__/form-field/form-field.style";
|
|
4
|
-
import StyledButton from "../button/button.style";
|
|
5
4
|
import baseTheme from "../../style/themes/base";
|
|
6
5
|
import StyledSearch from "../search/search.style";
|
|
7
6
|
import StyledTextarea from "../textarea/textarea.style";
|
|
@@ -20,6 +19,8 @@ export const StyledFormContent = styled.div`
|
|
|
20
19
|
export const StyledFormFooter = styled.div`
|
|
21
20
|
align-items: center;
|
|
22
21
|
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
gap: var(--sizing200);
|
|
23
24
|
|
|
24
25
|
${({
|
|
25
26
|
buttonAlignment
|
|
@@ -97,34 +98,20 @@ export const StyledForm = styled.form`
|
|
|
97
98
|
`;
|
|
98
99
|
export const StyledRightButtons = styled.div`
|
|
99
100
|
display: flex;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
|
|
101
|
+
gap: var(--sizing200);
|
|
102
|
+
|
|
103
103
|
${({
|
|
104
104
|
buttonAlignment
|
|
105
|
-
}) => buttonAlignment === "left" && "flex-grow: 1"}
|
|
106
|
-
|
|
107
|
-
${StyledButton}:last-child {
|
|
108
|
-
margin-right: 0;
|
|
109
|
-
}
|
|
110
|
-
`;
|
|
111
|
-
export const StyledFullWidthButtons = styled.div`
|
|
112
|
-
width: 100%;
|
|
113
|
-
display: flex;
|
|
105
|
+
}) => buttonAlignment === "left" && "flex-grow: 1;"}
|
|
114
106
|
`;
|
|
115
107
|
export const StyledLeftButtons = styled.div`
|
|
116
108
|
display: flex;
|
|
117
109
|
justify-content: flex-end;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
|
|
110
|
+
gap: var(--sizing200);
|
|
111
|
+
|
|
121
112
|
${({
|
|
122
113
|
buttonAlignment
|
|
123
|
-
}) => buttonAlignment === "right" && "flex-grow: 1"}
|
|
124
|
-
|
|
125
|
-
${StyledButton}:last-child {
|
|
126
|
-
margin-right: 0;
|
|
127
|
-
}
|
|
114
|
+
}) => buttonAlignment === "right" && "flex-grow: 1;"}
|
|
128
115
|
`;
|
|
129
116
|
StyledForm.defaultProps = {
|
|
130
117
|
theme: baseTheme
|
|
@@ -6,18 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledMessagePrefix = exports.StyledInternalSummary = exports.StyledFormSummary = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _icon = _interopRequireDefault(require("../../icon/icon.style"));
|
|
9
|
-
var _button = _interopRequireDefault(require("../../button/button.style"));
|
|
10
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
12
|
const StyledFormSummary = exports.StyledFormSummary = _styledComponents.default.div`
|
|
14
13
|
display: inline-flex;
|
|
14
|
+
flex-wrap: wrap;
|
|
15
15
|
align-items: center;
|
|
16
|
-
|
|
16
|
+
justify-content: end;
|
|
17
|
+
font-size: var(--fontSizes100);
|
|
17
18
|
font-weight: 500;
|
|
18
|
-
margin: -8px;
|
|
19
|
-
padding: 8px;
|
|
20
|
-
white-space: nowrap;
|
|
21
19
|
|
|
22
20
|
${({
|
|
23
21
|
fullWidth
|
|
@@ -29,27 +27,30 @@ const StyledFormSummary = exports.StyledFormSummary = _styledComponents.default.
|
|
|
29
27
|
`}
|
|
30
28
|
|
|
31
29
|
${({
|
|
32
|
-
showSummary
|
|
30
|
+
showSummary,
|
|
31
|
+
fullWidth
|
|
33
32
|
}) => showSummary && (0, _styledComponents.css)`
|
|
34
33
|
background-color: var(--colorsUtilityMajor025);
|
|
34
|
+
border: solid var(--borderWidth100) var(--colorsActionMinor250);
|
|
35
|
+
border-radius: var(--borderRadius100);
|
|
36
|
+
margin: calc(-1 * var(--sizing100)) 0;
|
|
37
|
+
padding: var(--sizing100);
|
|
38
|
+
gap: var(--sizing125);
|
|
39
|
+
|
|
40
|
+
${fullWidth && (0, _styledComponents.css)`
|
|
41
|
+
margin: 0 calc(-1 * var(--sizing100));
|
|
42
|
+
`}
|
|
35
43
|
`}
|
|
36
|
-
${_button.default} {
|
|
37
|
-
margin-right: 0;
|
|
38
|
-
}
|
|
39
44
|
`;
|
|
40
45
|
const StyledMessagePrefix = exports.StyledMessagePrefix = _styledComponents.default.div`
|
|
41
46
|
&:first-of-type {
|
|
42
|
-
margin-left:
|
|
47
|
+
margin-left: var(--sizing100);
|
|
43
48
|
}
|
|
44
|
-
margin-right: 4px;
|
|
45
49
|
`;
|
|
46
50
|
const StyledInternalSummary = exports.StyledInternalSummary = _styledComponents.default.div`
|
|
47
51
|
display: flex;
|
|
48
52
|
align-items: center;
|
|
49
|
-
|
|
50
|
-
&:last-of-type {
|
|
51
|
-
margin-right: 16px;
|
|
52
|
-
}
|
|
53
|
+
gap: var(--sizing100);
|
|
53
54
|
${({
|
|
54
55
|
type
|
|
55
56
|
}) => type === "warning" && (0, _styledComponents.css)`
|
|
@@ -62,7 +63,6 @@ const StyledInternalSummary = exports.StyledInternalSummary = _styledComponents.
|
|
|
62
63
|
`}
|
|
63
64
|
|
|
64
65
|
${_icon.default} {
|
|
65
|
-
margin-right: 4px;
|
|
66
66
|
${({
|
|
67
67
|
type
|
|
68
68
|
}) => type === "warning" && (0, _styledComponents.css)`
|
|
@@ -63,40 +63,26 @@ const Form = ({
|
|
|
63
63
|
tabIndex: -1
|
|
64
64
|
}, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
|
|
65
65
|
marginBottom: _form2.formSpacing[fieldSpacing]
|
|
66
|
-
}, children)),
|
|
66
|
+
}, children)), renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
|
|
67
67
|
"data-element": "form-footer",
|
|
68
68
|
"data-role": "form-footer",
|
|
69
69
|
className: classNames,
|
|
70
70
|
ref: formFooterRef,
|
|
71
71
|
stickyFooter: stickyFooter,
|
|
72
72
|
buttonAlignment: buttonAlignment,
|
|
73
|
+
fullWidthButtons: fullWidthButtons,
|
|
73
74
|
isInModal: isInModal
|
|
74
75
|
}, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
|
|
75
76
|
"data-role": "form-left-buttons",
|
|
76
77
|
buttonAlignment: buttonAlignment
|
|
77
78
|
}, leftSideButtons), /*#__PURE__*/_react.default.createElement(_formSummary.default, {
|
|
79
|
+
fullWidth: fullWidthButtons,
|
|
78
80
|
errorCount: errorCount,
|
|
79
81
|
warningCount: warningCount
|
|
80
82
|
}, saveButton), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
|
|
81
83
|
"data-role": "form-right-buttons",
|
|
82
84
|
buttonAlignment: buttonAlignment
|
|
83
|
-
}, rightSideButtons))
|
|
84
|
-
"data-element": "form-footer",
|
|
85
|
-
"data-role": "form-footer",
|
|
86
|
-
className: classNames,
|
|
87
|
-
ref: formFooterRef,
|
|
88
|
-
stickyFooter: stickyFooter,
|
|
89
|
-
buttonAlignment: buttonAlignment,
|
|
90
|
-
fullWidthButtons: fullWidthButtons
|
|
91
|
-
}, footerPadding), leftSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledLeftButtons, {
|
|
92
|
-
fullWidthButtons: fullWidthButtons
|
|
93
|
-
}, leftSideButtons), rightSideButtons && /*#__PURE__*/_react.default.createElement(_form.StyledRightButtons, {
|
|
94
|
-
fullWidthButtons: fullWidthButtons
|
|
95
|
-
}, rightSideButtons), /*#__PURE__*/_react.default.createElement(_form.StyledFullWidthButtons, null, /*#__PURE__*/_react.default.createElement(_formSummary.default, {
|
|
96
|
-
fullWidth: fullWidthButtons,
|
|
97
|
-
errorCount: errorCount,
|
|
98
|
-
warningCount: warningCount
|
|
99
|
-
}, saveButton))));
|
|
85
|
+
}, rightSideButtons)));
|
|
100
86
|
};
|
|
101
87
|
exports.Form = Form;
|
|
102
88
|
Form.displayName = "Form";
|
|
@@ -16,6 +16,5 @@ interface StyledFormProps extends StyledFormContentProps {
|
|
|
16
16
|
}
|
|
17
17
|
export declare const StyledForm: import("styled-components").StyledComponent<"form", any, StyledFormProps, never>;
|
|
18
18
|
export declare const StyledRightButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
|
|
19
|
-
export declare const StyledFullWidthButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
19
|
export declare const StyledLeftButtons: import("styled-components").StyledComponent<"div", any, ButtonProps, never>;
|
|
21
20
|
export {};
|
|
@@ -3,11 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledRightButtons = exports.StyledLeftButtons = exports.
|
|
6
|
+
exports.StyledRightButtons = exports.StyledLeftButtons = exports.StyledFormFooter = exports.StyledFormContent = exports.StyledForm = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _styledSystem = require("styled-system");
|
|
9
9
|
var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
|
|
10
|
-
var _button = _interopRequireDefault(require("../button/button.style"));
|
|
11
10
|
var _base = _interopRequireDefault(require("../../style/themes/base"));
|
|
12
11
|
var _search = _interopRequireDefault(require("../search/search.style"));
|
|
13
12
|
var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
|
|
@@ -29,6 +28,8 @@ const StyledFormContent = exports.StyledFormContent = _styledComponents.default.
|
|
|
29
28
|
const StyledFormFooter = exports.StyledFormFooter = _styledComponents.default.div`
|
|
30
29
|
align-items: center;
|
|
31
30
|
display: flex;
|
|
31
|
+
flex-wrap: wrap;
|
|
32
|
+
gap: var(--sizing200);
|
|
32
33
|
|
|
33
34
|
${({
|
|
34
35
|
buttonAlignment
|
|
@@ -106,34 +107,20 @@ const StyledForm = exports.StyledForm = _styledComponents.default.form`
|
|
|
106
107
|
`;
|
|
107
108
|
const StyledRightButtons = exports.StyledRightButtons = _styledComponents.default.div`
|
|
108
109
|
display: flex;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}) => fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
|
|
110
|
+
gap: var(--sizing200);
|
|
111
|
+
|
|
112
112
|
${({
|
|
113
113
|
buttonAlignment
|
|
114
|
-
}) => buttonAlignment === "left" && "flex-grow: 1"}
|
|
115
|
-
|
|
116
|
-
${_button.default}:last-child {
|
|
117
|
-
margin-right: 0;
|
|
118
|
-
}
|
|
119
|
-
`;
|
|
120
|
-
const StyledFullWidthButtons = exports.StyledFullWidthButtons = _styledComponents.default.div`
|
|
121
|
-
width: 100%;
|
|
122
|
-
display: flex;
|
|
114
|
+
}) => buttonAlignment === "left" && "flex-grow: 1;"}
|
|
123
115
|
`;
|
|
124
116
|
const StyledLeftButtons = exports.StyledLeftButtons = _styledComponents.default.div`
|
|
125
117
|
display: flex;
|
|
126
118
|
justify-content: flex-end;
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}) => fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
|
|
119
|
+
gap: var(--sizing200);
|
|
120
|
+
|
|
130
121
|
${({
|
|
131
122
|
buttonAlignment
|
|
132
|
-
}) => buttonAlignment === "right" && "flex-grow: 1"}
|
|
133
|
-
|
|
134
|
-
${_button.default}:last-child {
|
|
135
|
-
margin-right: 0;
|
|
136
|
-
}
|
|
123
|
+
}) => buttonAlignment === "right" && "flex-grow: 1;"}
|
|
137
124
|
`;
|
|
138
125
|
StyledForm.defaultProps = {
|
|
139
126
|
theme: _base.default
|