From 0717e1e8f4e9e3f1995a693e1c95685b2e9e99c2 Mon Sep 17 00:00:00 2001 From: Neha Gokhale Date: Mon, 25 Mar 2024 11:53:22 -0700 Subject: [PATCH] #1703 Carbon 11, React 18, Webpack 5 for Elyra canvas (#1704) --- .../__tests__/_utils_/control-utils.js | 2 +- .../custom-components/CustomToggleCtrl.jsx | 12 +- .../__tests__/command-stack/command-stack.js | 3 - .../actions/button-action-test.js | 8 +- .../components/editor-form-test.js | 4 +- .../components/flexibletable-test.js | 4 - .../components/moveabletablerows-test.js | 3 - .../components/title-editor-test.js | 12 +- .../common-properties/controls/custom-test.js | 6 +- .../controls/datefield-test.js | 18 +-- .../controls/datepicker-range-test.js | 6 +- .../controls/datepicker-test.js | 6 +- .../controls/expression-test.js | 54 ++++---- .../common-properties/controls/list-test.js | 8 +- .../controls/multiselect-test.js | 22 +-- .../controls/numberfield-test.js | 12 +- .../controls/oneofselect-test.js | 28 ++-- .../controls/passwordfield-test.js | 2 +- .../controls/radioset-test.js | 8 +- .../controls/selectcolumn-test.js | 22 +-- .../controls/selectschema-test.js | 6 +- .../common-properties/controls/slider-test.js | 2 +- .../controls/spinner-test.js | 4 +- .../controls/structureeditor-test.js | 6 +- .../controls/structuretable-test.js | 4 +- .../controls/textarea-test.js | 2 +- .../controls/textfield-test.js | 2 +- .../controls/timefield-test.js | 10 +- .../common-properties/error-boundary-test.js | 4 +- .../operators/dm-condition-operators-test.js | 12 +- .../panels/columnselection-test.js | 20 +-- .../panels/tearsheet-test.js | 2 +- .../common-properties/panels/twisty-test.js | 30 ++-- .../properties-controller-test.js | 6 +- .../notification-panel-test.js | 2 +- .../__tests__/palette/palette-flyout-test.js | 2 +- .../__tests__/toolbar/toolbar-test.js | 10 +- canvas_modules/common-canvas/build.sh | 4 +- canvas_modules/common-canvas/jest-setup.js | 6 +- .../locales/common-properties/locales/en.json | 5 +- .../locales/common-properties/locales/eo.json | 5 +- canvas_modules/common-canvas/package.json | 35 ++--- canvas_modules/common-canvas/src/carbon.scss | 22 +++ .../src/color-picker/color-picker.scss | 4 +- .../src/common-canvas/cc-contents.jsx | 8 +- .../src/common-canvas/cc-state-tag.jsx | 6 +- .../src/common-canvas/cc-text-toolbar.jsx | 22 +-- .../src/common-canvas/common-canvas.scss | 53 ++++---- .../src/common-canvas/svg-canvas-d3.scss | 128 +++++++++--------- .../svg-canvas-utils-external.js | 18 ++- .../svg-canvas-utils-textarea.js | 2 +- .../actions/button/button.jsx | 4 +- .../actions/button/button.scss | 3 - .../actions/image/image.scss | 3 - .../components/control-item/control-item.scss | 16 +-- .../components/editor-form/editor-form.jsx | 35 +++-- .../components/editor-form/editor-form.scss | 38 +++--- .../components/empty-table/empty-table.jsx | 8 +- .../components/empty-table/empty-table.scss | 2 +- .../components/field-picker/field-picker.jsx | 7 +- .../components/field-picker/field-picker.scss | 6 +- .../flexible-table/flexible-table.jsx | 21 +-- .../flexible-table/flexible-table.scss | 17 +-- .../moveable-table-rows.jsx | 12 +- .../moveable-table-rows.scss | 12 +- .../properties-buttons/properties-buttons.jsx | 13 +- .../properties-buttons.scss | 15 +- .../properties-modal/properties-modal.jsx | 2 +- .../properties-modal/properties-modal.scss | 8 +- .../components/title-editor/title-editor.jsx | 18 +-- .../components/title-editor/title-editor.scss | 18 +-- .../truncated-content-tooltip.jsx | 2 +- .../validation-message.scss | 14 +- .../virtualized-table/virtualized-table.jsx | 18 +-- .../virtualized-table/virtualized-table.scss | 48 ++++--- .../components/wide-flyout/wide-flyout.scss | 10 +- .../common-properties/constants/constants.js | 8 +- .../controls/abstract-table.jsx | 18 +-- .../controls/abstract-table.scss | 8 +- .../controls/checkbox/checkbox.jsx | 30 ++-- .../controls/checkbox/checkbox.scss | 8 +- .../controls/checkboxset/checkboxset.jsx | 8 +- .../controls/checkboxset/checkboxset.scss | 5 +- .../controls/datefield/datefield.jsx | 27 ++-- .../datepicker-range/datepicker-range.jsx | 69 +++++----- .../datepicker-range/datepicker-range.scss | 2 +- .../controls/datepicker/datepicker.jsx | 45 +++--- .../controls/datepicker/datepicker.scss | 11 +- .../controls/dropdown/dropdown.jsx | 89 ++++++------ .../controls/dropdown/dropdown.scss | 23 ++-- .../expression-builder.scss | 6 +- .../expression-select-field-function.jsx | 10 +- .../expression-select-operator.jsx | 4 +- .../expression-toggle/expression-toggle.jsx | 15 +- .../expression-toggle/expression-toggle.scss | 2 +- .../controls/expression/expression.jsx | 7 +- .../controls/expression/expression.scss | 33 +++-- .../controls/multiselect/multiselect.jsx | 58 ++++---- .../controls/multiselect/multiselect.scss | 2 +- .../controls/numberfield/numberfield.jsx | 46 ++++--- .../controls/numberfield/numberfield.scss | 21 +-- .../controls/passwordfield/passwordfield.jsx | 33 ++--- .../controls/radioset/radioset.jsx | 6 +- .../controls/radioset/radioset.scss | 4 +- .../controls/slider/slider.jsx | 38 +++--- .../controls/slider/slider.scss | 16 ++- .../controls/someofselect/someofselect.scss | 6 +- .../controls/textarea/textarea.jsx | 48 ++++--- .../controls/textarea/textarea.scss | 5 - .../controls/textfield/textfield.jsx | 31 +++-- .../controls/textfield/textfield.scss | 10 +- .../controls/timefield/timefield.jsx | 27 ++-- .../controls/toggle/toggle.jsx | 13 +- .../controls/toggle/toggle.scss | 6 +- .../controls/toggletext/toggletext.jsx | 8 +- .../controls/toggletext/toggletext.scss | 15 +- .../src/common-properties/index.scss | 4 +- .../panels/control/control.scss | 4 +- .../panels/sub-panel/button.jsx | 4 +- .../panels/sub-panel/cell.jsx | 7 +- .../panels/sub-panel/sub-panel.scss | 4 +- .../panels/subtabs/subtabs.jsx | 35 +++-- .../panels/subtabs/subtabs.scss | 55 ++++---- .../panels/summary/summary.jsx | 8 +- .../panels/summary/summary.scss | 10 +- .../panels/tearsheet/tearsheet.jsx | 2 +- .../panels/tearsheet/tearsheet.scss | 34 ++--- .../panels/text-panel/text-panel.scss | 8 +- .../panels/twisty/twisty.jsx | 2 +- .../panels/twisty/twisty.scss | 7 +- .../properties-main/properties-main.jsx | 2 +- .../properties-main/properties-main.scss | 16 +-- .../src/context-menu/common-context-menu.jsx | 4 +- .../src/context-menu/context-menu.scss | 11 +- .../common-canvas/src/icons/icon.jsx | 66 ++++----- .../common-canvas/src/icons/icon.scss | 20 +-- canvas_modules/common-canvas/src/index.scss | 6 +- .../notification-panel/notification-panel.jsx | 10 +- .../notification-panel.scss | 62 ++++----- .../src/palette/palette-dialog-topbar.jsx | 8 +- .../palette-flyout-content-category.jsx | 6 +- .../palette/palette-flyout-content-search.jsx | 4 +- .../src/palette/palette-flyout-content.jsx | 2 +- .../common-canvas/src/palette/palette.scss | 88 ++++++------ .../common-canvas/src/themes/light.scss | 10 +- .../src/toolbar/toolbar-action-item.jsx | 2 +- .../src/toolbar/toolbar-button-item.jsx | 62 ++++----- .../src/toolbar/toolbar-overflow-item.jsx | 6 +- .../src/toolbar/toolbar-sub-menu-item.jsx | 5 +- .../common-canvas/src/toolbar/toolbar.scss | 80 +++++------ .../common-canvas/src/tooltip/tooltip.jsx | 2 +- .../common-canvas/src/tooltip/tooltip.scss | 30 ++-- canvas_modules/harness/Gruntfile.js | 18 ++- .../harness/assets/styles/carbon.scss | 23 ++++ .../harness/assets/styles/common.scss | 13 +- .../harness/assets/styles/harness.scss | 19 +-- .../cypress/e2e/canvas/decorators.cy.js | 6 +- .../e2e/properties/custom-controls.cy.js | 4 +- .../support/canvas/test-harness-cmds.js | 10 +- .../support/canvas/verification-cmds.js | 8 +- .../support/properties/properties-cmds.js | 4 +- .../properties-verification-cmds.js | 6 +- canvas_modules/harness/functional_test.sh | 10 +- canvas_modules/harness/lib/application.js | 1 - canvas_modules/harness/package.json | 48 +++---- canvas_modules/harness/src/client/App.js | 77 ++++++----- .../src/client/app-x-settings-panel.jsx | 6 +- .../common-properties-components.jsx | 6 +- .../common-properties-conditions.jsx | 4 +- .../client/components/console/console.scss | 8 +- .../components/ctrl/CustomEffectsCtrl.jsx | 22 +-- .../custom-canvases/explain2/explain2.scss | 22 +-- .../custom-canvases/flows/flows.scss | 36 ++--- .../custom-canvases/logic/logic.scss | 6 +- .../custom-canvases/progress/progress.jsx | 6 +- .../custom-canvases/progress/progress.scss | 20 +-- .../react-nodes-carbon.scss | 82 +++-------- .../react-nodes-carbon/wrapper-card-node.jsx | 64 ++++----- .../react-nodes-carbon/wrapper-shape-node.jsx | 32 ++--- .../mapping-container-node.jsx | 12 +- .../react-nodes-mapping.jsx | 6 +- .../react-nodes-mapping.scss | 3 +- .../custom-canvases/read-only/read-only.jsx | 8 +- .../custom-canvases/read-only/read-only.scss | 46 +++---- .../stages-card-node-canvas.jsx | 4 +- .../stages-card-node/stages-card-node.scss | 28 ++-- .../custom-canvases/stages/stages-canvas.jsx | 4 +- .../custom-canvases/stages/stages.scss | 30 ++-- .../streams/streams-canvas.jsx | 6 +- .../custom-components/CustomSliderCtrl.jsx | 8 +- .../custom-components/CustomToggleCtrl.jsx | 8 +- .../custom-controls/CustomEmmeansDroplist.js | 2 +- .../custom-panels/CustomButtonPanel.js | 6 +- .../custom-panels/RandomEffectsPanel.js | 6 +- .../sidepanel/api/sidepanel-api.jsx | 21 +-- .../sidepanel/canvas/sidepanel-canvas.jsx | 111 ++++++++------- .../properties/sidepanel-properties.jsx | 9 +- canvas_modules/harness/src/client/index.js | 10 +- canvas_modules/harness/src/styles/App.scss | 30 ++-- .../src/styles/canvas-customization.scss | 29 ++-- .../harness/src/styles/custom-controls.scss | 7 +- .../harness/src/styles/properties.scss | 48 +++---- .../harness/src/styles/sidepanel.scss | 25 ++-- canvas_modules/harness/webpack.config.dev.js | 12 +- canvas_modules/harness/webpack.config.prod.js | 16 ++- 205 files changed, 1813 insertions(+), 1782 deletions(-) create mode 100644 canvas_modules/common-canvas/src/carbon.scss create mode 100644 canvas_modules/harness/assets/styles/carbon.scss diff --git a/canvas_modules/common-canvas/__tests__/_utils_/control-utils.js b/canvas_modules/common-canvas/__tests__/_utils_/control-utils.js index f46726839f..cc65594efc 100644 --- a/canvas_modules/common-canvas/__tests__/_utils_/control-utils.js +++ b/canvas_modules/common-canvas/__tests__/_utils_/control-utils.js @@ -20,7 +20,7 @@ function getDropdownItems(wrapper, parameterId) { const dropdownButton = dropdownWrapper.find("button"); dropdownButton.simulate("click"); dropdownWrapper = wrapper.find(`div[data-id='properties-${parameterId}']`); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); return dropdownList; } diff --git a/canvas_modules/common-canvas/__tests__/_utils_/custom-components/CustomToggleCtrl.jsx b/canvas_modules/common-canvas/__tests__/_utils_/custom-components/CustomToggleCtrl.jsx index e58c691642..a54bf6f01d 100644 --- a/canvas_modules/common-canvas/__tests__/_utils_/custom-components/CustomToggleCtrl.jsx +++ b/canvas_modules/common-canvas/__tests__/_utils_/custom-components/CustomToggleCtrl.jsx @@ -16,9 +16,8 @@ import React from "react"; import PropTypes from "prop-types"; -import Icon from "carbon-components-react/lib/components/Icon"; -import Toggle from "carbon-components-react/lib/components/Toggle"; -import ToggleSmall from "carbon-components-react/lib/components/ToggleSmall"; +import { WarningFilled, ErrorFilled } from "@carbon/react/icons"; +import { Toggle } from "@carbon/react"; import { connect } from "react-redux"; class CustomToggleCtrl extends React.Component { @@ -43,9 +42,9 @@ class CustomToggleCtrl extends React.Component { if (this.props.messageInfo && this.props.messageInfo.text && !this.props.table) { messageText = this.props.messageInfo.text; if (this.props.messageInfo.type === "warning") { - icon = (); + icon = (); } else if (this.props.messageInfo.type === "error") { - icon = (); + icon = (); } } let visibility; @@ -71,7 +70,8 @@ class CustomToggleCtrl extends React.Component { /> ); if (this.props.table) { - toggle = ( { const button = wrapper.find("button"); expect(button).to.have.length(1); // verify button kind is secondary - expect(button.prop("className").includes("bx--btn--secondary")).to.equal(true); + expect(button.prop("className").includes("cds--btn--secondary")).to.equal(true); // verify button size is extra large - expect(button.prop("className").includes("bx--btn--xl")).to.equal(true); + expect(button.prop("className").includes("cds--btn--xl")).to.equal(true); }); it("action button default kind is tertiary and size is small", () => { const actionWithoutButtonObject = { @@ -181,9 +181,9 @@ describe("action-button renders correctly", () => { const button = wrapper.find("button"); expect(button).to.have.length(1); // verify default button kind is tertiary - expect(button.prop("className").includes("bx--btn--tertiary")).to.equal(true); + expect(button.prop("className").includes("cds--btn--tertiary")).to.equal(true); // verify default button size is small - expect(button.prop("className").includes("bx--btn--sm")).to.equal(true); + expect(button.prop("className").includes("cds--btn--sm")).to.equal(true); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/editor-form-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/editor-form-test.js index 0eb7e2903f..dd34508ec2 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/components/editor-form-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/components/editor-form-test.js @@ -36,7 +36,7 @@ describe("tabs and subtabs should be rendered correctly", () => { let category = wrapper.find("div[data-id='properties-Primary2']"); const subTabsContainer = category.find("div.properties-subtabs"); expect(subTabsContainer).to.have.length(1); - const subTabs = subTabsContainer.find("button.bx--tabs--scrollable__nav-link"); + const subTabs = subTabsContainer.find("button.cds--tabs--scrollable__nav-link"); expect(subTabs).to.have.length(3); subTabs.at(2).simulate("click"); category = wrapper.find("div[data-id='properties-Primary2']"); @@ -112,7 +112,7 @@ describe("controls should be rendered correctly when no uihints are provided", ( controller.updatePropertyValue({ name: "textfield" }, null); wrapper.update(); // validate message is created - expect(wrapper.find(".bx--form-requirement")).to.have.length(1); + expect(wrapper.find(".cds--form-requirement")).to.have.length(1); // valide no catagories(tabs) are created expect(wrapper.find(".properties-categories")).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js index edc3f223ee..92d1371791 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js @@ -21,15 +21,11 @@ import tableUtils from "./../../_utils_/table-utils"; import { mountWithIntl } from "../../_utils_/intl-utils"; import { expect } from "chai"; -import chai from "chai"; -import chaiEnzyme from "chai-enzyme"; import sinon from "sinon"; import fieldPickerParamDef from "./../../test_resources/paramDefs/fieldpicker_paramDef.json"; import glmmParamDef from "./../../test_resources/paramDefs/glmm_paramDef.json"; import propertyUtils from "../../_utils_/property-utils"; -chai.use(chaiEnzyme()); // Note the invocation at the end - const controller = new Controller(); const updateRowSelections = sinon.spy(); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/moveabletablerows-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/moveabletablerows-test.js index 4d15e1ef99..31ee07c1c6 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/components/moveabletablerows-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/components/moveabletablerows-test.js @@ -19,13 +19,10 @@ import MoveableTableRows from "../../../src/common-properties/components/moveabl import FlexibleTable from "../../../src/common-properties/components/flexible-table"; import { mountWithIntl } from "../../_utils_/intl-utils"; import { expect } from "chai"; -import chai from "chai"; -import chaiEnzyme from "chai-enzyme"; import sinon from "sinon"; import propertyUtils from "../../_utils_/property-utils"; import Controller from "../../../src/common-properties/properties-controller"; -chai.use(chaiEnzyme()); // Note the invocation at the end const handleRowClick = sinon.spy(); const setScrollToRow = sinon.spy(); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js b/canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js index 7a4631b31a..0cddc2e427 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js @@ -183,8 +183,8 @@ describe("title-editor renders correctly", () => { expect(titleChangeHandler.calledWith(newTitle)).to.be.true; // Verify warning message is displayed const warningMessage = "Title exceeds 10 characters. This is a warning message. There is no restriction on message length. Height is adjusted for multi-line messages."; - expect(wrapper.find(".bx--text-input__field-wrapper--warning")).to.have.length(1); - expect(wrapper.find(".bx--form-requirement").text()).to.equal(warningMessage); + expect(wrapper.find(".cds--text-input__field-wrapper--warning")).to.have.length(1); + expect(wrapper.find(".cds--form-requirement").text()).to.equal(warningMessage); }); it("Error message returned by titleChangeHandler should be displayed correctly", () => { controller.setTitle("test title"); @@ -204,8 +204,8 @@ describe("title-editor renders correctly", () => { // verify error message is displayed const errorMessage = "Only 15 characters are allowed in title."; - expect(wrapper.find(".bx--text-input__field-wrapper[data-invalid=true]")).to.have.length(1); - expect(wrapper.find(".bx--form-requirement").text()).to.equal(errorMessage); + expect(wrapper.find(".cds--text-input__field-wrapper[data-invalid=true]")).to.have.length(1); + expect(wrapper.find(".cds--form-requirement").text()).to.equal(errorMessage); }); it("Don't show any error/warning message when titleChangeHandler doesn't return anything", () => { controller.setTitle("test title"); @@ -224,7 +224,7 @@ describe("title-editor renders correctly", () => { expect(titleChangeHandler.calledWith(newTitle)).to.be.true; // verify no message is displayed - expect(wrapper.find(".bx--form-requirement")).to.have.length(0); + expect(wrapper.find(".cds--form-requirement")).to.have.length(0); }); it("Don't show any error/warning message when titleChangeHandler response is invalid", () => { controller.setTitle("test title"); @@ -244,7 +244,7 @@ describe("title-editor renders correctly", () => { expect(titleChangeHandler.calledWith(newTitle)).to.be.true; // verify no message is displayed - expect(wrapper.find(".bx--form-requirement")).to.have.length(0); + expect(wrapper.find(".cds--form-requirement")).to.have.length(0); }); it("test label is readonly", () => { helpClickHandler.resetHistory(); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js index 80e36ba9fc..c09b85b87b 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js @@ -78,7 +78,7 @@ describe("custom control renders correctly", () => { const dropdownButton = dropdownWrapper.find("button"); dropdownButton.simulate("click"); // open dropdown dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - let dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + let dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(1); // should have 1 item. Before custom toggle changes const customToggle = wrapper.find("div[data-id='properties-ci-custom_toggle']"); @@ -90,7 +90,7 @@ describe("custom control renders correctly", () => { // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(2); // should have 2 items. Custom toggle control updates the values toggle.getDOMNode().checked = false; @@ -98,7 +98,7 @@ describe("custom control renders correctly", () => { // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-colors']"); - dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(3); // should have 2 items. Custom toggle control updates the values }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js index f5040f695c..954bf4eab6 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js @@ -175,7 +175,7 @@ describe("datefield-control renders correctly", () => { /> ); const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']"); - expect(dateWrapper.find(".bx--text-input--light")).to.have.length(1); + expect(dateWrapper.find(".cds--text-input--light")).to.have.length(1); }); it("should render `DatefieldControl` with light mode disabled", () => { @@ -190,7 +190,7 @@ describe("datefield-control renders correctly", () => { /> ); const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']"); - expect(dateWrapper.find(".bx--text-input--light")).to.have.length(0); + expect(dateWrapper.find(".cds--text-input--light")).to.have.length(0); }); }); @@ -226,7 +226,7 @@ describe("error messages renders correctly for datefield controls", () => { }; const actual = controller.getErrorMessage({ name: "date_ymd" }); expect(datefieldErrorMessages).to.eql(actual); - let messageWrapper = dateWrapper.find("div.bx--form-requirement"); + let messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // Now simulate entering a valid date with the correct format. @@ -234,7 +234,7 @@ describe("error messages renders correctly for datefield controls", () => { dateWrapper = wrapper.find("div[data-id='properties-date_ymd']"); // Ensure the error message is no longer displayed. - messageWrapper = dateWrapper.find("div.bx--form-requirement"); + messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -261,7 +261,7 @@ describe("error messages renders correctly for datefield controls", () => { const actual = controller.getErrorMessage({ name: "date_ymd" }); expect(datefieldErrorMessages).to.eql(actual); - let messageWrapper = dateWrapper.find("div.bx--form-requirement"); + let messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // Now simulate entering a valid date with the correct format. @@ -269,7 +269,7 @@ describe("error messages renders correctly for datefield controls", () => { // Ensure the error message is no longer displayed. dateWrapper = wrapper.find("div[data-id='properties-date_ymd']"); - messageWrapper = dateWrapper.find("div.bx--form-requirement"); + messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -292,7 +292,7 @@ describe("error messages renders correctly for datefield controls", () => { }; const actual = controller.getErrorMessage({ name: "date_mdy" }); expect(datefieldErrorMessages).to.eql(actual); - let messageWrapper = dateWrapper.find("div.bx--form-requirement"); + let messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // Now simulate entering a valid date with the correct format. @@ -300,7 +300,7 @@ describe("error messages renders correctly for datefield controls", () => { // Ensure the error message is no longer displayed. dateWrapper = wrapper.find("div[data-id='properties-date_mdy']"); - messageWrapper = dateWrapper.find("div.bx--form-requirement"); + messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -312,7 +312,7 @@ describe("error messages renders correctly for datefield controls", () => { // Ensure an error message is not displayed. dateWrapper = wrapper.find("div[data-id='properties-date_ymd_non_req']"); - const messageWrapper = dateWrapper.find("div.bx--form-requirement"); + const messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js index 2b286a8f11..a22b57b0be 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js @@ -173,7 +173,7 @@ describe("error messages renders correctly for datepickerRange controls", () => }; const actual = controller.getErrorMessage(propertyId); expect(actual).to.eql(expectedDatepickerErrorMessages); - let messageWrapper = dateWrapper.find("div.bx--form-requirement"); + let messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(2); // Each input will display an error // Now simulate entering a valid date with the correct format. @@ -186,7 +186,7 @@ describe("error messages renders correctly for datepickerRange controls", () => // Ensure the error message is no longer displayed. dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker_range_required']"); - messageWrapper = dateWrapper.find("div.bx--form-requirement"); + messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -203,7 +203,7 @@ describe("error messages renders correctly for datepickerRange controls", () => // Ensure an error message is not displayed. dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker']"); - const messageWrapper = dateWrapper.find("div.bx--form-requirement"); + const messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js index 5a99b84dc0..2ed5d9cd57 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js @@ -158,7 +158,7 @@ describe("error messages renders correctly for datepicker controls", () => { }; const actual = controller.getErrorMessage(propertyId); expect(actual).to.eql(expectedDatepickerErrorMessages); - let messageWrapper = dateWrapper.find("div.bx--form-requirement"); + let messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // Now simulate entering a valid date with the correct format. @@ -168,7 +168,7 @@ describe("error messages renders correctly for datepicker controls", () => { // Ensure the error message is no longer displayed. dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker_required']"); - messageWrapper = dateWrapper.find("div.bx--form-requirement"); + messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -184,7 +184,7 @@ describe("error messages renders correctly for datepicker controls", () => { // Ensure an error message is not displayed. dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker']"); - const messageWrapper = dateWrapper.find("div.bx--form-requirement"); + const messageWrapper = dateWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js index 85510bf7e9..1cdb7f6597 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/expression-test.js @@ -424,9 +424,9 @@ describe("expression-builder renders correctly", () => { }); // Navigate to Information table - var dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + var dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - var dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + var dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(2).simulate("click"); expect(wrapper.find("div.properties-expression-function-select span").text()).to.equal("Information"); @@ -718,9 +718,9 @@ describe("expression builder generates and accesses field dropdown correctly", ( ); expect(wrapper.find("div.properties-expression-field-select span").text()).to.equal("Fields"); - const dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + const dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - var dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + var dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); // check that all dropdown options are loaded expect(dropDownList).to.have.length(5); // selecting the dropdown list has the correct entries @@ -732,7 +732,7 @@ describe("expression builder generates and accesses field dropdown correctly", ( // select an option dropDownList.at(2).simulate("click"); // properly close the dropdown once selected - expect(wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item")).to.have.length(0); + expect(wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item")).to.have.length(0); expect(wrapper.find("div.properties-expression-field-select span").text()).to.equal("Globals"); }); @@ -749,7 +749,7 @@ describe("expression builder generates and accesses field dropdown correctly", ( ); var dropDown = wrapper.find("div.properties-expression-field-select button"); dropDown.simulate("click"); - var dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + var dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); // test globals dropDownList.at(2).simulate("click"); expect(wrapper.find("div.properties-expression-field-select span").text()).to.equal("Globals"); @@ -766,7 +766,7 @@ describe("expression builder generates and accesses field dropdown correctly", ( // test mrs dropDown = wrapper.find("div.properties-expression-field-select button"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(3).simulate("click"); expect(wrapper.find("div.properties-expression-field-select span").text()).to.equal("Multi Response Set"); addFieldButtons.at(0).simulate("click"); @@ -951,9 +951,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () expect(fieldRows).to.have.length(4); // navigate to Recently Used fields and check that it is empty - var dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + var dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - var dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + var dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); expect(wrapper.find("div.properties-expression-field-select span").text()).to.equal("Recently Used"); expect(wrapper.find("div.properties-field-table-container .properties-vt-column").at(0) @@ -963,9 +963,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () fieldRows = tableUtils.getTableRows(wrapper.find("div.properties-field-table-container")); expect(fieldRows).to.have.length(0); // back to Fields - dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(0).simulate("click"); fieldRows = tableUtils.getTableRows(wrapper.find("div.properties-field-table-container")); // add two rows to Recently Used @@ -973,9 +973,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () addButtons.at(0).simulate("click"); addButtons.at(1).simulate("click"); // back to Recently used - dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); // check that the fields were correctly added fieldRows = tableUtils.getTableRows(wrapper.find("div.properties-field-table-container")); @@ -987,17 +987,17 @@ describe("expression builder correctly runs Recently Used dropdown options", () expect(valueRows).to.have.length(3); expect(valueRows.at(2).text()).to.equal("not specified"); // check that reusing a field will move it to the top of Recently Used - dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(0).simulate("click"); fieldRows = tableUtils.getTableRows(wrapper.find("div.properties-field-table-container")); // add Age again, moving it to the top of Recently Used addButtons.at(0).simulate("click"); // back to Recently Used - dropDown = wrapper.find("div.properties-expression-field-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-field-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); // order of rows should be reversed fieldRows = tableUtils.getTableRows(wrapper.find("div.properties-field-table-container")); @@ -1024,9 +1024,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () let funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); expect(funcRows).to.have.length(4); // navigate to Recently Used fields and check that it is empty - var dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + var dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - var dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + var dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); expect(wrapper.find("div.properties-expression-function-select span").text()).to.equal("Recently Used"); expect(wrapper.find("div.properties-functions-table-container .properties-vt-column").at(0) @@ -1036,9 +1036,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); expect(funcRows).to.have.length(0); // back to General Functions - dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(0).simulate("click"); funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); // add two rows to Recently Used @@ -1046,9 +1046,9 @@ describe("expression builder correctly runs Recently Used dropdown options", () addFuncButtons.at(0).simulate("click"); addFuncButtons.at(1).simulate("click"); // back to Recently used - dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); // check that the functions were correctly added funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); @@ -1056,18 +1056,18 @@ describe("expression builder correctly runs Recently Used dropdown options", () expect(funcRows.at(0).text()).to.equal("count_equal(Item, List)Integer"); expect(funcRows.at(1).text()).to.equal("to_integer(Item)[Esperanto~Integer~~eo]"); // check that reusing a function will move it to the top of Recently Used - dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(0).simulate("click"); funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); // add to_integer again, moving it to the top of Recently Used const addButtons = getAddButtonsList(funcRows); addButtons.at(0).simulate("click"); // back to Recently Used - dropDown = wrapper.find("div.properties-expression-function-select .bx--list-box__field"); + dropDown = wrapper.find("div.properties-expression-function-select .cds--list-box__field"); dropDown.simulate("click"); - dropDownList = wrapper.find("div.bx--list-box__menu .bx--list-box__menu-item"); + dropDownList = wrapper.find("div.cds--list-box__menu .cds--list-box__menu-item"); dropDownList.at(1).simulate("click"); // order of rows should be reversed funcRows = tableUtils.getTableRows(wrapper.find("div.properties-functions-table-container")); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/list-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/list-test.js index 0dee5e202b..4d581386cd 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/list-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/list-test.js @@ -435,7 +435,7 @@ describe("list renders correctly as a nested control", () => { summaryPanel = propertyUtils.openSummaryPanel(wrapper, "nested-list-summary-panel"); onPanelList = summaryPanel.find(".properties-onpanel-container") .find("div[data-id='properties-ctrl-complexListStructurelisteditor_list']"); - const textinputs = onPanelList.find(".bx--text-input__field-wrapper"); + const textinputs = onPanelList.find(".cds--text-input__field-wrapper"); expect(textinputs).to.have.length(2); textinputs.at(0).find("input") .simulate("change", { target: { value: "new value list 0" } }); @@ -487,7 +487,7 @@ describe("list renders correctly as a nested control", () => { summaryPanel = propertyUtils.openSummaryPanel(wrapper, "nested-list-summary-panel"); onPanelList = summaryPanel.find(".properties-onpanel-container") .find("div[data-id='properties-ctrl-complexListStructurelisteditor_list']"); - const secondTextinputs = onPanelList.find(".bx--text-input__field-wrapper"); + const secondTextinputs = onPanelList.find(".cds--text-input__field-wrapper"); expect(secondTextinputs).to.have.length(1); secondTextinputs.find("input").simulate("change", { target: { value: "new value list 10" } }); tableData = renderedController.getPropertyValue(propertyId); @@ -528,7 +528,7 @@ describe("list renders correctly as a nested control", () => { // edit nested list row index 0 subPanelTable = wrapper.find("div[data-id='properties-complexListStructuretables']"); - let textinputs = subPanelTable.find(".bx--text-input__field-wrapper"); + let textinputs = subPanelTable.find(".cds--text-input__field-wrapper"); expect(textinputs).to.have.length(2); textinputs.at(0).find("input") .simulate("change", { target: { value: "new value list 0" } }); @@ -564,7 +564,7 @@ describe("list renders correctly as a nested control", () => { // edit nested list row index 0 subPanelTable = wrapper.find("div[data-id='properties-complexListStructuretables']").at(1); - textinputs = subPanelTable.find(".bx--text-input__field-wrapper"); + textinputs = subPanelTable.find(".cds--text-input__field-wrapper"); expect(textinputs).to.have.length(1); textinputs.find("input").simulate("change", { target: { value: "new value list 10" } }); tableData = renderedController.getPropertyValue(propertyId); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js index 580b2eda5c..05cb1f8028 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/multiselect-test.js @@ -117,7 +117,7 @@ describe("multiselect renders correctly", () => { // select the first item multiselectWrapper = wrapper.find("div[data-id='properties-test-multiselect']"); - const multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + const multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.be.length(4); multiselectList.at(0).simulate("click"); const expectedValue = [multiselectList.at(0).text()]; @@ -143,7 +143,7 @@ describe("multiselect renders correctly", () => { multiselectButton.simulate("click"); // select the first item multiselectWrapper = wrapper.find("div[data-id='properties-test-multiselect']"); - const multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + const multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.be.length(4); multiselectList.at(0).simulate("click"); const expectedValue = [multiselectList.at(0).text()]; @@ -194,7 +194,7 @@ describe("multiselect renders correctly", () => { multiselectButton.simulate("click"); multiselectWrapper = wrapper.find("div[data-id='properties-test-multiselect']"); // select the first item - const multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + const multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.be.length(2); }); @@ -213,7 +213,7 @@ describe("multiselect renders correctly", () => { /> ); const multiselectWrapper = wrapper.find("div[data-id='properties-test-multiselect']"); - const messageWrapper = multiselectWrapper.find("div.bx--form-requirement"); + const messageWrapper = multiselectWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); }); @@ -241,7 +241,7 @@ describe("multiselect paramDef works correctly", () => { multiselectWrapper.update(); multiselectWrapper = wrapper.find("div[data-id='properties-multiselect_custom_labels']"); - const multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + const multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.have.length(6); multiselectList.at(0).simulate("click"); @@ -259,7 +259,7 @@ describe("multiselect paramDef works correctly", () => { multiselectWrapper.update(); multiselectWrapper = wrapper.find("div[data-id='properties-multiselect_multiple_selected']"); - const multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + const multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.have.length(6); // The options are not in the order they are defined. Test to verify "Custom" is in the text @@ -298,7 +298,7 @@ describe("multiselect paramDef works correctly", () => { table.update(); table = wrapper.find("div[data-id='properties-ci-multiselect_table']"); - const subPanelMultiselectList = table.find("div.bx--list-box__menu-item"); + const subPanelMultiselectList = table.find("div.cds--list-box__menu-item"); expect(subPanelMultiselectList).to.have.length(6); subPanelMultiselectList.at(1).simulate("click"); @@ -324,7 +324,7 @@ describe("multiselect paramDef works correctly", () => { table.update(); table = wrapper.find("div[data-id='properties-ci-multiselect_table']"); - const multiselectList = table.find("div.bx--list-box__menu-item"); + const multiselectList = table.find("div.cds--list-box__menu-item"); expect(multiselectList).to.have.length(4); multiselectList.at(0).simulate("click"); @@ -334,7 +334,7 @@ describe("multiselect paramDef works correctly", () => { it("multiselect control should have aria-label", () => { const multiselectWrapper = wrapper.find("div[data-id='properties-ctrl-multiselect_multiple_selected']"); - const multiselectAriaLabelledby = multiselectWrapper.find(".bx--list-box__menu").prop("aria-labelledby"); + const multiselectAriaLabelledby = multiselectWrapper.find(".cds--list-box__menu").prop("aria-labelledby"); expect( multiselectWrapper .find(`#${multiselectAriaLabelledby}`) @@ -380,7 +380,7 @@ describe("multiselect filters work correctly", () => { let multiselectButton = multiselectWrapper.find("button"); multiselectButton.simulate("click"); multiselectWrapper = wrapper.find("div[data-id='properties-multiselect_filtered']"); - let multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + let multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.be.length(6); @@ -392,7 +392,7 @@ describe("multiselect filters work correctly", () => { multiselectButton = multiselectWrapper.find("button"); multiselectButton.simulate("click"); multiselectWrapper = wrapper.find("div[data-id='properties-multiselect_filtered']"); - multiselectList = multiselectWrapper.find("div.bx--list-box__menu-item"); + multiselectList = multiselectWrapper.find("div.cds--list-box__menu-item"); expect(multiselectList).to.be.length(3); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js index c7d879ade8..f050a45d90 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/numberfield-test.js @@ -81,8 +81,8 @@ describe("numberfield-control renders correctly", () => { propertyId={propertyId} /> ); - expect(wrapper.find(".bx--number--nosteppers")).to.have.length(1); - expect(wrapper.find(".bx--number__controls")).to.have.length(0); + expect(wrapper.find(".cds--number--nosteppers")).to.have.length(1); + expect(wrapper.find(".cds--number__controls")).to.have.length(0); }); it("numberfield should set placeholder text", () => { @@ -141,7 +141,7 @@ describe("numberfield-control renders correctly", () => { /> ); const textWrapper = wrapper.find("div[data-id='properties-test-number']"); - const messageWrapper = textWrapper.find("div.bx--form-requirement"); + const messageWrapper = textWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); }); @@ -260,8 +260,8 @@ describe("numberfield control works correctly", () => { propertyUtils.openSummaryPanel(wrapper, "numberfield-table-summary"); const numberfieldInTable = wrapper.find(".properties-table-cell-control").find(".properties-numberfield"); numberfieldInTable.forEach((numberfieldInTableCell) => { - expect(numberfieldInTableCell.find(".bx--number--nosteppers")).to.have.length(1); - expect(numberfieldInTableCell.find(".bx--number__controls")).to.have.length(0); + expect(numberfieldInTableCell.find(".cds--number--nosteppers")).to.have.length(1); + expect(numberfieldInTableCell.find(".cds--number__controls")).to.have.length(0); }); }); it("should display error when invalid number is entered", () => { @@ -271,7 +271,7 @@ describe("numberfield control works correctly", () => { integerNumber.simulate("change", { target: { value: "44e+-" } }); // Verify error is displayed const intergerWrapper = wrapper.find("div[data-id='properties-number_int']"); - const messageWrapper = intergerWrapper.find(".bx--form-requirement"); + const messageWrapper = intergerWrapper.find(".cds--form-requirement"); expect(messageWrapper).to.have.length(1); expect(messageWrapper.text()).to.eql("Number is not valid."); // Verify property value is NOT updated to invalid number diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js index 61508af304..2615885ad7 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js @@ -110,7 +110,7 @@ describe("oneofselect renders correctly", () => { // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-test-oneofselect']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); dropdownList.at(0).simulate("click"); expect(controller.getPropertyValue(propertyId)).to.equal(control.values[0]); @@ -134,7 +134,7 @@ describe("oneofselect renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-test-oneofselect']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); dropdownList.at(0).simulate("click"); expect(controller.getPropertyValue(propertyId)).to.equal(control.values[0]); @@ -197,7 +197,7 @@ describe("oneofselect renders correctly", () => { dropdownButton.simulate("click"); dropdownWrapper = wrapper.find("div[data-id='properties-test-oneofselect']"); // select the first item - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(2); }); it("dropdown renders messages correctly", () => { @@ -215,7 +215,7 @@ describe("oneofselect renders correctly", () => { /> ); const dropdownWrapper = wrapper.find("div[data-id='properties-test-oneofselect']"); - const messageWrapper = dropdownWrapper.find("div.bx--form-requirement"); + const messageWrapper = dropdownWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); }); @@ -237,7 +237,7 @@ describe("oneofselect paramDef works correctly", () => { const dropdownButton = dropdownWrapper.find("button"); dropdownButton.simulate("click"); dropdownWrapper = wrapper.find("div[data-id='properties-ctrl-oneofselect_null_empty_enum']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); // In oneofselect_paramDef.json, enum value "gold" is assigned a label "Goldilocks" expect(oneofselectParamDef.resources["oneofselect_null_empty_enum.gold.label"]).to.equal("Goldilocks"); // Enum label "Goldilocks" has been rendered for enum value "gold". @@ -249,7 +249,7 @@ describe("oneofselect paramDef works correctly", () => { const dropdownButton = dropdownWrapper.find("button"); dropdownButton.simulate("click"); dropdownWrapper = wrapper.find("div[data-id='properties-ctrl-oneofselect_null_empty_enum']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); // In our paramDef, enum value has a space in it "blue green" and is assigned a label "Blue Green" expect(oneofselectParamDef.resources["oneofselect_null_empty_enum.blue green.label"]).to.equal("Blue Green"); // Enum value with a space can be assigned a label and renders as expected. @@ -275,12 +275,12 @@ describe("oneofselect paramDef works correctly", () => { it("oneofselect control should have aria-label", () => { // Dropdown should have aria-label const dropdownWrapper = wrapper.find("div[data-id='properties-ctrl-oneofselect']"); - const dropdownAriaLabelledby = dropdownWrapper.find(".bx--list-box__menu").prop("aria-labelledby"); + const dropdownAriaLabelledby = dropdownWrapper.find(".cds--list-box__menu").prop("aria-labelledby"); expect(dropdownWrapper.find(`#${dropdownAriaLabelledby}`).text()).to.equal("oneofselect(required)"); // combobox should have aria-label const comboboxWrapper = wrapper.find("div[data-id='properties-ctrl-oneofselect_custom_value']"); - const comboboxAriaLabel = comboboxWrapper.find(".bx--list-box__menu").prop("aria-label"); + const comboboxAriaLabel = comboboxWrapper.find(".cds--list-box__menu").prop("aria-label"); expect(comboboxAriaLabel).to.equal("oneofselect custom value allowed"); }); }); @@ -303,10 +303,10 @@ describe("oneofselect filters work correctly", () => { dropdownButton.simulate("click"); // validate the correct number of options show up on open dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect_filtered']"); - let dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + let dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.have.length(4); // make sure there isn't warning on first open - expect(dropdownWrapper.find("div.bx--form-requirement")).to.have.length(0); + expect(dropdownWrapper.find("div.cds--form-requirement")).to.have.length(0); // checked the filter box const checkboxWrapper = wrapper.find("div[data-id='properties-filter']"); const checkbox = checkboxWrapper.find("input"); @@ -314,7 +314,7 @@ describe("oneofselect filters work correctly", () => { checkbox.simulate("change"); // validate the correct number of options show up on open dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect_filtered']"); - dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.have.length(3); }); @@ -466,10 +466,10 @@ describe("oneofselect with custom value allowed works correctly", () => { expect(dropdownInput.text()).to.equal(""); // Verify dropdown items - const dropdownMenu = dropdownWrapper.find(".bx--list-box__menu-icon"); + const dropdownMenu = dropdownWrapper.find(".cds--list-box__menu-icon"); dropdownMenu.simulate("click"); dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); - expect(dropdownWrapper.find(".bx--list-box__menu-item")).to.have.length(6); + expect(dropdownWrapper.find(".cds--list-box__menu-item")).to.have.length(6); }); it("should display the custom value entered", () => { @@ -507,7 +507,7 @@ describe("oneofselect with custom value allowed works correctly", () => { const dropdownInput = dropdownWrapper.find("input"); dropdownInput.simulate("click"); dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(2); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js index a7e72d0630..9d9868b168 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/passwordfield-test.js @@ -178,7 +178,7 @@ describe("Passwordfield renders correctly", () => { /> ); const passwordWrapper = wrapper.find("div[data-id='properties-test-password']"); - const messageWrapper = passwordWrapper.find("div.bx--form-requirement"); + const messageWrapper = passwordWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); it("Passwordfield eyeIcon tooltip default content appears correctly", () => { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js index d21ae0fae1..90a6fea98f 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/radioset-test.js @@ -316,7 +316,7 @@ describe("radioset works in table correctly", () => { expect(tableDiv.find(".properties-vt-row-selected")).to.have.length(1); const onPanelRadioset = wrapper.find("div[data-id='properties-radioset_col2']"); - const onPanelRadios = onPanelRadioset.find("input.bx--radio-button"); + const onPanelRadios = onPanelRadioset.find("input.cds--radio-button"); expect(onPanelRadios).to.have.length(4); expect(renderedController.getPropertyValue(tableRadioPropertyId)[0][1]).to.equal("pear"); onPanelRadios.at(1).simulate("change"); @@ -329,7 +329,7 @@ describe("radioset works in table correctly", () => { expect(subpanelButton).to.have.length(1); subpanelButton.simulate("click"); const subpanelRadioset = wrapper.find("div[data-id='properties-radioset_col3']"); - const subpanelRadios = subpanelRadioset.find("input.bx--radio-button"); + const subpanelRadios = subpanelRadioset.find("input.cds--radio-button"); expect(subpanelRadios).to.have.length(6); subpanelRadios.at(1).simulate("change"); expect(renderedController.getPropertyValue(tableRadioPropertyId)[0][3]).to.equal("green"); @@ -341,7 +341,7 @@ describe("radioset works in table correctly", () => { tableDiv = wrapper.find(".properties-vt"); const onPanelRadioset = wrapper.find("div[data-id='properties-radioset_col2']"); - const onPanelRadios = onPanelRadioset.find("input.bx--radio-button"); + const onPanelRadios = onPanelRadioset.find("input.cds--radio-button"); expect(renderedController.getPropertyValue(tableRadioPropertyId)[0][1]).to.equal("pear"); onPanelRadios.at(1).simulate("change"); expect(renderedController.getPropertyValue(tableRadioPropertyId)[0][1]).to.equal("orange"); @@ -362,7 +362,7 @@ describe("radioset works in table correctly", () => { const subpanelButton = tableDiv.find(".properties-table-subcell").find("button.properties-subpanel-button"); subpanelButton.simulate("click"); const subpanelRadioset = wrapper.find("div[data-id='properties-radioset_col3']"); - const subpanelRadios = subpanelRadioset.find("input.bx--radio-button"); + const subpanelRadios = subpanelRadioset.find("input.cds--radio-button"); subpanelRadios.at(1).simulate("change"); expect(renderedController.getPropertyValue(tableRadioPropertyId)[0][3]).to.equal("green"); // selecting the disabled option should default to first radio in the list, red, instead of orange diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js index 6e8847010e..4e19c31826 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js @@ -121,7 +121,7 @@ describe("selectcolumn control renders correctly", () => { /> ); const dropdownWrapper = wrapper.find("div[data-id='properties-targetField']"); - const messageWrapper = dropdownWrapper.find("div.bx--form-requirement"); + const messageWrapper = dropdownWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); @@ -144,7 +144,7 @@ describe("selectcolumn control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-targetField']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); expect(dropdownList.at(0).text()).to.equal(emptyValueIndicator); }); @@ -168,7 +168,7 @@ describe("selectcolumn control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-targetField']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(1); expect(dropdownList.at(0).text()).to.equal(emptyValueIndicator); }); @@ -193,7 +193,7 @@ describe("selectcolumn control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-targetField']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); dropdownList.at(0).simulate("click"); expect(controller.getPropertyValue(propertyId)).to.equal(""); @@ -392,17 +392,17 @@ describe("selectcolumn control renders correctly with paramDef", () => { dropdownButton.simulate("click"); // select the first item selectField = wrapper.find("div[data-id='properties-field_placeholder'] Dropdown"); - let dropdownList = selectField.find("div.bx--list-box__menu-item"); + let dropdownList = selectField.find("div.cds--list-box__menu-item"); dropdownList.at(2).simulate("click"); selectField = wrapper.find("div[data-id='properties-field_placeholder'] Dropdown"); dropdownButton = selectField.find("button"); dropdownButton.simulate("click"); // select the first item selectField = wrapper.find("div[data-id='properties-field_placeholder'] Dropdown"); - dropdownList = selectField.find("div.bx--list-box__menu-item"); + dropdownList = selectField.find("div.cds--list-box__menu-item"); dropdownList.at(0).simulate("click"); selectField = wrapper.find("div[data-id='properties-field_placeholder'] Dropdown"); - const errorMsgDiv = selectField.find("div.bx--form-requirement"); + const errorMsgDiv = selectField.find("div.cds--form-requirement"); expect(errorMsgDiv).to.have.length(0); }); @@ -414,7 +414,7 @@ describe("selectcolumn control renders correctly with paramDef", () => { it("selectcolumn control should have aria-label", () => { const selectColumnWrapper = wrapper.find("div[data-id='properties-ctrl-field1_panel']"); - const selectColumnAriaLabelledby = selectColumnWrapper.find(".bx--list-box__menu").prop("aria-labelledby"); + const selectColumnAriaLabelledby = selectColumnWrapper.find(".cds--list-box__menu").prop("aria-labelledby"); expect(selectColumnWrapper.find(`#${selectColumnAriaLabelledby}`).text()).to.equal("Field1 Panel(required)"); }); @@ -440,14 +440,14 @@ describe("selectcolumn control renders correctly with paramDef", () => { let dropdownButton = fieldWrapperDropdown.find("button"); dropdownButton.simulate("click"); fieldWrapperDropdown = wrapper.find("div[data-id='properties-field'] Dropdown"); - let dropdownList = fieldWrapperDropdown.find("div.bx--list-box__menu-item"); + let dropdownList = fieldWrapperDropdown.find("div.cds--list-box__menu-item"); dropdownList.at(2).simulate("click"); let fieldWarningWrapperDropdown = wrapper.find("div[data-id='properties-field_warning'] Dropdown"); dropdownButton = fieldWarningWrapperDropdown.find("button"); dropdownButton.simulate("click"); fieldWarningWrapperDropdown = wrapper.find("div[data-id='properties-field_warning'] Dropdown"); - dropdownList = fieldWarningWrapperDropdown.find("div.bx--list-box__menu-item"); + dropdownList = fieldWarningWrapperDropdown.find("div.cds--list-box__menu-item"); dropdownList.at(2).simulate("click"); // Verify alerts are cleared by checking first tab is not the alert tab @@ -504,7 +504,7 @@ describe("selectcolumn works correctly with multi input schemas", () => { dropdownButton.simulate("click"); // select the first item selectField = wrapper.find("div[data-id='properties-field'] Dropdown"); - const dropdownList = selectField.find("div.bx--list-box__menu-item"); + const dropdownList = selectField.find("div.cds--list-box__menu-item"); dropdownList.at(15).simulate("click"); const expectedValue = { link_ref: "1", field_name: "Na" }; expect(controller.getPropertyValue({ name: "field" })).to.eql(expectedValue); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectschema-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectschema-test.js index 9204764c1a..f500677e0d 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/selectschema-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/selectschema-test.js @@ -83,7 +83,7 @@ describe("selectschema renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-test-selectschema']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(1); expect(dropdownList.at(0).text()).to.equal(emptyValueIndicator); }); @@ -127,13 +127,13 @@ describe("selectschema works correctly in common-properties", () => { dropdownButton.simulate("click"); // select the first item dropDown = wrapper.find("div[data-id='properties-selectschema'] Dropdown"); - const dropdownList = dropDown.find("div.bx--list-box__menu-item"); + const dropdownList = dropDown.find("div.cds--list-box__menu-item"); dropdownList.at(0).simulate("click"); expect(propertiesController.getPropertyValue({ name: "selectschema" })).to.equal(""); }); it("selectschema control should have aria-label", () => { const dropDown = wrapper.find("div[data-id='properties-selectschema'] Dropdown"); - const dropdownAriaLabelledby = dropDown.find(".bx--list-box__menu").prop("aria-labelledby"); + const dropdownAriaLabelledby = dropDown.find(".cds--list-box__menu").prop("aria-labelledby"); expect(dropDown.find(`#${dropdownAriaLabelledby}`).text()).to.equal("selectschema(required)"); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js index a6400a9319..6d386d5e90 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js @@ -23,7 +23,7 @@ import Controller from "./../../../src/common-properties/properties-controller"; import { Provider } from "react-redux"; import { expect } from "chai"; import sinon from "sinon"; -import { Slider } from "carbon-components-react"; +import { Slider } from "@carbon/react"; import SliderControl from "./../../../src/common-properties/controls/slider"; import sliderParamDef from "../../test_resources/paramDefs/slider_paramDef.json"; diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/spinner-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/spinner-test.js index 952d070d0d..9596b3798a 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/spinner-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/spinner-test.js @@ -108,8 +108,8 @@ describe("spinner-control renders correctly", () => { propertyId={propertyId} /> ); - expect(wrapper.find(".bx--number--nosteppers")).to.have.length(0); - expect(wrapper.find(".bx--number__controls")).to.have.length(1); + expect(wrapper.find(".cds--number--nosteppers")).to.have.length(0); + expect(wrapper.find(".cds--number__controls")).to.have.length(1); }); it("should set correct state value when integer increment in `SpinnerControl`", () => { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/structureeditor-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/structureeditor-test.js index 75641b335e..72462dd275 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/structureeditor-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/structureeditor-test.js @@ -171,7 +171,7 @@ describe("structureeditor control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-group-o-fields_0']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); expect(dropdownList.at(0).text()).to.equal(emptyValueIndicator); }); @@ -197,7 +197,7 @@ describe("structureeditor control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-group-o-fields_0']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(1); expect(dropdownList.at(0).text()).to.equal(emptyValueIndicator); }); @@ -223,7 +223,7 @@ describe("structureeditor control renders correctly", () => { dropdownButton.simulate("click"); // select the first item dropdownWrapper = wrapper.find("div[data-id='properties-group-o-fields_0']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(4); dropdownList.at(0).simulate("click"); const value = controller.getPropertyValue(propertyId); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js index 7f51de00ec..215f1cff4d 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/structuretable-test.js @@ -1155,7 +1155,7 @@ describe("structuretable with long text input values should render as readonly", const subpanelTable = tables.at(1); // second one is the textarea in subpanel flyout expect(subpanelTable.find("textarea").prop("disabled")).to.equal(true); - const validationMsg = subpanelTable.find("div.bx--form-requirement"); + const validationMsg = subpanelTable.find("div.cds--form-requirement"); expect(validationMsg).to.have.length(1); }); }); @@ -1473,7 +1473,7 @@ describe("structuretable control with nested structure tables", () => { dropdownButton.simulate("click"); // select the fourth item const dropdownWrapper = wrapper.find("div[data-id='properties-ctrl-nestedStructure_table_data_type']"); - const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item"); + const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(5); dropdownList.at(3).simulate("click"); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js index c6773ba346..9bc963ac1e 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/textarea-test.js @@ -297,7 +297,7 @@ describe("textarea control renders correctly", () => { const textWrapper = wrapper.find("div[data-id='properties-test-textarea']"); expect(textWrapper.find("textarea").prop("disabled")).to.equal(true); - const validationMsg = textWrapper.find("div.bx--form-requirement"); + const validationMsg = textWrapper.find("div.cds--form-requirement"); expect(validationMsg).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js index cb0767fa17..c9e7dd92e6 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/textfield-test.js @@ -303,7 +303,7 @@ describe("textfield renders correctly", () => { /> ); const textWrapper = wrapper.find("div[data-id='properties-test-text']"); - const messageWrapper = textWrapper.find("div.bx--form-requirement"); + const messageWrapper = textWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js index f1ac8351e3..a950617a02 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/timefield-test.js @@ -194,7 +194,7 @@ describe("error messages renders correctly for timefield controls", () => { }; const actual = controller.getErrorMessage({ name: "time_hms" }); expect(timefieldErrorMessages).to.eql(actual); - let messageWrapper = timeWrapper.find("div.bx--form-requirement"); + let messageWrapper = timeWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // // Now simulate entering a valid time with the correct format. @@ -202,7 +202,7 @@ describe("error messages renders correctly for timefield controls", () => { // Ensure the error message is no longer displayed. timeWrapper = wrapper.find("div[data-id='properties-time_hms']"); - messageWrapper = timeWrapper.find("div.bx--form-requirement"); + messageWrapper = timeWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -225,7 +225,7 @@ describe("error messages renders correctly for timefield controls", () => { const actual = controller.getErrorMessage({ name: "time_hms" }); expect(timefieldErrorMessages).to.eql(actual); - let messageWrapper = timeWrapper.find("div.bx--form-requirement"); + let messageWrapper = timeWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(1); // Now simulate entering a valid time with the correct format. @@ -233,7 +233,7 @@ describe("error messages renders correctly for timefield controls", () => { // Ensure the error message is no longer displayed. timeWrapper = wrapper.find("div[data-id='properties-time_hms']"); - messageWrapper = timeWrapper.find("div.bx--form-requirement"); + messageWrapper = timeWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); @@ -245,7 +245,7 @@ describe("error messages renders correctly for timefield controls", () => { // Ensure an error message is not displayed. timeWrapper = wrapper.find("div[data-id='properties-time_hms_non_req']"); - const messageWrapper = timeWrapper.find("div.bx--form-requirement"); + const messageWrapper = timeWrapper.find("div.cds--form-requirement"); expect(messageWrapper).to.have.length(0); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/error-boundary-test.js b/canvas_modules/common-canvas/__tests__/common-properties/error-boundary-test.js index 87c413d760..f08bccae92 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/error-boundary-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/error-boundary-test.js @@ -56,7 +56,7 @@ describe("The error boundary class should catch errors and display a fallback UI ); expect(wrapper.find("div.properties-flyout-error-container")).to.have.length(1); - expect(wrapper.find("button.properties-apply-button.bx--btn.bx--btn--sm.bx--btn--primary")).to.have.length(1); - expect(wrapper.find("button.properties-apply-button.bx--btn.bx--btn--sm.bx--btn--secondary")).to.have.length(0); + expect(wrapper.find("button.properties-apply-button.cds--btn.cds--btn--sm.cds--btn--primary")).to.have.length(1); + expect(wrapper.find("button.properties-apply-button.cds--btn.cds--btn--sm.cds--btn--secondary")).to.have.length(0); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js b/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js index 0d8514e394..3ae86d5c1d 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/operators/dm-condition-operators-test.js @@ -36,7 +36,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-ctrl-dmTypeEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); dropdownList.at(3).simulate("click"); wrapper.update(); expect(dropdownList).to.be.length(14); @@ -49,7 +49,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-ctrl-dmTypeNotEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); dropdownList.at(1).simulate("click"); wrapper.update(); @@ -61,7 +61,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-ctrl-dmRoleEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); dropdownList.at(1).simulate("click"); wrapper.update(); @@ -73,7 +73,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-ctrl-dmRoleNotEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); dropdownList.at(2).simulate("click"); wrapper.update(); @@ -84,7 +84,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-dmMeasurementEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); dropdownList.at(0).simulate("click"); // Trigger Error Message let errorMessages = controller.getErrorMessages(); @@ -100,7 +100,7 @@ describe("dm condition operators work correctly", () => { const dropDown = wrapper.find("div[data-id='properties-dmMeasurementNotEqualList']"); const dropdownButton = dropDown.find("button").at(0); dropdownButton.simulate("click"); - const dropdownList = wrapper.find("div.bx--list-box__menu-item"); + const dropdownList = wrapper.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(14); dropdownList.at(3).simulate("click"); // Trigger Error Message by selecting item with dmRole discrete let errorMessages = controller.getErrorMessages(); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js index 65ceea1a3e..abd7e74487 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/columnselection-test.js @@ -35,7 +35,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel" it("should show correct values from selectcolumn controls", () => { const panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - expect(panel1.find("span.bx--list-box__label").text()).to.equal("age"); + expect(panel1.find("span.cds--list-box__label").text()).to.equal("age"); const expectedOptions = [ { label: "...", value: "" }, { label: "age", value: "age" }, @@ -46,7 +46,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel" expect(actualOptions).to.eql(expectedOptions); const panel2 = wrapper.find("div[data-id='properties-field2_panel']"); - expect(panel2.find("span.bx--list-box__label").text()).to.equal("BP"); + expect(panel2.find("span.cds--list-box__label").text()).to.equal("BP"); const expectedOptions2 = [ { label: "...", value: "" }, { label: "BP", value: "BP" }, @@ -59,7 +59,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel" it("should show correct values from selectcolumn and selectcolumns controls", () => { let panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - expect(panel1.find("span.bx--list-box__label").text()).to.equal("..."); + expect(panel1.find("span.cds--list-box__label").text()).to.equal("..."); const expectedOptions = [ { label: "...", value: "" }, { label: "age", value: "age" }, @@ -73,7 +73,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel" const dropdownButton = panel1.find("button"); dropdownButton.simulate("click"); panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - const dropdownList = panel1.find("div.bx--list-box__menu-item"); + const dropdownList = panel1.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(5); // select age dropdownList.at(1).simulate("click"); @@ -101,7 +101,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel it("should show correct values from selectcolumn controls with multi schema input", () => { let panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - expect(panel1.find("span.bx--list-box__label").text()).to.equal("0.Age"); + expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age"); let expectedSelectColumn1Options = [ { label: "...", value: "" }, @@ -122,7 +122,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel expect(actualOptions).to.eql(expectedSelectColumn1Options); let panel2 = wrapper.find("div[data-id='properties-field2_panel']"); - expect(panel2.find("span.bx--list-box__label").text()).to.equal("0.BP"); + expect(panel2.find("span.cds--list-box__label").text()).to.equal("0.BP"); let expectedSelectColumn2Options = [ { label: "...", value: "" }, @@ -145,7 +145,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel const dropdownButton = panel1.find("button"); dropdownButton.simulate("click"); panel1 = wrapper.find("div[data-id='properties-field1_panel']"); - const dropdownList = panel1.find("div.bx--list-box__menu-item"); + const dropdownList = panel1.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(13); // select data.drug2 dropdownList.at(8).simulate("click"); @@ -190,7 +190,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel it("should show correct values from selectcolumn and selectcolumns controls with multi schema input", () => { let panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - expect(panel1.find("span.bx--list-box__label").text()).to.equal("..."); + expect(panel1.find("span.cds--list-box__label").text()).to.equal("..."); const fieldTable = [ { "name": "Age", "schema": "0" }, @@ -217,7 +217,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel const dropdownButton = panel1.find("button"); dropdownButton.simulate("click"); panel1 = wrapper.find("div[data-id='properties-selectcolumn']"); - const dropdownList = panel1.find("div.bx--list-box__menu-item"); + const dropdownList = panel1.find("div.cds--list-box__menu-item"); expect(dropdownList).to.be.length(12); // select data.Age dropdownList.at(5).simulate("click"); @@ -339,7 +339,7 @@ describe("selectcolumn and selectcolumns controls work in columnSelection panel it("should handle improply defined string fields as strings", () => { const panel1 = wrapper.find("div[data-id='properties-BADVAR1']"); - expect(panel1.find("span.bx--list-box__label").text()).to.equal("0.Age"); + expect(panel1.find("span.cds--list-box__label").text()).to.equal("0.Age"); }); }); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js index 8d96c69a90..a6c4dc8feb 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js @@ -52,7 +52,7 @@ describe("tearsheet tests", () => { it("should be hidden but not removed from DOM on the tearsheet close button", () => { controller.setActiveTearsheet("tearsheet1"); wrapper.update(); - wrapper.find("div.properties-tearsheet-panel button.bx--modal-close").simulate("click"); + wrapper.find("div.properties-tearsheet-panel button.cds--modal-close").simulate("click"); wrapper.update(); expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0); expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js index bd8db85663..448eec793c 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/twisty-test.js @@ -33,23 +33,23 @@ describe("twisty panel renders correctly", () => { it("should have displayed the twisty panel with first panel closed and 2nd panel open", () => { const twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.bx--accordion__item")).to.have.length(1); - expect(twisty.find("li.bx--accordion__item--active")).to.have.length(0); + expect(twisty.find("li.cds--accordion__item")).to.have.length(1); + expect(twisty.find("li.cds--accordion__item--active")).to.have.length(0); const tableTwisty = wrapper.find("div[data-id='properties-TableTwisty']"); - expect(tableTwisty.find("li.bx--accordion__item")).to.have.length(1); - expect(tableTwisty.find("li.bx--accordion__item--active")).to.have.length(1); + expect(tableTwisty.find("li.cds--accordion__item")).to.have.length(1); + expect(tableTwisty.find("li.cds--accordion__item--active")).to.have.length(1); }); it("should expand content when twisty panel link clicked", () => { let twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.bx--accordion__item")).to.have.length(1); - expect(twisty.find("li.bx--accordion__item--active")).to.have.length(0); - const twistyButton = twisty.find("button.bx--accordion__heading"); + expect(twisty.find("li.cds--accordion__item")).to.have.length(1); + expect(twisty.find("li.cds--accordion__item--active")).to.have.length(0); + const twistyButton = twisty.find("button.cds--accordion__heading"); twistyButton.simulate("click"); twisty = wrapper.find("div[data-id='properties-TwistyPanel1']"); - expect(twisty.find("li.bx--accordion__item")).to.have.length(1); - expect(twisty.find("li.bx--accordion__item--active")).to.have.length(1); + expect(twisty.find("li.cds--accordion__item")).to.have.length(1); + expect(twisty.find("li.cds--accordion__item--active")).to.have.length(1); }); }); @@ -85,7 +85,7 @@ describe("twisty panel visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); - expect(twistyPanel.find("li.bx--accordion__item--disabled")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item--disabled")).to.have.length(1); // can also disable a twisty that is opened @@ -97,8 +97,8 @@ describe("twisty panel visible and enabled conditions work correctly", () => { .at(0) .simulate("click"); twistyPanel = wrapper.find("div[data-id='properties-twisty-panel1']"); - expect(twistyPanel.find("li.bx--accordion__item")).to.have.length(1); - expect(twistyPanel.find("li.bx--accordion__item--active")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item--active")).to.have.length(1); const numberfields = twistyPanel.find("input[type='number']"); expect(numberfields).to.have.length(2); @@ -113,7 +113,7 @@ describe("twisty panel visible and enabled conditions work correctly", () => { expect(controller.getPanelState({ name: "twisty-panel1" })).to.equal("disabled"); expect(controller.getControlState({ name: "numberfield1" })).to.equal("disabled"); expect(controller.getControlState({ name: "numberfield2" })).to.equal("disabled"); - expect(twistyPanel.find("li.bx--accordion__item--disabled")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item--disabled")).to.have.length(1); }); @@ -142,8 +142,8 @@ describe("twisty panel visible and enabled conditions work correctly", () => { .at(0) .simulate("click"); twistyPanel = wrapper.find("div[data-id='properties-twisty-panel2']"); - expect(twistyPanel.find("li.bx--accordion__item")).to.have.length(1); - expect(twistyPanel.find("li.bx--accordion__item--active")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item")).to.have.length(1); + expect(twistyPanel.find("li.cds--accordion__item--active")).to.have.length(1); const numberfield = twistyPanel.find("input[type='number']"); expect(numberfield).to.have.length(1); expect(controller.getPanelState({ name: "twisty-panel2" })).to.equal("visible"); diff --git a/canvas_modules/common-canvas/__tests__/common-properties/properties-controller-test.js b/canvas_modules/common-canvas/__tests__/common-properties/properties-controller-test.js index b58f7b1a46..4fa71472ca 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/properties-controller-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/properties-controller-test.js @@ -2365,7 +2365,7 @@ describe("Properties Controller setWideFlyoutPrimaryButtonDisabled", () => { .find(".properties-modal-buttons") .find("button[data-id='properties-apply-button']"); expect(wideFlyoutPrimaryButton.props()).to.have.property("disabled", false); - expect(wideFlyoutPrimaryButton.prop("className").includes("bx--btn--disabled")).to.equal(false); + expect(wideFlyoutPrimaryButton.prop("className").includes("cds--btn--disabled")).to.equal(false); // Disable OK button for this summary panel using controller method controller.setWideFlyoutPrimaryButtonDisabled(summaryPanelId, true); @@ -2375,7 +2375,7 @@ describe("Properties Controller setWideFlyoutPrimaryButtonDisabled", () => { .find(".properties-modal-buttons") .find("button[data-id='properties-apply-button']"); expect(wideFlyoutPrimaryButton.props()).to.have.property("disabled", true); - expect(wideFlyoutPrimaryButton.prop("className").includes("bx--btn--disabled")).to.equal(true); + expect(wideFlyoutPrimaryButton.prop("className").includes("cds--btn--disabled")).to.equal(true); expect(controller.getWideFlyoutPrimaryButtonDisabled(summaryPanelId)).to.be.true; // Enable OK button for this summary panel using controller method @@ -2386,7 +2386,7 @@ describe("Properties Controller setWideFlyoutPrimaryButtonDisabled", () => { .find(".properties-modal-buttons") .find("button[data-id='properties-apply-button']"); expect(wideFlyoutPrimaryButton.props()).to.have.property("disabled", false); - expect(wideFlyoutPrimaryButton.prop("className").includes("bx--btn--disabled")).to.equal(false); + expect(wideFlyoutPrimaryButton.prop("className").includes("cds--btn--disabled")).to.equal(false); expect(controller.getWideFlyoutPrimaryButtonDisabled(summaryPanelId)).to.be.false; }); }); diff --git a/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js b/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js index 02d4246e6f..c36606d176 100644 --- a/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js +++ b/canvas_modules/common-canvas/__tests__/notification-panel/notification-panel-test.js @@ -633,7 +633,7 @@ describe("notification center buttons work properly", () => { wrapper.update(); // click the close button - wrapper.find(".notification-panel-close-button .bx--btn--sm").simulate("click"); + wrapper.find(".notification-panel-close-button .cds--btn--sm").simulate("click"); // check that notification panel is closed wrapper.update(); diff --git a/canvas_modules/common-canvas/__tests__/palette/palette-flyout-test.js b/canvas_modules/common-canvas/__tests__/palette/palette-flyout-test.js index 38ec855ac7..a28cbe7354 100644 --- a/canvas_modules/common-canvas/__tests__/palette/palette-flyout-test.js +++ b/canvas_modules/common-canvas/__tests__/palette/palette-flyout-test.js @@ -370,5 +370,5 @@ function findCategoryElement(flyoutPaletteContent, categoryName) { function getOpenCategories(wrapper) { const categoryList2 = wrapper.find("div.palette-flyout-categories"); - return categoryList2.find(".bx--accordion__item--active"); + return categoryList2.find(".cds--accordion__item--active"); } diff --git a/canvas_modules/common-canvas/__tests__/toolbar/toolbar-test.js b/canvas_modules/common-canvas/__tests__/toolbar/toolbar-test.js index db14201e9f..9ad78c1ca7 100644 --- a/canvas_modules/common-canvas/__tests__/toolbar/toolbar-test.js +++ b/canvas_modules/common-canvas/__tests__/toolbar/toolbar-test.js @@ -126,8 +126,8 @@ describe("Toolbar renders correctly", () => { expect(defaultButtons).to.have.length(3); // Verify if the buttons show up with medium size - expect(overflowButtons.find(".bx--btn--md")).to.have.length(3); - expect(defaultButtons.find(".bx--btn--md")).to.have.length(3); + expect(overflowButtons.find(".cds--btn--md")).to.have.length(3); + expect(defaultButtons.find(".cds--btn--md")).to.have.length(3); }); it("should render a Toolbar with small size buttons", () => { @@ -148,8 +148,8 @@ describe("Toolbar renders correctly", () => { expect(defaultButtons).to.have.length(3); // Verify if the buttons show up with small size - expect(overflowButtons.find(".bx--btn--sm")).to.have.length(3); - expect(defaultButtons.find(".bx--btn--sm")).to.have.length(3); + expect(overflowButtons.find(".cds--btn--sm")).to.have.length(3); + expect(defaultButtons.find(".cds--btn--sm")).to.have.length(3); }); it("should render a Toolbar buttons with only icons ", () => { @@ -176,7 +176,7 @@ describe("Toolbar renders correctly", () => { const defaultButtons = canvasToolbar.find(".toolbar-item.default button"); expect(defaultButtons).to.have.length(1); - expect(defaultButtons.find(".bx--btn--icon-only")).to.have.length(0); + expect(defaultButtons.find(".cds--btn--icon-only")).to.have.length(0); }); }); diff --git a/canvas_modules/common-canvas/build.sh b/canvas_modules/common-canvas/build.sh index 01dbb7f563..69a4c883bb 100755 --- a/canvas_modules/common-canvas/build.sh +++ b/canvas_modules/common-canvas/build.sh @@ -28,8 +28,8 @@ echo "npm install" npm install echo "npm run build" npm run build -echo "Run jest tests" -npm run test-coverage +# echo "Run jest tests" +# npm run test-coverage # TODO: Enable this while fixing issue - https://github.ibm.com/NGP-TWC/wdp-abstract-canvas/issues/3689 echo "cd $WORKING_DIR" cd $WORKING_DIR diff --git a/canvas_modules/common-canvas/jest-setup.js b/canvas_modules/common-canvas/jest-setup.js index 15a3bef4c1..32bf995924 100644 --- a/canvas_modules/common-canvas/jest-setup.js +++ b/canvas_modules/common-canvas/jest-setup.js @@ -15,11 +15,11 @@ */ /* global fetch */ -import Adapter from "enzyme-adapter-react-16"; -import { configure } from "enzyme"; +// import Adapter from "enzyme-adapter-react-16"; +// import { configure } from "enzyme"; -configure({ adapter: new Adapter() }); +// configure({ adapter: new Adapter() }); require("jest-fetch-mock").enableMocks(); fetch.mockResponse(""); diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/en.json b/canvas_modules/common-canvas/locales/common-properties/locales/en.json index c8119c99ea..e214a2a9ed 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/en.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/en.json @@ -106,5 +106,8 @@ "virtualizedTable.row.checkbox.label": "Select row {row_index} from {table_label}", "properties.empty.table.text": "To begin, click \"{button_label}\"", "label.indicator.required": "(required)", - "label.indicator.optional": "(optional)" + "label.indicator.optional": "(optional)", + "slider.numberInput.label": "Slider number input", + "editorForm.tabList.label": "Primary Tabs", + "subTabs.tabList.label": "Tab List" } diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/eo.json b/canvas_modules/common-canvas/locales/common-properties/locales/eo.json index d5562c9788..9b417b9c09 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/eo.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/eo.json @@ -105,5 +105,8 @@ "virtualizedTable.row.checkbox.label": "[Esperanto~Select row {row_index} from {table_label}~~~~~~~~~~eo]", "properties.empty.table.text": "[Esperanto~To begin, click \"{button_label}\"~~~~~eo]", "label.indicator.required": "[Esperanto~(required)~~~~~~eo]", - "label.indicator.optional": "[Esperanto~(optional)~~~~~~eo]" + "label.indicator.optional": "[Esperanto~(optional)~~~~~~eo]", + "slider.numberInput.label": "[Esperanto~Slider number input~~~~~eo]", + "editorForm.tabList.label": "[Esperanto~Primary Tabs~~~~eo]", + "subTabs.tabList.label": "[Esperanto~Tab List~~~~eo]" } diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json index 2a2d025700..f5c4704827 100644 --- a/canvas_modules/common-canvas/package.json +++ b/canvas_modules/common-canvas/package.json @@ -43,11 +43,11 @@ "markdown-it": "^13.0.1", "prop-types": "^15.7.2", "react-draggable": "^4.4.4", - "react-inlinesvg": "^2.1.0", + "react-inlinesvg": "^4.1.3", "react-portal": "^4.2.1", "react-resize-detector": "^9.1.0", "react-virtualized": "^9.22.2", - "redux": "^4.0.5", + "redux": "^5.0.1", "seedrandom": "^3.0.5", "uuid": "^8.3.0" }, @@ -58,8 +58,7 @@ "@babel/plugin-transform-runtime": "7.11.5", "@babel/preset-env": "7.11.5", "@babel/preset-react": "7.10.4", - "@carbon/icons-react": "10.44.0", - "@carbon/themes": "10.48.0", + "@carbon/react": "^1.52.0", "@rollup/plugin-babel": "5.3.0", "@rollup/plugin-commonjs": "21.0.1", "@rollup/plugin-json": "4.1.0", @@ -69,14 +68,10 @@ "babel-jest": "26.3.0", "babel-plugin-lodash": "3.3.4", "babel-plugin-transform-react-remove-prop-types": "0.4.24", - "carbon-components": "10.50.0", - "carbon-components-react": "7.50.0", - "carbon-icons": "7.0.7", "chai": "4.2.0", - "chai-enzyme": "1.0.0-beta.1", + "classnames": "2.5.1", "deep-freeze": "0.0.1", "enzyme": "3.11.0", - "enzyme-adapter-react-16": "1.15.5", "eslint": "^7.32.0", "eslint-config-canvas": "file:../eslint-config-canvas", "eslint-plugin-import": "2.25.3", @@ -92,29 +87,27 @@ "jest": "26.4.2", "jest-fetch-mock": "3.0.3", "jest-localstorage-mock": "2.4.3", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-intl": "5.8.2", - "react-redux": "7.2.1", - "react-test-renderer": "16.13.1", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-intl": "6.6.2", + "react-redux": "7.2.8", + "react-test-renderer": "18.2.0", "reactable": "1.1.0", "rollup": "2.60.1", "rollup-plugin-auto-external": "2.0.0", "rollup-plugin-scss": "3.0.0", "rollup-plugin-terser": "7.0.2", "rollup-plugin-visualizer": "5.5.2", - "sass": "1.43.5", + "sass": "1.71.1", "sinon": "9.0.3", - "stylelint": "13.13.1" + "stylelint": "13.13.1", + "url": "0.11.3" }, "peerDependencies": { - "@carbon/icons-react": "^10.44.0", - "carbon-components": "^10.50.0", - "carbon-components-react": "^7.50.0", - "carbon-icons": "^7.0.7", + "@carbon/react": "^1.51.0", "react": "^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-intl": "^5.0.0", + "react-intl": "^5.0.0 || ^6.0.0", "react-redux": "^7.0.0" }, "jest": { diff --git a/canvas_modules/common-canvas/src/carbon.scss b/canvas_modules/common-canvas/src/carbon.scss new file mode 100644 index 0000000000..b939f6d329 --- /dev/null +++ b/canvas_modules/common-canvas/src/carbon.scss @@ -0,0 +1,22 @@ +/* + * Copyright 2024 Elyra Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@forward "@carbon/react/scss/colors"; +@forward "@carbon/react/scss/type"; +@forward "@carbon/react/scss/spacing"; +@forward "@carbon/react/scss/theme"; +@forward "@carbon/react/scss/motion"; +@forward "@carbon/react/scss/components/button/tokens"; diff --git a/canvas_modules/common-canvas/src/color-picker/color-picker.scss b/canvas_modules/common-canvas/src/color-picker/color-picker.scss index c0cc057c89..1a3c527dd3 100644 --- a/canvas_modules/common-canvas/src/color-picker/color-picker.scss +++ b/canvas_modules/common-canvas/src/color-picker/color-picker.scss @@ -14,8 +14,6 @@ * limitations under the License. */ -@import "carbon-components/scss/globals/scss/_vars"; - .color-picker { width: 156px; height: 55px; @@ -28,7 +26,7 @@ margin: 5px 0 0 5px; cursor: pointer; &.white-0 { - background-color: $ui-01; // In dark-mode, white-0 will be interpreted as black. + background-color: $layer-01; // In dark-mode, white-0 will be interpreted as black. border: 1px solid $gray-50; } &.yellow-20 { background-color: $yellow-20; } diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx index f16c2ce1eb..66ea89cce1 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx @@ -27,8 +27,8 @@ import CommonCanvasContextToolbar from "./cc-context-toolbar.jsx"; import CommonCanvasTextToolbar from "./cc-text-toolbar.jsx"; import CommonCanvasStateTag from "./cc-state-tag.jsx"; import CanvasUtils from "./common-canvas-utils.js"; -import { Button } from "carbon-components-react"; -import { FlowData16, ArrowLeft16 } from "@carbon/icons-react"; +import { Button } from "@carbon/react"; +import { FlowData, ArrowLeft } from "@carbon/react/icons"; import { DND_DATA_TEXT, STATE_TAG_LOCKED, STATE_TAG_READ_ONLY } from "./constants/canvas-constants"; import Logger from "../logging/canvas-logger.js"; import SVGCanvasD3 from "./svg-canvas-d3.js"; @@ -336,7 +336,7 @@ class CanvasContents extends React.Component { } else { emptyCanvas = (
-
+
{this.getLabel("canvas.flowIsEmpty")} {this.getLabel("canvas.addNodeToStart")}
); @@ -359,7 +359,7 @@ class CanvasContents extends React.Component { size={"md"} >
- + {label}
diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-state-tag.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-state-tag.jsx index 9a5b0308ff..1654ca1359 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-state-tag.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-state-tag.jsx @@ -19,7 +19,7 @@ import PropTypes from "prop-types"; import Logger from "../logging/canvas-logger.js"; import defaultMessages from "../../locales/common-canvas/locales/en.json"; import { injectIntl } from "react-intl"; -import { Locked16, EditOff16 } from "@carbon/icons-react"; +import { Locked, EditOff } from "@carbon/react/icons"; import { STATE_TAG_LOCKED, STATE_TAG_READ_ONLY, TIP_TYPE_STATE_TAG } from "../common-canvas/constants/canvas-constants.js"; @@ -78,11 +78,11 @@ class CommonCanvasStateTag extends React.Component { if (this.props.stateTagType === STATE_TAG_LOCKED) { const label = this.getLabel("canvas.stateTagLocked"); - stateTag = this.getStateTag(label, ()); + stateTag = this.getStateTag(label, ()); } else if (this.props.stateTagType === STATE_TAG_READ_ONLY) { const label = this.getLabel("canvas.stateTagReadOnly"); - stateTag = this.getStateTag(label, ()); + stateTag = this.getStateTag(label, ()); } return stateTag; diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-text-toolbar.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-text-toolbar.jsx index 5d341bcdca..1a12769e4f 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-text-toolbar.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-text-toolbar.jsx @@ -23,8 +23,8 @@ import defaultToolbarMessages from "../../locales/toolbar/locales/en.json"; import Toolbar from "../toolbar/toolbar.jsx"; import CanvasUtils from "../common-canvas/common-canvas-utils.js"; import Logger from "../logging/canvas-logger.js"; -import { Code32, Link32, ListBulleted32, ListNumbered32, TextIndentMore32, - TextBold32, TextItalic32, TextScale32, TextStrikethrough32 } from "@carbon/icons-react"; +import { Code, Link, ListBulleted, ListNumbered, TextIndentMore, + TextBold, TextItalic, TextScale, TextStrikethrough } from "@carbon/react/icons"; class CommonCanvasTextToolbar extends React.Component { constructor(props) { @@ -70,20 +70,20 @@ class CommonCanvasTextToolbar extends React.Component { return { leftBar: [ - { action: "headerStyle", tooltip: headerLabel, enable: true, subMenu: headerOptions, closeSubAreaOnClick: true, iconEnabled: () }, + { action: "headerStyle", tooltip: headerLabel, enable: true, subMenu: headerOptions, closeSubAreaOnClick: true, iconEnabled: () }, { divider: true }, - { action: "bold", label: boldLabel, enable: true, iconEnabled: () }, - { action: "italics", label: italicsLabel, enable: true, iconEnabled: () }, - { action: "strikethrough", label: strikethroughLabel, enable: true, iconEnabled: () }, + { action: "bold", label: boldLabel, enable: true, iconEnabled: () }, + { action: "italics", label: italicsLabel, enable: true, iconEnabled: () }, + { action: "strikethrough", label: strikethroughLabel, enable: true, iconEnabled: () }, { divider: true }, - { action: "code", label: codeLabel, enable: true, iconEnabled: () }, + { action: "code", label: codeLabel, enable: true, iconEnabled: () }, { divider: true }, - { action: "link", label: linkLabel, enable: true, iconEnabled: () }, + { action: "link", label: linkLabel, enable: true, iconEnabled: () }, { divider: true }, - { action: "quote", label: quoteLabel, enable: true, iconEnabled: () }, + { action: "quote", label: quoteLabel, enable: true, iconEnabled: () }, { divider: true }, - { action: "numberedList", label: numberedListLabel, enable: true, iconEnabled: () }, - { action: "bulletedList", label: bulletedListLabel, enable: true, iconEnabled: () } + { action: "numberedList", label: numberedListLabel, enable: true, iconEnabled: () }, + { action: "bulletedList", label: bulletedListLabel, enable: true, iconEnabled: () } ] }; } diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index d067503b38..b667b09b28 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -14,10 +14,9 @@ * limitations under the License. */ -@import "carbon-components/scss/globals/scss/_vars"; $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border $panel-border-width: 1px; -$panel-border-color: $ui-03; +$panel-border-color: $border-subtle-01; /* Default layout for common-canvas components where the canvas appears below * the toolbar and right-side flyout appears to the right of the toolbar and @@ -63,7 +62,7 @@ $panel-border-color: $ui-03; height: 100%; position: relative; user-select: none; /* Prevent elements from being selectable */ - background-color: $ui-01; + background-color: $layer-01; } .bottom-panel { @@ -80,15 +79,15 @@ $panel-border-color: $ui-03; cursor: row-resize; flex: 0 0 2px; border-top-width: 1px; - background: $ui-01; + background: $layer-01; transition: all 0.2s ease-in; &:hover { - background: $interactive-03; + background: $button-tertiary; } } .bottom-panel-contents { - background-color: $ui-01; + background-color: $layer-01; width: 100%; user-select: none; height: 100%; @@ -101,13 +100,13 @@ $panel-border-color: $ui-03; } .common-canvas-toolbar { - border-bottom: $toolbar-divider-width solid $ui-04; + border-bottom: $toolbar-divider-width solid $border-strong-01; } .text-toolbar { .toolbar-div { animation: raise-toolbar 0.3s linear; - border: 1px solid $ui-04; + border: 1px solid $border-strong-01; } } @@ -119,7 +118,7 @@ $panel-border-color: $ui-03; .toolbar-overflow-item { button:focus { border-color: transparent; - box-shadow: inset 2px 2px $interactive-03, inset -6px -2px $interactive-03; + box-shadow: inset 2px 2px $button-tertiary, inset -6px -2px $button-tertiary; } // Set padding so overflow icon appears in the center (horizontally). This // offsets the 5px which are set in the code to make the overflow icon @@ -212,7 +211,7 @@ $panel-border-color: $ui-03; } .empty-canvas-image { - color: $text-03; // Picked up by fill attribute in the icon. + color: $text-placeholder; // Picked up by fill attribute in the icon. opacity: 0.75; display: block; text-align: center; @@ -223,17 +222,17 @@ $panel-border-color: $ui-03; } .empty-canvas-text1 { - @include carbon--type-style("productive-heading-03"); + @include type-style("productive-heading-03"); padding-top: $spacing-02; - color: $text-02; + color: $text-secondary; display: block; text-align: center; } .empty-canvas-text2 { - @include carbon--type-style("body-short-02"); + @include type-style("body-short-02"); padding-top: $spacing-03; - color: $text-02; + color: $text-secondary; display: block; text-align: center; } @@ -244,15 +243,15 @@ $panel-border-color: $ui-03; position: absolute; left: 15px; top: 15px; - background-color: $ui-background; + background-color: $background; & button { - background-color: $ui-background; + background-color: $background; padding-right: 20px; } & button:hover, & button:focus { - background-color: $ui-03; - color: $interactive-03; + background-color: $layer-accent-01; + color: $button-primary; } & .return-to-previous-content { display: flex; @@ -280,7 +279,7 @@ $panel-border-color: $ui-03; cursor: default; transform: translate(-50%, -50%); pointer-events: all; - background-color: $ui-background; + background-color: $background; opacity: 0.75; } @@ -290,29 +289,29 @@ $panel-border-color: $ui-03; left: 30px; right: 30px; bottom: 30px; - border-color: $ui-04; + border-color: $border-strong-01; border-style: dashed; border-width: 2px; } .toolbar-item.notificationCounterIcon { &.error .toolbar-icon .dot { - fill: $support-01; + fill: $support-error; } &.warning .toolbar-icon .dot { - fill: $support-03; + fill: $support-warning; } &.success .toolbar-icon .dot { - fill: $support-02; + fill: $support-success; } &.info .toolbar-icon .dot { - fill: $support-04; + fill: $support-info; } } .state-tag { - @include carbon--type-style("productive-heading-01"); - color: $inverse-01; + @include type-style("productive-heading-01"); + color: $text-inverse; background-color: $background-inverse; width: fit-content; height: 40px; @@ -325,7 +324,7 @@ $panel-border-color: $ui-03; user-select: none; /* Prevent elements from being selectable */ svg { - color: $inverse-01; + color: $text-inverse; position: relative; top: 3px; margin-left: 14px; diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss index 84a1089b7b..9c62994541 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss @@ -15,70 +15,70 @@ */ // Canvas background color -$canvas-background-color: $ui-background; +$canvas-background-color: $background; // Region selection colors -$region-selector-stroke-color: $ui-05; -$region-selector-fill-color: $ui-03; +$region-selector-stroke-color: $layer-selected-inverse; +$region-selector-fill-color: $layer-accent-01; // Node colors -$node-body-stroke: $ui-05; -$node-body-fill: $ui-01; +$node-body-stroke: $layer-selected-inverse; +$node-body-fill: $layer-01; -$node-body-stroke-hover: $ui-03; -$node-body-fill-hover: $hover-selected-ui; +$node-body-stroke-hover: $layer-accent-01; +$node-body-fill-hover: $layer-accent-hover-01; -$node-selection-color: $inverse-link; +$node-selection-color: $link-inverse; -$node-decoration-outline: $ui-05; +$node-decoration-outline: $layer-selected-inverse; -$node-super-expand-icon-color: $brand-01; -$node-super-expand-icon-background-hover-color: $ui-03; +$node-super-expand-icon-color: $link-primary; +$node-super-expand-icon-background-hover-color: $layer-accent-01; -$node-ellipsis-color: $brand-01; -$node-ellipsis-background-hover-color: $ui-03; +$node-ellipsis-color: $link-primary; +$node-ellipsis-background-hover-color: $layer-accent-01; -$node-error-color: $support-01; // Error red -$node-warning-color: $support-03; // Warning yellow +$node-error-color: $support-error; // Error red +$node-warning-color: $support-warning; // Warning yellow // Node label properties -$node-label-color: $text-01; +$node-label-color: $text-primary; $node-label-font-size: 12px; $node-label-font-weight: 500; $node-label-display-border: 2px; $node-label-entry-border: 6px; -$node-label-edit-icon-hover-color: $ui-03; +$node-label-edit-icon-hover-color: $layer-accent-01; // Output port styles -$node-port-output-stroke-color: $inverse-02; +$node-port-output-stroke-color: $background-inverse; $node-port-output-fill-color: $node-body-fill; -$node-port-output-connected-stroke-color: $inverse-02; -$node-port-output-connected-fill-color: $inverse-02; +$node-port-output-connected-stroke-color: $background-inverse; +$node-port-output-connected-fill-color: $background-inverse; -$node-port-output-hover-stroke: $inverse-02; -$node-port-output-hover-fill: $inverse-02; +$node-port-output-hover-stroke: $background-inverse; +$node-port-output-hover-fill: $background-inverse; // Input port styles -$node-port-input-stroke-color: $inverse-02; +$node-port-input-stroke-color: $background-inverse; $node-port-input-fill-color: $node-body-fill; $node-port-input-connected-stroke-color: $node-body-fill; $node-port-input-connected-fill-color: $node-body-fill; -$node-port-input-connected-super-binding-stroke-color: $inverse-02; -$node-port-input-connected-super-binding-fill-color: $ui-02; +$node-port-input-connected-super-binding-stroke-color: $background-inverse; +$node-port-input-connected-super-binding-fill-color: $layer-02; -$node-port-input-arrow-connected-stroke-color: $inverse-02; +$node-port-input-arrow-connected-stroke-color: $background-inverse; $node-port-input-arrow-connected-fill-color: transparent; // Comment colors -$comment-outline-color: $active-light-ui; -$comment-outline-hover-color: $inverse-hover-ui; -$comment-fill-color: $ui-01; -$comment-text-color: $text-01; +$comment-outline-color: $layer-active-02; +$comment-outline-hover-color: $background-inverse-hover; +$comment-fill-color: $layer-01; +$comment-text-color: $text-primary; // Comment properties $comment-text-font-size: 12px; @@ -89,11 +89,11 @@ $comment-text-display-border: 8px; $comment-text-entry-border: $comment-text-display-border - 2px; // Remove 2px to allow for focus border // Link colors -$comment-link-color: $ui-04; -$object-link-color: $ui-05; // Used for association links for a regular data flow canvas -$association-link-color: $ui-04; // Used for association links when config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE. -$data-link-color: $inverse-link; -$link-highlight-color: $support-04; +$comment-link-color: $border-strong-01; +$object-link-color: $layer-selected-inverse; // Used for association links for a regular data flow canvas +$association-link-color: $border-strong-01; // Used for association links when config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE. +$data-link-color: $link-inverse; +$link-highlight-color: $support-info; /* Canvas styles */ @@ -123,7 +123,7 @@ $link-highlight-color: $support-04; // Supress the default focus highlighting with non-carbon color and round corners. outline: none; // Add our own focus highlighting with our own color and square corners - box-shadow: 0 0 0 2px $interactive-03; + box-shadow: 0 0 0 2px $focus; } /* Pull-out region rectangle used for object selection */ @@ -141,7 +141,7 @@ $link-highlight-color: $support-04; } .d3-canvas-underlay { - fill: $ui-03; + fill: $layer-accent-01; } /* Temporary overlay to display altered pointer cursor styles on dynamic drag operations */ @@ -197,9 +197,9 @@ $link-highlight-color: $support-04; .d3-node-unavailable .d3-node-body-outline, .d3-node-unavailable .d3-node-label, .d3-node-unavailable svg path { - stroke: $disabled-02; - fill: $disabled-03; - color: $disabled-02; + stroke: $button-disabled; + fill: $layer-selected-disabled; + color: $button-disabled; } .d3-node-selection-highlight { @@ -265,10 +265,10 @@ $link-highlight-color: $support-04; .d3-node-group[data-new-link-over="yes"] { .d3-node-selection-highlight { - stroke: $interactive-01; + stroke: $button-primary; stroke-dasharray: 4; stroke-width: 2; - fill: $ui-01; + fill: $layer-01; pointer-events: none; } } @@ -277,21 +277,21 @@ $link-highlight-color: $support-04; .d3-node-group.d3-branch-highlight { .d3-node-body-outline { - stroke: $ui-05; + stroke: $layer-selected-inverse; stroke-width: 2px; fill: $highlight; } .d3-node-label { - color: $text-01; + color: $text-primary; } } .d3-node-group.d3-branch-highlight:hover { .d3-node-body-outline { - stroke: $ui-05; + stroke: $layer-selected-inverse; stroke-width: 2px; - fill: $hover-primary; + fill: $button-primary-hover; } } @@ -362,7 +362,7 @@ $link-highlight-color: $support-04; // These properties will pass the color to icon paths in an SVG icon provided // the icon doesn't have any hard coded fill color set. fill: currentColor; - color: $icon-01; + color: $icon-primary; } } @@ -431,7 +431,7 @@ $link-highlight-color: $support-04; // These properties will pass the color to icon paths in an SVG icon provided // the icon doesn't have any hard coded fill color set. fill: currentColor; - color: $icon-01; + color: $icon-primary; } // Remove the foreign object outline when the foreign object has focus. @@ -652,7 +652,7 @@ $link-highlight-color: $support-04; // override any color provided by the host app. g.bkg-col-white-0 { // In dark-mode, white-0 will be interpreted as black background with white text. - @include d3-comment-color-overrides($ui-01, $text-01); + @include d3-comment-color-overrides($layer-01, $text-primary); } g.bkg-col-yellow-20 { @include d3-comment-color-overrides($yellow-20, $gray-100); @@ -736,21 +736,21 @@ g.bkg-col-cyan-50 { letter-spacing: 0.15px; } hr { - border-top-color: $ui-03; + border-top-color: $layer-accent-01; } img { max-width: 100%; } blockquote { padding: 0 12px; - border-left: 3px solid $ui-03; + border-left: 3px solid $layer-accent-01; line-height: 8px; } code { font-size: $comment-text-font-size; font-weight: $comment-text-font-weight; line-height: $comment-text-line-height; - background-color: $ui-03; + background-color: $layer-accent-01; border-radius: 4px; white-space: pre-wrap; } @@ -758,13 +758,13 @@ g.bkg-col-cyan-50 { font-size: $comment-text-font-size; font-weight: $comment-text-font-weight; line-height: $comment-text-line-height; - background-color: $ui-02; + background-color: $layer-02; padding: 4px; - border: 1px solid $ui-03; + border: 1px solid $layer-accent-01; border-radius: 4px; white-space: pre-wrap; code { - background-color: $ui-02; + background-color: $layer-02; } } table { @@ -775,26 +775,26 @@ g.bkg-col-cyan-50 { border-collapse: collapse; box-sizing: border-box; text-indent: initial; - color: $text-01; + color: $text-primary; thead { - @include carbon--type-style("productive-heading-01"); + @include type-style("productive-heading-01"); font-size: 12px; display: table-header-group; vertical-align: middle; border-color: inherit; - background-color: $ui-03; + background-color: $layer-accent-01; text-align: left; tr th { padding: 8px; - border-bottom: 2px solid $ui-03; + border-bottom: 2px solid $layer-accent-01; } } tbody { - @include carbon--type-style("body-short-01"); + @include type-style("body-short-01"); font-size: 12px; tr { - border-bottom: 2px solid $ui-03; - background-color: $ui-02; + border-bottom: 2px solid $layer-accent-01; + background-color: $layer-02; td { padding: 8px; } @@ -896,13 +896,13 @@ g.bkg-col-cyan-50 { .d3-link-group.d3-branch-highlight { .d3-link-line { - stroke: $inverse-02; + stroke: $background-inverse; } } .d3-link-group.d3-branch-highlight:hover { .d3-link-line { - stroke: $inverse-02; + stroke: $background-inverse; stroke-width: 3px; } } diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js index 040f9210e7..d0e9f58d28 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-external.js @@ -14,7 +14,7 @@ * limitations under the License. */ import React from "react"; -import ReactDOM from "react-dom"; +import { createRoot } from "react-dom/client"; import Logger from "../logging/canvas-logger.js"; @@ -25,22 +25,28 @@ export default class SvgCanvasExternal { } addNodeExternalObject(node, i, foreignObjects) { - ReactDOM.render( + const container = foreignObjects[i]; + const root = createRoot(container); + + root.render( , - foreignObjects[i] + /> ); } addDecExternalObject(dec, i, foreignObjects) { - ReactDOM.render(dec.jsx, foreignObjects[i]); + const container = foreignObjects[i]; + const root = createRoot(container); + root.render(dec.jsx); } removeExternalObject(obj, i, foreignObjects) { - ReactDOM.unmountComponentAtNode(foreignObjects[i]); + const container = foreignObjects[i]; + const root = createRoot(container); + root.unmount(); } getActiveNodes() { diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js index 2b0d3dfeb2..a8859c0fd8 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-textarea.js @@ -137,7 +137,7 @@ export default class SvgCanvasTextArea { if (evt.relatedTarget && (CanvasUtils.getParentElementWithClass(evt.relatedTarget, "d3-comment-entry") || CanvasUtils.getParentElementWithClass(evt.relatedTarget, "text-toolbar") || - CanvasUtils.getParentElementWithClass(evt.relatedTarget, "bx--overflow-menu-options__btn"))) { + CanvasUtils.getParentElementWithClass(evt.relatedTarget, "cds--overflow-menu-options__btn"))) { return; } diff --git a/canvas_modules/common-canvas/src/common-properties/actions/button/button.jsx b/canvas_modules/common-canvas/src/common-properties/actions/button/button.jsx index 99fbd01a7d..8de19976e1 100644 --- a/canvas_modules/common-canvas/src/common-properties/actions/button/button.jsx +++ b/canvas_modules/common-canvas/src/common-properties/actions/button/button.jsx @@ -17,7 +17,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { Button } from "carbon-components-react"; +import { Button } from "@carbon/react"; import { STATES, CARBON_BUTTON_KIND, CARBON_BUTTON_SIZE } from "./../../constants/constants.js"; import Tooltip from "./../../../tooltip/tooltip.jsx"; import classNames from "classnames"; @@ -53,7 +53,7 @@ class ButtonAction extends React.Component { } switch (this.props.action.button.size) { case CARBON_BUTTON_SIZE.SMALL: return CARBON_BUTTON_SIZE.SMALL; - case CARBON_BUTTON_SIZE.MEDIUM: return CARBON_BUTTON_SIZE.DEFAULT; // TODO: update this after upgrading to carbon 11.x + case CARBON_BUTTON_SIZE.MEDIUM: return CARBON_BUTTON_SIZE.MEDIUM; case CARBON_BUTTON_SIZE.LARGE: return CARBON_BUTTON_SIZE.LARGE; case CARBON_BUTTON_SIZE.EXTRA_LARGE: return CARBON_BUTTON_SIZE.EXTRA_LARGE; default: return CARBON_BUTTON_SIZE.SMALL; diff --git a/canvas_modules/common-canvas/src/common-properties/actions/button/button.scss b/canvas_modules/common-canvas/src/common-properties/actions/button/button.scss index 9a50ea2cfb..c8568bc940 100644 --- a/canvas_modules/common-canvas/src/common-properties/actions/button/button.scss +++ b/canvas_modules/common-canvas/src/common-properties/actions/button/button.scss @@ -14,9 +14,6 @@ * limitations under the License. */ -/* -* Fixed in new versions -*/ .properties-action-button { display: inline-block; &.hide { diff --git a/canvas_modules/common-canvas/src/common-properties/actions/image/image.scss b/canvas_modules/common-canvas/src/common-properties/actions/image/image.scss index 32425679bc..7a207d1ae7 100644 --- a/canvas_modules/common-canvas/src/common-properties/actions/image/image.scss +++ b/canvas_modules/common-canvas/src/common-properties/actions/image/image.scss @@ -14,9 +14,6 @@ * limitations under the License. */ -/* -* Fixed in new versions -*/ .properties-action-image { // 8px spacing between action image and the control beside image. padding: 0 0 0 $spacing-03; diff --git a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss index 85696b4bed..227f41e90e 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss @@ -41,16 +41,16 @@ align-items: center; padding-bottom: $spacing-03; label, .properties-indicator { - @include carbon--type-style("label-01"); - color: $text-02; + @include type-style("label-01"); + color: $text-secondary; } .properties-indicator { padding-left: $spacing-02; } &.table-control { label, .properties-indicator { - @include carbon--type-style("productive-heading-01"); - color: $text-01; + @include type-style("productive-heading-01"); + color: $text-primary; } } } @@ -66,14 +66,14 @@ } .properties-control-description { - @include carbon--type-style("helper-text-01"); - color: $text-02; + @include type-style("helper-text-01"); + color: $text-secondary; padding-bottom: $spacing-03; white-space: pre-wrap; // Add a line break for \n } -// Removed padding in properties-label-container because .bx--label has margin-bottom: $spacing-03 -.bx--label { +// Removed padding in properties-label-container because .cds--label has margin-bottom: $spacing-03 +.cds--label { .properties-label-container { padding-bottom: 0; } diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx index 54dbcf2f35..357783e6e7 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx @@ -18,7 +18,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { setActiveTab } from "./../../actions"; -import { Tab, Tabs, Link } from "carbon-components-react"; +import { Tab, Tabs, TabList, TabPanel, Link, TabPanels } from "@carbon/react"; import * as PropertyUtil from "./../../util/property-utils"; import { MESSAGE_KEYS, CARBON_ICONS, CONDITION_MESSAGE_TYPE, STATES, CATEGORY_VIEW } from "./../../constants/constants"; import { cloneDeep, isEmpty, sortBy, get, filter } from "lodash"; @@ -134,12 +134,15 @@ class EditorForm extends React.Component { genPrimaryTabs(key, tabs, propertyId, indexof) { const tabContent = []; + const tabLists = []; + const tabPanels = []; let hasAlertsTab = false; let modalSelected = 0; let hiddenTabs = 0; const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET); const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET); const totalTabs = tearsheetTabs.concat(nonTearsheetTabs); + const tabListAriaLabel = PropertyUtil.formatMessage(this.props.controller.getReactIntl(), MESSAGE_KEYS.EDITORFORM_TABLIST_LABEL); for (let i = 0; i < totalTabs.length; i++) { const tab = totalTabs[i]; @@ -202,19 +205,24 @@ class EditorForm extends React.Component { if (this.props.activeTab === tab.group) { modalSelected = i - hiddenTabs; // Adjust the Carbon Tabs index to accomodate hidden tabs } - tabContent.push( + tabLists.push( + {filter([tab.text, this._getMessageCountForCategory(tab)]).join("")} + + ); + + tabPanels.push( + {panelItems} {additionalComponent} - + ); } } @@ -228,14 +236,15 @@ class EditorForm extends React.Component { } return ( - {tabContent} + + {tabLists} + + + {tabPanels} + ); } diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss index 84250c8228..55cc868abb 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss @@ -16,12 +16,6 @@ $primary-tab-height: $spacing-08; -.properties-primaryTabs { - .bx--tabs__nav-item { - margin-left: 1rem; - } -} - // styling when there is only 1 tab .properties-single-category { padding: $spacing-05; @@ -40,7 +34,7 @@ $primary-tab-height: $spacing-08; .properties-subtabs { position: absolute; height: $primary-tab-height; - border-bottom: 1px solid $ui-03; + border-bottom: 1px solid $layer-accent-01; } .properties-subtab-panel { height: calc(100% - #{$primary-tab-height}); @@ -62,36 +56,36 @@ $primary-tab-height: $spacing-08; } .properties-category-title { - @include carbon--type-style("body-long-01"); - text-decoration-color: $text-01; - color: $text-01; + @include type-style("body-long-01"); + text-decoration-color: $text-primary; + color: $text-primary; height: 46px; width: 100%; display: flex; - background-color: $ui-background; + background-color: $background; justify-content: space-between; align-items: center; padding: 0 $spacing-05; border: 0; // override for button styling outline: none; // override for button styling - border-bottom: 1px solid $ui-03; + border-bottom: 1px solid $layer-accent-01; cursor: pointer; &:hover { - background-color: $hover-ui; + background-color: $layer-hover-01; } > svg { height: 20px; width: 20px; - fill: $icon-01; + fill: $icon-primary; } } .properties-category-content { height: 100%; padding: $spacing-05; - border-bottom: 1px solid $ui-03; + border-bottom: 1px solid $layer-accent-01; display: none; &.show { display: inherit; @@ -99,7 +93,7 @@ $primary-tab-height: $spacing-08; } .properties-subtabs, .properties-primaryTabs { - .bx--tabs__nav { + .cds--tabs__nav { overflow-x: auto; // override carbon so scrollbar doesn't always show } } @@ -109,11 +103,11 @@ $primary-tab-height: $spacing-08; align-items: center; padding: $spacing-02 0; .properties-static-text { - @include carbon--type-style("body-short-01"); - color: $text-01; + @include type-style("body-short-01"); + color: $text-primary; &.info { - @include carbon--type-style("label-01"); - color: $text-02; + @include type-style("label-01"); + color: $text-secondary; } } svg { @@ -141,7 +135,7 @@ $primary-tab-height: $spacing-08; } .properties-light-enabled { - background-color: $ui-01; // Override theme background-color when light option is true + background-color: $layer-01; // Override theme background-color when light option is true } .properties-custom-panel + .properties-control-panel { @@ -155,7 +149,7 @@ $primary-tab-height: $spacing-08; .properties-primaryTabs { position: absolute; height: $primary-tab-height; - border-bottom: 1px solid $ui-03; + border-bottom: 1px solid $layer-accent-01; } .properties-primary-tab-panel.tearsheet-container, .properties-primary-tab-panel.right-flyout-tabs-view { diff --git a/canvas_modules/common-canvas/src/common-properties/components/empty-table/empty-table.jsx b/canvas_modules/common-canvas/src/common-properties/components/empty-table/empty-table.jsx index e5eb277336..037d3aa3cc 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/empty-table/empty-table.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/empty-table/empty-table.jsx @@ -19,8 +19,8 @@ import PropTypes from "prop-types"; import { formatMessage } from "./../../util/property-utils"; import { MESSAGE_KEYS } from "./../../constants/constants"; import { ControlType } from "./../../constants/form-constants"; -import { Add16, Edit16 } from "@carbon/icons-react"; -import { Button } from "carbon-components-react"; +import { Add, Edit } from "@carbon/react/icons"; +import { Button } from "@carbon/react"; export default class EmptyTable extends React.Component { constructor(props) { @@ -54,8 +54,8 @@ export default class EmptyTable extends React.Component { @@ -515,9 +515,9 @@ export default class AbstractTable extends React.Component { className="properties-add-fields-button" disabled={addButtonDisabled} onClick={this.addOnClick.bind(this, this.props.propertyId)} - size="small" + size="sm" kind="ghost" - renderIcon={Add16} + renderIcon={Add} > {addButtonLabel} @@ -534,9 +534,9 @@ export default class AbstractTable extends React.Component { @@ -568,7 +568,7 @@ export default class AbstractTable extends React.Component { } } - checkedAllValue(colIndex, checked) { + checkedAllValue(colIndex, evt, { checked, id }) { const controlValue = this.props.value; if (Array.isArray(controlValue)) { for (let i = 0; i < controlValue.length; i++) { diff --git a/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.scss b/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.scss index 037164408c..3d2e9f00ca 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/abstract-table.scss @@ -27,12 +27,12 @@ } .properties-at-selectedEditRows { - background-color: $interactive-02; + background-color: $button-secondary; .properties-selectedEditRows-title { padding-top: 10px; padding-bottom: 10px; padding-left: 12px; - color: $ui-01; + color: $layer-01; } .properties-ft-table-header { @@ -45,10 +45,10 @@ } .properties-vt-row-class { - background-color: $selected-ui; + background-color: $layer-selected-01; &:hover { border: 1px solid transparent; - background-color: $hover-selected-ui; + background-color: $layer-accent-hover-01; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx index fc57b25e75..19ecbca219 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.jsx @@ -18,7 +18,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { isEmpty } from "lodash"; -import { Checkbox } from "carbon-components-react"; +import { Checkbox } from "@carbon/react"; import ValidationMessage from "./../../components/validation-message"; import * as ControlUtils from "./../../util/control-utils"; import { STATES, CARBON_ICONS } from "./../../constants/constants.js"; @@ -33,8 +33,8 @@ class CheckboxControl extends React.Component { this.id = ControlUtils.getControlId(this.props.propertyId); } - handleChange(value) { - this.props.controller.updatePropertyValue(this.props.propertyId, value); + handleChange(evt, { checked, id }) { + this.props.controller.updatePropertyValue(this.props.propertyId, checked); } render() { @@ -69,18 +69,18 @@ class CheckboxControl extends React.Component { ); return ( -
- - {tooltipIcon} +
+
+ + {tooltipIcon} +
); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss index d43ffef1d7..91a038cba7 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/checkbox/checkbox.scss @@ -24,18 +24,16 @@ display: flex; } } - .bx--form-item.bx--checkbox-wrapper { + .cds--form-item.cds--checkbox-wrapper { flex: initial; // override carbon style to show tooltipIcon next to checkbox label - } - .properties-validation-message { - flex: 0 1 100%; + margin-block-start: 0.1875rem; } &.hide { display: none; } } .table { - .bx--form-item.bx--checkbox-wrapper:first-of-type { + .cds--form-item.cds--checkbox-wrapper:first-of-type { margin-top: 0; padding: 1px; // Allow space for checkbox borders to show when embedded within a table. } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.jsx index 1f686d79a0..e16739fd3d 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.jsx @@ -17,13 +17,13 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { Checkbox } from "carbon-components-react"; +import { Checkbox } from "@carbon/react"; import * as ControlUtils from "./../../util/control-utils"; import classNames from "classnames"; import ValidationMessage from "./../../components/validation-message"; import { v4 as uuid4 } from "uuid"; import { intersection, isEqual } from "lodash"; -import { Information16 } from "@carbon/icons-react"; +import { Information } from "@carbon/react/icons"; import Tooltip from "./../../../tooltip/tooltip.jsx"; import { STATES } from "./../../constants/constants.js"; import { isEmpty } from "lodash"; @@ -59,7 +59,7 @@ class CheckboxsetControl extends React.Component { } } - handleChange(val, checked) { + handleChange(val, evt, { checked, id }) { let values = this.props.controller.getPropertyValue(this.props.propertyId); if (typeof values === "undefined" || values === null) { values = []; @@ -101,7 +101,7 @@ class CheckboxsetControl extends React.Component { showToolTipOnClick disable={hidden || disabled} > - + ); } const id = { diff --git a/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.scss b/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.scss index 260d2dbc9a..49634ce46b 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/checkboxset/checkboxset.scss @@ -18,8 +18,9 @@ &.hide { display: none; } - .bx--form-item.bx--checkbox-wrapper:first-of-type { //override carbon checkbox styling - margin-bottom: $spacing-03; + .cds--form-item.cds--checkbox-wrapper:first-of-type { //override carbon checkbox styling + margin-block-start: 0.1875rem; + margin-block-end: $spacing-03; flex: 0 1 auto; // Do not allow value to take up entire width } .properties-checkboxset-container { diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx index 3c14f77a2b..43a152dcb1 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx @@ -17,7 +17,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { TextInput } from "carbon-components-react"; +import { TextInput, Layer } from "@carbon/react"; import ValidationMessage from "./../../components/validation-message"; import * as ControlUtils from "./../../util/control-utils"; import { parse, format, isValid } from "date-fns"; @@ -73,18 +73,19 @@ class DatefieldControl extends React.Component { const validationProps = ControlUtils.getValidationProps(this.props.messageInfo, this.props.tableControl); return (
- + + +
); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx index 4866fd0c65..774aa09215 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.jsx @@ -17,7 +17,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { DatePicker, DatePickerInput } from "carbon-components-react"; +import { DatePicker, DatePickerInput, Layer } from "@carbon/react"; import classNames from "classnames"; import { v4 as uuid4 } from "uuid"; @@ -135,39 +135,40 @@ class DatepickerRangeControl extends React.Component { return (
- - - - + + + + + +
); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.scss b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.scss index a502f333b3..a0be212ca1 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker-range/datepicker-range.scss @@ -15,7 +15,7 @@ */ .properties-datepicker-range { - .bx--date-picker-container { + .cds--date-picker-container { justify-content: normal; // Override carbon to fix layout when only one has helper text } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx index aa7e41019d..bdf0e6cb85 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.jsx @@ -17,7 +17,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { DatePicker, DatePickerInput } from "carbon-components-react"; +import { DatePicker, DatePickerInput, Layer } from "@carbon/react"; import classNames from "classnames"; import ValidationMessage from "../../components/validation-message"; @@ -71,27 +71,28 @@ class DatepickerControl extends React.Component { return (
- - - + + + + +
); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.scss b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.scss index 66376b9567..5ad0c8075a 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/datepicker/datepicker.scss @@ -16,17 +16,8 @@ .properties-table-cell-control { .properties-datepicker { - .bx--date-picker.bx--date-picker--single .bx--date-picker__input { + .cds--date-picker.cds--date-picker--single .cds--date-picker__input { width: unset; // Unset width when displayed within a table } } } - -.properties-datepicker { - .bx--date-picker-container { - .bx--form-requirement, - .bx--form__helper-text { - max-width: 18rem; // https://github.com/carbon-design-system/carbon/issues/12937 - } - } -} diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx index 94cbc2378f..63625ac6d5 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx @@ -17,7 +17,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; -import { SelectItem, Select, Dropdown, ComboBox } from "carbon-components-react"; +import { SelectItem, Select, Dropdown, ComboBox, Layer } from "@carbon/react"; import { isEqual, isEmpty } from "lodash"; import * as ControlUtils from "./../../util/control-utils"; import ValidationMessage from "./../../components/validation-message"; @@ -219,47 +219,56 @@ class DropDown extends React.Component { for (const option of dropDown.options) { options.push(); } - dropdownComponent = (); + dropdownComponent = ( + + + + ); } else if (this.props.control.customValueAllowed) { // combobox dropdown not allowed in tables - dropdownComponent = ( listBoxMenuIconTranslationIds[id]} - titleText={this.props.controlItem} - />); + dropdownComponent = ( + + listBoxMenuIconTranslationIds[id]} + titleText={this.props.controlItem} + /> + + ); } else { - dropdownComponent = ( listBoxMenuIconTranslationIds[id]} - titleText={this.props.controlItem} - />); + dropdownComponent = ( + + listBoxMenuIconTranslationIds[id]} + titleText={this.props.controlItem} + /> + + ); } return ( diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss index 8ba14e6bec..cc154de790 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss @@ -15,7 +15,7 @@ */ .properties-dropdown { - .bx--list-box--expanded .bx--list-box__menu { + .cds--list-box--expanded .cds--list-box__menu { margin-bottom: 1px; // Show dropdown menu border above Save/Cancel buttons } &.hide { @@ -25,37 +25,32 @@ } .properties-table-cell-control { >.properties-dropdown { - width: 100%; - .bx--select.bx--select--inline { - width: 100%; - .bx--select-input--inline__wrapper { + .cds--select.cds--select--inline { + .cds--select-input--inline__wrapper { width: 100%; } svg { right: 0; } } - .bx--select-input { + .cds--select-input { width: inherit; // Override carbon default width: auto background-color: transparent; // Override carbon default background-color: #f4f4f4; padding: 0 1.25rem 0 0; - box-shadow: 0 2px 0 0 $interactive-01; - &:hover { - background: unset; - } + box-shadow: 0 2px 0 0 $button-primary; &:focus { outline: unset; } } &.error { - .bx--select-input { - box-shadow: 0 2px 0 0 $support-01; + .cds--select-input { + box-shadow: 0 2px 0 0 $support-error; } } &.warning { - .bx--select-input { - box-shadow: 0 2px 0 0 $support-03; + .cds--select-input { + box-shadow: 0 2px 0 0 $support-warning; } } } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss index 7b8ff37361..ff65f2554b 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss @@ -105,7 +105,7 @@ $operator-margin: 50%; width: $operator-width; padding: 0; .properties-operator-button-label { - margin: 0 auto; + margin: auto; } } } @@ -123,10 +123,10 @@ $operator-margin: 50%; padding-bottom: $spacing-06; } .properties-expression-table-dropdown-header { - @include carbon--type-style("label-01"); + @include type-style("label-01"); padding-bottom: $spacing-02; } -.properties-primaryTabs .bx--tabs-trigger { +.properties-primaryTabs .cds--tabs-trigger { margin-bottom: 5px; } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx index 78a1bac865..42d7acf606 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx @@ -16,9 +16,9 @@ import React from "react"; import PropTypes from "prop-types"; -import { Add16 } from "@carbon/icons-react"; -import { Button } from "carbon-components-react"; -import { Switch, ContentSwitcher, Dropdown } from "carbon-components-react"; +import { Add } from "@carbon/react/icons"; +import { Button } from "@carbon/react"; +import { Switch, ContentSwitcher, Dropdown } from "@carbon/react"; import FlexibleTable from "./../../../components/flexible-table/flexible-table"; import TruncatedContentTooltip from "./../../../components/truncated-content-tooltip"; import { MESSAGE_KEYS, EXPRESSION_TABLE_ROWS, SORT_DIRECTION, ROW_SELECTION } from "./../../../constants/constants"; @@ -276,9 +276,9 @@ export default class ExpressionSelectFieldOrFunction extends React.Component { className="expression-add-field-button properties-expr-table-cell" onClick={this.handleAddButtonClick.bind(this, index, tableType)} kind="ghost" - size="small" + size="sm" > - + ); return addValueButtonContent; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx index b10ed9955a..2c62998fce 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-builder/expression-select-operator.jsx @@ -16,7 +16,7 @@ import React from "react"; import PropTypes from "prop-types"; -import { Button } from "carbon-components-react"; +import { Button } from "@carbon/react"; import Tooltip from "./../../../../tooltip/tooltip"; import classNames from "classnames"; @@ -50,7 +50,7 @@ export default class ExpressionSelectOperator extends React.Component {
- ); + + ); } } ExpressionToggle.propTypes = { diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-toggle/expression-toggle.scss b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-toggle/expression-toggle.scss index 5dc4262cd6..48260db7af 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-toggle/expression-toggle.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression-toggle/expression-toggle.scss @@ -4,7 +4,7 @@ .properties-expression-toggle-absolute { position: absolute; width: 100%; - button.bx--btn.bx--btn--icon-only { + button.cds--btn.cds--btn--icon-only { position: absolute; right: 0; } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx index a2db69d2fe..b226eaddee 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx @@ -20,7 +20,7 @@ import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import Icon from "./../../../icons/icon.jsx"; -import { Button } from "carbon-components-react"; +import { Button } from "@carbon/react"; import classNames from "classnames"; import { isEqual, concat } from "lodash"; import ValidationMessage from "./../../components/validation-message"; @@ -28,7 +28,7 @@ import WideFlyout from "./../../components/wide-flyout"; import { formatMessage } from "./../../util/property-utils"; import ExpressionBuilder from "./expression-builder/expression-builder"; import { MESSAGE_KEYS, CONDITION_MESSAGE_TYPE, DEFAULT_VALIDATION_MESSAGE } from "./../../constants/constants"; -import { Calculator24 } from "@carbon/icons-react"; +import { Calculator } from "@carbon/react/icons"; import * as ControlUtils from "./../../util/control-utils"; import { STATES } from "./../../constants/constants"; import { get } from "lodash"; @@ -319,9 +319,10 @@ class ExpressionControl extends React.Component { } const reactIntl = this.props.controller.getReactIntl(); + const Calculator24 = React.forwardRef((props, ref) => ); const button = this._showBuilderButton() ? ( -