use css custom properties for min and max height + update stories

Author: madsrasmussen

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -10,6 +10,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @fires UUITextareaEvent#change on change
  * @fires InputEvent#input on input
  * @fires KeyboardEvent#keyup on keyup
+ * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
+ * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
  */
 export class UUITextareaElement extends LabelMixin(
   'textarea label',
@@ -56,10 +58,11 @@ export class UUITextareaElement extends LabelMixin(
         max-width: 100%;
         font-size: var(--uui-size-5);
         padding: var(--uui-size-2);
-        border: 1px solid
-          var(--uui-textarea-border-color, var(--uui-interface-border));
+        border: 1px solid var(--uui-textarea-border-color, var(--uui-interface-border));
         border-radius: 0;
         outline: none;
+        min-height: var(--uui-textarea-min-height);
+        max-height: var(--uui-textarea-max-height);
       }
       #lengths-container {
         display: flex;
@@ -202,24 +205,6 @@ export class UUITextareaElement extends LabelMixin(
   @property({ type: Boolean, attribute: 'auto-height', reflect: true })
   autoHeight = false;
 
-  /**
-   * Defines the minimum height of the textarea.
-   * @type {string}
-   * @attr
-   * @default ''
-   */
-  @property({ type: String })
-  minHeight: String = '';
-
-  /**
-   * Defines the maximum height of the textarea.
-   * @type {string}
-   * @attr
-   * @default ''
-   */
-  @property({ type: String })
-  maxHeight: String = '';
-
   private onInput(e: Event) {
     this.value = (e.target as HTMLInputElement).value;
     this.dispatchEvent(
@@ -267,6 +252,7 @@ export class UUITextareaElement extends LabelMixin(
       >${this.value ? this.value.length : 0}/${this.maxLength}</span
     >`;
   }
+  
   renderMinLength() {
     const shouldRender = this.minLength - this.value.length > 0;
     return shouldRender
@@ -282,7 +268,6 @@ export class UUITextareaElement extends LabelMixin(
       <textarea
         maxlength=${ifDefined(this.maxLength > 0 ? this.maxLength : undefined)}
         minlength=${this.minLength}
-        style="min-height: ${this.minHeight}; max-height: ${this.maxHeight}"
         id="textarea"
         .value=${this.value}
         .name=${this.name}

packages/uui-textarea/lib/uui-textarea.story.ts

@@ -13,12 +13,11 @@ export default {
 
 export const AAAOverview: Story = props =>
   html`<uui-textarea
+    style="--uui-textarea-min-height: ${props['--uui-textarea-min-height']}; --uui-textarea-max-height: ${props['--uui-textarea-max-height']}"
     .label=${props.label}
     ?auto-height=${props.autoHeight}
     .minLength=${props.minLength}
     .maxLength=${props.maxLength}
-    .minHeight=${props.minHeight}
-    .maxHeight=${props.maxHeight}
     .placeholder=${props.placeholder}
     ?disabled=${props.disabled}
     .name=${props.name}
@@ -27,12 +26,18 @@ export const AAAOverview: Story = props =>
     ?hide-label=${props.hideLabel}></uui-textarea>`;
 
 AAAOverview.storyName = 'Overview';
+
 AAAOverview.args = {
   label: 'Label',
-  maxLength: 200,
-  minHeight: '100px',
-  maxHeight: '200px',
+  '--uui-textarea-min-height': '',
+  '--uui-textarea-max-height': '',
+};
+
+AAAOverview.argTypes = {
+  '--uui-textarea-min-height': { control: { type: 'text' } },
+  '--uui-textarea-max-height': { control: { type: 'text' } },
 };
+
 AAAOverview.parameters = {
   docs: {
     source: {
@@ -41,17 +46,16 @@ AAAOverview.parameters = {
   },
 };
 
+
 export const MaxLength: Story = props =>
-  html`<uui-textarea
-    label="textarea"
-    maxLength=${props.maxLength}></uui-textarea>`;
+  html`<uui-textarea label="Label" maxLength=${props.maxLength}></uui-textarea>`;
 
 MaxLength.args = { maxLength: 20 };
 MaxLength.parameters = {
   controls: { include: ['maxLength'] },
   docs: {
     source: {
-      code: `<uui-textarea label="textarea" maxLength="20"></uui-textarea>`,
+      code: `<uui-textarea label="Label" maxLength="20"></uui-textarea>`,
     },
   },
 };
@@ -74,75 +78,46 @@ export const Placeholder: Story = props =>
     label="Label"
     placeholder=${props.placeholder}></uui-textarea>`;
 
-Placeholder.args = { placeholder: 'I am a placeholder...' };
+Placeholder.args = { placeholder: 'Placeholder...' };
 Placeholder.parameters = {
   controls: { include: ['placeholder'] },
   docs: {
     source: {
-      code: `<uui-textarea
-      label="Label"
-      placeholder="I am a placeholder..."></uui-textarea>`,
+      code: `
+<uui-textarea
+  label="Label"
+  placeholder="Placeholder...">
+</uui-textarea>`,
     },
   },
 };
 
-export const MaxAndMinHeight: Story = props =>
-  html`<uui-textarea
-    label="Label"
-    minHeight=${props.minHeight}
-    maxHeight=${props.maxHeight}></uui-textarea>`;
-
-MaxAndMinHeight.args = { minHeight: '100px', maxHeight: '200px' };
-MaxAndMinHeight.parameters = {
-  controls: { include: ['minHeight', 'maxHeight'] },
-  docs: {
-    source: {
-      code: `<uui-textarea
-      label="Label"
-      minHeight="100px"
-      maxHeight="200px"></uui-textarea>`,
-    },
-  },
-};
-
-export const AutomaticHeightAdjustment: Story = props =>
-  html` the height wil confine itself within the max and min height if defined.
+export const AutoHeight: Story = props =>
+  html`
     <uui-textarea
       label="Label"
+      style="--uui-textarea-min-height: ${props['--uui-textarea-min-height']}; --uui-textarea-max-height: ${props['--uui-textarea-max-height']}"
       ?auto-height=${props.autoHeight}></uui-textarea>`;
 
-AutomaticHeightAdjustment.args = { autoHeight: true };
-AutomaticHeightAdjustment.parameters = {
-  controls: { include: ['autoHeight'] },
-  docs: {
-    source: {
-      code: `<uui-textarea label="Label" auto-height></uui-textarea>`,
-    },
-  },
-};
-
-export const AutomaticHeightAdjustmentWithHeightLimits: Story = props =>
-  html` the height wil confine itself within the max and min height if defined.
-    <uui-textarea
-      label="Label"
-      auto-height
-      minHeight="100px"
-      maxHeight="200px"></uui-textarea>`;
-
-AutomaticHeightAdjustmentWithHeightLimits.args = {
-  minHeight: '100px',
-  maxHeight: '200px',
+AutoHeight.args = { 
   autoHeight: true,
+  '--uui-textarea-min-height': '100px',
+  '--uui-textarea-max-height': '300px',
 };
-AutomaticHeightAdjustmentWithHeightLimits.parameters = {
-  controls: { include: ['minHeight', 'maxHeight', 'autoHeight'] },
+
+AutoHeight.parameters = {
+  controls: { include: ['autoHeight', '--uui-textarea-min-height', '--uui-textarea-max-height'] },
   docs: {
+    description: {
+      story: "The height will confine itself within the max and min height if defined"
+    },
     source: {
-      code: `<uui-textarea
-      label="Label"
-      auto-height
-      minHeight="100px"
-      maxHeight="200px"></uui-textarea>`,
+      code: `<uui-textarea label="Label" style="--uui-textarea-min-height: 100px; --uui-textarea-max-height: 300px;" auto-height></uui-textarea>`,
     },
   },
 };
+
+AutoHeight.argTypes = {
+  '--uui-textarea-min-height': { control: { type: 'text' } },
+  '--uui-textarea-max-height': { control: { type: 'text' } },
+};