#8638 Tailwind CSS, bootstrap and other CSS frameworks (#8654)

* #8638 Tailwind CSS, bootstrap and other CSS frameworks * #8638 Tailwind CSS test Fixes #8638 * #8638 - change box sizing for test * #8638 - fixed dropdown button * #8638 fix table cells Fixes #8638 * #8638 - fixed signature, popup overlay, popup icons, tagbox icons, multiple text * #8638 Tailwind CSS, bootstrap and other CSS frameworks Fixes #8638 * #8638 fix popups (scrolling) Fixes #8638 * #8638 setting for testing in preact Fixes #8638 --------- Co-authored-by: Aleksey Novikov <[email protected]>
surveyjs · Aug 13, 2024 · 3a6b5cd · 3a6b5cd
1 parent 60831fc
commit 3a6b5cd
Show file tree

Hide file tree

Showing 16 changed files with 23 additions and 2 deletions.
diff --git a/examples_test/defaultV2/survey-js-ui.html b/examples_test/defaultV2/survey-js-ui.html
@@ -5,7 +5,11 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
-
+    <style >
+      *, ::after, ::before {
+        box-sizing: border-box;
+      }
+    </style>
     <link rel="stylesheet" href="../../build/survey-core/defaultV2.min.css" />
 
     <script src="../../build/survey-core/survey.core.min.js"></script>

diff --git a/packages/survey-core/src/common-styles/sv-list.scss b/packages/survey-core/src/common-styles/sv-list.scss
@@ -118,6 +118,7 @@
   right: calcSize(1);
   flex-shrink: 0;
   padding: calcSize(0.5);
+  box-sizing: content-box;
 
   svg {
     display: block;

diff --git a/packages/survey-core/src/common-styles/sv-popup.scss b/packages/survey-core/src/common-styles/sv-popup.scss
@@ -146,6 +146,7 @@ sv-popup {
     width: 100%;
     padding-top: calcSize(2);
     border: unset;
+    box-sizing: content-box;
   }
 
   .sv-popup__body-content {

diff --git a/packages/survey-core/src/common-styles/window.scss b/packages/survey-core/src/common-styles/window.scss
@@ -52,6 +52,7 @@
         border-radius: calcSize(1);
         display: flex;
         background-color: $background-dim;
+        box-sizing: content-box;
     }
 
     .sv_window_content {

diff --git a/packages/survey-core/src/default-styles.scss b/packages/survey-core/src/default-styles.scss
@@ -1248,6 +1248,7 @@ sv-popup {
   overflow: auto;
   display: flex;
   flex-direction: column;
+  box-sizing: content-box;
 }
 
 .sv-popup__scrolling-content::-webkit-scrollbar {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/header.scss b/packages/survey-core/src/defaultV2-theme/blocks/header.scss
@@ -13,6 +13,7 @@
       margin-top: calcSize(-14);
     }
   }
+  box-sizing: content-box;
 }
 
 .sd-root-modern--mobile .sv-header__overlap {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-action.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-action.scss
@@ -15,6 +15,7 @@
   line-height: multiply(1.5, $font-questiontitle-size);
   outline: none;
   transition: background-color $transition-duration;
+  box-sizing: content-box;
 }
 
 .sd-action--negative {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -76,6 +76,7 @@
   justify-content: center;
   align-items: center;
   padding-inline-end: calcSize(0.5);
+  box-sizing: content-box;
 }
 
 .sd-dropdown_chevron-button-svg,

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-multipletext.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-multipletext.scss
@@ -59,6 +59,7 @@
   border-right: 1px solid $border;
   white-space: normal;
   color: $font-editorfont-placeholdercolor;
+  box-sizing: content-box;
 }
 
 .sd-question--preview .sd-multipletext__item-title {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-progress-buttons.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-progress-buttons.scss
@@ -78,6 +78,7 @@
       line-height: calcLineHeight(1);
       justify-content: center;
       color: $background-dim;
+      box-sizing: content-box;
 
       .sd-progress-buttons__button-background {
         position: absolute;

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-signaturepad.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-signaturepad.scss
@@ -7,6 +7,7 @@
 
 .sjs_sp_container {
     border: 1px dashed $border;
+    box-sizing: content-box;
 }
 
 .sd-question--readonly,

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-table.scss
@@ -17,6 +17,7 @@
   border-left: none;
   border-right: none;
   background-clip: padding-box;
+  box-sizing: content-box;
 }
 
 .sd-table.sd-table--columnsautowidth {

diff --git a/packages/survey-core/src/defaultV2-theme/blocks/sd-tagbox.scss b/packages/survey-core/src/defaultV2-theme/blocks/sd-tagbox.scss
@@ -82,6 +82,7 @@
   padding: multiply(0.25, $font-editorfont-size);
   width: multiply(1, $font-editorfont-size);
   height: multiply(1, $font-editorfont-size);
+  box-sizing: content-box;
 }
 
 .sd-tagbox-item_clean-button-svg:hover {

diff --git a/packages/survey-core/src/defaultV2-theme/defaultV2.fontless.scss b/packages/survey-core/src/defaultV2-theme/defaultV2.fontless.scss
@@ -116,6 +116,7 @@ body {
 
 .sv-popup .sv-popup__scrolling-content {
   @include scrollRules;
+  box-sizing: content-box;
 }
 
 @mixin stickyHeader {

diff --git a/...gressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap-numbers.png b/...gressionTests/tests/defaultV2/etalons/survey-progress-bar-bootstrap-numbers.png
diff --git a/visualRegressionTests/tests/defaultV2/progress.ts b/visualRegressionTests/tests/defaultV2/progress.ts
@@ -364,7 +364,7 @@ frameworks.forEach(framework => {
     });
   });
 
-  test("Check survey with progress and bootstrap", async (t) => {
+  test("Check survey with progress and bootstrap/tailwind", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await ClientFunction(() => {
         document.head.insertAdjacentHTML("beforeend", "<style>* { box-sizing: border-box; }</style>");
@@ -376,6 +376,10 @@ frameworks.forEach(framework => {
         (<any>window).survey.currentPageNo = 1;
       })();
       await takeElementScreenshot("survey-progress-bar-bootstrap.png", Selector(".sd-progress-buttons__list"), t, comparer); // title + progress
+      await ClientFunction(() => {
+        (<any>window).survey.progressBarShowPageNumbers = true;
+      })();
+      await takeElementScreenshot("survey-progress-bar-bootstrap-numbers.png", Selector(".sd-progress-buttons__list"), t, comparer);
     });
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
           margin-top: calcSize(-14);
         }
       }
+      box-sizing: content-box;
     }
     .sd-root-modern--mobile .sv-header__overlap {
@@ Expand Down @@