From 4efe112c231bdbd3e91ac6f87bd7e6d940622137 Mon Sep 17 00:00:00 2001
From: yinonov <yinon@hotmail.com>
Date: Sat, 27 Feb 2021 11:47:07 +0200
Subject: [PATCH 1/2] fix(vwc-list): list items twoline breaks on safari

css logical properties (margin) break on safari
---
 components/list/src/vwc-list-item.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/list/src/vwc-list-item.scss b/components/list/src/vwc-list-item.scss
index 783be8ff78..95d97762c2 100644
--- a/components/list/src/vwc-list-item.scss
+++ b/components/list/src/vwc-list-item.scss
@@ -52,7 +52,10 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
 	.mdc-list-item__primary-text {
 		@include typography.typography-cat-shorthand('body-2-bold');
-		margin-block: 12px 4px;
+		margin-top: 12px;
+		margin-bottom: 4px;
+		// margin-block-end: 4px; // TODO uncomment with safari 13.1 test support
+		// margin-block-start: 12px; // TODO uncomment with safari 13.1 test support
 
 		&::before,
 		&::after {
@@ -62,7 +65,8 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
 	.mdc-list-item__secondary-text {
 		@include typography.typography-cat-shorthand('caption');
-		margin-block-end: 12px;
+		margin-bottom: 12px;
+		// margin-block-end: 12px; // TODO uncomment with safari 13.1 test support
 		white-space: normal;
 
 		&::before {

From 9fe8d095ad83ed567fb3e051fac855d21b958f49 Mon Sep 17 00:00:00 2001
From: yinonov <yinon@hotmail.com>
Date: Sat, 27 Feb 2021 21:16:41 +0200
Subject: [PATCH 2/2] added test for space between lines

---
 components/list/test/list-item.test.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/components/list/test/list-item.test.js b/components/list/test/list-item.test.js
index 70e3d2388b..46c4cc90c8 100644
--- a/components/list/test/list-item.test.js
+++ b/components/list/test/list-item.test.js
@@ -57,6 +57,27 @@ describe('list item', () => {
 		});
 	});
 
+	describe('spacing', () => {
+		let actualElements;
+		const itemsNum = 1;
+		beforeEach(async () => {
+			actualElements = addElement(buildListOfNItems(itemsNum, VWC_LIST_ITEM));
+			await waitNextTask();
+		});
+
+		it('should have correct spacing when twoline', async () => {
+			const [item] = actualElements[0].children;
+			item.twoline = true;
+			await waitNextTask();
+			const primary = item.shadowRoot.querySelector('.mdc-list-item__primary-text');
+			const secondary = item.shadowRoot.querySelector('.mdc-list-item__secondary-text');
+			const { y: primaryY, height: priamryHeight } = primary.getClientRects()[0];
+			const { y: secondaryY } = secondary.getClientRects()[0];
+			const distanceBetweenLines = secondaryY - (primaryY + priamryHeight);
+			expect(distanceBetweenLines).to.equal(4);
+		});
+	});
+
 	describe('shape', () => {
 		let actualElement;
 		beforeEach(async () => {