Introduce now msg property 'description'

public-ui · Mar 15, 2024 · 419397e · 419397e
1 parent b183a37
commit 419397e
Show file tree

Hide file tree

Showing 25 changed files with 55 additions and 39 deletions.
diff --git 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
@@ -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
@@ -26,5 +26,7 @@ export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _
 			'visually-hidden': _hideError === true,
 		}}
 		{..._msg}
-	></kol-alert-wc>
+	>
+		{_msg?._description || undefined}
+	</kol-alert-wc>
 );
diff --git 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
@@ -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
@@ -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
@@ -984,7 +984,7 @@ export const HandoutBasic: FC = () => (
 						<KolInputDate _type="date" _label={`Datum`} />
 						<KolInputEmail
 							_icons="{'left': 'codicon codicon-home'}"
-							_msg={{ _type: 'error', _label: 'Test einer Fehlermeldung' }}
+							_msg={{ _type: 'error', _description: 'Test einer Fehlermeldung' }}
 							_touched
 							_label={`E-Mail-Adresse`}
 						/>

diff --git 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<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
 			<KolInputCheckbox
 				{...props}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}

diff --git a/packages/samples/react/src/components/input-color/partials/cases.tsx b/packages/samples/react/src/components/input-color/partials/cases.tsx
@@ -10,7 +10,7 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 		<div className="grid gap-4">
 			<KolInputColor
 				{...props}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_icons={{
 					left: 'codicon codicon-symbol-color',
 				}}
@@ -19,7 +19,7 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 			/>
 			<KolInputColor
 				{...props}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Color with error"
 				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
 				_touched

diff --git a/packages/samples/react/src/components/input-date/partials/cases.tsx b/packages/samples/react/src/components/input-date/partials/cases.tsx
@@ -14,7 +14,7 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 				{...props}
 				_step={1}
 				_type="datetime-local"
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Local-Datetime (mit Sekunden)"
 				_required
 				_touched

diff --git a/packages/samples/react/src/components/input-email/partials/cases.tsx b/packages/samples/react/src/components/input-email/partials/cases.tsx
@@ -8,15 +8,15 @@ import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _label: ERROR_MSG }} _label="E-Mail" />
+			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail" />
 			<KolInputEmail
 				{...props}
 				ref={ref}
 				_accessKey="M"
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (Liste)"
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
 					left: {

diff --git a/packages/samples/react/src/components/input-file/partials/cases.tsx b/packages/samples/react/src/components/input-file/partials/cases.tsx
@@ -11,7 +11,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Datei hochladen"
 				_icons={{
 					left: {
@@ -20,7 +20,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
-			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _label: ERROR_MSG }} _label="Datei hochladen (Multiple)" />
+			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Datei hochladen (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Datei hochladen (Disabled)" />
 		</div>
 	);

diff --git 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<HTMLKolInputNumberElement, Components
 			<KolInputNumber
 				{...props}
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_placeholder="Mit Icons"
 				_label="Zahleneingabe"

diff --git a/packages/samples/react/src/components/input-password/partials/cases.tsx b/packages/samples/react/src/components/input-password/partials/cases.tsx
@@ -8,14 +8,14 @@ import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _label: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword
 				{...props}
 				ref={ref}
 				_accessKey="P"
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_label="Passwort"
 				_icons={{

diff --git a/packages/samples/react/src/components/input-radio/partials/cases.tsx b/packages/samples/react/src/components/input-radio/partials/cases.tsx
@@ -16,7 +16,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
@@ -37,7 +37,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_disabled
 				_orientation="horizontal"
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"

diff --git a/packages/samples/react/src/components/input-radio/select.tsx b/packages/samples/react/src/components/input-radio/select.tsx
@@ -19,7 +19,7 @@ export const InputRadioSelect: FC = () => (
 			<p>Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich. </p>
 		</SampleDescription>
 		<KolForm className="grid gap-4">
-			<KolInputRadio _msg={{ _type: 'error', _label: ERROR_MSG }} _options={options} _label="Anrede" />
+			<KolInputRadio _msg={{ _type: 'error', _description: ERROR_MSG }} _options={options} _label="Anrede" />
 		</KolForm>
 	</>
 );
diff --git 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<HTMLKolInputRangeElement, Components.K
 				{...props}
 				_min={0}
 				_max={50}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Schieberegler"
 				_icons={{
 					left: {
@@ -31,7 +31,7 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_min={0}
 				_max={50}
 				_step={10}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Schieberegler mit Fehler"
 				_touched
 			/>

diff --git a/packages/samples/react/src/components/input-text/hide-errors.tsx b/packages/samples/react/src/components/input-text/hide-errors.tsx
@@ -9,16 +9,16 @@ export const InputTextHideErrors: FC = () => (
 			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
 		</SampleDescription>
 		<KolCard _label="Normal input field with error" _level={0}>
-			<KolInputText _msg={{ _type: 'error', _label: 'Error message' }} _label="Input with error" _touched />
+			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
 		</KolCard>
 		<KolCard _label="Input field with hidden error" _level={0}>
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _msg={{ _type: 'error', _label: 'This is a combined error message' }} _hideError _label="First input" _touched />
-				<KolInputText _msg={{ _type: 'error', _label: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
 			</fieldset>
 		</KolCard>
 	</div>

diff --git 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<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -35,7 +35,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				ref={ref}
 			/>
 			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
-			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _label: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />

diff --git a/packages/samples/react/src/components/select/partials/cases.tsx b/packages/samples/react/src/components/select/partials/cases.tsx
@@ -59,15 +59,15 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _msg={{ _type: 'error', _label: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
 			<KolSelect
 				{...props}
 				_options={COUNTRY_OPTIONS}
 				_label="Mehrfachauswahl mit Fehler"
 				_multiple
 				_required
-				_msg={{ _type: 'error', _label: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 			/>
 		</div>

diff --git 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 = () => (
 		<SampleDescription>
 			<p>Hier ist ein Beispiel für eine Freitextfeld mit Zeichenzähler.</p>
 		</SampleDescription>
-		<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _msg={{ _type: 'error', _label: 'oh no' }} _hint={'Hinweis'} _touched />
+		<KolTextarea
+			_hasCounter={true}
+			_label="Textara mit Counter und Hint und Fehler"
+			_msg={{ _type: 'error', _description: 'oh no' }}
+			_hint={'Hinweis'}
+			_touched
+		/>
 	</>
 );
diff --git 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 = () => (
 			<p>Hier ist ein Beispiel für ein deaktiviertes Textfeld.</p>
 		</SampleDescription>
 		<KolForm>
-			<KolTextarea _disabled _msg={{ _type: 'error', _label: 'Es ist ein Fehler aufgetreten' }} _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+			<KolTextarea
+				_disabled
+				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
+				_value="Kleiner Text im Eingabefeld ..."
+				_label="Texteingabe"
+			/>
 		</KolForm>
 	</>
 );
diff --git 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<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _label: ERROR_MSG }} _label="Text" _touched />
+			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 		</div>
 	);

diff --git 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 = () => (
 			<p>Hier ist ein Beispiel für ein Textfeld, in das nicht geschrieben werden kann.</p>
 		</SampleDescription>
 		<KolForm>
-			<KolTextarea _msg={{ _type: 'error', _label: 'Es ist ein Fehler aufgetreten' }} _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+			<KolTextarea
+				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
+				_readOnly
+				_value="Kleiner Text im Eingabefeld ..."
+				_label="Texteingabe"
+			/>
 		</KolForm>
 	</>
 );
diff --git 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.