Skip to content

Commit b19d3ad

Browse files
aaasadiaaasadi
committed
Using start and end instead of left and right for better RTL support
Includes: Placement Border radius Margin Padding
1 parent 3578b18 commit b19d3ad

19 files changed

Lines changed: 414 additions & 121 deletions

File tree

‎components/doc/borderradius/classesdoc.js‎

Lines changed: 187 additions & 28 deletions
Large diffs are not rendered by default.

‎components/doc/borderradius/examples.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { DocSectionText } from '../common/docsectiontext';
44
export function ExamplesDoc(props) {
55
const code1 = `<div class="flex flex-wrap justify-content-center">
66
<div class="border-round w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round</div>
7-
<div class="border-round-left w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-left</div>
7+
<div class="border-round-start w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-start</div>
88
</div>
99
<div class="flex flex-wrap justify-content-center">
1010
<div class="border-round-top w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-top</div>
1111
<div class="border-round-bottom w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-bottom</div>
12-
<div class="border-round-right w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-right</div>
12+
<div class="border-round-end w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-end</div>
1313
</div>
1414
`;
1515
const code2 = `<div class="flex flex-wrap justify-content-center">
@@ -24,12 +24,12 @@ export function ExamplesDoc(props) {
2424
<div className="card">
2525
<div className="flex flex-wrap justify-content-center">
2626
<div className="border-round w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round</div>
27-
<div className="border-round-left w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-left</div>
27+
<div className="border-round-start w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-start</div>
2828
</div>
2929
<div className="flex flex-wrap justify-content-center">
3030
<div className="border-round-top w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-top</div>
3131
<div className="border-round-bottom w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-bottom</div>
32-
<div className="border-round-right w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-right</div>
32+
<div className="border-round-end w-12rem h-6rem m-2 bg-primary font-bold flex align-items-center justify-content-center">border-round-end</div>
3333
</div>
3434
</div>
3535
<DocSectionCode code={code1} />

‎components/doc/margin/classesdoc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function ClassesDoc(props) {
3737
32: 64
3838
};
3939

40-
const marginTypes = ['m', 'mt', 'mb', 'mr', 'ml', 'mx', 'my'];
40+
const marginTypes = ['m', 'mt', 'mb', 'mr', 'ml', 'ms', 'me', 'mx', 'my'];
4141

4242
const generateMarginRows = () => {
4343
let rows = [];
@@ -91,6 +91,10 @@ export function ClassesDoc(props) {
9191
return `margin-right: ${value}rem;`;
9292
case 'ml':
9393
return `margin-left: ${value}rem;`;
94+
case 'ms':
95+
return `margin-inline-start: ${value}rem;`;
96+
case 'me':
97+
return `margin-inline-end: ${value}rem;`;
9498
case 'mt':
9599
return `margin-top: ${value}rem;`;
96100
case 'mb':

‎components/doc/margin/singlesidemargindoc.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ export function SingleSideMarginDoc(props) {
77
<div class="mt-5 border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">mt-5</div>
88
</div>
99
<div class="bg-primary-100 w-12rem m-3 border-round">
10-
<div class="mr-8 border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">mr-8</div>
10+
<div class="me-8 border-round-start bg-primary font-bold p-3 flex align-items-center justify-content-center">me-8</div>
1111
</div>
1212
<div class="bg-primary-100 w-12rem m-3 border-round">
1313
<div class="mb-3 border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">mb-3</div>
1414
</div>
1515
<div class="bg-primary-100 w-12rem m-3 border-round">
16-
<div class="ml-6 border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">ml-6</div>
16+
<div class="ms-6 border-round-end bg-primary font-bold p-3 flex align-items-center justify-content-center">ms-6</div>
1717
</div>
1818
</div>
1919
`;
@@ -29,13 +29,13 @@ export function SingleSideMarginDoc(props) {
2929
<div className="mt-5 border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">mt-5</div>
3030
</div>
3131
<div className="bg-primary-100 w-12rem m-3 border-round">
32-
<div className="mr-8 border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">mr-8</div>
32+
<div className="me-8 border-round-start bg-primary font-bold p-3 flex align-items-center justify-content-center">me-8</div>
3333
</div>
3434
<div className="bg-primary-100 w-12rem m-3 border-round">
3535
<div className="mb-3 border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">mb-3</div>
3636
</div>
3737
<div className="bg-primary-100 w-12rem m-3 border-round">
38-
<div className="ml-6 border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">ml-6</div>
38+
<div className="ms-6 border-round-end bg-primary font-bold p-3 flex align-items-center justify-content-center">ms-6</div>
3939
</div>
4040
</div>
4141
</div>

‎components/doc/padding/classesdoc.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function ClassesDoc(props) {
3737
32: 64
3838
};
3939

40-
const paddingTypes = ['p', 'pt', 'pb', 'pr', 'pl', 'px', 'py'];
40+
const paddingTypes = ['p', 'pt', 'pb', 'pr', 'pl', 'ps', 'pe', 'px', 'py'];
4141

4242
const generatePaddingRows = () => {
4343
let rows = [];
@@ -68,6 +68,10 @@ export function ClassesDoc(props) {
6868
return `padding-right: ${value}rem;`;
6969
case 'pl':
7070
return `padding-left: ${value}rem;`;
71+
case 'ps':
72+
return `padding-inline-start: ${value}rem;`;
73+
case 'pe':
74+
return `padding-inline-end: ${value}rem;`;
7175
case 'pt':
7276
return `padding-top: ${value}rem;`;
7377
case 'pb':

‎components/doc/padding/singlesidepaddingdoc.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export function SingleSidePaddingDoc(props) {
66
<div class="pt-5 bg-primary-100 w-12rem m-3 border-round">
77
<div class="border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">pt-5</div>
88
</div>
9-
<div class="pr-8 bg-primary-100 w-12rem m-3 border-round">
10-
<div class="border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">pr-8</div>
9+
<div class="pe-8 bg-primary-100 w-12rem m-3 border-round">
10+
<div class="border-round-start bg-primary font-bold p-3 flex align-items-center justify-content-center">pe-8</div>
1111
</div>
1212
<div class="pb-3 bg-primary-100 w-12rem m-3 border-round">
1313
<div class="border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">pb-3</div>
1414
</div>
15-
<div class="pl-6 bg-primary-100 w-12rem m-3 border-round">
16-
<div class="border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">pl-6</div>
15+
<div class="ps-6 bg-primary-100 w-12rem m-3 border-round">
16+
<div class="border-round-end bg-primary font-bold p-3 flex align-items-center justify-content-center">ps-6</div>
1717
</div>
1818
</div>
1919
`;
@@ -28,14 +28,14 @@ export function SingleSidePaddingDoc(props) {
2828
<div className="pt-5 bg-primary-100 w-12rem m-3 border-round">
2929
<div className="border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">pt-5</div>
3030
</div>
31-
<div className="pr-8 bg-primary-100 w-12rem m-3 border-round">
32-
<div className="border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">pr-8</div>
31+
<div className="pe-8 bg-primary-100 w-12rem m-3 border-round">
32+
<div className="border-round-start bg-primary font-bold p-3 flex align-items-center justify-content-center">pe-8</div>
3333
</div>
3434
<div className="pb-3 bg-primary-100 w-12rem m-3 border-round">
3535
<div className="border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">pb-3</div>
3636
</div>
37-
<div className="pl-6 bg-primary-100 w-12rem m-3 border-round">
38-
<div className="border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">pl-6</div>
37+
<div className="ps-6 bg-primary-100 w-12rem m-3 border-round">
38+
<div className="border-round-end bg-primary font-bold p-3 flex align-items-center justify-content-center">ps-6</div>
3939
</div>
4040
</div>
4141
</div>

‎components/doc/toprightbottomleft/classesdoc.js‎

Lines changed: 98 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -13,73 +13,107 @@ export function ClassesDoc(props) {
1313
</tr>
1414
</thead>
1515
<tbody>
16-
<tr>
17-
<td>top-auto</td>
18-
<td>top: auto;</td>
19-
</tr>
20-
<tr>
21-
<td>top-0</td>
22-
<td>top: 0;</td>
23-
</tr>
24-
<tr>
25-
<td>top-50</td>
26-
<td>top: 50%;</td>
27-
</tr>
28-
<tr>
29-
<td>top-100</td>
30-
<td>top: 100%;</td>
31-
</tr>
16+
<tr>
17+
<td>top-auto</td>
18+
<td>top: auto;</td>
19+
</tr>
20+
<tr>
21+
<td>top-0</td>
22+
<td>top: 0;</td>
23+
</tr>
24+
<tr>
25+
<td>top-50</td>
26+
<td>top: 50%;</td>
27+
</tr>
28+
<tr>
29+
<td>top-100</td>
30+
<td>top: 100%;</td>
31+
</tr>
3232

33-
<tr>
34-
<td>right-auto</td>
35-
<td>right: auto;</td>
36-
</tr>
37-
<tr>
38-
<td>right-0</td>
39-
<td>right: 0;</td>
40-
</tr>
41-
<tr>
42-
<td>right-50</td>
43-
<td>right: 50%;</td>
44-
</tr>
45-
<tr>
46-
<td>right-100</td>
47-
<td>right: 100%;</td>
48-
</tr>
33+
<tr>
34+
<td>right-auto</td>
35+
<td>right: auto;</td>
36+
</tr>
37+
<tr>
38+
<td>right-0</td>
39+
<td>right: 0;</td>
40+
</tr>
41+
<tr>
42+
<td>right-50</td>
43+
<td>right: 50%;</td>
44+
</tr>
45+
<tr>
46+
<td>right-100</td>
47+
<td>right: 100%;</td>
48+
</tr>
4949

50-
<tr>
51-
<td>bottom-auto</td>
52-
<td>bottom: auto;</td>
53-
</tr>
54-
<tr>
55-
<td>bottom-0</td>
56-
<td>bottom: 0;</td>
57-
</tr>
58-
<tr>
59-
<td>bottom-50</td>
60-
<td>bottom: 50%;</td>
61-
</tr>
62-
<tr>
63-
<td>bottom-100</td>
64-
<td>bottom: 100%;</td>
65-
</tr>
50+
<tr>
51+
<td>bottom-auto</td>
52+
<td>bottom: auto;</td>
53+
</tr>
54+
<tr>
55+
<td>bottom-0</td>
56+
<td>bottom: 0;</td>
57+
</tr>
58+
<tr>
59+
<td>bottom-50</td>
60+
<td>bottom: 50%;</td>
61+
</tr>
62+
<tr>
63+
<td>bottom-100</td>
64+
<td>bottom: 100%;</td>
65+
</tr>
6666

67-
<tr>
68-
<td>left-auto</td>
69-
<td>left: auto;</td>
70-
</tr>
71-
<tr>
72-
<td>left-0</td>
73-
<td>left: 0;</td>
74-
</tr>
75-
<tr>
76-
<td>left-50</td>
77-
<td>left: 50%;</td>
78-
</tr>
79-
<tr>
80-
<td>left-100</td>
81-
<td>left: 100%;</td>
82-
</tr>
67+
<tr>
68+
<td>left-auto</td>
69+
<td>left: auto;</td>
70+
</tr>
71+
<tr>
72+
<td>left-0</td>
73+
<td>left: 0;</td>
74+
</tr>
75+
<tr>
76+
<td>left-50</td>
77+
<td>left: 50%;</td>
78+
</tr>
79+
<tr>
80+
<td>left-100</td>
81+
<td>left: 100%;</td>
82+
</tr>
83+
84+
<tr>
85+
<td>start-auto</td>
86+
<td>inset-inline-start: auto;</td>
87+
</tr>
88+
<tr>
89+
<td>start-0</td>
90+
<td>inset-inline-start: 0;</td>
91+
</tr>
92+
<tr>
93+
<td>start-50</td>
94+
<td>inset-inline-start: 50%;</td>
95+
</tr>
96+
<tr>
97+
<td>start-100</td>
98+
<td>inset-inline-start: 100%;</td>
99+
</tr>
100+
101+
<tr>
102+
<td>end-auto</td>
103+
<td>inset-inline-end: auto;</td>
104+
</tr>
105+
<tr>
106+
<td>end-0</td>
107+
<td>inset-inline-end: 0;</td>
108+
</tr>
109+
<tr>
110+
<td>end-50</td>
111+
<td>inset-inline-end: 50%;</td>
112+
</tr>
113+
<tr>
114+
<td>end-100</td>
115+
<td>inset-inline-end: 100%;</td>
116+
</tr>
83117
</tbody>
84118
</table>
85119
</div>

‎components/doc/toprightbottomleft/examplesdoc.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { DocSectionText } from '../common/docsectiontext';
44
export function ExamplesDoc(props) {
55
const code = `<div class="flex flex-wrap gap-3 align-items-center justify-content-center">
66
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
7-
<div class="absolute top-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
7+
<div class="absolute top-0 start-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
88
</div>
99
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
10-
<div class="absolute top-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
10+
<div class="absolute top-0 end-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
1111
</div>
1212
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
13-
<div class="absolute bottom-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
13+
<div class="absolute bottom-0 end-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
1414
</div>
1515
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
16-
<div class="absolute bottom-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
16+
<div class="absolute bottom-0 start-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
1717
</div>
1818
</div>
1919
`;
@@ -24,16 +24,16 @@ export function ExamplesDoc(props) {
2424
<div className="card">
2525
<div className="flex flex-wrap gap-3 align-items-center justify-content-center">
2626
<div className="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
27-
<div className="absolute top-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
27+
<div className="absolute top-0 start-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
2828
</div>
2929
<div className="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
30-
<div className="absolute top-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
30+
<div className="absolute top-0 end-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
3131
</div>
3232
<div className="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
33-
<div className="absolute bottom-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
33+
<div className="absolute bottom-0 end-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
3434
</div>
3535
<div className="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
36-
<div className="absolute bottom-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
36+
<div className="absolute bottom-0 start-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
3737
</div>
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)