@carbon/ibm-products 1.12.0 → 1.13.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/css/index-full-carbon.css +60 -13
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +6 -6
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +14 -6
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +60 -13
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +5 -5
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +60 -13
- package/css/index.css.map +1 -1
- package/css/index.min.css +6 -6
- package/css/index.min.css.map +1 -1
- package/es/components/ActionBar/ActionBar.js +3 -1
- package/es/components/ActionBar/ActionBarOverflowItems.js +5 -3
- package/es/components/AddSelect/AddSelectList.js +27 -1
- package/es/components/AddSelect/AddSelectSidebar.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +87 -31
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +87 -33
- package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -4
- package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
- package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
- package/es/components/TagSet/TagSet.js +12 -3
- package/es/components/UserProfileImage/UserProfileImage.js +37 -9
- package/lib/components/ActionBar/ActionBar.js +3 -1
- package/lib/components/ActionBar/ActionBarOverflowItems.js +5 -3
- package/lib/components/AddSelect/AddSelectList.js +28 -1
- package/lib/components/AddSelect/AddSelectSidebar.js +15 -11
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +89 -30
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +86 -33
- package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
- package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
- package/lib/components/TagSet/TagSet.js +12 -3
- package/lib/components/UserProfileImage/UserProfileImage.js +37 -9
- package/package.json +9 -9
- package/scss/components/AddSelect/_add-select.scss +14 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +37 -5
- package/scss/components/HTTPErrors/_http-errors.scss +16 -16
- package/scss/components/PageHeader/_page-header.scss +4 -0
@@ -24,10 +24,9 @@ var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
|
|
24
24
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
25
25
|
xmlns: "http://www.w3.org/2000/svg",
|
26
26
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
27
|
-
width: 1584,
|
28
|
-
height: 916,
|
29
27
|
viewBox: "0 0 1584 916",
|
30
|
-
className: className
|
28
|
+
className: className,
|
29
|
+
preserveAspectRatio: "xMinYMax meet"
|
31
30
|
}, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
|
32
31
|
id: "prefix__clip-path"
|
33
32
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
@@ -57,7 +57,7 @@ var allTagsModalSearchThreshold = 10; // Default values for props
|
|
57
57
|
|
58
58
|
var defaults = {
|
59
59
|
align: 'start',
|
60
|
-
allTagsModalTarget: document.body,
|
60
|
+
// allTagsModalTarget: document.body,
|
61
61
|
overflowAlign: 'center',
|
62
62
|
overflowDirection: 'bottom'
|
63
63
|
};
|
@@ -65,8 +65,7 @@ var defaults = {
|
|
65
65
|
var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
66
66
|
var _ref$align = _ref.align,
|
67
67
|
align = _ref$align === void 0 ? defaults.align : _ref$align,
|
68
|
-
|
69
|
-
allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
|
68
|
+
allTagsModalTargetIn = _ref.allTagsModalTarget,
|
70
69
|
className = _ref.className,
|
71
70
|
maxVisible = _ref.maxVisible,
|
72
71
|
_ref$overflowAlign = _ref.overflowAlign,
|
@@ -113,10 +112,20 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
113
112
|
|
114
113
|
var overflowTag = (0, _react.useRef)(null);
|
115
114
|
|
115
|
+
var _useState11 = (0, _react.useState)(null),
|
116
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
117
|
+
allTagsModalTarget = _useState12[0],
|
118
|
+
setAllTagsModalTarget = _useState12[1];
|
119
|
+
|
116
120
|
var handleShowAllClick = function handleShowAllClick() {
|
117
121
|
setShowAllModalOpen(true);
|
118
122
|
};
|
119
123
|
|
124
|
+
(0, _react.useEffect)(function () {
|
125
|
+
var _document;
|
126
|
+
|
127
|
+
setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
|
128
|
+
}, [allTagsModalTargetIn]);
|
120
129
|
(0, _react.useEffect)(function () {
|
121
130
|
var newSizingTags = []; // create sizing tags
|
122
131
|
|
@@ -27,7 +27,7 @@ var _iconsReact = require("@carbon/icons-react");
|
|
27
27
|
|
28
28
|
var _carbonComponentsReact = require("carbon-components-react");
|
29
29
|
|
30
|
-
var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
30
|
+
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
31
31
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
32
32
|
var blockClass = "".concat(_settings.pkg.prefix, "--user-profile-image");
|
33
33
|
var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
|
@@ -40,6 +40,7 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
40
40
|
var backgroundColor = _ref.backgroundColor,
|
41
41
|
className = _ref.className,
|
42
42
|
kind = _ref.kind,
|
43
|
+
icon = _ref.icon,
|
43
44
|
initials = _ref.initials,
|
44
45
|
image = _ref.image,
|
45
46
|
imageDescription = _ref.imageDescription,
|
@@ -70,18 +71,40 @@ var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
|
|
70
71
|
return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
|
71
72
|
};
|
72
73
|
|
73
|
-
var
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
74
|
+
var getFillItem = function getFillItem() {
|
75
|
+
if (image) {
|
76
|
+
return function () {
|
77
|
+
return /*#__PURE__*/_react.default.createElement("img", {
|
78
|
+
alt: imageDescription,
|
79
|
+
src: image,
|
80
|
+
className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
|
81
|
+
});
|
82
|
+
};
|
83
|
+
}
|
84
|
+
|
85
|
+
if (initials) {
|
86
|
+
return formatInitials;
|
87
|
+
}
|
88
|
+
|
89
|
+
if (kind && size) {
|
90
|
+
return icons[kind][size];
|
91
|
+
}
|
92
|
+
|
93
|
+
return icon;
|
94
|
+
}; // if user doesn't provide a color just generate a random one
|
95
|
+
|
96
|
+
|
97
|
+
var getRandomColor = function getRandomColor() {
|
98
|
+
var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
|
99
|
+
return colors[Math.floor(Math.random() * colors.length)];
|
100
|
+
};
|
101
|
+
|
102
|
+
var FillItem = getFillItem();
|
80
103
|
|
81
104
|
var renderUserProfileImage = function renderUserProfileImage() {
|
82
105
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
83
106
|
ref: ref,
|
84
|
-
className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
|
107
|
+
className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
|
85
108
|
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
|
86
109
|
};
|
87
110
|
|
@@ -107,6 +130,11 @@ UserProfileImage.propTypes = {
|
|
107
130
|
*/
|
108
131
|
className: _propTypes.default.string,
|
109
132
|
|
133
|
+
/**
|
134
|
+
* Provide a custom icon to use if you need to use an icon other than the included ones
|
135
|
+
*/
|
136
|
+
icon: _propTypes.default.object,
|
137
|
+
|
110
138
|
/**
|
111
139
|
* When passing the image prop, supply a full path to the image to be displayed.
|
112
140
|
*/
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.
|
4
|
+
"version": "1.13.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -60,11 +60,11 @@
|
|
60
60
|
"fs-extra": "^10.0.1",
|
61
61
|
"glob": "^7.2.0",
|
62
62
|
"jest": "^27.5.1",
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.23.
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.23.14",
|
64
64
|
"npm-check-updates": "^12.5.4",
|
65
65
|
"npm-run-all": "^4.1.5",
|
66
66
|
"rimraf": "^3.0.2",
|
67
|
-
"sass": "^1.49.
|
67
|
+
"sass": "^1.49.10",
|
68
68
|
"yargs": "^17.4.0"
|
69
69
|
},
|
70
70
|
"dependencies": {
|
@@ -76,17 +76,17 @@
|
|
76
76
|
},
|
77
77
|
"peerDependencies": {
|
78
78
|
"@carbon/colors": "^10.37.1",
|
79
|
-
"@carbon/icons-react": "^10.
|
79
|
+
"@carbon/icons-react": "^10.49.0",
|
80
80
|
"@carbon/import-once": "^10.7.0",
|
81
81
|
"@carbon/layout": "^10.37.1",
|
82
82
|
"@carbon/motion": "^10.29.0",
|
83
|
-
"@carbon/themes": "^10.
|
84
|
-
"@carbon/type": "^10.
|
85
|
-
"carbon-components": "^10.
|
86
|
-
"carbon-components-react": "^7.
|
83
|
+
"@carbon/themes": "^10.54.0",
|
84
|
+
"@carbon/type": "^10.44.0",
|
85
|
+
"carbon-components": "^10.56.0",
|
86
|
+
"carbon-components-react": "^7.56.0",
|
87
87
|
"carbon-icons": "^7.0.7",
|
88
88
|
"react": "^16.8.6 || ^17.0.1",
|
89
89
|
"react-dom": "^16.8.6 || ^17.0.1"
|
90
90
|
},
|
91
|
-
"gitHead": "
|
91
|
+
"gitHead": "553ac70187737c4946fc4ffd98fdfcafcc258ab2"
|
92
92
|
}
|
@@ -73,10 +73,14 @@
|
|
73
73
|
align-items: center;
|
74
74
|
}
|
75
75
|
|
76
|
+
&-checkbox-label-wrapper {
|
77
|
+
display: flex;
|
78
|
+
margin-left: $spacing-03;
|
79
|
+
}
|
80
|
+
|
76
81
|
&-checkbox-label-text {
|
77
82
|
display: flex;
|
78
83
|
flex-direction: column;
|
79
|
-
padding-left: $spacing-05;
|
80
84
|
}
|
81
85
|
|
82
86
|
&-checkbox-wrapper.#{$carbon-prefix}--form-item {
|
@@ -86,6 +90,14 @@
|
|
86
90
|
&-checkbox-wrapper .#{$carbon-prefix}--checkbox-label-text {
|
87
91
|
display: none;
|
88
92
|
}
|
93
|
+
|
94
|
+
&-cell-avatar {
|
95
|
+
margin-right: $spacing-03;
|
96
|
+
}
|
97
|
+
|
98
|
+
&-cell-icon {
|
99
|
+
margin-right: $spacing-03;
|
100
|
+
}
|
89
101
|
}
|
90
102
|
|
91
103
|
// sidebar
|
@@ -253,7 +265,7 @@
|
|
253
265
|
}
|
254
266
|
|
255
267
|
.#{$block-class} .#{$carbon-prefix}--checkbox-label-text {
|
256
|
-
padding-left: $spacing-
|
268
|
+
padding-left: $spacing-03;
|
257
269
|
}
|
258
270
|
}
|
259
271
|
|
@@ -22,8 +22,12 @@
|
|
22
22
|
@mixin data-spreadsheet {
|
23
23
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
24
24
|
$block-class: #{$pkg-prefix}--data-spreadsheet;
|
25
|
+
$body-cell-background: $field-01;
|
26
|
+
$header-cell-background: $ui-03;
|
25
27
|
|
26
28
|
.#{$block-class} {
|
29
|
+
--#{$block-class}--total-width: 0;
|
30
|
+
|
27
31
|
display: inline-block;
|
28
32
|
border-spacing: 0;
|
29
33
|
|
@@ -60,8 +64,13 @@
|
|
60
64
|
.#{$block-class}__td-th.#{$block-class}__td {
|
61
65
|
@include set-header-borders();
|
62
66
|
|
63
|
-
background-color: $
|
67
|
+
background-color: $header-cell-background;
|
64
68
|
cursor: pointer;
|
69
|
+
|
70
|
+
&:hover,
|
71
|
+
&:focus {
|
72
|
+
background-color: $hover-selected-ui;
|
73
|
+
}
|
65
74
|
}
|
66
75
|
.#{$block-class}__td-th.#{$block-class}__td {
|
67
76
|
@include carbon--font-weight('semibold');
|
@@ -74,8 +83,9 @@
|
|
74
83
|
.#{$block-class}__td {
|
75
84
|
@include set-body-borders();
|
76
85
|
|
86
|
+
overflow: hidden;
|
77
87
|
margin: 0;
|
78
|
-
background-color: $
|
88
|
+
background-color: $body-cell-background;
|
79
89
|
cursor: cell;
|
80
90
|
text-align: left;
|
81
91
|
}
|
@@ -91,14 +101,34 @@
|
|
91
101
|
position: absolute;
|
92
102
|
z-index: 4;
|
93
103
|
display: none;
|
104
|
+
overflow: hidden;
|
94
105
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
95
106
|
padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
|
96
|
-
background-color: $
|
107
|
+
background-color: $body-cell-background;
|
97
108
|
resize: none;
|
98
109
|
&.#{$carbon-prefix}--text-area {
|
99
110
|
min-width: initial;
|
100
111
|
min-height: initial;
|
101
112
|
}
|
113
|
+
&.#{$block-class}__cell-editor--active {
|
114
|
+
outline: $spacing-01 solid $interactive-01;
|
115
|
+
outline-offset: -2px;
|
116
|
+
}
|
117
|
+
}
|
118
|
+
.#{$block-class}__cell-editor-ruler {
|
119
|
+
@include carbon--type-style('body-short-01');
|
120
|
+
|
121
|
+
position: absolute;
|
122
|
+
overflow: hidden;
|
123
|
+
width: fit-content;
|
124
|
+
max-width: var(--#{$block-class}--total-width);
|
125
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
126
|
+
padding: 0 calc(#{$spacing-03} + 1px) 0 $spacing-03;
|
127
|
+
visibility: hidden;
|
128
|
+
|
129
|
+
&:focus {
|
130
|
+
outline: $spacing-01 solid $interactive-01;
|
131
|
+
}
|
102
132
|
}
|
103
133
|
.#{$block-class}__active-cell--highlight {
|
104
134
|
@include carbon--type-style('body-short-01');
|
@@ -107,13 +137,15 @@
|
|
107
137
|
position: absolute;
|
108
138
|
z-index: 3;
|
109
139
|
display: none;
|
140
|
+
overflow: hidden;
|
110
141
|
// Could be fixed by using border-right but the fact that
|
111
142
|
// this element is positioned absolute prevents that from working
|
112
143
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
113
144
|
padding-right: calc(#{$spacing-03} - 1px);
|
114
145
|
padding-bottom: $spacing-01;
|
115
146
|
border: $spacing-01 solid $interactive-01;
|
116
|
-
background-color: $
|
147
|
+
background-color: $body-cell-background;
|
148
|
+
color: $text-01;
|
117
149
|
text-align: left;
|
118
150
|
|
119
151
|
&[data-active-row-index='header'],
|
@@ -146,7 +178,7 @@
|
|
146
178
|
}
|
147
179
|
.#{$block-class}__th--active-header,
|
148
180
|
.#{$block-class}__td-th--active-header.#{$block-class}__td {
|
149
|
-
background-color: $ui
|
181
|
+
background-color: $hover-selected-ui;
|
150
182
|
}
|
151
183
|
}
|
152
184
|
}
|
@@ -18,14 +18,15 @@
|
|
18
18
|
$block-class: #{$pkg-prefix}--http-errors;
|
19
19
|
|
20
20
|
.#{$block-class} .#{$block-class}__content {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
transform: translate(-50%, -150%);
|
27
|
-
}
|
21
|
+
position: fixed;
|
22
|
+
z-index: 2;
|
23
|
+
top: 50%;
|
24
|
+
left: 50%;
|
25
|
+
transform: translate(-50%, -75%);
|
28
26
|
@include carbon--breakpoint(md) {
|
27
|
+
transform: translate(-50%, -100%);
|
28
|
+
}
|
29
|
+
@include carbon--breakpoint(lg) {
|
29
30
|
transform: translate(-50%, -50%);
|
30
31
|
}
|
31
32
|
}
|
@@ -54,15 +55,14 @@
|
|
54
55
|
margin-bottom: $spacing-02;
|
55
56
|
}
|
56
57
|
.#{$block-class} .#{$block-class}__image {
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
transform: translate(-50%, -50%);
|
58
|
+
position: fixed;
|
59
|
+
bottom: 0;
|
60
|
+
left: 0;
|
61
|
+
width: 100%;
|
62
|
+
max-height: 100%;
|
63
|
+
@include carbon--breakpoint-down(md) {
|
64
|
+
left: 10%;
|
65
|
+
transform: scale(1.5);
|
66
66
|
}
|
67
67
|
}
|
68
68
|
}
|
@@ -356,6 +356,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
356
356
|
.#{$block-class}__title-row {
|
357
357
|
margin-top: 0;
|
358
358
|
margin-bottom: 0;
|
359
|
+
transform: translateY(
|
360
|
+
$spacing-01
|
361
|
+
); // position adjusted for editable title focus outline
|
359
362
|
|
360
363
|
@include carbon--breakpoint-up('md') {
|
361
364
|
flex-wrap: nowrap; /* assume enough space */
|
@@ -363,6 +366,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
|
|
363
366
|
|
364
367
|
&.#{$block-class}__title-row--under-action-bar {
|
365
368
|
margin-top: $spacing-05;
|
369
|
+
transform: translateY(0); // Not needed under action bar
|
366
370
|
}
|
367
371
|
|
368
372
|
+ .#{$block-class}__last-row-buffer--active {
|