refactor(input): added counter (#812)

* refactor: added counter

* docs: added relevant comments

* fix: now it makes sense

* docs: we need to hide this for the moment

especially as it's not positioned correctly

Author: mfranzke

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

@@ -110,3 +110,19 @@
 		--formElement---borderColor: #{$db-color-red-500};
 	}
 }
+
+// counter styling
+%form-element-counter {
+	margin-top: to-rem($pxValue: 12);
+
+	// TODO: add CSS anchor positioning
+
+	// Description styles
+	// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
+	&,
+	& + .description {
+		color: $db-color-cool-gray-500;
+		font-size: to-rem($pxValue: 14);
+		padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
+	}
+}

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

@@ -11,7 +11,9 @@
 	{{{ validation }}}
 	{{#if datalist }} list="datalist{{ id }}"{{/if }}
 	aria-labelledby="{{ id }}-label"
-	{{#if variant}} data-variant="{{variant}}"{{/if }}>
+	{{#if variant}} data-variant="{{variant}}"{{/if }}
+	{{#if maxlength }} maxlength="{{ maxlength }}"
+	oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}>
 <label class="elm-label"
 	for="{{ id }}"
 	aria-hidden="true"
@@ -23,3 +25,4 @@
 		<option{{#if value }} value="{{ value }}"{{/if }}>{{ text }}</option>
 	{{/each }}
 </datalist>{{/if }}
+{{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}

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

@@ -145,6 +145,19 @@
 		@extend %form-element-validation;
 		@extend %form-element-validation-programmatic;
 		/* stylelint-enable order/order */
+
+		&:is(
+				[type="email"],
+				[type="password"],
+				[type="search"],
+				[type="tel"],
+				[type="text"],
+				[type="url"]
+			)
+			+ label
+			+ output {
+			@extend %form-element-counter;
+		}
 	}
 
 	&[type="search"] {

source/_patterns/01-elements/input/input~maxlength.json

@@ -0,0 +1,7 @@
+{
+	"type": "text",
+	"placeholder": "Projekt Name",
+	"id": "input16",
+	"label": "Textlabel",
+	"maxlength": "100"
+}

source/_patterns/01-elements/input/input~maxlength.md

@@ -0,0 +1,9 @@
+---
+title: Input - maxlength
+order: 12
+hidden: true
+---
+
+To set the maximum length of allowed characters on an input element, you could use the `maxlength`-attribute on the input field. This would additionally provide a visual counter.
+
+Please keep in mind that you'll probably have to position the output element yourself in relation to the context of e.g. a wrapping HTML element; we'll have a future solution by CSS Anchor Positioning as well.

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

@@ -6,8 +6,8 @@
 	{{#if disabled}} disabled{{/if }}
 	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
 	{{{ validation }}}
-	{{#if maxlength }} maxlength="{{ maxlength }}"
 	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}
+	{{#if maxlength }} maxlength="{{ maxlength }}"
 	oninput="result_{{ id }}.value=this.value.length+'/'+this.attributes.maxlength.value"{{/if }}
 	{{#if variant}} data-variant="{{variant}}"{{/if }}>{{ value }}</textarea>
 {{#if maxlength }}<output for="{{ id }}" id="result_{{ id }}"></output>{{/if }}

source/_patterns/01-elements/textarea/textarea.scss

@@ -61,21 +61,10 @@
 		}
 	}
 
-	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
 	& + output {
-		// amount of signs output
-		float: right;
-
-		margin-top: to-rem($pxValue: 12);
+		@extend %form-element-counter;
 
-		// Description styles
-		// TODO: This probably still needs to get further changed to a general "hint" pattern or similar
-		&,
-		& + .description {
-			color: $db-color-cool-gray-500;
-			font-size: to-rem($pxValue: 14);
-			padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
-		}
+		float: right;
 	}
 
 	// ### Style variations