👌 - fix: pr fixes

Author: Xaohs

src/components/form/form/form.stories.tsx

@@ -65,6 +65,7 @@ const playFormComponent = async ({
   const schoolYear = canvas.getByLabelText("Select school year", {
     exact: false,
   });
+  const favouriteSport = canvas.getByLabelText("Favourite sport");
   const address = canvas.getByLabelText("Address");
   const address_addition = canvas.getByLabelText("Address (addition)");
   const dateOfBirth = canvas.getByLabelText("Date of birth", { exact: false });
@@ -140,6 +141,18 @@ const playFormComponent = async ({
   await expect(math).toBeChecked();
   await expectLogToBe(canvasElement, "courses", ["english", "math"]);
 
+  await userEvent.click(favouriteSport, { delay: 100 });
+  const football = await canvas.findByText("Football");
+  const tennis = await canvas.findByText("Tennis");
+  await userEvent.click(football, { delay: 10 });
+  await userEvent.click(tennis, { delay: 10 });
+  await expect(favouriteSport).toHaveTextContent("FootballTennis");
+  await expectLogToBe(
+    canvasElement,
+    "favourite_sport",
+    typedResults ? ["football", "tennis"] : ["football", "tennis"],
+  );
+
   await userEvent.click(yes);
   await expect(yes).toBeChecked();
   await expectLogToBe(canvasElement, "subscribe_newsletter", "yes");
@@ -204,6 +217,20 @@ export const FormComponent: Story = {
           { label: "Science", value: "science" },
         ],
       },
+      {
+        options: [
+          { label: "Football", value: "football" },
+          { label: "Basketball", value: "basketball" },
+          { label: "Tennis", value: "tennis" },
+          { label: "Swimming", value: "swimming" },
+          { label: "Running", value: "running" },
+          { label: "Cycling", value: "cycling" },
+        ],
+        name: "favourite_sport",
+        placeholder: "Select favourite sport",
+        label: "Favourite sport",
+        multiple: true,
+      },
       {
         label: "Receive newsletter",
         name: "subscribe_newsletter",
@@ -214,6 +241,7 @@ export const FormComponent: Story = {
           { label: "No", value: "no" },
         ],
       },
+
       {
         label: "I have read and accept the terms and conditions",
         name: "accept_tos",
@@ -287,6 +315,20 @@ export const UsageWithFormik: Story = {
           { label: "Science", value: "science" },
         ],
       },
+      {
+        options: [
+          { label: "Football", value: "football" },
+          { label: "Basketball", value: "basketball" },
+          { label: "Tennis", value: "tennis" },
+          { label: "Swimming", value: "swimming" },
+          { label: "Running", value: "running" },
+          { label: "Cycling", value: "cycling" },
+        ],
+        name: "favourite_sport",
+        placeholder: "Select favourite sport",
+        label: "Favourite sport",
+        multiple: true,
+      },
       {
         label: "Receive newsletter",
         name: "subscribe_newsletter",

src/components/form/select/select.scss

@@ -105,9 +105,12 @@
     align-items: center;
     padding: 0 0.5em; // TODO: spacing-h and spacing-v are too big for this. Add more tokens or hardcode?
     margin: calc(var(--spacing-h) / 4);
-    border-radius: 9999px;
+    border-radius: var(--border-radius-l);
     background-color: var(--page-color-accent);
     color: var(--typography-color-link);
+    &-remove {
+      margin-inline-start: 0.05em;
+    }
   }
 
   &__clear {

src/components/form/select/select.stories.tsx

@@ -221,14 +221,15 @@ export const SelectSingle: Story = {
 export const SelectMultiple: Story = {
   args: {
     options: [
-      { label: "Freshman", value: "FR" },
-      { label: "Sophomore", value: "SO" },
-      { label: "Junior", value: "JR" },
-      { label: "Senior", value: "SR" },
-      { label: "Graduate", value: "GR" },
+      { label: "Football", value: "football" },
+      { label: "Basketball", value: "basketball" },
+      { label: "Tennis", value: "tennis" },
+      { label: "Swimming", value: "swimming" },
+      { label: "Running", value: "running" },
+      { label: "Cycling", value: "cycling" },
     ],
-    name: "school_year",
-    placeholder: "Select school year",
+    name: "favourite_sport",
+    placeholder: "Select favourite sport",
     multiple: true,
   },
   decorators: [FORM_TEST_DECORATOR],

src/components/form/select/select.tsx

@@ -18,6 +18,7 @@ import clsx from "clsx";
 import React, { useEffect } from "react";
 
 import { gettextFirst, ucFirst } from "../../../lib";
+import { Button } from "../../button";
 import { Outline, Solid } from "../../icon";
 import { ChoiceFieldProps, Option } from "../choicefield";
 import { eventFactory } from "../eventFactory";
@@ -284,6 +285,33 @@ export const Select: React.FC<SelectProps> = ({
                 return (
                   <span key={i} className="mykn-select__pill">
                     {options[i]?.label}
+                    <Button
+                      variant="transparent"
+                      className="mykn-select__pill-remove"
+                      aria-label={`Remove ${options[i]?.label}`}
+                      onClick={(e) => {
+                        e.stopPropagation(); // prevent dropdown from toggling
+                        const next = selectedIndices.filter((j) => j !== i);
+                        setSelectedIndices(next);
+
+                        const detail = next.map((j) => options[j]);
+
+                        const fakeInput = fakeInputRef.current!;
+                        const changeEvent = eventFactory(
+                          "change",
+                          detail,
+                          true,
+                          false,
+                          false,
+                        );
+                        fakeInput.dispatchEvent(changeEvent);
+                        onChange?.(
+                          changeEvent as unknown as React.ChangeEvent<HTMLSelectElement>,
+                        );
+                      }}
+                    >
+                      <Outline.XMarkIcon />
+                    </Button>
                   </span>
                 );
               }