carbon-react 132.0.0 → 132.1.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/components/file-input/__internal__/file-upload-status/file-upload-status.component.js +1 -4
  2. package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js +1 -1
  3. package/esm/components/file-input/file-input.component.d.ts +3 -3
  4. package/esm/components/file-input/file-input.component.js +5 -4
  5. package/esm/components/file-input/file-input.style.d.ts +1 -0
  6. package/esm/components/file-input/file-input.style.js +6 -4
  7. package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js +1 -4
  8. package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js +1 -1
  9. package/lib/components/file-input/file-input.component.d.ts +3 -3
  10. package/lib/components/file-input/file-input.component.js +5 -4
  11. package/lib/components/file-input/file-input.style.d.ts +1 -0
  12. package/lib/components/file-input/file-input.style.js +6 -4
  13. package/package.json +1 -1
package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js CHANGED
@@ -24,10 +24,7 @@ export const FileUploadStatus = ({
24
24
  switch (status) {
25
25
  case "uploading":
26
26
  buttonText = locale.fileInput.actions.cancel();
27
- progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, {
28
- size: "small"
29
- }) : /*#__PURE__*/React.createElement(ProgressTracker, {
30
- size: "small",
27
+ progressBar = statusProps.progress === undefined ? /*#__PURE__*/React.createElement(LoaderBar, null) : /*#__PURE__*/React.createElement(ProgressTracker, {
31
28
  progress: statusProps.progress,
32
29
  length: "100%"
33
30
  });
package/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js CHANGED
@@ -76,7 +76,6 @@ export const StyledFileUploadStatus = styled.div`
76
76
  `;
77
77
  }}
78
78
  border-radius: var(--borderRadius050);
79
- width: 100%;
80
79
 
81
80
  ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
82
81
  border-radius: var(--borderRadius050);
@@ -93,5 +92,6 @@ export const StyledFileUploadStatus = styled.div`
93
92
 
94
93
  ${LoaderBarInnerBar} {
95
94
  background-color: var(--colorsSemanticNeutral500);
95
+ border-radius: var(--borderRadius050);
96
96
  }
97
97
  `;
package/esm/components/file-input/file-input.component.d.ts CHANGED
@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
19
19
  isVertical?: boolean;
20
20
  /** Label content */
21
21
  label?: string;
22
- /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
22
+ /** A valid CSS string for the max-height CSS property. */
23
23
  maxHeight?: string;
24
24
  /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
25
25
  maxWidth?: string;
26
- /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
26
+ /** A valid CSS string for the min-height CSS property. */
27
27
  minHeight?: string;
28
- /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
28
+ /** A valid CSS string for the min-width CSS property. */
29
29
  minWidth?: string;
30
30
  /** onChange event handler. Accepts a list of all files currently entered to the input. */
31
31
  onChange: (files: FileList) => void;
package/esm/components/file-input/file-input.component.js CHANGED
@@ -27,8 +27,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
27
27
  isVertical,
28
28
  maxHeight,
29
29
  maxWidth,
30
- minHeight = "40px",
31
- minWidth = "256px",
30
+ minHeight,
31
+ minWidth = "280px",
32
32
  name,
33
33
  onChange,
34
34
  required,
@@ -40,7 +40,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
40
40
  const textOnButton = buttonText || locale.fileInput.selectFile();
41
41
  const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
42
42
  const sizeProps = {
43
- maxHeight: maxHeight || (isVertical ? undefined : minHeight),
43
+ maxHeight: maxHeight || undefined,
44
44
  maxWidth: maxWidth || minWidth,
45
45
  minHeight,
46
46
  minWidth
@@ -137,7 +137,8 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
137
137
  error: error,
138
138
  onDragLeave: onDragLeave,
139
139
  onDragOver: onDragOver,
140
- onDrop: onDrop
140
+ onDrop: onDrop,
141
+ isVertical: isVertical
141
142
  }, sizeProps), /*#__PURE__*/React.createElement(ButtonMinor, {
142
143
  buttonType: "primary",
143
144
  onClick: onSelectFileClick
package/esm/components/file-input/file-input.style.d.ts CHANGED
@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
9
9
  maxWidth?: string;
10
10
  minHeight?: string;
11
11
  minWidth?: string;
12
+ isVertical?: boolean;
12
13
  }
13
14
  export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
14
15
  export {};
package/esm/components/file-input/file-input.style.js CHANGED
@@ -15,8 +15,9 @@ export const StyledFileInputPresentation = styled.div`
15
15
  min-height: ${minHeight};
16
16
  max-width: ${maxWidth};
17
17
  ${!hasUploadStatus && css`
18
- padding: var(--spacing150);
18
+ padding: 11px; /* not 12px to account for 1px border */
19
19
  max-height: ${maxHeight};
20
+ box-sizing: border-box;
20
21
  `}
21
22
  `}
22
23
 
@@ -24,7 +25,8 @@ export const StyledFileInputPresentation = styled.div`
24
25
  hasUploadStatus,
25
26
  isDraggedOver,
26
27
  isDraggingFile,
27
- error
28
+ error,
29
+ isVertical
28
30
  }) => {
29
31
  const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
30
32
  let borderColorToken = "colorsUtilityMajor300";
@@ -40,13 +42,13 @@ export const StyledFileInputPresentation = styled.div`
40
42
  }
41
43
  return !hasUploadStatus && css`
42
44
  display: flex;
43
- flex-direction: column;
45
+ ${isVertical && "flex-direction: column;"}
44
46
  flex-wrap: wrap;
45
47
  justify-content: center;
46
48
  align-content: center;
47
49
  align-items: center;
48
50
  text-align: center;
49
- gap: var(--spacing150);
51
+ gap: var(--spacing100);
50
52
  border-radius: var(--borderRadius050);
51
53
  border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
52
54
  background: var(--${backgroundColorToken});
package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js CHANGED
@@ -31,10 +31,7 @@ const FileUploadStatus = ({
31
31
  switch (status) {
32
32
  case "uploading":
33
33
  buttonText = locale.fileInput.actions.cancel();
34
- progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
35
- size: "small"
36
- }) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
37
- size: "small",
34
+ progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, null) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
38
35
  progress: statusProps.progress,
39
36
  length: "100%"
40
37
  });
package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js CHANGED
@@ -85,7 +85,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
85
85
  `;
86
86
  }}
87
87
  border-radius: var(--borderRadius050);
88
- width: 100%;
89
88
 
90
89
  ${_progressTracker.StyledProgressBar}, ${_progressTracker.InnerBar} {
91
90
  border-radius: var(--borderRadius050);
@@ -102,5 +101,6 @@ const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponent
102
101
 
103
102
  ${_loaderBar.InnerBar} {
104
103
  background-color: var(--colorsSemanticNeutral500);
104
+ border-radius: var(--borderRadius050);
105
105
  }
106
106
  `;
package/lib/components/file-input/file-input.component.d.ts CHANGED
@@ -19,13 +19,13 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
19
19
  isVertical?: boolean;
20
20
  /** Label content */
21
21
  label?: string;
22
- /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
22
+ /** A valid CSS string for the max-height CSS property. */
23
23
  maxHeight?: string;
24
24
  /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
25
25
  maxWidth?: string;
26
- /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
26
+ /** A valid CSS string for the min-height CSS property. */
27
27
  minHeight?: string;
28
- /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
28
+ /** A valid CSS string for the min-width CSS property. */
29
29
  minWidth?: string;
30
30
  /** onChange event handler. Accepts a list of all files currently entered to the input. */
31
31
  onChange: (files: FileList) => void;
package/lib/components/file-input/file-input.component.js CHANGED
@@ -36,8 +36,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
36
36
  isVertical,
37
37
  maxHeight,
38
38
  maxWidth,
39
- minHeight = "40px",
40
- minWidth = "256px",
39
+ minHeight,
40
+ minWidth = "280px",
41
41
  name,
42
42
  onChange,
43
43
  required,
@@ -49,7 +49,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
49
49
  const textOnButton = buttonText || locale.fileInput.selectFile();
50
50
  const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
51
51
  const sizeProps = {
52
- maxHeight: maxHeight || (isVertical ? undefined : minHeight),
52
+ maxHeight: maxHeight || undefined,
53
53
  maxWidth: maxWidth || minWidth,
54
54
  minHeight,
55
55
  minWidth
@@ -146,7 +146,8 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
146
146
  error: error,
147
147
  onDragLeave: onDragLeave,
148
148
  onDragOver: onDragOver,
149
- onDrop: onDrop
149
+ onDrop: onDrop,
150
+ isVertical: isVertical
150
151
  }, sizeProps), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
151
152
  buttonType: "primary",
152
153
  onClick: onSelectFileClick
package/lib/components/file-input/file-input.style.d.ts CHANGED
@@ -9,6 +9,7 @@ interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"
9
9
  maxWidth?: string;
10
10
  minHeight?: string;
11
11
  minWidth?: string;
12
+ isVertical?: boolean;
12
13
  }
13
14
  export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
14
15
  export {};
package/lib/components/file-input/file-input.style.js CHANGED
@@ -24,8 +24,9 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
24
24
  min-height: ${minHeight};
25
25
  max-width: ${maxWidth};
26
26
  ${!hasUploadStatus && (0, _styledComponents.css)`
27
- padding: var(--spacing150);
27
+ padding: 11px; /* not 12px to account for 1px border */
28
28
  max-height: ${maxHeight};
29
+ box-sizing: border-box;
29
30
  `}
30
31
  `}
31
32
 
@@ -33,7 +34,8 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
33
34
  hasUploadStatus,
34
35
  isDraggedOver,
35
36
  isDraggingFile,
36
- error
37
+ error,
38
+ isVertical
37
39
  }) => {
38
40
  const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
39
41
  let borderColorToken = "colorsUtilityMajor300";
@@ -49,13 +51,13 @@ const StyledFileInputPresentation = exports.StyledFileInputPresentation = _style
49
51
  }
50
52
  return !hasUploadStatus && (0, _styledComponents.css)`
51
53
  display: flex;
52
- flex-direction: column;
54
+ ${isVertical && "flex-direction: column;"}
53
55
  flex-wrap: wrap;
54
56
  justify-content: center;
55
57
  align-content: center;
56
58
  align-items: center;
57
59
  text-align: center;
58
- gap: var(--spacing150);
60
+ gap: var(--spacing100);
59
61
  border-radius: var(--borderRadius050);
60
62
  border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
61
63
  background: var(--${backgroundColorToken});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "132.0.0",
3
+ "version": "132.1.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",