Feature: sizes customizing - set of new components #2396

siarhei-epam · 2024-06-28T16:02:45Z

Description:

Added a set of new components with support for size customization.

LabledInput - changed right padding for labelPosition prop from 5px to 6px (agreed with the design team)
Paginator - changed width for 3 dots (agreed with the design team)
PickerInputBody - changed left/right padding for search container according design
DatePickerBody - changed top padding for container (agreed with the design team)
TextArea - fixed line-height in 24 size, changed internal paddings according design

github-actions · 2024-06-28T16:09:50Z

Generated by: track-bundle-size
Generated at: Wed, 11 Sep 2024 19:40:55 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v5.8.4 (2024-07-30)
CI Status: ok

Module	Baseline Size (v5.8.4)	Size	Diff	Within Threshold	Threshold (min - max)
templateApp	755.39	763	+7.61 `js:+0.56` `css:+7.06`	🆗	679.85 - 830.92
@epam/app	6552.38	6629.78	+77.39 `js:+17.75` `css:+59.64`	🆗	5897.14 - 7207.62
@epam/draft-rte	53.77	53.78	+0.02 `js:+0` `css:+0.01`	🆗	48.39 - 59.15
@epam/electric	4.57	4.57	0 `js:0` `css:0`	🆗	4.12 - 5.03
@epam/promo	55.66	57.17	+1.5 `js:-0.04` `css:+1.54`	🆗	50.1 - 61.23
@epam/uui-extra	0.21	0.21	0 `js:0` `css:0`	🆗	0.19 - 0.23
@epam/loveship	92.08	93.73	+1.65 `js:-0.01` `css:+1.66`	🆗	82.88 - 101.3
@epam/uui-components	260.74	262.96	+2.22 `js:+2.05` `css:+0.17`	🆗	234.66 - 286.81
@epam/uui-core	333.83	335.51	+1.68 `js:+1.68` `css:0`	🆗	300.45 - 367.21
@epam/uui-db	44.7	44.7	0 `js:0` `css:0`	🆗	40.23 - 49.17
@epam/uui-docs	206.75	207.12	+0.37 `js:+0.37` `css:0`	🆗	186.07 - 227.43
@epam/uui-editor	181.56	183.43	+1.87 `js:+1.87` `css:0`	🆗	163.41 - 199.72
@epam/uui-timeline	77.95	79.51	+1.55 `js:+1.55` `css:0`	🆗	70.16 - 85.75
@epam/uui	601.25	604.53	+3.29 `js:+0.22` `css:+3.06`	🆗	541.12 - 661.37

new sizes (raw)

To set the sizes as a new baseline, you can copy/paste next content to the uui-build/config/bundleSizeBaseLine.json and commit the file.

{
  "version": "5.9.1",
  "timestamp": "2024-09-11",
  "sizes": {
    "templateApp": {
      "css": 299321,
      "js": 481988
    },
    "@epam/app": {
      "css": 1660826,
      "js": 5128064
    },
    "@epam/draft-rte": {
      "css": 9784,
      "js": 45294
    },
    "@epam/electric": {
      "css": 2275,
      "js": 2408
    },
    "@epam/promo": {
      "css": 47645,
      "js": 10892
    },
    "@epam/uui-extra": {
      "css": 0,
      "js": 213
    },
    "@epam/loveship": {
      "css": 53447,
      "js": 42540
    },
    "@epam/uui-components": {
      "css": 22496,
      "js": 246769
    },
    "@epam/uui-core": {
      "css": 0,
      "js": 343565
    },
    "@epam/uui-db": {
      "css": 0,
      "js": 45769
    },
    "@epam/uui-docs": {
      "css": 2448,
      "js": 209641
    },
    "@epam/uui-editor": {
      "css": 12499,
      "js": 175334
    },
    "@epam/uui-timeline": {
      "css": 2252,
      "js": 79163
    },
    "@epam/uui": {
      "css": 277113,
      "js": 341924
    }
  }
}

Generated by: generate-components-api
CI Status: ok

Total amount of exported types/props without JSDoc comments

	Amount
Types	301 (+6) ⚠️🆗
Props	233 (+0) 🆗

New missing comments

NOTE: It's either a new exported types/props without JSDoc, or it's an existing code from which you deleted the JSDoc comments.

Types:
- @epam/uui:DataPickerFooterProps
- @epam/uui:DataTableHeaderCellModsOverride
- @epam/uui:DataTableModsOverride
- @epam/uui:PaginatorModsOverride
- @epam/uui:PaginatorProps
- @epam/uui:Settings
Props:
- <empty>

…g size theming approach. Button, LinkButton, VerticalTabButton fixed rtl support

# Conflicts: # app/package.json # changelog.md # draft-rte/package.json # epam-assets/package.json # epam-electric/package.json # epam-promo/package.json # extra/package.json # lerna.json # loveship/package.json # templates/uui-cra-template/package.json # test-utils/package.json # uui-build/package.json # uui-components/package.json # uui-core/package.json # uui-db/package.json # uui-docs/package.json # uui-e2e-tests/package.json # uui-editor/package.json # uui-timeline/package.json # uui/package.json

… variables for vanilla theme

# Conflicts: # app/src/common/AppHeader.module.scss # app/src/common/AppHeader.tsx

# Conflicts: # uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/RangeDatePicker-Opened-Electric-NotSkin.png # uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/RangeDatePicker-Opened-Loveship-NotSkin.png # uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/RangeDatePicker-Opened-LoveshipDark-NotSkin.png # uui-e2e-tests/tests/previewTests/__screenshots__/linux/chromium/RangeDatePicker-Opened-Promo-NotSkin.png # uui/components/datePickers/CalendarPresets.module.scss # uui/components/datePickers/DatePickerBody.module.scss # uui/components/datePickers/RangeDatePicker.tsx # uui/components/datePickers/__tests__/__snapshots__/RangeDatePicker.test.tsx.snap # uui/components/tables/__tests__/__snapshots__/DataTableCell.test.tsx.snap # uui/components/tables/__tests__/__snapshots__/DataTableRow.test.tsx.snap # uui/components/widgets/Badge.module.scss # uui/components/widgets/CountIndicator.module.scss # uui/index.tsx

…' into feature/sizes-customizing-update

# Conflicts: # uui/components/pickers/DataPickerCell.tsx

…ach, fixed support 'rtl' for some components & site, updated 'dayjs' package

# Conflicts: # uui/components/tables/DataTableCell.tsx

AlekseyManetov · 2024-08-29T10:48:54Z

epam-promo/components/typography/Text.tsx

+     * Defines text size
+     * @default '36'
+     */
+    size?: TextSize;


to be able to override the size type in the uui package, accordingly, this must be written in the skins

AlekseyManetov · 2024-08-29T14:52:59Z

uui-components/src/table/DataTableHeaderCell.tsx

+export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHeaderCellProps<TItem, TId> & DataTableRenderProps, DataTableHeaderCellState> {
+    observer: MutationObserver;
+
+    constructor(props: DataTableHeaderCellProps<TItem, TId> & DataTableRenderProps) {


Remove observer logic, just use window?.document.dir value due to potential performance issues

AlekseyManetov · 2024-08-29T15:00:48Z

uui/components/pickers/DataPickerBody.module.scss

-:global(.uui-pickerInput-body) {
-    --uui-dt-cell-border-width: 0;
-    --uui-pickerInput-selected_mark: var(--uui-info-50);
+:global(.uui-picker_input-body) {


we didn't use camel case, I brought to the unity of using classes on the project

AlekseyManetov · 2024-08-29T15:02:36Z

uui/components/tables/DataTable.tsx

@@ -2,25 +2,40 @@ import * as React from 'react';
 import { IconContainer, DataTableSelectionProvider, DataTableFocusManager, DataTableFocusProvider } from '@epam/uui-components';
 import { useColumnsWithFilters } from '../../helpers';
 import {
-    ColumnsConfig, DataRowProps, useUuiContext, uuiScrollShadows, useColumnsConfig, IEditable, DataTableState, DataTableColumnsConfigOptions,
-    DataSourceListProps, DataColumnProps, cx, TableFiltersConfig, DataTableRowProps, DataTableSelectedCellData,
+    ColumnsConfig,


place in a multiline

AlekseyManetov · 2024-08-29T15:03:29Z

uui/components/tables/DataTable.tsx

-     * Defines table header size
-     * @default '36'
-     * */
-    headerSize?: '36' | '48' | '60';


moved to DataTableMods to be able to override the type

AlekseyManetov · 2024-08-29T15:44:46Z

uui/settings.ts

padding: { modal: '24', default: '12', -> to dropdown },

AlekseyManetov · 2024-08-29T15:49:28Z

uui/settings.ts

+                utmost: '24',
+            },
+        },
+        dataTableRow: {


dataTableRow: { defaults: { columnsGap: '24', }, },

AlekseyManetov · 2024-08-29T15:58:44Z

uui/settings.ts

+                default: '12',
+            },
+            leftPadding: {
+                default: '12',


probably replace with gap?

AlekseyManetov · 2024-08-29T16:01:10Z

uui/settings.ts

+                60: '48',
+            },
+            leftPadding: {
+                editable: '0',


hardcode editable value

AlekseyManetov · 2024-08-29T16:03:26Z

uui/settings.ts

+            },
+            leftPadding: {
+                default: '12',
+                utmost: '24',


Probably firstColumnPadding and lastColumnPading

[Text]: reworked style calculation

# Conflicts: # uui/components/tables/DataTableHeaderCell.module.scss

AlekseyManetov · 2024-09-11T12:29:51Z

uui/components/pickers/DataPickerFooter.tsx

@@ -42,10 +42,10 @@ function DataPickerFooterImpl<TItem, TId>(props: PropsWithChildren<DataPickerFoo
    const shouldShowFooter = isSinglePicker ? (!isSearching && !props.disableClear) : !isSearching;

    return shouldShowFooter && (
-        <FlexRow size={ props.size } padding={ settings.sizes.dataPickerFooter.flexRowPadding as FlexRowProps['padding'] }>
+        <FlexRow padding={ settings.sizes.pickerInput.body.dropdown.padding as FlexRowProps['padding'] }>


Probably we can move this from settings to css variable?

AlekseyManetov · 2024-09-11T12:32:54Z

uui/components/pickers/PickerItem.tsx

@@ -88,5 +88,6 @@ export function PickerItem<TItem, TId>(props: PickerItemProps<TItem, TId>) {
 }

 function getAvatarSize(size: PickerItemProps<any, any>['size'], isMultiline: boolean): string | number {
-    return settings.sizes.pickerItem.avatar[isMultiline ? 'multiline' : 'rest'][size];
+    console.log('ava', settings.sizes.pickerInput.body.dropdown.row.cell.item.avatar[isMultiline ? 'multiline' : 'rest'][size]);


Remove console.log

AlekseyManetov · 2024-09-11T12:59:32Z

uui/components/pickers/PickerItem.tsx

-                cx={ isMultiline && [css.multiline, css[`vertical-padding-${itemSize}`]] }
-                columnGap="12"
+                cx={ [isMultiline && css.multiline, css.columnGap] }
+                rawProps={ { style: { '--uui-picker_item-vertical-padding': `${settings.sizes.pickerInput.body.dropdown.row.cell.item.verticalPadding[itemSize]}px` } as React.CSSProperties } }


Probably move to the css-variable based on size class?

Here we need to dive a little deeper into this, collect the components and see how we can generalize

AlekseyManetov · 2024-09-11T14:00:33Z

uui/components/tables/DataTableHeaderCell.tsx

-                        {this.props.column.caption}
+                    <Text
+                        key="text"
+                        lineHeight={ settings.sizes.dataTable.header.row.cell.columnCaption.lineHeight as TextProps['lineHeight'] }


Probably we can move settings.sizes.dataTable.header.row.cell.columnCaption.lineHeight from settings to css variable?

NatalliaAlieva · 2024-09-25T11:41:23Z

Column header no longer wraps to 2 lines in the "Condensed view" example.

NatalliaAlieva · 2024-09-25T13:08:41Z

Navigation-chevron_right icon larger on Dev than on Prod in the "Table with expandable rows".

add size tokens to the new components, add types for settings

50091b9

siarhei-epam added the feature New feature or request label Jun 28, 2024

siarhei-epam requested a review from AlekseyManetov June 28, 2024 16:02

siarhei-epam self-assigned this Jun 28, 2024

siarhei-epam added 5 commits July 1, 2024 17:19

update snapshots

7b9500d

update comments, removed 'any' types

2fedcf9

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

0de9dc9

updated Badge, CountIndicator, StatusIndicator, LabeledInput accordin…

5337d79

…g size theming approach. Button, LinkButton, VerticalTabButton fixed rtl support

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

def9745

siarhei-epam marked this pull request as ready for review July 9, 2024 11:00

AlekseyManetov and others added 19 commits July 9, 2024 13:32

v5.8.1-y.0

3c47b0d

v5.9.0-beta.0

1029efa

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

f85cb93

Add rtl doc

354ab4f

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

2207dcb

TextArea, TextInput, PickerInput fixed dir='auto' in placeholder

79d5076

updated DatePicker, RangeDatePicker with size theming approach, added…

369fae5

… variables for vanilla theme

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

8e32c3f

# Conflicts: # app/src/common/AppHeader.module.scss # app/src/common/AppHeader.tsx

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

c444219

updated snapshots

f89fc14

updated screenshots

6ecd7bf

update snapshots

205604b

update Badge styles, screenshots

5cd38ed

small chnages for RTL example

ea63202

Merge remote-tracking branch 'origin/feature/sizes-customizing-update…

2849c19

…' into feature/sizes-customizing-update

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

b7c2fad

# Conflicts: # uui/components/pickers/DataPickerCell.tsx

update DataTable, Paginator, PickerInput according size theming appro…

d4d50f5

…ach, fixed support 'rtl' for some components & site, updated 'dayjs' package

siarhei-epam added 6 commits August 28, 2024 16:30

updated snapshots

c9d788a

fixed Paginator, update screenshots, snapshots

ef66a3c

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

1af2cb6

# Conflicts: # uui/components/tables/DataTableCell.tsx

update snapshots

a756574

update types

70b3d7e

fixed types for Paginator docs

e97490a

AlekseyManetov requested changes Aug 29, 2024

View reviewed changes

siarhei-epam added 9 commits September 9, 2024 19:07

reworked setting structure, some settings moved to css

b0d25f0

[Text]: reworked style calculation

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

306e184

# Conflicts: # uui/components/tables/DataTableHeaderCell.module.scss

remove unused imports, helpers

e29fe75

remove unused imports

abd61f3

[Text]: fixed size settings

9d433aa

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

2edfa67

update screenshots for pickerInput-LazyTreeInput

a3194f3

update screenshots for pickerInput-LazyTreeInput

6122336

update screenshots for pickerInput-LazyTreeInput

5c3f97a

AlekseyManetov modified the milestone: 4.1.0 Sep 11, 2024

AlekseyManetov requested changes Sep 11, 2024

View reviewed changes

siarhei-epam added 2 commits September 11, 2024 19:28

Merge branch 'refs/heads/develop' into feature/sizes-customizing-update

c76defc

some settings moved to css, updated screenshots, snapshots

465bc2f

AlekseyManetov merged commit b284ec9 into develop Sep 13, 2024
4 checks passed

NatalliaAlieva added this to the 5.10.0 milestone Oct 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: sizes customizing - set of new components #2396

Feature: sizes customizing - set of new components #2396

siarhei-epam commented Jun 28, 2024 •

edited

Loading

github-actions bot commented Jun 28, 2024 •

edited

Loading

AlekseyManetov Aug 29, 2024

siarhei-epam Sep 2, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

siarhei-epam Sep 2, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

siarhei-epam Sep 2, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Aug 29, 2024

AlekseyManetov Sep 11, 2024

AlekseyManetov Sep 11, 2024

AlekseyManetov Sep 11, 2024

siarhei-epam Sep 11, 2024

AlekseyManetov Sep 11, 2024

NatalliaAlieva commented Sep 25, 2024 •

edited

Loading

NatalliaAlieva commented Sep 25, 2024 •

edited

Loading

Feature: sizes customizing - set of new components #2396

Feature: sizes customizing - set of new components #2396

Conversation

siarhei-epam commented Jun 28, 2024 • edited Loading

Description:

github-actions bot commented Jun 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NatalliaAlieva commented Sep 25, 2024 • edited Loading

NatalliaAlieva commented Sep 25, 2024 • edited Loading

siarhei-epam commented Jun 28, 2024 •

edited

Loading

github-actions bot commented Jun 28, 2024 •

edited

Loading

NatalliaAlieva commented Sep 25, 2024 •

edited

Loading

NatalliaAlieva commented Sep 25, 2024 •

edited

Loading