From 4616ad9ffb2f435472b5bac8592e74f14224c3c5 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 12 Sep 2023 16:42:23 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20select=20menu=20empty?=
 =?UTF-8?q?=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously if the menu was opened and no there were no options to be
displayed it was just showing a tiny empty menu, this commit adds an
empty placeholder in order to make it clearer that the list is empty.
---
 .changeset/nasty-pianos-bake.md               |  5 ++
 .../src/components/Forms/Select/index.scss    |  5 ++
 .../components/Forms/Select/mono-common.tsx   | 48 ++++++++++--------
 .../src/components/Forms/Select/mono.spec.tsx | 14 ++++++
 .../components/Forms/Select/mono.stories.tsx  |  8 +++
 .../components/Forms/Select/multi-common.tsx  | 44 +++++++++-------
 .../components/Forms/Select/multi.spec.tsx    | 50 +++++++++++++++++++
 .../components/Forms/Select/multi.stories.tsx |  8 +++
 packages/react/src/locales/en-US.json         |  3 +-
 packages/react/src/locales/fr-FR.json         |  3 +-
 10 files changed, 148 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/nasty-pianos-bake.md

diff --git a/.changeset/nasty-pianos-bake.md b/.changeset/nasty-pianos-bake.md
new file mode 100644
index 0000000..abc924f
--- /dev/null
+++ b/.changeset/nasty-pianos-bake.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add select menu empty placeholder
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index 18fb8a2..5434ec0 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/packages/react/src/components/Forms/Select/index.scss
@@ -141,6 +141,11 @@
         cursor: default;
       }
     }
+
+    &__empty-placeholder {
+      color: var(--c--theme--colors--greyscale-600);
+      font-style: italic;
+    }
   }
 
   /** Modifiers */
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index ea00f9a..0f15a6e 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -174,27 +174,35 @@ export const SelectMonoAux = ({
           {...downshiftReturn.getMenuProps()}
         >
           <ul>
-            {downshiftReturn.isOpen &&
-              options.map((item, index) => {
-                const isActive = index === downshiftReturn.highlightedIndex;
-                return (
-                  <li
-                    className={classNames("c__select__menu__item", {
-                      "c__select__menu__item--highlight": isActive,
-                      "c__select__menu__item--selected":
-                        downshiftReturn.selectedItem === item,
-                      "c__select__menu__item--disabled": item.disabled,
-                    })}
-                    key={`${item.value}${index}`}
-                    {...downshiftReturn.getItemProps({
-                      item,
-                      index,
-                    })}
-                  >
-                    <span>{item.label}</span>
+            {downshiftReturn.isOpen && (
+              <>
+                {options.map((item, index) => {
+                  const isActive = index === downshiftReturn.highlightedIndex;
+                  return (
+                    <li
+                      className={classNames("c__select__menu__item", {
+                        "c__select__menu__item--highlight": isActive,
+                        "c__select__menu__item--selected":
+                          downshiftReturn.selectedItem === item,
+                        "c__select__menu__item--disabled": item.disabled,
+                      })}
+                      key={`${item.value}${index.toString()}`}
+                      {...downshiftReturn.getItemProps({
+                        item,
+                        index,
+                      })}
+                    >
+                      <span>{item.label}</span>
+                    </li>
+                  );
+                })}
+                {options.length === 0 && (
+                  <li className="c__select__menu__item c__select__menu__empty-placeholder">
+                    {t("components.forms.select.menu_empty_placeholder")}
                   </li>
-                );
-              })}
+                )}
+              </>
+            )}
           </ul>
         </div>
       </div>
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index 3700fec..2be4e60 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1138,5 +1138,19 @@ describe("<Select/>", () => {
       const label = screen.getByText("City");
       expect(Array.from(label.classList)).toContain("offscreen");
     });
+
+    it("renders menu empty placeholder when there are no options to display", async () => {
+      render(
+        <CunninghamProvider>
+          <Select label="City" options={[]} hideLabel={true} />
+        </CunninghamProvider>,
+      );
+      const input = screen.getByRole("combobox", {
+        name: "City",
+      });
+      const user = userEvent.setup();
+      await user.click(input);
+      screen.getByText("No options available");
+    });
   });
 });
diff --git a/packages/react/src/components/Forms/Select/mono.stories.tsx b/packages/react/src/components/Forms/Select/mono.stories.tsx
index 8a3ba96..de072dc 100644
--- a/packages/react/src/components/Forms/Select/mono.stories.tsx
+++ b/packages/react/src/components/Forms/Select/mono.stories.tsx
@@ -211,6 +211,14 @@ export const Error = {
   },
 };
 
+export const NoOptions = {
+  render: Template,
+  args: {
+    label: "No options available",
+    options: [],
+  },
+};
+
 export const FormExample = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index 3a4b666..f57c44d 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -191,25 +191,33 @@ export const SelectMultiAux = ({
           {...downshiftReturn.getMenuProps()}
         >
           <ul>
-            {downshiftReturn.isOpen &&
-              options.map((option, index) => {
-                const isActive = index === downshiftReturn.highlightedIndex;
-                return (
-                  <li
-                    className={classNames("c__select__menu__item", {
-                      "c__select__menu__item--highlight": isActive,
-                      "c__select__menu__item--disabled": option.disabled,
-                    })}
-                    key={`${option.value}${index}`}
-                    {...downshiftReturn.getItemProps({
-                      item: option,
-                      index,
-                    })}
-                  >
-                    <span>{option.label}</span>
+            {downshiftReturn.isOpen && (
+              <>
+                {options.map((option, index) => {
+                  const isActive = index === downshiftReturn.highlightedIndex;
+                  return (
+                    <li
+                      className={classNames("c__select__menu__item", {
+                        "c__select__menu__item--highlight": isActive,
+                        "c__select__menu__item--disabled": option.disabled,
+                      })}
+                      key={`${option.value}${index.toString()}`}
+                      {...downshiftReturn.getItemProps({
+                        item: option,
+                        index,
+                      })}
+                    >
+                      <span>{option.label}</span>
+                    </li>
+                  );
+                })}
+                {options.length === 0 && (
+                  <li className="c__select__menu__item c__select__menu__empty-placeholder">
+                    {t("components.forms.select.menu_empty_placeholder")}
                   </li>
-                );
-              })}
+                )}
+              </>
+            )}
           </ul>
         </div>
       </div>
diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx
index ffe11d4..92e2013 100644
--- a/packages/react/src/components/Forms/Select/multi.spec.tsx
+++ b/packages/react/src/components/Forms/Select/multi.spec.tsx
@@ -1232,5 +1232,55 @@ describe("<Select multi={true} />", () => {
       await user.type(input, "Pa");
       expectMenuToBeClosed(menu);
     });
+
+    it("renders menu empty placeholder when there is no more options to display", async () => {
+      render(
+        <CunninghamProvider>
+          <Select
+            label="Cities"
+            options={[
+              {
+                label: "Paris",
+                value: "paris",
+              },
+              {
+                label: "London",
+                value: "london",
+              },
+            ]}
+            multi={true}
+          />
+        </CunninghamProvider>,
+      );
+      const input = screen.getByRole("combobox", {
+        name: "Cities",
+      });
+
+      // Expect no options to be selected.
+      expectSelectedOptions([]);
+
+      const user = userEvent.setup();
+      await user.click(input);
+
+      await user.click(
+        screen.getByRole("option", {
+          name: "Paris",
+        }),
+      );
+      expectSelectedOptions(["Paris"]);
+
+      expect(
+        screen.queryByText("No options available"),
+      ).not.toBeInTheDocument();
+
+      await user.click(
+        screen.getByRole("option", {
+          name: "London",
+        }),
+      );
+      expectSelectedOptions(["Paris", "London"]);
+
+      screen.getByText("No options available");
+    });
   });
 });
diff --git a/packages/react/src/components/Forms/Select/multi.stories.tsx b/packages/react/src/components/Forms/Select/multi.stories.tsx
index 2570574..6c33b28 100644
--- a/packages/react/src/components/Forms/Select/multi.stories.tsx
+++ b/packages/react/src/components/Forms/Select/multi.stories.tsx
@@ -213,6 +213,14 @@ export const Error = {
   },
 };
 
+export const NoOptions = {
+  render: Template,
+  args: {
+    label: "No options available",
+    options: [],
+  },
+};
+
 export const FormExample = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
index 7e04503..0d474e9 100644
--- a/packages/react/src/locales/en-US.json
+++ b/packages/react/src/locales/en-US.json
@@ -22,7 +22,8 @@
       "select": {
         "toggle_button_aria_label": "Toggle dropdown",
         "clear_button_aria_label": "Clear selection",
-        "clear_all_button_aria_label": "Clear all selections"
+        "clear_all_button_aria_label": "Clear all selections",
+        "menu_empty_placeholder": "No options available"
       },
       "file_uploader": {
         "delete_file_name": "Delete file {name}",
diff --git a/packages/react/src/locales/fr-FR.json b/packages/react/src/locales/fr-FR.json
index a4c1c67..f6aeda9 100644
--- a/packages/react/src/locales/fr-FR.json
+++ b/packages/react/src/locales/fr-FR.json
@@ -20,7 +20,8 @@
       "select": {
         "toggle_button_aria_label": "Ouvrir le menu",
         "clear_button_aria_label": "Effacer la sélection",
-        "clear_all_button_aria_label": "Effacer toutes les sélections"
+        "clear_all_button_aria_label": "Effacer toutes les sélections",
+        "menu_empty_placeholder": "Aucun choix disponible"
       },
       "file_uploader": {
         "delete_file_name": "Supprimer le fichier {name}",