feat: moves textare to interal components folder

- rename css background function - fix tab width for prettierrc
oramasearch · Jul 5, 2024 · 934d4ae · 934d4ae
1 parent fc66be1
commit 934d4ae
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 109 deletions.
diff --git a/packages/ui-stencil/.prettierrc.json b/packages/ui-stencil/.prettierrc.json
@@ -1,14 +1,14 @@
 {
-      "arrowParens": "avoid",
-      "bracketSpacing": true,
-      "jsxBracketSameLine": false,
-      "jsxSingleQuote": false,
-      "quoteProps": "consistent",
-      "printWidth": 180,
-      "semi": true,
-      "singleQuote": true,
-      "tabWidth": 6,
-      "trailingComma": "all",
-      "useTabs": false,
-      "editorConfig": true
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "editorConfig": true
 }
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
@@ -0,0 +1,70 @@
+:host {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  padding: var(--spacing-m, $spacing-m) 0;
+
+  border-radius: var(--radius-l, $radius-l);
+
+  border: 1px solid var(--border-color-primary, border-color('primary'));
+  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 {
+  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;
+  }
+
+  // Maybe move somewhere else to reuse in some somponents, but not globally
+  &::-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/...ponents/orama-textarea/orama-textarea.tsx → ...nternal/orama-textarea/orama-textarea.tsx b/...ponents/orama-textarea/orama-textarea.tsx → ...nternal/orama-textarea/orama-textarea.tsx
@@ -6,7 +6,7 @@ import { Component, Host, Prop, State, Watch, h, Element } from '@stencil/core'
   shadow: true
 })
 export class OramaTextarea {
-  @Element() el: HTMLElement
+  @Element() el: HTMLTextAreaElement
 
   @Prop() value: string | null = ''
   @Prop() maxRows: number | string
@@ -124,6 +124,8 @@ 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  */}

diff --git a/...l/src/components/orama-textarea/readme.md → ...ponents/internal/orama-textarea/readme.md b/...l/src/components/orama-textarea/readme.md → ...ponents/internal/orama-textarea/readme.md
diff --git a/packages/ui-stencil/src/components/orama-textarea/orama-textarea.scss b/packages/ui-stencil/src/components/orama-textarea/orama-textarea.scss
diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss
@@ -1,21 +1,21 @@
 // Primitive colors
-$gray50: #FBFBFB;
-$gray100: #EFEFEF;
-$gray200: #DADADA;
-$gray300: #C6C6C6;
-$gray400: #AFAFB1;
-$gray500: #99989D;
+$gray50: #fbfbfb;
+$gray100: #efefef;
+$gray200: #dadada;
+$gray300: #c6c6c6;
+$gray400: #afafb1;
+$gray500: #99989d;
 $gray600: #838289;
-$gray700: #2E2E2E;
+$gray700: #2e2e2e;
 $gray800: #212121;
 $gray900: #151515;
 $gray950: #050505;
-$purple500: #8152EE;
-$purple700: #6A4BB2;
+$purple500: #8152ee;
+$purple700: #6a4bb2;
 
 /**
 * in order to use one of the colors included in the palette map;
-*  use the functions text-color(key), bg-color(key), border-color(key)
+*  use the functions text-color(key), background-color(key), border-color(key)
 * ie: text-color('primary')
 * These color functions should be used to:
 *  - define a fallback color for a CSS custom property
@@ -31,21 +31,21 @@ $palette: (
   background: (
     primary: $gray950,
     secondary: $gray900,
-    tertiary: $gray800
+    tertiary: $gray800,
   ),
   border: (
     primary: $gray700,
     secondary: $gray900,
     inactive: $gray400,
-    accent: $purple500
+    accent: $purple500,
   ),
   icon: (
     primary: $gray50,
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
-    accent: $purple500
-  )
+    accent: $purple500,
+  ),
 );
 
 $paletteDark: (
@@ -58,20 +58,20 @@ $paletteDark: (
   background: (
     primary: $gray950,
     secondary: $gray900,
-    tertiary: $gray800
+    tertiary: $gray800,
   ),
   border: (
     primary: $gray700,
     secondary: $gray900,
-    inactive: $gray400
+    inactive: $gray400,
   ),
   icon: (
     primary: $gray50,
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
-    accent: $purple500
-  )
+    accent: $purple500,
+  ),
 );
 
 // should be imported by the config/colors.ts file
@@ -80,33 +80,33 @@ $theme-colors-light: (
   '--text-color-secondary': text-color('secondary'),
   '--text-color-tertiary': text-color('tertiary'),
   '--text-color-inactive': text-color('inactive'),
-  '--background-color-primary': bg-color('primary'),
-  '--background-color-secondary': bg-color('secondary'),
-  '--background-color-tertiary': bg-color('tertiary'),
+  '--background-color-primary': background-color('primary'),
+  '--background-color-secondary': background-color('secondary'),
+  '--background-color-tertiary': background-color('tertiary'),
   '--border-color-primary': border-color('primary'),
   '--border-color-secondary': border-color('secondary'),
   '--border-color-inactive': border-color('inactive'),
   '--icon-color-primary': icon-color('primary'),
   '--icon-color-secondary': icon-color('secondary'),
   '--icon-color-tertiary': icon-color('tertiary'),
   '--icon-color-inactive': icon-color('inactive'),
-  '--icon-color-accent': icon-color('accent')
+  '--icon-color-accent': icon-color('accent'),
 );
 
 $theme-colors-dark: (
   '--text-color-primary': text-color('primary', $paletteDark),
   '--text-color-secondary': text-color('secondary', $paletteDark),
   '--text-color-tertiary': text-color('tertiary', $paletteDark),
   '--text-color-inactive': text-color('inactive', $paletteDark),
-  '--background-color-primary': bg-color('primary', $paletteDark),
-  '--background-color-secondary': bg-color('secondary', $paletteDark),
-  '--background-color-tertiary': bg-color('tertiary', $paletteDark),
+  '--background-color-primary': background-color('primary', $paletteDark),
+  '--background-color-secondary': background-color('secondary', $paletteDark),
+  '--background-color-tertiary': background-color('tertiary', $paletteDark),
   '--border-color-primary': border-color('primary', $paletteDark),
   '--border-color-secondary': border-color('secondary', $paletteDark),
   '--border-color-inactive': border-color('inactive', $paletteDark),
   '--icon-color-primary': icon-color('primary', $paletteDark),
   '--icon-color-secondary': icon-color('secondary', $paletteDark),
   '--icon-color-tertiary': icon-color('tertiary', $paletteDark),
   '--icon-color-inactive': icon-color('inactive', $paletteDark),
-  '--icon-color-accent': icon-color('accent', $paletteDark)
+  '--icon-color-accent': icon-color('accent', $paletteDark),
 );
diff --git a/packages/ui-stencil/src/styles/_functions.scss b/packages/ui-stencil/src/styles/_functions.scss
@@ -3,7 +3,7 @@
  * The function palette is used by the following functions
  * text-color(), border-color() and bg-color()
  */
- @function palette($feature, $role: 'primary', $palette: $palette) {
+@function palette($feature, $role: 'primary', $palette: $palette) {
   @if map-has-key($palette, $feature) {
     $feat: map-get($palette, $feature);
 
@@ -20,7 +20,7 @@
 }
 
 /* ===BACKGROUND COLOR FUNCTION=== */
-@function bg-color($role: 'primary', $palette: $palette) {
+@function background-color($role: 'primary', $palette: $palette) {
   @return palette('background', $role, $palette);
 }