kahuna-base-react-components 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KButton/KButton.stories.tsx

@@ -24,11 +24,10 @@ KButtonText.args = {
   borderRadius: 10,
   width: "160px",
   height: "44px",
-  hoverBackground: "#A2FE67",
+  hoverBackground: "yellow",
   textDecoration: "underline",
-  activeBackground: "#F00",
-  border: "1px solid black",
-  hoverBorder: "1px solid red",
+  activeBackground: "yellow",
+  hoverBorder: "1px solid yellow",
   activeBorder: "1px solid transparent",
 };
 

package/src/components/KInput/KInput.stories.tsx

@@ -40,10 +40,8 @@ KInputPrimary.args = {
     }
   },
   placeholder: "Placeholder...",
-  hoverBackground: "white",
-  activeBackground: "red",
-  border: "1px solid black",
-  hoverBorder: "1px solid red",
+  activeBackground: "yellow",
+  hoverBorder: "1px solid yellow",
   activeBorder: "1px solid transparent",
 }
 

package/src/components/KTextArea/KTextArea.stories.tsx

@@ -35,7 +35,7 @@ KTextAreaPrimary.args = {
   leftIcon: TracksIcon,
   activeBackground: "#FFF",
   maxHeight: 200,
-  clearTextOnPressedEnter: true
+  clearTextOnPressedEnter: true,
 }
 
 export const KTextAreaLeftIcon = Template.bind({})

package/src/components/KTextArea/KTextArea.tsx

@@ -68,7 +68,7 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
   const maxHeight = props.maxHeight || 200
   const clearTextOnPressedEnter = props.clearTextOnPressedEnter || false
 
-  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleInput = () => {
     if (textAreaRef.current) {
       const textarea = textAreaRef.current
       textarea.style.height = "auto"
@@ -76,6 +76,12 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (autoResize) {
+      handleInput()
+    }
+  }, [])
+
   return (
     <div
       onMouseEnter={() => setHover(true)}
@@ -121,7 +127,7 @@ const KTextArea: React.FC<KTextAreaProps> = (props) => {
         }}
         onChange={(event) => {
           if (autoResize) {
-            handleInput(event)
+            handleInput()
           }
 
           props.onChange(event.target.value)

package/src/main.css

@@ -43,7 +43,7 @@
     display: flex;
     align-items: center;
     align-self: stretch;
-    transition: all 0.3s;
+    transition:  all 0.3s, border 0s;
 }
 
 .k-input {
@@ -56,7 +56,7 @@
     line-height: 20px;
     /* 142.857% */
     letter-spacing: -0.084px;
-    transition: all 0.3s;
+    transition: all 0.3s, height 0s;
 }
 
 .k-input::placeholder {
@@ -73,7 +73,7 @@
     align-items: center;
     gap: 4px;
     align-self: stretch;
-    transition: all 0.3s;
+    transition:  all 0.3s, border 0s;
 }
 
 .k-button:focus {