Skip to content

Commit

Permalink
#4460 Increase Rating text values paddings (#5937)
Browse files Browse the repository at this point in the history 
* #4460 Increase Rating text values paddings
Fixes #4460

* #4460 Increase Rating text values paddings - markup tests
Fixes #4460

* #4460 Increase Rating text values paddings - fix test for react
Fixes #4460
  • Loading branch information
@novikov82
novikov82 authored Apr 6, 2023
1 parent 35d51ee commit 79dcd11
Show file tree
Hide file tree
Showing 12 changed files with 138 additions and 24 deletions.
1 change: 1 addition & 0 deletions src/defaultCss/cssstandard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,7 @@ export var defaultStandardCss = {
rating: {
root: "sv_q_rating",
item: "sv_q_rating_item",
itemFixedSize: "sv_q_rating_item_fixed",
selected: "active",
minText: "sv_q_rating_min_text",
itemText: "sv_q_rating_item_text",
Expand Down
1 change: 1 addition & 0 deletions src/defaultCss/defaultV2Css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,7 @@ export var defaultV2Css = {
itemText: "sd-rating__item-text",
maxText: "sd-rating__item-text sd-rating__max-text",
itemDisabled: "sd-rating__item--disabled",
itemFixedSize: "sd-rating__item--fixed-size",
control: "sd-input sd-dropdown",
controlValue: "sd-dropdown__value",
controlDisabled: "sd-input--disabled",
Expand Down
14 changes: 12 additions & 2 deletions src/defaultV2-theme/blocks/sd-rating.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@
box-shadow: 0px 1px 2px $shadow-inner;
border-radius: calcSize(12.5);
white-space: nowrap;
padding: calcSize(1.25);
padding: calcSize(0.5) calcSize(2.5);
height: calcSize(6);
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
min-width: calcSize(6);
text-align: center;
Expand All @@ -34,6 +38,10 @@
fill: $foreground;
font-size: calcSize(2);
}
.sd-rating__item--fixed-size {
width: calcSize(6);
padding: 0;
}

legend+.sd-rating__item,
legend+sv-ng-rating-item+.sd-rating__item {
Expand Down Expand Up @@ -230,7 +238,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
.sd-rating__item-text.sd-rating__item-text {
font-size: calcSize(2);
line-height: calcSize(3);
min-width: calcSize(3);
display: inline-block;

&.sd-rating__min-text,
Expand All @@ -255,4 +262,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
.sv-string-editor {
white-space: nowrap;
}
&.sd-rating__item--fixed-size {
min-width: calcSize(3);
}
}
20 changes: 17 additions & 3 deletions src/question_rating.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import { mergeValues } from "./utils/utils";
import { DropdownListModel } from "./dropdownListModel";

export class RenderedRatingItem extends Base {
private onStringChangedCallback() {
this.text = this.itemValue.text;
}
public get value(): number {
return this.itemValue.getPropertyValue("value");
}
Expand All @@ -20,11 +23,11 @@ export class RenderedRatingItem extends Base {
public get locText(): LocalizableString {
return this.locString || this.itemValue.locText;
}
public get text(): string {
return this.itemValue.text;
}
@property({ defaultValue: "" }) text: string;
constructor(public itemValue: ItemValue, private locString: LocalizableString = null) {
super();
this.locText.onStringChanged.add(this.onStringChangedCallback.bind(this));
this.onStringChangedCallback();
}
}

Expand Down Expand Up @@ -390,6 +393,16 @@ export class QuestionRatingModel extends Question {
itemitemOnErrorClass = this.cssClasses.itemSmileyOnError;
}

const hasFixedSize =
!this.isStar &&
!this.isSmiley &&
(!this.displayRateDescriptionsAsExtremeItems ||
this.rateValues.length > 0 && item != this.rateValues[0] && item != this.rateValues[this.rateValues.length - 1] ||
this.rateValues.length == 0 && item.value != this.rateMin && item.value != this.rateMax
) &&
item.locText.calculatedText.length <= 2 &&
Number.isInteger(Number(item.locText.calculatedText));

return new CssClassBuilder()
.append(itemClass)
.append(itemSelectedClass, isSelected)
Expand All @@ -398,6 +411,7 @@ export class QuestionRatingModel extends Question {
.append(itemHighlightedClass, isHighlighted)
.append(itemUnhighlightedClass, isUnhighlighted)
.append(itemitemOnErrorClass, this.errors.length > 0)
.append(this.cssClasses.itemFixedSize, hasFixedSize)
.toString();
}
//methods for mobile view
Expand Down
28 changes: 27 additions & 1 deletion testCafe/questions/rating.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,36 @@ frameworks.forEach((framework) => {
}
]
});

await t.expect(Selector(".sd-question select").visible).ok;
});

var jsonR = {
questions: [
{
"type": "rating",
"name": "q1",
"rateValues": [
0,
1,
2,
]
},
],
};
frameworks.forEach((framework) => {
fixture`${framework} ${title}`.page`${url}${framework}.html`.beforeEach(
async (t) => {
await initSurvey(framework, jsonR);
}
);
});
test("check fixed width observability", async (t) => {
await t.expect(Selector(".sv_q_rating_item").withText("1").visible).ok();
await t.expect(Selector(".sv_q_rating_item").withText("1").classNames).contains("sv_q_rating_item_fixed");
await ClientFunction(() => { window["survey"].getQuestionByName("q1").rateValues[1].value = "a"; })();
await t.expect(Selector(".sv_q_rating_item").withText("a").classNames).notContains("sv_q_rating_item_fixed");
});

const jsonStars = {
questions: [
{
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-as-wrappable.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<fieldset role="radiogroup">
<legend class="sv-hidden" role="presentation">
</legend>
<label class="sd-rating__item sd-rating__item--allowhover">
<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_0" name="name" type="radio" value="1">
<span class="sd-rating__item-text">
<span class="sv-string-viewer">1</span>
</span>
</label>
<label class="sd-rating__item sd-rating__item--allowhover">
<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name" type="radio" value="2">
<span class="sd-rating__item-text">
<span class="sv-string-viewer">2</span>
</span>
</label>
<label class="sd-rating__item sd-rating__item--allowhover">
<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_2" name="name" type="radio" value="3">
<span class="sd-rating__item-text">
<span class="sv-string-viewer">3</span>
</span>
</label>
<label class="sd-rating__item sd-rating__item--allowhover">
<label class="sd-rating__item sd-rating__item--allowhover sd-rating__item--fixed-size">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_3" name="name" type="radio" value="4">
<span class="sd-rating__item-text">
<span class="sv-string-viewer">4</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-display-mode.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<fieldset role="radiogroup">
<legend class="sv-hidden" role="presentation">
</legend>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_0" name="name" type="radio" value="1">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">1</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_1" name="name" type="radio" value="2">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">2</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_2" name="name" type="radio" value="3">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">3</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" disabled="" id="testid0i_3" name="name" type="radio" value="4">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">4</span>
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/rating-min-max-items.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
<span class="sv-string-viewer">min</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name" type="radio" value="2">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">2</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_2" name="name" type="radio" value="3">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">3</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-min-max.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@
<span class="sv_q_rating_min_text">
<span class="sv-string-viewer">min</span>
</span>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_0" name="name" type="radio" value="1">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">1</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name" type="radio" value="2">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">2</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_2" name="name" type="radio" value="3">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">3</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_3" name="name" type="radio" value="4">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">4</span>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-simple.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<fieldset role="radiogroup">
<legend class="sv-hidden" role="presentation">
</legend>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_0" name="name" type="radio" value="1">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">1</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_1" name="name" type="radio" value="2">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">2</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_2" name="name" type="radio" value="3">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">3</span>
</span>
</label>
<label class="sv_q_rating_item">
<label class="sv_q_rating_item sv_q_rating_item_fixed">
<input aria-invalid="false" aria-label="Question title" aria-required="false" class="sv-visuallyhidden" id="testid0i_3" name="name" type="radio" value="4">
<span class="sv_q_rating_item_text">
<span class="sv-string-viewer">4</span>
Expand Down
62 changes: 62 additions & 0 deletions tests/question_ratingtests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,4 +573,66 @@ QUnit.test("rating smileys max item count", (assert) => {

q1.rateType = "smileys";
assert.equal(q1.renderedRateItems.length, 10);
});

QUnit.test("check fixed width styles", (assert) => {
var json = {
questions: [
{
"type": "rating",
"name": "q1",
"rateMin": 0,
"rateMax": 4,
"minRateDescription": "mindesc",
"maxRateDescription": "maxdesc",
"displayRateDescriptionsAsExtremeItems": true
},
],
};
const survey = new SurveyModel(json);
const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
q1.cssClasses.item = "sv_q_item";
q1.cssClasses.itemHover = "";
q1.cssClasses.itemFixedSize = "sv_q_item-fixed";

assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "sv_q_item");
assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "sv_q_item sv_q_item-fixed");
assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "sv_q_item sv_q_item-fixed");
assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "sv_q_item sv_q_item-fixed");
assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "sv_q_item");
});

QUnit.test("check fixed width styles - rate values", (assert) => {
var json = {
questions: [
{
"type": "rating",
"name": "q1",
"rateValues": [
0,
1,
{
"value": 2,
"text": "middle"
},
3,
4
],
"minRateDescription": "mindesc",
"maxRateDescription": "maxdesc",
"displayRateDescriptionsAsExtremeItems": true
},
],
};
const survey = new SurveyModel(json);
const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
q1.cssClasses.item = "sv_q_item";
q1.cssClasses.itemHover = "";
q1.cssClasses.itemFixedSize = "sv_q_item-fixed";

assert.equal(q1.getItemClass(q1.renderedRateItems[0].itemValue), "sv_q_item");
assert.equal(q1.getItemClass(q1.renderedRateItems[1].itemValue), "sv_q_item sv_q_item-fixed");
assert.equal(q1.getItemClass(q1.renderedRateItems[2].itemValue), "sv_q_item");
assert.equal(q1.getItemClass(q1.renderedRateItems[3].itemValue), "sv_q_item sv_q_item-fixed");
assert.equal(q1.getItemClass(q1.renderedRateItems[4].itemValue), "sv_q_item");
});
Binary file modified visualRegressionTests/tests/defaultV2/etalons/question-rating-long-items.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 79dcd11

Please sign in to comment.