(#6338, #6400) update input styles (bmf) (#6284)

public-ui · May 14, 2024 · 4e19035 · 4e19035
2 parents cd278b4 + 1243b0c
commit 4e19035
Show file tree

Hide file tree

Showing 23 changed files with 749 additions and 5,003 deletions.
diff --git a/packages/samples/react/src/components/input-checkbox/partials/cases.tsx b/packages/samples/react/src/components/input-checkbox/partials/cases.tsx
@@ -11,6 +11,13 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Nicht ausgewählt" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Ausgewählt" _tooltipAlign="right" _value={true} />
+			<KolInputCheckbox
+				{...props}
+				_checked
+				_icons={{ unchecked: 'codicon codicon-close' }}
+				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_value={true}
+			/>
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />

diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx
@@ -24,6 +24,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 					},
 				}}
 			/>
+			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
 			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />

diff --git a/packages/samples/react/src/components/input-password/show-password.tsx b/packages/samples/react/src/components/input-password/show-password.tsx
@@ -44,6 +44,25 @@ export const InputPasswordShowPassword: FC = () => {
 					}}
 					className="block"
 				/>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+					_disabled
+				/>
 			</KolForm>
 		</>
 	);

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', _description: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test überschrift' }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -37,6 +37,8 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
 			<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)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'success', _description: 'Erfolgsmeldung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Mit Counter" _hasCounter _maxLength={10} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />

diff --git a/packages/samples/react/src/components/textarea/partials/cases.tsx b/packages/samples/react/src/components/textarea/partials/cases.tsx
@@ -10,6 +10,9 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 		<div className="grid gap-4">
 			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
+			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);
 });
diff --git a/packages/themes/bmf/src/components/alert.scss b/packages/themes/bmf/src/components/alert.scss
@@ -227,6 +227,7 @@
 		}
 
 		> .content {
+			color: var(--color-black);
 			padding: 1rem;
 			max-height: 9.5rem;
 			overflow-y: auto;