diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts index 0ad25ea608..b87a31cae9 100644 --- a/packages/components/src/components/@deprecated/input/controller.ts +++ b/packages/components/src/components/@deprecated/input/controller.ts @@ -54,7 +54,7 @@ export class InputController extends ControlledInputController implements Watche public validateError(value?: string): void { const message: MsgPropType | undefined = value ? { - _label: value, + _description: value, _type: 'error', } : undefined; diff --git a/packages/components/src/components/@shared/_kol-alert-mixin.scss b/packages/components/src/components/@shared/_kol-alert-mixin.scss index ec43176539..b1d151dc40 100644 --- a/packages/components/src/components/@shared/_kol-alert-mixin.scss +++ b/packages/components/src/components/@shared/_kol-alert-mixin.scss @@ -20,9 +20,5 @@ /* Visible with forced colors */ outline: transparent solid 1px; } - - .content:empty { - display: none; - } } } diff --git a/packages/components/src/components/@shared/form-field-msg.tsx b/packages/components/src/components/@shared/form-field-msg.tsx index 09f2b47b3b..ec4cfabce5 100644 --- a/packages/components/src/components/@shared/form-field-msg.tsx +++ b/packages/components/src/components/@shared/form-field-msg.tsx @@ -26,5 +26,7 @@ export const FormFieldMsg: FunctionalComponent = ({ _alert, _ 'visually-hidden': _hideError === true, }} {..._msg} - > + > + {_msg?._description || undefined} + ); diff --git a/packages/components/src/components/input-date/component.tsx b/packages/components/src/components/input-date/component.tsx index 40aec01615..9bcef23a71 100644 --- a/packages/components/src/components/input-date/component.tsx +++ b/packages/components/src/components/input-date/component.tsx @@ -1,5 +1,5 @@ import type { JSX } from '@stencil/core'; -import { MsgPropType, propagateFocus, showExpertSlot } from '@public-ui/schema'; +import { type MsgPropType, propagateFocus, showExpertSlot } from '@public-ui/schema'; import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core'; import { nonce } from '../../utils/dev.utils'; diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx index b247c6d7a3..67a19dc775 100644 --- a/packages/components/src/components/input/component.tsx +++ b/packages/components/src/components/input/component.tsx @@ -1,5 +1,5 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ -import { handleSlotContent, MsgPropType, showExpertSlot } from '@public-ui/schema'; +import { handleSlotContent, type MsgPropType, showExpertSlot } from '@public-ui/schema'; import type { JSX } from '@stencil/core'; import { Component, Element, Fragment, Host, Prop, h } from '@stencil/core'; @@ -46,7 +46,7 @@ export class KolInput implements Props { } public render(): JSX.Element { - const isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._label && this._msg._label?.length > 0); + const isMessageValidError = Boolean(this._msg?._type === 'error' && this._msg._description && this._msg._description?.length > 0); const hasError = !this._readOnly && isMessageValidError && this._touched === true; const hasExpertSlot = showExpertSlot(this._label); const hasHint = typeof this._hint === 'string' && this._hint.length > 0; diff --git a/packages/components/src/components/input/controller.ts b/packages/components/src/components/input/controller.ts index 1dfc7b0b4f..26896c1350 100644 --- a/packages/components/src/components/input/controller.ts +++ b/packages/components/src/components/input/controller.ts @@ -17,7 +17,7 @@ export const getRenderStates = (state: { hasHint: boolean; ariaDescribedBy: string[]; } => { - const isMessageValidError = Boolean(state._msg?._type === 'error' && state._msg._label && state._msg._label?.length > 0); + const isMessageValidError = Boolean(state._msg?._type === 'error' && state._msg._description && state._msg._description?.length > 0); const hasError = isMessageValidError && state._touched === true; const hasHint = typeof state._hint === 'string' && state._hint.length > 0; diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx index a1065f5a0a..70ce1ffead 100644 --- a/packages/samples/react/src/components/handout/basic.tsx +++ b/packages/samples/react/src/components/handout/basic.tsx @@ -984,7 +984,7 @@ export const HandoutBasic: FC = () => ( diff --git a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx index 9abc501f22..2e472a323e 100644 --- a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx +++ b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx @@ -52,7 +52,7 @@ export const InputCheckboxCases = forwardRef (function InputEmailCases(props, ref) { return (
- + - +
); diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx index f818407059..fa9ce97d4d 100644 --- a/packages/samples/react/src/components/input-number/partials/cases.tsx +++ b/packages/samples/react/src/components/input-number/partials/cases.tsx @@ -11,7 +11,7 @@ export const InputNumberCases = forwardRef(function InputPasswordCases(props, ref) { return (
- + (

Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich.

- + ); diff --git a/packages/samples/react/src/components/input-range/partials/cases.tsx b/packages/samples/react/src/components/input-range/partials/cases.tsx index 715323a330..09126f990b 100644 --- a/packages/samples/react/src/components/input-range/partials/cases.tsx +++ b/packages/samples/react/src/components/input-range/partials/cases.tsx @@ -12,7 +12,7 @@ export const InputRangeCases = forwardRef diff --git a/packages/samples/react/src/components/input-text/hide-errors.tsx b/packages/samples/react/src/components/input-text/hide-errors.tsx index 9cf61ac028..d6a2b40e70 100644 --- a/packages/samples/react/src/components/input-text/hide-errors.tsx +++ b/packages/samples/react/src/components/input-text/hide-errors.tsx @@ -9,7 +9,7 @@ export const InputTextHideErrors: FC = () => ( This case shows the _hideError feature in the se. You can use the _error prop to show an error message. - +
@@ -17,8 +17,8 @@ export const InputTextHideErrors: FC = () => ( This is a combined error message - - + +
diff --git a/packages/samples/react/src/components/input-text/partials/cases.tsx b/packages/samples/react/src/components/input-text/partials/cases.tsx index 1e570ead2e..ab93a1c20d 100644 --- a/packages/samples/react/src/components/input-text/partials/cases.tsx +++ b/packages/samples/react/src/components/input-text/partials/cases.tsx @@ -11,7 +11,7 @@ export const InputTextCases = forwardRef - + diff --git a/packages/samples/react/src/components/select/partials/cases.tsx b/packages/samples/react/src/components/select/partials/cases.tsx index 5c07906a6c..08fc8e1293 100644 --- a/packages/samples/react/src/components/select/partials/cases.tsx +++ b/packages/samples/react/src/components/select/partials/cases.tsx @@ -59,7 +59,7 @@ export const SelectCases = forwardRef - + diff --git a/packages/samples/react/src/components/textarea/counter.tsx b/packages/samples/react/src/components/textarea/counter.tsx index 09d11ee8a0..e481965719 100644 --- a/packages/samples/react/src/components/textarea/counter.tsx +++ b/packages/samples/react/src/components/textarea/counter.tsx @@ -9,6 +9,12 @@ export const TextareaCounter: FC = () => (

Hier ist ein Beispiel für eine Freitextfeld mit Zeichenzähler.

- + ); diff --git a/packages/samples/react/src/components/textarea/disabled.tsx b/packages/samples/react/src/components/textarea/disabled.tsx index 5ecc80e1bc..9f7a6bf17e 100644 --- a/packages/samples/react/src/components/textarea/disabled.tsx +++ b/packages/samples/react/src/components/textarea/disabled.tsx @@ -11,7 +11,12 @@ export const TextareaDisabled: FC = () => (

Hier ist ein Beispiel für ein deaktiviertes Textfeld.

- + ); diff --git a/packages/samples/react/src/components/textarea/partials/cases.tsx b/packages/samples/react/src/components/textarea/partials/cases.tsx index 0d63154a8c..91a61eb7bd 100644 --- a/packages/samples/react/src/components/textarea/partials/cases.tsx +++ b/packages/samples/react/src/components/textarea/partials/cases.tsx @@ -8,7 +8,7 @@ import type { Components } from '@public-ui/components'; export const TextareaCases = forwardRef(function TextareaCases(props, ref) { return (
- +
); diff --git a/packages/samples/react/src/components/textarea/readonly.tsx b/packages/samples/react/src/components/textarea/readonly.tsx index bc312d4959..1220a0976b 100644 --- a/packages/samples/react/src/components/textarea/readonly.tsx +++ b/packages/samples/react/src/components/textarea/readonly.tsx @@ -11,7 +11,12 @@ export const TextareaReadOnly: FC = () => (

Hier ist ein Beispiel für ein Textfeld, in das nicht geschrieben werden kann.

- + ); diff --git a/packages/schema/src/props/msg.ts b/packages/schema/src/props/msg.ts index 3148a8afd3..1fedee3aec 100644 --- a/packages/schema/src/props/msg.ts +++ b/packages/schema/src/props/msg.ts @@ -3,7 +3,9 @@ import type { AlertProps } from '../components'; import { watchValidator } from '../utils'; /* types */ -export type MsgPropType = AlertProps; +export type MsgPropType = AlertProps & { + _description: string; +}; /** * Defines the properties for a message rendered as Alert component.