@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 15.0.0 to 16.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [16.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v15.0.0...v16.0.0) (2019-12-04)
+
+### Features
+
+* Enabled keystroke preview in `ButtonView`. Implemented the `ButtonView#withKeystroke` property. Closes [ckeditor/ckeditor5#5782](https://github.com/ckeditor/ckeditor5/issues/5782). ([dac8ce0](https://github.com/ckeditor/ckeditor5-ui/commit/dac8ce0))
+
+### Bug fixes
+
+* Use relative positioning for dropdowns to prevent ugly blurring in Chrome. Closes [ckeditor/ckeditor5#1053](https://github.com/ckeditor/ckeditor5/issues/1053). ([95404e3](https://github.com/ckeditor/ckeditor5-ui/commit/95404e3))
+
+### Other changes
+
+* Updated translations. ([16ee253](https://github.com/ckeditor/ckeditor5-ui/commit/16ee253)) 
+
+
 ## [15.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v14.0.0...v15.0.0) (2019-10-23)
@@ -5,0 +20,0 @@

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "15.0.0",
+  "version": "16.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -12,25 +12,27 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^15.0.0",
-    "@ckeditor/ckeditor5-utils": "^15.0.0",
+    "@ckeditor/ckeditor5-core": "^16.0.0",
+    "@ckeditor/ckeditor5-utils": "^16.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^15.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^15.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^15.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^15.0.0",
-    "@ckeditor/ckeditor5-engine": "^15.0.0",
-    "@ckeditor/ckeditor5-enter": "^15.0.0",
-    "@ckeditor/ckeditor5-essentials": "^15.0.0",
-    "@ckeditor/ckeditor5-heading": "^15.0.0",
-    "@ckeditor/ckeditor5-image": "^15.0.0",
-    "@ckeditor/ckeditor5-link": "^15.0.0",
-    "@ckeditor/ckeditor5-list": "^15.0.0",
-    "@ckeditor/ckeditor5-mention": "^15.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^15.0.0",
-    "@ckeditor/ckeditor5-typing": "^15.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^16.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^16.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^16.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
+    "@ckeditor/ckeditor5-engine": "^16.0.0",
+    "@ckeditor/ckeditor5-enter": "^16.0.0",
+    "@ckeditor/ckeditor5-essentials": "^16.0.0",
+    "@ckeditor/ckeditor5-heading": "^16.0.0",
+    "@ckeditor/ckeditor5-image": "^16.0.0",
+    "@ckeditor/ckeditor5-link": "^16.0.0",
+    "@ckeditor/ckeditor5-list": "^16.0.0",
+    "@ckeditor/ckeditor5-mention": "^16.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
+    "@ckeditor/ckeditor5-typing": "^16.0.0",
     "eslint": "^5.5.0",
     "eslint-config-ckeditor5": "^2.0.0",
     "husky": "^1.3.1",
-    "lint-staged": "^7.0.0"
+    "lint-staged": "^7.0.0",
+    "stylelint": "^11.1.1",
+    "stylelint-config-ckeditor5": "^1.0.0"
   },
@@ -55,3 +57,4 @@ "engines": {
   "scripts": {
-    "lint": "eslint --quiet '**/*.js'"
+    "lint": "eslint --quiet '**/*.js'",
+    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'"
   },
@@ -61,2 +64,5 @@ "lint-staged": {
       "eslint --quiet"
+    ],
+    "**/*.css": [
+      "stylelint --quiet --allow-empty-input"
     ]
@@ -63,0 +69,0 @@ },

src/button/buttonview.js

@@ -63,2 +63,3 @@ /**
 		this.set( 'withText', false );
+		this.set( 'withKeystroke', false );
 
@@ -105,2 +106,12 @@ /**
 		/**
+		 * A view displaying the keystroke of the button next to the {@link #labelView label}.
+		 * Added to {@link #children} when the {@link #withKeystroke `withKeystroke` attribute}
+		 * is defined.
+		 *
+		 * @readonly
+		 * @member {module:ui/view/view~View} #keystrokeView
+		 */
+		this.keystrokeView = this._createKeystrokeView();
+
+		/**
 		 * Tooltip of the button bound to the template.
@@ -132,3 +143,4 @@ *
 					bind.to( 'isOn', value => value ? 'ck-on' : 'ck-off' ),
-					bind.if( 'withText', 'ck-button_with-text' )
+					bind.if( 'withText', 'ck-button_with-text' ),
+					bind.if( 'withKeystroke', 'ck-button_with-keystroke' ),
 				],
@@ -177,2 +189,6 @@ type: bind.to( 'type', value => value ? value : 'button' ),
 		this.children.add( this.labelView );
+
+		if ( this.withKeystroke ) {
+			this.children.add( this.keystrokeView );
+		}
 	}
@@ -237,2 +253,32 @@
 	/**
+	 * Creates a view that displays a keystroke next to a {@link #labelView label }
+	 * and binds it with button attributes.
+	 *
+	 * @private
+	 * @returns {module:ui/view~View}
+	 */
+	_createKeystrokeView() {
+		const keystrokeView = new View();
+
+		keystrokeView.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-button__keystroke'
+				]
+			},
+
+			children: [
+				{
+					text: this.bindTemplate.to( 'keystroke', text => getEnvKeystrokeText( text ) )
+				}
+			]
+		} );
+
+		return keystrokeView;
+	}
+
+	/**
 	 * Gets the text for the {@link #tooltipView} from the combination of
@@ -239,0 +285,0 @@ * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.

No alert changes

Improved metrics

Total package byte prevSize

441022

increased by1.07%

Number of package files

132

increased by0.76%

Lines of code

9493

increased by0.44%

Worsened metrics

Dev dependency count

20

increased by11.11%

Dependency changes

• + Added@ckeditor/ckeditor5-core@16.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@16.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@16.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@15.0.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@15.0.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@15.0.0(transitive)

• - Removedckeditor5@15.0.0(transitive)

• Updated@ckeditor/ckeditor5-core@^16.0.0

• Updated@ckeditor/ckeditor5-utils@^16.0.0