carbon-react 119.9.3 → 119.10.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.
- package/esm/components/checkbox/checkbox-group.component.d.ts +4 -0
- package/esm/components/checkbox/checkbox-group.component.js +45 -5
- package/esm/components/checkbox/checkbox-group.style.d.ts +2 -0
- package/esm/components/checkbox/checkbox-group.style.js +18 -1
- package/esm/components/checkbox/checkbox.component.js +17 -13
- package/lib/components/checkbox/checkbox-group.component.d.ts +4 -0
- package/lib/components/checkbox/checkbox-group.component.js +47 -5
- package/lib/components/checkbox/checkbox-group.style.d.ts +2 -0
- package/lib/components/checkbox/checkbox-group.style.js +20 -2
- package/lib/components/checkbox/checkbox.component.js +17 -13
- package/package.json +1 -1
|
@@ -4,6 +4,8 @@ import { ValidationProps } from "../../__internal__/validations";
|
|
|
4
4
|
export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
5
5
|
/** The content for the CheckboxGroup Legend */
|
|
6
6
|
legend?: string;
|
|
7
|
+
/** The content for the CheckboxGroup Legend Help text */
|
|
8
|
+
legendHelp?: string;
|
|
7
9
|
/** When true, legend is placed inline with the checkboxes */
|
|
8
10
|
legendInline?: boolean;
|
|
9
11
|
/** Percentage width of legend (only when legend is inline) */
|
|
@@ -20,6 +22,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
|
20
22
|
required?: boolean;
|
|
21
23
|
/** Overrides the default tooltip */
|
|
22
24
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
25
|
+
/** When true, Checkboxes are in line */
|
|
26
|
+
inline?: boolean;
|
|
23
27
|
}
|
|
24
28
|
export declare const CheckboxGroupContext: React.Context<ValidationProps>;
|
|
25
29
|
export declare const CheckboxGroup: {
|
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import React from "react";
|
|
2
|
+
import React, { useContext } from "react";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
import tagComponent from "../../__internal__/utils/helpers/tags/tags";
|
|
5
|
-
import StyledCheckboxGroup from "./checkbox-group.style";
|
|
5
|
+
import StyledCheckboxGroup, { StyledHintText } from "./checkbox-group.style";
|
|
6
6
|
import Fieldset from "../../__internal__/fieldset";
|
|
7
7
|
import { filterStyledSystemMarginProps } from "../../style/utils";
|
|
8
8
|
import { TooltipProvider } from "../../__internal__/tooltip-provider";
|
|
9
9
|
import FormSpacingProvider from "../../__internal__/form-spacing-provider";
|
|
10
|
+
import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
|
|
11
|
+
import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
|
|
12
|
+
import Box from "../../components/box";
|
|
13
|
+
import { ErrorBorder } from "../../components/textbox/textbox.style";
|
|
10
14
|
export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
|
|
11
15
|
export const CheckboxGroup = props => {
|
|
16
|
+
const {
|
|
17
|
+
validationRedesignOptIn
|
|
18
|
+
} = useContext(NewValidationContext);
|
|
12
19
|
const {
|
|
13
20
|
children,
|
|
14
21
|
legend,
|
|
@@ -20,9 +27,42 @@ export const CheckboxGroup = props => {
|
|
|
20
27
|
legendWidth,
|
|
21
28
|
legendAlign,
|
|
22
29
|
legendSpacing,
|
|
23
|
-
|
|
30
|
+
legendHelp,
|
|
31
|
+
tooltipPosition,
|
|
32
|
+
inline
|
|
24
33
|
} = props;
|
|
25
|
-
return /*#__PURE__*/React.createElement(
|
|
34
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
35
|
+
legend: legend,
|
|
36
|
+
inline: legendInline,
|
|
37
|
+
legendWidth: legendWidth,
|
|
38
|
+
legendAlign: legendAlign,
|
|
39
|
+
legendSpacing: legendSpacing,
|
|
40
|
+
error: error,
|
|
41
|
+
warning: warning,
|
|
42
|
+
info: info,
|
|
43
|
+
isRequired: required
|
|
44
|
+
}, tagComponent("checkboxgroup", props), {
|
|
45
|
+
blockGroupBehaviour: !(error || warning)
|
|
46
|
+
}, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
|
|
47
|
+
position: "relative"
|
|
48
|
+
}, /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
49
|
+
error: error,
|
|
50
|
+
warning: warning
|
|
51
|
+
}), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
52
|
+
warning: !!(!error && warning),
|
|
53
|
+
inline: inline
|
|
54
|
+
}), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {
|
|
55
|
+
"data-component": "checkbox-group",
|
|
56
|
+
legendInline: legendInline,
|
|
57
|
+
inline: inline
|
|
58
|
+
}, /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
|
|
59
|
+
value: {
|
|
60
|
+
error: !!error,
|
|
61
|
+
warning: !!warning
|
|
62
|
+
}
|
|
63
|
+
}, /*#__PURE__*/React.createElement(FormSpacingProvider, {
|
|
64
|
+
marginBottom: undefined
|
|
65
|
+
}, children))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
|
|
26
66
|
tooltipPosition: tooltipPosition
|
|
27
67
|
}, /*#__PURE__*/React.createElement(Fieldset, _extends({
|
|
28
68
|
legend: legend,
|
|
@@ -47,7 +87,7 @@ export const CheckboxGroup = props => {
|
|
|
47
87
|
}
|
|
48
88
|
}, /*#__PURE__*/React.createElement(FormSpacingProvider, {
|
|
49
89
|
marginBottom: undefined
|
|
50
|
-
}, children)))));
|
|
90
|
+
}, children))))));
|
|
51
91
|
};
|
|
52
92
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
53
93
|
export default CheckboxGroup;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
1
2
|
declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
|
|
2
3
|
legendInline?: boolean | undefined;
|
|
4
|
+
inline?: boolean | undefined;
|
|
3
5
|
}, never>;
|
|
4
6
|
export default StyledCheckboxGroup;
|
|
@@ -4,10 +4,15 @@ import StyledIcon from "../icon/icon.style";
|
|
|
4
4
|
import CheckboxStyle from "./checkbox.style";
|
|
5
5
|
import { StyledLabelContainer } from "../../__internal__/label/label.style";
|
|
6
6
|
import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
|
|
7
|
+
export const StyledHintText = styled.div`
|
|
8
|
+
margin-top: -4px;
|
|
9
|
+
margin-bottom: 8px;
|
|
10
|
+
color: var(--colorsUtilityYin055);
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
`;
|
|
7
13
|
const StyledCheckboxGroup = styled.div`
|
|
8
14
|
display: flex;
|
|
9
15
|
flex-direction: column;
|
|
10
|
-
|
|
11
16
|
${StyledIcon}::before {
|
|
12
17
|
font-size: 16px;
|
|
13
18
|
}
|
|
@@ -45,5 +50,17 @@ const StyledCheckboxGroup = styled.div`
|
|
|
45
50
|
}
|
|
46
51
|
`;
|
|
47
52
|
}}
|
|
53
|
+
|
|
54
|
+
${_ref2 => {
|
|
55
|
+
let {
|
|
56
|
+
inline
|
|
57
|
+
} = _ref2;
|
|
58
|
+
return inline && css`
|
|
59
|
+
flex-direction: row;
|
|
60
|
+
${CheckboxStyle}:not(:first-of-type) {
|
|
61
|
+
margin-left: 32px;
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
}}
|
|
48
65
|
`;
|
|
49
66
|
export default StyledCheckboxGroup;
|
|
@@ -85,38 +85,42 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
85
85
|
labelHelp,
|
|
86
86
|
labelSpacing,
|
|
87
87
|
required,
|
|
88
|
-
error: contextError || error,
|
|
89
|
-
warning: contextWarning || warning,
|
|
90
|
-
info: contextInfo || info,
|
|
91
88
|
fieldHelpInline,
|
|
92
89
|
checked,
|
|
93
90
|
disabled,
|
|
94
91
|
inputWidth,
|
|
95
92
|
labelWidth,
|
|
96
|
-
tooltipPosition,
|
|
97
93
|
ref: ref || inputRef,
|
|
98
94
|
...rest
|
|
99
95
|
};
|
|
96
|
+
const validationProps = {
|
|
97
|
+
error: contextError || error,
|
|
98
|
+
warning: contextWarning || warning,
|
|
99
|
+
...(validationRedesignOptIn ? {
|
|
100
|
+
validationOnLabel: false
|
|
101
|
+
} : {
|
|
102
|
+
info: contextInfo || info
|
|
103
|
+
})
|
|
104
|
+
};
|
|
100
105
|
const marginProps = useFormSpacing(rest);
|
|
101
|
-
|
|
102
|
-
helpAriaLabel: helpAriaLabel,
|
|
103
|
-
tooltipPosition: tooltipPosition
|
|
104
|
-
}, /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
|
|
106
|
+
const componentToRender = /*#__PURE__*/React.createElement(CheckboxStyle, _extends({
|
|
105
107
|
"data-component": dataComponent,
|
|
106
108
|
"data-role": dataRole,
|
|
107
109
|
"data-element": dataElement,
|
|
108
110
|
disabled: disabled,
|
|
109
111
|
labelSpacing: labelSpacing,
|
|
110
112
|
inputWidth: inputWidth,
|
|
111
|
-
adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
|
|
112
|
-
|
|
113
|
-
warning: contextWarning || warning,
|
|
114
|
-
info: contextInfo || info,
|
|
113
|
+
adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
|
|
114
|
+
}, validationProps, {
|
|
115
115
|
fieldHelpInline: fieldHelpInline,
|
|
116
116
|
reverse: reverse,
|
|
117
117
|
size: size,
|
|
118
118
|
applyNewValidation: validationRedesignOptIn
|
|
119
|
-
}, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null)))
|
|
119
|
+
}, marginProps), /*#__PURE__*/React.createElement(CheckableInput, _extends({}, inputProps, validationProps), /*#__PURE__*/React.createElement(CheckboxSvg, null)));
|
|
120
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
|
|
121
|
+
helpAriaLabel: helpAriaLabel,
|
|
122
|
+
tooltipPosition: tooltipPosition
|
|
123
|
+
}, componentToRender));
|
|
120
124
|
});
|
|
121
125
|
Checkbox.propTypes = {
|
|
122
126
|
"about": PropTypes.string,
|
|
@@ -4,6 +4,8 @@ import { ValidationProps } from "../../__internal__/validations";
|
|
|
4
4
|
export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
5
5
|
/** The content for the CheckboxGroup Legend */
|
|
6
6
|
legend?: string;
|
|
7
|
+
/** The content for the CheckboxGroup Legend Help text */
|
|
8
|
+
legendHelp?: string;
|
|
7
9
|
/** When true, legend is placed inline with the checkboxes */
|
|
8
10
|
legendInline?: boolean;
|
|
9
11
|
/** Percentage width of legend (only when legend is inline) */
|
|
@@ -20,6 +22,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
|
|
|
20
22
|
required?: boolean;
|
|
21
23
|
/** Overrides the default tooltip */
|
|
22
24
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
25
|
+
/** When true, Checkboxes are in line */
|
|
26
|
+
inline?: boolean;
|
|
23
27
|
}
|
|
24
28
|
export declare const CheckboxGroupContext: React.Context<ValidationProps>;
|
|
25
29
|
export declare const CheckboxGroup: {
|
|
@@ -4,19 +4,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.CheckboxGroupContext = exports.CheckboxGroup = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
|
|
10
|
-
var _checkboxGroup =
|
|
10
|
+
var _checkboxGroup = _interopRequireWildcard(require("./checkbox-group.style"));
|
|
11
11
|
var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
|
|
12
12
|
var _utils = require("../../style/utils");
|
|
13
13
|
var _tooltipProvider = require("../../__internal__/tooltip-provider");
|
|
14
14
|
var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
|
|
15
|
+
var _carbonProvider = require("../carbon-provider/carbon-provider.component");
|
|
16
|
+
var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
|
|
17
|
+
var _box = _interopRequireDefault(require("../../components/box"));
|
|
18
|
+
var _textbox = require("../../components/textbox/textbox.style");
|
|
15
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
22
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
23
|
const CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({});
|
|
18
24
|
exports.CheckboxGroupContext = CheckboxGroupContext;
|
|
19
25
|
const CheckboxGroup = props => {
|
|
26
|
+
const {
|
|
27
|
+
validationRedesignOptIn
|
|
28
|
+
} = (0, _react.useContext)(_carbonProvider.NewValidationContext);
|
|
20
29
|
const {
|
|
21
30
|
children,
|
|
22
31
|
legend,
|
|
@@ -28,9 +37,42 @@ const CheckboxGroup = props => {
|
|
|
28
37
|
legendWidth,
|
|
29
38
|
legendAlign,
|
|
30
39
|
legendSpacing,
|
|
31
|
-
|
|
40
|
+
legendHelp,
|
|
41
|
+
tooltipPosition,
|
|
42
|
+
inline
|
|
32
43
|
} = props;
|
|
33
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
45
|
+
legend: legend,
|
|
46
|
+
inline: legendInline,
|
|
47
|
+
legendWidth: legendWidth,
|
|
48
|
+
legendAlign: legendAlign,
|
|
49
|
+
legendSpacing: legendSpacing,
|
|
50
|
+
error: error,
|
|
51
|
+
warning: warning,
|
|
52
|
+
info: info,
|
|
53
|
+
isRequired: required
|
|
54
|
+
}, (0, _tags.default)("checkboxgroup", props), {
|
|
55
|
+
blockGroupBehaviour: !(error || warning)
|
|
56
|
+
}, (0, _utils.filterStyledSystemMarginProps)(props)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
57
|
+
position: "relative"
|
|
58
|
+
}, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
|
|
59
|
+
error: error,
|
|
60
|
+
warning: warning
|
|
61
|
+
}), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
|
|
62
|
+
warning: !!(!error && warning),
|
|
63
|
+
inline: inline
|
|
64
|
+
}), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {
|
|
65
|
+
"data-component": "checkbox-group",
|
|
66
|
+
legendInline: legendInline,
|
|
67
|
+
inline: inline
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
|
|
69
|
+
value: {
|
|
70
|
+
error: !!error,
|
|
71
|
+
warning: !!warning
|
|
72
|
+
}
|
|
73
|
+
}, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
|
|
74
|
+
marginBottom: undefined
|
|
75
|
+
}, children))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
|
|
34
76
|
tooltipPosition: tooltipPosition
|
|
35
77
|
}, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
|
|
36
78
|
legend: legend,
|
|
@@ -55,7 +97,7 @@ const CheckboxGroup = props => {
|
|
|
55
97
|
}
|
|
56
98
|
}, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
|
|
57
99
|
marginBottom: undefined
|
|
58
|
-
}, children)))));
|
|
100
|
+
}, children))))));
|
|
59
101
|
};
|
|
60
102
|
exports.CheckboxGroup = CheckboxGroup;
|
|
61
103
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
1
2
|
declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
|
|
2
3
|
legendInline?: boolean | undefined;
|
|
4
|
+
inline?: boolean | undefined;
|
|
3
5
|
}, never>;
|
|
4
6
|
export default StyledCheckboxGroup;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
6
|
+
exports.default = exports.StyledHintText = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
|
|
9
9
|
var _icon = _interopRequireDefault(require("../icon/icon.style"));
|
|
@@ -13,10 +13,16 @@ var _validationIcon = _interopRequireDefault(require("../../__internal__/validat
|
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
const StyledHintText = _styledComponents.default.div`
|
|
17
|
+
margin-top: -4px;
|
|
18
|
+
margin-bottom: 8px;
|
|
19
|
+
color: var(--colorsUtilityYin055);
|
|
20
|
+
font-size: 14px;
|
|
21
|
+
`;
|
|
22
|
+
exports.StyledHintText = StyledHintText;
|
|
16
23
|
const StyledCheckboxGroup = _styledComponents.default.div`
|
|
17
24
|
display: flex;
|
|
18
25
|
flex-direction: column;
|
|
19
|
-
|
|
20
26
|
${_icon.default}::before {
|
|
21
27
|
font-size: 16px;
|
|
22
28
|
}
|
|
@@ -54,6 +60,18 @@ const StyledCheckboxGroup = _styledComponents.default.div`
|
|
|
54
60
|
}
|
|
55
61
|
`;
|
|
56
62
|
}}
|
|
63
|
+
|
|
64
|
+
${_ref2 => {
|
|
65
|
+
let {
|
|
66
|
+
inline
|
|
67
|
+
} = _ref2;
|
|
68
|
+
return inline && (0, _styledComponents.css)`
|
|
69
|
+
flex-direction: row;
|
|
70
|
+
${_checkbox.default}:not(:first-of-type) {
|
|
71
|
+
margin-left: 32px;
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
}}
|
|
57
75
|
`;
|
|
58
76
|
var _default = StyledCheckboxGroup;
|
|
59
77
|
exports.default = _default;
|
|
@@ -94,38 +94,42 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
94
94
|
labelHelp,
|
|
95
95
|
labelSpacing,
|
|
96
96
|
required,
|
|
97
|
-
error: contextError || error,
|
|
98
|
-
warning: contextWarning || warning,
|
|
99
|
-
info: contextInfo || info,
|
|
100
97
|
fieldHelpInline,
|
|
101
98
|
checked,
|
|
102
99
|
disabled,
|
|
103
100
|
inputWidth,
|
|
104
101
|
labelWidth,
|
|
105
|
-
tooltipPosition,
|
|
106
102
|
ref: ref || inputRef,
|
|
107
103
|
...rest
|
|
108
104
|
};
|
|
105
|
+
const validationProps = {
|
|
106
|
+
error: contextError || error,
|
|
107
|
+
warning: contextWarning || warning,
|
|
108
|
+
...(validationRedesignOptIn ? {
|
|
109
|
+
validationOnLabel: false
|
|
110
|
+
} : {
|
|
111
|
+
info: contextInfo || info
|
|
112
|
+
})
|
|
113
|
+
};
|
|
109
114
|
const marginProps = (0, _useFormSpacing.default)(rest);
|
|
110
|
-
|
|
111
|
-
helpAriaLabel: helpAriaLabel,
|
|
112
|
-
tooltipPosition: tooltipPosition
|
|
113
|
-
}, /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
|
|
115
|
+
const componentToRender = /*#__PURE__*/_react.default.createElement(_checkbox.default, _extends({
|
|
114
116
|
"data-component": dataComponent,
|
|
115
117
|
"data-role": dataRole,
|
|
116
118
|
"data-element": dataElement,
|
|
117
119
|
disabled: disabled,
|
|
118
120
|
labelSpacing: labelSpacing,
|
|
119
121
|
inputWidth: inputWidth,
|
|
120
|
-
adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
|
|
121
|
-
|
|
122
|
-
warning: contextWarning || warning,
|
|
123
|
-
info: contextInfo || info,
|
|
122
|
+
adaptiveSpacingSmallScreen: adaptiveSpacingSmallScreen
|
|
123
|
+
}, validationProps, {
|
|
124
124
|
fieldHelpInline: fieldHelpInline,
|
|
125
125
|
reverse: reverse,
|
|
126
126
|
size: size,
|
|
127
127
|
applyNewValidation: validationRedesignOptIn
|
|
128
|
-
}, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null)))
|
|
128
|
+
}, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, _extends({}, inputProps, validationProps), /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null)));
|
|
129
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
|
|
130
|
+
helpAriaLabel: helpAriaLabel,
|
|
131
|
+
tooltipPosition: tooltipPosition
|
|
132
|
+
}, componentToRender));
|
|
129
133
|
});
|
|
130
134
|
exports.Checkbox = Checkbox;
|
|
131
135
|
Checkbox.propTypes = {
|