feat: add textarea min-lines

tablecheck · Aug 7, 2024 · e738d80 · e738d80
1 parent 1e517a6
commit e738d80
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/system/core/src/components/IconButton.ts b/system/core/src/components/IconButton.ts
@@ -152,6 +152,7 @@ export const fullStyles = css`
   &[data-mode='input-append'] {
     border-color: transparent !important;
     border-radius: calc(var(--border-radius-small) - 1px);
+    align-self: flex-start;
     &:not([data-variant]) {
       ${variantStyles.bare};
     }

diff --git a/system/core/src/components/InputWithIcons.ts b/system/core/src/components/InputWithIcons.ts
@@ -82,9 +82,9 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -6px;
+    margin: 0 -9px 0 -6px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin: 0 -9px 0 -3px;
   }
 `;
diff --git a/system/core/src/components/TextAreaCore.ts b/system/core/src/components/TextAreaCore.ts
@@ -13,7 +13,8 @@ export const textareaSizingStyles = css`
   ${inputStyles}
   width: var(--tk-input-width);
   --tk-textarea-height: calc(
-    var(--tk-input-height) - (var(--tk-input-border-width) * 2)
+    2lh + (var(--tk-input-border-width) * 2) +
+      (var(--tk-input-vertical-padding) * 2)
   );
   min-height: var(--tk-textarea-height);
   resize: vertical;
@@ -44,6 +45,10 @@ export const textareaWrapperStyles = css`
     overflow: hidden;
     align-self: stretch;
   }
+  & > svg {
+    min-height: var(--tk-input-height);
+    align-self: flex-start;
+  }
   @supports (field-sizing: content) {
     &[data-content]:after {
       display: none;

diff --git a/system/core/src/components/TextAreaWithIcons.ts b/system/core/src/components/TextAreaWithIcons.ts
@@ -101,9 +101,9 @@ export const fullStyles = css`
         var(--tk-input-icon-end-padding)
     );
     --tk-icon-button-padding: 8px !important;
-    margin: 0 -11px 0 -6px;
+    margin: 0 -9px 0 -6px;
   }
   &[data-size='small'] > [data-mode='input-append'] {
-    margin: 0 -11px 0 -3px;
+    margin: 0 -9px 0 -3px;
   }
 `;