diff --git a/packages/components/src/components/rating-stars/rating-stars.spec.ts b/packages/components/src/components/rating-stars/rating-stars.spec.ts
index 83d8dc43bb..590b918181 100644
--- a/packages/components/src/components/rating-stars/rating-stars.spec.ts
+++ b/packages/components/src/components/rating-stars/rating-stars.spec.ts
@@ -25,20 +25,24 @@ describe('RatingStars', () => {
it('check non default props', async () => {
page.root.maxRating = 7;
- page.root.minRating = 1;
+ page.root.max = 7;
+ page.root.minRating = 0;
page.root.rating = 4;
page.root.starSize = 'small';
+ page.root.size = 'small';
page.root.disabled = true;
- page.root.ariaLabelTranslation = '$value aus $maxValue Sternen';
+ page.root.ariaLabelTranslation = '$value aus $max Sternen';
page.root.label = 'Rating Label';
await page.waitForChanges();
expect(page.rootInstance.maxRating).toBe(7);
- expect(page.rootInstance.minRating).toBe(1);
+ expect(page.rootInstance.max).toBe(7);
+ expect(page.rootInstance.minRating).toBe(0);
expect(page.rootInstance.rating).toBe(4);
expect(page.rootInstance.starSize).toBe('small');
+ expect(page.rootInstance.size).toBe('small');
expect(page.rootInstance.disabled).toBe(true);
expect(page.rootInstance.ariaLabelTranslation).toBe(
- '$value aus $maxValue Sternen'
+ '$value aus $max Sternen'
);
expect(page.rootInstance.label).toBe('Rating Label');
});
@@ -76,6 +80,15 @@ describe('RatingStars', () => {
});
expect(page.root).toMatchSnapshot();
});
+ it('deprecated overwrite actual props', async () => {
+ page = await newSpecPage({
+ components: [RatingStars],
+ html: ``,
+ });
+ expect(page.root).toMatchSnapshot();
+ expect(page.rootInstance.max).toBe(12);
+ expect(page.rootInstance.size).toBe('small');
+ });
});
describe('emitter', () => {
diff --git a/packages/components/src/components/rating-stars/rating-stars.tsx b/packages/components/src/components/rating-stars/rating-stars.tsx
index 7b19d0979f..e57383250c 100644
--- a/packages/components/src/components/rating-stars/rating-stars.tsx
+++ b/packages/components/src/components/rating-stars/rating-stars.tsx
@@ -19,6 +19,7 @@ import {
EventEmitter,
} from '@stencil/core';
import { emitEvent } from '../../utils/utils';
+import statusNote from '../../utils/status-note';
export interface StarInterface extends HTMLDivElement {
dataset: {
@@ -42,20 +43,24 @@ export class RatingStars {
ratingStarId = `scale-rating-star-${ratingStarCount++}`;
- /** The lower limit of the rating. In cases where */
- @Prop({ reflect: true }) starSize: 'small' | 'large' = 'large';
- /** The lower limit of the rating. In cases where */
- @Prop({ reflect: true }) minRating = 0;
+ /** Deprecated; size should be used instead of starSize */
+ @Prop() starSize: 'small' | 'large' = 'large';
+ /** size of the stars */
+ @Prop({ reflect: true, mutable: true }) size: 'small' | 'large' = 'large';
+ /** Deprecated; The lower limit of the rating */
+ @Prop() minRating = 0;
+ /** Deprecated; max should be used instead of maxRating */
+ @Prop() maxRating = 5;
/** The upper limit of the rating */
- @Prop({ reflect: true }) maxRating = 5;
+ @Prop({ reflect: true, mutable: true }) max = 5;
/** Represents the current value of the rating */
@Prop({ mutable: true, reflect: true }) rating = 0;
/** makes the rating non-interactive (but still accessible) */
@Prop({ reflect: true }) readonly = false;
/** disables input */
@Prop({ reflect: true }) disabled = false;
- /** a11y text for getting meaningful value. `$rating` and `$maxRating` are template variables and will be replaces by their corresponding properties. */
- @Prop() ariaLabelTranslation = '$rating out of $maxRating stars';
+ /** a11y text for getting meaningful value. `$rating` and `$max` (deprecated `$maxRating`) are template variables and will be replaces by their corresponding properties. */
+ @Prop() ariaLabelTranslation = '$rating out of $max stars';
/** (optional) rating label */
@Prop({ reflect: true }) label?: string;
@@ -64,11 +69,38 @@ export class RatingStars {
/** @deprecated in v3 in favor of kebab-case event names */
@Event({ eventName: 'scaleChange' }) scaleChangeLegacy: EventEmitter;
+ componentWillRender() {
+ // make sure the deprecated props overwrite the actual ones if used
+ // and show status note deprecated
+ if (this.maxRating !== 5) {
+ this.max = this.maxRating;
+ statusNote({
+ tag: 'deprecated',
+ message:
+ 'Property "maxRating" is deprecated. Please use the "max" property!',
+ type: 'warn',
+ source: this.host,
+ });
+ }
+ if (this.starSize !== 'large') {
+ this.size = this.starSize;
+ statusNote({
+ tag: 'deprecated',
+ message:
+ 'Property "starSize" is deprecated. Please use the "size" property!',
+ type: 'warn',
+ source: this.host,
+ });
+ }
+ }
+
// constructs the aria message for the current rating
getRatingText() {
const filledText = this.ariaLabelTranslation
.replace(/\$rating/g, `${this.rating}`)
- .replace(/\$maxRating/g, `${this.maxRating}`);
+ // TODO: remove when `maxRating` is also being removed
+ .replace(/\$maxRating/g, `${this.max}`)
+ .replace(/\$max/g, `${this.max}`);
return filledText;
}
@@ -81,8 +113,8 @@ export class RatingStars {
input.value = this.minRating.toString();
break;
- case value > this.maxRating:
- input.value = this.maxRating.toString();
+ case value > this.max:
+ input.value = this.max.toString();
break;
}
@@ -108,7 +140,7 @@ export class RatingStars {
};
renderStar(index: number, selected = false, rating: number) {
- const size = sizes[this.starSize];
+ const size = sizes[this.size];
const isWholeNumber = rating % 1 === 0;
const isLastNumber = Math.ceil(rating) === index;
@@ -137,7 +169,7 @@ export class RatingStars {
renderRating() {
const stars = [];
const roundedRating = Math.ceil(this.rating);
- const max = this.maxRating;
+ const max = this.max;
for (let index = 1; index <= max; index++) {
const isSelected = roundedRating >= index;
@@ -175,12 +207,12 @@ export class RatingStars {
type="range"
id={this.ratingStarId}
min={0}
- max={this.maxRating + 1}
+ max={this.max + 1}
value={this.rating}
step="1"
aria-orientation="horizontal"
aria-valuemin={this.minRating}
- aria-valuemax={this.maxRating}
+ aria-valuemax={this.max}
aria-valuenow={this.rating}
aria-valuetext={this.getRatingText()}
onInput={!this.readonly && this.handleInput}
diff --git a/packages/components/src/components/rating-stars/readme.md b/packages/components/src/components/rating-stars/readme.md
index c1b10b772a..cd0d41b866 100644
--- a/packages/components/src/components/rating-stars/readme.md
+++ b/packages/components/src/components/rating-stars/readme.md
@@ -7,16 +7,18 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------------------- |
-| `ariaLabelTranslation` | `aria-label-translation` | a11y text for getting meaningful value. `$rating` and `$maxRating` are template variables and will be replaces by their corresponding properties. | `string` | `'$rating out of $maxRating stars'` |
-| `disabled` | `disabled` | disables input | `boolean` | `false` |
-| `label` | `label` | (optional) rating label | `string` | `undefined` |
-| `maxRating` | `max-rating` | The upper limit of the rating | `number` | `5` |
-| `minRating` | `min-rating` | The lower limit of the rating. In cases where | `number` | `0` |
-| `rating` | `rating` | Represents the current value of the rating | `number` | `0` |
-| `readonly` | `readonly` | makes the rating non-interactive (but still accessible) | `boolean` | `false` |
-| `starSize` | `star-size` | The lower limit of the rating. In cases where | `"large" \| "small"` | `'large'` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------------- |
+| `ariaLabelTranslation` | `aria-label-translation` | a11y text for getting meaningful value. `$rating` and `$max` (deprecated `$maxRating`) are template variables and will be replaces by their corresponding properties. | `string` | `'$rating out of $max stars'` |
+| `disabled` | `disabled` | disables input | `boolean` | `false` |
+| `label` | `label` | (optional) rating label | `string` | `undefined` |
+| `max` | `max` | The upper limit of the rating | `number` | `5` |
+| `maxRating` | `max-rating` | Deprecated; max should be used instead of maxRating | `number` | `5` |
+| `minRating` | `min-rating` | Deprecated; The lower limit of the rating | `number` | `0` |
+| `rating` | `rating` | Represents the current value of the rating | `number` | `0` |
+| `readonly` | `readonly` | makes the rating non-interactive (but still accessible) | `boolean` | `false` |
+| `size` | `size` | size of the stars | `"large" \| "small"` | `'large'` |
+| `starSize` | `star-size` | Deprecated; size should be used instead of starSize | `"large" \| "small"` | `'large'` |
## Events
diff --git a/packages/storybook-vue/stories/3_components/rating-stars/RatingStars.stories.mdx b/packages/storybook-vue/stories/3_components/rating-stars/RatingStars.stories.mdx
index 2c87d33dc0..5105a723ce 100644
--- a/packages/storybook-vue/stories/3_components/rating-stars/RatingStars.stories.mdx
+++ b/packages/storybook-vue/stories/3_components/rating-stars/RatingStars.stories.mdx
@@ -6,13 +6,102 @@ import ScaleRatingStars from "./ScaleRatingStars.vue";
component={ScaleRatingStars}
argTypes={{
starSize: {
- control: {
- type: "select",
- options: [
- "small",
- "large",
- ],
+ table: {
+ type: { summary: 'string' },
+ defaultValue: { summary: 'large' },
},
+ description: `(optional) Deprecated; size should be used instead of starSize`,
+ control: { type: 'select', options: ['large', 'small'] }
+ },
+ size: {
+ table: {
+ type: { summary: 'string' },
+ defaultValue: {
+ summary: 'large',
+ },
+ },
+ description: `(optional) size of the stars. Overwritten by deprecated starSize`,
+ control: { type: 'select', options: ['large', 'small'] }
+ },
+ minRating: {
+ table: {
+ type: { summary: 'number' },
+ defaultValue: {
+ summary: 0,
+ },
+ },
+ description: `(optional) Deprecated; minimum rating value. Will be dropped on next release`,
+ control: { type: 'number' },
+ },
+ maxRating: {
+ table: {
+ type: { summary: 'number' },
+ defaultValue: {
+ summary: 5,
+ },
+ },
+ description: `(optional) Deprecated; max should be used instead of maxRating`,
+ control: { type: 'number' },
+ },
+ max: {
+ table: {
+ type: { summary: 'number' },
+ defaultValue: {
+ summary: 5,
+ },
+ },
+ description: `(optional) The upper limit of the rating. Overwritten by deprecated maxRating`,
+ control: { type: 'number' },
+ },
+ rating: {
+ table: {
+ type: { summary: 'number' },
+ defaultValue: {
+ summary: 0,
+ },
+ },
+ description: `(optional) Represents the current value of the rating`,
+ control: { type: 'number' },
+ },
+ readonly: {
+ table: {
+ type: { summary: 'boolean' },
+ defaultValue: {
+ summary: false,
+ },
+ },
+ description: `(optional) makes the rating non-interactive (but still accessible)`,
+ control: { type: 'boolean' },
+ },
+ disabled: {
+ table: {
+ type: { summary: 'boolean' },
+ defaultValue: {
+ summary: false,
+ },
+ },
+ description: `(optional) disables input`,
+ control: { type: 'boolean' },
+ },
+ ariaLabelTranslation: {
+ table: {
+ type: { summary: 'string' },
+ defaultValue: {
+ summary: '$rating out of $max stars',
+ },
+ },
+ description: `(optional) a11y text for getting meaningful value.`,
+ control: { type: 'text' },
+ },
+ label: {
+ table: {
+ type: { summary: 'string' },
+ defaultValue: {
+ summary: 'rating label',
+ },
+ },
+ description: `(optional) rating label`,
+ control: { type: 'text' },
},
}}
/>
@@ -26,9 +115,11 @@ export const Template = (args, { argTypes }) => ({
template: `
({
template: `
({
```html
-
+
+
```
## Number of Stars
@@ -138,7 +235,11 @@ export const TemplateSpacing = (args, { argTypes }) => ({
```html
-
+
+
```
## Spacing
diff --git a/packages/storybook-vue/stories/3_components/rating-stars/ScaleRatingStars.vue b/packages/storybook-vue/stories/3_components/rating-stars/ScaleRatingStars.vue
index 7faf4a61ae..03badbcd1e 100644
--- a/packages/storybook-vue/stories/3_components/rating-stars/ScaleRatingStars.vue
+++ b/packages/storybook-vue/stories/3_components/rating-stars/ScaleRatingStars.vue
@@ -1,9 +1,11 @@