Rtl support - Githubissues

AlekseyManetov commented 3 months ago

Issue link(if exists):

Description:

github-actions[bot] commented 3 months ago

Generated by: track-bundle-size
Generated at: Fri, 14 Jun 2024 14:09:50 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v5.8.1-alpha.0 (2024-06-14)
CI Status: ok

Module	Baseline Size (v5.8.1-alpha.0)	Size	Diff	Within Threshold	Threshold (min - max)
templateApp	747.12	747.96	+0.84 `js:+0.18` `css:+0.66`	:ok:	672.4 - 821.83
@epam/app	6506.94	6527.51	+20.58 `js:+19.25` `css:+1.33`	:ok:	5856.24 - 7157.63
@epam/draft-rte	53.79	53.79	0 `js:0` `css:0`	:ok:	48.41 - 59.17
@epam/electric	4.57	4.57	0 `js:0` `css:0`	:ok:	4.12 - 5.03
@epam/promo	53.9	53.9	0 `js:0` `css:0`	:ok:	48.51 - 59.29
@epam/uui-extra	0.21	0.21	0 `js:0` `css:0`	:ok:	0.19 - 0.23
@epam/loveship	89.5	89.51	+0 `js:+0` `css:0`	:ok:	80.55 - 98.45
@epam/uui-components	256.5	258.1	+1.6 `js:+1.6` `css:0`	:ok:	230.86 - 282.16
@epam/uui-core	330.34	330.34	0 `js:0` `css:0`	:ok:	297.3 - 363.37
@epam/uui-db	44.7	44.7	0 `js:0` `css:0`	:ok:	40.23 - 49.17
@epam/uui-docs	206.19	206.17	-0.02 `js:-0.02` `css:0`	:ok:	185.57 - 226.81
@epam/uui-editor	176.98	176.98	0 `js:0` `css:0`	:ok:	159.28 - 194.68
@epam/uui-timeline	47.18	47.18	0 `js:0` `css:0`	:ok:	42.46 - 51.9
@epam/uui	591.14	592.03	+0.89 `js:+0.08` `css:+0.81`	:ok:	532.03 - 650.25

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. ```json { "version": "5.8.1-alpha.0", "timestamp": "2024-06-14", "sizes": { "templateApp": { "css": 284607, "js": 481299 }, "@epam/app": { "css": 1606432, "js": 5077742 }, "@epam/draft-rte": { "css": 9784, "js": 45298 }, "@epam/electric": { "css": 2275, "js": 2409 }, "@epam/promo": { "css": 44260, "js": 10938 }, "@epam/uui-extra": { "css": 0, "js": 213 }, "@epam/loveship": { "css": 49098, "js": 42556 }, "@epam/uui-components": { "css": 22244, "js": 242058 }, "@epam/uui-core": { "css": 0, "js": 338264 }, "@epam/uui-db": { "css": 0, "js": 45769 }, "@epam/uui-docs": { "css": 2444, "js": 208675 }, "@epam/uui-editor": { "css": 12592, "js": 168635 }, "@epam/uui-timeline": { "css": 2254, "js": 46058 }, "@epam/uui": { "css": 267813, "js": 338426 } } } ```

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

Total amount of exported types/props without JSDoc comments

	Amount
Types	285 (+0) :ok:
Props	236 (+0) :ok:

NatalliaAlieva commented 2 months ago

The progress bar moves both to the right and to the left in different examples.

https://github.com/epam/UUI/assets/57751283/83150b4d-0d84-469a-9aba-37ad6ffcc7a9

NatalliaAlieva commented 2 months ago

The alignment of list bullets extends beyond the text boundaries.

Example from other website

NatalliaAlieva commented 2 months ago

Accordion

In RTL, the chevron icon for opening the accordion shifts towards the text, while in LTR, it is positioned at the end of the accordion toggler.

NatalliaAlieva commented 2 months ago

Adaptive panel

On the initial page load, the adaptive panel's value indicator for 100 is positioned right next to 0. When the value indicator is moved, the adaptive panel behaves poorly.

NatalliaAlieva commented 2 months ago

Badge

The badges with status indicator have an incorrect indicator location.

NatalliaAlieva commented 2 months ago

Control group

Side on which the menu appears

If use the mirror rule for RTL, the menu should look like this

"Mirroring Layout: All components, including control groups, should be mirrored horizontally. This means labels appear on the right side of input fields, and text direction is right-to-left."

NatalliaAlieva commented 2 months ago

Date table - Tables overview

1. Checkbox alignment is broken in RTL

2. The horizontal scroll is not working correctly: the grab point differs from the moment when the scroll starts moving; there are no fixed columns.

https://github.com/user-attachments/assets/6ff25950-d867-4908-9a40-ddbad3c68eb2

3. Values don't fit in the column.

4. In RTL, there is an extra space before the first column.

5. The order of coordinates shouldn't change, only the location of the "-" changes.

In an RTL (Right-to-Left) context, the logical order of the coordinates (latitude followed by longitude) typically remains the same as in LTR (Left-to-Right) contexts. However, the presentation adapts to the RTL reading direction. The coordinates do not switch places; rather, the text alignment and direction are adjusted.

Here’s how the coordinates 35.36395/-0.51279 look in RTL:

LTR Display: Latitude: 35.36395° Longitude: -0.51279° RTL Display: خط العرض: 35.36395° خط الطول: -0.51279°

6. Status icon too close to the text.

7. The icons related to pinning columns are misaligned.

8. The table "jumps" when sorting by column.

https://github.com/user-attachments/assets/c2eac4e1-6bed-4330-b9b9-b6fe3bfaa734

NatalliaAlieva commented 2 months ago

Data tables - Editable Tables, Advanced Tables

1. The alignment in the columns is incorrect: the alignment in the "Priority" column is NOT right-aligned, and in the column with the icon for deleting a row, the icon is shifted to the left.