chore(ui): wrapper class name new

.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

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,
 }

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(

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: "",
 }

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(

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,
 }

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()

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,
 }

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")
+})

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,
 }

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()

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,
 }

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()

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,
 }

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")