refactor: guidelines 3.0 input style

docs/migrationGuide.adoc

@@ -36,6 +36,13 @@ We've remove the deprecated previous HTML implementation of the label by an `out
 - The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself:
 `aria-describedby="{{ id }}-label"`
 
+=== `input`
+
+- The input background style variations `semitransparent`, `solid`, `white` and `outline` have been removed. Input fields have only one background style left. 
+- Introducing 3 different sizes of input fields according to our `tonality` introduction: `functional`, `regular`, `expressive
+- Integration of `data-icon-before` and `data-icon-after` property for enabling use of custom icons in input fields
+- Introducing new variations: `error`, `warning`, `success` and `information` following the new guidelines 3.0 color system
+
 == DB UI Core 2.2.0 Migration Guide
 
 === progress element

helpers/unique-id.js

@@ -0,0 +1,18 @@
+/* eslint unicorn/prefer-module: 0, eqeqeq: 0 */
+module.exports = function (Handlebars) {
+	Handlebars.registerHelper('unique-id', function () {
+		// Adapted from https://www.codingdeft.com/posts/generate-uuid-javascript/
+		const crypto = require('node:crypto');
+
+		const buf = crypto.randomBytes(16);
+
+		// Convert the buffer to a hexadecimal string
+		const hex = buf.toString('hex');
+
+		// Return the hexadecimal string as a UUID
+		return `id-${hex.slice(
+			0,
+			7
+		)}-${hex.slice(8, 15)}-${hex.slice(16, 23)}-${hex.slice(24, 31)}`;
+	});
+};

source/_patterns/01-elements/_form-element.scss

@@ -0,0 +1 @@
+// TODO common styles for formfields adopted from input

source/_patterns/01-elements/input/input-sizes.hbs

@@ -0,0 +1,6 @@
+<dl>
+{{#each sizes}}
+	<dt>{{size}}:</dt>
+	<dd class="db-ui-{{size}}">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+{{/each }}
+</dl>

source/_patterns/01-elements/input/input-sizes.json

@@ -0,0 +1,19 @@
+{
+	"sizes": [
+		{
+			"size": "functional",
+			"label": "Functional"
+		},
+		{
+			"size": "regular",
+			"label": "Regular (default, data-size attribute is optional)"
+		},
+		{
+			"size": "expressive",
+			"label": "Expressive"
+		}
+	],
+	"type": "text",
+	"placeholder": "e.g. DB User",
+	"label": "Textlabel"
+}

source/_patterns/01-elements/input/input-sizes.md

@@ -0,0 +1,4 @@
+---
+title: Input sizes
+order: 1
+---

source/_patterns/01-elements/input/input-variations.hbs

@@ -1,6 +1,10 @@
-<dl>
+<dl class="db-ui-normal">
 {{#each variations}}
 	<dt>{{variant}}:</dt>
-	<dd>{{> elements-input type=../type label=../label placeholder=../placeholder }}</dd>
+	<dd class="db-ui-functional">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+	<dt>&nbsp;</dt>
+	<dd class="db-ui-normal">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
+	<dt>&nbsp;</dt>
+	<dd class="db-ui-expressive">{{> elements-input type=../type label=../label placeholder=../placeholder id=(unique-id) }}</dd>
 {{/each }}
 </dl>

source/_patterns/01-elements/input/input-variations.json

@@ -1,20 +1,24 @@
 {
 	"variations": [
 		{
-			"variant": "semitransparent",
-			"id": "input16"
+			"variant": "error",
+			"message": "Error Message",
+			"description": "Error Message Description"
 		},
 		{
-			"variant": "white",
-			"id": "input17"
+			"variant": "warning",
+			"message": "Warning Message",
+			"description": "Warning Message Description"
 		},
 		{
-			"variant": "solid",
-			"id": "input18"
+			"variant": "success",
+			"message": "Success Message",
+			"description": "Success Message Description"
 		},
 		{
-			"variant": "outline",
-			"id": "input19"
+			"variant": "information",
+			"message": "Information",
+			"description": "Information Message Description"
 		}
 	],
 	"type": "text",

source/_patterns/01-elements/input/input.demonstration.scss

@@ -1,6 +1,12 @@
 [id|="elements-input"] {
+	dl {
+		display: grid;
+		grid-template-columns: 1fr 5fr;
+		align-items: center;
+	}
+
 	dd {
-		margin-bottom: 2rem;
+		margin: 1rem 0;
 	}
 }
 

source/_patterns/01-elements/input/input.hbs

@@ -1,25 +1,34 @@
-<!-- The aria-labelledby attribute on the input and related id on the label as well as aria-hidden="true" are being set for correct support within assistive tools like screenreaders //-->
-<!-- [html-validate-disable-next input-missing-label] -->
-<input type="{{ type }}"
-	class="elm-input {{ styleModifier }}"
-	placeholder="{{ placeholder }}"
-	name="{{ id }}"
-	id="{{ id }}"
-	{{#if disabled}} disabled{{/if }}
-	value="{{ value }}"
-	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
-	{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
-	{{{ validation }}}
-	{{#if datalist }} list="datalist{{ id }}"{{/if }}
-	aria-labelledby="{{ id }}-label"
-	{{#if variant}} data-variant="{{variant}}"{{/if }}>
-<label class="elm-label"
-	for="{{ id }}"
-	aria-hidden="true"
-	id="{{ id }}-label">{{ label }}</label>
-{{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
-{{#if datalist }}<datalist id="datalist{{ id }}">
-	{{#each datalistItems }}
-		<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
-	{{/each }}
-</datalist>{{/if }}
+<div class="elm-input"
+	{{#if variant}} data-variant="{{variant}}"{{/if }}
+	{{#if icon-before}} data-icon-before="{{icon-before}}"{{/if}}
+	{{#if icon-before}} data-icon-after="{{icon-after}}"{{/if}}>
+	<!-- The aria-labelledby attribute on the input and related id on the label as well as aria-hidden="true" are being set for correct support within assistive tools like screenreaders //-->
+	<!-- [html-validate-disable-next input-missing-label] -->
+	<input type="{{ type }}"
+		{{#if styleModifier }}class="{{ styleModifier }}"{{/if }}
+		placeholder="{{ placeholder }}"
+		name="{{ id }}"
+		id="{{ id }}"
+		{{#if disabled}} disabled{{/if }}
+		value="{{ value }}"
+		{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
+		{{#if aria-invalid }} aria-invalid="{{ aria-invalid }}"{{/if }}
+		{{{ validation }}}
+		{{#if datalist }} list="datalist{{ id }}"{{/if }}
+		aria-labelledby="{{ id }}-label">
+	<label for="{{ id }}"
+		aria-hidden="true"
+		id="{{ id }}-label">{{ label }}</label>
+
+	{{#if description }}<p{{#if describedbyid }} id="{{ describedbyid }}"{{/if }} class="description">{{{ description }}}</p>{{/if }}
+
+	{{#if datalist }}<datalist id="datalist-{{ id }}">
+		{{#each datalistItems }}
+			<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
+		{{/each }}
+	</datalist>
+	{{/if }}
+
+	{{!-- icon for data-variants like error or success --}}
+	<span class="elm-state-icon"></span>
+</div>