From 208acca1e9269494310ff000104b21e999b66cf8 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Wed, 19 Jul 2023 16:56:44 +0200 Subject: [PATCH] fix(module): ensure `red` color is safelisted for form elements Resolves #423, resolves #373 --- src/colors.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/colors.ts b/src/colors.ts index 0019e49cf3..15c0594ce9 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -185,10 +185,14 @@ const colorsAsRegex = (colors: string[]): string => colors.join('|') export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[] export const generateSafelist = (colors: string[]) => { - const safelist = Object.keys(safelistByComponent).flatMap(component => safelistByComponent[component](colorsAsRegex(colors))) + const baseSafelist = Object.keys(safelistByComponent).flatMap(component => safelistByComponent[component](colorsAsRegex(colors))) + + // Ensure `red` color is safelisted for form elements so that `error` prop of `UFormGroup` always works + const formsSafelist = ['input', 'radio', 'checkbox', 'toggle', 'range'].flatMap(component => safelistByComponent[component](colorsAsRegex(['red']))) return [ - ...safelist, + ...baseSafelist, + ...formsSafelist, // Gray safelist for Avatar & Notification 'bg-gray-500', 'dark:bg-gray-400',