Merge pull request #1810 from epam/feature/numericInput-design-improv…

…ement

[NumericInput]: deprecated size 48

app/src/common/MainMenuAppMultiSwitch.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import css from './MainMenuAppMultiSwitch.module.scss';
 import { IAnalyticableOnChange, IEditable } from '@epam/uui-core';
-import { ButtonProps } from '@epam/uui-components';
-import {
-    Button, ControlGroup, ButtonMods, ButtonColor, SizeMod,
-} from '@epam/promo';
+import { Button, ControlGroup, ButtonProps, SizeMod } from '@epam/promo';
 import { svc } from '../services';
 
-type MainMenuAppMultiSwitchPropsItem<TValue> = ButtonProps & ButtonMods & {
+type MainMenuAppMultiSwitchPropsItem<TValue> = ButtonProps & {
     id: TValue;
 };
 
 export interface MainMenuAppMultiSwitchProps<TValue> extends IEditable<TValue>, SizeMod, IAnalyticableOnChange<TValue> {
+    /**
+     * Defines an array of items for the MainMenuAppMultiSwitch component.
+     */
     items: MainMenuAppMultiSwitchPropsItem<TValue>[];
-    color?: ButtonColor;
+    /**
+     * Defines a component color.
+     */
+    color?: 'blue' | 'green' | 'red' | 'gray50' | 'gray';
 }
 
 export class MainMenuAppMultiSwitch<TValue> extends React.Component<MainMenuAppMultiSwitchProps<TValue>> {

app/src/demo/tables/filteredTable/columns.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Badge, FlexRow, LinkButton, BadgeColor } from '@epam/uui';
+import { Text, Badge, FlexRow, LinkButton, BadgeMods } from '@epam/uui';
 import { DataColumnProps, getSeparatedValue } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
 import css from './FilteredTable.module.scss';
@@ -20,7 +20,7 @@ export const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge size="24" indicator fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge size="24" indicator fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         grow: 0,

app/src/demo/tables/filteredTable/filters.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TableFiltersConfig, LazyDataSource, ArrayDataSource } from '@epam/uui-core';
 import { Country, demoData, Person } from '@epam/uui-docs';
-import { Badge, DataPickerRow, PickerItem, defaultPredicates, FlexRow, BadgeColor } from '@epam/uui';
+import { Badge, DataPickerRow, PickerItem, defaultPredicates, FlexRow, BadgeMods } from '@epam/uui';
 import { svc } from '../../../services';
 
 export const getFilters = (): TableFiltersConfig<Person>[] => {
@@ -20,7 +20,7 @@ export const getFilters = (): TableFiltersConfig<Person>[] => {
                     size="36"
                     alignItems="center"
                     key={ props.rowKey }
-                    renderItem={ (item: any) => <FlexRow size="36"><Badge size="24" fill="outline" indicator color={ item.name.toLowerCase() as BadgeColor } caption={ item.name } /></FlexRow> }
+                    renderItem={ (item: any) => <FlexRow size="36"><Badge size="24" fill="outline" indicator color={ item.name.toLowerCase() as BadgeMods['color'] } caption={ item.name } /></FlexRow> }
                 />
             ),
             predicates: defaultPredicates.multiPicker,

app/src/demo/tables/masterDetailedTable/InfoSidebarPanel/PersonInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge, BadgeColor, ScrollBars } from '@epam/uui';
+import { Badge, BadgeMods, ScrollBars } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 import { InfoRow } from './InfoRow';
 
@@ -11,7 +11,7 @@ export function PersonInfo({ data }: PersonInfoProps) {
     return (
         <ScrollBars>
             <InfoRow title="Name" value={ data.name } />
-            <InfoRow title="Status" value={ <Badge size="24" fill="outline" indicator caption={ data.profileStatus } color={ data.profileStatus.toLowerCase() as BadgeColor } /> } />
+            <InfoRow title="Status" value={ <Badge size="24" fill="outline" indicator caption={ data.profileStatus } color={ data.profileStatus.toLowerCase() as BadgeMods['color'] } /> } />
             <InfoRow title="Job Title" value={ data.jobTitle } />
             <InfoRow title="Title Level" value={ data.titleLevel } />
             <InfoRow title="Office" value={ data.officeAddress } />

app/src/demo/tables/masterDetailedTable/columns.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Badge, FlexRow, IconButton, LinkButton, BadgeColor } from '@epam/uui';
+import { Text, Badge, FlexRow, IconButton, LinkButton, BadgeMods } from '@epam/uui';
 import { DataColumnProps, DataQueryFilter } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
 import css from './DemoTable.module.scss';
@@ -22,7 +22,7 @@ export const personColumns: DataColumnProps<Person, PersonTableRecordId[], DataQ
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge size="24" indicator fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge size="24" indicator fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 140,

app/src/docs/NumericInput.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';
 
@@ -15,6 +16,7 @@ export class NumericInputDoc extends BaseDocsBlock {
             [TSkin.UUI]: { type: '@epam/uui:NumericInputProps', component: uui.NumericInput },
             [TSkin.Loveship]: { type: '@epam/uui:NumericInputProps', component: loveship.NumericInput },
             [TSkin.Promo]: { type: '@epam/uui:NumericInputProps', component: promo.NumericInput },
+            [TSkin.Electric]: { type: '@epam/uui:NumericInputProps', component: electric.NumericInput },
         },
         doc: (doc: DocBuilder<uui.NumericInputProps>) => {
             doc.merge('value', { examples: [{ value: 0, isDefault: true }, 123, 123.99] });

app/src/docs/RadioInput.doc.tsx

@@ -13,10 +13,10 @@ export class RadioInputDoc extends BaseDocsBlock {
         contexts: [TDocContext.Default, TDocContext.Form, TDocContext.Resizable],
         bySkin: {
             [TSkin.UUI]: { type: '@epam/uui:RadioInputProps', component: uui.RadioInput },
-            [TSkin.Loveship]: { type: '@epam/loveship:RadioInputProps', component: loveship.RadioInput },
+            [TSkin.Loveship]: { type: '@epam/uui:RadioInputProps', component: loveship.RadioInput },
             [TSkin.Promo]: { type: '@epam/uui:RadioInputProps', component: promo.RadioInput },
         },
-        doc: (doc: DocBuilder<loveship.RadioInputProps| uui.RadioInputProps>) => {
+        doc: (doc: DocBuilder<uui.RadioInputProps>) => {
             doc.merge('value', { examples: [true, { value: false, isDefault: true }] });
         },
     };

app/src/docs/_examples/numericInput/Size.example.tsx

@@ -6,7 +6,6 @@ export default function SizeExample() {
 
     return (
         <>
-            <NumericInput size="48" value={ value } onValueChange={ onValueChange } min={ -10 } max={ 10 } />
             <NumericInput size="42" value={ value } onValueChange={ onValueChange } min={ -10 } max={ 10 } />
             <NumericInput size="36" value={ value } onValueChange={ onValueChange } min={ -10 } max={ 10 } />
             <NumericInput size="30" value={ value } onValueChange={ onValueChange } min={ -10 } max={ 10 } />

app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import { DataColumnProps, useLazyDataSource, useUuiContext, TableFiltersConfig, LazyDataSource, useTableState, DataTableState, getSeparatedValue } from '@epam/uui-core';
-import { Text, DataTable, Panel, FlexRow, Badge, BadgeColor } from '@epam/uui';
+import { Text, DataTable, Panel, FlexRow, Badge, BadgeMods } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 import css from './TablesExamples.module.scss';
 
@@ -19,7 +19,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 140,

app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx

@@ -9,7 +9,7 @@ import {
     FlexRow,
     Text,
     Switch,
-    Badge, BadgeColor,
+    Badge, BadgeMods,
 } from '@epam/uui';
 import { DataColumnProps, getSeparatedValue, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
@@ -29,7 +29,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 140,

app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { DataColumnProps, IModal, ITablePreset, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import {
     DataTable, Panel, FlexRow, Text, PresetsPanel, Badge, ModalBlocker, ModalWindow, ModalFooter, Button, ScrollBars,
-    ModalHeader, FlexSpacer, BadgeColor,
+    ModalHeader, FlexSpacer, BadgeMods,
 } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 
@@ -21,7 +21,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 160,

app/src/docs/_examples/tables/StyledColumns.example.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { DataColumnProps, useLazyDataSource, useUuiContext, UuiContexts } from '@epam/uui-core';
-import { Badge, BadgeColor, DataTable, FlexRow, Panel, Text } from '@epam/uui';
+import { Badge, BadgeMods, DataTable, FlexRow, Panel, Text } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 import { TApi } from '../../../data';
 import css from './TablesExamples.module.scss';
@@ -38,7 +38,7 @@ export default function StyledColumnsExample() {
                 render: (p) =>
                     p.profileStatus && (
                         <FlexRow>
-                            <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                            <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                         </FlexRow>
                     ),
                 width: 140,

app/src/docs/_examples/tables/useTableState/useTableState.example.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import dayjs from 'dayjs';
 import { DataColumnProps, getSeparatedValue, ITablePreset, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
-import { DataTable, Panel, FlexRow, Text, PresetsPanel, Badge, BadgeColor } from '@epam/uui';
+import { DataTable, Panel, FlexRow, Text, PresetsPanel, Badge, BadgeMods } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 
 const personColumns: DataColumnProps<Person, number>[] = [
@@ -18,7 +18,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 140,

app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import dayjs from 'dayjs';
 import { DataColumnProps, getSeparatedValue, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
-import { DataTable, Panel, FlexRow, Text, Badge, BadgeColor } from '@epam/uui';
+import { DataTable, Panel, FlexRow, Text, Badge, BadgeMods } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
 
 const personColumns: DataColumnProps<Person, number>[] = [
@@ -18,7 +18,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         width: 140,

app/src/sandbox/tablePaged/columns.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Text, FlexRow, IconButton, LinkButton } from '@epam/promo';
-import { Badge, BadgeColor } from '@epam/uui';
+import { Badge, BadgeMods } from '@epam/uui';
 import { DataColumnProps } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
 import css from './DemoTablePaged.module.scss';
@@ -20,7 +20,7 @@ export const personColumns = [
         render: (p) =>
             p.profileStatus && (
                 <FlexRow>
-                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeColor } caption={ p.profileStatus } />
+                    <Badge indicator size="24" fill="outline" color={ p.profileStatus.toLowerCase() as BadgeMods['color'] } caption={ p.profileStatus } />
                 </FlexRow>
             ),
         grow: 0,

changelog.md

@@ -1,7 +1,9 @@
 # 5.xx.xx - xx.xx.2023
 
 **What's New**
-[Pickers]: turn on flatten search results by default for all Pickers. Now for pickers with tree structure and in search mode, results will be shown as a flat tree, each item will have a subtitle with parents path.
+* [NumericInput]: size `48` is deprecated and will be removed in future release. Please, use size `42` instead.
+* [Pickers]: turn on flatten search results by default for all Pickers. Now for pickers with tree structure and in search mode, results will be shown as a flat tree, each item will have a subtitle with parents path.
+* [RadioInput]: in Loveship skin removed property 'theme'.
 
 **What's Fixed**
 * [LazyDataSource]: fixed cascade selection with not flatten search.

epam-assets/theme/theme_loveship_dark.scss

@@ -455,6 +455,12 @@
 
     /* override variables */
 
+    /* isInvalid color */
+
+    .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) {
+        --uui-error-50: var(--uui-error-60);
+    }
+
     /* Accordion */
 
     .uui-accordion-container {

epam-electric/components/widgets/Badge.tsx

@@ -1,15 +1,25 @@
 import { createSkinComponent } from '@epam/uui-core';
 import * as uui from '@epam/uui';
 
-export type BadgeMods = {
-    /** @default 'neutral' */
-    color?: uui.BadgeColor | 'yellow'| 'orange' | 'purple' | 'cyan' | 'mint' | 'white' | 'night100' | 'night600';
-    /** @default 'solid' */
-    fill?: uui.BadgeFill;
-    /** @default '36' */
-    size?: uui.BadgeSize;
+type BadgeMods = {
+    /**
+     * Defines component color.
+     * @default 'neutral'
+     */
+    color?: uui.BadgeMods['color'] | 'yellow'| 'orange' | 'purple' | 'cyan' | 'mint' | 'white' | 'night100' | 'night600';
+    /**
+     * Defines component fill style.
+     * @default 'solid'
+     */
+    fill?: uui.BadgeMods['fill'];
+    /**
+     * Defines component size.
+     * @default '36'
+     */
+    size?: uui.BadgeMods['size'];
 };
 
+/** Represents the properties of a Badge component. */
 export type BadgeProps = uui.BadgeCoreProps & BadgeMods;
 
 export const Badge = createSkinComponent<uui.BadgeProps, BadgeProps>(uui.Badge);

epam-electric/components/widgets/StatusIndicator.tsx

@@ -1,11 +1,14 @@
 import { createSkinComponent } from '@epam/uui-core';
 import * as uui from '@epam/uui';
 
-export type StatusIndicatorMods = {
-    /** @default 'gray' */
+type StatusIndicatorMods = {
+    /** Defines component color.
+     * @default 'gray'
+     */
     color?: uui.StatusIndicatorColors | 'white' | 'gray' | 'yellow'| 'orange' | 'fuchsia' | 'purple' | 'violet' | 'cobalt' | 'cyan' | 'mint';
 };
 
+/** Represents the properties of a StatusIndicator component. */
 export type StatusIndicatorProps = uui.StatusIndicatorCoreProps & StatusIndicatorMods;
 
 export const StatusIndicator = createSkinComponent<uui.StatusIndicatorProps, StatusIndicatorProps>(

epam-electric/components/widgets/Tag.tsx

@@ -2,10 +2,14 @@ import { createSkinComponent } from '@epam/uui-core';
 import * as uui from '@epam/uui';
 
 export type TagMods = {
-    /** @default 'neutral' */
+    /**
+     * Defines component color.
+     * @default 'neutral'
+     */
     color?: uui.TagColor | 'white' | 'night100' | 'night700';
 };
 
+/** Represents the properties of a Tag component. */
 export type TagProps = uui.TagCoreProps & TagMods;
 
 export const Tag = createSkinComponent<uui.TagProps, TagProps>(uui.Tag);

epam-promo/components/buttons/Button.tsx

@@ -3,24 +3,35 @@ import { createSkinComponent, devLogger } from '@epam/uui-core';
 import { FillStyle } from '../types';
 import css from './Button.module.scss';
 
-export type ButtonColor = 'blue' | 'green' | 'red' | 'gray50' | 'gray';
+/** Defines component color. */
+type ButtonColor = 'blue' | 'green' | 'red' | 'gray50' | 'gray';
 
-export interface ButtonMods {
-    /** @default 'solid' */
+type ButtonMods = {
+    /**
+     * Defines component fill style.
+     * @default 'solid'
+     */
     fill?: FillStyle;
-    /** @default 'blue' */
+    /**
+     * Defines component color.
+     * @default 'blue'
+     */
     color?: ButtonColor;
-    /** @default '36' */
+    /**
+     * Defines component size.
+     * @default '36'
+     */
     size?: uui.ButtonMods['size'];
-}
+};
 
-const mapFill: Record<FillStyle, uui.ButtonFill> = {
+const mapFill: Record<FillStyle, uui.ButtonMods['fill']> = {
     solid: 'solid',
     white: 'outline',
     light: 'ghost',
     none: 'none',
 };
 
+/** Represents the properties of a Button component. */
 export type ButtonProps = uui.ButtonCoreProps & ButtonMods;
 
 export const Button = createSkinComponent<uui.ButtonProps, ButtonProps>(