carbon-react 123.7.1 → 123.8.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/multi-action-button/multi-action-button.component.js +0 -1
- package/esm/components/split-button/split-button.component.d.ts +3 -1
- package/esm/components/split-button/split-button.component.js +4 -1
- package/esm/components/switch/switch.component.js +5 -2
- package/esm/locales/en-gb.js +3 -0
- package/esm/locales/locale.d.ts +3 -0
- package/esm/locales/pl-pl.js +3 -0
- package/lib/components/multi-action-button/multi-action-button.component.js +0 -1
- package/lib/components/split-button/split-button.component.d.ts +3 -1
- package/lib/components/split-button/split-button.component.js +4 -1
- package/lib/components/switch/switch.component.js +5 -2
- package/lib/locales/en-gb.js +3 -0
- package/lib/locales/locale.d.ts +3 -0
- package/lib/locales/pl-pl.js +3 -0
- package/package.json +2 -3
|
@@ -76,7 +76,6 @@ export const MultiActionButton = ({
|
|
|
76
76
|
}, marginProps), /*#__PURE__*/React.createElement(Button, _extends({
|
|
77
77
|
"aria-haspopup": "true",
|
|
78
78
|
"aria-expanded": showAdditionalButtons,
|
|
79
|
-
"aria-label": "Show more",
|
|
80
79
|
"data-element": "toggle-button",
|
|
81
80
|
key: "toggle-button"
|
|
82
81
|
}, mainButtonProps, {
|
|
@@ -12,6 +12,8 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
12
12
|
"data-element"?: string;
|
|
13
13
|
/** A custom value for the data-role attribute */
|
|
14
14
|
"data-role"?: string;
|
|
15
|
+
/** Prop to specify an aria-label for the component */
|
|
16
|
+
"aria-label"?: string;
|
|
15
17
|
/** Gives the button a disabled state. */
|
|
16
18
|
disabled?: boolean;
|
|
17
19
|
/** Defines an Icon position within the button: "before" | "after" */
|
|
@@ -25,5 +27,5 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
25
27
|
/** The text to be displayed in the SplitButton. */
|
|
26
28
|
text: string;
|
|
27
29
|
}
|
|
28
|
-
export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => React.JSX.Element;
|
|
30
|
+
export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
|
|
29
31
|
export default SplitButton;
|
|
@@ -14,6 +14,7 @@ import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from
|
|
|
14
14
|
import { baseTheme } from "../../style/themes";
|
|
15
15
|
import useChildButtons from "../../hooks/__internal__/useChildButtons";
|
|
16
16
|
import SplitButtonContext from "./__internal__/split-button.context";
|
|
17
|
+
import useLocale from "../../hooks/__internal__/useLocale";
|
|
17
18
|
const CONTENT_WIDTH_RATIO = 0.75;
|
|
18
19
|
export const SplitButton = ({
|
|
19
20
|
align = "left",
|
|
@@ -28,8 +29,10 @@ export const SplitButton = ({
|
|
|
28
29
|
text,
|
|
29
30
|
"data-element": dataElement,
|
|
30
31
|
"data-role": dataRole,
|
|
32
|
+
"aria-label": ariaLabel,
|
|
31
33
|
...rest
|
|
32
34
|
}) => {
|
|
35
|
+
const locale = useLocale();
|
|
33
36
|
const theme = useContext(ThemeContext) || baseTheme;
|
|
34
37
|
const buttonLabelId = useRef(guid());
|
|
35
38
|
const toggleButton = useRef(null);
|
|
@@ -90,7 +93,7 @@ export const SplitButton = ({
|
|
|
90
93
|
}, mainButtonProps), text), /*#__PURE__*/React.createElement(StyledSplitButtonToggle, _extends({
|
|
91
94
|
"aria-haspopup": "true",
|
|
92
95
|
"aria-expanded": showAdditionalButtons,
|
|
93
|
-
"aria-label":
|
|
96
|
+
"aria-label": ariaLabel || locale.splitButton.ariaLabel(),
|
|
94
97
|
"data-element": "toggle-button",
|
|
95
98
|
key: "toggle-button",
|
|
96
99
|
type: "button",
|
|
@@ -156,12 +156,15 @@ const Switch = /*#__PURE__*/React.forwardRef(({
|
|
|
156
156
|
ref: ref || inputRef,
|
|
157
157
|
...rest
|
|
158
158
|
};
|
|
159
|
-
|
|
159
|
+
const applyValidation = error || warning;
|
|
160
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Box, {
|
|
161
|
+
mb: labelHelp ? 0 : 1
|
|
162
|
+
}, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp)), /*#__PURE__*/React.createElement(Box, {
|
|
160
163
|
position: "relative"
|
|
161
164
|
}, /*#__PURE__*/React.createElement(ValidationMessage, {
|
|
162
165
|
error: error,
|
|
163
166
|
warning: warning
|
|
164
|
-
}),
|
|
167
|
+
}), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
|
|
165
168
|
warning: !!(!error && warning)
|
|
166
169
|
}), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
|
|
167
170
|
helpAriaLabel: helpAriaLabel,
|
package/esm/locales/en-gb.js
CHANGED
package/esm/locales/locale.d.ts
CHANGED
package/esm/locales/pl-pl.js
CHANGED
|
@@ -85,7 +85,6 @@ const MultiActionButton = ({
|
|
|
85
85
|
}, marginProps), /*#__PURE__*/_react.default.createElement(_button.default, _extends({
|
|
86
86
|
"aria-haspopup": "true",
|
|
87
87
|
"aria-expanded": showAdditionalButtons,
|
|
88
|
-
"aria-label": "Show more",
|
|
89
88
|
"data-element": "toggle-button",
|
|
90
89
|
key: "toggle-button"
|
|
91
90
|
}, mainButtonProps, {
|
|
@@ -12,6 +12,8 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
12
12
|
"data-element"?: string;
|
|
13
13
|
/** A custom value for the data-role attribute */
|
|
14
14
|
"data-role"?: string;
|
|
15
|
+
/** Prop to specify an aria-label for the component */
|
|
16
|
+
"aria-label"?: string;
|
|
15
17
|
/** Gives the button a disabled state. */
|
|
16
18
|
disabled?: boolean;
|
|
17
19
|
/** Defines an Icon position within the button: "before" | "after" */
|
|
@@ -25,5 +27,5 @@ export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
|
|
|
25
27
|
/** The text to be displayed in the SplitButton. */
|
|
26
28
|
text: string;
|
|
27
29
|
}
|
|
28
|
-
export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => React.JSX.Element;
|
|
30
|
+
export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, "aria-label": ariaLabel, ...rest }: SplitButtonProps) => React.JSX.Element;
|
|
29
31
|
export default SplitButton;
|
|
@@ -19,6 +19,7 @@ var _utils = require("../../style/utils");
|
|
|
19
19
|
var _themes = require("../../style/themes");
|
|
20
20
|
var _useChildButtons = _interopRequireDefault(require("../../hooks/__internal__/useChildButtons"));
|
|
21
21
|
var _splitButton2 = _interopRequireDefault(require("./__internal__/split-button.context"));
|
|
22
|
+
var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
|
|
22
23
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
24
|
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); }
|
|
24
25
|
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; }
|
|
@@ -37,8 +38,10 @@ const SplitButton = ({
|
|
|
37
38
|
text,
|
|
38
39
|
"data-element": dataElement,
|
|
39
40
|
"data-role": dataRole,
|
|
41
|
+
"aria-label": ariaLabel,
|
|
40
42
|
...rest
|
|
41
43
|
}) => {
|
|
44
|
+
const locale = (0, _useLocale.default)();
|
|
42
45
|
const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
|
|
43
46
|
const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
|
|
44
47
|
const toggleButton = (0, _react.useRef)(null);
|
|
@@ -99,7 +102,7 @@ const SplitButton = ({
|
|
|
99
102
|
}, mainButtonProps), text), /*#__PURE__*/_react.default.createElement(_splitButtonToggle.default, _extends({
|
|
100
103
|
"aria-haspopup": "true",
|
|
101
104
|
"aria-expanded": showAdditionalButtons,
|
|
102
|
-
"aria-label":
|
|
105
|
+
"aria-label": ariaLabel || locale.splitButton.ariaLabel(),
|
|
103
106
|
"data-element": "toggle-button",
|
|
104
107
|
key: "toggle-button",
|
|
105
108
|
type: "button",
|
|
@@ -165,12 +165,15 @@ const Switch = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
165
165
|
ref: ref || inputRef,
|
|
166
166
|
...rest
|
|
167
167
|
};
|
|
168
|
-
|
|
168
|
+
const applyValidation = error || warning;
|
|
169
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
170
|
+
mb: labelHelp ? 0 : 1
|
|
171
|
+
}, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
|
|
169
172
|
position: "relative"
|
|
170
173
|
}, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
|
|
171
174
|
error: error,
|
|
172
175
|
warning: warning
|
|
173
|
-
}),
|
|
176
|
+
}), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
|
|
174
177
|
warning: !!(!error && warning)
|
|
175
178
|
}), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
|
|
176
179
|
helpAriaLabel: helpAriaLabel,
|
package/lib/locales/en-gb.js
CHANGED
package/lib/locales/locale.d.ts
CHANGED
package/lib/locales/pl-pl.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "123.
|
|
3
|
+
"version": "123.8.0",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
@@ -200,8 +200,7 @@
|
|
|
200
200
|
"react-dnd-html5-backend": "^15.1.3",
|
|
201
201
|
"react-is": "^17.0.2",
|
|
202
202
|
"react-transition-group": "^4.4.5",
|
|
203
|
-
"styled-system": "^5.1.5"
|
|
204
|
-
"wait-on": "^5.3.0"
|
|
203
|
+
"styled-system": "^5.1.5"
|
|
205
204
|
},
|
|
206
205
|
"config": {
|
|
207
206
|
"commitizen": {
|