feat(OnyxTextarea): Implement OnyxTextarea success state (#2142)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #573 

Implemented success styles for OnyxTextarea

## Checklist

- [x] The added / edited code has been documented with
[JSDoc](https://jsdoc.app/about-getting-started)
- [x] All changes are documented in the documentation app (folder
`apps/docs`)
- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added
- [x] A changeset is added with `npx changeset add` if your changes
should be released as npm package (because they affect the library
usage)

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: MajaZarkova

.changeset/cuddly-gorillas-raise.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxTextarea): Implement success state styles

packages/sit-onyx/playwright/snapshots/components/OnyxTextarea/Textarea-success--chromium-linux.png

@@ -158,7 +158,6 @@ export const CustomError: Story = {
 
 /**
  * This example shows an input with a success message.
- * Will only be shown after user interaction.
  */
 export const SuccessInput: Story = {
   args: {

packages/sit-onyx/playwright/snapshots/components/OnyxTextarea/Textarea-success--firefox-linux.png

@@ -79,7 +79,6 @@ const errorClass = useErrorClass(showError);
             v-custom-validity
             :placeholder="props.placeholder"
             class="onyx-input__native"
-            :class="{ 'onyx-input__native--success': successMessages }"
             :type="props.type"
             :required="props.required"
             :autocapitalize="props.autocapitalize"

packages/sit-onyx/playwright/snapshots/components/OnyxTextarea/Textarea-success--webkit-linux.png

@@ -98,6 +98,35 @@ test.describe("Screenshot tests", () => {
     },
   });
 
+  executeMatrixScreenshotTest({
+    name: "Textarea (success)",
+    columns: ["default"],
+    rows: ["default", "hover", "focus"],
+    // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
+    disabledAccessibilityRules: ["color-contrast"],
+    component: () => (
+      <OnyxTextarea
+        style="width: 12rem"
+        label="Test label"
+        success={{ shortMessage: "Test success message", longMessage: "Test long success message" }}
+      />
+    ),
+    beforeScreenshot: async (component, page, column, row) => {
+      const input = component.getByLabel("Test label");
+      const formElementUtils = createFormElementUtils(page);
+
+      await component.evaluate((element) => {
+        element.style.padding = `0 5rem 3rem 2rem`;
+      });
+
+      if (row === "hover") {
+        await input.hover();
+        await formElementUtils.triggerTooltipVisible("message");
+      }
+      if (row === "focus") await input.focus();
+    },
+  });
+
   executeMatrixScreenshotTest({
     name: "Textarea (skeleton)",
     columns: DENSITIES,
@@ -441,3 +470,31 @@ test("should show error message after interaction", async ({ mount, makeAxeBuild
   // ASSERT
   expect(accessibilityScanResults.violations).toEqual([]);
 });
+
+test("should show correct message", async ({ mount }) => {
+  const message = { shortMessage: "Test short message" };
+  const successMessage = { shortMessage: "Test success short message" };
+  const component = await mount(
+    <OnyxTextarea label="Label" required success={successMessage} message={message} />,
+  );
+
+  const messageElement = component.getByText("Test short message");
+  const successMessageElement = component.getByText("Test success short message");
+  const errorMessageElement = component.getByText("Required");
+  const input = component.getByLabel("Label");
+
+  // ASSERT
+  await expect(messageElement).toBeHidden();
+  await expect(successMessageElement).toBeVisible();
+
+  //ACT
+  await input.click();
+  await input.fill("x");
+  await input.fill("");
+  await input.blur();
+
+  // ASSERT
+  await expect(messageElement).toBeHidden();
+  await expect(successMessageElement).toBeHidden();
+  await expect(errorMessageElement).toBeVisible();
+});

packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts

@@ -127,6 +127,20 @@ export const CustomError: Story = {
   },
 };
 
+/**
+ * This example shows a textarea with a success message.
+ */
+export const SuccessMessage: Story = {
+  args: {
+    ...Default.args,
+    success: {
+      shortMessage: "Example success message",
+      longMessage: "This text might inform the users that the text is valid.",
+    },
+    modelValue: "Test success value",
+  },
+};
+
 /**
  * This example shows a textarea with custom autosize settings (min=2 rows, max=12 rows).
  * You can also disable the max rows so the textarea can grow unlimited.

packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue

@@ -46,13 +46,6 @@
     padding: $vertical-padding var(--onyx-density-sm);
     height: calc(1lh + 2 * #{$vertical-padding});
 
-    &:has(#{$base-selector}__native--success:enabled:focus) {
-      --outline-color: var(--onyx-color-base-success-200);
-      --selection-color: var(--onyx-color-base-success-200);
-      --focus-border-color: var(--onyx-color-base-success-500);
-      --hover-border-color: var(--onyx-color-base-success-400);
-    }
-
     &:has(#{$base-selector}__native:read-write:hover) {
       --border-color: var(--hover-border-color, var(--onyx-color-base-primary-400));
     }
@@ -92,8 +85,12 @@
   }
 
   @include success(#{$base-selector}__native) {
-    --border-color: var(--onyx-color-base-success-500);
     --message-display: none;
+    --border-color: var(--onyx-color-base-success-500);
+    --outline-color: var(--onyx-color-base-success-200);
+    --selection-color: var(--onyx-color-base-success-200);
+    --focus-border-color: var(--onyx-color-base-success-500);
+    --hover-border-color: var(--onyx-color-base-success-400);
   }
 
   @include invalid(#{$base-selector}__native) {