Merge pull request #15138 from ckeditor/cf/5593-rtl-ui-improvements

Other (ui, theme-lark): Improved RTL layout support in some of the UI components (`FormHeaderView`, `ButtonView`, and `ListItemView`).
ckeditor · Oct 9, 2023 · e86147a · e86147a
2 parents 3f1ca11 + c7c383f
commit e86147a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/formheader/formheader.css
@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 :root {
 	--ck-form-header-height: 38px;
 }
@@ -13,6 +15,16 @@
 	line-height: var(--ck-form-header-height);
 	border-bottom: 1px solid var(--ck-color-base-border);
 
+	& .ck-icon {
+		@mixin ck-dir ltr {
+			margin-right: var(--ck-spacing-medium);
+		}
+
+		@mixin ck-dir rtl {
+			margin-left: var(--ck-spacing-medium);
+		}
+	}
+
 	& .ck-form__header__label {
 		font-weight: bold;
 	}

diff --git a/...ages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css b/...ages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css
@@ -25,17 +25,18 @@
 
 			@mixin ck-dir ltr {
 				left: 0px;
+				transform-origin: 0 0;
+				/* By default, display the label scaled down above the field. */
+				transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
 			}
 
 			@mixin ck-dir rtl {
 				right: 0px;
+				transform-origin: 100% 0;
+				transform: translate(calc(-1 * var(--ck-spacing-medium)), -6px) scale(.75);
 			}
 
 			pointer-events: none;
-			transform-origin: 0 0;
-
-			/* By default, display the label scaled down above the field. */
-			transform: translate(var(--ck-spacing-medium), -6px) scale(.75);
 
 			background: var(--ck-color-labeled-field-label-background);
 			padding: 0 calc(.5 * var(--ck-font-size-tiny));

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css
@@ -6,6 +6,7 @@
 @import "../../../mixins/_disabled.css";
 @import "../../../mixins/_rounded.css";
 @import "../../../mixins/_shadow.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
 .ck.ck-list {
 	@mixin ck-rounded-corners;
@@ -21,9 +22,16 @@
 	& .ck-button {
 		min-height: unset;
 		width: 100%;
-		text-align: left;
 		border-radius: 0;
 
+		@mixin ck-dir ltr {
+			text-align: left;
+		}
+
+		@mixin ck-dir rtl {
+			text-align: right;
+		}
+
 		/* List items should have the same height. Use absolute units to make sure it is so
 		   because e.g. different heading styles may have different height
 		   https://github.com/ckeditor/ckeditor5-heading/issues/63 */

diff --git a/packages/ckeditor5-ui/theme/components/button/button.css b/packages/ckeditor5-ui/theme/components/button/button.css
@@ -4,6 +4,7 @@
  */
 
 @import "../../mixins/_unselectable.css";
+@import "../../mixins/_dir.css";
 
 .ck.ck-button,
 a.ck.ck-button {
@@ -12,7 +13,14 @@ a.ck.ck-button {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	justify-content: left;
+
+	@mixin ck-dir ltr {
+		justify-content: left;
+	}
+
+	@mixin ck-dir rtl {
+		justify-content: right;
+	}
 
 	& .ck-button__label {
 		display: none;

diff --git a/packages/ckeditor5-ui/theme/components/formheader/formheader.css b/packages/ckeditor5-ui/theme/components/formheader/formheader.css
@@ -10,10 +10,6 @@
 	align-items: center;
 	justify-content: space-between;
 
-	& .ck-icon {
-		margin-right: var(--ck-spacing-medium);
-	}
-
 	& h2.ck-form__header__label {
 		flex-grow: 1;
 	}