Theme bugs (#6647)

* fix font weight style * fix popup corners * fix boolean question style with transparence background * fix background color of rating item * update boolean markup snapshot * update etalons after "fix popup corners" * fix tagbox items vertical alignment * update etalon --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Aug 4, 2023 · bd2139b · bd2139b
1 parent 05ed4e0
commit bd2139b
Show file tree

Hide file tree

Showing 30 changed files with 18 additions and 4 deletions.
diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss
@@ -24,6 +24,7 @@ sv-popup {
 
 .sv-popup__container {
   box-shadow: $shadow-large;
+  border-radius: calcCornerRadius(2);
   position: absolute;
   padding: 0;
 }

diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -270,6 +270,8 @@ export var defaultV2Css = {
     itemDisabled: "sd-boolean--disabled",
     itemHover: "sd-boolean--allowhover",
     label: "sd-boolean__label",
+    labelTrue: "sd-boolean__label--true",
+    labelFalse: "sd-boolean__label--false",
     switch: "sd-boolean__switch",
     disabledLabel: "sd-checkbox__label--disabled",
     sliderText: "sd-boolean__thumb-text",

diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss
@@ -37,6 +37,14 @@
   border-radius: calcSize(12.5);
 }
 
+.sd-boolean.sd-boolean--checked .sd-boolean__label--true,
+.sd-boolean:not(.sd-boolean--checked):not(sd-boolean--indeterminate) .sd-boolean__label--false {
+  color: transparent;
+  transition-duration: 0.15s;
+  transition-property: color;
+  transition-timing-function: linear;
+}
+
 .sd-boolean.sd-boolean--indeterminate .sd-boolean__switch {
   display: none;
 }

diff --git a/src/defaultV2-theme/blocks/sd-item.scss b/src/defaultV2-theme/blocks/sd-item.scss
@@ -39,7 +39,7 @@
 .sd-item__control-label {
   font-family: $font-editorfont-family;
   font-style: normal;
-  font-weight: normal;
+  font-weight: $font-editorfont-weight;
   line-height: multiply(1.5, $font-editorfont-size);
   font-size: $font-editorfont-size;
   color: $font-editorfont-color;

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -40,7 +40,7 @@
 
 .sd-rating__item {
   position: relative;
-  background: transparent;
+  background: $background;
   box-shadow: $shadow-small;
   border-radius: calcSize(12.5);
   white-space: nowrap;

diff --git a/src/defaultV2-theme/blocks/sd-tagbox.scss b/src/defaultV2-theme/blocks/sd-tagbox.scss
@@ -25,6 +25,7 @@
 .sv-tagbox__item {
   position: relative;
   display: flex;
+  align-items: center;
   padding: calcSize(1) calcSize(1.5);
   background-color: $primary;
   border-radius: calcCornerRadius(0.5);

diff --git a/src/question_boolean.ts b/src/question_boolean.ts
@@ -202,6 +202,8 @@ export class QuestionBooleanModel extends Question {
     return new CssClassBuilder()
       .append(this.cssClasses.label)
       .append(this.cssClasses.disabledLabel, this.booleanValue === !checked || this.isReadOnly)
+      .append(this.cssClasses.labelTrue, !this.isIndeterminate && checked === true)
+      .append(this.cssClasses.labelFalse, !this.isIndeterminate && checked === false)
       .toString();
   }
 

diff --git a/tests/markup/snapshots/boolean-value-v2.snap.html b/tests/markup/snapshots/boolean-value-v2.snap.html
@@ -2,7 +2,7 @@
 	<label class="sd-boolean sd-boolean--allowhover sd-boolean--checked">
 		<input aria-invalid="false" aria-label="Question title" aria-required="false" checked="" class="sd-boolean__control sd-visuallyhidden" id="testid0i" name="name" type="checkbox" value="true">
 		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label sd-checkbox__label--disabled">
+			<span class="sd-boolean__label sd-boolean__label--false sd-checkbox__label--disabled">
 				<span class="sv-string-viewer">No</span>
 			</span>
 		</div>
@@ -14,7 +14,7 @@
 			</span>
 		</div>
 		<div class="sd-boolean__thumb-ghost">
-			<span class="sd-boolean__label">
+			<span class="sd-boolean__label sd-boolean__label--true">
 				<span class="sv-string-viewer">Yes</span>
 			</span>
 		</div>

diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-item-focused-state.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-item-focused-state.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-empty-value.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-empty-value.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-noempty-value.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-question-noempty-value.png
diff --git a/...egressionTests/tests/defaultV2/etalons/dropdown-select-disabled-popup-items.png b/...egressionTests/tests/defaultV2/etalons/dropdown-select-disabled-popup-items.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-select-question-popup.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-select-question-popup.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown-popup.png b/visualRegressionTests/tests/defaultV2/etalons/dropdown-with-markdown-popup.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-list-with-icons.png b/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-list-with-icons.png
diff --git a/...s/tests/defaultV2/etalons/popup-dropdown-list-with-scroll-to-selected-items.png b/...s/tests/defaultV2/etalons/popup-dropdown-list-with-scroll-to-selected-items.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-long-list.png b/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-long-list.png
diff --git a/...RegressionTests/tests/defaultV2/etalons/popup-dropdown-separators-long-list.png b/...RegressionTests/tests/defaultV2/etalons/popup-dropdown-separators-long-list.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-short-list.png b/visualRegressionTests/tests/defaultV2/etalons/popup-dropdown-short-list.png
diff --git a/...lRegressionTests/tests/defaultV2/etalons/popup-overlay-long-list-with-title.png b/...lRegressionTests/tests/defaultV2/etalons/popup-overlay-long-list-with-title.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-overlay-long-list.png b/visualRegressionTests/tests/defaultV2/etalons/popup-overlay-long-list.png
diff --git a/...RegressionTests/tests/defaultV2/etalons/popup-overlay-short-list-with-title.png b/...RegressionTests/tests/defaultV2/etalons/popup-overlay-short-list-with-title.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/popup-overlay-short-list.png b/visualRegressionTests/tests/defaultV2/etalons/popup-overlay-short-list.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-rating-focus.png b/visualRegressionTests/tests/defaultV2/etalons/question-rating-focus.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/tagbox-disabled-popup-items.png b/visualRegressionTests/tests/defaultV2/etalons/tagbox-disabled-popup-items.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/tagbox-popup-selected-items.png b/visualRegressionTests/tests/defaultV2/etalons/tagbox-popup-selected-items.png
diff --git a/...sts/tests/defaultV2/etalons/tagbox-question-long-items-overlay-tablet-popup.png b/...sts/tests/defaultV2/etalons/tagbox-question-long-items-overlay-tablet-popup.png
diff --git a/...ssionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-big.png b/...ssionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-big.png
diff --git a/...ionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-small.png b/...ionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup-small.png
diff --git a/...egressionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup.png b/...egressionTests/tests/defaultV2/etalons/tagbox-question-overlay-tablet-popup.png