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

fix(rating)!: display-value => show-chip, also works now #1481

Merged
merged 3 commits into from
Jan 28, 2021
Merged

fix(rating)!: display-value => show-chip, also works now #1481

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76589b7
fix(rating): use ignored display-value prop
paulcpederson Jan 27, 2021
b1efe23
display-value => show-chip for ratings component #1481
paulcpederson Jan 28, 2021
e10e48d
update gnerated readme docs for rating
paulcpederson Jan 28, 2021
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
15 changes: 11 additions & 4 deletions src/components/calcite-rating/calcite-rating.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,14 +381,21 @@ describe("calcite-rating", () => {

it("does not render the calcite chip when count and average are not present", async () => {
const page = await newE2EPage();
await page.setContent("<calcite-rating></calcite-rating>");
await page.setContent("<calcite-rating display-value></calcite-rating>");
const calciteChip = await page.find("calcite-rating >>> calcite-chip");
expect(calciteChip).toBeNull();
});

it("does not render the calcite chip when display-value is false", async () => {
const page = await newE2EPage();
await page.setContent("<calcite-rating count=240 average=3 value=2></calcite-rating>");
const calciteChip = await page.find("calcite-rating >>> calcite-chip");
expect(calciteChip).toBeNull();
});

it("renders the calcite chip and the count span when count is present and average is not", async () => {
const page = await newE2EPage();
await page.setContent(`<calcite-rating count=15></calcite-rating>`);
await page.setContent(`<calcite-rating count=15 display-value></calcite-rating>`);
const calciteChip = await page.find("calcite-rating >>> calcite-chip");
const countSpan = await page.find("calcite-rating >>> .number--count");
const averageSpan = await page.find("calcite-rating >>> .number--average");
Expand All @@ -399,7 +406,7 @@ describe("calcite-rating", () => {

it("renders the calcite chip and the average span when average is present and count is not", async () => {
const page = await newE2EPage();
await page.setContent("<calcite-rating average=4.2></calcite-rating>");
await page.setContent("<calcite-rating average=4.2 display-value></calcite-rating>");
const calciteChip = await page.find("calcite-rating >>> calcite-chip");
const countSpan = await page.find("calcite-rating >>> .number---count");
const averageSpan = await page.find("calcite-rating >>> .number--average");
Expand All @@ -410,7 +417,7 @@ describe("calcite-rating", () => {

it("renders the calcite chip and both the average and count spans when average and count are present", async () => {
const page = await newE2EPage();
await page.setContent("<calcite-rating count=15 average=4.2></calcite-rating>");
await page.setContent("<calcite-rating count=15 average=4.2 display-value></calcite-rating>");
const calciteChip = await page.find("calcite-rating >>> calcite-chip");
const countSpan = await page.find("calcite-rating >>> .number--count");
const averageSpan = await page.find("calcite-rating >>> .number--average");
Expand Down
4 changes: 4 additions & 0 deletions src/components/calcite-rating/calcite-rating.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const Simple = (): string => html`
<calcite-rating
scale="${select("scale", ["s", "m", "l"], "m")}"
value="${number("value", 0)}"
${boolean("display-value", false)}
average="${number("average", 0)}"
count="${number("count", 0)}"
${boolean("read-only", false)}
Expand All @@ -30,6 +31,7 @@ export const DarkMode = (): string => html`
theme="dark"
scale="${select("scale", ["s", "m", "l"], "m")}"
value="${number("value", 0)}"
${boolean("display-value", false)}
average="${number("average", 0)}"
count="${number("count", 0)}"
${boolean("read-only", false)}
Expand All @@ -50,6 +52,7 @@ export const WrappedInCalciteLabel = (): string => html`
<calcite-rating
scale="${select("scale", ["s", "m", "l"], "m")}"
value="${number("value", 0)}"
${boolean("display-value", false)}
average="${number("average", 0)}"
count="${number("count", 0)}"
${boolean("read-only", false)}
Expand All @@ -69,6 +72,7 @@ export const Rtl = (): string => html`
<calcite-rating
scale="${select("scale", ["s", "m", "l"], "m")}"
value="${number("value", 0)}"
${boolean("display-value", false)}
average="${number("average", 0)}"
count="${number("count", 0)}"
${boolean("read-only", false)}
Expand Down
20 changes: 8 additions & 12 deletions src/components/calcite-rating/calcite-rating.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export class CalciteRating {
/** is the rating component in a selectable mode */
@Prop({ reflect: true }) disabled = false;

/** display rating value */
/** Show average and count data, if available */
@Prop({ reflect: true }) displayValue = false;

/** optionally pass a number of previous ratings to display */
Expand All @@ -72,7 +72,7 @@ export class CalciteRating {
//
//--------------------------------------------------------------------------

@Event() calciteRatingChange: EventEmitter;
@Event() calciteRatingChange: EventEmitter<{ value: number }>;

//--------------------------------------------------------------------------
//
Expand Down Expand Up @@ -153,6 +153,7 @@ export class CalciteRating {
}

render() {
const { intlRating, displayValue, scale, theme, count, average } = this;
const dir = getElementDir(this.el);
return (
<Host dir={dir}>
Expand All @@ -162,18 +163,13 @@ export class CalciteRating {
onMouseLeave={() => (this.hoverValue = null)}
onTouchEnd={() => (this.hoverValue = null)}
>
<legend class="visually-hidden">{this.intlRating}</legend>
<legend class="visually-hidden">{intlRating}</legend>
{this.renderStars()}
</fieldset>
{this.count || this.average ? (
<calcite-chip
dir={dir}
scale={this.scale}
theme={this.theme}
value={this.count?.toString()}
>
{this.average && <span class="number--average">{this.average.toString()}</span>}
{this.count && <span class="number--count">({this.count?.toString()})</span>}
{(count || average) && displayValue ? (
<calcite-chip dir={dir} scale={scale} theme={theme} value={count?.toString()}>
{!!average && <span class="number--average">{average.toString()}</span>}
{!!count && <span class="number--count">({count?.toString()})</span>}
</calcite-chip>
) : null}
</Host>
Expand Down
11 changes: 8 additions & 3 deletions src/demos/calcite-rating.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ <h5>Default with average and value</h5>
<calcite-rating average=3.65 value=2></calcite-rating>
<h5>Default without average or value</h5>
<calcite-rating></calcite-rating>
<h5>Default with average with display value true</h5>
<calcite-rating average=3.65 display-value></calcite-rating>
<h5>Default with average, value, and count; display value</h5>
<calcite-rating average=3.65 value=2 count=240 display-value></calcite-rating>

<h2>Wrapped in calcite-label</h2>
<calcite-label>
Expand Down Expand Up @@ -99,15 +103,16 @@ <h2>RTL</h2>
<h2>Default</h2>
<h5>Default with average</h5>
<calcite-rating theme="dark" average=3.65></calcite-rating>
<calcite-rating theme="dark" average=3.6></calcite-rating>
<calcite-rating theme="dark" average=3.655></calcite-rating>

<h5>Default with value</h5>
<calcite-rating theme="dark" value=3></calcite-rating>
<h5>Default with average and value</h5>
<calcite-rating theme="dark" average=3.65 value=2></calcite-rating>
<h5>Default without average or value</h5>
<calcite-rating theme="dark"></calcite-rating>
<h5>Default with average with display value true</h5>
<calcite-rating theme="dark" average=3.65 display-value></calcite-rating>
<h5>Default with average, value, and count; display value</h5>
<calcite-rating theme="dark" average=3.65 value=2 count=240 display-value></calcite-rating>
<h2>Wrapped in calcite-label</h2>
<calcite-label theme="dark">
Rate this item
Expand Down