From 62a1b97610b79637dfc988380b7e08e33eb58fa6 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Mon, 2 Dec 2024 18:00:15 +0300 Subject: [PATCH 01/13] Added support for 4px grid to site & uui package --- .github/workflows/qa.yml | 2 +- app/src/data/propsOverride_4px.ts | 176 ++++++ app/src/data/settings_4px.ts | 264 ++++++++ app/src/data/themes.ts | 10 +- app/src/docs/Badge.doc.tsx | 1 - app/src/docs/datePicker/DatePicker.doc.tsx | 1 - app/src/index.tsx | 2 + epam-assets/theme/theme_loveship_4px.scss | 8 + .../theme/theme_loveship_dark_4px.scss | 8 + epam-assets/theme/variables/4px_grid.scss | 234 +++++++ public/docs/docsGenOutput/docsGenOutput.d.ts | 2 + public/docs/docsGenOutput/docsGenOutput.json | 577 +++++++++++++++++- uui-docs/src/docBuilderGen/docBuilderGen.tsx | 2 + uui/components/datePickers/types.ts | 1 + uui/components/layout/FlexItems/FlexRow.tsx | 3 +- uui/settings.ts | 1 + uui/settings.types.ts | 1 + yarn.lock | 223 ++++--- 18 files changed, 1385 insertions(+), 131 deletions(-) create mode 100644 app/src/data/propsOverride_4px.ts create mode 100644 app/src/data/settings_4px.ts create mode 100644 epam-assets/theme/theme_loveship_4px.scss create mode 100644 epam-assets/theme/theme_loveship_dark_4px.scss create mode 100644 epam-assets/theme/variables/4px_grid.scss diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml index 88a92c2d4d..429c45ca65 100644 --- a/.github/workflows/qa.yml +++ b/.github/workflows/qa.yml @@ -3,7 +3,7 @@ name: qa # Controls when the action will run. on: push: - branches: [ themes/eduverse-theme ] + branches: [ feature/4px-grid-for-uui ] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: diff --git a/app/src/data/propsOverride_4px.ts b/app/src/data/propsOverride_4px.ts new file mode 100644 index 0000000000..28d58662c9 --- /dev/null +++ b/app/src/data/propsOverride_4px.ts @@ -0,0 +1,176 @@ +import { TPropEditorType, TPropEditorTypeOverride } from '@epam/uui-docs'; + +const propsOverride: TPropEditorTypeOverride = { + '@epam/uui:AlertProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:ButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:BadgeProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['24', '32', '40'], + }, + comment: { + tags: { + '@default': '32', + }, + }, + }, + }, + '@epam/uui:LinkButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['24', '32', '40'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:TextInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:NumericInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:CheckboxProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24', '28'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:RadioInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24', '28'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:SwitchProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:TabButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['48'], + }, + comment: { + tags: { + '@default': '48', + }, + }, + }, + }, + '@epam/uui:PickerInputProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + '@epam/uui:CountIndicatorProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '24', + }, + }, + }, + }, + '@epam/uui:DatePickerProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + comment: { + tags: { + '@default': '40', + }, + }, + }, + }, + +}; + +export default propsOverride; diff --git a/app/src/data/settings_4px.ts b/app/src/data/settings_4px.ts new file mode 100644 index 0000000000..06845c086a --- /dev/null +++ b/app/src/data/settings_4px.ts @@ -0,0 +1,264 @@ +import { Settings } from '@epam/uui'; + +const settings_4px: Settings = { + sizes: { + defaults: { + alert: '48', + badge: '24', + button: '40', + checkbox: '24', + countIndicator: '24', + flexRow: '40', + linkButton: '40', + numericInput: '40', + radioInput: '24', + switch: '24', + tabButton: '48', + tag: '40', + text: '40', + textArea: '40', + textInput: '40', + rangeDatePicker: '40', + datePicker: '40', + labeledInput: '40', + statusIndicator: '40', + paginator: '32', + rating: '24', + }, + alert: { + action: { + 32: '24', + 48: '32', + }, + }, + tag: { + countIndicator: { + 32: '24', + 40: '24', + 48: '24', + }, + }, + pickerInput: { + toggler: { + defaults: { + size: '40', + tag: '40', + }, + tag: { + 40: '32', + 48: '32', + }, + }, + body: { + dropdown: { + height: 300, + width: 360, + padding: '12', + row: { + default: '40', + cell: { + padding: '24', + text: { + 40: '40', + 48: '48', + }, + icon: { + 40: '24', + 48: '24', + }, + isBoldSelectionIcon: { + 24: true, + }, + item: { + default: '40', + verticalPadding: { + 40: '8', + 48: '12', + }, + avatar: { + rest: { + 40: '32', + 48: '32', + }, + multiline: { + 40: '40', + 48: '48', + }, + }, + }, + }, + }, + footer: { + switch: { + 40: '20', + 48: '24', + }, + linkButton: { + 40: '32', + 48: '32', + }, + }, + }, + mobile: { + header: { + titleSize: '48', + }, + footer: { + linkButton: '48', + }, + row: '48', + searchInput: '48', + }, + modal: { + row: '40', + padding: '24', + }, + }, + }, + rowAddons: { + defaults: { + icon: '20', + indentUnit: 24, + indentWidth: 12, + }, + checkbox: { + 40: '24', + 48: '24', + 60: '24', + }, + icon: { + 40: '20', + 48: '20', + 60: '24', + }, + indentUnit: { + 40: 24, + 48: 24, + 60: 24, + }, + indentWidth: { + 40: 24, + 48: 24, + 60: 24, + }, + }, + text: { + 20: { lineHeight: 12, fontSize: 10 }, + 24: { lineHeight: 18, fontSize: 12 }, + 32: { lineHeight: 18, fontSize: 14 }, + 40: { lineHeight: 24, fontSize: 16 }, + 48: { lineHeight: 24, fontSize: 16 }, + 60: { lineHeight: 30, fontSize: 24 }, + }, + filtersPanel: { + pickerInput: { + body: { + default: '40', + }, + }, + }, + labeledInput: { + fillIcon: ['24', '32'], + }, + badge: { + countIndicator: { + 24: '20', + 32: '20', + 48: '24', + }, + }, + dataTable: { + header: { + row: { + default: '40', + cell: { + defaults: { + size: '40', + resizeMarker: '12', + padding: '12', + paddingEdge: '24', + }, + checkbox: { + 40: '24', + 48: '24', + 60: '24', + }, + columnCaption: { + fontSize: '14', + fontWeight: '400', + size: '20', + uppercase: '12', + }, + iconSize: { + 40: '20', + 48: '20', + 60: '20', + }, + truncate: ['48'], + }, + groupCell: { + defaults: { + size: '40', + padding: '12', + paddingEdge: '24', + }, + columnCaption: { + fontSize: '14', + fontWeight: '400', + size: '20', + uppercase: '12', + }, + iconSize: { + 40: '20', + 48: '20', + 60: '20', + }, + truncate: ['48'], + }, + }, + }, + body: { + row: { + default: '40', + cell: { + defaults: { + size: '40', + padding: '12', + paddingEdge: '24', + }, + text: { + 24: '24', + 32: '32', + 40: '40', + 48: '48', + 60: '48', + }, + }, + }, + }, + columnsConfigurationModal: { + columnRow: '40', + countIndicator: '20', + subgroupIcon: '20', + search: '40', + width: 560, + }, + }, + modal: { + window: { + defaults: { + width: 560, + }, + }, + }, + tabButton: { + countIndicator: { + 40: '24', + 48: '24', + 60: '24', + }, + }, + }, +}; + +export default settings_4px; diff --git a/app/src/data/themes.ts b/app/src/data/themes.ts index eadb9a9c6b..c3a7b5bf5b 100644 --- a/app/src/data/themes.ts +++ b/app/src/data/themes.ts @@ -1,7 +1,13 @@ +import { CustomThemeManifest } from './customThemes'; +import settings_4px from './settings_4px'; +import propsOverride_4px from './propsOverride_4px'; + export enum BuiltInTheme { electric = 'electric', loveship = 'loveship', + loveship_4px = 'loveship_4px', loveship_dark = 'loveship_dark', + loveship_dark_4px = 'loveship_dark_4px', promo = 'promo', vanilla_thunder = 'vanilla_thunder', eduverse_light = 'eduverse_light', @@ -13,7 +19,7 @@ type CustomTheme = string; export type ThemeId = BuiltInTheme | CustomTheme; -export interface ThemeBaseParams { +export interface ThemeBaseParams extends Partial { id: ThemeId; name: string; } @@ -21,7 +27,9 @@ export interface ThemeBaseParams { export const builtInThemes: ThemeBaseParams[] = [ { id: BuiltInTheme.electric, name: 'Electric' }, { id: BuiltInTheme.loveship, name: 'Loveship Light' }, + { id: BuiltInTheme.loveship_4px, name: 'Loveship Light 4px', settings: settings_4px, propsOverride: propsOverride_4px }, { id: BuiltInTheme.loveship_dark, name: 'Loveship Dark' }, + { id: BuiltInTheme.loveship_dark_4px, name: 'Loveship Dark 4px', settings: settings_4px, propsOverride: propsOverride_4px }, { id: BuiltInTheme.vanilla_thunder, name: 'Vanilla Thunder' }, { id: BuiltInTheme.promo, name: 'Promo' }, { id: BuiltInTheme.eduverse_light, name: 'Eduverse Light' }, diff --git a/app/src/docs/Badge.doc.tsx b/app/src/docs/Badge.doc.tsx index 5d9ed63e61..83fc9e52da 100644 --- a/app/src/docs/Badge.doc.tsx +++ b/app/src/docs/Badge.doc.tsx @@ -33,7 +33,6 @@ export class BadgeDoc extends BaseDocsBlock { [TSkin.Electric]: { type: '@epam/electric:BadgeProps', component: electric.Badge }, }, doc: (doc: DocBuilder) => { - doc.setDefaultPropExample('size', ({ value }) => value === '36'); doc.setDefaultPropExample('onClick', () => true); doc.merge('color', { defaultValue: 'info', diff --git a/app/src/docs/datePicker/DatePicker.doc.tsx b/app/src/docs/datePicker/DatePicker.doc.tsx index 880f2c39a4..1ff1dc22f6 100644 --- a/app/src/docs/datePicker/DatePicker.doc.tsx +++ b/app/src/docs/datePicker/DatePicker.doc.tsx @@ -30,7 +30,6 @@ export class DatePickerDoc extends BaseDocsBlock { [TSkin.Electric]: { type: '@epam/uui:DatePickerProps', component: electric.DatePicker }, }, doc: (doc: DocBuilder) => { - doc.merge('size', { defaultValue: '36' }); doc.merge('format', { examples: ['MM/DD/YYYY', 'MMM D, YYYY', 'DD.MM.YYYY', 'YYYY-MM-DD'], defaultValue: 'MMM D, YYYY', editorType: 'StringWithExamplesEditor' }); doc.merge('value', { examples: ['', '2020-09-03'] }); doc.merge('isHoliday', { examples: [{ name: 'without Holidays', value: () => false }] }); diff --git a/app/src/index.tsx b/app/src/index.tsx index a35e00e7ce..0d9d65b9b6 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -15,6 +15,8 @@ import { TypeRefPage } from './common'; import '@epam/internal/styles.css'; import '@epam/assets/theme/theme_vanilla_thunder.scss'; import '@epam/assets/theme/theme_loveship_dark.scss'; +import '@epam/assets/theme/theme_loveship_dark_4px.scss'; +import '@epam/assets/theme/theme_loveship_4px.scss'; import '@epam/assets/theme/theme_electric.scss'; import '@epam/assets/theme/theme_eduverse_light.scss'; import '@epam/assets/theme/theme_eduverse_dark.scss'; diff --git a/epam-assets/theme/theme_loveship_4px.scss b/epam-assets/theme/theme_loveship_4px.scss new file mode 100644 index 0000000000..acbf025414 --- /dev/null +++ b/epam-assets/theme/theme_loveship_4px.scss @@ -0,0 +1,8 @@ +@use '../scss/loveship/font-faces'; +@use 'variables/4px_grid' as *; +@use 'variables/loveship' as *; + +.uui-theme-loveship_4px { + @include loveship-variables(); + @include uui-4px-grid(); +} diff --git a/epam-assets/theme/theme_loveship_dark_4px.scss b/epam-assets/theme/theme_loveship_dark_4px.scss new file mode 100644 index 0000000000..4db9f54e94 --- /dev/null +++ b/epam-assets/theme/theme_loveship_dark_4px.scss @@ -0,0 +1,8 @@ +@use '../scss/loveship/font-faces'; +@use 'variables/4px_grid' as *; +@use 'variables/loveship_dark' as *; + +.uui-theme-loveship_dark_4px { + @include loveship_dark_variables(); + @include uui-4px-grid(); +} diff --git a/epam-assets/theme/variables/4px_grid.scss b/epam-assets/theme/variables/4px_grid.scss new file mode 100644 index 0000000000..3c22ae5620 --- /dev/null +++ b/epam-assets/theme/variables/4px_grid.scss @@ -0,0 +1,234 @@ +@mixin uui-4px-grid { + & { + --uui-grid-unit: 8px; + --uui-focus-outline-width: 2px; + --uui-focus-outline-offset: 2px; + --uui-focus-radius: 2px; + --uui-border-radius: 8px; + --uui-tab-line-width: 3px; + --uui-notify-size: 6px; + } + + .uui-size-16 { + --uui-size: 16px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 3px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 12px; + --uui-font-size: 10px; + --uui-dot-size: 4px; + } + + .uui-size-20 { + --uui-size: 20px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 3px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 8px; + } + + .uui-size-24 { + --uui-size: 24px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 6px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 8px; + } + + .uui-size-28 { + --uui-size: 28px; + --uui-border-width: 1px; + --uui-horizontal-gap: 8px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 6px; + --uui-vertical-padding: 3px; + --uui-icon-size: 12px; + --uui-line-height: 28px; + --uui-font-size: 18px; + --uui-dot-size: 8px; + } + + .uui-size-32 { + --uui-size: 32px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 20px; + --uui-vertical-padding: 3px; + --uui-icon-size: 20px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 8px; + } + + .uui-size-40 { + --uui-size: 40px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 20px; + --uui-vertical-padding: 3px; + --uui-icon-size: 20px; + --uui-line-height: 18px; + --uui-font-size: 14px; + --uui-dot-size: 12px; + } + + .uui-size-48 { + --uui-size: 48px; + --uui-border-width: 1px; + --uui-horizontal-gap: 4px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 32px; + --uui-vertical-padding: 3px; + --uui-icon-size: 24px; + --uui-line-height: 20px; + --uui-font-size: 16px; + --uui-dot-size: 12px; + } + + .uui-size-60 { + --uui-size: 60px; + --uui-border-width: 1px; + --uui-horizontal-gap: 6px; + --uui-vertical-gap: 3px; + --uui-horizontal-padding: 12px; + --uui-vertical-padding: 3px; + --uui-icon-size: 24px; + --uui-line-height: 24px; + --uui-font-size: 16px; + --uui-dot-size: 12px; + } + + .uui-button { + --uui-btn-font-weight: 500; + + &.uui-size-48 { + --uui-btn-border-radius: 12px; + } + + .uui-caption:first-child { + padding-left: 0; + } + + .uui-caption:last-child { + padding-right: 0; + } + + &:has(.uui-icon:only-child) { + &.uui-size-32 { + --uui-horizontal-padding: 4px; + } + + &.uui-size-40 { + --uui-horizontal-padding: 10px; + } + + &.uui-size-48 { + --uui-horizontal-padding: 14px; + } + } + } + + .uui-input-box { + &.uui-size-40 { + --uui-horizontal-padding: 8px; + --uui-horizontal-gap: 8px; + } + + &.uui-size-48 { + --uui-horizontal-padding: 12px; + --uui-horizontal-gap: 8px; + } + } + + .uui-link_button { + &.uui-size-16 { + --uui-horizontal-gap: 4px; + --uui-icon-size: 16px; + --uui-line-height: 16px; + --uui-font-size: 14px; + } + + &.uui-size-20 { + --uui-horizontal-gap: 4px; + --uui-icon-size: 20px; + --uui-line-height: 20px; + --uui-font-size: 16px; + } + } + + .uui-checkbox-container, .uui-radio-input-container { + --uui-checkbox-border-radius: 4px; + + &.uui-size-20 { + --uui-size: 14px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + + &.uui-size-24 { + --uui-size: 18px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + + &.uui-size-28 { + --uui-size: 22px; + + .uui-checkbox, .uui-radioinput { + margin: 3px; + } + } + } + + .uui-tab-button { + &.uui-size-48 { + --uui-size: 50px; + --uui-horizontal-padding: 16px; + --uui-horizontal-gap: 0; + --uui-icon-size: 20px; + --uui-font-size: 14px; + } + } + + .uui-count_indicator { + &.uui-size-20 { + --uui-horizontal-padding: 6px; + --uui-line-height: 18px; + --uui-font-size: 12px; + } + + &.uui-size-24 { + --uui-line-height: 22px; + --uui-font-size: 14px; + } + } + + .uui-datepicker-body-wrapper { + --uui-dtp_body-min-height: 310px; + } + + .uui-badge { + &.uui-size-24 { + --uui-horizontal-gap: 4px; + } + } +} diff --git a/public/docs/docsGenOutput/docsGenOutput.d.ts b/public/docs/docsGenOutput/docsGenOutput.d.ts index 9788a6581e..2e8c3a4784 100644 --- a/public/docs/docsGenOutput/docsGenOutput.d.ts +++ b/public/docs/docsGenOutput/docsGenOutput.d.ts @@ -26,6 +26,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:CommonDatePickerProps' | '@epam/uui-core:ContextProviderProps' | '@epam/uui-core:CX' | +'@epam/uui-core:DataColumnGroupProps' | '@epam/uui-core:DataColumnProps' | '@epam/uui-core:DataPickerCellProps' | '@epam/uui-core:DataQuery' | @@ -42,6 +43,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' | '@epam/uui-core:DataTableColumnsConfigOptions' | '@epam/uui-core:DataTableConfigModalParams' | '@epam/uui-core:DataTableHeaderCellProps' | +'@epam/uui-core:DataTableHeaderGroupCellProps' | '@epam/uui-core:DataTableHeaderRowProps' | '@epam/uui-core:DataTableRowProps' | '@epam/uui-core:DataTableSelectedCellData' | diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json index 38a3e84385..3a51170f6d 100644 --- a/public/docs/docsGenOutput/docsGenOutput.json +++ b/public/docs/docsGenOutput/docsGenOutput.json @@ -1,5 +1,5 @@ { - "version": "5.11.0-rc.0", + "version": "5.11.1-rc.0", "docsGenTypes": { "@epam/uui-core:AcceptDropParams": { "summary": { @@ -4867,6 +4867,210 @@ } } }, + "@epam/uui-core:DataColumnGroupProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataColumnGroupProps", + "nameFull": "DataColumnGroupProps" + }, + "src": "uui-core/src/types/tables.ts", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataColumnGroupProps", + "print": [ + "/**", + " * Columns group configuration.", + " */", + "interface DataColumnGroupProps extends IHasCX, IClickable {", + " /**", + " * Unique key to identify the columns group. Used to reference columns group.", + " */", + " key: string;", + " /** Columns group caption. Can be a plain text, or any React Component */", + " caption?: React.ReactNode;", + " /** Aligns columns group header content horizontally */", + " textAlign?: 'left' | 'center' | 'right';", + " /** Info tooltip displayed in the table header */", + " info?: React.ReactNode;", + " /** Overrides rendering of the whole columns group cell */", + " renderCell?(column: DataColumnGroupProps): any;", + " /** Render callback for columns group header tooltip.", + " * This tooltip will appear on cell hover with 600ms delay.", + " *", + " * If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.", + " * Pass `() => null` to disable tooltip rendering.", + " */", + " renderTooltip?(column: DataColumnGroupProps): React.ReactNode;", + " /**", + " * Overrides rendering of the whole columns group header cell.", + " */", + " renderHeaderCell?(cellProps: DataTableHeaderGroupCellProps): any;", + "}" + ] + }, + "props": [ + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "Unique key to identify the columns group. Used to reference columns group." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "caption", + "name": "caption", + "comment": { + "raw": [ + "Columns group caption. Can be a plain text, or any React Component" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "textAlign", + "name": "textAlign", + "comment": { + "raw": [ + "Aligns columns group header content horizontally" + ] + }, + "typeValue": { + "raw": "'right' | 'left' | 'center'" + }, + "editor": { + "type": "oneOf", + "options": [ + "right", + "left", + "center" + ] + }, + "required": false + }, + { + "uid": "info", + "name": "info", + "comment": { + "raw": [ + "Info tooltip displayed in the table header" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false + }, + { + "uid": "renderCell", + "name": "renderCell", + "comment": { + "raw": [ + "Overrides rendering of the whole columns group cell" + ] + }, + "typeValue": { + "raw": "(column: DataColumnGroupProps) => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "renderTooltip", + "name": "renderTooltip", + "comment": { + "raw": [ + "Render callback for columns group header tooltip.", + " This tooltip will appear on cell hover with 600ms delay.", + "", + " If omitted, default implementation with columnGroup.caption + columnGroup.info will be rendered.", + " Pass `() => null` to disable tooltip rendering." + ] + }, + "typeValue": { + "raw": "(column: DataColumnGroupProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "required": false + }, + { + "uid": "renderHeaderCell", + "name": "renderHeaderCell", + "comment": { + "raw": [ + "Overrides rendering of the whole columns group header cell." + ] + }, + "typeValue": { + "raw": "(cellProps: DataTableHeaderGroupCellProps) => any" + }, + "editor": { + "type": "func" + }, + "required": false + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "onClick", + "name": "onClick", + "comment": { + "raw": [ + "Called when component is clicked" + ] + }, + "typeValue": { + "raw": "(e?: any) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IClickable", + "required": false + } + ], + "propsFromUnion": false + } + }, "@epam/uui-core:DataColumnProps": { "summary": { "module": "@epam/uui-core", @@ -4888,6 +5092,10 @@ " * Also, used as React key for cells, header cells, and other components inside tables.", " */", " key: string;", + " /**", + " * A unique identifier for a group of columns that establishes a connection between the column and the group of columns.", + " */", + " group?: string;", " /** Column caption. Can be a plain text, or any React Component */", " caption?: React.ReactNode;", " /**", @@ -4982,6 +5190,22 @@ }, "required": true }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "A unique identifier for a group of columns that establishes a connection between the column and the group of columns." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": false + }, { "uid": "caption", "name": "caption", @@ -8483,6 +8707,229 @@ "propsFromUnion": false } }, + "@epam/uui-core:DataTableHeaderGroupCellProps": { + "summary": { + "module": "@epam/uui-core", + "typeName": { + "name": "DataTableHeaderGroupCellProps", + "nameFull": "DataTableHeaderGroupCellProps" + }, + "src": "uui-core/src/types/tables.ts", + "comment": { + "raw": [ + "DataTable columns group header cell props." + ] + }, + "exported": true + }, + "details": { + "kind": 264, + "typeValue": { + "raw": "DataTableHeaderGroupCellProps", + "print": [ + "/**", + " * DataTable columns group header cell props.", + " */", + "interface DataTableHeaderGroupCellProps extends IHasCX, IEditable {", + " /**", + " * A unique identifier for a group.", + " */", + " key: string;", + " /**", + " * Columns group configuration.", + " */", + " group: DataColumnGroupProps;", + " /**", + " * Defines if first column of the group is the first one in the table header.", + " */", + " isFirstCell: boolean;", + " /**", + " * Defines if last column of the group is the last one in the table header.", + " */", + " isLastCell: boolean;", + "}" + ] + }, + "props": [ + { + "uid": "key", + "name": "key", + "comment": { + "raw": [ + "A unique identifier for a group." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "required": true + }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps" + }, + "required": true + }, + { + "uid": "isFirstCell", + "name": "isFirstCell", + "comment": { + "raw": [ + "Defines if first column of the group is the first one in the table header." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "isLastCell", + "name": "isLastCell", + "comment": { + "raw": [ + "Defines if last column of the group is the last one in the table header." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "required": true + }, + { + "uid": "cx", + "name": "cx", + "comment": { + "raw": [ + "CSS class(es) to put on component's root. See {@link https://github.com/JedWatson/classnames#usage} for details" + ] + }, + "typeValue": { + "raw": "null | string | number | boolean | ClassDictionary | ClassArray" + }, + "typeValueRef": "@epam/uui-core:ClassValue", + "from": "@epam/uui-core:IHasCX", + "required": false + }, + { + "uid": "isInvalid", + "name": "isInvalid", + "comment": { + "raw": [ + "True if component contains invalid input" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeInvalid", + "required": false + }, + { + "uid": "isDisabled", + "name": "isDisabled", + "comment": { + "raw": [ + "Disable editing, and visually de-emphasize value of the component" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:IDisableable", + "required": false + }, + { + "uid": "isReadonly", + "name": "isReadonly", + "comment": { + "raw": [ + "Disable editing. Unlike isDisabled, keep component's value readable." + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeReadonly", + "required": false + }, + { + "uid": "isRequired", + "name": "isRequired", + "comment": { + "raw": [ + "Marks that component's value is required and shouldn't be empty" + ] + }, + "typeValue": { + "raw": "boolean" + }, + "editor": { + "type": "bool" + }, + "from": "@epam/uui-core:ICanBeRequired", + "required": false + }, + { + "uid": "value", + "name": "value", + "comment": { + "raw": [ + "The current value of component" + ] + }, + "typeValue": { + "raw": "DataTableState" + }, + "from": "@epam/uui-core:IControlled", + "required": true + }, + { + "uid": "onValueChange", + "name": "onValueChange", + "comment": { + "raw": [ + "Called when value needs to be changed (usually due to user interaction)" + ] + }, + "typeValue": { + "raw": "(newValue: DataTableState) => void" + }, + "editor": { + "type": "func" + }, + "from": "@epam/uui-core:IControlled", + "required": true + } + ], + "propsFromUnion": false + } + }, "@epam/uui-core:DataTableHeaderRowProps": { "summary": { "module": "@epam/uui-core", @@ -8500,6 +8947,10 @@ "print": [ "interface DataTableHeaderRowProps extends IEditable, IHasCX, DataTableColumnsConfigOptions {", " columns: DataColumnProps[];", + " /**", + " * Columns group configuration.", + " */", + " columnGroups?: DataColumnGroupProps[];", " selectAll?: ICheckable;", " /**", " * Enables collapse/expand all functionality.", @@ -8507,6 +8958,10 @@ " showFoldAll?: boolean;", " onConfigButtonClick?: (params: DataTableConfigModalParams) => any;", " renderCell?: (props: DataTableHeaderCellProps) => React.ReactNode;", + " /**", + " * Columns group cell render function.", + " */", + " renderGroupCell?: (props: DataTableHeaderGroupCellProps) => React.ReactNode;", " renderConfigButton?: () => React.ReactNode;", "}" ] @@ -8520,6 +8975,19 @@ }, "required": true }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "required": false + }, { "uid": "selectAll", "name": "selectAll", @@ -8566,6 +9034,22 @@ }, "required": false }, + { + "uid": "renderGroupCell", + "name": "renderGroupCell", + "comment": { + "raw": [ + "Columns group cell render function." + ] + }, + "typeValue": { + "raw": "(props: DataTableHeaderGroupCellProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "required": false + }, { "uid": "renderConfigButton", "name": "renderConfigButton", @@ -11288,6 +11772,8 @@ " imageUrl?: string;", " /** Url of error image to display on error page in case of mobile layout (app width < 720px) */", " mobileImageUrl?: string;", + " /** Additional message with link to the support portal */", + " supportLink?: React.ReactNode;", "}" ] }, @@ -11367,6 +11853,20 @@ "type": "string" }, "required": false + }, + { + "uid": "supportLink", + "name": "supportLink", + "comment": { + "raw": [ + "Additional message with link to the support portal" + ] + }, + "typeValue": { + "raw": "React.ReactNode" + }, + "typeValueRef": "@types/react:ReactNode", + "required": false } ], "propsFromUnion": false @@ -40831,6 +41331,23 @@ "from": "@epam/uui-core:DataColumnProps", "required": true }, + { + "uid": "group", + "name": "group", + "comment": { + "raw": [ + "A unique identifier for a group of columns that establishes a connection between the column and the group of columns." + ] + }, + "typeValue": { + "raw": "string" + }, + "editor": { + "type": "string" + }, + "from": "@epam/uui-core:DataColumnProps", + "required": false + }, { "uid": "caption", "name": "caption", @@ -41561,7 +42078,7 @@ " /**", " * DataTable column configuration.", " */", - " column: DataColumnProps;", + " column: DataColumnProps | DataColumnGroupProps;", " /**", " * CSS text-align property.", " */", @@ -41591,7 +42108,7 @@ ] }, "typeValue": { - "raw": "DataColumnProps" + "raw": "DataColumnProps | DataColumnGroupProps" }, "required": true }, @@ -71933,6 +72450,20 @@ "from": "@epam/uui-core:DataTableHeaderRowProps", "required": true }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Columns group configuration." + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "from": "@epam/uui-core:DataTableHeaderRowProps", + "required": false + }, { "uid": "selectAll", "name": "selectAll", @@ -71983,6 +72514,23 @@ "from": "@epam/uui-core:DataTableHeaderRowProps", "required": false }, + { + "uid": "renderGroupCell", + "name": "renderGroupCell", + "comment": { + "raw": [ + "Columns group cell render function." + ] + }, + "typeValue": { + "raw": "(props: DataTableHeaderGroupCellProps) => React.ReactNode" + }, + "editor": { + "type": "component" + }, + "from": "@epam/uui-core:DataTableHeaderRowProps", + "required": false + }, { "uid": "renderConfigButton", "name": "renderConfigButton", @@ -72424,6 +72972,8 @@ " getRows?(): DataRowProps[];", " /** Rows that should be rendered in table */", " rows?: DataRowProps[];", + " /** Array of all possible column groups for the table */", + " columnGroups?: DataColumnGroupProps[];", " /** Array of all possible columns for the table */", " columns: DataColumnProps[];", " /** Render callback for the table row.", @@ -72489,6 +73039,19 @@ }, "required": false }, + { + "uid": "columnGroups", + "name": "columnGroups", + "comment": { + "raw": [ + "Array of all possible column groups for the table" + ] + }, + "typeValue": { + "raw": "DataColumnGroupProps[]" + }, + "required": false + }, { "uid": "columns", "name": "columns", @@ -74203,8 +74766,12 @@ "name": "size", "comment": { "raw": [ - "Defines component size." - ] + "Defines component size.", + " @default '36'" + ], + "tags": { + "@default": "36" + } }, "typeValue": { "raw": "'36' | '48' | '24' | '30' | '42'" diff --git a/uui-docs/src/docBuilderGen/docBuilderGen.tsx b/uui-docs/src/docBuilderGen/docBuilderGen.tsx index ba66c15a77..c9398c1e6a 100644 --- a/uui-docs/src/docBuilderGen/docBuilderGen.tsx +++ b/uui-docs/src/docBuilderGen/docBuilderGen.tsx @@ -34,6 +34,8 @@ export async function docBuilderGen(params: IDocBuilderGenParams): Promise { + console.log('propParam', propParam); + console.log('docBuilderGenCtx.propsOverride', docBuilderGenCtx.propsOverride); const prop = overrideProp(propParam, docBuilderGenCtx.propsOverride?.[propParam.name]); let nextProp = buildPropDetails({ prop, docs, skin: params.skin, docBuilderGenCtx }); const isResolved = !!nextProp; diff --git a/uui/components/datePickers/types.ts b/uui/components/datePickers/types.ts index 516bcfb69e..ce6cad7783 100644 --- a/uui/components/datePickers/types.ts +++ b/uui/components/datePickers/types.ts @@ -32,6 +32,7 @@ export interface DatePickerModsOverride {} type DatePickerMods = { /** * Defines component size. + * @default '36' */ size?: '24' | '30' | '36' | '42' | '48'; }; diff --git a/uui/components/layout/FlexItems/FlexRow.tsx b/uui/components/layout/FlexItems/FlexRow.tsx index b9a71448ed..c802c05fbc 100644 --- a/uui/components/layout/FlexItems/FlexRow.tsx +++ b/uui/components/layout/FlexItems/FlexRow.tsx @@ -1,5 +1,6 @@ import { devLogger, FlexRowProps as uuiFlexRowProps, withMods } from '@epam/uui-core'; import { FlexRow as uuiFlexRow } from '@epam/uui-components'; +import { settings } from '../../../settings'; import css from './FlexRow.module.scss'; export type RowMods = { @@ -35,7 +36,7 @@ export const FlexRow = withMods(uuiFlexRow, (prop return [ css.root, - props.size !== null && 'uui-size-' + (props.size || '36'), + props.size !== null && 'uui-size-' + (props.size || settings.sizes.defaults.flexRow), props.padding && css['padding-' + props.padding], props.vPadding && css['vPadding-' + props.vPadding], props.margin && css['margin-' + props.margin], diff --git a/uui/settings.ts b/uui/settings.ts index c5df674c86..afa5f96aa8 100644 --- a/uui/settings.ts +++ b/uui/settings.ts @@ -8,6 +8,7 @@ export const settings: Settings = { button: '36', checkbox: '18', countIndicator: '24', + flexRow: '36', linkButton: '36', numericInput: '36', radioInput: '18', diff --git a/uui/settings.types.ts b/uui/settings.types.ts index da532ad388..9bcf8adc30 100644 --- a/uui/settings.types.ts +++ b/uui/settings.types.ts @@ -4,6 +4,7 @@ interface DefaultSizes { button: string; checkbox: string; countIndicator: string; + flexRow: string; linkButton: string; numericInput: string; radioInput: string; diff --git a/yarn.lock b/yarn.lock index cdffbfc8e7..40b1a91aae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3124,80 +3124,85 @@ estree-walker "^2.0.2" picomatch "^2.3.1" -"@rollup/rollup-android-arm-eabi@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.2.tgz#9047b5b1ec19f58c0fdf3a072bd977bcec056576" - integrity sha512-ahxSgCkAEk+P/AVO0vYr7DxOD3CwAQrT0Go9BJyGQ9Ef0QxVOfjDZMiF4Y2s3mLyPrjonchIMH/tbWHucJMykQ== - -"@rollup/rollup-android-arm64@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.2.tgz#08a2d2705193ebb3054941994e152808beb5254e" - integrity sha512-lAarIdxZWbFSHFSDao9+I/F5jDaKyCqAPMq5HqnfpBw8dKDiCaaqM0lq5h1pQTLeIqueeay4PieGR5jGZMWprw== - -"@rollup/rollup-darwin-arm64@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.2.tgz#bf746c610f337b104408ec001549d825a91eca57" - integrity sha512-SWsr8zEUk82KSqquIMgZEg2GE5mCSfr9sE/thDROkX6pb3QQWPp8Vw8zOq2GyxZ2t0XoSIUlvHDkrf5Gmf7x3Q== - -"@rollup/rollup-darwin-x64@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.2.tgz#59ebe3b858a44680d5f87546ea2df1c7e3135f6a" - integrity sha512-o/HAIrQq0jIxJAhgtIvV5FWviYK4WB0WwV91SLUnsliw1lSAoLsmgEEgRWzDguAFeUEUUoIWXiJrPqU7vGiVkA== - -"@rollup/rollup-linux-arm-gnueabihf@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.2.tgz#44cffc07d04d659cb635aec11bef530d5757ee6a" - integrity sha512-nwlJ65UY9eGq91cBi6VyDfArUJSKOYt5dJQBq8xyLhvS23qO+4Nr/RreibFHjP6t+5ap2ohZrUJcHv5zk5ju/g== - -"@rollup/rollup-linux-arm64-gnu@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.2.tgz#9901e2288fb192b74a2f8428c507d43cc2739ceb" - integrity sha512-Pg5TxxO2IVlMj79+c/9G0LREC9SY3HM+pfAwX7zj5/cAuwrbfj2Wv9JbMHIdPCfQpYsI4g9mE+2Bw/3aeSs2rQ== - -"@rollup/rollup-linux-arm64-musl@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.2.tgz#8a2c55a72e0c716a15d830fee3bf5a1a756f13ec" - integrity sha512-cAOTjGNm84gc6tS02D1EXtG7tDRsVSDTBVXOLbj31DkwfZwgTPYZ6aafSU7rD/4R2a34JOwlF9fQayuTSkoclA== - -"@rollup/rollup-linux-powerpc64le-gnu@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.2.tgz#71bf99c8017476ac85b09d21b3fa2eacbad96100" - integrity sha512-4RyT6v1kXb7C0fn6zV33rvaX05P0zHoNzaXI/5oFHklfKm602j+N4mn2YvoezQViRLPnxP8M1NaY4s/5kXO5cw== - -"@rollup/rollup-linux-riscv64-gnu@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.2.tgz#48ee7fe5fee7b6d0028b6dda4fab95238208a0cd" - integrity sha512-KNUH6jC/vRGAKSorySTyc/yRYlCwN/5pnMjXylfBniwtJx5O7X17KG/0efj8XM3TZU7raYRXJFFReOzNmL1n1w== - -"@rollup/rollup-linux-s390x-gnu@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.2.tgz#65ad6f82729ef9d8634847189214e3205892f42f" - integrity sha512-xPV4y73IBEXToNPa3h5lbgXOi/v0NcvKxU0xejiFw6DtIYQqOTMhZ2DN18/HrrP0PmiL3rGtRG9gz1QE8vFKXQ== - -"@rollup/rollup-linux-x64-gnu@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.2.tgz#2ab802ce25c0d0d44a0ea55b0068f79e462d22cd" - integrity sha512-QBhtr07iFGmF9egrPOWyO5wciwgtzKkYPNLVCFZTmr4TWmY0oY2Dm/bmhHjKRwZoGiaKdNcKhFtUMBKvlchH+Q== - -"@rollup/rollup-linux-x64-musl@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.2.tgz#85dcd3f549c2fdbcf1cb1f1b5f501933ed590880" - integrity sha512-8zfsQRQGH23O6qazZSFY5jP5gt4cFvRuKTpuBsC1ZnSWxV8ZKQpPqOZIUtdfMOugCcBvFGRa1pDC/tkf19EgBw== - -"@rollup/rollup-win32-arm64-msvc@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.2.tgz#10f608dfc1e5bb96aca18c7784cc4a94d890c03c" - integrity sha512-H4s8UjgkPnlChl6JF5empNvFHp77Jx+Wfy2EtmYPe9G22XV+PMuCinZVHurNe8ggtwoaohxARJZbaH/3xjB/FA== - -"@rollup/rollup-win32-ia32-msvc@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.2.tgz#f27f9fb64b7e10b04121e0054d9145ee21589267" - integrity sha512-djqpAjm/i8erWYF0K6UY4kRO3X5+T4TypIqw60Q8MTqSBaQNpNXDhxdjpZ3ikgb+wn99svA7jxcXpiyg9MUsdw== - -"@rollup/rollup-win32-x64-msvc@4.14.2": - version "4.14.2" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.2.tgz#5d2d9dc96b436469dc74ef93de069b14fb12aace" - integrity sha512-teAqzLT0yTYZa8ZP7zhFKEx4cotS8Tkk5XiqNMJhD4CpaWB1BHARE4Qy+RzwnXvSAYv+Q3jAqCVBS+PS+Yee8Q== +"@rollup/rollup-android-arm-eabi@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz#8b613b9725e8f9479d142970b106b6ae878610d5" + integrity sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w== + +"@rollup/rollup-android-arm64@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz#654ca1049189132ff602bfcf8df14c18da1f15fb" + integrity sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA== + +"@rollup/rollup-darwin-arm64@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz#6d241d099d1518ef0c2205d96b3fa52e0fe1954b" + integrity sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q== + +"@rollup/rollup-darwin-x64@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz#42bd19d292a57ee11734c980c4650de26b457791" + integrity sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw== + +"@rollup/rollup-linux-arm-gnueabihf@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz#f23555ee3d8fe941c5c5fd458cd22b65eb1c2232" + integrity sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ== + +"@rollup/rollup-linux-arm-musleabihf@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz#f3bbd1ae2420f5539d40ac1fde2b38da67779baa" + integrity sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg== + +"@rollup/rollup-linux-arm64-gnu@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz#7abe900120113e08a1f90afb84c7c28774054d15" + integrity sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw== + +"@rollup/rollup-linux-arm64-musl@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz#9e655285c8175cd44f57d6a1e8e5dedfbba1d820" + integrity sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA== + +"@rollup/rollup-linux-powerpc64le-gnu@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz#9a79ae6c9e9d8fe83d49e2712ecf4302db5bef5e" + integrity sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg== + +"@rollup/rollup-linux-riscv64-gnu@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz#67ac70eca4ace8e2942fabca95164e8874ab8128" + integrity sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA== + +"@rollup/rollup-linux-s390x-gnu@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz#9f883a7440f51a22ed7f99e1d070bd84ea5005fc" + integrity sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q== + +"@rollup/rollup-linux-x64-gnu@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz#70116ae6c577fe367f58559e2cffb5641a1dd9d0" + integrity sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg== + +"@rollup/rollup-linux-x64-musl@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz#f473f88219feb07b0b98b53a7923be716d1d182f" + integrity sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g== + +"@rollup/rollup-win32-arm64-msvc@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz#4349482d17f5d1c58604d1c8900540d676f420e0" + integrity sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw== + +"@rollup/rollup-win32-ia32-msvc@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz#a6fc39a15db618040ec3c2a24c1e26cb5f4d7422" + integrity sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g== + +"@rollup/rollup-win32-x64-msvc@4.22.4": + version "4.22.4" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz#3dd5d53e900df2a40841882c02e56f866c04d202" + integrity sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q== "@rushstack/eslint-patch@^1.1.0": version "1.10.2" @@ -15413,28 +15418,29 @@ rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -rollup@4.14.2: - version "4.14.2" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.14.2.tgz#992df3c3bb4ca84ce6b00d51aacb1e5a62d0a14c" - integrity sha512-WkeoTWvuBoFjFAhsEOHKRoZ3r9GfTyhh7Vff1zwebEFLEFjT1lG3784xEgKiTa7E+e70vsC81roVL2MP4tgEEQ== +rollup@4.22.4: + version "4.22.4" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.22.4.tgz#4135a6446671cd2a2453e1ad42a45d5973ec3a0f" + integrity sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A== dependencies: "@types/estree" "1.0.5" optionalDependencies: - "@rollup/rollup-android-arm-eabi" "4.14.2" - "@rollup/rollup-android-arm64" "4.14.2" - "@rollup/rollup-darwin-arm64" "4.14.2" - "@rollup/rollup-darwin-x64" "4.14.2" - "@rollup/rollup-linux-arm-gnueabihf" "4.14.2" - "@rollup/rollup-linux-arm64-gnu" "4.14.2" - "@rollup/rollup-linux-arm64-musl" "4.14.2" - "@rollup/rollup-linux-powerpc64le-gnu" "4.14.2" - "@rollup/rollup-linux-riscv64-gnu" "4.14.2" - "@rollup/rollup-linux-s390x-gnu" "4.14.2" - "@rollup/rollup-linux-x64-gnu" "4.14.2" - "@rollup/rollup-linux-x64-musl" "4.14.2" - "@rollup/rollup-win32-arm64-msvc" "4.14.2" - "@rollup/rollup-win32-ia32-msvc" "4.14.2" - "@rollup/rollup-win32-x64-msvc" "4.14.2" + "@rollup/rollup-android-arm-eabi" "4.22.4" + "@rollup/rollup-android-arm64" "4.22.4" + "@rollup/rollup-darwin-arm64" "4.22.4" + "@rollup/rollup-darwin-x64" "4.22.4" + "@rollup/rollup-linux-arm-gnueabihf" "4.22.4" + "@rollup/rollup-linux-arm-musleabihf" "4.22.4" + "@rollup/rollup-linux-arm64-gnu" "4.22.4" + "@rollup/rollup-linux-arm64-musl" "4.22.4" + "@rollup/rollup-linux-powerpc64le-gnu" "4.22.4" + "@rollup/rollup-linux-riscv64-gnu" "4.22.4" + "@rollup/rollup-linux-s390x-gnu" "4.22.4" + "@rollup/rollup-linux-x64-gnu" "4.22.4" + "@rollup/rollup-linux-x64-musl" "4.22.4" + "@rollup/rollup-win32-arm64-msvc" "4.22.4" + "@rollup/rollup-win32-ia32-msvc" "4.22.4" + "@rollup/rollup-win32-x64-msvc" "4.22.4" fsevents "~2.3.2" rollup@^2.43.1: @@ -16257,16 +16263,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -16369,14 +16366,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18276,7 +18266,7 @@ workbox-window@6.6.1: "@types/trusted-types" "^2.0.2" workbox-core "6.6.1" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -18294,15 +18284,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From a114c50713cb898bae2255dae9c553a2aff5f218 Mon Sep 17 00:00:00 2001 From: Siarhei_Dzeraviannik Date: Wed, 4 Dec 2024 19:13:11 +0300 Subject: [PATCH 02/13] removed mixins for sass size calculations from uui package --- app/src/data/propsOverride_4px.ts | 30 +++++++- epam-assets/theme/variables/6px_grid.scss | 7 ++ uui/assets/styles/buttonLayout.scss | 70 ------------------- uui/assets/styles/controlLayout.scss | 28 -------- uui/assets/styles/icons.scss | 55 --------------- uui/assets/styles/index.scss | 4 -- uui/assets/styles/text-size.scss | 42 ----------- .../fileUpload/FileCard.module.scss | 11 ++- .../FilterPanelItemToggler.module.scss | 46 ++++-------- .../filters/FilterPanelItemToggler.tsx | 2 +- uui/components/layout/Accordion.module.scss | 16 ++++- .../MainMenu/Burger/BurgerButton.module.scss | 9 ++- .../MainMenu/MainMenuButton.module.scss | 16 ++++- .../overlays/NotificationCard.module.scss | 11 ++- 14 files changed, 104 insertions(+), 243 deletions(-) delete mode 100644 uui/assets/styles/buttonLayout.scss delete mode 100644 uui/assets/styles/controlLayout.scss delete mode 100644 uui/assets/styles/icons.scss delete mode 100644 uui/assets/styles/text-size.scss diff --git a/app/src/data/propsOverride_4px.ts b/app/src/data/propsOverride_4px.ts index 28d58662c9..4ffd958035 100644 --- a/app/src/data/propsOverride_4px.ts +++ b/app/src/data/propsOverride_4px.ts @@ -27,6 +27,14 @@ const propsOverride: TPropEditorTypeOverride = { }, }, }, + '@epam/uui:IconButtonProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + }, + }, '@epam/uui:BadgeProps': { size: { editor: { @@ -170,7 +178,27 @@ const propsOverride: TPropEditorTypeOverride = { }, }, }, - + '@epam/uui:RangeDatePickerProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['40', '48'], + }, + }, + }, + '@epam/uui:RatingProps': { + size: { + editor: { + type: TPropEditorType.oneOf, + options: ['20', '24'], + }, + comment: { + tags: { + '@default': '20', + }, + }, + }, + }, }; export default propsOverride; diff --git a/epam-assets/theme/variables/6px_grid.scss b/epam-assets/theme/variables/6px_grid.scss index ba6a694d0a..f450d25bbc 100644 --- a/epam-assets/theme/variables/6px_grid.scss +++ b/epam-assets/theme/variables/6px_grid.scss @@ -324,4 +324,11 @@ --uui-alert-caption-gap-h: 9px; } } + + .uui-filters-panel-item-toggler { + &.uui-size-24 { + --uui-horizontal-padding: 3px; + --uui-horizontal-gap: 3px; + } + } } diff --git a/uui/assets/styles/buttonLayout.scss b/uui/assets/styles/buttonLayout.scss deleted file mode 100644 index cbf3a7e400..0000000000 --- a/uui/assets/styles/buttonLayout.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use './text-size' as *; -@use './icons' as *; - -@mixin button-layout($size, $borderWidth) { - @include button-horizontal-layout($size, $borderWidth); - @include button-vertical-layout($size, $borderWidth); - @include scalable-icon-size($size); -} - -@mixin link-button-layout($size) { - @include link-button-horizontal-layout($size); - @include button-vertical-layout($size, 0); - @include scalable-icon-size($size); -} - -@mixin button-vertical-layout($size, $borderWidth) { - &:global(.uui-button-box) { - min-height: $size; - border-width: $borderWidth; - } - - :global(.uui-caption) { - @include text-size($size, $borderWidth); - - @if ($size == 42px or $size == 48px) { - font-size: 16px; - } - } -} - -@mixin button-horizontal-layout($size, $borderWidth) { - min-width: $size; - - @if ($size == 18px) { - @include button-padding(3px, 3px, $borderWidth); - } @else if ($size == 24px) { - @include button-padding(6px, 6px, $borderWidth); - } @else if ($size == 30px) { - @include button-padding(6px, 6px, $borderWidth); - } @else if ($size == 36px) { - @include button-padding(6px, 6px, $borderWidth); - } @else if ($size == 42px) { - @include button-padding(12px, 6px, $borderWidth); - } @else if ($size == 48px) { - @include button-padding(12px, 6px, $borderWidth); - } @else { - @include button-padding(6px, 6px, $borderWidth); } -} - -@mixin button-padding($controlPadding, $captionPadding, $borderWidth) { - padding-left: $controlPadding - $borderWidth; - padding-right: $controlPadding - $borderWidth; - - :global(.uui-caption) { - padding-left: $captionPadding; - padding-right: $captionPadding; - } -} - -@mixin link-button-horizontal-layout($size) { - min-width: $size; - - &:global(.uui-has-left-icon) :global(.uui-caption) { - padding-left: 6px; - } - - &:global(.uui-has-right-icon) :global(.uui-caption) { - padding-right: 6px; - } -} diff --git a/uui/assets/styles/controlLayout.scss b/uui/assets/styles/controlLayout.scss deleted file mode 100644 index 9a264fb0c8..0000000000 --- a/uui/assets/styles/controlLayout.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use 'text-size' as *; - -@mixin control-vertical-layout($size, $borderWidth) { - :global(.uui-caption), :global(.uui-input) { - @include text-size($size, $borderWidth); - } - - &:global(.uui-button-box), &:global(.uui-input-box) { - min-height: $size; - border-width: $borderWidth; - } -} - -@mixin control-box-layout($size, $borderWidth) { - min-width: $size; - padding-left: 5px; - padding-right: 5px; - - :global(.uui-caption), :global(.uui-input) { - padding-left: 6px; - padding-right: 6px; - } - - &:global(.uui-button-box), &:global(.uui-input-box) { - min-height: $size; - border-width: $borderWidth; - } -} diff --git a/uui/assets/styles/icons.scss b/uui/assets/styles/icons.scss deleted file mode 100644 index 754bf3ec29..0000000000 --- a/uui/assets/styles/icons.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use 'sass:math'; -@use 'sass:meta'; - -@mixin icon-layout($size) { - :global(.uui-icon) { - svg { - height: math.div($size, 36) * 24; - max-width: math.div($size, 36) * 24; - } - } -} - -@mixin icon-size($size) { - $striped-size: strip-unit($size); - - :global(.uui-icon) { - svg { - height: #{$striped-size}px; - width: #{$striped-size}px; - } - } -} - -@function strip-unit($number) { - @if meta.type-of($number) == 'number' and not math.is-unitless($number) { - @return math.div($number, $number * 0 + 1); - } - - @return $number; -} - -@mixin scalable-icon-size($size, $additionalClass: '') { - $striped-size: strip-unit($size); - - #{$additionalClass}:global(.uui-icon) { - svg { - @if ($striped-size == 18) { - height: 12px; - } @else if ($striped-size == 24) { - height: 12px; - } @else if ($striped-size == 30) { - height: 18px; - } @else if ($striped-size == 36) { - height: 18px; - } @else if ($striped-size == 42) { - height: 18px; - } @else if ($striped-size == 48) { - height: 24px; - } @else if ($striped-size == 60) { - height: 24px; - } - width: inherit; - } - } -} \ No newline at end of file diff --git a/uui/assets/styles/index.scss b/uui/assets/styles/index.scss index 1b83acbef0..c5ef368e73 100644 --- a/uui/assets/styles/index.scss +++ b/uui/assets/styles/index.scss @@ -1,9 +1,5 @@ -@forward 'buttonLayout'; @forward 'clickable'; -@forward 'controlLayout'; @forward 'effects'; -@forward 'icons'; @forward 'inputs'; -@forward 'text-size'; @forward 'typography'; @forward 'dnd'; diff --git a/uui/assets/styles/text-size.scss b/uui/assets/styles/text-size.scss deleted file mode 100644 index fd211dc895..0000000000 --- a/uui/assets/styles/text-size.scss +++ /dev/null @@ -1,42 +0,0 @@ -@function vpadding($size, $border-width) { - @if ($size == 18px or $size == 24px) { - @return (3px - $border-width); - } @else if ($size == 30px) { - @return (6px - $border-width); - } @else if ($size == 36px or $size == 42px) { - @return (9px - $border-width); - } @else if ($size == 48px) { - @return (12px - $border-width); - } @else if ($size == 60px) { - @return (15px - $border-width); - } - - @return (null); -} - -@mixin text-size($size, $border-width: 0) { - @if ($size == 18px) { - line-height: 12px; - font-size: 10px; - } @else if ($size == 24px) { - line-height: 18px; - font-size: 12px; - } @else if ($size == 30px) { - line-height: 18px; - font-size: 14px; - } @else if ($size == 36px) { - line-height: 18px; - font-size: 14px; - } @else if ($size == 42px) { - line-height: 24px; - font-size: 16px; - } @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); -} diff --git a/uui/components/fileUpload/FileCard.module.scss b/uui/components/fileUpload/FileCard.module.scss index a22e2a6065..077b7aa5fc 100644 --- a/uui/components/fileUpload/FileCard.module.scss +++ b/uui/components/fileUpload/FileCard.module.scss @@ -12,9 +12,11 @@ --uui-file_card-icon-mov: #5214CC; --uui-file_card-icon-img: #E67E17; + --uui-file_card-font-error: var(--uui-font); + --uui-file_card-border-radius: var(--uui-border-radius); + --uui-file_card-icon-size: 18px; - --uui-file_card-font-error: var(--uui-font); &:global(.uui-file_card) { box-sizing: border-box; @@ -87,6 +89,11 @@ min-width: 18px; flex-basis: 0; - @include icon-size(18); + :global(.uui-icon) { + svg { + height: var(--uui-file_card-icon-size); + width: inherit; + } + } } } diff --git a/uui/components/filters/FilterPanelItemToggler.module.scss b/uui/components/filters/FilterPanelItemToggler.module.scss index e80982b238..fcef43bf49 100644 --- a/uui/components/filters/FilterPanelItemToggler.module.scss +++ b/uui/components/filters/FilterPanelItemToggler.module.scss @@ -15,18 +15,25 @@ --uui-filters_toggler-font: var(--uui-font); --uui-filters_toggler-font-weight: 400; + --uui-filters_toggler-min-height: var(--uui-size); + --uui-filters_toggler-border-width: var(--uui-border-width); + --uui-filters_toggler-horizontal-padding: calc(var(--uui-horizontal-padding) - var(--uui-filters_toggler-border-width)); + --uui-filters_toggler-caption-horizontal-padding: var(--uui-horizontal-gap); + --uui-filters_toggler-icon-size: var(--uui-icon-size); + &:global(.uui-input-box) { box-sizing: border-box; min-width: 40px; + min-height: var(--uui-filters_toggler-min-height); position: relative; display: flex; outline: none; - border: 1px solid var(--uui-filters_toggler-border); + border: var(--uui-filters_toggler-border-width) solid var(--uui-filters_toggler-border); border-radius: var(--uui-filters_toggler-border-radius); background-color: var(--uui-filters_toggler-bg); box-shadow: var(--uui-filters_toggler-shadow); - padding-left: 6px; - padding-right: 6px; + padding-left: var(--uui-filters_toggler-horizontal-padding); + padding-right: var(--uui-filters_toggler-horizontal-padding); &:global(.-clickable):hover { cursor: pointer; @@ -107,36 +114,11 @@ } } - @mixin filterTogglerSize($size) { - &:global(.size-#{$size}) { - @if $size == 24 { - padding-left: 2px; - padding-right: 2px; - - .title-wrapper { - padding-left: 3px; - padding-right: 3px; - } - } @else if $size == 42 { - padding-left: 11px; - padding-right: 11px; - } @else if $size == 48 { - padding-left: 11px; - padding-right: 11px; - } @else { - padding-left: 5px; - padding-right: 5px; - } - - @include control-vertical-layout(#{$size}px, 1px); - @include scalable-icon-size($size); + :global(.uui-icon) { + svg { + height: var(--uui-filters_toggler-icon-size); + width: inherit; } } - - @include filterTogglerSize(24); - @include filterTogglerSize(30); - @include filterTogglerSize(36); - @include filterTogglerSize(42); - @include filterTogglerSize(48); } } diff --git a/uui/components/filters/FilterPanelItemToggler.tsx b/uui/components/filters/FilterPanelItemToggler.tsx index be44e5aa84..474e02b5b1 100644 --- a/uui/components/filters/FilterPanelItemToggler.tsx +++ b/uui/components/filters/FilterPanelItemToggler.tsx @@ -63,7 +63,7 @@ export const FilterPanelItemToggler = React.forwardRef Date: Wed, 11 Dec 2024 16:09:23 +0300 Subject: [PATCH 03/13] added default sizes to 'FiltersPanel' & 'RichTextView', removed redundant sizes for internal items of complex components --- app/src/data/settings_4px.ts | 2 ++ uui/components/buttons/IconButton.tsx | 3 ++- uui/components/datePickers/Calendar.tsx | 3 ++- uui/components/datePickers/DatePicker.tsx | 4 ++-- uui/components/datePickers/RangeDatePicker.tsx | 9 +++------ .../datePickers/RangeDatePickerInput.module.scss | 8 ++++---- uui/components/errors/ErrorHandler.module.scss | 2 ++ uui/components/errors/ErrorHandler.tsx | 4 ++-- uui/components/fileUpload/FileCard.tsx | 2 +- uui/components/filters/FilterNumericBody.tsx | 3 --- uui/components/filters/FiltersPanel.tsx | 14 +++++++++----- .../filters/PresetPanel/PresetsPanel.tsx | 2 +- uui/components/forms/Form.tsx | 2 +- uui/components/forms/useForm.tsx | 2 +- uui/components/overlays/Snackbar.tsx | 2 +- uui/components/typography/RichTextView.tsx | 3 ++- uui/settings.ts | 2 ++ uui/settings.types.ts | 2 ++ 18 files changed, 39 insertions(+), 30 deletions(-) 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 (