From 88768edf736c8770e9edf4ec52d70455c77a2172 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:21:24 +0200
Subject: [PATCH 01/10] feat(ui) ComboBox: add `wrapperClassname` prop

---
 .../src/components/ComboBox/ComboBox.component.js           | 4 ++++
 .../ui-components/src/components/ComboBox/ComboBox.test.js  | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.component.js b/packages/ui-components/src/components/ComboBox/ComboBox.component.js
index 2a31f69c9..238963131 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.component.js
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.component.js
@@ -161,6 +161,7 @@ export const ComboBox = ({
   value = "",
   valueLabel,
   width = "full",
+  wrapperClassName = "",
   ...props
 }) => {
   const isNotEmptyString = (str) => {
@@ -286,6 +287,7 @@ export const ComboBox = ({
           jn-relative
           ${width == "auto" ? "jn-inline-block" : "jn-block"}
           ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+          ${wrapperClassName}
         `}
       >
         <Combobox
@@ -480,4 +482,6 @@ ComboBox.propTypes = {
   valueLabel: PropTypes.string,
   /** The width of the text input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
+  /** Pass a custom classname to the wrapping <div> element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.test.js b/packages/ui-components/src/components/ComboBox/ComboBox.test.js
index e14fdadc7..d165de214 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.test.js
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.test.js
@@ -533,6 +533,12 @@ describe("ComboBox", () => {
     expect(cbox).toHaveValue("option 2")
   })
 
+  test("renders a wrapperClassName to the outer wrapping <div> element", async () => {
+    render(<ComboBox wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-combobox-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-combobox-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders a ComboBox with a custom className as passed", async () => {
     await waitFor(() =>
       render(

From 4faba4a1f4ad34d98b7ac55f08de77c99ca402f5 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:27:52 +0200
Subject: [PATCH 02/10] feat(ui) DateTimePicker: add `wrapperClassname` prop

---
 .../components/DateTimePicker/DateTimePicker.component.js   | 5 +++++
 .../src/components/DateTimePicker/DateTimePicker.test.js    | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
index 1b076bded..48daabb94 100644
--- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
+++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
@@ -129,6 +129,7 @@ export const DateTimePicker = ({
   value,
   weekNumbers,
   width,
+  wrapperClassName,
   ...props
 }) => {
   // always generate auto-id string using the useId hook to avoid "more hooks than in previous render" error when removing custom id:
@@ -434,6 +435,7 @@ export const DateTimePicker = ({
       juno-datetimepicker-wrapper
       ${width == "auto" ? "jn-inline-block" : "jn-block"}
       ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+      ${wrapperClassName}
     `}
     >
       <div className={`juno-datetimepicker-input-wrapper ${inputWrapperStyles}`}>
@@ -594,6 +596,8 @@ DateTimePicker.propTypes = {
   weekNumbers: PropTypes.bool,
   /** The width of the datepicker input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
+  /** Pass a custom className to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
 
 // can't get rid of this, as if we transform it to a default values using vanilla JS, two tests will fail
@@ -646,4 +650,5 @@ DateTimePicker.defaultProps = {
   value: "",
   weekNumbers: false,
   width: "full",
+  wrapperClassName: "",
 }
diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
index 009fe6806..4fd99f11e 100644
--- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
+++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
@@ -941,6 +941,12 @@ describe("DateTimePicker", () => {
     expect(mockOnMonthChange).toHaveBeenCalled()
   })
 
+  test("renders a wrapperClassName to the outer wrapping element", async () => {
+    render(<DateTimePicker wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-datetimepicker-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-datetimepicker-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders a className as passed", async () => {
     await waitFor(() =>
       render(

From 716c92bd70aa67206ba2536c7f25b2e5c1de0ae8 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:32:25 +0200
Subject: [PATCH 03/10] feat(ui) NativeSelect: add `wrapperClassname` prop

---
 .../components/NativeSelect/NativeSelect.component.js  | 10 +++++++++-
 .../src/components/NativeSelect/NativeSelect.test.js   |  6 ++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
index fc408926a..71d20f1fe 100644
--- a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
@@ -119,6 +119,7 @@ export const NativeSelect = ({
   error = false,
   onChange,
   onClick,
+  wrapperClassName = "",
   ...props
 }) => {
   const [isLoading, setIsLoading] = useState(false)
@@ -183,7 +184,12 @@ export const NativeSelect = ({
   }
 
   return (
-    <div className={`juno-select-wrapper ${wrapperstyles}`}>
+    <div
+      className={`
+      juno-select-wrapper 
+      ${wrapperstyles}
+      ${wrapperClassName}`}
+    >
       <select
         name={name || "Unnamed Select"}
         id={id}
@@ -227,4 +233,6 @@ NativeSelect.propTypes = {
   onChange: PropTypes.func,
   /** Pass a click handler */
   onClick: PropTypes.func,
+  /** Pass a custom className to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
index 97edf1f44..a2fa7b3e3 100644
--- a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
@@ -112,6 +112,12 @@ describe("NativeSelect", () => {
     expect(onClickSpy).not.toHaveBeenCalled()
   })
 
+  test("renders a wrapperClassName to the outer wrapping element", async () => {
+    render(<NativeSelect wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-select-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-select-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders all props as passed", async () => {
     render(<NativeSelect data-lolol="some-random-prop" />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()

From 326ee932da4ef3085da32267335520beefe3b1f3 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:41:03 +0200
Subject: [PATCH 04/10] feat(ui) Select: add `wrapperClassname` prop

---
 .../src/components/Select/Select.component.js          |  4 ++++
 .../ui-components/src/components/Select/Select.test.js | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/ui-components/src/components/Select/Select.component.js b/packages/ui-components/src/components/Select/Select.component.js
index 4198880e5..7ba51d98f 100644
--- a/packages/ui-components/src/components/Select/Select.component.js
+++ b/packages/ui-components/src/components/Select/Select.component.js
@@ -101,6 +101,7 @@ export const Select = ({
   valueLabel,
   variant = "default",
   width = "full",
+  wrapperClassName = "",
   ...props
 }) => {
   const isNotEmptyString = (str) => {
@@ -211,6 +212,7 @@ export const Select = ({
           jn-relative
           ${width == "auto" ? "jn-inline-block" : "jn-block"}
           ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+          ${wrapperClassName}
         `}
       >
         <Listbox
@@ -384,4 +386,6 @@ Select.propTypes = {
   variant: PropTypes.oneOf(["default", "primary", "primary-danger", "subdued"]),
   /** Whether the Select toggle should consume the available width of its parent container (default), or render its "natural" width depending on the content and the currently selected value or state. */
   width: PropTypes.oneOf(["full", "auto"]),
+  /** Pass a custom classname to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Select/Select.test.js b/packages/ui-components/src/components/Select/Select.test.js
index 3b0180586..631277ab8 100644
--- a/packages/ui-components/src/components/Select/Select.test.js
+++ b/packages/ui-components/src/components/Select/Select.test.js
@@ -581,3 +581,13 @@ describe("Select", () => {
     expect(toggle).toHaveTextContent("Option 1")
   })
 })
+
+test("renders a wrapperClassName to the outer wrapping element", async () => {
+  render(
+    <Select wrapperClassName="my-wrapper-class">
+      <SelectOption>Option 1</SelectOption>
+    </Select>
+  )
+  expect(document.querySelector(".juno-select-wrapper ")).toBeInTheDocument()
+  expect(document.querySelector(".juno-select-wrapper ")).toHaveClass("my-wrapper-class")
+})

From 5f978586030425d292e96881c5cba0f71fab0891 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:44:58 +0200
Subject: [PATCH 05/10] feat(ui) Switch: add `wrapperClassname` prop

---
 .../ui-components/src/components/Switch/Switch.component.js | 4 ++++
 packages/ui-components/src/components/Switch/Switch.test.js | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/ui-components/src/components/Switch/Switch.component.js b/packages/ui-components/src/components/Switch/Switch.component.js
index 1dd1e1aea..1e674ae34 100644
--- a/packages/ui-components/src/components/Switch/Switch.component.js
+++ b/packages/ui-components/src/components/Switch/Switch.component.js
@@ -124,6 +124,7 @@ export const Switch = ({
   className = "",
   onChange = undefined,
   onClick = undefined,
+  wrapperClassName = "",
   ...props
 }) => {
   const isNotEmptyString = (str) => {
@@ -171,6 +172,7 @@ export const Switch = ({
         className={`
 				juno-switch-wrapper 
 				${switchWrapperStyles}
+        ${wrapperClassName}
 				`}
       >
         <button
@@ -267,4 +269,6 @@ Switch.propTypes = {
   onChange: PropTypes.func,
   /** Pass a click handler */
   onClick: PropTypes.func,
+  /** Pass a custom className to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Switch/Switch.test.js b/packages/ui-components/src/components/Switch/Switch.test.js
index b92533c94..ac9d6534e 100644
--- a/packages/ui-components/src/components/Switch/Switch.test.js
+++ b/packages/ui-components/src/components/Switch/Switch.test.js
@@ -127,6 +127,12 @@ describe("Switch", () => {
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-invalid")
   })
 
+  test("renders a wrapperClassName to the outer wrapper element", async () => {
+    render(<Switch wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-switch-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-switch-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders a custom className", async () => {
     render(<Switch className="my-custom-class" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()

From 0375f4d690e305b13b62f7cb93eb40111e6c175b Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:51:32 +0200
Subject: [PATCH 06/10] feat(ui) TextInput: add `wrapperClassname` prop

---
 .../src/components/TextInput/TextInput.component.js         | 4 ++++
 .../src/components/TextInput/TextInput.test.js              | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/ui-components/src/components/TextInput/TextInput.component.js b/packages/ui-components/src/components/TextInput/TextInput.component.js
index 8bd3ead60..d7b1e9487 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.component.js
+++ b/packages/ui-components/src/components/TextInput/TextInput.component.js
@@ -101,6 +101,7 @@ export const TextInput = ({
   type = null,
   label = undefined,
   width = "full",
+  wrapperClassName = "",
   ...props
 }) => {
   const isNotEmptyString = (str) => {
@@ -183,6 +184,7 @@ export const TextInput = ({
           ${wrapperStyles}
           ${width == "auto" ? "jn-inline-block" : "jn-block"}
           ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+          ${wrapperClassName}
           `}
       >
         <input
@@ -283,4 +285,6 @@ TextInput.propTypes = {
   errortext: PropTypes.node,
   /** The width of the text input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
+  /** Passa custom className to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/TextInput/TextInput.test.js b/packages/ui-components/src/components/TextInput/TextInput.test.js
index c43a9c3d2..f11bb33fc 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.test.js
+++ b/packages/ui-components/src/components/TextInput/TextInput.test.js
@@ -166,6 +166,12 @@ describe("TextInput", () => {
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
+  test("renders a wrapperClassName to the outer wrapper element", async () => {
+    render(<TextInput wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-textinput-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-textinput-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders a className as passed", async () => {
     render(<TextInput className="my-custom-class" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()

From 6c8aebe93e6b5edc56c21a76a1024f5fd948d103 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 11:55:20 +0200
Subject: [PATCH 07/10] feat(ui) Textarea: add `wrapperClassName` prop

---
 .../src/components/Textarea/Textarea.component.js           | 4 ++++
 .../ui-components/src/components/Textarea/Textarea.test.js  | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/ui-components/src/components/Textarea/Textarea.component.js b/packages/ui-components/src/components/Textarea/Textarea.component.js
index db61d083f..471ccbe12 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.component.js
+++ b/packages/ui-components/src/components/Textarea/Textarea.component.js
@@ -98,6 +98,7 @@ export const Textarea = ({
   onBlur = undefined,
   label = undefined,
   width = "full",
+  wrapperClassName = "",
   ...props
 }) => {
   const isNotEmptyString = (str) => {
@@ -180,6 +181,7 @@ export const Textarea = ({
           ${wrapperStyles}
           ${width == "auto" ? "jn-inline-block" : "jn-block"}
           ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+          ${wrapperClassName}
         `}
       >
         {label && label.length ? (
@@ -277,4 +279,6 @@ Textarea.propTypes = {
   errortext: PropTypes.node,
   /** The width of the textarea. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
+  /** Pass a custom className to the wrapping element */
+  wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Textarea/Textarea.test.js b/packages/ui-components/src/components/Textarea/Textarea.test.js
index ed965bea0..58a5d310f 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.test.js
+++ b/packages/ui-components/src/components/Textarea/Textarea.test.js
@@ -131,6 +131,12 @@ describe("Textarea", () => {
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
+  test("renders a wrapperClassName to the wrapping <div> element", async () => {
+    render(<Textarea wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-textarea-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-textarea-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
   test("renders a className as passed", async () => {
     render(<Textarea className="my-custom-class" />)
     expect(screen.getByRole("textbox")).toHaveClass("my-custom-class")

From 9367f6f4c94aec5bee75a351f137e3e9bea9d9c3 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franz@franzheidl.de>
Date: Thu, 8 Aug 2024 12:02:17 +0200
Subject: [PATCH 08/10] Create wrapperClassName.md

---
 .changeset/wrapperClassName.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 .changeset/wrapperClassName.md

diff --git a/.changeset/wrapperClassName.md b/.changeset/wrapperClassName.md
new file mode 100644
index 000000000..1d5ae9b75
--- /dev/null
+++ b/.changeset/wrapperClassName.md
@@ -0,0 +1,13 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+`wrapperClassName` prop added to the following components:
+
+- ComboBox
+- DateTimePicker
+- NativeSelect
+- Select
+- Switch
+- Textarea
+- TextInput

From fc7fb2e04a75247e60369bf85b58019dc9c834cc Mon Sep 17 00:00:00 2001
From: D038721 <esther.schmitz@sap.com>
Date: Mon, 12 Aug 2024 14:45:57 +0200
Subject: [PATCH 09/10] doc(wrapperClassName): added more detailed explanation
 for wrapperClassname compared to className

---
 .../src/components/ComboBox/ComboBox.component.js             | 4 ++--
 .../src/components/DateTimePicker/DateTimePicker.component.js | 2 +-
 .../src/components/NativeSelect/NativeSelect.component.js     | 4 ++--
 .../ui-components/src/components/Select/Select.component.js   | 4 ++--
 .../ui-components/src/components/Switch/Switch.component.js   | 4 ++--
 .../src/components/TextInput/TextInput.component.js           | 4 ++--
 .../src/components/Textarea/Textarea.component.js             | 4 ++--
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.component.js b/packages/ui-components/src/components/ComboBox/ComboBox.component.js
index 238963131..e7fc20d23 100644
--- a/packages/ui-components/src/components/ComboBox/ComboBox.component.js
+++ b/packages/ui-components/src/components/ComboBox/ComboBox.component.js
@@ -434,7 +434,7 @@ ComboBox.propTypes = {
   ariaLabel: PropTypes.string,
   /** The children to Render. Use `ComboBox.Option` elements. */
   children: PropTypes.node,
-  /** A custom className. Will be passed to the text input element of the ComboBox */
+  /** A custom className. Will be passed to the internal text input element of the ComboBox */
   className: PropTypes.string,
   /** Pass a defaultValue to use as an uncontrolled Component that will handle its state internally */
   defaultValue: PropTypes.string,
@@ -482,6 +482,6 @@ ComboBox.propTypes = {
   valueLabel: PropTypes.string,
   /** The width of the text input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
-  /** Pass a custom classname to the wrapping <div> element */
+  /** Pass a custom classname to the wrapping <div> element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
index 48daabb94..0645f4006 100644
--- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
+++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.component.js
@@ -596,7 +596,7 @@ DateTimePicker.propTypes = {
   weekNumbers: PropTypes.bool,
   /** The width of the datepicker input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
-  /** Pass a custom className to the wrapping element */
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
 
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
index 71d20f1fe..7d2e4bf1f 100644
--- a/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.component.js
@@ -215,7 +215,7 @@ NativeSelect.propTypes = {
   name: PropTypes.string,
   /** The id of the select */
   id: PropTypes.string,
-  /** Pass a classname */
+  /** Pass a classname. The class name is applied to the internal select element. */
   className: PropTypes.string,
   /** Pass SelectOption and SelectOptionGroup as children. */
   children: PropTypes.node,
@@ -233,6 +233,6 @@ NativeSelect.propTypes = {
   onChange: PropTypes.func,
   /** Pass a click handler */
   onClick: PropTypes.func,
-  /** Pass a custom className to the wrapping element */
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Select/Select.component.js b/packages/ui-components/src/components/Select/Select.component.js
index 7ba51d98f..ed60c56e4 100644
--- a/packages/ui-components/src/components/Select/Select.component.js
+++ b/packages/ui-components/src/components/Select/Select.component.js
@@ -339,7 +339,7 @@ Select.propTypes = {
   ariaLabel: PropTypes.string,
   /** The children to render as options. Use the SelectOption component, and SelectDivider if needed. */
   children: PropTypes.node,
-  /** Pass a custom className to the Select toggle button */
+  /** Pass a custom className to the internal Select toggle button */
   className: PropTypes.string,
   /** Pass a defaultValue to use as an uncontrolled component that handles its state internally. When setting `multiple` on the Select pass an Array instead of a string.  */
   defaultValue: PropTypes.string,
@@ -386,6 +386,6 @@ Select.propTypes = {
   variant: PropTypes.oneOf(["default", "primary", "primary-danger", "subdued"]),
   /** Whether the Select toggle should consume the available width of its parent container (default), or render its "natural" width depending on the content and the currently selected value or state. */
   width: PropTypes.oneOf(["full", "auto"]),
-  /** Pass a custom classname to the wrapping element */
+  /** Pass a custom classname to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Switch/Switch.component.js b/packages/ui-components/src/components/Switch/Switch.component.js
index 1e674ae34..814668bd0 100644
--- a/packages/ui-components/src/components/Switch/Switch.component.js
+++ b/packages/ui-components/src/components/Switch/Switch.component.js
@@ -263,12 +263,12 @@ Switch.propTypes = {
   errortext: PropTypes.node,
   /** A text to render when the Switch has an error or could not be validated */
   successtext: PropTypes.node,
-  /** Pass a className */
+  /** Pass a className. The class name is applied to the internal button element. */
   className: PropTypes.string,
   /** Pass a change handler */
   onChange: PropTypes.func,
   /** Pass a click handler */
   onClick: PropTypes.func,
-  /** Pass a custom className to the wrapping element */
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/TextInput/TextInput.component.js b/packages/ui-components/src/components/TextInput/TextInput.component.js
index d7b1e9487..4960f4439 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.component.js
+++ b/packages/ui-components/src/components/TextInput/TextInput.component.js
@@ -263,7 +263,7 @@ TextInput.propTypes = {
   valid: PropTypes.bool,
   /** Whether the field receives autofocus */
   autoFocus: PropTypes.bool,
-  /** Pass a classname */
+  /** Pass a classname. The class name is applied to the internal input element. */
   className: PropTypes.string,
   /** Pass a valid autocomplete value. We do not police validity. */
   autoComplete: PropTypes.string,
@@ -285,6 +285,6 @@ TextInput.propTypes = {
   errortext: PropTypes.node,
   /** The width of the text input. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
-  /** Passa custom className to the wrapping element */
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }
diff --git a/packages/ui-components/src/components/Textarea/Textarea.component.js b/packages/ui-components/src/components/Textarea/Textarea.component.js
index 471ccbe12..cadbfb481 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.component.js
+++ b/packages/ui-components/src/components/Textarea/Textarea.component.js
@@ -261,7 +261,7 @@ Textarea.propTypes = {
   valid: PropTypes.bool,
   /** Whether the field receives autofocus */
   autoFocus: PropTypes.bool,
-  /** Pass a classname */
+  /** Pass a classname. The class name is applied to the internal textarea element. */
   className: PropTypes.string,
   /** Pass a valid autocomplete value. We do not police validity. */
   autoComplete: PropTypes.string,
@@ -279,6 +279,6 @@ Textarea.propTypes = {
   errortext: PropTypes.node,
   /** The width of the textarea. Either 'full' (default) or 'auto'. */
   width: PropTypes.oneOf(["full", "auto"]),
-  /** Pass a custom className to the wrapping element */
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
   wrapperClassName: PropTypes.string,
 }

From 15aa173e9cb42684c57fc91d289bd6d12a5c16e6 Mon Sep 17 00:00:00 2001
From: D038721 <esther.schmitz@sap.com>
Date: Mon, 12 Aug 2024 15:02:43 +0200
Subject: [PATCH 10/10] fix(tests): remove unnecessary async

---
 .../DateTimePicker/DateTimePicker.test.js     |  2 +-
 .../NativeSelect/NativeSelect.test.js         | 34 ++++++------
 .../src/components/Select/Select.test.js      |  2 +-
 .../src/components/Switch/Switch.test.js      | 48 ++++++++---------
 .../components/TextInput/TextInput.test.js    | 54 +++++++++----------
 .../src/components/Textarea/Textarea.test.js  | 44 +++++++--------
 6 files changed, 92 insertions(+), 92 deletions(-)

diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
index 4fd99f11e..ec8d48f76 100644
--- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
+++ b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js
@@ -941,7 +941,7 @@ describe("DateTimePicker", () => {
     expect(mockOnMonthChange).toHaveBeenCalled()
   })
 
-  test("renders a wrapperClassName to the outer wrapping element", async () => {
+  test("renders a wrapperClassName to the outer wrapping element", () => {
     render(<DateTimePicker wrapperClassName="my-wrapper-class" />)
     expect(document.querySelector(".juno-datetimepicker-wrapper")).toBeInTheDocument()
     expect(document.querySelector(".juno-datetimepicker-wrapper")).toHaveClass("my-wrapper-class")
diff --git a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
index a2fa7b3e3..3f7fd5b1f 100644
--- a/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
+++ b/packages/ui-components/src/components/NativeSelect/NativeSelect.test.js
@@ -8,50 +8,50 @@ import { render, screen, fireEvent } from "@testing-library/react"
 import { NativeSelect } from "./index"
 
 describe("NativeSelect", () => {
-  test("renders a native html select element", async () => {
+  test("renders a native html select element", () => {
     render(<NativeSelect />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
   })
 
-  test("renders a select element with a name as passed", async () => {
+  test("renders a select element with a name as passed", () => {
     render(<NativeSelect name="my-select" />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveAttribute("name", "my-select")
   })
 
-  test("renders a select element with an id as passed", async () => {
+  test("renders a select element with an id as passed", () => {
     render(<NativeSelect id="my-select" />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveAttribute("id", "my-select")
   })
 
-  test("renders a custom className", async () => {
+  test("renders a custom className", () => {
     render(<NativeSelect className="my-custom-class" />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveClass("my-custom-class")
   })
 
-  test("renders a disabled select as passed", async () => {
+  test("renders a disabled select as passed", () => {
     render(<NativeSelect disabled />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toBeDisabled()
   })
 
-  test("renders an invalid Select as passed", async () => {
+  test("renders an invalid Select as passed", () => {
     render(<NativeSelect invalid />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveClass("juno-select-invalid")
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
-  test("renders a valid Select as passed", async () => {
+  test("renders a valid Select as passed", () => {
     render(<NativeSelect valid />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveClass("juno-select-valid")
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
-  test("renders a Select with an error as passed", async () => {
+  test("renders a Select with an error as passed", () => {
     render(<NativeSelect error />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toBeDisabled()
@@ -59,7 +59,7 @@ describe("NativeSelect", () => {
     expect(screen.getByTitle("Error")).toBeInTheDocument()
   })
 
-  test("renders children as passed", async () => {
+  test("renders children as passed", () => {
     render(
       <NativeSelect>
         <option data-testid="option">Option</option>
@@ -69,7 +69,7 @@ describe("NativeSelect", () => {
     expect(screen.getByTestId("option")).toBeInTheDocument()
   })
 
-  test("executes onClick handler as passed", async () => {
+  test("executes onClick handler as passed", () => {
     const onClickSpy = jest.fn()
     render(<NativeSelect onClick={onClickSpy} />)
     const select = screen.getByRole("combobox")
@@ -77,7 +77,7 @@ describe("NativeSelect", () => {
     expect(onClickSpy).toHaveBeenCalled()
   })
 
-  test("executes onChange handler as passed", async () => {
+  test("executes onChange handler as passed", () => {
     const handleChange = jest.fn()
     render(<NativeSelect onChange={handleChange} />)
     const select = screen.getByRole("combobox")
@@ -85,40 +85,40 @@ describe("NativeSelect", () => {
     expect(handleChange).toHaveBeenCalledTimes(1)
   })
 
-  test("does not execute onClick handler when disabled", async () => {
+  test("does not execute onClick handler when disabled", () => {
     const onClickSpy = jest.fn()
     render(<NativeSelect onClick={onClickSpy} disabled />)
     screen.getByRole("combobox").click()
     expect(onClickSpy).not.toHaveBeenCalled()
   })
 
-  test("does not execute onChange handler when disabled", async () => {
+  test("does not execute onChange handler when disabled", () => {
     const onChangeSpy = jest.fn()
     render(<NativeSelect onChange={onChangeSpy} disabled />)
     screen.getByRole("combobox").click()
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
-  test("renders a loading Select as passed", async () => {
+  test("renders a loading Select as passed", () => {
     render(<NativeSelect loading />)
     expect(screen.getByRole("combobox")).toBeDisabled()
     expect(screen.getByRole("progressbar")).toBeInTheDocument()
   })
 
-  test("can not be clicked when loading", async () => {
+  test("can not be clicked when loading", () => {
     const onClickSpy = jest.fn()
     render(<NativeSelect loading onClick={onClickSpy} />)
     screen.getByRole("combobox").click()
     expect(onClickSpy).not.toHaveBeenCalled()
   })
 
-  test("renders a wrapperClassName to the outer wrapping element", async () => {
+  test("renders a wrapperClassName to the outer wrapping element", () => {
     render(<NativeSelect wrapperClassName="my-wrapper-class" />)
     expect(document.querySelector(".juno-select-wrapper")).toBeInTheDocument()
     expect(document.querySelector(".juno-select-wrapper")).toHaveClass("my-wrapper-class")
   })
 
-  test("renders all props as passed", async () => {
+  test("renders all props as passed", () => {
     render(<NativeSelect data-lolol="some-random-prop" />)
     expect(screen.getByRole("combobox")).toBeInTheDocument()
     expect(screen.getByRole("combobox")).toHaveAttribute("data-lolol", "some-random-prop")
diff --git a/packages/ui-components/src/components/Select/Select.test.js b/packages/ui-components/src/components/Select/Select.test.js
index 631277ab8..2e2b19b40 100644
--- a/packages/ui-components/src/components/Select/Select.test.js
+++ b/packages/ui-components/src/components/Select/Select.test.js
@@ -582,7 +582,7 @@ describe("Select", () => {
   })
 })
 
-test("renders a wrapperClassName to the outer wrapping element", async () => {
+test("renders a wrapperClassName to the outer wrapping element", () => {
   render(
     <Select wrapperClassName="my-wrapper-class">
       <SelectOption>Option 1</SelectOption>
diff --git a/packages/ui-components/src/components/Switch/Switch.test.js b/packages/ui-components/src/components/Switch/Switch.test.js
index ac9d6534e..55aebdd98 100644
--- a/packages/ui-components/src/components/Switch/Switch.test.js
+++ b/packages/ui-components/src/components/Switch/Switch.test.js
@@ -8,31 +8,31 @@ import { render, screen } from "@testing-library/react"
 import { Switch } from "./index"
 
 describe("Switch", () => {
-  test("renders a switch button", async () => {
+  test("renders a switch button", () => {
     render(<Switch />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
   })
 
-  test("renders a switch with a name as passed", async () => {
+  test("renders a switch with a name as passed", () => {
     render(<Switch name="My Switch" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveAttribute("name", "My Switch")
   })
 
-  test("renders a switch with an id as passed", async () => {
+  test("renders a switch with an id as passed", () => {
     render(<Switch id="my-switch" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveAttribute("id", "my-switch")
   })
 
-  test("renders a switch with an auto-generated id if no id is passed", async () => {
+  test("renders a switch with an auto-generated id if no id is passed", () => {
     render(<Switch />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveAttribute("id")
     expect(screen.getByRole("switch").getAttribute("id")).toMatch("juno-switch")
   })
 
-  test("renders a Switch with an associated label with an id as passed", async () => {
+  test("renders a Switch with an associated label with an id as passed", () => {
     render(<Switch id="my-switch" label="My Switch" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByLabelText("My Switch")).toBeInTheDocument()
@@ -40,13 +40,13 @@ describe("Switch", () => {
     expect(document.querySelector(".juno-label")).toHaveTextContent("My Switch")
   })
 
-  test("renders a Switch with a label associated by an auto-generated id if no id was passed", async () => {
+  test("renders a Switch with a label associated by an auto-generated id if no id was passed", () => {
     render(<Switch label="This is a Switch" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByLabelText("This is a Switch")).toBeInTheDocument()
   })
 
-  test("renders a disabled switch as passed", async () => {
+  test("renders a disabled switch as passed", () => {
     act(() => {
       render(<Switch disabled />)
     })
@@ -54,7 +54,7 @@ describe("Switch", () => {
     expect(screen.getByRole("switch")).toBeDisabled()
   })
 
-  test("renders an invalid Switch as passed", async () => {
+  test("renders an invalid Switch as passed", () => {
     act(() => {
       render(<Switch invalid />)
     })
@@ -63,7 +63,7 @@ describe("Switch", () => {
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
-  test("renders a valid Switch as passed", async () => {
+  test("renders a valid Switch as passed", () => {
     act(() => {
       render(<Switch valid />)
     })
@@ -72,25 +72,25 @@ describe("Switch", () => {
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
-  test("renders a default size switch by default", async () => {
+  test("renders a default size switch by default", () => {
     render(<Switch />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-default")
   })
 
-  test("renders a small switch as passed", async () => {
+  test("renders a small switch as passed", () => {
     render(<Switch size="small" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-small")
   })
 
-  test("renders a large switch as passed", async () => {
+  test("renders a large switch as passed", () => {
     render(<Switch size="large" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-large")
   })
 
-  test("renders an aria-checked switch as passed", async () => {
+  test("renders an aria-checked switch as passed", () => {
     act(() => {
       render(<Switch on />)
     })
@@ -98,20 +98,20 @@ describe("Switch", () => {
     expect(screen.getByRole("switch")).toHaveAttribute("aria-checked")
   })
 
-  test("renders an aria-checked attribute set to false if off", async () => {
+  test("renders an aria-checked attribute set to false if off", () => {
     render(<Switch />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveAttribute("aria-checked", "false")
   })
 
-  test("renders a helptext as passed", async () => {
+  test("renders a helptext as passed", () => {
     render(<Switch helptext="this is a helptext" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
     expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
   })
 
-  test("renders a successtext as passed and validates the Element", async () => {
+  test("renders a successtext as passed and validates the Element", () => {
     render(<Switch successtext="great success!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
@@ -119,7 +119,7 @@ describe("Switch", () => {
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-valid")
   })
 
-  test("renders an errortext as passed and invalidates the Element", async () => {
+  test("renders an errortext as passed and invalidates the Element", () => {
     render(<Switch errortext="this is an error!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")
@@ -127,26 +127,26 @@ describe("Switch", () => {
     expect(screen.getByRole("switch")).toHaveClass("juno-switch-invalid")
   })
 
-  test("renders a wrapperClassName to the outer wrapper element", async () => {
+  test("renders a wrapperClassName to the outer wrapper element", () => {
     render(<Switch wrapperClassName="my-wrapper-class" />)
     expect(document.querySelector(".juno-switch-wrapper")).toBeInTheDocument()
     expect(document.querySelector(".juno-switch-wrapper")).toHaveClass("my-wrapper-class")
   })
 
-  test("renders a custom className", async () => {
+  test("renders a custom className", () => {
     render(<Switch className="my-custom-class" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveClass("my-custom-class")
   })
 
-  test("renders all props as passed", async () => {
+  test("renders all props as passed", () => {
     render(<Switch id="switch-1" data-test="23" />)
     expect(screen.getByRole("switch")).toBeInTheDocument()
     expect(screen.getByRole("switch")).toHaveAttribute("id", "switch-1")
     expect(screen.getByRole("switch")).toHaveAttribute("data-test", "23")
   })
 
-  test("executes custom handler on change as passed", async () => {
+  test("executes custom handler on change as passed", () => {
     const onChangeSpy = jest.fn()
     render(<Switch onChange={onChangeSpy} />)
     act(() => {
@@ -155,7 +155,7 @@ describe("Switch", () => {
     expect(onChangeSpy).toHaveBeenCalled()
   })
 
-  test("executes handler on click as passed", async () => {
+  test("executes handler on click as passed", () => {
     const onClickSpy = jest.fn()
     render(<Switch onClick={onClickSpy} />)
     act(() => {
@@ -164,7 +164,7 @@ describe("Switch", () => {
     expect(onClickSpy).toHaveBeenCalled()
   })
 
-  test("does not execute handler on change when disabled", async () => {
+  test("does not execute handler on change when disabled", () => {
     const onChangeSpy = jest.fn()
     render(<Switch onChange={onChangeSpy} disabled />)
     act(() => {
@@ -173,7 +173,7 @@ describe("Switch", () => {
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
-  test("does not execute handler on click when disabled", async () => {
+  test("does not execute handler on click when disabled", () => {
     const onClickSpy = jest.fn()
     render(<Switch onClick={onClickSpy} disabled />)
     act(() => {
diff --git a/packages/ui-components/src/components/TextInput/TextInput.test.js b/packages/ui-components/src/components/TextInput/TextInput.test.js
index f11bb33fc..bdfe72581 100644
--- a/packages/ui-components/src/components/TextInput/TextInput.test.js
+++ b/packages/ui-components/src/components/TextInput/TextInput.test.js
@@ -8,44 +8,44 @@ import { render, screen, fireEvent } from "@testing-library/react"
 import { TextInput } from "./index"
 
 describe("TextInput", () => {
-  test("renders a html default text input with no type attribute", async () => {
+  test("renders a html default text input with no type attribute", () => {
     render(<TextInput />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).not.toHaveAttribute("type")
   })
 
-  test("renders a text input with a name as passed", async () => {
+  test("renders a text input with a name as passed", () => {
     render(<TextInput name="My TextInput" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("name", "My TextInput")
   })
 
-  test("renders a text input with a value as passed", async () => {
+  test("renders a text input with a value as passed", () => {
     render(<TextInput value="Some kind of value" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("value", "Some kind of value")
   })
 
-  test("renders a label as passed", async () => {
+  test("renders a label as passed", () => {
     render(<TextInput label="The Label" id="my-textinput" />)
     expect(document.querySelector(".juno-label")).toBeInTheDocument()
     expect(document.querySelector(".juno-label")).toHaveTextContent("The Label")
   })
 
-  test("renders a text input with an id as passed", async () => {
+  test("renders a text input with an id as passed", () => {
     render(<TextInput id="my-textinput" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id", "my-textinput")
   })
 
-  test("renders a text input with an auto-generated id if no id is passed", async () => {
+  test("renders a text input with an auto-generated id if no id is passed", () => {
     render(<TextInput />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id")
     expect(screen.getByRole("textbox").getAttribute("id")).toMatch("juno-textinput")
   })
 
-  test("renders a text input with a label associated by an id as passed", async () => {
+  test("renders a text input with a label associated by an id as passed", () => {
     render(<TextInput label="TextInput goes here" id="ti-1" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id")
@@ -53,89 +53,89 @@ describe("TextInput", () => {
     expect(screen.getByLabelText("TextInput goes here")).toBeInTheDocument()
   })
 
-  test("renders a text input with a label associated by an auto-generated id if no id was passed", async () => {
+  test("renders a text input with a label associated by an auto-generated id if no id was passed", () => {
     render(<TextInput label="This is a TextInput" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByLabelText("This is a TextInput")).toBeInTheDocument()
   })
 
-  test("renders a placeholder as passed", async () => {
+  test("renders a placeholder as passed", () => {
     render(<TextInput placeholder="my placeholder" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "my placeholder")
   })
 
   // resort to using a testId since <input type=""password" has no accessible wai-aria role:
-  test("renders a password input as passed", async () => {
+  test("renders a password input as passed", () => {
     render(<TextInput type="password" data-testid="pw" />)
     expect(screen.getByTestId("pw")).toBeInTheDocument()
     expect(screen.getByTestId("pw")).toHaveAttribute("type", "password")
   })
 
-  test("renders an email input as passed", async () => {
+  test("renders an email input as passed", () => {
     render(<TextInput type="email" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("type", "email")
   })
 
-  test("renders a telephone number input as passed", async () => {
+  test("renders a telephone number input as passed", () => {
     render(<TextInput type="tel" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("type", "tel")
   })
 
-  test("renders an url input as passed", async () => {
+  test("renders an url input as passed", () => {
     render(<TextInput type="url" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("type", "url")
   })
 
-  test("renders a number input as passed", async () => {
+  test("renders a number input as passed", () => {
     render(<TextInput type="number" />)
     expect(screen.getByRole("spinbutton")).toBeInTheDocument()
     expect(screen.getByRole("spinbutton")).toHaveAttribute("type", "number")
   })
 
-  test("renders a disabled input as passed", async () => {
+  test("renders a disabled input as passed", () => {
     render(<TextInput disabled />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toBeDisabled()
   })
 
-  test("renders a readonly input as passed", async () => {
+  test("renders a readonly input as passed", () => {
     render(<TextInput readOnly />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("readonly")
   })
 
-  test("renders a focussed input as passed", async () => {
+  test("renders a focussed input as passed", () => {
     render(<TextInput autoFocus />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveFocus()
   })
 
-  test("renders an invalid input as passed", async () => {
+  test("renders an invalid input as passed", () => {
     render(<TextInput invalid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-invalid")
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
-  test("renders a valid input as passed", async () => {
+  test("renders a valid input as passed", () => {
     render(<TextInput valid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-valid")
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
-  test("renders a helptext as passed", async () => {
+  test("renders a helptext as passed", () => {
     render(<TextInput helptext="this is a helptext" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
     expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
   })
 
-  test("renders a successtext as passed and validates the Element", async () => {
+  test("renders a successtext as passed and validates the Element", () => {
     render(<TextInput successtext="great success!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
@@ -143,7 +143,7 @@ describe("TextInput", () => {
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-valid")
   })
 
-  test("renders an errortext as passed and invalidates the Element", async () => {
+  test("renders an errortext as passed and invalidates the Element", () => {
     render(<TextInput errortext="this is an error!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")
@@ -151,7 +151,7 @@ describe("TextInput", () => {
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-invalid")
   })
 
-  test("fires onChange handler as passed", async () => {
+  test("fires onChange handler as passed", () => {
     const handleChange = jest.fn()
     render(<TextInput onChange={handleChange} data-testid="my-input" />)
     const textinput = screen.getByRole("textbox")
@@ -159,26 +159,26 @@ describe("TextInput", () => {
     expect(handleChange).toHaveBeenCalledTimes(1)
   })
 
-  test("does not fire onChange handler when disabled", async () => {
+  test("does not fire onChange handler when disabled", () => {
     const onChangeSpy = jest.fn()
     render(<TextInput onChange={onChangeSpy} disabled />)
     screen.getByRole("textbox").click()
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
-  test("renders a wrapperClassName to the outer wrapper element", async () => {
+  test("renders a wrapperClassName to the outer wrapper element", () => {
     render(<TextInput wrapperClassName="my-wrapper-class" />)
     expect(document.querySelector(".juno-textinput-wrapper")).toBeInTheDocument()
     expect(document.querySelector(".juno-textinput-wrapper")).toHaveClass("my-wrapper-class")
   })
 
-  test("renders a className as passed", async () => {
+  test("renders a className as passed", () => {
     render(<TextInput className="my-custom-class" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("my-custom-class")
   })
 
-  test("renders other props as passed", async () => {
+  test("renders other props as passed", () => {
     render(<TextInput data-lolol="527" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("data-lolol", "527")
diff --git a/packages/ui-components/src/components/Textarea/Textarea.test.js b/packages/ui-components/src/components/Textarea/Textarea.test.js
index 58a5d310f..f656c1b18 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.test.js
+++ b/packages/ui-components/src/components/Textarea/Textarea.test.js
@@ -8,22 +8,22 @@ import { render, screen, fireEvent } from "@testing-library/react"
 import { Textarea } from "./index"
 
 describe("Textarea", () => {
-  test("renders a native html textarea", async () => {
+  test("renders a native html textarea", () => {
     render(<Textarea />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
   })
 
-  test("renders a name as passed", async () => {
+  test("renders a name as passed", () => {
     render(<Textarea name="my-textarea" />)
     expect(screen.getByRole("textbox")).toHaveAttribute("name", "my-textarea")
   })
 
-  test("renders text content as passed", async () => {
+  test("renders text content as passed", () => {
     render(<Textarea value="Test some text" />)
     expect(screen.getByRole("textbox")).toHaveTextContent("Test some text")
   })
 
-  test("renders a label as passed", async () => {
+  test("renders a label as passed", () => {
     render(<Textarea label="The Label" id="my-textarea" />)
     // implicitly test whether the textarea element can be selected via the labels text:
     expect(screen.getByLabelText("The Label")).toBeInTheDocument()
@@ -31,20 +31,20 @@ describe("Textarea", () => {
     expect(document.querySelector(".juno-label")).toHaveTextContent("The Label")
   })
 
-  test("renders a Textarea with an id as passed", async () => {
+  test("renders a Textarea with an id as passed", () => {
     render(<Textarea id="my-textarea" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id", "my-textarea")
   })
 
-  test("renders a Textarea with an auto-generated id if no id is passed", async () => {
+  test("renders a Textarea with an auto-generated id if no id is passed", () => {
     render(<Textarea />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id")
     expect(screen.getByRole("textbox").getAttribute("id")).toMatch("juno-textarea")
   })
 
-  test("renders a Textarea with a label associated by an id as passed", async () => {
+  test("renders a Textarea with a label associated by an id as passed", () => {
     render(<Textarea label="My Textarea" id="ta-1" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveAttribute("id")
@@ -52,55 +52,55 @@ describe("Textarea", () => {
     expect(screen.getByLabelText("My Textarea")).toBeInTheDocument()
   })
 
-  test("renders a Textarea with a label associated by an auto-generated id if no id was passed", async () => {
+  test("renders a Textarea with a label associated by an auto-generated id if no id was passed", () => {
     render(<Textarea label="This is a Textarea" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByLabelText("This is a Textarea")).toBeInTheDocument()
   })
 
-  test("renders an invalid textarea as passed", async () => {
+  test("renders an invalid textarea as passed", () => {
     render(<Textarea invalid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
 
-  test("renders a valid textarea as passed", async () => {
+  test("renders a valid textarea as passed", () => {
     render(<Textarea valid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
 
-  test("renders a placeholder as passed", async () => {
+  test("renders a placeholder as passed", () => {
     render(<Textarea placeholder="My placeholder" />)
     expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "My placeholder")
   })
 
-  test("renders a disabled textarea as passed", async () => {
+  test("renders a disabled textarea as passed", () => {
     render(<Textarea disabled />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toBeDisabled()
   })
 
-  test("renders autocomplete on as passed", async () => {
+  test("renders autocomplete on as passed", () => {
     render(<Textarea autoComplete="on" />)
     expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "on")
   })
 
-  test("renders autofocus as passed", async () => {
+  test("renders autofocus as passed", () => {
     render(<Textarea autoFocus />)
     expect(screen.getByRole("textbox")).toHaveFocus()
   })
 
-  test("renders a helptext as passed", async () => {
+  test("renders a helptext as passed", () => {
     render(<Textarea helptext="this is a helptext" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
     expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
   })
 
-  test("renders a successtext as passed and validates the Element", async () => {
+  test("renders a successtext as passed and validates the Element", () => {
     render(<Textarea successtext="great success!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
@@ -108,7 +108,7 @@ describe("Textarea", () => {
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
   })
 
-  test("renders an errortext as passed and invalidates the Element", async () => {
+  test("renders an errortext as passed and invalidates the Element", () => {
     render(<Textarea errortext="this is an error!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")
@@ -116,7 +116,7 @@ describe("Textarea", () => {
     expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
   })
 
-  test("fires onChange handler as passed", async () => {
+  test("fires onChange handler as passed", () => {
     const handleChange = jest.fn()
     render(<Textarea onChange={handleChange} />)
     const textarea = screen.getByRole("textbox")
@@ -124,25 +124,25 @@ describe("Textarea", () => {
     expect(handleChange).toHaveBeenCalledTimes(1)
   })
 
-  test("does not fire onChange handler when disabled", async () => {
+  test("does not fire onChange handler when disabled", () => {
     const onChangeSpy = jest.fn()
     render(<Textarea onChange={onChangeSpy} disabled />)
     screen.getByRole("textbox").click()
     expect(onChangeSpy).not.toHaveBeenCalled()
   })
 
-  test("renders a wrapperClassName to the wrapping <div> element", async () => {
+  test("renders a wrapperClassName to the wrapping <div> element", () => {
     render(<Textarea wrapperClassName="my-wrapper-class" />)
     expect(document.querySelector(".juno-textarea-wrapper")).toBeInTheDocument()
     expect(document.querySelector(".juno-textarea-wrapper")).toHaveClass("my-wrapper-class")
   })
 
-  test("renders a className as passed", async () => {
+  test("renders a className as passed", () => {
     render(<Textarea className="my-custom-class" />)
     expect(screen.getByRole("textbox")).toHaveClass("my-custom-class")
   })
 
-  test("renders other props as passed", async () => {
+  test("renders other props as passed", () => {
     render(<Textarea cols="100" rows="25" minLength="0" maxLength="100" />)
     expect(screen.getByRole("textbox")).toHaveAttribute("cols", "100")
     expect(screen.getByRole("textbox")).toHaveAttribute("rows", "25")