@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-dialog/ic-dialog.stories.js

@@ -12,6 +12,7 @@ const defaultArgs = {
   label: "Dialog",
   open: true,
   size: "medium",
+  theme: "inherit",
 };
 
 export default {
@@ -79,225 +80,6 @@ export const Sizes = {
   name: "Sizes",
 };
 
-export const Status = {
-  render: () => html`
-    <script>
-      function showNeutralDialog() {
-        dialog = document.querySelector("#neutral-dialog");
-        dialog.open = true;
-      }
-      function showInfoDialog() {
-        dialog = document.querySelector("#info-dialog");
-        dialog.open = true;
-      }
-      function showWarningDialog() {
-        dialog = document.querySelector("#warning-dialog");
-        dialog.open = true;
-      }
-      function showErrorDialog() {
-        dialog = document.querySelector("#error-dialog");
-        dialog.open = true;
-      }
-      function showSuccessDialog() {
-        dialog = document.querySelector("#success-dialog");
-        dialog.open = true;
-      }
-    </script>
-    <ic-button variant="primary" onclick="showNeutralDialog()"
-      >Launch neutral dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showInfoDialog()"
-      >Launch info dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showWarningDialog()"
-      >Launch warning dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showErrorDialog()"
-      >Launch error dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showSuccessDialog()"
-      >Launch success dialog</ic-button
-    >
-    <ic-dialog
-      heading="This dialog has a neutral alert"
-      label="Neutral"
-      status="neutral"
-      alert-heading="Neutral alert"
-      alert-message="This alert is for generic/miscellaneous messages"
-      id="neutral-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has an info alert"
-      label="Info"
-      status="info"
-      alert-heading="Info alert"
-      alert-message="This alert is for information"
-      id="info-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has a warning alert"
-      label="Warning"
-      status="warning"
-      alert-heading="Warning alert"
-      alert-message="This alert is for warnings"
-      id="warning-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has an error alert"
-      label="Error"
-      status="error"
-      alert-heading="Error alert"
-      alert-message="This alert is for errors"
-      id="error-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has a success alert"
-      label="Success"
-      status="success"
-      alert-heading="Success alert"
-      alert-message="This alert is for success messages"
-      id="success-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-  `,
-
-  name: "Status",
-};
-
-export const Buttons = {
-  render: () => html`
-    <script>
-      function showPlainDialog() {
-        dialog = document.querySelector("#plain-dialog");
-        dialog.open = true;
-      }
-      function showSingleDialog() {
-        dialog = document.querySelector("#single-dialog");
-        dialog.open = true;
-      }
-      function showDoubleDialog() {
-        dialog = document.querySelector("#double-dialog");
-        dialog.open = true;
-      }
-      function showTripleDialog() {
-        dialog = document.querySelector("#triple-dialog");
-        dialog.open = true;
-      }
-      function showDestructiveDialog() {
-        dialog = document.querySelector("#destructive-dialog");
-        dialog.open = true;
-      }
-      tripleDialog = document.querySelector("#triple-dialog");
-      tripleDialog.buttonProps = [
-        { label: "Cancel", onclick: "this.hideDialog()" },
-        { label: "Options", onclick: "alert('Options...')" },
-        { label: "Confirm", onclick: "alert('Confirmed')" },
-      ];
-      singleDialog = document.querySelector("#single-dialog");
-      singleDialog.buttonProps = [
-        { label: "Confirm", onclick: "alert('Confirmed')" },
-      ];
-      destructiveDialog = document.querySelector("#destructive-dialog");
-      destructiveDialog.buttonProps = [
-        { label: "Confirm", onclick: "alert('Confirmed')" },
-      ];
-    </script>
-    <ic-button variant="primary" onclick="showPlainDialog()"
-      >Launch no button dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showSingleDialog()"
-      >Launch single button dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showDoubleDialog()"
-      >Launch two button dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showTripleDialog()"
-      >Launch three button dialog</ic-button
-    >
-    <ic-button variant="primary" onclick="showDestructiveDialog()"
-      >Launch destructive button dialog</ic-button
-    >
-    <ic-dialog
-      heading="This dialog has no default buttons"
-      label="None"
-      id="plain-dialog"
-      buttons="false"
-    >
-      <ic-typography
-        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.</ic-typography
-      >
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has a single button"
-      label="Single"
-      id="single-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has two default buttons"
-      label="Double"
-      id="double-dialog"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has three default buttons"
-      label="Triple"
-      id="triple-dialog"
-    >
-      <ic-typography
-        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.</ic-typography
-      >
-    </ic-dialog>
-    <ic-dialog
-      heading="This dialog has a default destructive button"
-      label="Destructive"
-      id="destructive-dialog"
-      destructive="true"
-    >
-      <ic-typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua.
-      </ic-typography>
-    </ic-dialog>
-  `,
-
-  name: "Buttons",
-};
-
 export const SlottedContent = {
   render: () => html`
     <script>
@@ -386,7 +168,7 @@ export const SlottedContent = {
           <ic-menu-group label="View">
             <ic-menu-item
               label="Zoom in"
-              keyboard-shortcut="Cmd+"
+              keyboard-shortcut-label="Cmd+"
             ></ic-menu-item>
           </ic-menu-group>
           <ic-menu-item
@@ -742,10 +524,13 @@ export const Popover = {
       >
         <ic-menu-item label="Copy code" disabled="true"></ic-menu-item>
         <ic-menu-group label="View">
-          <ic-menu-item label="Zoom in" keyboard-shortcut="Cmd+"></ic-menu-item>
+          <ic-menu-item
+            label="Zoom in"
+            keyboard-shortcut-label="Cmd+"
+          ></ic-menu-item>
           <ic-menu-item
             label="Zoom out"
-            keyboard-shortcut="Cmd-"
+            keyboard-shortcut-label="Cmd-"
           ></ic-menu-item>
         </ic-menu-group>
         <ic-menu-item label="Actions" submenu-trigger-for="abc"></ic-menu-item>
@@ -867,7 +652,7 @@ export const DisableHeightConstraint = {
       document
         .querySelector("#long-text-select-dialog-btn")
         .addEventListener("click", () => {
-          document.querySelector("#long-text-select-dialog").showDialog();
+          document.querySelector("#long-text-select-dialog").open = true;
         });
       document
         .querySelector("#short-text-select-dialog-btn")
@@ -1097,7 +882,7 @@ export const DisableWidthConstraint = {
       document
         .querySelector("#full-width-dialog-btn")
         .addEventListener("click", () => {
-          document.querySelector("#full-width-dialog").showDialog();
+          document.querySelector("#full-width-dialog").open = true;
         });
     </script>
     <div>
@@ -1127,7 +912,7 @@ export const ShowHideInteractiveElements = {
   render: () => html`
     <script>
       function showSmallDialog() {
-        dialog = document.querySelector("#small-dialog").showDialog();
+        dialog = document.querySelector("#small-dialog").open = true;
       }
       var btnShow = document.querySelector(".show");
       btnShow.addEventListener("click", () => {
@@ -1230,6 +1015,7 @@ export const Playground = {
       disable-width-constraint=${args.disableWidthConstraint}
       hide-close-button=${args.hideCloseButton}
       buttons=${args.buttons}
+      theme=${args.theme}
       id="medium-dialog"
     >
       <ic-typography>
@@ -1250,6 +1036,14 @@ export const Playground = {
         type: "radio",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
   },
 
   name: "Playground",

package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js

@@ -71,19 +71,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         expect(page.root).toMatchSnapshot();
     });
-    it("should render with a single default button", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Confirm", onclick: "this.icDialogConfirm()" },
-        ];
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
     it("should render with two default buttons", async () => {
         const page = await newSpecPage({
             components: [Dialog, Button],
@@ -92,58 +79,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         expect(page.root).toMatchSnapshot();
     });
-    it("should render with three default buttons", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Cancel", onclick: "this.hideDialog()" },
-            { label: "Options", onclick: "alert('Options...')" },
-            { label: "Confirm", onclick: "this.icDialogConfirm()" },
-        ];
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with no more than three default buttons", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Cancel", onclick: "this.hideDialog()" },
-            { label: "Options", onclick: "alert('Options...')" },
-            { label: "Confirm", onclick: "this.icDialogConfirm()" },
-            { label: "Extra", onclick: "alert('Extra button')" },
-        ];
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with a destructive default button", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading test" destructive="true"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Confirm", onclick: "this.icDialogConfirm()" },
-        ];
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("should render with an alert", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: `<ic-dialog heading="Dialog heading" status="neutral" alert-heading="Alert heading" alert-message="Alert message" buttons="false"></ic-dialog>`,
-        });
-        setupDialogMethods(page);
-        expect(page.root).toMatchSnapshot();
-    });
     it("should display with the open prop", async () => {
         const page = await newSpecPage({
             components: [Dialog, Button],
@@ -183,45 +118,6 @@ describe("ic-dialog component", () => {
         expect(eventSpy).toHaveBeenCalled();
         expect(page.rootInstance.dialogRendered).toBe(false);
     });
-    it("should display with the showDialog method", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: `<ic-dialog heading="Dialog heading"></ic-dialog>`,
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        const eventSpy = jest.fn();
-        page.win.addEventListener("icDialogOpened", eventSpy);
-        await dialog.showDialog();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(eventSpy).toHaveBeenCalled();
-        expect(page.rootInstance.dialogRendered).toBe(true);
-    });
-    it("should hide with the hideDialog method", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: `<ic-dialog heading="Dialog heading"></ic-dialog>`,
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        const eventSpy = jest.fn();
-        page.win.addEventListener("icDialogClosed", eventSpy);
-        await dialog.hideDialog();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(eventSpy).toHaveBeenCalled();
-        expect(page.rootInstance.dialogRendered).toBe(false);
-    });
     it("should test icDialogCancelled event emitted", async () => {
         const page = await newSpecPage({
             components: [Dialog, Button],
@@ -230,7 +126,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -252,7 +147,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -274,7 +168,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -297,7 +190,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -320,7 +212,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -335,7 +226,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -355,7 +245,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -380,7 +269,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -405,7 +293,6 @@ describe("ic-dialog component", () => {
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -417,28 +304,6 @@ describe("ic-dialog component", () => {
         await waitForTimeout(DIALOG_DELAY_MS);
         expect(page.rootInstance.dialogRendered).toBe(false);
     });
-    it("should correctly pass onclick functions to a single default button", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [{ label: "Confirm", onclick: "this.hideDialog()" }];
-        await page.waitForChanges();
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[1].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-    });
     it("should trigger private focusNextInteractiveElement method when tab pressed", async () => {
         const page = await newSpecPage({
             components: [Dialog, TextField, Button],
@@ -450,7 +315,6 @@ describe("ic-dialog component", () => {
         });
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
-        await dialog.showDialog();
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
@@ -463,7 +327,7 @@ describe("ic-dialog component", () => {
         const page = await newSpecPage({
             components: [Dialog, AccordionGroup, Accordion, Button],
             html: `<ic-dialog heading="Dialog heading">
-        <ic-accordion-group group-title="Test heading">
+        <ic-accordion-group label="Test heading">
           <ic-accordion>
             <ic-typography variant="body" >
               This is an example of the main body text.
@@ -507,91 +371,9 @@ describe("ic-dialog component", () => {
         await page.waitForChanges();
         expect(page.rootInstance.focusedElementIndex).toBe(1);
     });
-    it("should correctly pass onclick functions to two default buttons", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Close", onclick: "this.hideDialog()" },
-            { label: "Confirm", onclick: "this.hideDialog()" },
-        ];
-        await page.waitForChanges();
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[1].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[2].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-    });
-    it("should correctly pass onclick functions to three default buttons", async () => {
-        const page = await newSpecPage({
-            components: [Dialog, Button],
-            html: '<ic-dialog heading="Dialog heading"></ic-dialog>',
-        });
-        setupDialogMethods(page);
-        const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Cancel", onclick: "this.hideDialog()" },
-            { label: "Options", onclick: "this.hideDialog()" },
-            { label: "Confirm", onclick: "this.hideDialog()" },
-        ];
-        await page.waitForChanges();
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[1].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[2].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
-        dialog.open = true;
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(true);
-        page.root.shadowRoot.querySelectorAll("ic-button")[3].click();
-        await page.waitForChanges();
-        //delay for setTimeout in code
-        await waitForTimeout(DIALOG_DELAY_MS);
-        expect(page.rootInstance.dialogRendered).toBe(false);
-    });
     it("should render with a ic-search-bar as first focussable element", async () => {
         const page = await newSpecPage({
-            components: [Dialog, Button, SearchBar, TextField],
+            components: [Dialog, Accordion, Button, SearchBar],
             html: `<ic-dialog heading="Dialog heading">
         <ic-search-bar label="What is your favourite coffee?"></ic-search-bar>
         <ic-button>Click Me</ic-button>
@@ -602,7 +384,7 @@ describe("ic-dialog component", () => {
         dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
-        await waitForTimeout(1000);
+        await waitForTimeout(DIALOG_DELAY_MS);
         expect(page.rootInstance.interactiveElementList[1].nodeName).toBe("IC-SEARCH-BAR");
         page.win.document.dispatchEvent(new KeyboardEvent("keydown", keyboardEvent("Tab")));
         await page.waitForChanges();
@@ -639,21 +421,16 @@ describe("ic-dialog component", () => {
         contentAreaSlot.dispatchEvent(new Event("slotchange"));
         expect(page.rootInstance.getInteractiveElements).toBeCalledTimes(1);
     });
-    it("should call dialog.show() disableHeightConstraint is set and showDialog is called", async () => {
+    it("should call dialog.show() disableHeightConstraint is set and open is true", async () => {
         const page = await newSpecPage({
             components: [Dialog, Button],
             html: '<ic-dialog heading="Dialog heading" disable-height-constraint="true"></ic-dialog>',
         });
         setupDialogMethods(page);
         const dialog = document.querySelector("ic-dialog");
-        dialog.buttonProps = [
-            { label: "Cancel", onclick: "this.hideDialog()" },
-            { label: "Options", onclick: "this.hideDialog()" },
-            { label: "Confirm", onclick: "this.hideDialog()" },
-        ];
         await page.waitForChanges();
         expect(page.rootInstance.dialogRendered).toBe(false);
-        await dialog.showDialog();
+        dialog.open = true;
         await page.waitForChanges();
         //delay for setTimeout in code
         await waitForTimeout(DIALOG_DELAY_MS);