Merge pull request #1809 from epam/feature/TextArea-design-improvement

[TextArea]: deprecated size 48
epam · Dec 8, 2023 · 4c85213 · 4c85213
2 parents 2d019a5 + 70d114d
commit 4c85213
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 25 deletions.
diff --git a/app/src/docs/TextArea.doc.tsx b/app/src/docs/TextArea.doc.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as uui from '@epam/uui';
 import * as loveship from '@epam/loveship';
 import * as promo from '@epam/promo';
+import * as electric from '@epam/electric';
 import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
 import { EditableDocContent, DocExample, BaseDocsBlock } from '../common';
 
@@ -15,6 +16,7 @@ export class TextAreaDoc extends BaseDocsBlock {
             [TSkin.Loveship]: { type: '@epam/uui:TextAreaProps', component: loveship.TextArea },
             [TSkin.Promo]: { type: '@epam/uui:TextAreaProps', component: promo.TextArea },
             [TSkin.UUI]: { type: '@epam/uui:TextAreaProps', component: uui.TextArea },
+            [TSkin.Electric]: { type: '@epam/uui:TextAreaProps', component: electric.TextArea },
         },
         doc: (doc: DocBuilder<uui.TextAreaProps>) => {
             doc.merge('mode', { defaultValue: 'form' });

diff --git a/changelog.md b/changelog.md
@@ -31,6 +31,7 @@
     * Added `clearAllChecked()` method to `IDataSourceView` interface to support unchecking all without enabled `selectAll` flag.
     * Reduced amount of loaded data while clearing all checked elements in `cascadeSelection: false` mode.
 * [LazyDataSource]: fixed showing placeholders on `clearCache`.
+* [TextArea]: size `48` is deprecated and will be removed in future release. Please, use size `42` instead. 
 * [TextPlaceholder]: fixed animation performance issues
 * [LazyListView]: fixed backgroundReload functionality.
     * Fixed showing blocker when filter/sorting changed.

diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
@@ -91056,7 +91056,10 @@
      "raw": "TextAreaMods",
      "print": [
       "interface TextAreaMods extends types.IHasEditMode {",
-      "    /** @default '36' */",
+      "    /**",
+      "     * @default '36'.",
+      "     * Size '48' is deprecated, and will be removed in future release",
+      "     * */",
       "    size?: types.ControlSize;",
       "}"
      ]
@@ -91067,11 +91070,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
-       ],
-       "tags": {
-        "@default": "36"
-       }
+        "@default '36'.",
+        " Size '48' is deprecated, and will be removed in future release"
+       ]
       },
       "typeValue": {
        "raw": "'36' | '48' | '24' | '30' | '42' | 'none'"
@@ -91476,11 +91477,9 @@
       "name": "size",
       "comment": {
        "raw": [
-        "@default '36'"
-       ],
-       "tags": {
-        "@default": "36"
-       }
+        "@default '36'.",
+        " Size '48' is deprecated, and will be removed in future release"
+       ]
       },
       "typeValue": {
        "raw": "'36' | '48' | '24' | '30' | '42' | 'none'"

diff --git a/public/docs/docsGenOutput/docsGenStats.json b/public/docs/docsGenOutput/docsGenStats.json
@@ -1,8 +1,8 @@
 {
  "missingPropComment": {
   "totals": {
-   "amountProps": 623,
-   "amountTypes": 211
+   "amountProps": 622,
+   "amountTypes": 210
   },
   "value": [
    {
@@ -1270,12 +1270,6 @@
      "color"
     ]
    },
-   {
-    "typeRef": "@epam/uui:TextAreaMods",
-    "value": [
-     "size"
-    ]
-   },
    {
     "typeRef": "@epam/uui:TextInputMods",
     "value": [

diff --git a/uui/components/inputs/TextArea.tsx b/uui/components/inputs/TextArea.tsx
@@ -1,4 +1,4 @@
-import { withMods } from '@epam/uui-core';
+import { devLogger, withMods } from '@epam/uui-core';
 import { TextArea as uuiTextArea, TextAreaProps as UuiTextAreaProps } from '@epam/uui-components';
 import * as types from '../types';
 import css from './TextArea.module.scss';
@@ -7,7 +7,10 @@ const defaultSize = '36';
 const defaultMode = types.EditMode.FORM;
 
 export interface TextAreaMods extends types.IHasEditMode {
-    /** @default '36' */
+    /**
+     * @default '36'.
+     * Size '48' is deprecated, and will be removed in future release
+     * */
     size?: types.ControlSize;
 }
 
@@ -19,7 +22,22 @@ export function applyTextAreaMods(mods: TextAreaMods) {
 
 export type TextAreaProps = UuiTextAreaProps & TextAreaMods;
 
-export const TextArea = withMods<UuiTextAreaProps, TextAreaMods>(uuiTextArea, applyTextAreaMods, (props) => ({
-    autoSize: props.mode === types.EditMode.CELL ? true : props.autoSize,
-    maxLength: props.mode === types.EditMode.CELL ? undefined : props.maxLength,
-}));
+export const TextArea = withMods<UuiTextAreaProps, TextAreaMods>(
+    uuiTextArea,
+    applyTextAreaMods,
+    (props) => {
+        if (__DEV__) {
+            devLogger.warnAboutDeprecatedPropValue<TextAreaProps, 'size'>({
+                component: 'TextArea',
+                propName: 'size',
+                propValue: '48',
+                propValueUseInstead: '42',
+                condition: () => props.size === '48',
+            });
+        }
+        return {
+            autoSize: props.mode === types.EditMode.CELL ? true : props.autoSize,
+            maxLength: props.mode === types.EditMode.CELL ? undefined : props.maxLength,
+        };
+    },
+);