feat: add field-sizing for input and textarea (#4254)

* feat: add field-sizing for input and textarea

* Update model.ts

* feat: add showResizer to align with design

* chore: update snapshots

---------

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>

Author: nmerget

__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -207,6 +207,7 @@ export default function DBInput(props: DBInputProps) {
 			<input
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
+				data-field-sizing={props.fieldSizing}
 				ref={_ref}
 				id={state._id}
 				name={props.name}

__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -34,6 +34,12 @@ export type DBTextareaDefaultProps = {
 	 * In most browsers, textareas are resizable — you'll notice the drag handle in the right-hand corner, you can control it with this
 	 */
 	resize?: TextareaResizeType;
+
+	/**
+	 * Show/Hides drag handle in the right-hand corner - default: true
+	 */
+	showResizer?: boolean | string;
+
 	/**
 	 * The number of visible text lines for the control. If it is specified, it must be a positive integer
 	 */

__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -176,9 +176,11 @@ export default function DBTextarea(props: DBTextareaProps) {
 			<textarea
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
+				data-field-sizing={props.fieldSizing}
 				ref={_ref}
 				id={state._id}
 				data-resize={props.resize}
+				data-hide-resizer={getHideProp(props.showResizer ?? true)}
 				disabled={getBoolean(props.disabled, 'disabled')}
 				required={getBoolean(props.required, 'required')}
 				readOnly={

__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -8,20 +8,27 @@
 @use "../../styles/internal/scrollbar";
 
 %resize-textarea {
-	&[data-resize="none"] {
+	&[data-hide-resizer="true"] {
 		resize: none;
 	}
 
-	&[data-resize="both"] {
-		resize: both;
-	}
+	// TODO: Consolidate data-hide-resizer and data-resize attributes in the future
+	&:not([data-hide-resizer="true"]) {
+		&[data-resize="none"] {
+			resize: none;
+		}
 
-	&[data-resize="horizontal"] {
-		resize: horizontal;
-	}
+		&[data-resize="both"] {
+			resize: both;
+		}
 
-	&[data-resize="vertical"] {
-		resize: vertical;
+		&[data-resize="horizontal"] {
+			resize: horizontal;
+		}
+
+		&[data-resize="vertical"] {
+			resize: vertical;
+		}
 	}
 }
 

__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -312,6 +312,9 @@ export type FormProps = CustomFormProps &
 	ShowLabelProps &
 	ValueProps;
 
+export const FieldSizingList = ['fixed', 'content'] as const;
+export type FieldSizingType = (typeof FieldSizingList)[number];
+
 export type FormTextProps = {
 	/**
 	 * Maximum length (number of characters) of value
@@ -337,6 +340,12 @@ export type FormTextProps = {
 	 * The disabled attribute can be set to keep a user from edit on the form element
 	 */
 	readonly?: boolean | string;
+
+	/**
+	 * Adds shrinkwrap for input and textarea: https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
+	 * Note: Only supported in Chromium browsers so far
+	 */
+	fieldSizing?: FieldSizingType;
 };
 
 export type FormSizeProps = {

__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png

@@ -363,6 +363,17 @@ $input-valid-types:
 			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 		}
 
+		&:is(input, textarea) {
+			/* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
+			&[data-field-sizing="content"] {
+				field-sizing: content;
+			}
+
+			&[data-field-sizing="fixed"] {
+				field-sizing: fixed;
+			}
+		}
+
 		&:is(input, textarea):not(:disabled):read-only {
 			background-color: var(
 				--db-textarea-read-only,

packages/components/src/components/input/input.lite.tsx

@@ -7,6 +7,15 @@
 $scrollbar-width: helpers.px-to-rem(8);
 
 %scrollbar {
+	&[data-field-sizing="content"] {
+		&:is([data-hide-resizer="true"], [data-resize="none"]) {
+			@supports (field-sizing: content) {
+				/* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
+				scrollbar-width: none;
+			}
+		}
+	}
+
 	&::-webkit-scrollbar {
 		@extend %default-transition;
 

packages/components/src/components/textarea/model.ts

@@ -26,6 +26,8 @@
 			[invalidMessage]="exampleProps?.invalidMessage"
 			[validMessage]="exampleProps?.validMessage"
 			[validation]="exampleProps?.validation"
+			[showResizer]="exampleProps?.showResizer"
+			[fieldSizing]="exampleProps?.fieldSizing"
 		></db-textarea>
 	</ng-template>
 </app-default-component>

packages/components/src/components/textarea/textarea.lite.tsx

@@ -72,6 +72,12 @@ const FormComponent = () => {
 		<div className="form-container">
 			<div>
 				<form>
+					<DBTextarea
+						label="test"
+						placeholder="fieldsizing"
+						resize="none"
+						fieldSizing="content"></DBTextarea>
+
 					<DBCustomSelect
 						options={[{ value: 'Option 1' }, { value: 'Option 2' }]}
 						label="Test"

packages/components/src/components/textarea/textarea.scss

@@ -22,7 +22,9 @@ const getTextarea = ({
 	showMessage,
 	validMessage,
 	validation,
-	invalidMessage
+	invalidMessage,
+	fieldSizing,
+	showResizer
 }: DBTextareaProps) => {
 	const [dynamicValue, setDynamicValue] = useState<string>(value);
 	return (
@@ -45,6 +47,8 @@ const getTextarea = ({
 			invalidMessage={invalidMessage}
 			validMessage={validMessage}
 			validation={validation}
+			showResizer={showResizer}
+			fieldSizing={fieldSizing}
 		/>
 	);
 };

packages/components/src/shared/model.ts

@@ -210,6 +210,46 @@
 			}
 		]
 	},
+	{
+		"name": "Show Resizer",
+		"examples": [
+			{
+				"name": "(Default) True",
+				"props": {
+					"label": "Label",
+					"showResizer": true
+				}
+			},
+			{
+				"name": "False",
+				"props": {
+					"label": "Label",
+					"showResizer": false
+				}
+			}
+		]
+	},
+	{
+		"name": "Field Sizing",
+		"examples": [
+			{
+				"name": "(Default) Fixed",
+				"style": { "width": "300px" },
+				"props": {
+					"label": "Label",
+					"fieldSizing": "fixed"
+				}
+			},
+			{
+				"name": "Content",
+				"style": { "width": "300px" },
+				"props": {
+					"label": "Label",
+					"fieldSizing": "content"
+				}
+			}
+		]
+	},
 	{
 		"name": "Examples Floating Label",
 		"examples": [

packages/components/src/styles/internal/_form-components.scss

@@ -25,6 +25,8 @@ import { DBCheckbox, DBInput, DBTextarea } from "../../../../../output/vue/src";
 				:invalidMessage="exampleProps?.invalidMessage"
 				:validMessage="exampleProps?.validMessage"
 				:validation="exampleProps?.validation"
+				:showResizer="exampleProps?.showResizer"
+				:fieldSizing="exampleProps?.fieldSizing"
 			></DBTextarea>
 		</template>
 	</DefaultComponent>