feat: support cols and rows properties for utrecht-textarea

.changeset/itchy-seals-tan.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/web-component-library-stencil": minor
+---
+
+support `cols` and `rows` properties for `utrecht-textarea` and `utrecht-form-field-textarea` web components

packages/storybook-web-component/src/Textarea.stories.tsx

@@ -10,32 +10,38 @@ import { designTokenStory } from './design-token-story';
 
 interface TextareaStoryProps {
   autocomplete?: string;
+  cols?: number;
   spellcheck?: boolean;
   disabled?: boolean;
   invalid?: boolean;
   placeholder?: string;
   readOnly?: boolean;
   required?: boolean;
+  rows?: number;
   value?: boolean;
 }
 
 const TextareaStory = ({
   autocomplete,
+  cols,
   disabled,
   invalid,
   placeholder,
   readOnly,
   required,
+  rows,
   spellcheck,
   value,
 }: TextareaStoryProps) => (
   <UtrechtTextarea
     autocomplete={autocomplete || null}
+    cols={cols || null}
     disabled={disabled || null}
     invalid={invalid || null}
     placeholder={placeholder || null}
     readOnly={readOnly || null}
     required={required || null}
+    rows={rows || null}
     spellcheck={spellcheck}
     value={value}
   ></UtrechtTextarea>
@@ -51,6 +57,10 @@ const meta = {
       control: 'select',
       options: ['', 'off', 'on', 'street-address'],
     },
+    cols: {
+      description: 'Cols',
+      control: 'number',
+    },
     disabled: {
       description: 'Disabled',
       control: 'boolean',
@@ -71,6 +81,10 @@ const meta = {
       description: 'Required',
       control: 'boolean',
     },
+    rows: {
+      description: 'Rows',
+      control: 'number',
+    },
     spellcheck: {
       description: 'Spellcheck',
       control: 'select',
@@ -86,11 +100,13 @@ const meta = {
     },
   },
   args: {
+    cols: 20,
     disabled: false,
     invalid: false,
     placeholder: '',
     readOnly: false,
     required: false,
+    rows: 2,
     value: '',
   },
   tags: ['autodocs'],

packages/web-component-library-stencil/src/components.d.ts

@@ -136,13 +136,15 @@ export namespace Components {
     interface UtrechtFormFieldErrorMessage {
     }
     interface UtrechtFormFieldTextarea {
+        "cols": number;
         "disabled": boolean;
         "invalid": boolean;
         "label": string;
         "name": string;
         "placeholder": string;
         "readOnly": boolean;
         "required": boolean;
+        "rows": number;
         "value": string;
     }
     interface UtrechtFormFieldTextbox {
@@ -704,11 +706,13 @@ export namespace Components {
     }
     interface UtrechtTextarea {
         "autocomplete": string;
+        "cols": number;
         "disabled": boolean;
         "invalid": boolean;
         "placeholder": string;
         "readOnly": boolean;
         "required": boolean;
+        "rows": number;
         "spellcheck": boolean;
         "value": string;
     }
@@ -2928,6 +2932,7 @@ declare namespace LocalJSX {
     interface UtrechtFormFieldErrorMessage {
     }
     interface UtrechtFormFieldTextarea {
+        "cols"?: number;
         "disabled"?: boolean;
         "invalid"?: boolean;
         "label"?: string;
@@ -2939,6 +2944,7 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         "readOnly"?: boolean;
         "required"?: boolean;
+        "rows"?: number;
         "value"?: string;
     }
     interface UtrechtFormFieldTextbox {
@@ -3508,6 +3514,7 @@ declare namespace LocalJSX {
     }
     interface UtrechtTextarea {
         "autocomplete"?: string;
+        "cols"?: number;
         "disabled"?: boolean;
         "invalid"?: boolean;
         "onUtrechtBlur"?: (event: UtrechtTextareaCustomEvent<any>) => void;
@@ -3517,6 +3524,7 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         "readOnly"?: boolean;
         "required"?: boolean;
+        "rows"?: number;
         "spellcheck"?: boolean;
         "value"?: string;
     }

packages/web-component-library-stencil/src/components/form-field-textarea.tsx

@@ -6,28 +6,33 @@
 import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';
 import clsx from 'clsx';
 
+const HTML_DEFAULT_COLS = 20;
+const HTML_DEFAULT_ROWS = 2;
+
 @Component({
   tag: 'utrecht-form-field-textarea',
   styleUrl: 'form-field-textarea.scss',
   shadow: true,
 })
 export class FormFieldTextarea {
   @Element() hostElement!: HTMLElement;
+  @Prop() cols: number = HTML_DEFAULT_COLS;
   @Prop({ reflect: true }) disabled: boolean = false;
   @Prop({ reflect: true }) invalid: boolean = false;
   @Prop() label: string = '';
   @Prop() name: string = '';
   @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;
   @Prop() placeholder: string = '';
   @Prop({ reflect: true }) required: boolean = false;
+  @Prop() rows: number = HTML_DEFAULT_ROWS;
   @Prop() value: string = '';
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;
   @Event() utrechtInput: EventEmitter;
 
   render() {
-    const { disabled, hostElement, invalid, label, name, placeholder, readOnly, required, value } = this;
+    const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;
 
     let input = hostElement.querySelector('input[type="hidden"]') as HTMLInputElement | null;
 
@@ -77,10 +82,12 @@ export class FormFieldTextarea {
               readOnly && 'utrecht-textarea--readonly',
             )}
             aria-invalid={invalid}
+            cols={cols !== HTML_DEFAULT_COLS ? cols : null}
             disabled={disabled}
             placeholder={placeholder || null}
             readonly={readOnly}
             required={required}
+            rows={rows !== HTML_DEFAULT_ROWS ? rows : null}
             onBlur={(evt) => this.utrechtBlur.emit(evt)}
             onChange={(evt) => this.utrechtChange.emit(evt)}
             onFocus={(evt) => this.utrechtFocus.emit(evt)}

packages/web-component-library-stencil/src/components/textarea.tsx

@@ -6,27 +6,42 @@
 import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
 import clsx from 'clsx';
 
+/**
+ * I would prefer to set `rows` and `cols` only when the properties are actually set,
+ * and explicitly configure them when they are set.
+ *
+ * Currently Stencil offers no way to detect of the property value is the default value.
+ * `this.hasOwnProperty('cols')` does not work, for example.
+ *
+ * As a workaround, there is a check if `cols` and `rows` are equal to the
+ * `<textarea>` defaults of `2` and `20`.
+ */
+const HTML_DEFAULT_COLS = 20;
+const HTML_DEFAULT_ROWS = 2;
+
 @Component({
   tag: 'utrecht-textarea',
   styleUrl: 'textarea.scss',
   shadow: true,
 })
 export class Textarea {
   @Prop() autocomplete: string = '';
+  @Prop() cols: number = HTML_DEFAULT_COLS;
   @Prop() spellcheck: boolean = false;
   @Prop({ reflect: true }) disabled: boolean = false;
   @Prop({ reflect: true }) invalid: boolean = false;
   @Prop() placeholder: string = '';
   @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;
   @Prop({ reflect: true }) required: boolean = false;
+  @Prop() rows: number = HTML_DEFAULT_ROWS;
   @Prop() value: string = '';
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;
   @Event() utrechtInput: EventEmitter;
 
   render() {
-    const { autocomplete, disabled, invalid, placeholder, readOnly, required, spellcheck, value } = this;
+    const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
 
     return (
       <textarea
@@ -38,11 +53,13 @@ export class Textarea {
           invalid && 'utrecht-textarea--invalid',
           readOnly && 'utrecht-textarea--readonly',
         )}
+        cols={cols !== HTML_DEFAULT_COLS ? cols : null}
         disabled={disabled}
         placeholder={placeholder || null}
         readonly={readOnly}
         required={required}
         spellcheck={spellcheck || null}
+        rows={rows !== HTML_DEFAULT_ROWS ? rows : null}
         value={value}
         onBlur={(evt) => this.utrechtBlur.emit(evt)}
         onChange={(evt) => this.utrechtChange.emit(evt)}