carbon-react 154.1.0 → 154.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 (13) hide show
  1. package/esm/__internal__/validations/validation-icon.component.d.ts +3 -12
  2. package/esm/components/password/password.component.js +2 -2
  3. package/esm/components/switch/__internal__/switch-slider.style.js +34 -35
  4. package/esm/components/textbox/textbox.component.d.ts +1 -1
  5. package/esm/locales/en-gb.js +4 -0
  6. package/esm/locales/locale.d.ts +4 -0
  7. package/lib/__internal__/validations/validation-icon.component.d.ts +3 -12
  8. package/lib/components/password/password.component.js +2 -2
  9. package/lib/components/switch/__internal__/switch-slider.style.js +34 -35
  10. package/lib/components/textbox/textbox.component.d.ts +1 -1
  11. package/lib/locales/en-gb.js +4 -0
  12. package/lib/locales/locale.d.ts +4 -0
  13. package/package.json +1 -1
package/esm/__internal__/validations/validation-icon.component.d.ts CHANGED
@@ -1,20 +1,11 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  export interface ValidationProps {
4
- /** Indicate that error has occurred
5
- * Pass string to display icon, tooltip and red border
6
- * Pass true boolean to only display red border
7
- */
4
+ /** Indicate that error has occurred. */
8
5
  error?: boolean | string;
9
- /** Indicate additional information
10
- * Pass string to display icon, tooltip and blue border
11
- * Pass true boolean to only display blue border
12
- */
6
+ /** [Legacy] Indicate additional information. */
13
7
  info?: boolean | string;
14
- /** Indicate that warning has occurred
15
- * Pass string to display icon, tooltip and orange border
16
- * Pass true boolean to only display orange border
17
- */
8
+ /** Indicate that warning has occurred. */
18
9
  warning?: boolean | string;
19
10
  }
20
11
  type TooltipPositions = "top" | "bottom" | "left" | "right";
package/esm/components/password/password.component.js CHANGED
@@ -22,7 +22,7 @@ export const Password = ({
22
22
  type: visibleInput ? "text" : "password",
23
23
  disabled: disabled
24
24
  }, rest, tagComponent("password", rest)), /*#__PURE__*/React.createElement(ButtonMinor, {
25
- "aria-label": visibleInput ? "Hide password" : "Show password",
25
+ "aria-label": visibleInput ? l.password?.ariaLabelHide?.() : l.password?.ariaLabelShow?.(),
26
26
  "aria-controls": internalInputId.current,
27
27
  onClick: () => setPasswordShown(!passwordShown),
28
28
  pr: 1,
@@ -32,7 +32,7 @@ export const Password = ({
32
32
  size: "small",
33
33
  disabled: forceObscurity || disabled,
34
34
  isInPassword: true
35
- }, visibleInput ? "Hide" : "Show")), /*#__PURE__*/React.createElement(HiddenAriaLive, {
35
+ }, visibleInput ? l.password?.buttonLabelHide?.() : l.password?.buttonLabelShow?.())), /*#__PURE__*/React.createElement(HiddenAriaLive, {
36
36
  role: "status",
37
37
  "aria-live": "polite"
38
38
  }, visibleInput ? l.password.ariaLiveShownMessage() : l.password.ariaLiveHiddenMessage()));
package/esm/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -20,8 +20,8 @@ const StyledSwitchSlider = styled.div`
20
20
  position: relative;
21
21
  text-transform: uppercase;
22
22
  top: 0;
23
- width: 100%
24
- z-index: 2;
23
+ width: 100%;
24
+ z-index: 1;
25
25
  border-radius: var(--borderRadius400);
26
26
  border-style: solid;
27
27
  border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
@@ -44,56 +44,55 @@ const StyledSwitchSlider = styled.div`
44
44
  }
45
45
 
46
46
  ${checked && css`
47
- background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
48
- border-color: var(--colorsActionMinorTransparent);
47
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
48
+ border-color: var(--colorsActionMinorTransparent);
49
49
 
50
- &::before {
51
- margin-left: calc(
52
- 100% -
53
- ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
54
- );
55
- background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
56
- }
57
- `}
50
+ &::before {
51
+ margin-left: calc(
52
+ 100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
53
+ );
54
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
55
+ }
56
+ `}
58
57
 
59
58
  ${disabled && !isLoading && css`
60
- border-color: var(--colorsActionDisabled600);
59
+ border-color: var(--colorsActionDisabled600);
60
+
61
+ &::before {
62
+ background-color: var(--colorsActionDisabled600);
63
+ }
64
+
65
+ ${SwitchSliderPanel} {
66
+ color: var(--colorsUtilityYin030);
67
+ }
68
+
69
+ ${checked && css`
70
+ background-color: var(--colorsActionDisabled500);
71
+ border-color: var(--colorsActionMinorTransparent);
61
72
 
62
73
  &::before {
63
- background-color: var(--colorsActionDisabled600);
74
+ background-color: var(--colorsActionMinorYang100);
64
75
  }
65
76
 
66
77
  ${SwitchSliderPanel} {
67
78
  color: var(--colorsUtilityYin030);
68
79
  }
69
-
70
- ${checked && css`
71
- background-color: var(--colorsActionDisabled500);
72
- border-color: var(--colorsActionMinorTransparent);
73
-
74
- &::before {
75
- background-color: var(--colorsActionMinorYang100);
76
- }
77
-
78
- ${SwitchSliderPanel} {
79
- color: var(--colorsUtilityYin030);
80
- }
81
- `}
82
80
  `}
81
+ `}
83
82
 
84
83
  ${isLoading && css`
85
- &::before {
86
- display: none;
87
- }
88
- `}
84
+ &::before {
85
+ display: none;
86
+ }
87
+ `}
89
88
 
90
89
  ${warning && !disabled && css`
91
- border-color: var(--colorsSemanticCaution500);
92
- `}
90
+ border-color: var(--colorsSemanticCaution500);
91
+ `}
93
92
 
94
93
  ${error && !disabled && css`
95
- border-color: var(--colorsSemanticNegative500);
96
- `}
94
+ border-color: var(--colorsSemanticNegative500);
95
+ `}
97
96
 
98
97
  ${StyledValidationIcon} {
99
98
  position: absolute;
package/esm/components/textbox/textbox.component.d.ts CHANGED
@@ -61,7 +61,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
61
61
  labelInline?: boolean;
62
62
  /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). */
63
63
  labelSpacing?: 1 | 2;
64
- /** [Legacy] Label width. */
64
+ /** [Legacy] Label width as a percentage when label is inline. */
65
65
  labelWidth?: number;
66
66
  /** Specify a callback triggered on change */
67
67
  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
package/esm/locales/en-gb.js CHANGED
@@ -146,6 +146,10 @@ const enGB = {
146
146
  ofY: count => `of ${count}`
147
147
  },
148
148
  password: {
149
+ buttonLabelHide: () => "Hide",
150
+ buttonLabelShow: () => "Show",
151
+ ariaLabelHide: () => "Hide password",
152
+ ariaLabelShow: () => "Show password",
149
153
  ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
150
154
  ariaLiveHiddenMessage: () => "Your password is currently hidden."
151
155
  },
package/esm/locales/locale.d.ts CHANGED
@@ -121,6 +121,10 @@ interface Locale {
121
121
  ofY: (count: string | number) => string;
122
122
  };
123
123
  password: {
124
+ buttonLabelHide?: () => string;
125
+ buttonLabelShow?: () => string;
126
+ ariaLabelHide?: () => string;
127
+ ariaLabelShow?: () => string;
124
128
  ariaLiveShownMessage: () => string;
125
129
  ariaLiveHiddenMessage: () => string;
126
130
  };
package/lib/__internal__/validations/validation-icon.component.d.ts CHANGED
@@ -1,20 +1,11 @@
1
1
  import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  export interface ValidationProps {
4
- /** Indicate that error has occurred
5
- * Pass string to display icon, tooltip and red border
6
- * Pass true boolean to only display red border
7
- */
4
+ /** Indicate that error has occurred. */
8
5
  error?: boolean | string;
9
- /** Indicate additional information
10
- * Pass string to display icon, tooltip and blue border
11
- * Pass true boolean to only display blue border
12
- */
6
+ /** [Legacy] Indicate additional information. */
13
7
  info?: boolean | string;
14
- /** Indicate that warning has occurred
15
- * Pass string to display icon, tooltip and orange border
16
- * Pass true boolean to only display orange border
17
- */
8
+ /** Indicate that warning has occurred. */
18
9
  warning?: boolean | string;
19
10
  }
20
11
  type TooltipPositions = "top" | "bottom" | "left" | "right";
package/lib/components/password/password.component.js CHANGED
@@ -31,7 +31,7 @@ const Password = ({
31
31
  type: visibleInput ? "text" : "password",
32
32
  disabled: disabled
33
33
  }, rest, (0, _tags.default)("password", rest)), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
34
- "aria-label": visibleInput ? "Hide password" : "Show password",
34
+ "aria-label": visibleInput ? l.password?.ariaLabelHide?.() : l.password?.ariaLabelShow?.(),
35
35
  "aria-controls": internalInputId.current,
36
36
  onClick: () => setPasswordShown(!passwordShown),
37
37
  pr: 1,
@@ -41,7 +41,7 @@ const Password = ({
41
41
  size: "small",
42
42
  disabled: forceObscurity || disabled,
43
43
  isInPassword: true
44
- }, visibleInput ? "Hide" : "Show")), /*#__PURE__*/_react.default.createElement(_password.HiddenAriaLive, {
44
+ }, visibleInput ? l.password?.buttonLabelHide?.() : l.password?.buttonLabelShow?.())), /*#__PURE__*/_react.default.createElement(_password.HiddenAriaLive, {
45
45
  role: "status",
46
46
  "aria-live": "polite"
47
47
  }, visibleInput ? l.password.ariaLiveShownMessage() : l.password.ariaLiveHiddenMessage()));
package/lib/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -29,8 +29,8 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
29
29
  position: relative;
30
30
  text-transform: uppercase;
31
31
  top: 0;
32
- width: 100%
33
- z-index: 2;
32
+ width: 100%;
33
+ z-index: 1;
34
34
  border-radius: var(--borderRadius400);
35
35
  border-style: solid;
36
36
  border-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor400)"};
@@ -53,56 +53,55 @@ const StyledSwitchSlider = exports.StyledSwitchSlider = _styledComponents.defaul
53
53
  }
54
54
 
55
55
  ${checked && (0, _styledComponents.css)`
56
- background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
57
- border-color: var(--colorsActionMinorTransparent);
56
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYang100)" : "var(--colorsActionMinor500)"};
57
+ border-color: var(--colorsActionMinorTransparent);
58
58
 
59
- &::before {
60
- margin-left: calc(
61
- 100% -
62
- ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
63
- );
64
- background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
65
- }
66
- `}
59
+ &::before {
60
+ margin-left: calc(
61
+ 100% - ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
62
+ );
63
+ background-color: ${isDarkBackground ? "var(--colorsUtilityYin100)" : "var(--colorsActionMinorYang100)"};
64
+ }
65
+ `}
67
66
 
68
67
  ${disabled && !isLoading && (0, _styledComponents.css)`
69
- border-color: var(--colorsActionDisabled600);
68
+ border-color: var(--colorsActionDisabled600);
69
+
70
+ &::before {
71
+ background-color: var(--colorsActionDisabled600);
72
+ }
73
+
74
+ ${_switchSliderPanel.default} {
75
+ color: var(--colorsUtilityYin030);
76
+ }
77
+
78
+ ${checked && (0, _styledComponents.css)`
79
+ background-color: var(--colorsActionDisabled500);
80
+ border-color: var(--colorsActionMinorTransparent);
70
81
 
71
82
  &::before {
72
- background-color: var(--colorsActionDisabled600);
83
+ background-color: var(--colorsActionMinorYang100);
73
84
  }
74
85
 
75
86
  ${_switchSliderPanel.default} {
76
87
  color: var(--colorsUtilityYin030);
77
88
  }
78
-
79
- ${checked && (0, _styledComponents.css)`
80
- background-color: var(--colorsActionDisabled500);
81
- border-color: var(--colorsActionMinorTransparent);
82
-
83
- &::before {
84
- background-color: var(--colorsActionMinorYang100);
85
- }
86
-
87
- ${_switchSliderPanel.default} {
88
- color: var(--colorsUtilityYin030);
89
- }
90
- `}
91
89
  `}
90
+ `}
92
91
 
93
92
  ${isLoading && (0, _styledComponents.css)`
94
- &::before {
95
- display: none;
96
- }
97
- `}
93
+ &::before {
94
+ display: none;
95
+ }
96
+ `}
98
97
 
99
98
  ${warning && !disabled && (0, _styledComponents.css)`
100
- border-color: var(--colorsSemanticCaution500);
101
- `}
99
+ border-color: var(--colorsSemanticCaution500);
100
+ `}
102
101
 
103
102
  ${error && !disabled && (0, _styledComponents.css)`
104
- border-color: var(--colorsSemanticNegative500);
105
- `}
103
+ border-color: var(--colorsSemanticNegative500);
104
+ `}
106
105
 
107
106
  ${_validationIcon.default} {
108
107
  position: absolute;
package/lib/components/textbox/textbox.component.d.ts CHANGED
@@ -61,7 +61,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
61
61
  labelInline?: boolean;
62
62
  /** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8). */
63
63
  labelSpacing?: 1 | 2;
64
- /** [Legacy] Label width. */
64
+ /** [Legacy] Label width as a percentage when label is inline. */
65
65
  labelWidth?: number;
66
66
  /** Specify a callback triggered on change */
67
67
  onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
package/lib/locales/en-gb.js CHANGED
@@ -152,6 +152,10 @@ const enGB = {
152
152
  ofY: count => `of ${count}`
153
153
  },
154
154
  password: {
155
+ buttonLabelHide: () => "Hide",
156
+ buttonLabelShow: () => "Show",
157
+ ariaLabelHide: () => "Hide password",
158
+ ariaLabelShow: () => "Show password",
155
159
  ariaLiveShownMessage: () => "Your password has been shown. Focus on the password input to have it read to you, if it is safe to do so.",
156
160
  ariaLiveHiddenMessage: () => "Your password is currently hidden."
157
161
  },
package/lib/locales/locale.d.ts CHANGED
@@ -121,6 +121,10 @@ interface Locale {
121
121
  ofY: (count: string | number) => string;
122
122
  };
123
123
  password: {
124
+ buttonLabelHide?: () => string;
125
+ buttonLabelShow?: () => string;
126
+ ariaLabelHide?: () => string;
127
+ ariaLabelShow?: () => string;
124
128
  ariaLiveShownMessage: () => string;
125
129
  ariaLiveHiddenMessage: () => string;
126
130
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "154.1.0",
3
+ "version": "154.2.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",