feat: add field-sizing for input and textarea

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

@@ -211,6 +211,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}

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

@@ -180,6 +180,7 @@ 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}

packages/components/src/shared/model.ts

@@ -316,6 +316,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
@@ -341,6 +344,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 = {

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

@@ -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/styles/internal/_scrollbar.scss

@@ -7,6 +7,12 @@
 $scrollbar-width: helpers.px-to-rem(8);
 
 %scrollbar {
+	&[data-field-sizing="content"] {
+		@supports (field-sizing: content) {
+			scrollbar-width: none;
+		}
+	}
+
 	&::-webkit-scrollbar {
 		@extend %default-transition;
 

showcases/react-showcase/src/components/form/index.tsx

@@ -73,6 +73,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"