[CCUBE-2289][ZZ] feat: update style of secondary text in small variant dropdowns

e2e/nextjs-app/src/app/components/input-select/secondary-label.e2e.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Form } from "@lifesg/react-design-system/form";
+
+const OPTIONS = [
+    { value: "A", label: "Option A", description: "Secondary label A" },
+    { value: "B", label: "Option B", description: "Secondary label B" },
+    { value: "C", label: "Option C", description: "Secondary label C" },
+];
+
+export default function Story() {
+    return (
+        <div className="story-column-container">
+            <Form.Select
+                data-testid="input-select-secondary-label-default"
+                label="Default variant"
+                options={OPTIONS}
+                valueExtractor={(item) => item.value}
+                listExtractor={(item) => ({
+                    title: item.label,
+                    secondaryLabel: item.description,
+                })}
+                displayValueExtractor={(item) => item.label}
+            />
+
+            <Form.Select
+                data-testid="input-select-secondary-label-small"
+                label="Small variant"
+                options={OPTIONS}
+                variant="small"
+                valueExtractor={(item) => item.value}
+                listExtractor={(item) => ({
+                    title: item.label,
+                    secondaryLabel: item.description,
+                })}
+                displayValueExtractor={(item) => item.label}
+            />
+        </div>
+    );
+}

e2e/tests/components/input-select/input-select.e2e.spec.ts

@@ -36,6 +36,10 @@ class StoryPage extends AbstractStoryPage {
             default: Locator;
             withSearch: Locator;
         };
+        secondaryLabel: {
+            default: Locator;
+            small: Locator;
+        };
         dropdownWidth: {
             minWidth: Locator;
             customWidth: Locator;
@@ -85,6 +89,12 @@ class StoryPage extends AbstractStoryPage {
                 default: page.getByTestId("input-select-small-default"),
                 withSearch: page.getByTestId("input-select-small-search"),
             },
+            secondaryLabel: {
+                default: page.getByTestId(
+                    "input-select-secondary-label-default"
+                ),
+                small: page.getByTestId("input-select-secondary-label-small"),
+            },
             dropdownWidth: {
                 minWidth: page.getByTestId("input-select-min-width"),
                 customWidth: page.getByTestId("input-select-custom-width"),
@@ -430,6 +440,26 @@ test.describe("InputSelect", () => {
         });
     });
 
+    test.describe("Secondary label", () => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("secondary-label");
+        });
+
+        test("Default variant", async ({ story }) => {
+            await story.openDropdown(story.locators.secondaryLabel.default);
+            await compareScreenshot(story, "open", {
+                fullscreen: true,
+            });
+        });
+
+        test("Small variant", async ({ story }) => {
+            await story.openDropdown(story.locators.secondaryLabel.small);
+            await compareScreenshot(story, "open", {
+                fullscreen: true,
+            });
+        });
+    });
+
     test.describe(() => {
         test.beforeEach(async ({ story }) => {
             await story.init("grid");

src/shared/dropdown-list/dropdown-label.styles.ts

@@ -61,7 +61,7 @@ export const secondaryTextNextLine = css`
 `;
 
 export const secondaryTextInline = css`
-    ${Font["body-baseline-regular"]}
+    font-weight: ${Font.Spec["weight-regular"]};
 `;
 
 export const secondaryTextLabelInline = css`

src/shared/dropdown-list/dropdown-label.tsx

@@ -100,10 +100,7 @@ export const DropdownLabel = ({
     // css cannot truncate inline elements so force the display to render
     // them separately
     const itemDisplayType =
-        truncationType === "middle" &&
-        (shouldTruncateTitle || shouldTruncateLabel)
-            ? "next-line"
-            : displayType;
+        shouldTruncateTitle || shouldTruncateLabel ? "next-line" : displayType;
 
     // =========================================================================
     // RENDER FUNCTIONS
@@ -176,9 +173,10 @@ export const DropdownLabel = ({
                     bold && styles.primaryTextBold,
                     disabled && styles.primaryTextDisabled,
                     !disabled && selected && styles.primaryTextSelected,
-                    itemDisplayType === "inline" &&
-                        styles.primaryTextLabelInline,
-                    truncationType === "end" && styles.primaryTextTruncateEnd
+                    itemDisplayType === "inline"
+                        ? styles.primaryTextLabelInline
+                        : truncationType === "end" &&
+                              styles.primaryTextTruncateEnd
                 )}
             >
                 {truncationType === "middle" && shouldTruncateTitle
@@ -191,13 +189,13 @@ export const DropdownLabel = ({
                     aria-label={sublabel}
                     className={clsx(
                         styles.secondaryText,
-                        itemDisplayType === "inline" &&
-                            styles.secondaryTextLabelInline,
-                        truncationType === "end" &&
-                            styles.secondaryTextTruncateEnd,
                         displayType === "next-line"
                             ? styles.secondaryTextNextLine
-                            : styles.secondaryTextInline
+                            : styles.secondaryTextInline,
+                        itemDisplayType === "inline"
+                            ? styles.secondaryTextLabelInline
+                            : truncationType === "end" &&
+                                  styles.secondaryTextTruncateEnd
                     )}
                 >
                     {truncationType === "middle" && shouldTruncateLabel

stories/form/form-select/form-select.stories.tsx

@@ -274,7 +274,6 @@ export const LabelTruncation: StoryObj<Component> = {
                         title: item,
                         secondaryLabel: item,
                     })}
-                    variant="small"
                 />
                 <Form.Select
                     label="This has truncation in the middle"
@@ -284,7 +283,6 @@ export const LabelTruncation: StoryObj<Component> = {
                         title: item,
                         secondaryLabel: item,
                     })}
-                    variant="small"
                 />
                 <Form.Select
                     label="This has no truncation"
@@ -294,7 +292,6 @@ export const LabelTruncation: StoryObj<Component> = {
                         title: item,
                         secondaryLabel: item,
                     })}
-                    variant="small"
                 />
             </>
         );