Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#1646 Panel accordions are not using the carbon standards #1648

Merged
merged 26 commits into from
Apr 22, 2024
Merged

#1646 Panel accordions are not using the carbon standards #1648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ef939bb
#1646 Panel accordions are not using the carbon standards
srikant-ch5 Dec 14, 2023
5a19d94
#1646 Panel accordions - Resolve code-test and tearsheet testcases by…
srikant-ch5 Dec 15, 2023
8ef25bc
Conditionally render panel accordions
srikant-ch5 Dec 18, 2023
f8467ee
Fix Nested Accordion Issue and classnames
srikant-ch5 Dec 21, 2023
89eb79c
Merge remote-tracking branch 'upstream/main' into 14295_Accordion_Rig…
srikant-ch5 Dec 21, 2023
f3e7f9c
##1646 Use default classnames
srikant-ch5 Dec 21, 2023
57ae673
Merge branch 'main' into 14295_Accordion_RightFlyoutN
matthoward366 Jan 3, 2024
ce5b0a0
Enable Opening of Multiple Tabs, Open Default Tab and Open Tab with A…
srikant-ch5 Jan 5, 2024
cf70ce6
Remove bx classname from content and describe accordion inside accordion
srikant-ch5 Jan 8, 2024
1846351
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Jan 8, 2024
0533b69
Merge branch 'main' into 14295_Accordion_RightFlyoutN
matthoward366 Jan 10, 2024
7e01dc8
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Feb 28, 2024
73119e9
Fix setTopLevelActiveGroup test case failure due to accordion
srikant-ch5 Feb 28, 2024
3237bad
Include Carbon 11 Changes in Panel Accordions
srikant-ch5 Apr 16, 2024
b0f62e6
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Apr 16, 2024
c0fb47f
Fix Build issues in editor-form files
srikant-ch5 Apr 16, 2024
f72d07f
Revert Copyright changes in editor-form.scss
srikant-ch5 Apr 16, 2024
93e1b6c
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Apr 17, 2024
4394438
Delete package-lock.json
srikant-ch5 Apr 17, 2024
5a31522
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Apr 18, 2024
9455f20
Adjust Accordion height and border as per previous setup
srikant-ch5 Apr 18, 2024
789f4bb
Update Accordion border
srikant-ch5 Apr 18, 2024
1b7280b
Fix css issues by replacing classnames
srikant-ch5 Apr 19, 2024
283ad0e
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Apr 19, 2024
2930b5b
Add cds--accordion__item class in editor-form css to make twisty pane…
srikant-ch5 Apr 19, 2024
a5131a8
Merge branch 'main' into 14295_Accordion_RightFlyoutN
srikant-ch5 Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions canvas_modules/common-canvas/__tests__/common-properties/conditions/alerts-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ describe("condition messages should add alerts tab", () => {
randomInput.simulate("change", { target: { value: "", validity: { badInput: false } } });
// get alerts tabs
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
let alertButton = alertCategory.find("button.properties-category-title");
let alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (2)");
alertButton.simulate("click");

// ensure that alert tab is open
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
const alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
let alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(2);
Expand All @@ -59,17 +59,17 @@ describe("condition messages should add alerts tab", () => {
alertList.at(0).find("a.properties-link-text")
.simulate("click");
let valuesCategory = wrapper.find("div.properties-category-container").at(1); // Values category
expect(valuesCategory.find("button.properties-category-title").text()).to.equal("Values (2)");
expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values (2)");

// regenerate random number should decrease alert list
let valuesDiv = valuesCategory.find("div.properties-category-content.show"); // Values div
let valuesDiv = valuesCategory.find("li.properties-category-content.show"); // Values div
expect(valuesDiv).to.have.length(1);
const generator = valuesDiv.find("button.properties-number-generator");
expect(generator).to.have.length(2);
generator.at(0).simulate("click");

alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
alertButton = alertCategory.find("button.properties-category-title");
alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (1)");
alertButton.simulate("click");

Expand All @@ -81,22 +81,22 @@ describe("condition messages should add alerts tab", () => {

// enter new integer value to remove all Alerts
valuesCategory = wrapper.find("div.properties-category-container").at(1); // Values category
expect(valuesCategory.find("button.properties-category-title").text()).to.equal("Values (1)");
expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values (1)");

valuesDiv = valuesCategory.find("div.properties-category-content.show"); // Values category
valuesDiv = valuesCategory.find("li.properties-category-content.show"); // Values category
expect(valuesDiv).to.have.length(1);
integerInput = valuesDiv.find("div[data-id='properties-number_int'] input");
expect(integerInput).to.have.length(1);
integerInput.simulate("change", { target: { value: "1" } });

valuesCategory = wrapper.find("div.properties-category-container").at(0); // Values category
expect(valuesCategory.find("button.properties-category-title").text()).to.equal("Values");
expect(valuesCategory.find("button.cds--accordion__heading").text()).to.equal("Values");
});
// Skipping this test till carbon 11 bug is fixed - https://github.com/carbon-design-system/carbon/issues/15985
it.skip("alerts should not show messages for hidden controls", () => {
// open the conditions tabs
const conditionsCategory = wrapper.find("div.properties-category-container").at(1); // Conditions category
const conditionsButton = conditionsCategory.find("button.properties-category-title");
const conditionsButton = conditionsCategory.find("button.cds--accordion__heading");
expect(conditionsButton.text()).to.equal("Conditions");
conditionsButton.simulate("click");

Expand All @@ -114,13 +114,13 @@ describe("condition messages should add alerts tab", () => {

// get alerts tabs
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertButton = alertCategory.find("button.properties-category-title");
const alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (1)");
alertButton.simulate("click");

// ensure that alert tab is open
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
let alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
let alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(1);
Expand All @@ -132,7 +132,7 @@ describe("condition messages should add alerts tab", () => {

// there should be no alerts for the hidden field
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(0);
});
Expand All @@ -151,13 +151,13 @@ describe("condition messages should add alerts tab for tables", () => {
// validate the Alerts tab has 2 warnings
// get alerts tabs
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertButton = alertCategory.find("button.properties-category-title");
const alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (2)");
alertButton.simulate("click");

// ensure that alert tab is open
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
let alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
let alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(2);
Expand Down Expand Up @@ -190,7 +190,7 @@ describe("condition messages should add alerts tab for tables", () => {

// validate the Alerts tab has only 1 warning
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(1);
Expand All @@ -200,7 +200,7 @@ describe("condition messages should add alerts tab for tables", () => {
it("alerts should not show messages for hidden table controls", () => {
// open the conditions tabs
const conditionsCategory = wrapper.find("div.properties-category-container").at(5); // Conditions category
const conditionsButton = conditionsCategory.find("button.properties-category-title");
const conditionsButton = conditionsCategory.find("button.cds--accordion__heading");
expect(conditionsButton.text()).to.equal("Conditions");
conditionsButton.simulate("click");

Expand Down Expand Up @@ -234,13 +234,13 @@ describe("condition messages should add alerts tab for tables", () => {
// validate the Alerts tab has the error
// get alerts tabs
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertButton = alertCategory.find("button.properties-category-title");
const alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (3)");
alertButton.simulate("click");

// ensure that alert tab is open
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
let alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
let alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
let alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(3);
Expand All @@ -267,7 +267,7 @@ describe("condition messages should add alerts tab for tables", () => {

// Verify the Error is cleared from Alerts tab
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(2);
expect(alertList.at(0).text()).to.not.equal("The field cannot contain 'number'");
Expand All @@ -292,7 +292,7 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi
expect(allCategories).to.have.length(3);

allCategories.forEach((category, idx) => {
const categoryTitle = category.find("button.properties-category-title").text();
const categoryTitle = category.find("button.cds--accordion__heading").text();
expect(categoryTitle).to.equal(categoryLabels[idx]);
});
});
Expand All @@ -308,7 +308,7 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi
expect(allCategories).to.have.length(4);

allCategories.forEach((category, idx) => {
const categoryTitle = category.find("button.properties-category-title").text();
const categoryTitle = category.find("button.cds--accordion__heading").text();
expect(categoryTitle).to.equal(categoryLabels[idx]);
});
});
Expand All @@ -324,7 +324,7 @@ describe("Show/hide Alerts tab based on showAlertsTab boolean in propertiesConfi
expect(allCategories).to.have.length(4);

allCategories.forEach((category, idx) => {
const categoryTitle = category.find("button.properties-category-title").text();
const categoryTitle = category.find("button.cds--accordion__heading").text();
expect(categoryTitle).to.equal(categoryLabels[idx]);
});
});
Expand Down
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/__tests__/common-properties/controls/selectcolumn-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,13 +422,13 @@ describe("selectcolumn control renders correctly with paramDef", () => {
// Verify there are 2 alerts
// get alerts tabs
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertButton = alertCategory.find("button.properties-category-title");
const alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (2)");
alertButton.simulate("click");

// ensure that alert tab is open
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertDiv = alertCategory.find("div.properties-category-content.show"); // Alerts div
const alertDiv = alertCategory.find("li.properties-category-content.show"); // Alerts div
expect(alertDiv).to.have.length(1);
const alertList = alertDiv.find("a.properties-link-text");
expect(alertList).to.have.length(2);
Expand All @@ -452,7 +452,7 @@ describe("selectcolumn control renders correctly with paramDef", () => {

// Verify alerts are cleared by checking first tab is not the alert tab
const firstCategory = wrapper.find("div.properties-category-container").at(0);
const firstTab = firstCategory.find("button.properties-category-title");
const firstTab = firstCategory.find("button.cds--accordion__heading");
expect(firstTab.text()).to.equal("Values");
});
});
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/__tests__/common-properties/controls/someofselect-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ describe("someofselect control multiple rows selection", () => {

it("verify multiple rows select/deselect works fine with filtered enum", () => {
// Open filters tab
wrapper.find("button.properties-category-title")
wrapper.find("button.cds--accordion__heading")
.at(2)
.simulate("click");
let someofselectWrapper;
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/__tests__/common-properties/panels/panel-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ describe("additional components are rendered correctly", () => {
const customPanel = wrapper.find(".properties-custom-container");
expect(customPanel).to.have.length(1);
const togglePanelContainer = customPanel.find(".properties-category-container").at(0);
const togglePanelContent = togglePanelContainer.find(".properties-category-content");
const togglePanelContent = togglePanelContainer.find(".cds--accordion__content");
expect(togglePanelContent.children()).to.have.length(2); // Default Component & Additional Component

});
Expand Down
12 changes: 6 additions & 6 deletions canvas_modules/common-canvas/__tests__/common-properties/panels/summary-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ describe("summary panel renders error/warning status correctly", () => {

// check that Alerts tab is added
const alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
const alertButton = alertCategory.find("button.properties-category-title");
const alertButton = alertCategory.find("button.cds--accordion__heading");
expect(alertButton.text()).to.equal("Alerts (1)");
alertButton.simulate("click");
const alertList = alertCategory.find("div.properties-link-text-container.warning");
Expand All @@ -130,7 +130,7 @@ describe("summary panel renders error/warning status correctly", () => {

// click on the link should open up structure list table category
warningMsg.simulate("click");
expect(wrapper.find("div.properties-category-content.show")).to.have.length(1);
expect(wrapper.find("li.properties-category-content.show")).to.have.length(1);

// check that warning icon is shown in summary
let tableCategory = wrapper.find("div[data-id='properties-Derive-Node']");
Expand Down Expand Up @@ -186,7 +186,7 @@ describe("summary panel renders error/warning status correctly", () => {

// check that Alerts tab is added and that is shows error message before warning message
let alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
expect(alertCategory.find("button.properties-category-title").text()).to.equal("Alerts (2)");
expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (2)");
let alertList = alertCategory.find("div.properties-link-text-container");
expect(alertList).to.have.length(2);
const errorWrapper = alertCategory.find("div.properties-link-text-container.error");
Expand All @@ -197,7 +197,7 @@ describe("summary panel renders error/warning status correctly", () => {
expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty");
// check that summary icon is an error icon
let tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category
expect(tableCategory.find("button.properties-category-title").text()).to.equal("Structure List Table (2)");
expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (2)");
let summary = tableCategory.find("div.properties-summary-link-container");
expect(summary.find("svg.error")).to.have.length(1);

Expand All @@ -212,15 +212,15 @@ describe("summary panel renders error/warning status correctly", () => {

// check that Alerts tab is added and that is shows error message before warning message
alertCategory = wrapper.find("div.properties-category-container").at(0); // alert category
expect(alertCategory.find("button.properties-category-title").text()).to.equal("Alerts (1)");
expect(alertCategory.find("button.cds--accordion__heading").text()).to.equal("Alerts (1)");
alertList = alertCategory.find("div.properties-link-text-container");
expect(alertList).to.have.length(1);
warningWrapper = alertCategory.find("div.properties-link-text-container.warning");
expect(warningWrapper).to.have.length(1);
expect(warningWrapper.find("a.properties-link-text").text()).to.equal("Expression cell table cannot be empty");
// check that summary icon is an error icon
tableCategory = wrapper.find("div.properties-category-container").at(1); // Structure list table category
expect(tableCategory.find("button.properties-category-title").text()).to.equal("Structure List Table (1)");
expect(tableCategory.find("button.cds--accordion__heading").text()).to.equal("Structure List Table (1)");
summary = tableCategory.find("div.properties-summary-link-container");
expect(summary.find("svg.warning")).to.have.length(1);
});
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/__tests__/common-properties/properties-controller-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2402,7 +2402,7 @@ describe("Properties Controller getTopLevelActiveGroupId", () => {

// Select Conditions accordion
const conditionsCategory = wrapper.find("div.properties-category-container").at(1);
conditionsCategory.find("button.properties-category-title").simulate("click");
conditionsCategory.find("button.cds--accordion__heading").simulate("click");
topLevelActiveGroupId = controller.getTopLevelActiveGroupId();
expect(topLevelActiveGroupId).to.equal("checkboxset-conditions");

Expand All @@ -2422,7 +2422,7 @@ describe("Properties Controller setTopLevelActiveGroup", () => {

// Select Condition in accordion
const conditionsCategory = wrapper.find("div.properties-category-container").at(2);
conditionsCategory.find("button.properties-category-title").simulate("click");
conditionsCategory.find("button.cds--accordion__heading").simulate("click");
topLevelActiveGroupId = controller.getTopLevelActiveGroupId();
expect(topLevelActiveGroupId).to.equal("Primary2");
});
Expand Down
Loading