[THEMES-1214] Implemented logical properties on Share-bar-block (#1844)

* Implemented logical properties * Updated border properties --------- Co-authored-by: Malavika Koppula <[email protected]>
WPMedia · Dec 12, 2023 · 8bf3fb7 · 8bf3fb7
1 parent 909d590
commit 8bf3fb7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -2556,19 +2556,28 @@
 					"border-radius": 0 var(--border-radius) var(--border-radius) 0,
 					"display": none,
 					"gap": var(--global-spacing-2),
-					"left": 0,
-					"padding": var(--global-spacing-4) 0,
+					"inset-block-start": 200px,
+					"inset-inline-start": 0,
+					"padding-block-end": var(--global-spacing-4),
+					"padding-block-start": var(--global-spacing-4),
+					"padding-inline-end": 0,
+					"padding-inline-start": 0,
 					"position": fixed,
-					"top": 200px,
 					"components": (
 						"button": (
 							"background-color": transparent
 						),
 						"button-default": (
-							"border-width": 0
+							"border-block-end-width": 0,
+							"border-block-start-width": 0,
+							"border-inline-end-width": 0,
+							"border-inline-start-width": 0
 						),
 						"button-medium": (
-							"padding": 0 var(--global-spacing-3)
+							"padding-block-end": 0,
+							"padding-block-start": 0,
+							"padding-inline-end": var(--global-spacing-3),
+							"padding-inline-start": var(--global-spacing-3)
 						)
 					)
 				),

diff --git a/blocks/share-bar-block/index.story.mdx b/blocks/share-bar-block/index.story.mdx
@@ -91,3 +91,24 @@ const AnotherComponentWithGlobalContent = () => <ShareBar />;
 		/>
 	</Story>
 </Preview>
+
+** With RTL **
+
+<div dir="rtl">
+	<Story name="Custom ShareBar" height="700px">
+		<ShareBar
+			customFields={{
+				email: boolean("Email", true),
+				facebook: boolean("Facebook", true),
+				pinterest: boolean("Pinterest", true),
+				twitter: boolean("Twitter", true),
+				linkedIn: boolean("Linkedin", true),
+			}}
+			websiteName={text("headlineString", "Man Bites Dog")}
+			websiteDomain={text("websiteDomain", "https://www.thesun.com/")}
+			websiteUrl={text("websiteUrl", "/2019/07/15/global-kitchen-sink-article/")}
+			headlineString={text("websiteName", "The Sun")}
+			phrases={{ t: (key) => key }}
+		/>
+	</Story>
+</div>
diff --git a/blocks/share-bar-block/themes/news.json b/blocks/share-bar-block/themes/news.json
@@ -4,22 +4,34 @@
 			"default": {
 				"background": "var(--background-color)",
 				"box-shadow": "var(--global-box-shadow-1)",
-				"border-radius": "0 var(--border-radius) var(--border-radius) 0",
+				"border-start-start-radius": "0",
+				"border-start-end-radius": "var(--border-radius)",
+				"border-end-end-radius": "var(--border-radius)",
+				"border-end-start-radius": "0",
 				"display": "none",
 				"gap": "var(--global-spacing-2)",
-				"left": 0,
-				"padding": "var(--global-spacing-4) 0",
+				"inset-block-start": "200px",
+				"inset-inline-start": 0,
+				"padding-block-end": "var(--global-spacing-4)",
+				"padding-block-start": "var(--global-spacing-4)",
+				"padding-inline-end": "0",
+				"padding-inline-start": "0",
 				"position": "fixed",
-				"top": "200px",
 				"components": {
 					"button": {
 						"background-color": "transparent"
 					},
 					"button-default": {
-						"border-width": 0
+						"border-block-end-width": "0",
+						"border-block-start-width": "0",
+						"border-inline-end-width": "0",
+						"border-inline-start-width": "0"
 					},
 					"button-medium": {
-						"padding": "0 var(--global-spacing-3)"
+						"padding-block-end": "0",
+						"padding-block-start": "0",
+						"padding-inline-end": "var(--global-spacing-3)",
+						"padding-inline-start": "var(--global-spacing-3)"
 					}
 				}
 			},