Document kcClsx

[strowk]

In our use of keycloakify we have noticed that errors are not shown with anything error-like (like no red color for example). Further looking into it, I saw that the bit here className={kcClsx("kcInputErrorMessageClass")} :

https://github.com/keycloakify/keycloakify/blob/ddec3118a4c5b669ee8d1fab388a8ee175659508/src/login/pages/LoginRecoveryAuthnCodeInput.tsx#L49

does not actually style error as such. I.e kcClsx function have simply returned apparently string "kcInputErrorMessageClass" without any changes:

Looking in documentation I could not figure out whether that is intended or not. Looking at the browser devtools I also could not see that this class does anything, i.e there is no css being attached to that class, or in fact to any classes that are passed to kcClsx , which seemingly always simply returns class back without changes and does nothing. Either the function is somehow slightly bugged, or it is not necessary at all?

Docs mention function only in one place saying

Any classname provided as a variable will use kcClsx to resolve

What exactly "resolve" means here and how am I to troubleshoot the issue is a mystery to me. Reading code unfortunately did not help, I cannot wrap my head around the js magics in there :) Some examples of what that function is supposed to do (i.e what is rendered and where is the corresponding css should appear) would help to figure out if we somehow misuse the function or it is bugged or simply not needed at all.

[garronej]

Hello @strowk,

kcClsx("kcInputErrorMessageClass") returns by default "kcInputErrorMessageClass pf-c-form__helper-text pf-m-error required kc-feedback-text".

If it only returns "kcInputErrorMessageClass" it means that you've either set doUseDefaultCss to false or that you have provided:

                                classes={{
                                     kcInputErrorMessageClass: ""
                                ]}

As props to the page or default page component.

kcClsx is used to apply the default paternfly classes. It's puprose is to enable you with just a simple switch to disable the default styles eather globaly or on a case by case basis.

The "kcInputErrorMessageClass" is always returned because it is used as a class targef for your custom styles.

Maybe you followed the mui tutorial and have something like:

const useStyles = tss
    .withName({ KcApp })
    .create(
        ({ theme }) =>
            ({
                "kcInputErrorMessageClass": {
                    // Your custom css
                },
            }) as const satisfies { [key in ClassKey]?: unknown }
    );

This overwride the default style for the kcInputErrorMessageClass key.

If you want your custom style plus the default you have to do:

    const { classes: classes_custom } = useStyles();

    const classes = {
        ...classes,
        kcInputErrorMessageClass: `${classes.kcInputErrorMessageClass} pf-c-form__helper-text pf-m-error required kc-feedback-text`
    };

It is explained here: https://docs.keycloakify.dev/customization-strategies/css-level-customization

[strowk]

set doUseDefaultCss to false

Yes, that is in fact done in KcPage. I guess my colleague decided to style everything and not get any interference from default styles, which sort of makes sense for us, I guess.

If we set that flag to false though, does it even make sense to keep kcClsx calls around? Assuming there is no plan to unset it any time soon?

[garronej]

Well they provide a standardized way to set styles at the src/login/KcPage.tsx level.

For example you can set kcInputErrorMessageClass: css({ color: "red" }) and have all the element that have this class be displayed in red.
If you get rid of the kcClsx you'll loose the ability to do that but beside this yes, it's only cosmetic, things will keep working.

[garronej]

You're welcome