From dfc014b3cc11f2ba000958d92bb5240e59e11172 Mon Sep 17 00:00:00 2001
From: dkonopka <d.konopka@cksource.com>
Date: Mon, 30 Sep 2019 14:27:45 +0200
Subject: [PATCH 1/4] Improed visual representation of page break element.

---
 src/pagebreakediting.js |  7 +++++++
 theme/pagebreak.css     | 31 +++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/pagebreakediting.js b/src/pagebreakediting.js
index 279e8ca..0c190e8 100644
--- a/src/pagebreakediting.js
+++ b/src/pagebreakediting.js
@@ -58,10 +58,17 @@ export default class PageBreakEditing extends Plugin {
 			view: ( modelElement, viewWriter ) => {
 				const label = t( 'Page break' );
 				const viewWrapper = viewWriter.createContainerElement( 'div' );
+				const viewLabelElement = viewWriter.createContainerElement( 'span' );
+				const innerText = viewWriter.createText( t( 'Page break' ) );
 
 				viewWriter.addClass( 'ck-page-break', viewWrapper );
 				viewWriter.setCustomProperty( 'pageBreak', true, viewWrapper );
 
+				viewWriter.addClass( 'ck-page-break_label', viewLabelElement );
+
+				viewWriter.insert( viewWriter.createPositionAt( viewWrapper, 0 ), viewLabelElement );
+				viewWriter.insert( viewWriter.createPositionAt( viewLabelElement, 0 ), innerText );
+
 				return toPageBreakWidget( viewWrapper, viewWriter, label );
 			}
 		} );
diff --git a/theme/pagebreak.css b/theme/pagebreak.css
index adb59aa..5cf5946 100644
--- a/theme/pagebreak.css
+++ b/theme/pagebreak.css
@@ -4,9 +4,32 @@
  */
 
 .ck .ck-page-break {
+	position: relative;
 	clear: both;
-	padding: 5px;
-	border: 2px dashed var(--ck-color-toolbar-border);
-	border-left: 0;
-	border-right: 0;
+	padding: 5px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.ck .ck-page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed var(--ck-color-toolbar-border);
+	width: 100%;
+	top: 50%;
+	transform: translateY( -50% );
+}
+
+.ck .ck-page-break_label {
+	position: relative;
+	z-index: var(--ck-z-default);
+	padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+	display: block;
+	text-transform: uppercase;
+	border: 1px solid var(--ck-color-toolbar-border);
+	border-radius: var(--ck-border-radius);
+	font-size: var(--ck-font-size-small);
+	font-weight: bold;
+	color: var(--ck-color-toolbar-border);
+	background: var(--ck-color-base-background);
 }

From 8be901f4eac455531a4807aa9b487290b7c04b03 Mon Sep 17 00:00:00 2001
From: dkonopka <d.konopka@cksource.com>
Date: Mon, 30 Sep 2019 14:46:33 +0200
Subject: [PATCH 2/4] Make label passing a11y contrast.

---
 theme/pagebreak.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/theme/pagebreak.css b/theme/pagebreak.css
index 5cf5946..4e7ff4b 100644
--- a/theme/pagebreak.css
+++ b/theme/pagebreak.css
@@ -23,13 +23,14 @@
 .ck .ck-page-break_label {
 	position: relative;
 	z-index: var(--ck-z-default);
-	padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
+	padding: var(--ck-spacing-small) var(--ck-spacing-standard);
 	display: block;
 	text-transform: uppercase;
 	border: 1px solid var(--ck-color-toolbar-border);
 	border-radius: var(--ck-border-radius);
 	font-size: var(--ck-font-size-small);
 	font-weight: bold;
-	color: var(--ck-color-toolbar-border);
+	color: var(--ck-color-base-text);
 	background: var(--ck-color-base-background);
+	box-shadow: 2px 2px 1px var(--ck-color-shadow-drop);
 }

From 1b5b22a2896d779f26a55f63c21658fd6b233261 Mon Sep 17 00:00:00 2001
From: dkonopka <d.konopka@cksource.com>
Date: Mon, 30 Sep 2019 14:54:55 +0200
Subject: [PATCH 3/4] Simplified CSS properties.

---
 theme/pagebreak.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/theme/pagebreak.css b/theme/pagebreak.css
index 4e7ff4b..0d06c48 100644
--- a/theme/pagebreak.css
+++ b/theme/pagebreak.css
@@ -8,6 +8,7 @@
 	clear: both;
 	padding: 5px 0;
 	display: flex;
+	align-items: center;
 	justify-content: center;
 }
 
@@ -16,8 +17,6 @@
 	position: absolute;
 	border-bottom: 2px dashed var(--ck-color-toolbar-border);
 	width: 100%;
-	top: 50%;
-	transform: translateY( -50% );
 }
 
 .ck .ck-page-break_label {

From 09b5ae3c135ea0054c24899ecf67014486ccdcb6 Mon Sep 17 00:00:00 2001
From: dkonopka <d.konopka@cksource.com>
Date: Mon, 30 Sep 2019 14:58:33 +0200
Subject: [PATCH 4/4] Fixing tests.

---
 tests/pagebreakediting.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/pagebreakediting.js b/tests/pagebreakediting.js
index 23606b2..61f2995 100644
--- a/tests/pagebreakediting.js
+++ b/tests/pagebreakediting.js
@@ -209,7 +209,7 @@ describe( 'PageBreakEditing', () => {
 				setModelData( model, '<pageBreak></pageBreak>' );
 
 				expect( getViewData( view, { withoutSelection: true } ) ).to.equal(
-					'<div class="ck-page-break ck-widget" contenteditable="false"></div>'
+					'<div class="ck-page-break ck-widget" contenteditable="false"><span class="ck-page-break_label">Page break</span></div>'
 				);
 			} );