From b8a7a18de1e388b5c30b2222f63fbb401a55c17a Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Tue, 23 Jan 2024 12:03:37 +0300
Subject: [PATCH] feat(Textarea): add `align` (#6434)

- closed #6363
---
 .../src/components/Textarea/Textarea.e2e-playground.tsx   | 6 ++++++
 packages/vkui/src/components/Textarea/Textarea.module.css | 8 ++++++++
 packages/vkui/src/components/Textarea/Textarea.tsx        | 6 +++++-
 .../textarea-android-chromium-dark-1-snap.png             | 4 ++--
 .../textarea-android-chromium-light-1-snap.png            | 4 ++--
 .../textarea-ios-webkit-dark-1-snap.png                   | 4 ++--
 .../textarea-ios-webkit-light-1-snap.png                  | 4 ++--
 .../textarea-vkcom-chromium-dark-1-snap.png               | 4 ++--
 .../textarea-vkcom-chromium-light-1-snap.png              | 4 ++--
 .../textarea-vkcom-firefox-dark-1-snap.png                | 4 ++--
 .../textarea-vkcom-firefox-light-1-snap.png               | 4 ++--
 .../textarea-vkcom-webkit-dark-1-snap.png                 | 4 ++--
 .../textarea-vkcom-webkit-light-1-snap.png                | 4 ++--
 13 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx b/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx
index 29ff4fa499..983a9de525 100644
--- a/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx
+++ b/packages/vkui/src/components/Textarea/Textarea.e2e-playground.tsx
@@ -34,6 +34,12 @@ export const TextareaPlayground = (props: ComponentPlaygroundProps) => {
         {
           status: ['error', 'valid'],
         },
+        {
+          align: ['center', 'right'],
+          defaultValue: [
+            'Музыка\nСпорт\nФотография\nПлавание\nПрограммирование\nПутешествия\nКниги\nСериалы\nФильмы\nНастольные игры',
+          ],
+        },
       ]}
     >
       {(props: TextareaProps) => <Textarea {...props} />}
diff --git a/packages/vkui/src/components/Textarea/Textarea.module.css b/packages/vkui/src/components/Textarea/Textarea.module.css
index 9e25c9e5d0..07b27ec454 100644
--- a/packages/vkui/src/components/Textarea/Textarea.module.css
+++ b/packages/vkui/src/components/Textarea/Textarea.module.css
@@ -45,3 +45,11 @@
 .Textarea__el:disabled::placeholder {
   color: var(--vkui--color_text_secondary);
 }
+
+.Textarea--align-center .Textarea__el {
+  text-align: center;
+}
+
+.Textarea--align-right .Textarea__el {
+  text-align: end;
+}
diff --git a/packages/vkui/src/components/Textarea/Textarea.tsx b/packages/vkui/src/components/Textarea/Textarea.tsx
index e440497084..83dd67cb9d 100644
--- a/packages/vkui/src/components/Textarea/Textarea.tsx
+++ b/packages/vkui/src/components/Textarea/Textarea.tsx
@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
-import { HasRef, HasRootRef } from '../../types';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, FormFieldProps } from '../FormField/FormField';
 import { Text } from '../Typography/Text/Text';
 import styles from './Textarea.module.css';
@@ -18,6 +18,7 @@ export interface TextareaProps
     HasRef<HTMLTextAreaElement>,
     HasRootRef<HTMLElement>,
     Pick<React.CSSProperties, 'maxHeight'>,
+    HasAlign,
     Pick<FormFieldProps, 'status'> {
   grow?: boolean;
   onResize?(el: HTMLTextAreaElement): void;
@@ -40,6 +41,7 @@ export const Textarea = ({
   status,
   onChange: onChangeProp,
   value: valueProp,
+  align,
   ...restProps
 }: TextareaProps) => {
   const [value, onChange] = useEnsuredControl({
@@ -71,6 +73,8 @@ export const Textarea = ({
       className={classNames(
         styles['Textarea'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
+        align === 'right' && styles['Textarea--align-right'],
+        align === 'center' && styles['Textarea--align-center'],
         className,
       )}
       style={style}
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-dark-1-snap.png
index 35cc00ba91..1f75479e70 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e83bdc38b87ca55beaffe89266c3c6968456abf0a8ac9baa28b0c28838a7dc0a
-size 62259
+oid sha256:95bd892b671b7bfc3dc0d82144a5fa0067eee46e55c3cf03b5c1c0aa5b839301
+size 96433
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-light-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-light-1-snap.png
index f4b3159993..ac04a28bad 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:00b2429cb4709aac8a9fbc7401efb7cc968eebc26c63e2d3a1db9f958848bae6
-size 62335
+oid sha256:0de26c30aeb01a3aecc6ea3fb7b64effdedbaf3a60fb943e0307e837b01d6f71
+size 96077
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-dark-1-snap.png
index 26ca25a79e..dcd63b6a9a 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be60879d04941ce396068f88162f23cd8cd8ce5926f73db4eff303222dafe7d0
-size 57789
+oid sha256:d5fcaadc1d4d72a5f9986ffd3175aeafb2ba2d0fb8f8d771885851ba1d3f5571
+size 89462
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-light-1-snap.png
index eae43a2d04..35e4949317 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4ef296b58ec961ab4edcd6303897a23a96a0878e108149ad03d51a041c5d314e
-size 58482
+oid sha256:cc53bd06bea9735892fd2cc8d7678efdff3bb44fe31e9de860513dad163cf3d6
+size 89695
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-dark-1-snap.png
index 3bbf06d143..e1415ef342 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2e57cb954a0b9e7fb7c4e617223c9e35a554061fda9dada75d1327bfe6187040
-size 55411
+oid sha256:5417bc275dc3e614981a24c903bb48b4dc0c9527d72beded0b03e6bd49761cf9
+size 95155
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-light-1-snap.png
index 8f29cafc62..557de56ce1 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d41ccdd63afa156604dd0fc8878ac6735000eead30c9197e38b77f62d601ff8
-size 55309
+oid sha256:02d6fc12c55ca919465a09a8e5bf6bf62c60e056df5692db96d229951cb730d6
+size 94732
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-dark-1-snap.png
index 6c537238bb..832724ba71 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0cf955c18f93ba937ffebe2267579d17d7cf2dcd9809569947d7c99f631ab83
-size 81299
+oid sha256:f44036e36ba0bb08b7b6b4ed4b5cd80ea51147af4bf23ec6266bfc2003c33f3f
+size 140962
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-light-1-snap.png
index d201ee5c54..77a6545910 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d77c8f05c2700339edcef0848a0a39b909d99b98723393cc9dd1afe3364b527
-size 82391
+oid sha256:f2524b76e3b48346b1c442c6b6e06c7f4f6bef8f4dea7f439dd341059dc9c04a
+size 142236
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-dark-1-snap.png
index 7139431dfd..2f993abf99 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2c693cd41542892742aa199861572084529ce0fea600195c08fa042189471cf2
-size 48375
+oid sha256:9cd6f6a9addf8cdcd6728ac97631cdba9c2596b2f374cdb9636ef615a56c5ac9
+size 84447
diff --git a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-light-1-snap.png
index 8ad03e7518..20547ea904 100644
--- a/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Textarea/__image_snapshots__/textarea-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6cc078c5d2146365de8a66dc1f290d560d2e3fdec9efd0309b757f9168bbcb08
-size 48883
+oid sha256:ea9a9a558970f0bd01322a540acfdeb0c33931290ec0e6d07f0dc82824270cd7
+size 84939