diff --git a/e2e/nextjs-app/src/app/components/input-select/secondary-label.e2e.tsx b/e2e/nextjs-app/src/app/components/input-select/secondary-label.e2e.tsx new file mode 100644 index 0000000000..cdd47a0c15 --- /dev/null +++ b/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 ( +
+ item.value} + listExtractor={(item) => ({ + title: item.label, + secondaryLabel: item.description, + })} + displayValueExtractor={(item) => item.label} + /> + + item.value} + listExtractor={(item) => ({ + title: item.label, + secondaryLabel: item.description, + })} + displayValueExtractor={(item) => item.label} + /> +
+ ); +} diff --git a/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Default-variant--open.png b/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Default-variant--open.png new file mode 100644 index 0000000000..98a191ce50 Binary files /dev/null and b/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Default-variant--open.png differ diff --git a/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Small-variant--open.png b/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Small-variant--open.png new file mode 100644 index 0000000000..4735bebe16 Binary files /dev/null and b/e2e/tests/components/input-select/__screenshots__/chromium/InputSelect-Secondary-label-Small-variant--open.png differ diff --git a/e2e/tests/components/input-select/input-select.e2e.spec.ts b/e2e/tests/components/input-select/input-select.e2e.spec.ts index 1eef9d757b..c73bd0e659 100644 --- a/e2e/tests/components/input-select/input-select.e2e.spec.ts +++ b/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"); diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--active-option.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--active-option.png index e872c90dee..7aabfe7345 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--active-option.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--active-option.png differ diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--selected-option.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--selected-option.png index 633265efc7..87d5112daa 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--selected-option.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Hover-states--selected-option.png differ diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Open-states--default.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Open-states--default.png index f7ef8bdeae..76f91f49cf 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Open-states--default.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Open-states--default.png differ diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Prefilled-Open-states--default.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Prefilled-Open-states--default.png index 81e698110c..3a59f7a135 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Prefilled-Open-states--default.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Form-Variants-Prefilled-Open-states--default.png differ diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--hover-option.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--hover-option.png index 7c0d609faf..ec48ce4ecf 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--hover-option.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--hover-option.png differ diff --git a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--open.png b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--open.png index e7da261c51..3b12518f38 100644 Binary files a/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--open.png and b/e2e/tests/components/phone-number-input/__screenshots__/chromium/PhoneNumberInput-Searchable-Search-and-select--open.png differ diff --git a/src/shared/dropdown-list/dropdown-label.styles.ts b/src/shared/dropdown-list/dropdown-label.styles.ts index cb53582271..26b0d7cb42 100644 --- a/src/shared/dropdown-list/dropdown-label.styles.ts +++ b/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` diff --git a/src/shared/dropdown-list/dropdown-label.tsx b/src/shared/dropdown-list/dropdown-label.tsx index 3a19267478..28ead6617c 100644 --- a/src/shared/dropdown-list/dropdown-label.tsx +++ b/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 diff --git a/stories/form/form-select/form-select.stories.tsx b/stories/form/form-select/form-select.stories.tsx index e2caee584b..fbe56dd215 100644 --- a/stories/form/form-select/form-select.stories.tsx +++ b/stories/form/form-select/form-select.stories.tsx @@ -274,7 +274,6 @@ export const LabelTruncation: StoryObj = { title: item, secondaryLabel: item, })} - variant="small" /> = { title: item, secondaryLabel: item, })} - variant="small" /> = { title: item, secondaryLabel: item, })} - variant="small" /> );