@onewelcome/react-lib-components 0.3.0 → 1.0.1

package/src/Form/Textarea/Textarea.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../mixins.module.scss";
 
 .textarea-wrapper {

package/src/Form/Textarea/Textarea.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Textarea, Props } from "./Textarea";
 import { render } from "@testing-library/react";

package/src/Form/Textarea/Textarea.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useState } from "react";
 import { Icon, Props as IconProps, Icons } from "../../Icon/Icon";
 import classes from "./Textarea.module.scss";

package/src/Form/Toggle/Toggle.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 $borderRadius: 2.5rem;
 
 .toggle-wrapper {
@@ -23,7 +39,7 @@ $borderRadius: 2.5rem;
     height: 1rem;
     border-radius: 50%;
     display: block;
-    background-color: #fff;
+    background-color: var(--light);
     position: absolute;
     top: 50%;
     transform: translateY(-50%) translateX(0);

package/src/Form/Toggle/Toggle.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useRef, useEffect } from "react";
 import { Toggle, Props } from "./Toggle";
 import { render } from "@testing-library/react";

package/src/Form/Toggle/Toggle.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Checkbox, Props as CheckboxProps } from "../Checkbox/Checkbox";
 import classes from "./Toggle.module.scss";

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .checkbox-wrapper-helper {
   margin-top: 1.25rem;
 }

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { CheckboxWrapper, Props } from "./CheckboxWrapper";
 import { Checkbox, Props as CheckboxProps } from "../../Checkbox/Checkbox";

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
 import classes from "./CheckboxWrapper.module.scss";
 import { useWrapper } from "../../../hooks/useWrapper";

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -1,10 +1,26 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../../mixins.module.scss";
 
-@include inputLabelPrimaryColorOnFocus("label.input-label");
+@include inputLabelPrimaryColorOnFocus("label.input-label.focus");
 
 input {
   &.floating-label {
-    padding-top: 0.625rem;
+    padding-top: 1rem;
   }
 }
 
@@ -28,6 +44,14 @@ input {
     transform: translateY(-0.125rem);
   }
 
+  [data-prefix] + input {
+    padding-left: 0.5rem;
+  }
+
+  input + [data-suffix] {
+    padding-left: 0.5rem;
+  }
+
   .disabled {
     background-color: var(--disabled);
     cursor: not-allowed;
@@ -36,6 +60,6 @@ input {
 
 .floating-label-active [data-prefix],
 .floating-label-active [data-suffix] {
-  padding-top: 0.5rem;
+  padding-top: 1rem;
   transform: translateY(0);
 }

package/src/Form/Wrapper/InputWrapper/InputWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { InputWrapper, Props } from "./InputWrapper";
 import { render } from "@testing-library/react";

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useEffect, useRef, useState } from "react";
 import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .radio-wrapper-helper {
   margin-top: 1.25rem;
 }

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React from "react";
 import { RadioWrapper, Props } from "./RadioWrapper";
 import { Radio } from "../../Radio/Radio";

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
 import classes from "./RadioWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .select-label {
   left: calc(
     1.25rem + 2px

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { SelectWrapper, Props } from "./SelectWrapper";
 import { render } from "@testing-library/react";
@@ -5,7 +21,6 @@ import { Option } from "../../Select/Option";
 import userEvent from "@testing-library/user-event";
 
 const onChangeHandler = jest.fn();
-const onClearHandler = jest.fn();
 
 const defaultParams: Props = {
   children: [
@@ -29,8 +44,7 @@ const defaultParams: Props = {
   errorMessage: "errormessage",
   error: false,
   value: "option1",
-  onChange: onChangeHandler,
-  onClear: onClearHandler
+  onChange: onChangeHandler
 };
 
 const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -168,20 +182,4 @@ describe("SelectWrapper & Select have the right attributes", () => {
 
     expect(onChangeHandler).toHaveBeenCalled();
   });
-
-  it("Fires the onClear event", async () => {
-    const { select, findByText } = createSelectWrapper();
-
-    userEvent.click(select as Element);
-
-    const option3 = await findByText("Option 3");
-
-    userEvent.click(option3 as Element);
-
-    const clearButton = select!.querySelector("[data-clear]")!;
-
-    userEvent.click(clearButton);
-
-    expect(onClearHandler).toHaveBeenCalled();
-  });
 });

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactChild, ReactElement } from "react";
 import classes from "./SelectWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
@@ -15,22 +31,11 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-  onClear?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
   (
-    {
-      children,
-      error,
-      value,
-      placeholder,
-      selectProps,
-      helperProps,
-      onChange,
-      onClear,
-      ...rest
-    }: Props,
+    { children, error, value, placeholder, selectProps, helperProps, onChange, ...rest }: Props,
     ref
   ) => {
     const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
@@ -56,9 +61,6 @@ export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
           error={error}
           describedBy={error ? errorId : helperId}
           onChange={onChange}
-          onClear={e => {
-            onClear && onClear(e);
-          }}
           placeholder={placeholder}
           className={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
             selectProps?.className ?? ""

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -1,7 +1,48 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../../mixins.module.scss";
 
 @include inputLabelPrimaryColorOnFocus("label.textarea-label");
 
+.textarea-wrapper {
+  &:after {
+    content: "";
+    transition: all 0.15s ease-in-out;
+    display: block;
+    width: calc(95%);
+    height: 1.625rem;
+    background-color: var(--light);
+    position: absolute;
+    z-index: 0;
+    left: 1px;
+    top: 1px;
+    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+  }
+
+  &.disabled:after {
+    background-color: var(--disabled);
+  }
+
+  &.focus:after {
+    left: 2px;
+    top: 2px;
+  }
+}
+
 .textarea {
   padding-top: 1.625rem;
 
@@ -9,10 +50,6 @@
     border-color: var(--color-primary);
   }
 
-  &:hover:not(:disabled):not(.error) {
-    border-color: var(--default);
-  }
-
   &:focus:not(:disabled) {
     outline: none;
   }
@@ -23,35 +60,6 @@
   margin-left: 1.25rem;
 }
 
-.textarea-wrapper {
-  padding-top: 1.75rem;
-  padding-right: 3.75rem;
-  padding-bottom: 0.75rem;
-  border-color: var(--input-border-color);
-  border-style: var(--input-border-style);
-  border-width: var(--input-border-width);
-  border-radius: var(--input-border-radius);
-
-  &.error {
-    border-color: var(--error);
-  }
-
-  &.hover {
-    border-color: var(--default);
-  }
-
-  &.focus {
-    border-color: var(--color-primary);
-  }
-
-  &.disabled {
-    color: var(--greyed-out);
-    background-color: var(--disabled);
-    border-color: #fff;
-    cursor: not-allowed;
-  }
-}
-
 .error-icon {
   top: 1.75rem;
 }

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { TextareaWrapper, Props } from "./TextareaWrapper";
 import { render } from "@testing-library/react";

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useState } from "react";
 import classes from "./TextareaWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
@@ -51,12 +67,12 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
     } = useWrapper(value, placeholder);
     const [hover, setHover] = useState(false);
 
-    const optionalClasses: string[] = [];
+    const wrapperClasses: string[] = [];
 
-    hasFocus && optionalClasses.push(classes["focus"]);
-    hover && optionalClasses.push(classes["hover"]);
-    disabled && optionalClasses.push(classes["disabled"]);
-    error && optionalClasses.push(classes["error"]);
+    hasFocus && wrapperClasses.push(classes["focus"]);
+    hover && wrapperClasses.push(classes["hover"]);
+    disabled && wrapperClasses.push(classes["disabled"]);
+    error && wrapperClasses.push(classes["error"]);
 
     return (
       <Wrapper
@@ -65,7 +81,7 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
         disabled={disabled}
         labelProps={{
           id: labelId,
-          className: `${classes["textarea-label"]} ${optionalClasses.join(" ")}`
+          className: `${classes["textarea-label"]} ${wrapperClasses.join(" ")}`
         }}
         name={name}
         label={label}
@@ -110,7 +126,7 @@ export const TextareaWrapper = React.forwardRef<HTMLDivElement, Props>(
           }}
           className={`${classes["textarea"]} ${error ? classes["error"] : ""}`}
           wrapperProps={{
-            className: `${classes["textarea-wrapper"]}} ${optionalClasses.join(" ")}`
+            className: `${wrapperClasses.join(" ")} ${classes["textarea-wrapper"]}`
           }}
           errorProps={{ className: classes["error-icon"] }}
         />