@zohodesk/dot 1.7.10 → 1.7.12

package/lib/ActionButton/__tests__/__snapshots__/ActionButton.spec.js.snap

@@ -1,6 +1,2579 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActionButton rendering the defult props 1`] = `
+exports[`ActionButton renders dataId prop with isLoading set to true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="testDataId_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="testDataId_actionButton"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <button
+        class="btn bold primaryfilled medium loader"
+        data-id="buttonComp"
+        data-selector-id="button"
+        data-test-id="buttonComp"
+        disabled=""
+        type="button"
+      >
+        Button
+        <div
+          class="overlay"
+        >
+          <div
+            class="loading mediumloading"
+          >
+            <div
+              class="loadingelement primaryfilledelement"
+            />
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with arrowBoxSize medium and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with arrowBoxSize medium and isPopupOpen false 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with arrowBoxSize small and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset small_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with arrowBoxSize small and isPopupOpen true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with children and tooltip disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with children and tooltip enabled 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with children prop 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with custom className 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium custom-class  wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dataId prop 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="testDataId_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="testDataId_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="testDataId"
+      data-selector-id="box"
+      data-test-id="testDataId"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dataId, children, and popup open 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="testDataId_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="testDataId_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="testDataId"
+      data-selector-id="box"
+      data-test-id="testDataId"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="testDataId_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="testDataId_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="testDataId_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="testDataId_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="testDataId_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="testDataId_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dataSelectorId and children props 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="testSelectorId"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="testSelectorId_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dataTitle 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      data-title="Test Data Title"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with default props 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with disabled state true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium  disabled wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dropBoxClassProps - case 1 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main custom-dropbox-class container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dropBoxClassProps - case 2 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dropBoxClassProps - case 3 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main custom-dropbox-class container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with dropBoxClassProps - case 4 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with iconName: { iconName: 'ZD-replyall', iconSize: '9' } and iconSize: %s 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-replyall-new  iconClr iconMrgn  "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size9);"
+            />
+            <div
+              class="txt shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+              data-title="Not Loading - Main Text"
+            >
+              Not Loading - Main Text
+            </div>
+          </div>
+        </div>
+        <div
+          class="subTxt shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="Not Loading - Sub Text"
+        >
+          Not Loading - Sub Text
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with innerClassName set to custom-class 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable custom-class  grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with innerClassName set to empty string 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with innerClassName set to undefined 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isAbsolutePositioningNeeded set to true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isAbsolutePositioningNeeded set to true and isPopupOpen true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isArrow false and popup open 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isArrow true and popup open 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small boxDirection arrow"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="arrowPosition"
+            data-id="actionButton_dropbox_arrow"
+            data-selector-id="dropBox_arrow"
+            data-test-id="actionButton_dropbox_arrow"
+          >
+            <div
+              class="arrowShape"
+            />
+          </div>
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isLoading set to true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <button
+        class="btn bold primaryfilled medium loader"
+        data-id="buttonComp"
+        data-selector-id="button"
+        data-test-id="buttonComp"
+        disabled=""
+        type="button"
+      >
+        Loading...
+        <div
+          class="overlay"
+        >
+          <div
+            class="loading mediumloading"
+          >
+            <div
+              class="loadingelement primaryfilledelement"
+            />
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isPopupOpen false and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isPopupOpen true and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isRestrictScroll set to true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with isRestrictScroll set to true and isPopupOpen true 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+      <div
+        class="main container bottomMid small paddingSpace"
+        data-a11y-focus-main-area="true"
+        data-arrow-position="mid"
+        data-box-direction="bottom"
+        data-id="actionButton_dropbox"
+        data-position="bottomMid"
+        data-selector-id="dropBox"
+        data-test-id="actionButton_dropbox"
+        dot-ui-element="dropbox"
+        style="z-index: 4;"
+      >
+        <div
+          class="subContainer shadow boxPadding radius fadeInScale defaultPalette"
+          data-a11y-focus-scope="true"
+          data-id="actionButton_dropbox_subcontainer"
+          data-selector-id="dropBox_subcontainer"
+          data-test-id="actionButton_dropbox_subcontainer"
+          tabindex="-1"
+        >
+          <div
+            class="flex coldir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="grow basis shrinkOn scrolly"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div>
+                Child Content
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with onClick prop and validates class 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium     flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-replyall-new  iconClr iconMrgn  "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size9);"
+            />
+            <div
+              class="txt shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+              data-title="Not Loading - Main Text onClick"
+            >
+              Not Loading - Main Text onClick
+            </div>
+          </div>
+        </div>
+        <div
+          class="subTxt shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="Not Loading - Sub Text onClick"
+        >
+          Not Loading - Sub Text onClick
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primary 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primary and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primary and loading 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <button
+        class="btn bold primary medium loader"
+        data-id="buttonComp"
+        data-selector-id="button"
+        data-test-id="buttonComp"
+        disabled=""
+        type="button"
+      >
+        Button
+        <div
+          class="overlay"
+        >
+          <div
+            class="loading mediumloading"
+          >
+            <div
+              class="loadingelement primaryelement"
+            />
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primaryFilled 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primaryFilled and children 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdr clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
+      data-id="actionButton_arrowButton"
+      data-selector-id="actionButton_arrowButton"
+      data-test-id="actionButton_arrowButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-down  arrow  "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size6);"
+        />
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with palette - primaryFilled and loading 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <div
+      class="grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <button
+        class="btn bold primaryfilled medium loader"
+        data-id="buttonComp"
+        data-selector-id="button"
+        data-test-id="buttonComp"
+        disabled=""
+        type="button"
+      >
+        Button
+        <div
+          class="overlay"
+        >
+          <div
+            class="loading mediumloading"
+          >
+            <div
+              class="loadingelement primaryfilledelement"
+            />
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with removeClose set to a function 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with size - large 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox large   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn large_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with size - medium 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with size - small 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox small   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn small_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with subText 1`] = `
 <DocumentFragment>
   <div
     class="container primaryFilledBox medium   wholeDiv  flex rowdir"
@@ -34,6 +2607,65 @@ exports[`ActionButton rendering the defult props 1`] = `
             data-test-id="containerComponent"
           />
         </div>
+        <div
+          class="subTxt shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+          data-title="Not Loading - Sub Text"
+        >
+          Not Loading - Sub Text
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ActionButton renders with text 1`] = `
+<DocumentFragment>
+  <div
+    class="container primaryFilledBox medium   wholeDiv  flex rowdir"
+    data-id="actionButton_actionButton"
+    data-selector-id="actionButton"
+    data-test-id="actionButton_actionButton"
+  >
+    <button
+      class="buttonReset contentBox primaryFilledBtn medium_btnBox contentBoxBdrRds clickable   grow basis shrinkOff"
+      data-id="actionButton"
+      data-selector-id="box"
+      data-test-id="actionButton"
+      tabindex="0"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="contentwrapper shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir vCenter"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="txt shrinkOn"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+              data-title="Not Loading - Main Text"
+            >
+              Not Loading - Main Text
+            </div>
+          </div>
+        </div>
       </div>
     </button>
   </div>