[ui] Form validation fixes (#225)

* [ui] Select: add padding for (in-) valid icon * [ui] RadioGroup: fix ‘missing prop’ warnings in some tests * [ui] TextInputRow: fix padding whne row is invalid or valid * [ui] TextareaRow: render icon if row is valid or invalid * [ui] TextareaRow, TextInputRow: fix icon position for stacked variant * [ui] bump version to 0.8.5
sapcc · Nov 9, 2022 · 0150497 · 0150497
1 parent 196ff95
commit 0150497
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 11 deletions.
diff --git a/libs/juno-ui-components/package.json b/libs/juno-ui-components/package.json
@@ -5,7 +5,7 @@
   "module": "lib/index.js",
   "source": "src/index.js",
   "style": "lib/esm/styles.css",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "files": [
     "src",
     "lib",

diff --git a/libs/juno-ui-components/src/components/RadioGroup/RadioGroup.test.js b/libs/juno-ui-components/src/components/RadioGroup/RadioGroup.test.js
@@ -91,7 +91,7 @@ describe("RadioGroup", () => {
 
 	test("renders a valid RadioGroup as passed", async () => {
 		render(
-			<RadioGroup valid>
+			<RadioGroup valid name="my-radiogroup">
 				<RadioRow value="v1"/>
 			</RadioGroup>
 		)
@@ -102,7 +102,7 @@ describe("RadioGroup", () => {
 
 	test("renders a valid RadioGroup when successtext is passed", async () => {
 		render(
-			<RadioGroup successtext="Great Success!">
+			<RadioGroup successtext="Great Success!" name="my-radiogroup">
 				<RadioRow value="v1"/>
 			</RadioGroup>
 		)
@@ -114,7 +114,7 @@ describe("RadioGroup", () => {
 
 	test("renders a invalid RadioGroup as passed", async () => {
 		render(
-			<RadioGroup invalid>
+			<RadioGroup invalid name="my-radiogroup">
 				<RadioRow value="v1"/>
 			</RadioGroup>
 		)
@@ -125,7 +125,7 @@ describe("RadioGroup", () => {
 
 	test("renders an invalid RadioGroup when errortext is passed", async () => {
 		render(
-			<RadioGroup errortext="Big Error!">
+			<RadioGroup errortext="Big Error!" name="my-radiogroup">
 				<RadioRow value="v1"/>
 			</RadioGroup>
 		)

diff --git a/libs/juno-ui-components/src/components/Select/Select.component.js b/libs/juno-ui-components/src/components/Select/Select.component.js
@@ -10,7 +10,6 @@ const selectstyles = `
 	jn-appearance-none
 	jn-text-base
 	jn-pl-4
-	jn-pr-9
 	jn-h-[2.375rem]
 	jn-rounded-3px
 	jn-bg-icon-arrow-down
@@ -71,6 +70,14 @@ const loadingSpinnerStyles = `
 	jn-mr-auto
 `
 
+const iconpaddingright = `
+	jn-pr-[3.75rem]
+`
+
+const defaultpaddingright = `
+	jn-pr-9
+`
+
 /*+ A basic, uncontrolled Select. Takes SelectOption and SelectOptionGroup as children. */
 export const Select = ({
 	name,
@@ -120,12 +127,20 @@ export const Select = ({
 		}
 	}
 
+	const selectPadding = () => {
+		if (isValid || isInvalid ) {
+			return iconpaddingright
+		} else {
+			return defaultpaddingright
+		}
+	}
+
 	return (
 		<div className={`juno-select-wrapper ${wrapperstyles}`}>
 			<select 
 				name={name || "Unnamed Select"}
 				id={id}
-				className={`juno-select ${selectstyles} ${ isInvalid ? "juno-select-invalid " + errorstyles : "" } ${ isValid ? "juno-select-valid " + successstyles : "" } ${className}`}
+				className={`juno-select ${selectstyles} ${ isInvalid ? "juno-select-invalid " + errorstyles : "" } ${ isValid ? "juno-select-valid " + successstyles : "" } ${selectPadding()} ${className}`}
 				onChange={onChange}
 				disabled={disabled || isLoading}
 				{...props}

diff --git a/libs/juno-ui-components/src/components/TextInputRow/TextInputRow.component.js b/libs/juno-ui-components/src/components/TextInputRow/TextInputRow.component.js
@@ -31,6 +31,7 @@ const floatinglabelcontainerstyles = (minimizedLabel) => {
     jn-transition-all 
     jn-duration-100 
     jn-ease-in-out
+    jn-z-10
 
     ${
       minimizedLabel &&
@@ -64,6 +65,10 @@ const floatinginputstyles = (minimizedLabel) => {
   `
 }
 
+const inputcontainerstyles = `
+  jn-relative
+`
+
 const helptextstyles = `
 	jn-text-xs
 	jn-text-theme-light
@@ -97,6 +102,10 @@ const stackedinputstyles = `
 	jn-w-full
 `
 
+const iconpadding = `
+  jn-pr-10
+`
+
 const getContainerStyles = (variant) => {
   if (variant === "stacked") {
     return stackedcontainerstyles
@@ -207,6 +216,14 @@ export const TextInputRow = ({
       return ""
     }
   }
+
+  const inputrightpadding = () => {
+    if ( isValid || isInvalid ) {
+      return iconpadding
+    } else {
+      return ""
+    }
+  }
 
   return (
     <div
@@ -229,7 +246,7 @@ export const TextInputRow = ({
           disabled={variant === "stacked" && disabled ? disabled : false}
         />
       </div>
-      <div className={`juno-input-container`}>
+      <div className={`juno-input-container ${inputcontainerstyles}`}>
         <TextInput
           type={type}
           value={val}
@@ -246,7 +263,7 @@ export const TextInputRow = ({
           className={`${getInputStyles(
             variant,
             minimizedLabel(variant, val, focus)
-          )}`}
+          )} ${inputrightpadding()}`}
         />
         <Icons disabled={disabled} />
         {errortext && errortext.length ? (

diff --git a/libs/juno-ui-components/src/components/TextareaRow/TextareaRow.component.js b/libs/juno-ui-components/src/components/TextareaRow/TextareaRow.component.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo } from "react"
 import PropTypes from "prop-types"
 import { Textarea } from "../Textarea/index.js"
 import { Label } from "../Label/index.js"
+import { Icon } from "../Icon/index"
 
 /* Stacked: Label is above the text input element */
 const stackedcontainerstyles = `
@@ -32,6 +33,7 @@ const floatinglabelcontainerstyles = (minimizedLabel) => {
     jn-transition-all 
     jn-duration-100 
     jn-ease-in-out
+    jn-z-10
 
     ${
       minimizedLabel &&
@@ -65,6 +67,10 @@ const floatinginputstyles = (minimizedLabel) => {
   `
 }
 
+const inputcontainerstyles = `
+  jn-relative
+`
+
 const helptextstyles = `
 	jn-text-xs
 	jn-text-theme-light
@@ -87,6 +93,21 @@ const stackedinputstyles = `
 	jn-w-full
 `
 
+const iconcontainerstyles = `
+  jn-flex
+  jn-absolute
+  jn-top-1.5
+  jn-right-3
+`
+
+const disablediconstyles = `
+  jn-opacity-50
+`
+
+const iconpadding = `
+  jn-pr-10
+`
+
 const getContainerStyles = (variant) => {
   if (variant === "stacked") {
     return stackedcontainerstyles
@@ -193,6 +214,35 @@ export const TextareaRow = ({
 
     return false
   }
+
+  const Icons = ({ disabled }) => {
+    if (isValid || isInvalid) {
+      return (
+        <div
+          className={`juno-textinput-row-icon-container ${iconcontainerstyles} ${
+            disabled ? disablediconstyles : ""
+          }`}
+        >
+          {isInvalid ? (
+            <Icon icon="dangerous" color="jn-text-theme-error" />
+          ) : null}
+          {isValid ? (
+            <Icon icon="checkCircle" color="jn-text-theme-success" />
+          ) : null}
+        </div>
+      )
+    } else {
+      return ""
+    }
+  }
+
+  const textarearightpadding = () => {
+    if ( isValid || isInvalid ) {
+      return iconpadding
+    } else {
+      return ""
+    }
+  }
 
   return (
     <div
@@ -215,7 +265,7 @@ export const TextareaRow = ({
           disabled={variant === "stacked" && disabled ? disabled : false}
         />
       </div>
-      <div>
+      <div className={`juno-input-container ${inputcontainerstyles}`}>
         <Textarea
           value={val}
           name={name}
@@ -230,8 +280,9 @@ export const TextareaRow = ({
           className={`${getInputStyles(
             variant,
             minimizedLabel(variant, val, focus)
-          )}`}
+          )} ${textarearightpadding()}`}
         />
+        <Icons disabled={disabled} />
         {errortext && errortext.length ? (
           <p className={`${errortextstyles}`}>{errortext}</p>
         ) : null}

diff --git a/libs/juno-ui-components/src/components/TextareaRow/TextareaRow.test.js b/libs/juno-ui-components/src/components/TextareaRow/TextareaRow.test.js
@@ -71,26 +71,30 @@ describe("TextInputRow", () => {
     render(<TextareaRow invalid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
+    expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
   test("renders an invalid TextAreaRow with an error text as passed", async () => {
     render(<TextareaRow errortext="This is an error text" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
     expect(screen.getByText("This is an error text")).toBeInTheDocument()
+    expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
   test("renders a valid TextAreaRow as passed", async () => {
     render(<TextareaRow valid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
+    expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
   test("renders an valid TextAreaRow with a success text as passed", async () => {
     render(<TextareaRow successtext="This is a success text" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
     expect(screen.getByText("This is a success text")).toBeInTheDocument()
+    expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
   test("renders a className to the row as passed", async () => {