diff --git a/gradle/changelog/warning-state-chip-input.yaml b/gradle/changelog/warning-state-chip-input.yaml new file mode 100644 index 0000000000..952f81cedf --- /dev/null +++ b/gradle/changelog/warning-state-chip-input.yaml @@ -0,0 +1,2 @@ +- type: added + description: Display of warnings for a chip input field diff --git a/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx b/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx index 77717af6bb..7c5485bb5b 100644 --- a/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx +++ b/scm-ui/ui-core/src/base/forms/chip-input/ChipInputField.tsx @@ -22,12 +22,13 @@ import Help from "../base/help/Help"; import FieldMessage from "../base/field-message/FieldMessage"; import styled from "styled-components"; import classNames from "classnames"; -import { createVariantClass } from "../variants"; +import { createVariantClass, Variant } from "../variants"; import ChipInput, { NewChipInput } from "../headless-chip-input/ChipInput"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; import { useTranslation } from "react-i18next"; import { withForwardRef } from "../helpers"; import { Option } from "@scm-manager/ui-types"; +import { waitForRestartAfter } from "@scm-manager/ui-api"; const StyledChipInput: typeof ChipInput = styled(ChipInput)` min-height: 40px; @@ -62,6 +63,7 @@ type InputFieldProps = { helpText?: string; information?: string; error?: string; + warning?: string; testId?: string; id?: string; children?: ReactElement; @@ -77,6 +79,16 @@ type InputFieldProps = { ref?: Ref; }; +const determineVariant = (error: string | undefined, warning: string | undefined): Variant | undefined => { + if (error) { + return "danger"; + } + + if (warning) { + return "warning"; + } +}; + /** * @beta * @since 2.44.0 @@ -89,6 +101,7 @@ const ChipInputField = function ChipInputField( readOnly, disabled, error, + warning, createDeleteText, onChange, placeholder, @@ -111,7 +124,7 @@ const ChipInputField = function ChipInputField( const inputId = useAriaId(id ?? testId); const labelId = useAriaId(); const inputDescriptionId = useAriaId(); - const variant = error ? "danger" : undefined; + const variant = determineVariant(error, warning); return ( ); }; diff --git a/scm-ui/ui-core/src/base/forms/variants.ts b/scm-ui/ui-core/src/base/forms/variants.ts index 76c33efac0..66d73ea327 100644 --- a/scm-ui/ui-core/src/base/forms/variants.ts +++ b/scm-ui/ui-core/src/base/forms/variants.ts @@ -14,6 +14,6 @@ * along with this program. If not, see https://www.gnu.org/licenses/. */ -export const variants = ["danger"] as const; +export const variants = ["danger", "warning"] as const; export type Variant = typeof variants[number]; export const createVariantClass = (variant?: Variant) => (variant ? `is-${variant}` : undefined);