carbon-react 126.8.0 → 126.9.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.
Files changed (15) hide show
  1. package/esm/__internal__/input/input-presentation.component.d.ts +3 -1
  2. package/esm/__internal__/input/input-presentation.component.js +4 -1
  3. package/esm/__internal__/input/input-presentation.style.d.ts +1 -1
  4. package/esm/__internal__/input/input-presentation.style.js +9 -5
  5. package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js +0 -1
  6. package/esm/components/textarea/textarea.component.d.ts +2 -0
  7. package/esm/components/textarea/textarea.component.js +4 -1
  8. package/lib/__internal__/input/input-presentation.component.d.ts +3 -1
  9. package/lib/__internal__/input/input-presentation.component.js +4 -1
  10. package/lib/__internal__/input/input-presentation.style.d.ts +1 -1
  11. package/lib/__internal__/input/input-presentation.style.js +9 -5
  12. package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js +0 -1
  13. package/lib/components/textarea/textarea.component.d.ts +2 -0
  14. package/lib/components/textarea/textarea.component.js +4 -1
  15. package/package.json +1 -1
package/esm/__internal__/input/input-presentation.component.d.ts CHANGED
@@ -25,10 +25,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
25
25
  hasIcon?: boolean;
26
26
  /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
27
27
  borderRadius?: BorderRadiusType | BorderRadiusType[];
28
+ /** Renders with transparent borders. This will not effect focus styling or validation borders */
29
+ hideBorders?: boolean;
28
30
  }
29
31
  export interface InputPresentationProps extends CommonInputPresentationProps {
30
32
  /** Content to be rendered before the input */
31
33
  positionedChildren?: React.ReactNode;
32
34
  }
33
- declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
35
+ declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, hideBorders, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
34
36
  export default InputPresentation;
package/esm/__internal__/input/input-presentation.component.js CHANGED
@@ -10,6 +10,7 @@ const InputPresentation = ({
10
10
  disabled,
11
11
  error,
12
12
  hasIcon,
13
+ hideBorders = false,
13
14
  info,
14
15
  inputWidth,
15
16
  maxWidth,
@@ -59,7 +60,8 @@ const InputPresentation = ({
59
60
  info: info,
60
61
  validationRedesignOptIn: validationRedesignOptIn,
61
62
  hasIcon: hasIcon,
62
- borderRadius: borderRadius
63
+ borderRadius: borderRadius,
64
+ hideBorders: hideBorders
63
65
  }, children));
64
66
  };
65
67
  InputPresentation.propTypes = {
@@ -69,6 +71,7 @@ InputPresentation.propTypes = {
69
71
  "disabled": PropTypes.bool,
70
72
  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
71
73
  "hasIcon": PropTypes.bool,
74
+ "hideBorders": PropTypes.bool,
72
75
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
73
76
  "inputWidth": PropTypes.number,
74
77
  "maxWidth": PropTypes.string,
package/esm/__internal__/input/input-presentation.style.d.ts CHANGED
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
5
+ declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
6
6
  export default InputPresentationStyle;
package/esm/__internal__/input/input-presentation.style.js CHANGED
@@ -44,7 +44,9 @@ function stylingForValidations({
44
44
  const InputPresentationStyle = styled.div`
45
45
  align-items: stretch;
46
46
  background: var(--colorsUtilityYang100);
47
- border: 1px solid var(--colorsUtilityMajor300);
47
+ ${({
48
+ hideBorders
49
+ }) => hideBorders ? `border: 1px solid transparent;` : `border: 1px solid var(--colorsUtilityMajor300);`}
48
50
  box-sizing: border-box;
49
51
  cursor: text;
50
52
  display: flex;
@@ -76,10 +78,11 @@ const InputPresentationStyle = styled.div`
76
78
  `}
77
79
 
78
80
  ${({
79
- disabled
81
+ disabled,
82
+ hideBorders
80
83
  }) => disabled && css`
81
84
  background: var(--colorsUtilityDisabled400);
82
- border-color: var(--colorsUtilityDisabled600);
85
+ border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityDisabled600)`};
83
86
  cursor: not-allowed;
84
87
  `}
85
88
 
@@ -96,10 +99,11 @@ const InputPresentationStyle = styled.div`
96
99
  ${stylingForValidations}
97
100
 
98
101
  ${({
99
- readOnly
102
+ readOnly,
103
+ hideBorders
100
104
  }) => readOnly && css`
101
105
  background-color: var(--colorsUtilityReadOnly400);
102
- border-color: var(--colorsUtilityReadOnly600);
106
+ border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityReadOnly600)`};
103
107
  `}
104
108
 
105
109
  ${({
package/esm/components/tabs/__internal__/tabs-header/tabs-header.style.js CHANGED
@@ -48,7 +48,6 @@ const StyledTabsHeaderList = styled.div`
48
48
  `}
49
49
  cursor: default;
50
50
  list-style: none;
51
- margin: -${outlineWidth};
52
51
  padding: ${outlineWidth};
53
52
  overflow-x: auto;
54
53
  position: relative;
package/esm/components/textarea/textarea.component.d.ts CHANGED
@@ -99,6 +99,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
99
99
  warning?: boolean | string;
100
100
  /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
101
101
  borderRadius?: BorderRadiusType | BorderRadiusType[];
102
+ /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
103
+ hideBorders?: boolean;
102
104
  }
103
105
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
104
106
  export { Textarea as OriginalTextarea };
package/esm/components/textarea/textarea.component.js CHANGED
@@ -59,6 +59,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
59
59
  helpAriaLabel,
60
60
  inputRef,
61
61
  borderRadius,
62
+ hideBorders = false,
62
63
  ...rest
63
64
  }, ref) => {
64
65
  const {
@@ -164,7 +165,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
164
165
  error: error,
165
166
  warning: warning,
166
167
  info: info,
167
- borderRadius: borderRadius
168
+ borderRadius: borderRadius,
169
+ hideBorders: hideBorders
168
170
  }, /*#__PURE__*/React.createElement(Input, _extends({
169
171
  "aria-invalid": !!error,
170
172
  "aria-labelledby": ariaLabelledBy,
@@ -335,6 +337,7 @@ Textarea.propTypes = {
335
337
  "height": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
336
338
  "helpAriaLabel": PropTypes.string,
337
339
  "hidden": PropTypes.bool,
340
+ "hideBorders": PropTypes.bool,
338
341
  "id": PropTypes.string,
339
342
  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
340
343
  "inlist": PropTypes.any,
package/lib/__internal__/input/input-presentation.component.d.ts CHANGED
@@ -25,10 +25,12 @@ export interface CommonInputPresentationProps extends ValidationProps {
25
25
  hasIcon?: boolean;
26
26
  /** Specify a custom border radius. Any valid border-radius design token, or an array of border-radius design tokens. */
27
27
  borderRadius?: BorderRadiusType | BorderRadiusType[];
28
+ /** Renders with transparent borders. This will not effect focus styling or validation borders */
29
+ hideBorders?: boolean;
28
30
  }
29
31
  export interface InputPresentationProps extends CommonInputPresentationProps {
30
32
  /** Content to be rendered before the input */
31
33
  positionedChildren?: React.ReactNode;
32
34
  }
33
- declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
35
+ declare const InputPresentation: ({ align, borderRadius, children, disabled, error, hasIcon, hideBorders, info, inputWidth, maxWidth, positionedChildren, prefix, readOnly, size, warning, }: InputPresentationProps) => JSX.Element;
34
36
  export default InputPresentation;
package/lib/__internal__/input/input-presentation.component.js CHANGED
@@ -19,6 +19,7 @@ const InputPresentation = ({
19
19
  disabled,
20
20
  error,
21
21
  hasIcon,
22
+ hideBorders = false,
22
23
  info,
23
24
  inputWidth,
24
25
  maxWidth,
@@ -68,7 +69,8 @@ const InputPresentation = ({
68
69
  info: info,
69
70
  validationRedesignOptIn: validationRedesignOptIn,
70
71
  hasIcon: hasIcon,
71
- borderRadius: borderRadius
72
+ borderRadius: borderRadius,
73
+ hideBorders: hideBorders
72
74
  }, children));
73
75
  };
74
76
  InputPresentation.propTypes = {
@@ -78,6 +80,7 @@ InputPresentation.propTypes = {
78
80
  "disabled": _propTypes.default.bool,
79
81
  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
80
82
  "hasIcon": _propTypes.default.bool,
83
+ "hideBorders": _propTypes.default.bool,
81
84
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
82
85
  "inputWidth": _propTypes.default.number,
83
86
  "maxWidth": _propTypes.default.string,
package/lib/__internal__/input/input-presentation.style.d.ts CHANGED
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
2
2
  import { InputContextProps } from "../input-behaviour";
3
3
  import { CarbonProviderProps } from "../../components/carbon-provider";
4
4
  export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
5
- declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
5
+ declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
6
6
  export default InputPresentationStyle;
package/lib/__internal__/input/input-presentation.style.js CHANGED
@@ -53,7 +53,9 @@ function stylingForValidations({
53
53
  const InputPresentationStyle = _styledComponents.default.div`
54
54
  align-items: stretch;
55
55
  background: var(--colorsUtilityYang100);
56
- border: 1px solid var(--colorsUtilityMajor300);
56
+ ${({
57
+ hideBorders
58
+ }) => hideBorders ? `border: 1px solid transparent;` : `border: 1px solid var(--colorsUtilityMajor300);`}
57
59
  box-sizing: border-box;
58
60
  cursor: text;
59
61
  display: flex;
@@ -85,10 +87,11 @@ const InputPresentationStyle = _styledComponents.default.div`
85
87
  `}
86
88
 
87
89
  ${({
88
- disabled
90
+ disabled,
91
+ hideBorders
89
92
  }) => disabled && (0, _styledComponents.css)`
90
93
  background: var(--colorsUtilityDisabled400);
91
- border-color: var(--colorsUtilityDisabled600);
94
+ border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityDisabled600)`};
92
95
  cursor: not-allowed;
93
96
  `}
94
97
 
@@ -105,10 +108,11 @@ const InputPresentationStyle = _styledComponents.default.div`
105
108
  ${stylingForValidations}
106
109
 
107
110
  ${({
108
- readOnly
111
+ readOnly,
112
+ hideBorders
109
113
  }) => readOnly && (0, _styledComponents.css)`
110
114
  background-color: var(--colorsUtilityReadOnly400);
111
- border-color: var(--colorsUtilityReadOnly600);
115
+ border-color: ${hideBorders ? `transparent` : `var(--colorsUtilityReadOnly600)`};
112
116
  `}
113
117
 
114
118
  ${({
package/lib/components/tabs/__internal__/tabs-header/tabs-header.style.js CHANGED
@@ -57,7 +57,6 @@ const StyledTabsHeaderList = exports.StyledTabsHeaderList = _styledComponents.de
57
57
  `}
58
58
  cursor: default;
59
59
  list-style: none;
60
- margin: -${outlineWidth};
61
60
  padding: ${outlineWidth};
62
61
  overflow-x: auto;
63
62
  position: relative;
package/lib/components/textarea/textarea.component.d.ts CHANGED
@@ -99,6 +99,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
99
99
  warning?: boolean | string;
100
100
  /** Specify a custom border radius for the component. Any valid border-radius design token, or an array of border-radius design tokens. */
101
101
  borderRadius?: BorderRadiusType | BorderRadiusType[];
102
+ /** Hides the borders for the component. Please note that validation and focus styling will still be applied */
103
+ hideBorders?: boolean;
102
104
  }
103
105
  export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
104
106
  export { Textarea as OriginalTextarea };
package/lib/components/textarea/textarea.component.js CHANGED
@@ -68,6 +68,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
68
68
  helpAriaLabel,
69
69
  inputRef,
70
70
  borderRadius,
71
+ hideBorders = false,
71
72
  ...rest
72
73
  }, ref) => {
73
74
  const {
@@ -173,7 +174,8 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
173
174
  error: error,
174
175
  warning: warning,
175
176
  info: info,
176
- borderRadius: borderRadius
177
+ borderRadius: borderRadius,
178
+ hideBorders: hideBorders
177
179
  }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
178
180
  "aria-invalid": !!error,
179
181
  "aria-labelledby": ariaLabelledBy,
@@ -344,6 +346,7 @@ Textarea.propTypes = {
344
346
  "height": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
345
347
  "helpAriaLabel": _propTypes.default.string,
346
348
  "hidden": _propTypes.default.bool,
349
+ "hideBorders": _propTypes.default.bool,
347
350
  "id": _propTypes.default.string,
348
351
  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
349
352
  "inlist": _propTypes.default.any,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "126.8.0",
3
+ "version": "126.9.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",