feat: calculate padding adornments dynamically

oramasearch · Jul 6, 2024 · b755b6d · b755b6d
1 parent 934d4ae
commit b755b6d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
@@ -1,20 +1,21 @@
-import { defineCustomElements } from "./../../../packages/ui-stencil/loader";
-import "ui-stencil/dist/orama-ui/orama-ui.css";
+import { defineCustomElements } from './../../../packages/ui-stencil/loader'
+import 'ui-stencil/dist/orama-ui/orama-ui.css'
 
-defineCustomElements();
+defineCustomElements()
 
 /** @type { import('@storybook/html').Preview } */
 const preview = {
-  tags: ["autodocs"],
+  tags: ['autodocs'],
+  // TODO: Theme class should be a variable
   decorators: [(story) => `<div id="orama-ui" class="theme-dark">${story()}</div>`],
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
+        date: /Date$/i
+      }
+    }
+  }
+}
 
-export default preview;
+export default preview
diff --git a/apps/storybook/stories/textarea.stories.tsx b/apps/storybook/stories/textarea.stories.tsx
@@ -1,5 +1,4 @@
 import type { StoryObj, Meta } from '@storybook/html'
-import { h } from 'jsx-dom'
 
 const meta = {
   title: 'Internal/Form',
@@ -12,9 +11,9 @@ type Story = StoryObj
 export const TextArea: Story = {
   render: (args) =>
     `
-  <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 placeholder='What do you want to learn about Orama?' max-rows=${args.maxRows} min-rows=${args.minRows} style="width: 600px;" autofocus="true">
+    <div slot="adornment-start"><button>Start</button></div>
+    <div slot="adornment-end"><button>End</button></div>
   </orama-textarea>
   `,
   args: {

diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss
@@ -23,19 +23,21 @@
   position: absolute;
   right: 0;
   top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: var(--spacing-m, $spacing-m) var(--spacing-m, $spacing-m);
 }
 
 textarea {
   left: 0;
   right: 0;
   // TODO: Fix hardcoded padding
-  padding: 0 54px;
+  padding: 0px var(--spacing-m, $spacing-m);
   resize: none;
   border: none;
   outline: none;
   background: none;
-  margin: 0;
   font-size: inherit;
   line-height: inherit;
   color: inherit;

diff --git a/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx b/packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.tsx
@@ -14,12 +14,16 @@ export class OramaTextarea {
   @Prop() placeholder: string
 
   @State() height: number
+  @State() startAdornmentWidth: number
+  @State() endAdornmentWidth: number
 
   textarea!: HTMLTextAreaElement
   shadowTextarea!: HTMLTextAreaElement
 
   componentDidLoad() {
     this.syncHeight()
+    this.startAdornmentWidth = this.getNamedSlotWidth('adornment-start')
+    this.endAdornmentWidth = this.getNamedSlotWidth('adornment-end')
   }
 
   // TODO: Use to calculate adornment width later
@@ -124,20 +128,22 @@ 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
+            height: this.height ? `${this.height}px` : undefined,
+            paddingLeft: this.startAdornmentWidth ? `${this.startAdornmentWidth}px` : undefined,
+            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined
           }}
           placeholder={this.placeholder}
         />
@@ -160,7 +166,9 @@ export class OramaTextarea {
             left: '0',
             transform: 'translateZ(0)',
             paddingTop: '0',
-            paddingBottom: '0'
+            paddingBottom: '0',
+            paddingLeft: this.startAdornmentWidth ? `${this.startAdornmentWidth}px` : undefined,
+            paddingRight: this.endAdornmentWidth ? `${this.endAdornmentWidth}px` : undefined
           }}
         />
       </Host>

diff --git a/packages/ui-stencil/src/styles/globals.scss b/packages/ui-stencil/src/styles/globals.scss
@@ -21,7 +21,9 @@
   vertical-align: baseline;
   text-size-adjust: none;
 
-  *, *:before, *:after{
+  *,
+  *:before,
+  *:after {
     box-sizing: border-box;
   }
 }