@carbon/ibm-products 2.3.2 → 2.4.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +262 -110
- 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 +40 -24
- 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 +86 -54
- 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 +145 -38
- 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 +11 -1
- package/es/components/Card/CardFooter.js +4 -2
- package/es/components/Card/CardHeader.js +20 -2
- package/es/components/Datagrid/Datagrid/Datagrid.js +5 -1
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +15 -21
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -20
- package/es/components/Datagrid/Datagrid.docs-page.js +123 -0
- package/es/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +13 -0
- package/es/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +13 -0
- package/es/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +47 -0
- package/es/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +13 -0
- package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +57 -0
- package/es/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +13 -0
- package/es/components/Datagrid/utils/DatagridActions.js +1 -1
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/EditUpdateCards/EditUpdateCards.js +66 -4
- package/es/components/FilterSummary/FilterSummary.js +7 -3
- package/es/components/OptionsTile/OptionsTile.js +8 -1
- package/es/components/ProductiveCard/ProductiveCard.js +21 -1
- package/es/global/js/utils/StoryDocsPage.js +6 -2
- package/lib/components/Card/Card.js +11 -1
- package/lib/components/Card/CardFooter.js +4 -2
- package/lib/components/Card/CardHeader.js +20 -2
- package/lib/components/Datagrid/Datagrid/Datagrid.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +14 -20
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -23
- package/lib/components/Datagrid/Datagrid.docs-page.js +134 -0
- package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +21 -0
- package/lib/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +21 -0
- package/lib/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +55 -0
- package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +21 -0
- package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +65 -0
- package/lib/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +21 -0
- package/lib/components/Datagrid/utils/DatagridActions.js +1 -1
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/EditUpdateCards/EditUpdateCards.js +66 -4
- package/lib/components/FilterSummary/FilterSummary.js +7 -3
- package/lib/components/OptionsTile/OptionsTile.js +8 -1
- package/lib/components/ProductiveCard/ProductiveCard.js +21 -1
- package/lib/global/js/utils/StoryDocsPage.js +6 -2
- package/package.json +16 -16
- package/scss/components/Datagrid/_datagrid.scss +17 -10
- package/scss/components/Datagrid/_storybook-styles.scss +5 -0
- package/scss/components/EditUpdateCards/_edit-update-cards.scss +10 -0
- package/scss/components/FilterSummary/_storybook-styles.scss +2 -0
- package/scss/components/ProductiveCard/_productive-card.scss +15 -0
- package/scss/components/Tearsheet/_tearsheet.scss +6 -0
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.DocsPage = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
|
10
|
+
var DocsPage = function DocsPage() {
|
11
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
12
|
+
blocks: [{
|
13
|
+
description: "The `Datagrid` supports expandable rows with the use of the `useExpandedRow` hook.",
|
14
|
+
source: {
|
15
|
+
language: 'jsx',
|
16
|
+
code: "\nimport { Datagrid, useDatagrid, useExpandedRow } from '@carbon/ibm-products';\n\nconst App = () => {\n const columns = React.useMemo(() => defaultHeader, []); // These are the columns that will be used by the datagrid\n const [data] = useState(makeData(10)); // This is the data that will be rendered by the datagrid\n\n const expansionRenderer = ({ row }) => {\n return <div>Content for row index: {row.id}</div>;\n };\n\n const datagridState = useDatagrid(\n {\n columns,\n data,\n ExpandedRowContentComponent: expansionRenderer,\n },\n useExpandedRow\n );\n\n return <Datagrid datagridState={datagridState} />;\n};\n "
|
17
|
+
}
|
18
|
+
}]
|
19
|
+
});
|
20
|
+
};
|
21
|
+
exports.DocsPage = DocsPage;
|
@@ -0,0 +1,65 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.DocsPage = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
|
10
|
+
var DocsPage = function DocsPage() {
|
11
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
12
|
+
blocks: [{
|
13
|
+
title: 'Filtering',
|
14
|
+
description: "Table filtering allows a user to add or remove data items from a data table by selecting or clearing predefined attributes. Filters can help a user find something they're looking for, view available options within a certain set of criteria, and decide between many options. These guidelines are an extension of [Carbon's filter documentation](https://carbondesignsystem.com/patterns/filtering/).\n "
|
15
|
+
}, {
|
16
|
+
description: "Filtering results in a table is a different type of action from searching. While both actions can help the user narrow results down, searching is meant to help the user find a specific result, whereas filtering allows users to trim results according to its attributes."
|
17
|
+
}, {
|
18
|
+
description: "Applied filters can affect both the data that is visible in the table and also data that might not be displayed in the columns available in the table. Filter options can be displayed in many form components, including dropdowns, text inputs, checkboxes, radio buttons, and date range pickers."
|
19
|
+
}, {
|
20
|
+
description: "[Check out the Guidance here.](https://pages.github.ibm.com/cdai-design/pal/components/data-table/filters/)"
|
21
|
+
}, {
|
22
|
+
subTitle: 'Preparing your column headers'
|
23
|
+
}, {
|
24
|
+
description: 'To utilize filtering, you have to add some extra properties into your headers that are going to be filtered.'
|
25
|
+
}, {
|
26
|
+
description: "Two things you need to do is:\n- Specify a `filter` to use (unless it's text match which is default)\n- (Optional) Render the component with the `Cell` property to display the right information. Use this if the data you send into the table isn't how you want to display it, for example like Dates. See the example for `passwordStrength` below.\n "
|
27
|
+
}, {
|
28
|
+
description: "For example; here we are specifying that the `joined` header column should be filtered using a `filter: 'date'`, and render the cell using it's value and converting it to string. (Since the value of joined is a date object, react isn't going to allow you to render it as jsx so we have to convert it to string)",
|
29
|
+
source: {
|
30
|
+
code: "\n{\n Header: 'Joined',\n accessor: 'joined',\n filter: 'date',\n Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,\n},\n "
|
31
|
+
}
|
32
|
+
}, {
|
33
|
+
description: "The different types of filters are:\n- text (default)\n- date\n- number\n- checkbox\n- radio\n- dropdown\n ",
|
34
|
+
source: {
|
35
|
+
code: "\nconst columns = [\n {\n Header: 'Row Index',\n accessor: (row, i) => i,\n sticky: 'left',\n id: 'rowIndex', // id is required when accessor is a function.\n },\n {\n Header: 'First Name',\n accessor: 'firstName',\n },\n {\n Header: 'Last Name',\n accessor: 'lastName',\n },\n {\n Header: 'Age',\n accessor: 'age',\n width: 50,\n },\n {\n Header: 'Visits',\n accessor: 'visits',\n filter: 'number',\n width: 60,\n },\n {\n Header: 'Status',\n accessor: 'status',\n filter: 'dropdown',\n },\n // Shows the date filter example\n {\n Header: 'Joined',\n accessor: 'joined',\n filter: 'date',\n Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,\n },\n // Shows the checkbox filter example\n {\n Header: 'Password strength',\n accessor: 'passwordStrength',\n filter: 'checkbox',\n Cell: ({ cell: { value } }) => {\n const iconProps = {\n size: 'sm',\n theme: 'light',\n kind: value,\n iconDescription: value,\n };\n\n return (\n <span\n style={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <StatusIcon {...iconProps} />\n {iconProps.iconDescription}\n </span>\n );\n },\n },\n // Shows the checkbox filter example\n {\n Header: 'Role',\n accessor: 'role',\n filter: 'radio',\n },\n];\n "
|
36
|
+
}
|
37
|
+
}, {
|
38
|
+
subTitle: 'Store you data into state, this can also come from an API',
|
39
|
+
source: {
|
40
|
+
code: "\nconst [data] = useState([\n {\n activeSince: new Date('09/26/81'),\n age: 41,\n firstName: 'Joel',\n lastName: 'Miller',\n passwordStrength: 'normal',\n role: 'developer',\n visits: '81',\n },\n {\n activeSince: new Date('08/30/97'),\n age: 19,\n firstName: 'Ellie',\n lastName: 'N/A',\n passwordStrength: 'critical',\n role: 'designer',\n visits: '7',\n },\n {\n activeSince: new Date('01/26/03'),\n age: 39,\n firstName: 'Tommy',\n lastName: 'Miller',\n passwordStrength: 'minor-warning',\n role: 'researcher',\n visits: '25',\n },\n]);\n "
|
41
|
+
}
|
42
|
+
}, {
|
43
|
+
subTitle: 'Create your filters for flyout variant',
|
44
|
+
description: "To add filters to the flyout, you have to pass in an array of filters. These filters will be converted to it's respective component. Each filters has 3 important props, `type`, `column`, `props`.\n- `type`: the type of filter (this should be the same `filter` property in the headers)\n- `column`: the column that it should be filtered on\n- `props`: the props for the components needed to render the filter.\n\nPlease refer to all the available filters that you can use below.\n ",
|
45
|
+
source: {
|
46
|
+
code: "\nconst filters = [\n {\n type: 'date',\n column: 'joined',\n props: {\n DatePicker: {\n datePickerType: 'range',\n // Add any other Carbon DatePicker props here\n },\n DatePickerInput: {\n start: {\n id: 'date-picker-input-id-start',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined start date',\n // Add any other Carbon DatePickerInput props here\n },\n end: {\n id: 'date-picker-input-id-end',\n placeholder: 'mm/dd/yyyy',\n labelText: 'Joined end date',\n // Add any other Carbon DatePickerInput props here\n },\n },\n },\n },\n {\n type: 'number',\n column: 'visits',\n props: {\n NumberInput: {\n min: 0,\n id: 'visits-number-input',\n invalidText: 'A valid value is required',\n label: 'Visits',\n placeholder: 'Type a number amount of visits',\n // Add any other Carbon NumberInput props here\n },\n },\n },\n {\n type: 'checkbox',\n column: 'passwordStrength',\n props: {\n FormGroup: {\n legendText: 'Password strength',\n // Add any other Carbon FormGroup props here\n },\n Checkbox: [\n {\n id: 'normal',\n labelText: 'Normal',\n value: 'normal',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'minor-warning',\n labelText: 'Minor warning',\n value: 'minor-warning',\n // Add any other Carbon Checkbox props here\n },\n {\n id: 'critical',\n labelText: 'Critical',\n value: 'critical',\n // Add any other Carbon Checkbox props here\n },\n ],\n },\n },\n {\n type: 'radio',\n column: 'role',\n props: {\n FormGroup: {\n legendText: 'Role',\n // Add any other Carbon FormGroup props here\n },\n RadioButtonGroup: {\n orientation: 'vertical',\n legend: 'Role legend',\n name: 'role-radio-button-group',\n // Add any other Carbon RadioButtonGroup props here\n },\n RadioButton: [\n {\n id: 'developer',\n labelText: 'Developer',\n value: 'developer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'designer',\n labelText: 'Designer',\n value: 'designer',\n // Add any other Carbon RadioButton props here\n },\n {\n id: 'researcher',\n labelText: 'Researcher',\n value: 'researcher',\n // Add any other Carbon RadioButton props here\n },\n ],\n },\n },\n {\n type: 'dropdown',\n column: 'status',\n props: {\n Dropdown: {\n id: 'marital-status-dropdown',\n ariaLabel: 'Marital status dropdown',\n items: ['relationship', 'complicated', 'single'],\n label: 'Marital status',\n titleText: 'Marital status',\n // Add any other Carbon Dropdown props here\n },\n },\n },\n];\n "
|
47
|
+
}
|
48
|
+
}, {
|
49
|
+
subTitle: 'Create your filters for panel variant',
|
50
|
+
description: 'Filter panel coming soon.'
|
51
|
+
}, {
|
52
|
+
subTitle: 'Putting it all together',
|
53
|
+
source: {
|
54
|
+
code: "\nimport { Datagrid, useDatagrid, useFiltering } from '@carbon/ibm-products';\n\nconst App = () => {\n const columns = [...];\n const [data] = useState([...]);\n const filters = [...];\n\n\n const datagridState = useDatagrid(\n {\n columns,\n data,\n filterProps: {\n variation: 'flyout', // default\n updateMethod: 'batch', // default\n primaryActionLabel: 'Apply', // default\n secondaryActionLabel: 'Cancel', // default\n flyoutIconDescription: 'Open filters', // default\n shouldClickOutsideToClose: false, // default\n filters,\n },\n DatagridActions,\n batchActions: true,\n toolbarBatchActions: getBatchActions(),\n },\n useFiltering\n );\n\n return <Datagrid datagridState={datagridState} />;\n};\n "
|
55
|
+
}
|
56
|
+
}, {
|
57
|
+
subTitle: "`filterProps` types",
|
58
|
+
source: {
|
59
|
+
language: 'json',
|
60
|
+
code: "\nfilterProps: {\n /** The variation of filtering */\n variation: 'flyout'|'panel',\n /** The update method in which to filter, instant automatically\n applies the filters, batch the user has to click apply */\n updateMethod: 'batch'|'instant',\n /** Text for primary action button, default is 'Apply' */\n primaryActionLabel: string,\n /** Text for secondary action button, default is 'Cancel' */\n secondaryActionLabel: string,\n /** Text for flyout icon description */\n flyoutIconDescription: string,\n /** Array of objects to render filters in flyout */\n filters: object[]\n}\n "
|
61
|
+
}
|
62
|
+
}]
|
63
|
+
});
|
64
|
+
};
|
65
|
+
exports.DocsPage = DocsPage;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.DocsPage = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../../../global/js/utils/StoryDocsPage");
|
10
|
+
var DocsPage = function DocsPage() {
|
11
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
12
|
+
blocks: [{
|
13
|
+
title: 'Actions column',
|
14
|
+
description: "This will add row actions (if more than two actions are provided an OverflowMenu component will be used) to the cells on the column marked with `isAction: true`. Each action button callback will include the actionId and the row object.\n- Include useActionsColumn hook\n- Add `isAction = true` to the column object in which you which to add the overflow menu actions\n- Add `rowActions = []` array to the props\n - `rowActions[].id` for callback to identify the action is called\n - `rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n - `rowActions[].shouldHideMenuItem(row: Row)` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n - `rowActions[].shouldDisableMenuItem(row: Row)` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n - This will override `rowActions[].disabled` (from Carbon) because `shouldDisableMenuItem` is more specific to the row.\n - each action object can take all the props from OverflowMenuItem props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)\n ",
|
15
|
+
source: {
|
16
|
+
code: "\nconst columns = [\n // other columns\n {\n Header: '',\n accessor: 'actions',\n isAction: true,\n },\n];\nconst onActionClick = (actionId, row, event) => {};\nconst datagridState = useDatagrid(\n {\n columns,\n data,\n rowActions: [\n {\n id: 'edit',\n itemText: 'Edit',\n onClick: onActionClick,\n },\n {\n id: 'hidden',\n itemText: 'Hidden item',\n onClick: onActionClick,\n shouldHideMenuItem: () => true,\n },\n {\n id: 'delete',\n itemText: 'Delete',\n hasDivider: true,\n isDelete: true,\n onClick: onActionClick,\n },\n ],\n },\n useActionsColumn\n);\n\nreturn <Datagrid datagridState={datagridState} />;"
|
17
|
+
}
|
18
|
+
}]
|
19
|
+
});
|
20
|
+
};
|
21
|
+
exports.DocsPage = DocsPage;
|
@@ -134,7 +134,7 @@ var DatagridActions = function DatagridActions(datagridState) {
|
|
134
134
|
hasDivider: true,
|
135
135
|
requireTitle: true
|
136
136
|
}))) : !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
|
137
|
-
size: "
|
137
|
+
size: "lg",
|
138
138
|
id: "columnSearch",
|
139
139
|
persistent: true,
|
140
140
|
placeHolderText: searchForAColumn,
|
@@ -14,7 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
14
|
var _devtools = require("../../global/js/utils/devtools");
|
15
15
|
var _settings = require("../../settings");
|
16
16
|
var _ProductiveCard = require("../ProductiveCard");
|
17
|
-
var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
|
17
|
+
var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
|
18
18
|
/**
|
19
19
|
* Copyright IBM Corp. 2022, 2022
|
20
20
|
*
|
@@ -59,12 +59,30 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
59
59
|
editChildren = _ref.editChildren,
|
60
60
|
editMode = _ref.editMode,
|
61
61
|
label = _ref.label,
|
62
|
+
onPrimaryButtonClick = _ref.onPrimaryButtonClick,
|
63
|
+
onSecondaryButtonClick = _ref.onSecondaryButtonClick,
|
62
64
|
previewChildren = _ref.previewChildren,
|
63
65
|
title = _ref.title,
|
64
66
|
titleSize = _ref.titleSize,
|
67
|
+
primaryButtonIcon = _ref.primaryButtonIcon,
|
68
|
+
primaryButtonText = _ref.primaryButtonText,
|
69
|
+
secondaryButtonIcon = _ref.secondaryButtonIcon,
|
70
|
+
secondaryButtonText = _ref.secondaryButtonText,
|
65
71
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
66
|
-
// const [
|
72
|
+
// const [editCardMode, setEditCardMode] = useState(editMode);
|
67
73
|
|
74
|
+
var conditionalProps = {
|
75
|
+
onPrimaryButtonClick: onPrimaryButtonClick,
|
76
|
+
onSecondaryButtonClick: onSecondaryButtonClick,
|
77
|
+
primaryButtonIcon: primaryButtonIcon,
|
78
|
+
primaryButtonKind: 'ghost',
|
79
|
+
primaryButtonPlacement: 'top',
|
80
|
+
primaryButtonText: primaryButtonText,
|
81
|
+
secondaryButtonIcon: secondaryButtonIcon,
|
82
|
+
secondaryButtonKind: 'ghost',
|
83
|
+
secondaryButtonPlacement: 'top',
|
84
|
+
secondaryButtonText: secondaryButtonText
|
85
|
+
};
|
68
86
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
69
87
|
className: (0, _classnames.default)(blockClass,
|
70
88
|
// Apply the block class to the main HTML element
|
@@ -73,7 +91,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
73
91
|
(0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
|
74
92
|
ref: ref,
|
75
93
|
role: "main"
|
76
|
-
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
|
94
|
+
}, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, (0, _extends2.default)({
|
77
95
|
actionIcons: actionIcons,
|
78
96
|
actionsPlacement: actionsPlacement,
|
79
97
|
className: className,
|
@@ -81,7 +99,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
|
|
81
99
|
label: label,
|
82
100
|
title: title,
|
83
101
|
titleSize: titleSize
|
84
|
-
}, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
|
102
|
+
}, editMode && conditionalProps), editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
|
85
103
|
});
|
86
104
|
|
87
105
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -131,10 +149,54 @@ EditUpdateCards.propTypes = {
|
|
131
149
|
* Optional label for the top of the card
|
132
150
|
*/
|
133
151
|
label: _propTypes.default.string,
|
152
|
+
/**
|
153
|
+
* Function that's called from the primary button or action icon
|
154
|
+
*/
|
155
|
+
onPrimaryButtonClick: _propTypes.default.func,
|
156
|
+
/**
|
157
|
+
* Function that's called from the secondary button or action icon
|
158
|
+
*/
|
159
|
+
onSecondaryButtonClick: _propTypes.default.func,
|
134
160
|
/**
|
135
161
|
* Preview mode children
|
136
162
|
*/
|
137
163
|
previewChildren: _propTypes.default.node,
|
164
|
+
/**
|
165
|
+
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
166
|
+
*/
|
167
|
+
primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
168
|
+
/**
|
169
|
+
* Establishes the kind of button displayed for the primary button
|
170
|
+
*/
|
171
|
+
primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
|
172
|
+
/**
|
173
|
+
* Determines if the primary button is on the top or bottom of the card
|
174
|
+
*/
|
175
|
+
primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
176
|
+
/**
|
177
|
+
* The text that's displayed in the primary button
|
178
|
+
*/
|
179
|
+
primaryButtonText: _propTypes.default.string,
|
180
|
+
/**
|
181
|
+
* Optionally specify an href for your Button to become an <a> element
|
182
|
+
*/
|
183
|
+
secondaryButtonHref: _propTypes.default.string,
|
184
|
+
/**
|
185
|
+
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
186
|
+
*/
|
187
|
+
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
188
|
+
/**
|
189
|
+
* Establishes the kind of button displayed for the secondary button
|
190
|
+
*/
|
191
|
+
secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
|
192
|
+
/**
|
193
|
+
* Determines if the secondary button is on the top or bottom of the card
|
194
|
+
*/
|
195
|
+
secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
196
|
+
/**
|
197
|
+
* The text that's displayed in the secondary button
|
198
|
+
*/
|
199
|
+
secondaryButtonText: _propTypes.default.string,
|
138
200
|
/**
|
139
201
|
* Title that's displayed at the top of the card
|
140
202
|
*/
|
@@ -27,13 +27,16 @@ var FilterSummary = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref)
|
|
27
27
|
_ref$clearFilters = _ref.clearFilters,
|
28
28
|
clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
|
29
29
|
_ref$filters = _ref.filters,
|
30
|
-
filters = _ref$filters === void 0 ? [] : _ref$filters
|
30
|
+
filters = _ref$filters === void 0 ? [] : _ref$filters,
|
31
|
+
_ref$renderLabel = _ref.renderLabel,
|
32
|
+
renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
|
31
33
|
var tagFilters = filters.map(function (_ref2) {
|
34
|
+
var _renderLabel;
|
32
35
|
var key = _ref2.key,
|
33
36
|
value = _ref2.value;
|
34
37
|
return {
|
35
38
|
type: 'gray',
|
36
|
-
label: "".concat(key, ": ").concat(value)
|
39
|
+
label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
|
37
40
|
};
|
38
41
|
});
|
39
42
|
return /*#__PURE__*/_react2.default.createElement("div", {
|
@@ -57,7 +60,8 @@ FilterSummary.propTypes = {
|
|
57
60
|
className: _propTypes.default.string,
|
58
61
|
clearFilters: _propTypes.default.func.isRequired,
|
59
62
|
clearFiltersText: _propTypes.default.string,
|
60
|
-
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
|
63
|
+
filters: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
|
64
|
+
renderLabel: _propTypes.default.func
|
61
65
|
};
|
62
66
|
var _default = FilterSummary;
|
63
67
|
exports.default = _default;
|
@@ -233,7 +233,14 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
233
233
|
})), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
|
234
234
|
open: isOpen,
|
235
235
|
ref: detailsRef
|
236
|
-
},
|
236
|
+
},
|
237
|
+
/*#__PURE__*/
|
238
|
+
/* summary should not be considered non-interactive
|
239
|
+
* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/656
|
240
|
+
* https://github.com/A11yance/axobject-query/issues/319
|
241
|
+
*/
|
242
|
+
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
|
243
|
+
_react.default.createElement("summary", {
|
237
244
|
className: "".concat(blockClass, "__header"),
|
238
245
|
onClick: toggle
|
239
246
|
}, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
|
@@ -35,7 +35,7 @@ var ProductiveCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
35
35
|
var _ref$actionsPlacement = _ref.actionsPlacement,
|
36
36
|
actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
|
37
37
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
38
|
-
var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', '
|
38
|
+
var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
|
39
39
|
return /*#__PURE__*/_react.default.createElement(_Card.Card, (0, _extends2.default)({}, _objectSpread(_objectSpread({}, validProps), {}, {
|
40
40
|
actionsPlacement: actionsPlacement,
|
41
41
|
ref: ref
|
@@ -91,6 +91,10 @@ ProductiveCard.propTypes = {
|
|
91
91
|
* Function that's called from the primary button or action icon
|
92
92
|
*/
|
93
93
|
onPrimaryButtonClick: _propTypes.default.func,
|
94
|
+
/**
|
95
|
+
* Function that's called from the secondary button or action icon
|
96
|
+
*/
|
97
|
+
onSecondaryButtonClick: _propTypes.default.func,
|
94
98
|
/**
|
95
99
|
* Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
|
96
100
|
*/
|
@@ -120,6 +124,22 @@ ProductiveCard.propTypes = {
|
|
120
124
|
* The text that's displayed in the primary button
|
121
125
|
*/
|
122
126
|
primaryButtonText: _propTypes.default.node,
|
127
|
+
/**
|
128
|
+
* Optionally specify an href for your Button to become an <a> element
|
129
|
+
*/
|
130
|
+
secondaryButtonHref: _propTypes.default.string,
|
131
|
+
/**
|
132
|
+
* Optional prop to allow overriding the icon rendering. Can be a React component class
|
133
|
+
*/
|
134
|
+
secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
135
|
+
/**
|
136
|
+
* Determines if the secondary button is on the top or bottom of the card
|
137
|
+
*/
|
138
|
+
secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
|
139
|
+
/**
|
140
|
+
* The text that's displayed in the secondary button
|
141
|
+
*/
|
142
|
+
secondaryButtonText: _propTypes.default.node,
|
123
143
|
/**
|
124
144
|
* Title that's displayed at the top of the card
|
125
145
|
*/
|
@@ -30,7 +30,7 @@ var CustomBlocks = function CustomBlocks(_ref) {
|
|
30
30
|
key: "block-index--".concat(index)
|
31
31
|
}, block.title && /*#__PURE__*/_react.default.createElement("h3", {
|
32
32
|
id: (0, _changeCase.paramCase)(block.title)
|
33
|
-
}, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
|
33
|
+
}, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.image, block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
|
34
34
|
of: block.story
|
35
35
|
}), block.source && /*#__PURE__*/_react.default.createElement(_blocks.Source, source));
|
36
36
|
});
|
@@ -201,6 +201,10 @@ StoryDocsPage.propTypes = {
|
|
201
201
|
* Optional description, strings treated as markdown.
|
202
202
|
*/
|
203
203
|
description: _propTypes.default.node,
|
204
|
+
/**
|
205
|
+
* Optional block image
|
206
|
+
*/
|
207
|
+
image: _propTypes.default.node,
|
204
208
|
/**
|
205
209
|
* Story imported from story file
|
206
210
|
*/
|
@@ -210,7 +214,7 @@ StoryDocsPage.propTypes = {
|
|
210
214
|
* default language `jsx`
|
211
215
|
*/
|
212
216
|
source: _propTypes.default.shape({
|
213
|
-
language: _propTypes.default.oneOf('javascript', 'css', 'jsx'),
|
217
|
+
language: _propTypes.default.oneOf('javascript', 'css', 'jsx', 'json'),
|
214
218
|
code: _propTypes.default.string
|
215
219
|
})
|
216
220
|
})),
|
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.4.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -54,27 +54,27 @@
|
|
54
54
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
55
55
|
},
|
56
56
|
"devDependencies": {
|
57
|
-
"@babel/cli": "^7.
|
58
|
-
"@babel/core": "^7.22.
|
59
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
57
|
+
"@babel/cli": "^7.22.5",
|
58
|
+
"@babel/core": "^7.22.5",
|
59
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.37",
|
60
60
|
"chalk": "^4.1.2",
|
61
61
|
"change-case": "^4.1.2",
|
62
62
|
"copyfiles": "^2.4.1",
|
63
63
|
"cross-env": "^7.0.3",
|
64
64
|
"fs-extra": "^11.1.1",
|
65
|
-
"glob": "^10.
|
65
|
+
"glob": "^10.3.1",
|
66
66
|
"jest": "^29.5.0",
|
67
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
67
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.24",
|
68
68
|
"jest-environment-jsdom": "^29.5.0",
|
69
69
|
"namor": "^1.1.2",
|
70
|
-
"npm-check-updates": "^16.10.
|
70
|
+
"npm-check-updates": "^16.10.13",
|
71
71
|
"npm-run-all": "^4.1.5",
|
72
72
|
"rimraf": "^5.0.1",
|
73
|
-
"sass": "^1.
|
73
|
+
"sass": "^1.63.6",
|
74
74
|
"yargs": "^17.7.2"
|
75
75
|
},
|
76
76
|
"dependencies": {
|
77
|
-
"@babel/runtime": "^7.22.
|
77
|
+
"@babel/runtime": "^7.22.5",
|
78
78
|
"@carbon/telemetry": "^0.1.0",
|
79
79
|
"framer-motion": "^6.5.1 < 7",
|
80
80
|
"immutability-helper": "^3.1.1",
|
@@ -85,14 +85,14 @@
|
|
85
85
|
"react-window": "^1.8.9"
|
86
86
|
},
|
87
87
|
"peerDependencies": {
|
88
|
-
"@carbon/grid": "^11.
|
89
|
-
"@carbon/layout": "^11.
|
90
|
-
"@carbon/motion": "^11.
|
91
|
-
"@carbon/react": "^1.
|
92
|
-
"@carbon/themes": "^11.
|
93
|
-
"@carbon/type": "^11.
|
88
|
+
"@carbon/grid": "^11.16.1",
|
89
|
+
"@carbon/layout": "^11.16.1",
|
90
|
+
"@carbon/motion": "^11.13.1",
|
91
|
+
"@carbon/react": "^1.33.2",
|
92
|
+
"@carbon/themes": "^11.21.1",
|
93
|
+
"@carbon/type": "^11.20.1",
|
94
94
|
"react": "^16.8.6 || ^17.0.1",
|
95
95
|
"react-dom": "^16.8.6 || ^17.0.1"
|
96
96
|
},
|
97
|
-
"gitHead": "
|
97
|
+
"gitHead": "3e735167a2cc5e2a7e2f87069c4ae1bc31ce0736"
|
98
98
|
}
|
@@ -7,6 +7,7 @@
|
|
7
7
|
|
8
8
|
// Standard imports.
|
9
9
|
@use '@carbon/styles/scss/spacing' as *;
|
10
|
+
@use '@carbon/styles/scss/theme' as *;
|
10
11
|
@use '../../global/styles/project-settings' as c4p-settings;
|
11
12
|
@use '../../global/styles/mixins';
|
12
13
|
|
@@ -33,19 +34,25 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
33
34
|
:global(.#{c4p-settings.$carbon-prefix}--checkbox) {
|
34
35
|
display: none;
|
35
36
|
}
|
37
|
+
}
|
36
38
|
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
39
|
+
.#{$block-class}
|
40
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__row-size-options-container
|
41
|
+
.#{c4p-settings.$carbon-prefix}--popover-container
|
42
|
+
.#{c4p-settings.$carbon-prefix}--btn--icon-only {
|
43
|
+
display: flex;
|
44
|
+
width: $spacing-09;
|
45
|
+
height: $spacing-09;
|
46
|
+
align-items: center;
|
47
|
+
justify-content: center;
|
48
|
+
padding-top: 0;
|
42
49
|
}
|
43
50
|
|
44
|
-
.#{$block-class}
|
45
|
-
.#{c4p-settings.$
|
46
|
-
|
47
|
-
|
48
|
-
|
51
|
+
.#{$block-class}
|
52
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__row-size-options-container
|
53
|
+
.#{c4p-settings.$pkg-prefix}--datagrid__row-size-dropdown {
|
54
|
+
padding: $spacing-05;
|
55
|
+
background-color: $layer;
|
49
56
|
}
|
50
57
|
|
51
58
|
.#{$block-class}__datagridWrap-simple {
|
@@ -54,6 +54,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
|
|
54
54
|
padding-bottom: $spacing-06;
|
55
55
|
}
|
56
56
|
|
57
|
+
.#{$block-class}__side-panel-link {
|
58
|
+
padding-top: $spacing-01;
|
59
|
+
padding-bottom: $spacing-06;
|
60
|
+
}
|
61
|
+
|
57
62
|
.#{$block-class}__side-panel-section-inner {
|
58
63
|
display: flex;
|
59
64
|
padding: $spacing-01 0;
|
@@ -31,6 +31,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
|
|
31
31
|
.#{c4p-settings.$pkg-prefix}--card__header,
|
32
32
|
.#{c4p-settings.$pkg-prefix}--card__footer {
|
33
33
|
button {
|
34
|
+
// stylelint-disable-next-line carbon/theme-token-use
|
35
|
+
color: $white-0;
|
36
|
+
|
34
37
|
&:hover {
|
35
38
|
// stylelint-disable-next-line carbon/theme-token-use
|
36
39
|
background-color: $blue-60-hover;
|
@@ -54,12 +57,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
|
|
54
57
|
}
|
55
58
|
}
|
56
59
|
}
|
60
|
+
|
57
61
|
.#{c4p-settings.$pkg-prefix}--card__footer {
|
58
62
|
// stylelint-disable-next-line carbon/theme-token-use
|
59
63
|
background-color: $blue-60;
|
60
64
|
// stylelint-disable-next-line carbon/theme-token-use
|
61
65
|
color: $white-0;
|
62
66
|
}
|
67
|
+
|
63
68
|
.#{c4p-settings.$pkg-prefix}--loading {
|
64
69
|
animation-duration: $duration-slow-02;
|
65
70
|
animation-fill-mode: forwards;
|
@@ -71,7 +76,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
|
|
71
76
|
background-color: transparent;
|
72
77
|
}
|
73
78
|
}
|
79
|
+
|
80
|
+
.#{c4p-settings.$pkg-prefix}--card__header-container {
|
81
|
+
align-items: center;
|
82
|
+
}
|
74
83
|
}
|
84
|
+
|
75
85
|
&:not(.#{$block-class}__actions-bottom) {
|
76
86
|
&##{$block-class}--edit {
|
77
87
|
.#{c4p-settings.$pkg-prefix}--card__header {
|
@@ -77,6 +77,21 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
|
|
77
77
|
&::before {
|
78
78
|
opacity: 0;
|
79
79
|
}
|
80
|
+
|
81
|
+
+ .#{$block-class}__actions-header-ghost-button {
|
82
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
83
|
+
&::before {
|
84
|
+
opacity: 0;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
90
|
+
&:first-child:not(:last-child) {
|
91
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
92
|
+
&::before {
|
93
|
+
display: none;
|
94
|
+
}
|
80
95
|
}
|
81
96
|
}
|
82
97
|
|
@@ -127,6 +127,12 @@ $motion-duration: $duration-moderate-02;
|
|
127
127
|
width: 100%;
|
128
128
|
}
|
129
129
|
|
130
|
+
&.#{$block-class}--wide
|
131
|
+
.#{$pkg-prefix}--action-set
|
132
|
+
.#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
|
133
|
+
height: $spacing-11;
|
134
|
+
}
|
135
|
+
|
130
136
|
@include breakpoint(md) {
|
131
137
|
&.#{$block-class}--wide .#{$block-class}__container {
|
132
138
|
width: calc(100% - (2 * #{$spacing-10}));
|