as?: React.ElementType;
className?: string;
isInvalid?: boolean;
+ isValid?: boolean;
size?: InputSizeKeys;
}
interface InputTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
className?: string;
isInvalid?: boolean;
+ isValid?: boolean;
size?: InputSizeKeys;
}
--focusOutline: var(--echoes-focus-border-width-default) solid var(--echoes-color-focus-default);
`;
+const successStyle = (props: ThemedProps) => css`
+ --border: ${themeBorder('default', 'inputSuccess')(props)};
+ --focusBorder: ${themeBorder('default', 'inputSuccessFocus')(props)};
+ --focusOutline: ${themeBorder('focus', 'inputSuccessFocus')(props)};
+`;
+
const getInputVariant = (props: ThemedProps & { isInvalid?: boolean; isValid?: boolean }) => {
- const { isInvalid } = props;
+ const { isValid, isInvalid } = props;
if (isInvalid) {
return dangerStyle;
+ } else if (isValid) {
+ return successStyle;
}
return defaultStyle;
};
describe('Input Field', () => {
it.each([
- ['default', false, 'defaultStyle'],
- ['invalid', true, 'dangerStyle'],
- ])('should handle status %s', (_, isInvalid, expectedStyle) => {
- render(<InputField isInvalid={isInvalid} />);
+ ['default', false, false, 'defaultStyle'],
+ ['invalid', true, false, 'dangerStyle'],
+ ['valid', false, true, 'successStyle'],
+ ])('should handle status %s', (_, isInvalid, isValid, expectedStyle) => {
+ render(<InputField isInvalid={isInvalid} isValid={isValid} />);
// Emotion classes contain pseudo-random parts, we're interesting in the fixed part
// so we can't just check a specific class
value={name}
autoFocus
isInvalid={projectNameIsInvalid}
+ isValid={projectNameIsValid}
required
/>
{projectNameIsInvalid && <FlagErrorIcon className="sw-ml-2" />}
type="text"
value={key}
isInvalid={projectKeyIsInvalid}
+ isValid={projectKeyIsValid}
required
/>
{projectKeyIsInvalid && <FlagErrorIcon className="sw-ml-2" />}
type="text"
value={mainBranchName}
isInvalid={mainBranchNameIsInvalid}
+ isValid={mainBranchNameIsValid}
required
/>
{mainBranchNameIsInvalid && <FlagErrorIcon className="sw-ml-2" />}
name="update_key.new_key"
required
isInvalid={hasChanged && error !== undefined}
+ isValid={hasChanged && error === undefined}
autoFocus
onChange={onInputChange}
value={newKey}
/>
<NewCodeDefinitionDaysOption
days={days}
+ isChanged={isChanged}
isValid={isValid}
onChangeDays={this.handleSelectDays}
onSelect={this.handleSelectSetting}
}
days={days}
disabled={!overrideGlobalNewCodeDefinition}
+ isChanged={isChanged}
isValid={isValid}
onChangeDays={props.onSelectDays}
onSelect={props.onSelectSetting}
previousNonCompliantValue={newCodeDefinition?.previousNonCompliantValue}
projectKey={newCodeDefinition?.projectKey}
updatedAt={newCodeDefinition?.updatedAt}
+ isChanged={isFormTouched}
isValid={isValid}
onChangeDays={setNumberOfDays}
onSelect={setSelectedNewCodeDefinitionType}
!doesLoginHaveValidCharacter ||
!doesLoginStartWithLetterOrNumber
}
+ isValid={!isLoginAlreadyUsed && login.length >= MINIMUM_LOGIN_LENGTH}
maxLength={MAXIMUM_LOGIN_LENGTH}
minLength={MINIMUM_LOGIN_LENGTH}
size="full"
>
<div className="sw-flex sw-items-center">
<InputField
+ isValid={isCreateUserForm ? nameIsValid : undefined}
isInvalid={nameIsInvalid}
autoFocus={!!user}
autoComplete="off"
<InputField
id={id}
isInvalid={isEmailValid === false}
+ isValid={isEmailValid === true}
size="full"
onChange={({ currentTarget }) => {
const isValid = isMandotory
<div className="sw-flex sw-items-center">
<InputField
isInvalid={isInvalid}
+ isValid={isValid}
onFocus={() => setIsFocused(true)}
id="create-password"
size={size}
<div className="sw-flex sw-items-center">
<InputField
isInvalid={passwordDontMatch}
+ isValid={passwordMatch}
onFocus={() => setIsFocused(true)}
id="confirm-password"
size={size}
const modalValidationProps = { description, dirty, error, label, touched, required };
return (
<ModalValidationField id={props.id} {...modalValidationProps}>
- {({ isInvalid }) => <InputField size="full" isInvalid={isInvalid} {...inputProps} />}
+ {({ isInvalid, isValid }) => (
+ <InputField size="full" isInvalid={isInvalid} isValid={isValid} {...inputProps} />
+ )}
</ModalValidationField>
);
}
currentDaysValue?: string;
days: string;
disabled?: boolean;
+ isChanged: boolean;
isValid: boolean;
onChangeDays: (value: string) => void;
onSelect: (selection: NewCodeDefinitionType) => void;
projectKey,
updatedAt,
disabled,
+ isChanged,
isValid,
onChangeDays,
onSelect,
<InputField
id="baseline_number_of_days"
isInvalid={!isValid}
+ isValid={isChanged && isValid}
max={NUMBER_OF_DAYS_MAX_VALUE}
min={NUMBER_OF_DAYS_MIN_VALUE}
onChange={(e) => onChangeDays(e.currentTarget.value)}
const [globalNcd, setGlobalNcd] = React.useState<NewCodeDefinition | null>(null);
const [selectedNcdType, setSelectedNcdType] = React.useState<NewCodeDefinitionType | null>(null);
const [days, setDays] = React.useState<string>('');
+ const [isChanged, setIsChanged] = React.useState<boolean>(false);
React.useEffect(() => {
const numberOfDays = getNumberOfDaysDefaultValue(globalNcd);
(newNcdType: NewCodeDefinitionType) => {
if (newNcdType && newNcdType !== selectedNcdType) {
setSelectedNcdType(newNcdType);
+ setIsChanged(true);
}
},
[selectedNcdType],
disabled={Boolean(
!selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited,
)}
+ isChanged={isChanged}
isValid={isCompliant}
onChangeDays={setDays}
onSelect={handleNcdChanged}
projects / sonarqube.git / commitdiff