Skip to content

Commit 424b15a

Browse files
AmitMYbrandyscarney
AmitMY
authored and
brandyscarney
committed
fix(rtl): add correct text-align (#11353)
* fix(rtl): add correct text-align * feat(text-align): add mixin for backwards compatibility of variables * fix(text-align): default null not empty string * fix(text-align): remove default
1 parent 6b42677 commit 424b15a

32 files changed

+134
-104
lines changed

‎src/components/action-sheet/action-sheet.ios.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
7474

7575

7676
.action-sheet-ios {
77-
text-align: $action-sheet-ios-text-align;
77+
@include text-align($action-sheet-ios-text-align);
7878
}
7979

8080
.action-sheet-ios .action-sheet-container {
@@ -95,13 +95,14 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
9595
}
9696

9797
.action-sheet-ios .action-sheet-title {
98+
@include text-align($action-sheet-ios-text-align);
99+
98100
padding: $action-sheet-ios-title-padding;
99101

100102
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
101103
border-radius: $action-sheet-ios-title-border-radius;
102104
font-size: $action-sheet-ios-title-font-size;
103105
font-weight: $action-sheet-ios-title-font-weight;
104-
text-align: $action-sheet-ios-text-align;
105106
color: $action-sheet-ios-title-color;
106107
}
107108

‎src/components/action-sheet/action-sheet.md.scss

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// --------------------------------------------------
55

66
/// @prop - Text align of the action sheet
7-
$action-sheet-md-text-align: left !default;
7+
$action-sheet-md-text-align: start !default;
88

99
/// @prop - Background color of the action sheet
1010
$action-sheet-md-background: #fafafa !default;
@@ -61,14 +61,17 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
6161
}
6262

6363
.action-sheet-md .action-sheet-title {
64+
@include text-align($action-sheet-md-text-align);
65+
6466
padding: $action-sheet-md-title-padding;
6567

6668
font-size: $action-sheet-md-title-font-size;
67-
text-align: $action-sheet-md-text-align;
6869
color: $action-sheet-md-title-color;
6970
}
7071

7172
.action-sheet-md .action-sheet-button {
73+
@include text-align($action-sheet-md-text-align);
74+
7275
position: relative;
7376
overflow: hidden;
7477

@@ -77,7 +80,6 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
7780
min-height: $action-sheet-md-button-min-height;
7881

7982
font-size: $action-sheet-md-button-font-size;
80-
text-align: $action-sheet-md-text-align;
8183
color: $action-sheet-md-button-text-color;
8284
background: $action-sheet-md-button-background;
8385
}
@@ -87,13 +89,14 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default;
8789
}
8890

8991
.action-sheet-md .action-sheet-icon {
92+
@include text-align($action-sheet-md-icon-text-align);
93+
9094
margin: $action-sheet-md-icon-margin;
9195
padding: 0;
9296

9397
width: $action-sheet-md-icon-width;
9498

9599
font-size: $action-sheet-md-icon-font-size;
96-
text-align: $action-sheet-md-icon-text-align;
97100
vertical-align: $action-sheet-md-icon-vertical-align;
98101
}
99102

‎src/components/action-sheet/action-sheet.wp.scss

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
// --------------------------------------------------
55

66
/// @prop - Text align of the action sheet
7-
$action-sheet-wp-text-align: left !default;
7+
$action-sheet-wp-text-align: start !default;
88

99
/// @prop - Background color of the action sheet
1010
$action-sheet-wp-background: #fff !default;
@@ -69,20 +69,22 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default;
6969
}
7070

7171
.action-sheet-wp .action-sheet-title {
72+
@include text-align($action-sheet-wp-title-text-align);
73+
7274
padding: $action-sheet-wp-title-padding;
7375

7476
font-size: $action-sheet-wp-title-font-size;
75-
text-align: $action-sheet-wp-title-text-align;
7677
color: $action-sheet-wp-title-color;
7778
}
7879

7980
.action-sheet-wp .action-sheet-button {
81+
@include text-align($action-sheet-wp-button-text-align);
82+
8083
padding: $action-sheet-wp-button-padding;
8184

8285
min-height: $action-sheet-wp-button-height;
8386

8487
font-size: $action-sheet-wp-button-font-size;
85-
text-align: $action-sheet-wp-button-text-align;
8688
color: $action-sheet-wp-button-text-color;
8789
background: $action-sheet-wp-button-background;
8890
}
@@ -92,13 +94,14 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default;
9294
}
9395

9496
.action-sheet-wp .action-sheet-icon {
97+
@include text-align($action-sheet-wp-icon-text-align);
98+
9599
margin: $action-sheet-wp-icon-margin;
96100
padding: 0;
97101

98102
width: $action-sheet-wp-icon-width;
99103

100104
font-size: $action-sheet-wp-icon-font-size;
101-
text-align: $action-sheet-wp-icon-text-align;
102105
vertical-align: $action-sheet-wp-icon-vertical-align;
103106
}
104107

‎src/components/alert/alert.ios.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -230,9 +230,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
230230
// --------------------------------------------------
231231

232232
.alert-ios .alert-head {
233-
padding: $alert-ios-head-padding;
233+
@include text-align($alert-ios-head-text-align);
234234

235-
text-align: $alert-ios-head-text-align;
235+
padding: $alert-ios-head-padding;
236236
}
237237

238238
.alert-ios .alert-title {
@@ -253,10 +253,11 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
253253

254254
.alert-ios .alert-message,
255255
.alert-ios .alert-input-group {
256+
@include text-align($alert-ios-message-text-align);
257+
256258
padding: $alert-ios-message-padding;
257259

258260
font-size: $alert-ios-message-font-size;
259-
text-align: $alert-ios-message-text-align;
260261
color: $alert-ios-message-text-color;
261262
}
262263

‎src/components/alert/alert.md.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-c
2222
$alert-md-head-padding: 24px 24px 20px 24px !default;
2323

2424
/// @prop - Text align of the alert head
25-
$alert-md-head-text-align: left !default;
25+
$alert-md-head-text-align: start !default;
2626

2727
/// @prop - Font size of the alert title
2828
$alert-md-title-font-size: 22px !default;
@@ -112,7 +112,7 @@ $alert-md-button-border-radius: 2px !default;
112112
$alert-md-button-text-transform: uppercase !default;
113113

114114
/// @prop - Text align of the alert button
115-
$alert-md-button-text-align: right !default;
115+
$alert-md-button-text-align: end !default;
116116

117117

118118
/// @prop - Border top of the alert list
@@ -256,9 +256,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
256256
// --------------------------------------------------
257257

258258
.alert-md .alert-head {
259-
padding: $alert-md-head-padding;
259+
@include text-align($alert-md-head-text-align);
260260

261-
text-align: $alert-md-head-text-align;
261+
padding: $alert-md-head-padding;
262262
}
263263

264264
.alert-md .alert-title {
@@ -474,6 +474,8 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
474474
}
475475

476476
.alert-md .alert-button {
477+
@include text-align($alert-md-button-text-align);
478+
477479
// necessary for ripple to work properly
478480
position: relative;
479481
overflow: hidden;
@@ -483,7 +485,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
483485

484486
border-radius: $alert-md-button-border-radius;
485487
font-weight: $alert-md-button-font-weight;
486-
text-align: $alert-md-button-text-align;
487488
text-transform: $alert-md-button-text-transform;
488489
color: $alert-md-button-text-color;
489490
background-color: $alert-md-button-background-color;

‎src/components/alert/alert.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ ion-alert input {
108108
}
109109

110110
.alert-tappable {
111+
@include text-align(start);
111112
@include appearance(none);
112113

113114
margin: 0;
@@ -117,7 +118,5 @@ ion-alert input {
117118

118119
font-size: inherit;
119120
line-height: initial;
120-
text-align: left;
121-
text-align: start;
122121
background: transparent;
123122
}

‎src/components/alert/alert.wp.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $alert-wp-background: #e6e6e6 !default;
3131
$alert-wp-head-padding: 20px 22px 5px 22px !default;
3232

3333
/// @prop - Text align of the alert head
34-
$alert-wp-head-text-align: left !default;
34+
$alert-wp-head-text-align: start !default;
3535

3636
/// @prop - Font size of the alert title
3737
$alert-wp-title-font-size: 20px !default;
@@ -256,9 +256,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
256256
// --------------------------------------------------
257257

258258
.alert-wp .alert-head {
259-
padding: $alert-wp-head-padding;
259+
@include text-align($alert-wp-head-text-align);
260260

261-
text-align: $alert-wp-head-text-align;
261+
padding: $alert-wp-head-padding;
262262
}
263263

264264
.alert-wp .alert-title {

‎src/components/app/app.scss

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -333,33 +333,27 @@ ion-footer {
333333
// Provide `[text-{bp}]` attributes for aligning the text based
334334
// on the breakpoint
335335
[text#{$infix}-center] {
336-
// scss-lint:disable ImportantRule
337-
text-align: center !important;
336+
@include text-align(center, !important);
338337
}
339338

340339
[text#{$infix}-justify] {
341-
// scss-lint:disable ImportantRule
342-
text-align: justify !important;
340+
@include text-align(justify, !important);
343341
}
344342

345343
[text#{$infix}-start] {
346-
// scss-lint:disable ImportantRule
347-
text-align: start !important;
344+
@include text-align(start, !important);
348345
}
349346

350347
[text#{$infix}-end] {
351-
// scss-lint:disable ImportantRule
352-
text-align: end !important;
348+
@include text-align(end, !important);
353349
}
354350

355351
[text#{$infix}-left] {
356-
// scss-lint:disable ImportantRule
357-
text-align: left !important;
352+
@include text-align(left, !important);
358353
}
359354

360355
[text#{$infix}-right] {
361-
// scss-lint:disable ImportantRule
362-
text-align: right !important;
356+
@include text-align(right, !important);
363357
}
364358

365359
[text#{$infix}-nowrap] {

‎src/components/badge/badge.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ $badge-font-weight: bold !default;
1111

1212

1313
ion-badge {
14+
@include text-align(center);
15+
1416
display: inline-block;
1517

1618
padding: 3px 8px;
@@ -21,7 +23,6 @@ ion-badge {
2123
font-weight: $badge-font-weight;
2224
line-height: 1;
2325

24-
text-align: center;
2526
white-space: nowrap;
2627
vertical-align: baseline;
2728
}

‎src/components/button/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ $button-round-border-radius: 64px !default;
1111

1212

1313
.button {
14+
@include text-align(center);
1415
@include appearance(none);
1516

1617
position: relative;
1718
z-index: 0;
1819
display: inline-block;
1920

20-
text-align: center;
2121
text-overflow: ellipsis;
2222
text-transform: none;
2323

0 commit comments

Comments
 (0)