added default sizes to 'FiltersPanel' & 'RichTextView', removed redun…

…dant sizes for internal items of complex components

app/src/data/settings_4px.ts

@@ -9,9 +9,11 @@ const settings_4px: Settings = {
             checkbox: '24',
             countIndicator: '24',
             flexRow: '40',
+            filtersPanel: '40',
             linkButton: '40',
             numericInput: '40',
             radioInput: '24',
+            richTextView: '14',
             switch: '24',
             tabButton: '48',
             tag: '40',

uui/components/buttons/IconButton.tsx

@@ -1,8 +1,9 @@
 import * as uuiComponents from '@epam/uui-components';
 import { withMods, Overwrite, devLogger } from '@epam/uui-core';
-import css from './IconButton.module.scss';
 import { systemIcons } from '../../icons/icons';
 
+import css from './IconButton.module.scss';
+
 interface IconButtonMods {
     /**
      * Defines component color.

uui/components/datePickers/Calendar.tsx

@@ -1,9 +1,10 @@
-import css from './Calendar.module.scss';
 import { CalendarProps, Calendar as uuiCalendar } from '@epam/uui-components';
 import { withMods } from '@epam/uui-core';
 import { Dayjs } from '../../helpers/dayJsHelper';
 import { settings } from '../../settings';
 
+import css from './Calendar.module.scss';
+
 export function applyDateSelectionMods() {
     return [css.root, `uui-size-${settings.sizes.defaults.datePicker}`];
 }

uui/components/datePickers/DatePicker.tsx

@@ -21,7 +21,7 @@ const modifiers = [{
 }];
 
 export function DatePickerComponent(props: DatePickerProps, ref: React.ForwardedRef<HTMLElement>) {
-    const { format = defaultFormat, value } = props;
+    const { format = defaultFormat, value, size = settings.sizes.defaults.datePicker } = props;
     const context = useUuiContext();
     const [inputValue, setInputValue] = useState(toCustomDateFormat(value, format));
     const [isBodyOpen, setBodyIsOpen] = useState(false);
@@ -76,7 +76,7 @@ export function DatePickerComponent(props: DatePickerProps, ref: React.Forwarded
                 icon={ props.mode !== EditMode.CELL && systemIcons.calendar ? systemIcons.calendar : undefined }
                 iconPosition={ props.iconPosition || 'left' }
                 placeholder={ props.placeholder ? props.placeholder : format }
-                size={ props.size || settings.sizes.defaults.datePicker as TextInputProps['size'] }
+                size={ size as TextInputProps['size'] }
                 value={ inputValue || undefined }
                 onValueChange={ (v) => {
                     setInputValue(v || '');

uui/components/datePickers/RangeDatePicker.tsx

@@ -11,14 +11,15 @@ import { RangeDatePickerBodyValue, RangeDatePickerInputType, RangeDatePickerProp
 import { defaultFormat, defaultRangeValue } from './helpers';
 import { RangeDatePickerInput } from './RangeDatePickerInput';
 import css from './RangeDatePicker.module.scss';
+import { settings } from '../../settings';
 
 const modifiers = [{
     name: 'offset',
     options: { offset: [0, 6] },
 }];
 
 function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
-    const { value: _value, format = defaultFormat } = props;
+    const { value: _value, format = defaultFormat, size = settings.sizes.defaults.rangeDatePicker } = props;
     const value = _value || defaultRangeValue; // also handles null in comparison to default value
 
     const context = useUuiContext();
@@ -68,10 +69,6 @@ function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.Forwar
                 { ...renderProps }
                 cx={ cx(css.dropdownContainer) }
                 shards={ [targetRef] }
-                returnFocus={ (node) => {
-                    console.log('lock', node);
-                    return true;
-                } }
             >
                 <FlexRow>
                     <RangeDatePickerBody
@@ -114,7 +111,7 @@ function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.Forwar
                         isDisabled={ props.isDisabled }
                         isInvalid={ props.isInvalid }
                         isReadonly={ props.isReadonly }
-                        size={ props.size }
+                        size={ size as RangeDatePickerProps['size'] }
                         getPlaceholder={ props.getPlaceholder }
                         disableClear={ props.disableClear }
                         rawProps={ props.rawProps }

uui/components/datePickers/RangeDatePickerInput.module.scss

@@ -29,13 +29,13 @@
     border-radius: var(--uui-rdtp-border-radius);
 
     > :first-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
     }
 
     > :last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
     }
 
     .separator {

uui/components/errors/ErrorHandler.module.scss

@@ -4,6 +4,8 @@
 
 .recovery-message {
     margin: 12px 0 24px;
+    padding-left: 24px;
+    padding-right: 24px;
 }
 
 .modal-blocker {

uui/components/errors/ErrorHandler.tsx

@@ -36,7 +36,7 @@ export function ErrorHandler(props: ErrorHandlerProps) {
             } else {
                 uuiNotifications.show((notificationProps: INotification) => (
                     <ErrorNotification { ...notificationProps }>
-                        <Text size="36">
+                        <Text>
                             {c.responseData && c.responseData.errorMessage}
                         </Text>
                     </ErrorNotification>
@@ -54,7 +54,7 @@ export function ErrorHandler(props: ErrorHandlerProps) {
                 <ModalWindow>
                     <ModalHeader borderBottom title={ title } />
                     <Spinner cx={ css.recoverySpinner } />
-                    <FlexRow padding="24" cx={ css.recoveryMessage }>
+                    <FlexRow cx={ css.recoveryMessage }>
                         <FlexCell grow={ 1 }>
                             <RichTextView>{subtitle}</RichTextView>
                             { isAuthLost && (

uui/components/fileUpload/FileCard.tsx

@@ -128,7 +128,7 @@ export const FileCard = React.forwardRef<HTMLDivElement, FileCardProps>((props,
             minWidth={ width }
             width={ !width ? '100%' : undefined }
         >
-            <FlexRow size="36" alignItems="top" columnGap="6">
+            <FlexRow alignItems="top" columnGap="6">
                 {fileExtension && getIcon(fileExtension)}
                 <FlexCell width="100%">
                     <Text size="18" fontSize="14" lineHeight="18" color={ (progress < 100 || error?.isError) ? 'tertiary' : 'primary' } cx={ css.fileName }>

uui/components/filters/FilterNumericBody.tsx

@@ -105,7 +105,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) {
                         <NumericInput
                             value={ value?.from ?? null }
                             onValueChange={ rangeValueHandler('from') }
-                            size="36"
                             placeholder="Min"
                             formatOptions={ { maximumFractionDigits: 2 } }
                         />
@@ -114,7 +113,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) {
                         <NumericInput
                             value={ value?.to ?? null }
                             onValueChange={ rangeValueHandler('to') }
-                            size="36"
                             placeholder="Max"
                             formatOptions={ { maximumFractionDigits: 2 } }
                             isInvalid={ isWrongRange(value?.from, value?.to) }
@@ -138,7 +136,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) {
                     <NumericInput
                         value={ typeof props.value === 'number' ? props.value : null }
                         onValueChange={ props.onValueChange }
-                        size="36"
                         placeholder="Enter a number"
                         formatOptions={ { maximumFractionDigits: 2 } }
                     />

uui/components/filters/FiltersPanel.tsx

@@ -20,11 +20,15 @@ import { PickerTogglerProps, FlexCell } from '@epam/uui-components';
 import { FiltersPanelItem } from './FiltersPanelItem';
 import { ReactComponent as addIcon } from '@epam/assets/icons/action-add-outline.svg';
 import { UUI_FILTERS_PANEL_ADD_BUTTON, UUI_FILTERS_PANEL_ADD_BUTTON_BODY } from './constants';
+import { settings } from '../../settings';
 
 export interface FiltersPanelModsOverride {}
 
 interface FiltersPanelMods {
-    /** Defines size(height) of filter panel and filters */
+    /**
+     * Defines size(height) of filter panel and filters
+     * @default '36'
+     */
     size?: '24' | '30' | '36' | '42' | '48';
 }
 
@@ -78,7 +82,7 @@ const normalizeFilterWithPredicates = <TFilter,>(filter: TFilter) => {
 };
 
 function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFilter>) {
-    const { filters, tableState, setTableState } = props;
+    const { filters, tableState, setTableState, size = (settings.sizes.defaults.filtersPanel as FiltersPanelProps<TFilter>['size']) } = props;
     const [newFilterId, setNewFilterId] = useState(null);
 
     const pickerInputRef = useRef<PickerInputElement>(null);
@@ -157,7 +161,7 @@ function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFi
     const renderAddFilterToggler = useCallback((togglerProps: PickerTogglerProps) => {
         return (
             <Button
-                size={ props.size }
+                size={ size }
                 onClick={ togglerProps.onClick }
                 ref={ togglerProps.ref }
                 caption={ i18n.filterToolbar.addCaption }
@@ -206,7 +210,7 @@ function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFi
                         key={ f.field as string }
                         autoFocus={ newFilterId === f.field }
                         removeFilter={ removeFilter }
-                        size={ props.size }
+                        size={ size }
                     />
                 </FlexCell>
             ))}
@@ -234,7 +238,7 @@ function FiltersToolbarImpl<TFilter extends object>(props: FiltersPanelProps<TFi
                     emptyValue={ [] }
                     getRowOptions={ getRowOptions }
                     fixedBodyPosition={ true }
-                    size={ props.size }
+                    size={ size }
                     bodyCx={ UUI_FILTERS_PANEL_ADD_BUTTON_BODY }
                     ref={ pickerInputRef }
                 />

uui/components/filters/PresetPanel/PresetsPanel.tsx

@@ -42,7 +42,7 @@ export function PresetsPanel(props: PresetsPanelProps) {
         return (
             <div key="addingPresetBlock" className={ css.addPresetContainer }>
                 {!isAddingPreset ? (
-                    <Button cx={ UUI_PRESETS_PANEL_ADD_BUTTON } size="36" onClick={ setAddingPreset } caption={ i18n.presetPanel.addCaption } icon={ addIcon } iconPosition="left" fill="ghost" color="primary" />
+                    <Button cx={ UUI_PRESETS_PANEL_ADD_BUTTON } onClick={ setAddingPreset } caption={ i18n.presetPanel.addCaption } icon={ addIcon } iconPosition="left" fill="ghost" color="primary" />
                 ) : (
                     <PresetInput onCancel={ cancelAddingPreset } onSuccess={ props.createNewPreset } />
                 )}

uui/components/forms/Form.tsx

@@ -27,7 +27,7 @@ export function Form<T>(props: FormProps<T>) {
                         ] }
                     >
                         <RichTextView>
-                            <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
+                            <Text>{i18n.form.notifications.unsavedChangesMessage}</Text>
                         </RichTextView>
                     </WarningNotification>
                 ),

uui/components/forms/useForm.tsx

@@ -27,7 +27,7 @@ export function useForm<T>(props: UseFormProps<T>) {
                     ] }
                 >
                     <RichTextView>
-                        <Text size="36">{i18n.form.notifications.unsavedChangesMessage}</Text>
+                        <Text>{i18n.form.notifications.unsavedChangesMessage}</Text>
                     </RichTextView>
                 </WarningNotification>
             ),

uui/components/overlays/Snackbar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NotificationOperation, useUuiContext } from '@epam/uui-core';
 import { SnackbarProps as UuiSnackbarProps, Snackbar as UuiSnackbar } from '@epam/uui-components';
-import { ClearNotification } from '../../index';
+import { ClearNotification } from './NotificationCard';
 import { useEffect, useReducer } from 'react';
 
 export interface SnackbarProps extends UuiSnackbarProps {}

uui/components/typography/RichTextView.tsx

@@ -1,5 +1,6 @@
 import * as uuiComponents from '@epam/uui-components';
 import { Overwrite, withMods } from '@epam/uui-core';
+import { settings } from '../../settings';
 
 interface RichTextViewMods {
     /**
@@ -15,5 +16,5 @@ export interface RichTextViewProps extends uuiComponents.RichTextViewProps, Over
 
 export const RichTextView = withMods<uuiComponents.RichTextViewProps, RichTextViewProps>(
     uuiComponents.RichTextView,
-    (mods: RichTextViewMods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`],
+    (mods: RichTextViewMods) => ['uui-typography', `uui-typography-size-${mods.size || settings.sizes.defaults.richTextView}`],
 );

uui/settings.ts

@@ -9,9 +9,11 @@ export const settings: Settings = {
             checkbox: '18',
             countIndicator: '24',
             flexRow: '36',
+            filtersPanel: '36',
             linkButton: '36',
             numericInput: '36',
             radioInput: '18',
+            richTextView: '14',
             switch: '18',
             tabButton: '48',
             tag: '36',

uui/settings.types.ts

@@ -5,9 +5,11 @@ interface DefaultSizes {
     checkbox: string;
     countIndicator: string;
     flexRow: string;
+    filtersPanel: string;
     linkButton: string;
     numericInput: string;
     radioInput: string;
+    richTextView: string;
     switch: string;
     tabButton: string;
     tag: string;