diff --git a/app/src/data/settings_4px.ts b/app/src/data/settings_4px.ts index 06845c086a..311dae3f68 100644 --- a/app/src/data/settings_4px.ts +++ b/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', diff --git a/uui/components/buttons/IconButton.tsx b/uui/components/buttons/IconButton.tsx index f08a0395dc..1e3472e44a 100644 --- a/uui/components/buttons/IconButton.tsx +++ b/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. diff --git a/uui/components/datePickers/Calendar.tsx b/uui/components/datePickers/Calendar.tsx index d8df6b650a..95e578f848 100644 --- a/uui/components/datePickers/Calendar.tsx +++ b/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}`]; } diff --git a/uui/components/datePickers/DatePicker.tsx b/uui/components/datePickers/DatePicker.tsx index a0ecada4ec..8c270db31c 100644 --- a/uui/components/datePickers/DatePicker.tsx +++ b/uui/components/datePickers/DatePicker.tsx @@ -21,7 +21,7 @@ const modifiers = [{ }]; export function DatePickerComponent(props: DatePickerProps, ref: React.ForwardedRef) { - 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 || ''); diff --git a/uui/components/datePickers/RangeDatePicker.tsx b/uui/components/datePickers/RangeDatePicker.tsx index 6d85083f99..b27636a75e 100644 --- a/uui/components/datePickers/RangeDatePicker.tsx +++ b/uui/components/datePickers/RangeDatePicker.tsx @@ -11,6 +11,7 @@ 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', @@ -18,7 +19,7 @@ const modifiers = [{ }]; function RangeDatePickerComponent(props: RangeDatePickerProps, ref: React.ForwardedRef): 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; - } } > :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 { diff --git a/uui/components/errors/ErrorHandler.module.scss b/uui/components/errors/ErrorHandler.module.scss index f4dcaad341..98cc625c4a 100644 --- a/uui/components/errors/ErrorHandler.module.scss +++ b/uui/components/errors/ErrorHandler.module.scss @@ -4,6 +4,8 @@ .recovery-message { margin: 12px 0 24px; + padding-left: 24px; + padding-right: 24px; } .modal-blocker { diff --git a/uui/components/errors/ErrorHandler.tsx b/uui/components/errors/ErrorHandler.tsx index e2ff34abf9..875b67bee6 100644 --- a/uui/components/errors/ErrorHandler.tsx +++ b/uui/components/errors/ErrorHandler.tsx @@ -36,7 +36,7 @@ export function ErrorHandler(props: ErrorHandlerProps) { } else { uuiNotifications.show((notificationProps: INotification) => ( - + {c.responseData && c.responseData.errorMessage} @@ -54,7 +54,7 @@ export function ErrorHandler(props: ErrorHandlerProps) { - + {subtitle} { isAuthLost && ( diff --git a/uui/components/fileUpload/FileCard.tsx b/uui/components/fileUpload/FileCard.tsx index cfcbd8e942..91db598c0c 100644 --- a/uui/components/fileUpload/FileCard.tsx +++ b/uui/components/fileUpload/FileCard.tsx @@ -128,7 +128,7 @@ export const FileCard = React.forwardRef((props, minWidth={ width } width={ !width ? '100%' : undefined } > - + {fileExtension && getIcon(fileExtension)} diff --git a/uui/components/filters/FilterNumericBody.tsx b/uui/components/filters/FilterNumericBody.tsx index 436ecb383a..3d95523227 100644 --- a/uui/components/filters/FilterNumericBody.tsx +++ b/uui/components/filters/FilterNumericBody.tsx @@ -105,7 +105,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) { @@ -114,7 +113,6 @@ export function FilterNumericBody(props: IFilterNumericBodyProps) { diff --git a/uui/components/filters/FiltersPanel.tsx b/uui/components/filters/FiltersPanel.tsx index e342298253..cd92895f65 100644 --- a/uui/components/filters/FiltersPanel.tsx +++ b/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 = (filter: TFilter) => { }; function FiltersToolbarImpl(props: FiltersPanelProps) { - const { filters, tableState, setTableState } = props; + const { filters, tableState, setTableState, size = (settings.sizes.defaults.filtersPanel as FiltersPanelProps['size']) } = props; const [newFilterId, setNewFilterId] = useState(null); const pickerInputRef = useRef(null); @@ -157,7 +161,7 @@ function FiltersToolbarImpl(props: FiltersPanelProps { return (