fix(components): DataListTotalCount results pluralization

GetJobber · Jan 15, 2025 · a1ec2c2 · a1ec2c2
1 parent 304e776
commit a1ec2c2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/packages/components/src/DataList/DataList.types.ts b/packages/components/src/DataList/DataList.types.ts
@@ -109,7 +109,7 @@ export interface DataListProps<T extends DataListObject> {
   /**
    * Total number of items in the DataList.
    *
-   * This renders an "N result" text with the DataList
+   * This renders an "N results" text with the DataList
    * that helps users know how many items they have
    * in the list
    */

diff --git a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.test.tsx b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.test.tsx
@@ -12,6 +12,11 @@ describe("DataListTotalCount", () => {
     expect(screen.getByText("(10 results)")).toBeInTheDocument();
   });
 
+  it("should render the proper pluralization for 1 result", () => {
+    render(<DataListTotalCount totalCount={1} loading={false} />);
+    expect(screen.getByText("(1 result)")).toBeInTheDocument();
+  });
+
   it("should render a Glimmer when loading and total count is null", () => {
     render(<DataListTotalCount totalCount={null} loading={true} />);
     const results = screen.getByTestId(DATALIST_TOTALCOUNT_TEST_ID);

diff --git a/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx b/packages/components/src/DataList/components/DataListTotalCount/DataListTotalCount.tsx
@@ -33,7 +33,10 @@ export function DataListTotalCount({
   if (typeof totalCount === "number") {
     return (
       <DataListTotalCountContainer>
-        <Text variation="subdued">({totalCount.toLocaleString()} results)</Text>
+        <Text variation="subdued">
+          ({totalCount.toLocaleString()}{" "}
+          {totalCount == 1 ? "result" : "results"})
+        </Text>
       </DataListTotalCountContainer>
     );
   }