[BOOKINGSG-9121][Nghi] migrate toggle and toggle-icon style to linaria

[nghitb]

Checklist

• Migrated the component styles
  • className is chained correctly with clsx
  • User style prop is set as CSS variable
• Changes follow the project guidelines in CONVENTIONS_V4.md
• Updated Storybook documentation
• Added/updated unit tests
• Added visual tests
• Listed breaking changes

[ghazwan-gt]

Let's add a unit test for the component.

@qroll should we also have a e2e story for this component as well?

[qroll]

yep we should be adding the unit tests too

[nghitb]

will do

[qroll]

yep we should be adding the unit tests too

[ghazwan-gt]

This has the same content with expandButtonDisabled & errorContainerDisabled. How about we make this as a general disabled class name?

[nghitb]

agree

[ghazwan-gt]

This is similar with childrenDisabled, errorTextDisabled & errorListDisabled. Lets have a general disabled text class name

[nghitb]

agree

[ghazwan-gt]

This is similar with errorList

[ghazwan-gt]

This is similar with toggleContainerDefaultErrorDisabled

[ghazwan-gt]

I see a pattern where we have two type of hover styling, for default and selected. Let's extract those to a class name and reference it

[nghitb]

im confused, can u give an example

[ghazwan-gt]

Okay, so we can have something like this

const defaultHoverBlock = `
    &:has(.${headerContainer}:hover) {
        @media (pointer: fine) {
            background: ${Colour["bg-hover-subtle"]};
        }
    }
`;

const selectedHoverBlock = `
    &:has(.${headerContainer}:hover) {
        @media (pointer: fine) {
            background: ${Colour["bg-selected-hover"]};

            & .${textContainer} {
                color: ${Colour["text-selected-hover"]};
            }

            & .${toggleIconStyles.wrapperBase} {
                color: ${Colour["icon-selected-hover"]};
            }
        }
    }
`;

and then reference them like

export const toggleContainerNoBorderError = css`
    border-color: ${Colour["border-error"]};
    ${defaultHoverBlock}
`;

export const toggleContainerDefaultSelected = css`
    border-color: ${Colour["border-selected"]};
    background: ${Colour["bg-selected"]};
    ${selectedHoverBlock}
`;

But this makes them just like a regular string

[ghazwan-gt]

Or if we want to avoid having literal string, we can introduce a hover class name

[nghitb]

if we change to a hover classname, it will make the getContainerStateClass more complicated

[ghazwan-gt]

We don't have to touch getContainerStateClass. Can instead introduce a new helper for the hover

    const getContainerHoverClass = (() => {
        if (disabled) {
            return undefined;
        }

        if (!error && selected) {
            return styles.toggleContainerHoverSelected;
        }

        return styles.toggleContainerHoverDefault;
    })();

What do you think?

[nghitb]

sure, will do

[ghazwan-gt]

error and checked are mutually exclusive

[ghazwan-gt]

I don't we need dark mode here, already covered by base variants

[ghazwan-gt]

I don't we need dark mode here, already covered by base variants

[ghazwan-gt]

Add a case for keyboard navigation and also check for focusableWhenDisabled