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

* fix(rating): use ignored display-value prop * display-value => show-chip for ratings component #1481 * update gnerated readme docs for rating
Esri · Jan 28, 2021 · 7bfc32a · 7bfc32a
1 parent d0960d6
commit 7bfc32a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 35 deletions.
diff --git a/src/components/calcite-rating/calcite-rating.e2e.ts b/src/components/calcite-rating/calcite-rating.e2e.ts
@@ -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 show-chip></calcite-rating>");
+    const calciteChip = await page.find("calcite-rating >>> calcite-chip");
+    expect(calciteChip).toBeNull();
+  });
+
+  it("does not render the calcite chip when show-chip 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 show-chip></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");
@@ -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 show-chip></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");
@@ -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 show-chip></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");

diff --git a/src/components/calcite-rating/calcite-rating.stories.ts b/src/components/calcite-rating/calcite-rating.stories.ts
@@ -16,6 +16,7 @@ export const Simple = (): string => html`
   <calcite-rating
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
+    ${boolean("show-chip", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -30,6 +31,7 @@ export const DarkMode = (): string => html`
     theme="dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
+    ${boolean("show-chip", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -50,6 +52,7 @@ export const WrappedInCalciteLabel = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
+      ${boolean("show-chip", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}
@@ -69,6 +72,7 @@ export const Rtl = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
+      ${boolean("show-chip", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}

diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
@@ -51,8 +51,8 @@ export class CalciteRating {
   /** is the rating component in a selectable mode */
   @Prop({ reflect: true }) disabled = false;
 
-  /** display rating value */
-  @Prop({ reflect: true }) displayValue = false;
+  /** Show average and count data summary chip (if available) */
+  @Prop({ reflect: true }) showChip = false;
 
   /** optionally pass a number of previous ratings to display */
   @Prop({ reflect: true }) count?: number;
@@ -72,7 +72,7 @@ export class CalciteRating {
   //
   //--------------------------------------------------------------------------
 
-  @Event() calciteRatingChange: EventEmitter;
+  @Event() calciteRatingChange: EventEmitter<{ value: number }>;
 
   //--------------------------------------------------------------------------
   //
@@ -153,6 +153,7 @@ export class CalciteRating {
   }
 
   render() {
+    const { intlRating, showChip, scale, theme, count, average } = this;
     const dir = getElementDir(this.el);
     return (
       <Host dir={dir}>
@@ -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) && showChip ? (
+          <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>

diff --git a/src/components/calcite-rating/readme.md b/src/components/calcite-rating/readme.md
@@ -10,24 +10,24 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                     | Type                | Default       |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
-| `average`      | `average`       | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
-| `count`        | `count`         | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
-| `disabled`     | `disabled`      | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `displayValue` | `display-value` | display rating value                                                                            | `boolean`           | `false`       |
-| `intlRating`   | `intl-rating`   | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
-| `intlStars`    | `intl-stars`    | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
-| `readOnly`     | `read-only`     | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `scale`        | `scale`         | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
-| `theme`        | `theme`         | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
-| `value`        | `value`         | the value of the rating component                                                               | `number`            | `0`           |
+| Property     | Attribute     | Description                                                                                     | Type                | Default       |
+| ------------ | ------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
+| `average`    | `average`     | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
+| `count`      | `count`       | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
+| `disabled`   | `disabled`    | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `intlRating` | `intl-rating` | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
+| `intlStars`  | `intl-stars`  | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
+| `readOnly`   | `read-only`   | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `scale`      | `scale`       | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
+| `showChip`   | `show-chip`   | Show average and count data summary chip (if available)                                         | `boolean`           | `false`       |
+| `theme`      | `theme`       | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
+| `value`      | `value`       | the value of the rating component                                                               | `number`            | `0`           |
 
 ## Events
 
-| Event                 | Description | Type               |
-| --------------------- | ----------- | ------------------ |
-| `calciteRatingChange` |             | `CustomEvent<any>` |
+| Event                 | Description | Type                              |
+| --------------------- | ----------- | --------------------------------- |
+| `calciteRatingChange` |             | `CustomEvent<{ value: number; }>` |
 
 ## Methods
 

diff --git a/src/demos/calcite-rating.html b/src/demos/calcite-rating.html
@@ -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, show chip</h5>
+      <calcite-rating average=3.65 show-chip></calcite-rating>
+      <h5>Default with average, value, and count; show chip</h5>
+      <calcite-rating average=3.65 value=2 count=240 show-chip></calcite-rating>
 
       <h2>Wrapped in calcite-label</h2>
       <calcite-label>
@@ -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, show chip</h5>
+        <calcite-rating theme="dark" average=3.65 show-chip></calcite-rating>
+        <h5>Default with average, value, and count; show chip</h5>
+        <calcite-rating theme="dark" average=3.65 value=2 count=240 show-chip></calcite-rating>
         <h2>Wrapped in calcite-label</h2>
         <calcite-label theme="dark">
           Rate this item