@carbon/ibm-products 2.11.2 → 2.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +40 -7
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +36 -7
- 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 +40 -7
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +40 -7
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/Card/Card.js +9 -1
- package/es/components/Card/CardFooter.js +8 -2
- package/es/components/Card/CardHeader.js +8 -2
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/es/components/CreateFullPage/CreateFullPage.js +66 -8
- package/es/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +7 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +18 -17
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +104 -18
- package/es/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +68 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/constants.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +120 -54
- package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +9 -3
- package/es/components/Datagrid/useActionsColumn.js +0 -2
- package/es/components/Datagrid/useFiltering.js +4 -1
- package/es/components/Datagrid/utils/DatagridActions.js +2 -3
- package/es/components/SimpleHeader/SimpleHeader.docs-page.js +17 -0
- package/es/components/SimpleHeader/SimpleHeader.js +92 -0
- package/es/components/SimpleHeader/index.js +8 -0
- package/es/components/StatusIcon/StatusIcon.js +13 -13
- package/es/components/Tearsheet/Tearsheet.js +2 -1
- package/es/components/Tearsheet/TearsheetNarrow.js +2 -1
- package/es/components/Tearsheet/TearsheetShell.js +2 -1
- package/es/global/js/utils/StoryDocsPage.js +3 -3
- package/lib/components/Card/Card.js +9 -1
- package/lib/components/Card/CardFooter.js +8 -2
- package/lib/components/Card/CardHeader.js +8 -2
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +6 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +65 -7
- package/lib/components/Datagrid/Datagrid/Datagrid.js +2 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +6 -0
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +13 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +31 -10
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +40 -38
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js +109 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/OverflowCheckboxes.js +79 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/constants.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +136 -70
- package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +10 -4
- package/lib/components/Datagrid/useActionsColumn.js +0 -2
- package/lib/components/Datagrid/useFiltering.js +4 -1
- package/lib/components/Datagrid/utils/DatagridActions.js +2 -3
- package/lib/components/SimpleHeader/SimpleHeader.docs-page.js +28 -0
- package/lib/components/SimpleHeader/SimpleHeader.js +102 -0
- package/lib/components/SimpleHeader/index.js +12 -0
- package/lib/components/StatusIcon/StatusIcon.js +12 -12
- package/lib/components/Tearsheet/Tearsheet.js +1 -1
- package/lib/components/Tearsheet/TearsheetNarrow.js +1 -1
- package/lib/components/Tearsheet/TearsheetShell.js +4 -2
- package/lib/global/js/utils/StoryDocsPage.js +3 -3
- package/package.json +2 -2
- package/scss/components/Card/_card.scss +1 -1
- package/scss/components/CreateFullPage/_create-full-page.scss +11 -2
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/ProductiveCard/_productive-card.scss +0 -1
- package/scss/components/SimpleHeader/_carbon-imports.scss +11 -0
- package/scss/components/SimpleHeader/_index-with-carbon.scss +9 -0
- package/scss/components/SimpleHeader/_index.scss +10 -0
- package/scss/components/SimpleHeader/_simple-header.scss +37 -0
- package/scss/components/StatusIcon/_status-icon.scss +0 -1
- package/scss/components/_index-with-carbon.scss +1 -0
@@ -255,25 +255,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
255
255
|
},
|
256
256
|
'in-progress': {
|
257
257
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
258
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
258
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
259
259
|
size: 16,
|
260
260
|
ref: ref
|
261
261
|
}, props));
|
262
262
|
}),
|
263
263
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
264
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
264
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
265
265
|
size: 20,
|
266
266
|
ref: ref
|
267
267
|
}, props));
|
268
268
|
}),
|
269
269
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
270
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
270
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
271
271
|
size: 24,
|
272
272
|
ref: ref
|
273
273
|
}, props));
|
274
274
|
}),
|
275
275
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
276
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
276
|
+
return /*#__PURE__*/_react.default.createElement(_icons.InProgress, (0, _extends2.default)({
|
277
277
|
size: 32,
|
278
278
|
ref: ref
|
279
279
|
}, props));
|
@@ -281,25 +281,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
281
281
|
},
|
282
282
|
running: {
|
283
283
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
284
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
284
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
285
285
|
size: 16,
|
286
286
|
ref: ref
|
287
287
|
}, props));
|
288
288
|
}),
|
289
289
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
290
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
290
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
291
291
|
size: 20,
|
292
292
|
ref: ref
|
293
293
|
}, props));
|
294
294
|
}),
|
295
295
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
296
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
296
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
297
297
|
size: 24,
|
298
298
|
ref: ref
|
299
299
|
}, props));
|
300
300
|
}),
|
301
301
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
302
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
302
|
+
return /*#__PURE__*/_react.default.createElement(_icons.CheckmarkOutline, (0, _extends2.default)({
|
303
303
|
size: 32,
|
304
304
|
ref: ref
|
305
305
|
}, props));
|
@@ -307,25 +307,25 @@ var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
307
307
|
},
|
308
308
|
pending: {
|
309
309
|
sm: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
310
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
310
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
311
311
|
size: 16,
|
312
312
|
ref: ref
|
313
313
|
}, props));
|
314
314
|
}),
|
315
315
|
md: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
316
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
316
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
317
317
|
size: 20,
|
318
318
|
ref: ref
|
319
319
|
}, props));
|
320
320
|
}),
|
321
321
|
lg: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
322
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
322
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
323
323
|
size: 24,
|
324
324
|
ref: ref
|
325
325
|
}, props));
|
326
326
|
}),
|
327
327
|
xl: /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
328
|
-
return /*#__PURE__*/_react.default.createElement(_icons.
|
328
|
+
return /*#__PURE__*/_react.default.createElement(_icons.Pending, (0, _extends2.default)({
|
329
329
|
size: 32,
|
330
330
|
ref: ref
|
331
331
|
}, props));
|
@@ -184,7 +184,7 @@ Tearsheet.propTypes = _objectSpread({
|
|
184
184
|
/**
|
185
185
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
186
186
|
*/
|
187
|
-
portalTarget:
|
187
|
+
portalTarget: _TearsheetShell.portalType,
|
188
188
|
/**
|
189
189
|
* Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
|
190
190
|
*/
|
@@ -150,7 +150,7 @@ TearsheetNarrow.propTypes = _objectSpread({
|
|
150
150
|
/**
|
151
151
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
152
152
|
*/
|
153
|
-
portalTarget:
|
153
|
+
portalTarget: _TearsheetShell.portalType,
|
154
154
|
/**
|
155
155
|
* The main title of the tearsheet, displayed in the header area.
|
156
156
|
*/
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
exports.tearsheetShellWideProps = exports.tearsheetIsPassive = exports.tearsheetHasCloseIcon = exports.deprecatedProps = exports.TearsheetShell = void 0;
|
8
|
+
exports.tearsheetShellWideProps = exports.tearsheetIsPassive = exports.tearsheetHasCloseIcon = exports.portalType = exports.deprecatedProps = exports.TearsheetShell = void 0;
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
@@ -272,6 +272,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
272
272
|
// is used in preference to relying on function.name.
|
273
273
|
exports.TearsheetShell = TearsheetShell;
|
274
274
|
TearsheetShell.displayName = componentName;
|
275
|
+
var portalType = typeof Element === 'undefined' ? _propTypes.default.object : _propTypes.default.instanceOf(Element);
|
276
|
+
exports.portalType = portalType;
|
275
277
|
var deprecatedProps = {
|
276
278
|
/**
|
277
279
|
* **Deprecated**
|
@@ -396,7 +398,7 @@ TearsheetShell.propTypes = _objectSpread({
|
|
396
398
|
/**
|
397
399
|
* The DOM element that the tearsheet should be rendered within. Defaults to document.body.
|
398
400
|
*/
|
399
|
-
portalTarget:
|
401
|
+
portalTarget: portalType,
|
400
402
|
/**
|
401
403
|
* Specifies the width of the tearsheet, 'narrow' or 'wide'.
|
402
404
|
*/
|
@@ -179,10 +179,10 @@ StoryDocsPage.propTypes = {
|
|
179
179
|
/**
|
180
180
|
* location if any of guidelines on the PAL site, constructed by default
|
181
181
|
*/
|
182
|
-
altGuidelinesHref: _propTypes.default.oneOfType(_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
|
182
|
+
altGuidelinesHref: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
|
183
183
|
href: _propTypes.default.string,
|
184
184
|
label: _propTypes.default.string
|
185
|
-
}))),
|
185
|
+
}))]),
|
186
186
|
/**
|
187
187
|
* Uses component name by default
|
188
188
|
*/
|
@@ -216,7 +216,7 @@ StoryDocsPage.propTypes = {
|
|
216
216
|
* default language `jsx`
|
217
217
|
*/
|
218
218
|
source: _propTypes.default.shape({
|
219
|
-
language: _propTypes.default.oneOf('javascript', 'css', 'jsx', 'json'),
|
219
|
+
language: _propTypes.default.oneOf(['javascript', 'css', 'jsx', 'json']),
|
220
220
|
code: _propTypes.default.string
|
221
221
|
})
|
222
222
|
})),
|
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": "2.
|
4
|
+
"version": "2.12.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -96,5 +96,5 @@
|
|
96
96
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
97
97
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
98
98
|
},
|
99
|
-
"gitHead": "
|
99
|
+
"gitHead": "3379b9af8e581eb50ec510e8a81248b4ec6d439d"
|
100
100
|
}
|
@@ -12,9 +12,10 @@
|
|
12
12
|
@use '../../global/styles/project-settings' as c4p-settings;
|
13
13
|
|
14
14
|
// CreateFullPage uses the following IBM Products components:
|
15
|
-
// ActionSet, CreateInfluencer
|
15
|
+
// ActionSet, CreateInfluencer and SimpleHeader
|
16
16
|
@use '../CreateInfluencer/index' as *;
|
17
17
|
@use '../ActionSet/action-set' as *;
|
18
|
+
@use '../SimpleHeader' as *;
|
18
19
|
|
19
20
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
20
21
|
$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
|
@@ -32,6 +33,14 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
|
|
32
33
|
margin-left: 0;
|
33
34
|
}
|
34
35
|
|
36
|
+
.#{$block-class}__header {
|
37
|
+
position: sticky;
|
38
|
+
z-index: 9;
|
39
|
+
top: 0;
|
40
|
+
right: 0;
|
41
|
+
left: 0;
|
42
|
+
}
|
43
|
+
|
35
44
|
.#{$block-class} .#{$step-block-class}__step--hidden-step {
|
36
45
|
display: none;
|
37
46
|
}
|
@@ -64,7 +73,7 @@ $step-block-class: #{c4p-settings.$pkg-prefix}--create-full-page__step;
|
|
64
73
|
display: none;
|
65
74
|
}
|
66
75
|
|
67
|
-
.#{$block-class} {
|
76
|
+
.#{$block-class}__influencer-and-body-container {
|
68
77
|
display: flex;
|
69
78
|
height: 100vh;
|
70
79
|
padding: 0;
|
@@ -54,7 +54,6 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
|
|
54
54
|
|
55
55
|
.#{$block-class}__actions-header-ghost-button {
|
56
56
|
min-height: $spacing-07;
|
57
|
-
padding: 0 $spacing-05;
|
58
57
|
// stylelint-disable-next-line carbon/layout-token-use
|
59
58
|
padding-right: calc($spacing-01 + $spacing-03);
|
60
59
|
// stylelint-disable-next-line carbon/layout-token-use
|
@@ -0,0 +1,11 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// SimpleHeader uses the following Carbon components:
|
9
|
+
// Breadcrumb, BreadcrumbItem
|
10
|
+
|
11
|
+
@use '@carbon/styles/scss/components/breadcrumb';
|
@@ -0,0 +1,10 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// An index file is most useful when you have multiple components
|
9
|
+
|
10
|
+
@use './simple-header';
|
@@ -0,0 +1,37 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2023, 2023
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
@use '@carbon/styles/scss/spacing' as *;
|
9
|
+
@use '@carbon/styles/scss/theme' as *;
|
10
|
+
@use '@carbon/styles/scss/type';
|
11
|
+
|
12
|
+
@use '../../global/styles/project-settings' as *;
|
13
|
+
|
14
|
+
$block-class: #{$pkg-prefix}--simple-header;
|
15
|
+
|
16
|
+
.#{$block-class} {
|
17
|
+
width: 100%;
|
18
|
+
padding: $spacing-04 $spacing-07;
|
19
|
+
border-bottom: 1px solid $border-subtle-01;
|
20
|
+
background-color: $layer-01;
|
21
|
+
}
|
22
|
+
|
23
|
+
.#{$block-class}__title {
|
24
|
+
@include type.type-style('heading-04');
|
25
|
+
}
|
26
|
+
|
27
|
+
.#{$block-class}__breadcrumbs + .#{$block-class}__title {
|
28
|
+
// add margin top to the title if breadcrumbs exist
|
29
|
+
margin-top: $spacing-02;
|
30
|
+
}
|
31
|
+
|
32
|
+
.#{$block-class}__breadcrumbs .#{$carbon-prefix}--breadcrumb-item,
|
33
|
+
.#{$block-class}__breadcrumbs
|
34
|
+
.#{$carbon-prefix}--breadcrumb-item
|
35
|
+
.#{$carbon-prefix}--link {
|
36
|
+
@include type.type-style('label-01');
|
37
|
+
}
|
@@ -129,7 +129,6 @@ $block-class: #{$pkg-prefix}--status-icon;
|
|
129
129
|
} @else if $icon == running {
|
130
130
|
// stylelint-disable-next-line carbon/theme-token-use
|
131
131
|
fill: --clr($icon, $theme);
|
132
|
-
transform: scaleY(-1);
|
133
132
|
} @else {
|
134
133
|
// stylelint-disable-next-line carbon/theme-token-use
|
135
134
|
fill: --clr($icon, $theme);
|