@carbon/ibm-products 1.0.1 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
5
|
-
var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title"];
|
5
|
+
var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
|
6
6
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
8
8
|
|
@@ -22,7 +22,7 @@ import { useResizeDetector } from 'react-resize-detector';
|
|
22
22
|
import { Grid, Column, Row, Button, Tag } from 'carbon-components-react';
|
23
23
|
import { useWindowResize, useNearestScroll } from '../../global/js/hooks';
|
24
24
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
25
|
-
import { prepareProps } from '../../global/js/utils/props-helper';
|
25
|
+
import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper';
|
26
26
|
import { pkg } from '../../settings';
|
27
27
|
import { ActionBar } from '../ActionBar/';
|
28
28
|
import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
|
@@ -33,7 +33,7 @@ var componentName = 'PageHeader';
|
|
33
33
|
import { blockClass, utilCheckUpdateVerticalSpace, utilGetBreadcrumbItemForTitle, utilSetCollapsed } from './PageHeaderUtils';
|
34
34
|
import { PageHeaderTitle } from './PageHeaderTitle';
|
35
35
|
export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
36
|
-
var _ref5, _cx2, _ref6, _cx4, _cx7;
|
36
|
+
var _withoutBackground, _ref5, _cx2, _ref6, _cx4, _cx7;
|
37
37
|
|
38
38
|
var actionBarItems = _ref.actionBarItems,
|
39
39
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
@@ -41,7 +41,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
41
41
|
allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
|
42
42
|
allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
|
43
43
|
allTagsModalTitle = _ref.allTagsModalTitle,
|
44
|
-
|
44
|
+
deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
|
45
45
|
breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
|
46
46
|
breadcrumbs = _ref.breadcrumbs,
|
47
47
|
children = _ref.children,
|
@@ -62,8 +62,13 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
62
62
|
subtitle = _ref.subtitle,
|
63
63
|
tags = _ref.tags,
|
64
64
|
title = _ref.title,
|
65
|
+
withoutBackground = _ref.withoutBackground,
|
65
66
|
rest = _objectWithoutProperties(_ref, _excluded);
|
66
67
|
|
68
|
+
// handle deprecated props - START
|
69
|
+
// if withoutBackground is null check deprecated_hasBackgroundAlways and default false
|
70
|
+
(_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // handle deprecated props - END
|
71
|
+
|
67
72
|
var _useState = useState({}),
|
68
73
|
_useState2 = _slicedToArray(_useState, 2),
|
69
74
|
metrics = _useState2[0],
|
@@ -282,8 +287,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
282
287
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
283
288
|
}, [fullWidthGrid, narrowGrid]);
|
284
289
|
useEffect(function () {
|
285
|
-
// Determines
|
286
|
-
var result =
|
290
|
+
// Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
|
291
|
+
var result = withoutBackground ? 0 : 1;
|
287
292
|
|
288
293
|
if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
289
294
|
var startAddingAt = parseFloat(layout05, 10) * parseInt(baseFontSize);
|
@@ -301,13 +306,13 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
301
306
|
setPageHeaderStyles(function (prev) {
|
302
307
|
return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--background-opacity"), result));
|
303
308
|
});
|
304
|
-
}, [actionBarItems,
|
309
|
+
}, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
|
305
310
|
useEffect(function () {
|
306
|
-
// only has toggle if requested and
|
311
|
+
// only has toggle if requested and withoutBackground is unset/falsy
|
307
312
|
// NOTE: prop-types isRequired.if for the expand and collapse
|
308
313
|
// icon descriptions depends on the this.
|
309
|
-
setHasCollapseButton(hasCollapseHeaderToggle &&
|
310
|
-
}, [
|
314
|
+
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
|
315
|
+
}, [withoutBackground, hasCollapseHeaderToggle]);
|
311
316
|
useEffect(function () {
|
312
317
|
// Determine if space is needed in the breadcrumb for a collapse button
|
313
318
|
setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
|
@@ -476,7 +481,13 @@ var TYPES = {
|
|
476
481
|
'high-contrast': 'High-Contrast'
|
477
482
|
};
|
478
483
|
var tagTypes = Object.keys(TYPES);
|
479
|
-
|
484
|
+
export var deprecatedProps = {
|
485
|
+
/**
|
486
|
+
* **Deprecated** see property `withoutBackground`
|
487
|
+
*/
|
488
|
+
hasBackgroundAlways: deprecateProp(PropTypes.bool, 'Property replaced by `withoutBackground`')
|
489
|
+
};
|
490
|
+
PageHeader.propTypes = _objectSpread({
|
480
491
|
/**
|
481
492
|
* Specifies the action bar items which are the final items in the row top of the PageHeader.
|
482
493
|
* Each item is specified as an object with the properties of a Carbon Button in icon only form.
|
@@ -603,13 +614,13 @@ PageHeader.propTypes = {
|
|
603
614
|
collapseHeader: PropTypes.bool,
|
604
615
|
|
605
616
|
/**
|
606
|
-
* If `hasCollapseHeaderToggle` and `
|
607
|
-
* for both the expend and collapse states of the button component used.
|
617
|
+
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
618
|
+
* required for both the expend and collapse states of the button component used.
|
608
619
|
*/
|
609
620
|
collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref11) {
|
610
|
-
var
|
621
|
+
var withoutBackground = _ref11.withoutBackground,
|
611
622
|
hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
|
612
|
-
return
|
623
|
+
return !withoutBackground && hasCollapseHeaderToggle;
|
613
624
|
}),
|
614
625
|
|
615
626
|
/**
|
@@ -625,13 +636,13 @@ PageHeader.propTypes = {
|
|
625
636
|
disableBreadcrumbScroll: PropTypes.bool,
|
626
637
|
|
627
638
|
/**
|
628
|
-
* If `hasCollapseHeaderToggle` and `
|
629
|
-
* for both the expend and collapse states of the button component used.
|
639
|
+
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
640
|
+
* required for both the expend and collapse states of the button component used.
|
630
641
|
*/
|
631
642
|
expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref12) {
|
632
|
-
var
|
643
|
+
var withoutBackground = _ref12.withoutBackground,
|
633
644
|
hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
|
634
|
-
return
|
645
|
+
return !withoutBackground && hasCollapseHeaderToggle;
|
635
646
|
}),
|
636
647
|
|
637
648
|
/**
|
@@ -640,12 +651,6 @@ PageHeader.propTypes = {
|
|
640
651
|
*/
|
641
652
|
fullWidthGrid: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['xl'])]),
|
642
653
|
|
643
|
-
/**
|
644
|
-
* Specifies if the PageHeader should have a background always on and defaults to the preferred `true`.
|
645
|
-
* When false some parts of the header gain a background if they stick to the top of the PageHeader on scroll.
|
646
|
-
*/
|
647
|
-
hasBackgroundAlways: PropTypes.bool,
|
648
|
-
|
649
654
|
/**
|
650
655
|
* Adds a button as the last element of the bottom row which collapses and expands the header.
|
651
656
|
*
|
@@ -769,11 +774,16 @@ PageHeader.propTypes = {
|
|
769
774
|
content: PropTypes.node.isRequired,
|
770
775
|
breadcrumbContent: PropTypes.node,
|
771
776
|
asText: PropTypes.string.isRequired
|
772
|
-
})])
|
773
|
-
|
777
|
+
})]),
|
778
|
+
|
779
|
+
/**
|
780
|
+
* Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
|
781
|
+
* Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
|
782
|
+
*/
|
783
|
+
withoutBackground: PropTypes.bool
|
784
|
+
}, deprecatedProps);
|
774
785
|
PageHeader.defaultProps = {
|
775
786
|
fullWidthGrid: false,
|
776
|
-
hasBackgroundAlways: true,
|
777
787
|
narrowGrid: false
|
778
788
|
};
|
779
789
|
PageHeader.displayName = componentName;
|
@@ -14,10 +14,11 @@ import cx from 'classnames';
|
|
14
14
|
import { bool, node, string } from 'prop-types';
|
15
15
|
import React, { forwardRef, useContext } from 'react';
|
16
16
|
import { pkg } from '../../settings';
|
17
|
-
import { blockClass, ToolbarContext } from './Toolbar';
|
17
|
+
import { blockClass as toolbarClass, ToolbarContext } from './Toolbar';
|
18
|
+
var blockClass = "".concat(toolbarClass, "__button");
|
18
19
|
/** Toolbar buttons are common functions performed as part of a products interface or an open window. */
|
19
20
|
|
20
|
-
|
21
|
+
var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
21
22
|
var _useContext;
|
22
23
|
|
23
24
|
var caret = _ref.caret,
|
@@ -29,12 +30,12 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
29
30
|
tooltipPosition: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
|
30
31
|
}, rest, {
|
31
32
|
ref: ref,
|
32
|
-
className: cx(className, _defineProperty({}, "".concat(blockClass, "
|
33
|
+
className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
|
33
34
|
kind: "ghost",
|
34
35
|
size: "md",
|
35
36
|
hasIconOnly: true
|
36
37
|
}), /*#__PURE__*/React.createElement(React.Fragment, null, children, caret && /*#__PURE__*/React.createElement("span", {
|
37
|
-
className: "".concat(blockClass, "
|
38
|
+
className: "".concat(blockClass, "__caret")
|
38
39
|
})));
|
39
40
|
});
|
40
41
|
var componentName = 'ToolbarButton';
|
@@ -52,4 +53,5 @@ ToolbarButton.propTypes = {
|
|
52
53
|
ToolbarButton.defaultProps = {
|
53
54
|
caret: false
|
54
55
|
};
|
55
|
-
ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
|
56
|
+
ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
|
57
|
+
export { blockClass, ToolbarButton };
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
8
8
|
value: true
|
9
9
|
});
|
10
|
-
exports.PageHeader = void 0;
|
10
|
+
exports.deprecatedProps = exports.PageHeader = void 0;
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
@@ -51,7 +51,7 @@ var _PageHeaderUtils = require("./PageHeaderUtils");
|
|
51
51
|
|
52
52
|
var _PageHeaderTitle = require("./PageHeaderTitle");
|
53
53
|
|
54
|
-
var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title"];
|
54
|
+
var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
|
55
55
|
|
56
56
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
57
57
|
|
@@ -64,7 +64,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
64
64
|
var componentName = 'PageHeader';
|
65
65
|
|
66
66
|
var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
67
|
-
var _ref5, _cx2, _ref6, _cx4, _cx7;
|
67
|
+
var _withoutBackground, _ref5, _cx2, _ref6, _cx4, _cx7;
|
68
68
|
|
69
69
|
var actionBarItems = _ref.actionBarItems,
|
70
70
|
actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
|
@@ -72,7 +72,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
72
72
|
allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
|
73
73
|
allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
|
74
74
|
allTagsModalTitle = _ref.allTagsModalTitle,
|
75
|
-
|
75
|
+
deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
|
76
76
|
breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
|
77
77
|
breadcrumbs = _ref.breadcrumbs,
|
78
78
|
children = _ref.children,
|
@@ -93,7 +93,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
93
93
|
subtitle = _ref.subtitle,
|
94
94
|
tags = _ref.tags,
|
95
95
|
title = _ref.title,
|
96
|
+
withoutBackground = _ref.withoutBackground,
|
96
97
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
98
|
+
// handle deprecated props - START
|
99
|
+
// if withoutBackground is null check deprecated_hasBackgroundAlways and default false
|
100
|
+
(_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // handle deprecated props - END
|
97
101
|
|
98
102
|
var _useState = (0, _react.useState)({}),
|
99
103
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
@@ -313,8 +317,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
313
317
|
checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
314
318
|
}, [fullWidthGrid, narrowGrid]);
|
315
319
|
(0, _react.useEffect)(function () {
|
316
|
-
// Determines
|
317
|
-
var result =
|
320
|
+
// Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
|
321
|
+
var result = withoutBackground ? 0 : 1;
|
318
322
|
|
319
323
|
if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
|
320
324
|
var startAddingAt = parseFloat(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
|
@@ -332,13 +336,13 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
332
336
|
setPageHeaderStyles(function (prev) {
|
333
337
|
return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.blockClass, "--background-opacity"), result));
|
334
338
|
});
|
335
|
-
}, [actionBarItems,
|
339
|
+
}, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
|
336
340
|
(0, _react.useEffect)(function () {
|
337
|
-
// only has toggle if requested and
|
341
|
+
// only has toggle if requested and withoutBackground is unset/falsy
|
338
342
|
// NOTE: prop-types isRequired.if for the expand and collapse
|
339
343
|
// icon descriptions depends on the this.
|
340
|
-
setHasCollapseButton(hasCollapseHeaderToggle &&
|
341
|
-
}, [
|
344
|
+
setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
|
345
|
+
}, [withoutBackground, hasCollapseHeaderToggle]);
|
342
346
|
(0, _react.useEffect)(function () {
|
343
347
|
// Determine if space is needed in the breadcrumb for a collapse button
|
344
348
|
setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
|
@@ -509,7 +513,14 @@ var TYPES = {
|
|
509
513
|
'high-contrast': 'High-Contrast'
|
510
514
|
};
|
511
515
|
var tagTypes = Object.keys(TYPES);
|
512
|
-
|
516
|
+
var deprecatedProps = {
|
517
|
+
/**
|
518
|
+
* **Deprecated** see property `withoutBackground`
|
519
|
+
*/
|
520
|
+
hasBackgroundAlways: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `withoutBackground`')
|
521
|
+
};
|
522
|
+
exports.deprecatedProps = deprecatedProps;
|
523
|
+
PageHeader.propTypes = _objectSpread({
|
513
524
|
/**
|
514
525
|
* Specifies the action bar items which are the final items in the row top of the PageHeader.
|
515
526
|
* Each item is specified as an object with the properties of a Carbon Button in icon only form.
|
@@ -636,13 +647,13 @@ PageHeader.propTypes = {
|
|
636
647
|
collapseHeader: _propTypes.default.bool,
|
637
648
|
|
638
649
|
/**
|
639
|
-
* If `hasCollapseHeaderToggle` and `
|
640
|
-
* for both the expend and collapse states of the button component used.
|
650
|
+
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
651
|
+
* required for both the expend and collapse states of the button component used.
|
641
652
|
*/
|
642
653
|
collapseHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref11) {
|
643
|
-
var
|
654
|
+
var withoutBackground = _ref11.withoutBackground,
|
644
655
|
hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
|
645
|
-
return
|
656
|
+
return !withoutBackground && hasCollapseHeaderToggle;
|
646
657
|
}),
|
647
658
|
|
648
659
|
/**
|
@@ -658,13 +669,13 @@ PageHeader.propTypes = {
|
|
658
669
|
disableBreadcrumbScroll: _propTypes.default.bool,
|
659
670
|
|
660
671
|
/**
|
661
|
-
* If `hasCollapseHeaderToggle` and `
|
662
|
-
* for both the expend and collapse states of the button component used.
|
672
|
+
* If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
|
673
|
+
* required for both the expend and collapse states of the button component used.
|
663
674
|
*/
|
664
675
|
expandHeaderIconDescription: _propTypes.default.string.isRequired.if(function (_ref12) {
|
665
|
-
var
|
676
|
+
var withoutBackground = _ref12.withoutBackground,
|
666
677
|
hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
|
667
|
-
return
|
678
|
+
return !withoutBackground && hasCollapseHeaderToggle;
|
668
679
|
}),
|
669
680
|
|
670
681
|
/**
|
@@ -673,12 +684,6 @@ PageHeader.propTypes = {
|
|
673
684
|
*/
|
674
685
|
fullWidthGrid: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['xl'])]),
|
675
686
|
|
676
|
-
/**
|
677
|
-
* Specifies if the PageHeader should have a background always on and defaults to the preferred `true`.
|
678
|
-
* When false some parts of the header gain a background if they stick to the top of the PageHeader on scroll.
|
679
|
-
*/
|
680
|
-
hasBackgroundAlways: _propTypes.default.bool,
|
681
|
-
|
682
687
|
/**
|
683
688
|
* Adds a button as the last element of the bottom row which collapses and expands the header.
|
684
689
|
*
|
@@ -802,11 +807,16 @@ PageHeader.propTypes = {
|
|
802
807
|
content: _propTypes.default.node.isRequired,
|
803
808
|
breadcrumbContent: _propTypes.default.node,
|
804
809
|
asText: _propTypes.default.string.isRequired
|
805
|
-
})])
|
806
|
-
|
810
|
+
})]),
|
811
|
+
|
812
|
+
/**
|
813
|
+
* Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
|
814
|
+
* Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
|
815
|
+
*/
|
816
|
+
withoutBackground: _propTypes.default.bool
|
817
|
+
}, deprecatedProps);
|
807
818
|
PageHeader.defaultProps = {
|
808
819
|
fullWidthGrid: false,
|
809
|
-
hasBackgroundAlways: true,
|
810
820
|
narrowGrid: false
|
811
821
|
};
|
812
822
|
PageHeader.displayName = componentName;
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
8
8
|
value: true
|
9
9
|
});
|
10
|
-
exports.ToolbarButton = void 0;
|
10
|
+
exports.blockClass = exports.ToolbarButton = void 0;
|
11
11
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
13
|
|
@@ -33,7 +33,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
33
33
|
|
34
34
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
35
35
|
|
36
|
+
var blockClass = "".concat(_Toolbar.blockClass, "__button");
|
36
37
|
/** Toolbar buttons are common functions performed as part of a products interface or an open window. */
|
38
|
+
|
39
|
+
exports.blockClass = blockClass;
|
37
40
|
var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
38
41
|
var _useContext;
|
39
42
|
|
@@ -45,12 +48,12 @@ var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
45
48
|
tooltipPosition: ((_useContext = (0, _react.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
|
46
49
|
}, rest, {
|
47
50
|
ref: ref,
|
48
|
-
className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(
|
51
|
+
className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--caret"), caret)),
|
49
52
|
kind: "ghost",
|
50
53
|
size: "md",
|
51
54
|
hasIconOnly: true
|
52
55
|
}), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, caret && /*#__PURE__*/_react.default.createElement("span", {
|
53
|
-
className: "".concat(
|
56
|
+
className: "".concat(blockClass, "__caret")
|
54
57
|
})));
|
55
58
|
});
|
56
59
|
exports.ToolbarButton = ToolbarButton;
|
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.0
|
4
|
+
"version": "1.1.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.0",
|
61
61
|
"glob": "^7.2.0",
|
62
62
|
"jest": "^27.3.1",
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.23.0",
|
64
64
|
"npm-check-updates": "^12.0.2",
|
65
65
|
"npm-run-all": "^4.1.5",
|
66
66
|
"rimraf": "^3.0.2",
|
67
|
-
"sass": "^1.43.
|
67
|
+
"sass": "^1.43.5",
|
68
68
|
"yargs": "^17.2.1"
|
69
69
|
},
|
70
70
|
"dependencies": {
|
@@ -86,5 +86,5 @@
|
|
86
86
|
"react": "^16.8.6 || ^17.0.1",
|
87
87
|
"react-dom": "^16.8.6 || ^17.0.1"
|
88
88
|
},
|
89
|
-
"gitHead": "
|
89
|
+
"gitHead": "8f28bbdcb86f4ef6dcb75058bde4a8c340ce8048"
|
90
90
|
}
|