Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue/8442 rating with text labels unstable width #8444

Merged
merged 21 commits into from
Jun 27, 2024
Merged

Issue/8442 rating with text labels unstable width #8444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a2ebf38
Rating is changed to drop-down view on validation.
novikov82 Jun 19, 2024
505413c
check if fonts object exists
novikov82 Jun 19, 2024
4f34b06
#8442 Rating with text labels - unstable width
novikov82 Jun 19, 2024
1f3097c
Merge commit 'fc989d5a1a5b75d133211748001a9538854505c5' into issue/84…
novikov82 Jun 19, 2024
6e43ec3
#8442 Rating with text labels - unstable width
novikov82 Jun 19, 2024
f18568f
Merge branch 'issue/8442-Rating-with-text-labels---unstable-width' of…
novikov82 Jun 19, 2024
c7ad705
#8442 update markup tests
novikov82 Jun 20, 2024
e4e7244
Merge remote-tracking branch 'origin/master' into issue/8442-Rating-w…
novikov82 Jun 20, 2024
ade9891
#8442 - fix labels borders
novikov82 Jun 20, 2024
9096135
#8442 - all platforms markup
novikov82 Jun 20, 2024
392bc8f
#8442 - fix rating styles
novikov82 Jun 20, 2024
1af5e0c
#8442 Rating with text labels - unstable width
novikov82 Jun 21, 2024
5b2b32e
#8442 - restyled rating
Jun 25, 2024
949af77
#8442 - fix smiley hover
Jun 25, 2024
e6ccf05
Merge remote-tracking branch 'origin/HEAD' into issue/8442-Rating-wit…
Jun 25, 2024
a9b02e5
#8442 - fixed some tests
Jun 25, 2024
bc9b167
#8442 - fix react build
Jun 26, 2024
b1548d7
#8442 - error hover
Jun 26, 2024
326b261
#8442 - update screenshots
Jun 26, 2024
6792b07
#8442 - fixe star icon and focused style in preview
Jun 26, 2024
fb0ddfa
#8446 - fixed stars
Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/components/rating/rating-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
[attr.name]="model.questionName" [attr.id]="model.getInputId(index)" [value]="item.value" [attr.aria-required]="model.ariaRequired" [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid" [attr.aria-errormessage]="model.ariaErrormessage"
[disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [checked]="model.value === item.value" (click)="onClick($event)"
/>
<span [class]="model.cssClasses.itemText" [model]="item.locText" sv-ng-string></span>
<span [class]="model.cssClasses.itemText" [attr.data-text]="item.text" [model]="item.locText" sv-ng-string></span>
</label>
</ng-template>
2 changes: 1 addition & 1 deletion packages/survey-vue3-ui/src/components/rating/RatingItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
:aria-invalid="question.ariaInvalid"
:aria-errormessage="question.ariaErrormessage"
/>
<span :class="question.cssClasses.itemText">
<span :class="question.cssClasses.itemText" :data-text="item.text">
<survey-string :locString="item.locText" />
</span>
</label>
Expand Down
87 changes: 66 additions & 21 deletions src/defaultV2-theme/blocks/sd-rating.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
fill: $foreground;
font-size: calcFontSize(1);
box-shadow: $shadow-small, inset 0 0 0 0px $background;
transition: border $transition-duration, box-shadow $transition-duration, background-color $transition-duration;
transition: box-shadow $transition-duration, background-color $transition-duration;
}

.sd-rating__item--fixed-size {
Expand Down Expand Up @@ -178,6 +178,9 @@ legend+sv-ng-rating-item+.sd-rating__item {
border: 1px solid transparent;
box-shadow: none;
transform: none;
&:focus-within {
box-shadow: none;
}

.sd-rating__item-text.sd-rating__item-text {
color: $foreground;
Expand All @@ -202,19 +205,18 @@ legend+sv-ng-rating-item+.sd-rating__item {
}

.sd-rating__item:focus-within {
border: 2px solid $primary;
box-shadow: 0 0 0 2px $primary;
}

.sd-rating__item--selected {
background-color: $primary;
border: 2px solid $primary;
color: $primary-foreground;
font-weight: 600;
box-shadow: 0px 1px 2px transparent;
box-shadow: 0 0 0 0px $primary;
}

.sd-rating__item--selected:focus-within {
box-shadow: $shadow-small-reset, inset 0 0 0 2px $background;
box-shadow: $shadow-small-reset, inset 0 0 0 4px $background, 0 0 0 2px $primary;
}

.sd-rating__item-smiley {
Expand All @@ -224,12 +226,16 @@ legend+sv-ng-rating-item+.sd-rating__item {
padding: calcSize(1.25);
box-sizing: border-box;
min-width: calcSize(6);
min-height: calcSize(6);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: 2px solid $border;
color: $foreground;
fill: $border;
box-shadow: $shadow-small-reset, inset 0 0 0 0px $background;
transition: border $transition-duration, box-shadow $transition-duration, background-color $transition-duration;
transition: box-shadow $transition-duration, background-color $transition-duration;

svg {
display: block;
Expand All @@ -241,6 +247,7 @@ legend+sv-ng-rating-item+.sd-rating__item {
.sd-rating__item-smiley--small {
padding: calcSize(0.625);
min-width: calcSize(3);
min-height: calcSize(3);
border-width: 1px;

svg {
Expand All @@ -249,8 +256,15 @@ legend+sv-ng-rating-item+.sd-rating__item {
}
}

.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
box-shadow: 0 0 0 1px $primary;
}
.sd-rating__item-smiley--colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
box-shadow: 0 0 0 1px var(--sd-rating-item-color, $primary);
}

.sd-rating__item-smiley--small.sd-rating__item-smiley--selected:focus-within {
box-shadow: inset 0 0 0 1px $background;
box-shadow: inset 0 0 0 2px $background, 0 0 0 1px var(--sd-rating-item-color, $primary);
}

legend+.sd-rating__item-smiley,
Expand All @@ -259,13 +273,18 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
}

.sd-rating__item-smiley--scale-colored {
transition: border $transition-duration, box-shadow $transition-duration, opacity $transition-duration, background-color $transition-duration;
border-color: var(--sd-rating-item-color, $primary);
fill: var(--sd-rating-item-color, $primary);
transition: box-shadow $transition-duration, opacity $transition-duration, background-color $transition-duration;
}

.sd-rating__item-smiley--error {
background-color: $red-light;
border-color: transparent;
fill: $foreground-light;
&.sd-rating__item-smiley--scale-colored:hover {
fill: var(--sd-rating-item-color, $foreground-light);
}

&.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
opacity: initial;
Expand All @@ -282,7 +301,8 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
}

.sd-rating__item-smiley.sd-rating__item-smiley--readonly {
//
fill: $border;
border-color: $border;
}

.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--readonly {
Expand All @@ -291,17 +311,19 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
background-color: unset;
}

.sd-rating__item-smiley.sd-rating__item-smiley--preview {
border-color: $foreground;
border-width: 1px;
.sd-rating__item-smiley.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
border: 1px solid $foreground;
fill: $foreground;
&:focus-within {
box-shadow: none;
}

svg {
margin: 1px;
}
}

.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview {
.sd-rating__item-smiley.sd-rating__item-smiley--selected.sd-rating__item-smiley--preview.sd-rating__item-smiley--preview {
fill: $background;
background-color: $foreground;
}
Expand All @@ -311,24 +333,33 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
}

.sd-rating__item-smiley:focus-within {
border-color: $primary;
border: none;
box-shadow: $shadow-small-reset, 0 0 0 2px $primary;
}

.sd-rating__item-smiley:focus-within {
border: none;
box-shadow: $shadow-small-reset, 0 0 0 2px $primary;
}

.sd-rating__item-smiley--selected {
background-color: $primary;
border-color: $primary;
background-color: var(--sd-rating-item-color, $primary);
border-color: var(--sd-rating-item-color, $primary);
fill: $primary-foreground;
font-weight: 600;
}

.sd-rating__item-smiley--selected:focus-within {
box-shadow: $shadow-small-reset, inset 0 0 0 2px $background;
border: 0px solid $background;
box-shadow: $shadow-small-reset, inset 0 0 0 4px $background, 0 0 0 2px var(--sd-rating-item-color, $primary);
}

.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected) {
opacity: 0.25;

&.sd-rating__item-smiley--allowhover:hover {
background-color: var(--sd-rating-item-color-light, $background-dark);
border-color: var(--sd-rating-item-color, $border);
opacity: 0.5;
}
}
Expand All @@ -341,6 +372,11 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {

.sd-rating__item-smiley--scale-colored:not(.sd-rating__item-smiley--selected):focus-within {
opacity: 1;
box-shadow: $shadow-small-reset, 0 0 0 2px var(--sd-rating-item-color, $primary);
}
.sd-rating__item-smiley--scale-colored.sd-rating__item-smiley--small:not(.sd-rating__item-smiley--selected):focus-within {
opacity: 1;
box-shadow: $shadow-small-reset, 0 0 0 1px var(--sd-rating-item-color, $primary);
}

.sd-rating__item-smiley--scale-colored {
Expand Down Expand Up @@ -468,7 +504,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
fill: $foreground;
}
}
.sd-rating__item-star:focus-within {
.sd-rating__item-star:not(.sd-rating__item-star--preview):focus-within {
svg {
stroke: $primary;
fill: transparent;
Expand All @@ -489,14 +525,14 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
}
}

.sd-rating__item-star--selected.sd-rating__item-star--unhighlighted:focus-within {
.sd-rating__item-star--selected:not(.sd-rating__item-star--preview).sd-rating__item-star--unhighlighted:focus-within {
svg {
stroke: $border;
fill: $border;
}
}

.sd-rating__item-star--selected:focus-within {
.sd-rating__item-star--selected:not(.sd-rating__item-star--preview):focus-within {
svg {
stroke: $primary;
fill: $primary;
Expand All @@ -519,7 +555,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
font-size: $font-editorfont-size;
line-height: multiply(1.5, $font-editorfont-size);
display: inline-block;
border: 2px solid transparent;
box-sizing: border-box;
transition: color $transition-duration;

Expand All @@ -528,6 +563,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
margin-top: calcSize(1.25);
margin-bottom: calcSize(1.25);
color: $font-questiondescription-color;
border: 2px solid rgba(0, 0, 0, 0);
}

&.sd-rating__min-text {
Expand All @@ -548,6 +584,15 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
&.sd-rating__item--fixed-size {
min-width: calcSize(3);
}
&::after {
display: block;
content: attr(data-text);
font-weight: 600;
height: 0;
color: transparent;
overflow: hidden;
visibility: hidden;
}
}

.sd-rating--wrappable .sd-rating__item-text {
Expand Down
6 changes: 2 additions & 4 deletions src/images/rating-star-2.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/knockout/components/rating/rating-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
class="sv-visuallyhidden"
data-bind="attr: { name: question.questionName, id: question.getInputId(index), value: item.value, readonly: question.isReadOnlyAttr, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-errormessage': question.ariaErrormessage }, checkedValue: item.value, enable: !question.isDisabledAttr, event: { click: function(data, event) { question.setValueFromClick(event.target.value); return true; } }"
/>
<span data-bind="css: question.cssClasses.itemText">
<span data-bind="css: question.cssClasses.itemText, attr: {'data-text': item.text }">
<!-- ko template: { name: 'survey-string', data: item.locText } -->
<!-- /ko -->
</span>
Expand Down
12 changes: 3 additions & 9 deletions src/question_rating.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,17 +712,11 @@ export class QuestionRatingModel extends Question {
public getItemStyle(item: ItemValue, highlight: "none" | "highlighted" | "unhighlighted" = "none") {
if (this.scaleColorMode === "monochrome" && this.rateColorMode == "default" ||
this.isPreviewStyle ||
this.isReadOnlyStyle) return { borderColor: null, fill: null, backgroundColor: null };
this.isReadOnlyStyle) return {};
const index = this.visibleRateValues.indexOf(item);
const color = this.getRenderedItemColor(index, false);
if (this.value != this.renderedRateItems[index].value) {
const colorLight = this.getRenderedItemColor(index, true);
if (highlight == "highlighted" && this.scaleColorMode === "colored") return { borderColor: color, fill: color, backgroundColor: colorLight };
if (this.scaleColorMode === "colored" && this.errors.length == 0) return { borderColor: color, fill: color, backgroundColor: null };
return { borderColor: null, fill: null, backgroundColor: null };
} else {
return { borderColor: color, fill: null, backgroundColor: color };
}
const colorLight = highlight == "highlighted" && this.scaleColorMode === "colored" && this.getRenderedItemColor(index, true);
return colorLight ? { "--sd-rating-item-color": color, "--sd-rating-item-color-light": colorLight } : { "--sd-rating-item-color": color };
}

public getItemClass(item: ItemValue, highlight: "none" | "highlighted" | "unhighlighted" = "none") {
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/rating/rating-item-smiley.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export class RatingItemSmiley extends RatingItemBase {
render(): JSX.Element | null {
return (
<label onMouseDown={this.handleOnMouseDown}
style={this.question.getItemStyle(this.item.itemValue, this.item.highlight)}
style={this.question.getItemStyle(this.item.itemValue, this.item.highlight) as any}
className={this.question.getItemClass(this.item.itemValue)}
onMouseOver={e => this.question.onItemMouseIn(this.item)}
onMouseOut={e => this.question.onItemMouseOut(this.item)}
Expand Down
2 changes: 1 addition & 1 deletion src/react/components/rating/rating-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export class RatingItem extends RatingItemBase {
aria-invalid={this.question.ariaInvalid}
aria-errormessage={this.question.ariaErrormessage}
/>
<span className={this.question.cssClasses.itemText}>{itemText}</span>
<span className={this.question.cssClasses.itemText} data-text={this.item.text}>{itemText}</span>
</label>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/vue/components/rating/rating-item.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@click="(e) => question.setValueFromClick(e.target.value)" :aria-required="question.ariaRequired"
:aria-label="question.ariaLabel" :aria-invalid="question.ariaInvalid"
:aria-errormessage="question.ariaErrormessage" />
<span :class="question.cssClasses.itemText">
<span :class="question.cssClasses.itemText" :data-text="item.text">
<survey-string :locString="item.locText" />
</span>
</label>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-as-wrappable.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@
</legend>
<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_testid0" type="radio" value="1">
<span class="sd-rating__item-text">
<span class="sd-rating__item-text" data-text="1">
<span class="sv-string-viewer">1</span>
</span>
</label>
<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_testid0" type="radio" value="2">
<span class="sd-rating__item-text">
<span class="sd-rating__item-text" data-text="2">
<span class="sv-string-viewer">2</span>
</span>
</label>
<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_testid0" type="radio" value="3">
<span class="sd-rating__item-text">
<span class="sd-rating__item-text" data-text="3">
<span class="sv-string-viewer">3</span>
</span>
</label>
<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_testid0" type="radio" value="4">
<span class="sd-rating__item-text">
<span class="sd-rating__item-text" data-text="4">
<span class="sv-string-viewer">4</span>
</span>
</label>
Expand Down
8 changes: 4 additions & 4 deletions tests/markup/snapshots/rating-display-mode.snap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@
</legend>
<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_testid0" readonly="" type="radio" value="1">
<span class="sv_q_rating_item_text">
<span class="sv_q_rating_item_text" data-text="1">
<span class="sv-string-viewer">1</span>
</span>
</label>
<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_testid0" readonly="" type="radio" value="2">
<span class="sv_q_rating_item_text">
<span class="sv_q_rating_item_text" data-text="2">
<span class="sv-string-viewer">2</span>
</span>
</label>
<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_testid0" readonly="" type="radio" value="3">
<span class="sv_q_rating_item_text">
<span class="sv_q_rating_item_text" data-text="3">
<span class="sv-string-viewer">3</span>
</span>
</label>
<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_testid0" readonly="" type="radio" value="4">
<span class="sv_q_rating_item_text">
<span class="sv_q_rating_item_text" data-text="4">
<span class="sv-string-viewer">4</span>
</span>
</label>
Expand Down
Loading
Loading