Merge pull request #1816 from epam/feature/textInput-search-size60

[TextInput & Search]: added size 60 in uui, removed copy in skins.

app/src/docs/SearchInput.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 { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
 
@@ -13,10 +14,11 @@ export class SearchInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:SearchInputProps', component: uui.SearchInput },
-            [TSkin.Loveship]: { type: '@epam/loveship:SearchInputProps', component: loveship.SearchInput },
+            [TSkin.Loveship]: { type: '@epam/uui:SearchInputProps', component: loveship.SearchInput },
             [TSkin.Promo]: { type: '@epam/uui:SearchInputProps', component: promo.SearchInput },
+            [TSkin.Electric]: { type: '@epam/uui:SearchInputProps', component: electric.SearchInput },
         },
-        doc: (doc: DocBuilder<uui.SearchInputProps | loveship.SearchInputProps>) => {
+        doc: (doc: DocBuilder<uui.SearchInputProps>) => {
             doc.merge('iconPosition', { defaultValue: 'left' });
         },
     };

app/src/docs/TextInput.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 { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
 
@@ -13,10 +14,11 @@ export class TextInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Resizable, TDocContext.Form, TDocContext.Table],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:TextInputProps', component: uui.TextInput },
-            [TSkin.Loveship]: { type: '@epam/loveship:TextInputProps', component: loveship.TextInput },
+            [TSkin.Loveship]: { type: '@epam/uui:TextInputProps', component: loveship.TextInput },
             [TSkin.Promo]: { type: '@epam/uui:TextInputProps', component: promo.TextInput },
+            [TSkin.Electric]: { type: '@epam/uui:TextInputProps', component: electric.TextInput },
         },
-        doc: (doc: DocBuilder<uui.TextInputProps | loveship.TextInputProps>) => {
+        doc: (doc: DocBuilder<uui.TextInputProps>) => {
             doc.merge('type', { defaultValue: 'text' });
             doc.merge('mode', { defaultValue: 'form' });
             doc.merge('iconPosition', { defaultValue: 'left' });

epam-electric/components/index.ts

@@ -10,5 +10,5 @@ export {
     WarningNotification, SuccessNotification, HintNotification, ErrorNotification, ClearNotification, Checkbox, FlexSpacer, FlexCell, DataTableHeaderCell,
     Spinner, PickerModal, ModalBlocker, ModalHeader, ModalFooter, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, IndicatorBar, ProgressBar,
-    DataRowsContainer, ColumnHeaderDropdown, RichTextView, CountIndicator,
+    DataRowsContainer, ColumnHeaderDropdown, RichTextView, CountIndicator, SearchInput,
 } from '@epam/uui';

epam-promo/components/index.ts

@@ -14,6 +14,6 @@ export {
     WarningNotification, SuccessNotification, HintNotification, ErrorNotification, ClearNotification, DatePicker, RangeDatePicker, Checkbox, FlexSpacer, FlexCell,
     Spinner, DataPickerBody, PickerModal, ModalBlocker, ModalHeader, ModalFooter, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, IndicatorBar, ProgressBar, RichTextView,
-    Slider, ScrollBars, VirtualList,
+    Slider, ScrollBars, VirtualList, TextInput, SearchInput,
 } from '@epam/uui';
 export { MainMenuLogo, MainMenuCustomElement } from '@epam/uui-components';

epam-promo/components/inputs/index.tsx

@@ -1,3 +1,2 @@
 export * from './MultiSwitch';
 export * from './Rating';
-export * from './TextInput';

loveship/components/index.ts

@@ -15,6 +15,6 @@ export { FiltersPanel, PresetsPanel, defaultPredicates, Calendar, NumericInput,
     SuccessNotification, HintNotification, ErrorNotification, ClearNotification, FlexSpacer, FlexCell, Spinner, DataPickerBody, PickerModal, DataPickerFooter,
     ModalBlocker, ModalHeader, ModalFooter, LabeledInput, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, ProgressBar, IndicatorBar, Slider,
-    RichTextView, ScrollBars, VirtualList, Checkbox,
+    RichTextView, ScrollBars, VirtualList, Checkbox, TextInput, SearchInput,
 } from '@epam/uui';
 export { MainMenuLogo, MainMenuCustomElement } from '@epam/uui-components';

loveship/components/inputs/index.ts

@@ -1,4 +1,3 @@
-export * from './TextInput';
 export * from './Slider';
 export * from './Rating';
 export * from './RadioInput';

public/docs/docsGenOutput/docsGenOutput.d.ts

@@ -537,7 +537,6 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/loveship:RowMods' |
 '@epam/loveship:RowSize' |
 '@epam/loveship:RowSizeMod' |
-'@epam/loveship:SearchInputProps' |
 '@epam/loveship:SizeMod' |
 '@epam/loveship:SliderRatingProps' |
 '@epam/loveship:SnackbarCardProps' |
@@ -547,8 +546,6 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/loveship:TabButtonProps' |
 '@epam/loveship:TagMods' |
 '@epam/loveship:TagProps' |
-'@epam/loveship:TextInputMods' |
-'@epam/loveship:TextInputProps' |
 '@epam/loveship:TextMods' |
 '@epam/loveship:TextProps' |
 '@epam/loveship:TextSize' |

uui/assets/styles/text-size.scss

@@ -7,6 +7,8 @@
         @return (9px - $border-width);
     } @else if ($size == 48px) {
         @return (12px - $border-width);
+    } @else if ($size == 60px) {
+        @return (15px - $border-width);
     }
 
     @return (null);
@@ -31,6 +33,9 @@
     } @else if ($size == 48px) {
         line-height: 24px;
         font-size: 16px;
+    } @else if ($size == 60px) {
+        line-height: 24px;
+        font-size: 20px;
     }
     padding-top: vpadding($size, $border-width);
     padding-bottom: vpadding($size, $border-width);

uui/components/inputs/TextInput.module.scss

@@ -184,4 +184,16 @@
         @include control-vertical-layout(48px, 1px);
         min-width: 48px;
     }
+
+    &.size-60 {
+        @include control-vertical-layout(60px, 1px);
+        min-width: 60px;
+        padding-left: 11px;
+        padding-right: 11px;
+
+        :global(.uui-input) {
+            padding-left: 6px;
+            padding-right: 0;
+        }
+    }
 }

uui/components/inputs/TextInput.tsx

@@ -12,7 +12,7 @@ export interface TextInputMods extends IHasEditMode {
     /**
      * @default '36'
      */
-    size?: ControlSize;
+    size?: ControlSize | '60';
 }
 
 export function applyTextInputMods(mods: TextInputMods) {