Improved and added new UI components

docs/features/index.md

@@ -59,7 +59,7 @@ Additionally, CKEditor 5 offers the {@link features/restricted-editing rest
 
 {@img assets/img/features-collaboration.png 800 CKEditor 5 collaboration features.}
 
-You can also easily track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-revision-history/theme/icons/revision-history.svg Revision history}. This modern and robust document versioning tool lets you create named versions, compare changes, and restore previous document versions at ease, tracking all progress — also when multiple editors work together.
+You can also easily track the progress and changes done in the content with the {@link features/revision-history revision history feature} {@icon @ckeditor/ckeditor5-core/theme/icons/history.svg Revision history}. This modern and robust document versioning tool lets you create named versions, compare changes, and restore previous document versions at ease, tracking all progress — also when multiple editors work together.
 
 {@img assets/img/features-revision-history.png 800 CKEditor 5 document versioning feature.}
 

packages/ckeditor5-core/src/index.ts

@@ -38,7 +38,9 @@ import caption from './../theme/icons/caption.svg';
 import check from './../theme/icons/check.svg';
 import cog from './../theme/icons/cog.svg';
 import eraser from './../theme/icons/eraser.svg';
+import history from './../theme/icons/history.svg';
 import lowVision from './../theme/icons/low-vision.svg';
+import loupe from './../theme/icons/loupe.svg';
 import image from './../theme/icons/image.svg';
 
 import alignBottom from './../theme/icons/align-bottom.svg';
@@ -81,8 +83,10 @@ export const icons = {
 	check,
 	cog,
 	eraser,
+	history,
 	image,
 	lowVision,
+	loupe,
 	importExport,
 	paragraph,
 	plus,

packages/ckeditor5-mention/src/ui/domwrapperview.ts

@@ -72,4 +72,11 @@ export default class DomWrapperView extends View {
 
 		this.element = this.domElement;
 	}
+
+	/**
+	 * Focuses the DOM element.
+	 */
+	public focus(): void {
+		this.domElement.focus();
+	}
 }

packages/ckeditor5-mention/tests/ui/domwrapperview.js

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, Event */
+
+import { Locale } from '@ckeditor/ckeditor5-utils';
+import DomWrapperView from '../../src/ui/domwrapperview';
+
+describe( 'DomWrapperView', () => {
+	let domElement, view;
+
+	beforeEach( () => {
+		domElement = document.createElement( 'div' );
+		view = new DomWrapperView( new Locale(), domElement );
+	} );
+
+	afterEach( () => {
+		view.destroy();
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should add CSS class to the element', () => {
+			expect( domElement.classList.contains( 'ck-button' ) ).to.be.true;
+		} );
+
+		it( 'should set #isOn observable property with a CSS class binding', () => {
+			expect( view.isOn ).to.be.false;
+
+			// TODO: This is actually a bug because the initial state is not set correctly.
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.false;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.false;
+
+			view.isOn = true;
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.true;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.false;
+
+			view.isOn = false;
+			expect( domElement.classList.contains( 'ck-on' ) ).to.be.false;
+			expect( domElement.classList.contains( 'ck-off' ) ).to.be.true;
+		} );
+
+		it( 'should fire #execute on DOM element click', () => {
+			const spy = sinon.spy();
+			view.on( 'execute', spy );
+
+			domElement.dispatchEvent( new Event( 'click' ) );
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+
+	describe( 'render()', () => {
+		it( 'should assign passed element to #element', () => {
+			view.render();
+			expect( view.element ).to.equal( domElement );
+		} );
+	} );
+
+	describe( 'focus()', () => {
+		it( 'focuses the #domElement', () => {
+			const spy = sinon.spy( domElement, 'focus' );
+
+			view.focus();
+
+			sinon.assert.calledOnce( spy );
+		} );
+	} );
+} );

packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -92,6 +92,9 @@ <h3>Button: Responsiveness</h3>
 	<h3>Button: Tooltip</h3>
 	<div id="button-tooltip" class="ck ck-reset_all"></div>
 
+	<h3>Button: Spinner</h3>
+	<div id="button-spinner" class="ck ck-reset_all"></div>
+
 <h2>Dropdown</h2>
 
 	<h3>ListDropdown</h3>

packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -30,6 +30,7 @@ import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
+import { SpinnerView } from '@ckeditor/ckeditor5-ui';
 
 const locale = new Locale();
 
@@ -71,6 +72,7 @@ const ui = testUtils.createTestUIView( {
 	'buttonResponsive2': '#button-responsive-2',
 	'buttonResponsive3': '#button-responsive-3',
 	'buttonTooltip': '#button-tooltip',
+	'buttonSpinner': '#button-spinner',
 
 	listDropdown: '#list-dropdown',
 	buttonDropdown: '#button-dropdown',
@@ -273,6 +275,22 @@ function renderButton() {
 			tooltipPosition: 'sw'
 		} )
 	] ) );
+
+	// --- With spinner ------------------------------------------------------------
+
+	const buttonWithSpinner = button( {
+		label: 'Button with spinner',
+		withText: false
+	} );
+
+	const spinnerView = new SpinnerView();
+	spinnerView.isVisible = true;
+
+	buttonWithSpinner.children.add( spinnerView );
+
+	ui.buttonSpinner.add( toolbar( [
+		buttonWithSpinner
+	] ) );
 }
 
 function renderDropdown() {

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/autocomplete/autocomplete.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_shadow.css";
+
+.ck.ck-autocomplete {
+	& > .ck-search__results {
+		@mixin ck-rounded-corners;
+		@mixin ck-drop-shadow;
+
+		max-height: 200px;
+		overflow-y: auto;
+		background: var(--ck-color-base-background);
+		border: 1px solid var(--ck-color-dropdown-panel-border);
+		min-width: auto;
+
+		&.ck-search__results_n {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-bottom: -1px;
+		}
+
+		&.ck-search__results_s {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			/* Prevent duplicated borders between the input and the results pane. */
+			margin-top: -1px;
+		}
+	}
+}

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css

@@ -77,6 +77,21 @@
 	}
 }
 
+.ck-list .ck-list__group {
+	padding-top: var(--ck-spacing-medium);
+
+	/* The group should have a border when it's not the first item. */
+	*:not(.ck-hidden) ~ & {
+		border-top: 1px solid var(--ck-color-base-border);
+	}
+
+	& > span {
+		font-size: 11px;
+		font-weight: bold;
+		padding: var(--ck-spacing-medium);
+	}
+}
+
 .ck.ck-list__separator {
 	height: 1px;
 	width: 100%;

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/search/search.css

@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
+:root {
+	--ck-search-field-view-horizontal-spacing: calc(var(--ck-icon-size) + var(--ck-spacing-medium));
+}
+
+.ck.ck-search {
+	& > .ck-labeled-field-view {
+		& .ck-input {
+			width: 100%;
+		}
+
+		&.ck-search__query_with-icon {
+			--ck-labeled-field-label-default-position-x: var(--ck-search-field-view-horizontal-spacing);
+
+			& > .ck-labeled-field-view__input-wrapper > .ck-icon {
+				opacity: .5;
+				pointer-events: none;
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					padding-left: var(--ck-search-field-view-horizontal-spacing);
+				}
+
+				@mixin ck-dir rtl {
+					&:not(.ck-input-text_empty) {
+						padding-left: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+			}
+		}
+
+		&.ck-search__query_with-reset {
+			--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-search-field-view-horizontal-spacing);
+
+			&.ck-labeled-field-view_empty {
+				--ck-labeled-field-empty-unfocused-max-width: 100% - var(--ck-search-field-view-horizontal-spacing) - var(--ck-spacing-medium);
+			}
+
+			& .ck-search__reset {
+				min-width: auto;
+				min-height: auto;
+
+				background: none;
+				opacity: .5;
+				padding: 0;
+
+				@mixin ck-dir ltr {
+					right: var(--ck-spacing-medium);
+				}
+
+				@mixin ck-dir rtl {
+					left: var(--ck-spacing-medium);
+				}
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			& .ck-input {
+				width: 100%;
+
+				@mixin ck-dir ltr {
+					&:not(.ck-input-text_empty) {
+						padding-right: var(--ck-search-field-view-horizontal-spacing);
+					}
+				}
+
+				@mixin ck-dir rtl {
+					padding-right: var(--ck-search-field-view-horizontal-spacing);
+				}
+			}
+		}
+	}
+
+	& > .ck-search__results {
+		min-width: 100%;
+
+		& > .ck-search__info {
+			width: 100%;
+			padding: var(--ck-spacing-medium) var(--ck-spacing-large);
+
+			& * {
+				white-space: normal;
+			}
+
+			& > span:first-child {
+				font-weight: bold;
+			}
+
+			& > span:last-child {
+				margin-top: var(--ck-spacing-medium);
+			}
+		}
+	}
+}
+

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/spinner/spinner.css

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-toolbar-spinner-size: 18px;
+}
+
+.ck.ck-spinner-container {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	animation: 1.5s infinite rotate linear;
+}
+
+.ck.ck-spinner {
+	width: var(--ck-toolbar-spinner-size);
+	height: var(--ck-toolbar-spinner-size);
+	border-radius: 50%;
+	border: 2px solid var(--ck-color-text);
+	border-top-color: transparent;
+}
+
+@keyframes rotate {
+	to {
+		transform: rotate(360deg)
+	}
+}
+

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/textarea/textarea.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * This fixes a problem in Firefox when the initial height of the complement does not match the number of rows.
+ * This bug is especially visible when rows=1.
+ */
+.ck-textarea {
+	overflow-x: hidden
+}