Merged in feat/3685-new-textarea-component (pull request #3392)

feat(SW-3685): Add new TextArea and FormTextArea components * Add new TextArea and FormTextArea components * Update example form with description * Merge branch 'master' into feat/3685-new-textarea-component * Formatting new files with new prettier config * Added custom controls for the text area story Approved-by: Linus Flood
2026-01-07 17:04:30 +00:00
parent d0546926a9
commit 4980cc830d
17 changed files with 752 additions and 304 deletions
@@ -0,0 +1,70 @@
+.labelAbove {
+  color: var(--Text-Default);
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  line-height: 1.5;
+  margin-bottom: var(--Space-x1);
+}
+
+.container {
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  display: block;
+  min-width: 0;
+  height: 138px;
+  padding: var(--Space-x2);
+  box-sizing: border-box;
+  cursor: text;
+
+  &:has(.textarea:focus):not(:has(.textarea:disabled)):not(
+      :has(.textarea:read-only)
+    ):not(:has(.textarea[data-invalid="true"])):not(
+      :has(.textarea[aria-invalid="true"])
+    ) {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+  }
+
+  &:has(.textarea:disabled),
+  &:has(.textarea:read-only) {
+    background-color: var(--Surface-Primary-Disabled);
+    border: transparent;
+    cursor: unset;
+  }
+
+  &:has(.textarea[data-invalid="true"], .textarea[aria-invalid="true"]) {
+    border-color: var(--Border-Interactive-Error);
+
+    &:focus-within,
+    &:has(.textarea:focus) {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Error);
+      border-color: var(--Border-Interactive-Error);
+    }
+  }
+}
+
+.textarea {
+  background: none;
+  border: none;
+  color: var(--Text-Default);
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  resize: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled,
+  &:read-only {
+    color: var(--Text-Interactive-Disabled);
+    cursor: unset;
+  }
+}