Merge pull request #195 from ckeditor/t/189

Fix: Buttons should override the `-webkit-appearance` property to work in the Bootstrap 4 environment. Closes #189.

tests/manual/tickets/189/1.html

@@ -0,0 +1,14 @@
+<h2>Plain editor</h2>
+<div id="editor">
+	<p>Content of <a href="https://ckeditor.com">the editor</a>.</p>
+</div>
+
+<h2>Editor in a bootstrap modal</h2>
+<iframe src="assets/iframe-content.html"></iframe>
+
+<style>
+	iframe {
+		width: 100%;
+		height: 300px;
+	}
+</style>

tests/manual/tickets/189/1.js

@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console */
+
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+BalloonEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet ],
+		toolbar: [ 'bold', 'link' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

tests/manual/tickets/189/1.md

@@ -0,0 +1,9 @@
+## The -webkit-appearance of the buttons in the Bootstrap 4 modal [#189](https://github.com/ckeditor/ckeditor5-theme-lark/issues/189)
+
+1. Click the link in the content of the **plain editor**.
+2. Click the link in the content of the **editor inside the bootstrap modal**.
+3. In both cases, the link editing UI should show up.
+
+**Expected**
+
+In both cases, all buttons (including the link preview) should look **exactly the same**.

tests/manual/tickets/189/assets/iframe-content.html

@@ -0,0 +1,58 @@
+<div class="container h-100">
+	<div class="row h-100 justify-content-center align-items-center">
+		<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
+			<div class="modal-dialog">
+				<div class="modal-content">
+				<div class="modal-header">
+					A Bootstrap 4 modal with the BalloonEditor instance
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				</div>
+				<div class="modal-body">
+					<div id="editor">
+						<p>Content of <a href="https://ckeditor.com">the editor</a>.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<div id="info">
+	There is nothing to do here as it is just a sub-component of another test.
+	<br/>
+	<a href="../1.html">Click here to continue testing</a>.
+</div>
+
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
+<script src="https://unpkg.com/popper.js" ></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
+
+<style>
+	:root {
+		--ck-z-default: 100;
+	}
+
+	html, body {
+		height: 100%;
+	}
+
+	.manual-test-sidebar {
+		display: none;
+	}
+
+	.manual-test-container {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	#info {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translateX( -50% );
+		display: none;
+	}
+</style>
+

tests/manual/tickets/189/assets/iframe-content.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document, window, console, $ */
+
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+// Display an info when this file is ran as a standalone test.
+if ( window.top === window ) {
+	document.getElementById( 'info' ).style.display = 'block';
+} else {
+	BalloonEditor
+		.create( document.querySelector( '#editor' ), {
+			plugins: [ ArticlePluginSet ],
+			toolbar: [ 'bold', 'link' ]
+		} )
+		.then( editor => {
+			window.editor = editor;
+
+			$( '#modal' ).modal( {
+				// Make sure the modal does not steal the input focus (e.g. when editing a link).
+				// https://github.com/ckeditor/ckeditor5/issues/1147
+				focus: false
+			} );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+}

theme/ckeditor5-ui/components/button/button.css

@@ -37,6 +37,9 @@ a.ck.ck-button {
 	/* Apply some smooth transition to the box-shadow. */
 	transition: box-shadow 200ms ease-in-out;
 
+	/* https://github.com/ckeditor/ckeditor5-theme-lark/issues/189 */
+	-webkit-appearance: none;
+
 	&:active,
 	&:focus {
 		@mixin ck-focus-ring;