fix: change screenshots

Author: Petr Krotov

src/components/controls/TextArea/TextArea.scss

@@ -10,9 +10,7 @@ $block: '.#{variables.$ns}text-area';
     --_--placeholder-color: var(--g-color-text-hint);
     --_--background-color: transparent;
     --_--border-width: #{control-variables.$border-width};
-    --_--clear-offset: calc(
-        var(--g-text-area-border-width, #{control-variables.$border-width}) + 1px
-    );
+    --_--clear-offset: calc(var(--g-text-area-border-width, #{control-variables.$border-width}));
     --_--focus-outline-color: var(--g-text-area-focus-outline-color);
 
     display: inline-block;
@@ -77,10 +75,6 @@ $block: '.#{variables.$ns}text-area';
     }
 
     &__clear {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
         &_size_s,
         &_size_m {
             inset-inline-end: var(--_--clear-offset);
@@ -122,6 +116,10 @@ $block: '.#{variables.$ns}text-area';
                 @include control-mixins.input-control(s);
             }
 
+            &#{$block}_has-clear #{$block}__control {
+                padding-inline-end: 0;
+            }
+
             --_--error-icon-padding-block: 5px;
             --_--error-icon-padding-inline-start: 0;
             --_--error-icon-padding-inline-end: 5px;
@@ -134,6 +132,10 @@ $block: '.#{variables.$ns}text-area';
                 @include control-mixins.input-control(m);
             }
 
+            &#{$block}_has-clear #{$block}__control {
+                padding-inline-end: 0;
+            }
+
             --_--error-icon-padding-block: 6px;
             --_--error-icon-padding-inline-start: 0;
             --_--error-icon-padding-inline-end: 6px;
@@ -146,6 +148,10 @@ $block: '.#{variables.$ns}text-area';
                 @include control-mixins.input-control(l);
             }
 
+            &#{$block}_has-clear #{$block}__control {
+                padding-inline-end: 0;
+            }
+
             --_--error-icon-padding-block: 9px;
             --_--error-icon-padding-inline-start: 0;
             --_--error-icon-padding-inline-end: 9px;
@@ -158,6 +164,10 @@ $block: '.#{variables.$ns}text-area';
                 @include control-mixins.input-control(xl);
             }
 
+            &#{$block}_has-clear #{$block}__control {
+                padding-inline-end: 0;
+            }
+
             --_--error-icon-padding-block: 13px;
             --_--error-icon-padding-inline-start: 0;
             --_--error-icon-padding-inline-end: 13px;

src/components/controls/TextArea/TextArea.tsx

@@ -26,10 +26,15 @@ import './TextArea.scss';
 const b = block('text-area');
 
 export type TextAreaProps = BaseInputControlProps<HTMLTextAreaElement> & {
+    /** The control's html attributes */
     controlProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** The number of visible text lines for the control. If not specified, the hight will be automatically calculated based on the content */
     rows?: number;
+    /** The number of minimum visible text lines for the control. Ignored if `rows` is specified */
     minRows?: number;
+    /** The number of maximum visible text lines for the control. Ignored if `rows` is specified */
     maxRows?: number;
+    /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
     note?: React.ReactNode;
 };
 
@@ -138,8 +143,10 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
 
         React.useEffect(() => {
             const control = innerControlRef.current;
+
             if (control) {
                 const currHasVerticalScrollbar = control.scrollHeight > control.clientHeight;
+
                 if (hasVerticalScrollbar !== currHasVerticalScrollbar) {
                     setHasVerticalScrollbar(currHasVerticalScrollbar);
                 }

src/components/controls/TextArea/__snapshots__/TextArea.visual.test.tsx-snapshots/TextArea-smoke-with-error-light-chromium-linux.png

@@ -6,6 +6,7 @@ import {TextArea} from '../TextArea';
 
 import {
     disabledCases,
+    errorPlacementCases,
     hasClearCases,
     maxRowsCases,
     minRowsCases,
@@ -94,6 +95,7 @@ test.describe('TextArea', {tag: '@TextArea'}, () => {
             } as const,
             {
                 value: valueCases,
+                errorPlacement: errorPlacementCases,
             },
         );
 

src/components/controls/TextArea/__snapshots__/TextArea.visual.test.tsx-snapshots/TextArea-smoke-with-value-light-chromium-linux.png

@@ -13,6 +13,8 @@ export const hasClearCases: Array<TextAreaProps['hasClear']> = [true];
 
 export const validationStateCases: Array<TextAreaProps['validationState']> = ['invalid'];
 
+export const errorPlacementCases: Cases<TextAreaProps['errorPlacement']> = ['outside', 'inside'];
+
 export const pinCases: Cases<TextAreaProps['pin']> = [
     'round-round',
     'brick-brick',