feat: add max and min rows controls to textarea storybook

oramasearch · Jul 5, 2024 · 0d2c5ca · 0d2c5ca
1 parent 59fd258
commit 0d2c5ca
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 6 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -83,5 +83,11 @@
   },
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/apps/storybook/stories/textarea.stories.tsx b/apps/storybook/stories/textarea.stories.tsx
@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/html'
+import { h } from 'jsx-dom'
 
 const meta = {
   title: 'Internal/Form',
@@ -10,8 +11,15 @@ type Story = StoryObj
 
 export const TextArea: Story = {
   render: (args) =>
-    `<orama-textarea name='test1' label='Small size input' size='small' placeholder='Blablablbal' max-rows='5'></orama-textarea>`,
+    `
+  <orama-textarea placeholder='What do you want to learn about Orama?' max-rows=${args.maxRows} min-rows=${args.minRows} style="width: 600px;">
+    <div slot="adornment-start">BTN</div>
+    <div slot="adornment-end">BTN</div>
+  </orama-textarea>
+  `,
   args: {
-    placeholder: 'Name'
+    placeholder: 'Name',
+    maxRows: 5,
+    minRows: 1
   }
 }
diff --git a/packages/ui-stencil/src/components/orama-textarea/orama-textarea.scss b/packages/ui-stencil/src/components/orama-textarea/orama-textarea.scss
@@ -1,7 +1,68 @@
 :host {
-  display: block;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      padding: var(--spacing-m, $spacing-m) 0;
+
+      border-radius: var(--radius-m, 12px) var(--radius-m, 12px) 0px 0px;
+      border: 1px solid var(--background-background-color-tertiary, #333);
+      background: var(--background-color-secondary, background-color('secondary'));
+      color: var(--text-color-secondary, text-color('secondary'));
+}
+
+::slotted([slot='adornment-start']) {
+      position: absolute;
+      left: 0;
+      top: 0;
+      padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
+}
+
+::slotted([slot='adornment-end']) {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
 }
 
 textarea {
-  resize: none
+      left: 0;
+      right: 0;
+      // TODO: Fix hardcoded padding
+      padding: 0 54px;
+      resize: none;
+      border: none;
+      outline: none;
+      background: none;
+      margin: 0;
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+      font-family: inherit;
+      width: 100%;
+
+      transition: max-height 0.2s;
+
+      &::placeholder {
+            color: var(--text-color-inactive, text-color('inactive'));
+      }
+
+      &:focus {
+            border-color: var(--border-color-accent, border-color('accent'));
+            outline: none;
+      }
+
+      &::-webkit-scrollbar {
+            width: 0.2em;
+      }
+      &::-webkit-scrollbar-track {
+            background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+            background-color: #ffffff85;
+            border-radius: 8px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+            background-color: #ffffff85;
+      }
 }
diff --git a/packages/ui-stencil/src/components/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/orama-textarea/orama-textarea.tsx
@@ -22,6 +22,20 @@ export class OramaTextarea {
     this.syncHeight()
   }
 
+  // TODO: Use to calculate adornment width later
+  getNamedSlotWidth(slotName: string) {
+    const slot = this.el.shadowRoot.querySelector(`slot[name="${slotName}"]`) as HTMLSlotElement
+    if (slot) {
+      const assignedElements = slot.assignedElements()
+      if (assignedElements.length > 0) {
+        const firstAssignedElement = assignedElements[0] as HTMLElement
+        const width = firstAssignedElement.offsetWidth
+        return width
+      }
+    }
+    return 0
+  }
+
   @Watch('value')
   @Watch('maxRows')
   @Watch('minRows')
@@ -110,18 +124,23 @@ export class OramaTextarea {
   }
 
   render() {
-    console.log(this.getAllProps())
     return (
       <Host>
+        {/* TODO: We should calculate the adormnent width dinamically and apply the appding to the textarea  */}
+        <slot name="adornment-start" />
         <textarea
           {...this.getAllProps()}
           value={this.value}
           onInput={this.handleChange}
           ref={(el) => (this.textarea = el as HTMLTextAreaElement)}
           rows={Number(this.minRows)}
-          style={{ height: this.height ? `${this.height}px` : undefined }}
+          style={{
+            height: this.height ? `${this.height}px` : undefined
+          }}
           placeholder={this.placeholder}
         />
+        {/* TODO: We should calculate the adormnent width dinamically and apply the appding to the textarea  */}
+        <slot name="adornment-end" />
 
         {/* Textare below should be hidden from the user and it's used to calculate the height of the textarea */}
         {/* biome-ignore lint/a11y/noAriaHiddenOnFocusable: This component shouldn't be focusable */}