This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch fire-alert in repository https://gitbox.apache.org/repos/asf/superset.git
commit 8b3e24cb576bf27c4e616b51f1101e316b10fce7 Author: Maxime Beauchemin <[email protected]> AuthorDate: Wed Sep 10 00:09:23 2025 -0700 feat: Dynamic asterisk coloring for form field validation Improve form field UX by making required asterisks (*) context-aware: - Default: subtle theme.colorIcon for clean appearance - Error state: theme.colorError when validation fails or error prop set This affects all modals using ModalFormField across Superset: - Alert & Report Modal - Chart Properties Modal - Dashboard Properties Modal - Database Connection Modal - All other modal forms Users now get visual feedback that clearly distinguishes between required fields and fields with validation errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> --- .../src/components/Modal/ModalFormField.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/components/Modal/ModalFormField.tsx b/superset-frontend/src/components/Modal/ModalFormField.tsx index 95f8f87dcd..eed301ee4f 100644 --- a/superset-frontend/src/components/Modal/ModalFormField.tsx +++ b/superset-frontend/src/components/Modal/ModalFormField.tsx @@ -33,8 +33,11 @@ interface ModalFormFieldProps { hasFeedback?: boolean; } -const StyledFieldContainer = styled.div<{ bottomSpacing: boolean }>` - ${({ theme, bottomSpacing }) => css` +const StyledFieldContainer = styled.div<{ + bottomSpacing: boolean; + hasError: boolean; +}>` + ${({ theme, bottomSpacing, hasError }) => css` flex: 1; margin-top: 0px; margin-bottom: ${bottomSpacing ? theme.sizeUnit * 4 : 0}px; @@ -48,7 +51,7 @@ const StyledFieldContainer = styled.div<{ bottomSpacing: boolean }>` .required { margin-left: ${theme.sizeUnit / 2}px; - color: ${theme.colorIcon}; + color: ${hasError ? theme.colorError : theme.colorIcon}; } .helper { @@ -128,8 +131,14 @@ export function ModalFormField({ validateStatus, hasFeedback = false, }: ModalFormFieldProps) { + const hasError = !!(error || validateStatus === 'error'); + return ( - <StyledFieldContainer bottomSpacing={bottomSpacing} data-test={testId}> + <StyledFieldContainer + bottomSpacing={bottomSpacing} + hasError={hasError} + data-test={testId} + > <div className="control-label"> {label} {tooltip && <InfoTooltip tooltip={tooltip} />}
