Procházet zdrojové kódy

Merge branch 'master' into t/ckeditor5/742

Kamil Piechaczek před 7 roky
rodič
revize
56ceb769cc
50 změnil soubory, kde provedl 140 přidání a 83 odebrání
  1. 5 1
      packages/ckeditor5-ui/src/button/buttonview.js
  2. 1 0
      packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js
  3. 1 0
      packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js
  4. 1 0
      packages/ckeditor5-ui/src/dropdown/dropdownview.js
  5. 3 3
      packages/ckeditor5-ui/src/editableui/editableuiview.js
  6. 10 2
      packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
  7. 3 2
      packages/ckeditor5-ui/src/editorui/editoruiview.js
  8. 4 1
      packages/ckeditor5-ui/src/icon/iconview.js
  9. 4 1
      packages/ckeditor5-ui/src/iframe/iframeview.js
  10. 1 0
      packages/ckeditor5-ui/src/inputtext/inputtextview.js
  11. 1 0
      packages/ckeditor5-ui/src/label/labelview.js
  12. 1 0
      packages/ckeditor5-ui/src/labeledinput/labeledinputview.js
  13. 1 0
      packages/ckeditor5-ui/src/list/listitemview.js
  14. 1 0
      packages/ckeditor5-ui/src/list/listview.js
  15. 1 0
      packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js
  16. 3 0
      packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js
  17. 1 0
      packages/ckeditor5-ui/src/toolbar/toolbarseparatorview.js
  18. 1 0
      packages/ckeditor5-ui/src/toolbar/toolbarview.js
  19. 2 0
      packages/ckeditor5-ui/src/tooltip/tooltipview.js
  20. 4 1
      packages/ckeditor5-ui/tests/button/buttonview.js
  21. 1 0
      packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js
  22. 1 0
      packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js
  23. 1 0
      packages/ckeditor5-ui/tests/dropdown/dropdownview.js
  24. 1 0
      packages/ckeditor5-ui/tests/editableui/editableuiview.js
  25. 1 0
      packages/ckeditor5-ui/tests/editorui/boxed/boxededitoruiview.js
  26. 1 0
      packages/ckeditor5-ui/tests/editorui/editoruiview.js
  27. 2 1
      packages/ckeditor5-ui/tests/icon/iconview.js
  28. 1 0
      packages/ckeditor5-ui/tests/iframe/iframeview.js
  29. 1 0
      packages/ckeditor5-ui/tests/inputtext/inputtextview.js
  30. 1 0
      packages/ckeditor5-ui/tests/label/labelview.js
  31. 1 0
      packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js
  32. 3 2
      packages/ckeditor5-ui/tests/list/listitemview.js
  33. 1 0
      packages/ckeditor5-ui/tests/list/listview.js
  34. 1 0
      packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js
  35. 3 0
      packages/ckeditor5-ui/tests/panel/sticky/stickypanelview.js
  36. 1 0
      packages/ckeditor5-ui/tests/toolbar/toolbarseparatorview.js
  37. 1 0
      packages/ckeditor5-ui/tests/toolbar/toolbarview.js
  38. 2 0
      packages/ckeditor5-ui/tests/tooltip/tooltipview.js
  39. 2 2
      packages/ckeditor5-ui/theme/components/button/button.css
  40. 16 16
      packages/ckeditor5-ui/theme/components/dropdown/dropdown.css
  41. 6 5
      packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css
  42. 1 1
      packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css
  43. 1 1
      packages/ckeditor5-ui/theme/components/icon/icon.css
  44. 2 2
      packages/ckeditor5-ui/theme/components/label/label.css
  45. 7 7
      packages/ckeditor5-ui/theme/components/list/list.css
  46. 4 4
      packages/ckeditor5-ui/theme/components/panel/balloonpanel.css
  47. 9 11
      packages/ckeditor5-ui/theme/components/panel/stickypanel.css
  48. 7 7
      packages/ckeditor5-ui/theme/components/toolbar/toolbar.css
  49. 9 10
      packages/ckeditor5-ui/theme/components/tooltip/tooltip.css
  50. 3 3
      packages/ckeditor5-ui/theme/globals/_reset.css

+ 5 - 1
packages/ckeditor5-ui/src/button/buttonview.js

@@ -116,6 +116,7 @@ export default class ButtonView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-button',
 					bind.to( 'isEnabled', value => value ? 'ck-enabled' : 'ck-disabled' ),
 					bind.if( 'isVisible', 'ck-hidden', value => !value ),
@@ -199,7 +200,10 @@ export default class ButtonView extends View {
 			tag: 'span',
 
 			attributes: {
-				class: [ 'ck-button__label' ]
+				class: [
+					'ck',
+					'ck-button__label'
+				]
 			},
 
 			children: [

+ 1 - 0
packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.js

@@ -108,6 +108,7 @@ export default class SplitButtonView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-splitbutton',
 					bind.if( 'isVisible', 'ck-hidden', value => !value ),
 					this.arrowView.bindTemplate.if( 'isOn', 'ck-splitbutton_open' )

+ 1 - 0
packages/ckeditor5-ui/src/dropdown/dropdownpanelview.js

@@ -50,6 +50,7 @@ export default class DropdownPanelView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-reset',
 					'ck-dropdown__panel',
 					bind.if( 'isVisible', 'ck-dropdown__panel-visible' )

+ 1 - 0
packages/ckeditor5-ui/src/dropdown/dropdownview.js

@@ -145,6 +145,7 @@ export default class DropdownView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-dropdown',
 					bind.to( 'isEnabled', isEnabled => isEnabled ? '' : 'ck-disabled' )
 				]

+ 3 - 3
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -35,11 +35,11 @@ export default class EditableUIView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
-					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
 					'ck',
-					'ck-editor__editable',
 					'ck-content',
-					'ck-rounded-corners'
+					'ck-editor__editable',
+					'ck-rounded-corners',
+					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' )
 				],
 				contenteditable: bind.to( 'isReadOnly', value => !value ),
 			}

+ 10 - 2
packages/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js

@@ -60,6 +60,7 @@ export default class BoxedEditorUIView extends EditorUIView {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-reset',
 					'ck-editor',
 					'ck-rounded-corners'
@@ -75,7 +76,11 @@ export default class BoxedEditorUIView extends EditorUIView {
 				{
 					tag: 'div',
 					attributes: {
-						class: 'ck-editor__top ck-reset_all',
+						class: [
+							'ck',
+							'ck-editor__top',
+							'ck-reset_all'
+						],
 						role: 'presentation'
 					},
 					children: this.top
@@ -83,7 +88,10 @@ export default class BoxedEditorUIView extends EditorUIView {
 				{
 					tag: 'div',
 					attributes: {
-						class: 'ck-editor__main',
+						class: [
+							'ck',
+							'ck-editor__main'
+						],
 						role: 'presentation'
 					},
 					children: this.main

+ 3 - 2
packages/ckeditor5-ui/src/editorui/editoruiview.js

@@ -73,9 +73,10 @@ export default class EditorUIView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
+					'ck-reset_all',
 					'ck-body',
-					'ck-rounded-corners',
-					'ck-reset_all'
+					'ck-rounded-corners'
 				]
 			},
 			children: this.body

+ 4 - 1
packages/ckeditor5-ui/src/icon/iconview.js

@@ -58,7 +58,10 @@ export default class IconView extends View {
 			tag: 'svg',
 			ns: 'http://www.w3.org/2000/svg',
 			attributes: {
-				class: 'ck-icon',
+				class: [
+					'ck',
+					'ck-icon'
+				],
 				viewBox: bind.to( 'viewBox' )
 			}
 		} );

+ 4 - 1
packages/ckeditor5-ui/src/iframe/iframeview.js

@@ -28,7 +28,10 @@ export default class IframeView extends View {
 		this.setTemplate( {
 			tag: 'iframe',
 			attributes: {
-				class: [ 'ck-reset_all' ],
+				class: [
+					'ck',
+					'ck-reset_all'
+				],
 				// It seems that we need to allow scripts in order to be able to listen to events.
 				// TODO: Research that. Perhaps the src must be set?
 				sandbox: 'allow-same-origin allow-scripts'

+ 1 - 0
packages/ckeditor5-ui/src/inputtext/inputtextview.js

@@ -62,6 +62,7 @@ export default class InputTextView extends View {
 			attributes: {
 				type: 'text',
 				class: [
+					'ck',
 					'ck-input',
 					'ck-input-text'
 				],

+ 1 - 0
packages/ckeditor5-ui/src/label/labelview.js

@@ -45,6 +45,7 @@ export default class LabelView extends View {
 			tag: 'label',
 			attributes: {
 				class: [
+					'ck',
 					'ck-label'
 				],
 				for: bind.to( 'for' )

+ 1 - 0
packages/ckeditor5-ui/src/labeledinput/labeledinputview.js

@@ -73,6 +73,7 @@ export default class LabeledInputView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
 					'ck-labeled-input',
 					bind.if( 'isReadOnly', 'ck-disabled' )
 				]

+ 1 - 0
packages/ckeditor5-ui/src/list/listitemview.js

@@ -46,6 +46,7 @@ export default class ListItemView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-list__item',
 					bind.to( 'class' ),
 					bind.if( 'isActive', 'ck-list__item_active' )

+ 1 - 0
packages/ckeditor5-ui/src/list/listview.js

@@ -76,6 +76,7 @@ export default class ListView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-reset',
 					'ck-list'
 				]

+ 1 - 0
packages/ckeditor5-ui/src/panel/balloon/balloonpanelview.js

@@ -149,6 +149,7 @@ export default class BalloonPanelView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
 					'ck-balloon-panel',
 					bind.to( 'position', value => `ck-balloon-panel_${ value }` ),
 					bind.if( 'isVisible', 'ck-balloon-panel_visible' ),

+ 3 - 0
packages/ckeditor5-ui/src/panel/sticky/stickypanelview.js

@@ -154,6 +154,7 @@ export default class StickyPanelView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
 					'ck-sticky-panel__placeholder'
 				],
 				style: {
@@ -177,6 +178,7 @@ export default class StickyPanelView extends View {
 
 			attributes: {
 				class: [
+					'ck',
 					'ck-sticky-panel__content',
 					// Toggle class of the panel when "sticky" state changes in the view.
 					bind.if( 'isSticky', 'ck-sticky-panel__content_sticky' ),
@@ -206,6 +208,7 @@ export default class StickyPanelView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
 					'ck-sticky-panel'
 				]
 			},

+ 1 - 0
packages/ckeditor5-ui/src/toolbar/toolbarseparatorview.js

@@ -25,6 +25,7 @@ export default class ToolbarSeparatorView extends View {
 			tag: 'span',
 			attributes: {
 				class: [
+					'ck',
 					'ck-toolbar__separator'
 				]
 			}

+ 1 - 0
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -96,6 +96,7 @@ export default class ToolbarView extends View {
 			tag: 'div',
 			attributes: {
 				class: [
+					'ck',
 					'ck-toolbar',
 					bind.if( 'isVertical', 'ck-toolbar_vertical' ),
 					bind.to( 'className' )

+ 2 - 0
packages/ckeditor5-ui/src/tooltip/tooltipview.js

@@ -58,6 +58,7 @@ export default class TooltipView extends View {
 			tag: 'span',
 			attributes: {
 				class: [
+					'ck',
 					'ck-tooltip',
 					bind.to( 'position', position => 'ck-tooltip_' + position ),
 					bind.if( 'text', 'ck-hidden', value => !value.trim() )
@@ -69,6 +70,7 @@ export default class TooltipView extends View {
 
 					attributes: {
 						class: [
+							'ck',
 							'ck-tooltip__text'
 						]
 					},

+ 4 - 1
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -35,6 +35,8 @@ describe( 'ButtonView', () => {
 
 		it( 'creates #labelView', () => {
 			expect( view.labelView ).to.be.instanceOf( View );
+			expect( view.labelView.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.labelView.element.classList.contains( 'ck-button__label' ) ).to.be.true;
 		} );
 
 		it( 'creates #iconView', () => {
@@ -45,7 +47,8 @@ describe( 'ButtonView', () => {
 	describe( '<button> bindings', () => {
 		describe( 'class', () => {
 			it( 'is set initially', () => {
-				expect( view.element.classList ).to.have.length( 3 );
+				expect( view.element.classList ).to.have.length( 4 );
+				expect( view.element.classList.contains( 'ck' ) ).to.true;
 				expect( view.element.classList.contains( 'ck-button' ) ).to.true;
 				expect( view.element.classList.contains( 'ck-enabled' ) ).to.true;
 				expect( view.element.classList.contains( 'ck-off' ) ).to.true;

+ 1 - 0
packages/ckeditor5-ui/tests/dropdown/button/splitbuttonview.js

@@ -38,6 +38,7 @@ describe( 'SplitButtonView', () => {
 
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'DIV' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-splitbutton' ) ).to.be.true;
 		} );
 

+ 1 - 0
packages/ckeditor5-ui/tests/dropdown/dropdownpanelview.js

@@ -34,6 +34,7 @@ describe( 'DropdownPanelView', () => {
 		} );
 
 		it( 'creates element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-reset' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-dropdown__panel' ) ).to.be.true;
 		} );

+ 1 - 0
packages/ckeditor5-ui/tests/dropdown/dropdownview.js

@@ -53,6 +53,7 @@ describe( 'DropdownView', () => {
 		} );
 
 		it( 'creates #element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-dropdown' ) ).to.be.true;
 			expect( view.element.children ).to.have.length( 2 );
 			expect( view.element.children[ 0 ] ).to.equal( buttonView.element );

+ 1 - 0
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -49,6 +49,7 @@ describe( 'EditableUIView', () => {
 			view.render();
 			expect( view.element ).to.equal( editableElement );
 			expect( view.element ).to.equal( view.editableElement );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view.externalElement ).to.equal( editableElement );

+ 1 - 0
packages/ckeditor5-ui/tests/editorui/boxed/boxededitoruiview.js

@@ -27,6 +27,7 @@ describe( 'BoxedEditorUIView', () => {
 		} );
 
 		it( 'bootstraps the view element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-editor' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-reset' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;

+ 1 - 0
packages/ckeditor5-ui/tests/editorui/editoruiview.js

@@ -41,6 +41,7 @@ describe( 'EditorUIView', () => {
 			const el = view._bodyCollectionContainer;
 
 			expect( el.parentNode ).to.equal( document.body );
+			expect( el.classList.contains( 'ck' ) ).to.be.true;
 			expect( el.classList.contains( 'ck-body' ) ).to.be.true;
 			expect( el.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( el.classList.contains( 'ck-reset_all' ) ).to.be.true;

+ 2 - 1
packages/ckeditor5-ui/tests/icon/iconview.js

@@ -29,7 +29,8 @@ describe( 'IconView', () => {
 
 		it( 'creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'svg' );
-			expect( view.element.getAttribute( 'class' ) ).to.equal( 'ck-icon' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-icon' ) ).to.be.true;
 			expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
 		} );
 	} );

+ 1 - 0
packages/ckeditor5-ui/tests/iframe/iframeview.js

@@ -16,6 +16,7 @@ describe( 'IframeView', () => {
 			view.render();
 			document.body.appendChild( view.element );
 
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-reset_all' ) ).to.be.true;
 			expect( view.element.attributes.getNamedItem( 'sandbox' ).value ).to.equal( 'allow-same-origin allow-scripts' );
 

+ 1 - 0
packages/ckeditor5-ui/tests/inputtext/inputtextview.js

@@ -22,6 +22,7 @@ describe( 'InputTextView', () => {
 		it( 'should creates element from template', () => {
 			expect( view.element.tagName ).to.equal( 'INPUT' );
 			expect( view.element.type ).to.equal( 'text' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-input-text' ) ).to.be.true;
 		} );

+ 1 - 0
packages/ckeditor5-ui/tests/label/labelview.js

@@ -17,6 +17,7 @@ describe( 'LabelView', () => {
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'LABEL' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-label' ) ).to.be.true;
 		} );
 	} );

+ 1 - 0
packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js

@@ -38,6 +38,7 @@ describe( 'LabeledInputView', () => {
 
 	describe( 'template', () => {
 		it( 'should have the CSS class', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-labeled-input' ) ).to.be.true;
 		} );
 

+ 3 - 2
packages/ckeditor5-ui/tests/list/listitemview.js

@@ -23,6 +23,7 @@ describe( 'ListItemView', () => {
 
 	describe( 'constructor()', () => {
 		it( 'creates element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-list__item' ) ).to.be.true;
 		} );
 
@@ -74,7 +75,7 @@ describe( 'ListItemView', () => {
 	describe( 'DOM bindings', () => {
 		describe( '"class" attribute', () => {
 			it( 'reacts on view#class', () => {
-				expect( view.element.classList ).to.have.length( 1 );
+				expect( view.element.classList ).to.have.length( 2 );
 
 				view.set( 'class', 'foo' );
 
@@ -82,7 +83,7 @@ describe( 'ListItemView', () => {
 			} );
 
 			it( 'reacts on view#isActive', () => {
-				expect( view.element.classList ).to.have.length( 1 );
+				expect( view.element.classList ).to.have.length( 2 );
 
 				view.set( 'isActive', true );
 

+ 1 - 0
packages/ckeditor5-ui/tests/list/listview.js

@@ -27,6 +27,7 @@ describe( 'ListView', () => {
 
 	describe( 'constructor()', () => {
 		it( 'creates element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-reset' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-list' ) ).to.be.true;
 		} );

+ 1 - 0
packages/ckeditor5-ui/tests/panel/balloon/balloonpanelview.js

@@ -34,6 +34,7 @@ describe( 'BalloonPanelView', () => {
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'DIV' );
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-balloon-panel' ) ).to.true;
 		} );
 

+ 3 - 0
packages/ckeditor5-ui/tests/panel/sticky/stickypanelview.js

@@ -56,12 +56,15 @@ describe( 'StickyPanelView', () => {
 
 		it( 'should create element from template', () => {
 			expect( element.tagName ).to.equal( 'DIV' );
+			expect( element.classList.contains( 'ck' ) ).to.true;
 			expect( element.classList.contains( 'ck-sticky-panel' ) ).to.true;
 
 			expect( placeholderElement.tagName ).to.equal( 'DIV' );
+			expect( placeholderElement.classList.contains( 'ck' ) ).to.true;
 			expect( placeholderElement.classList.contains( 'ck-sticky-panel__placeholder' ) ).to.true;
 
 			expect( contentElement.tagName ).to.equal( 'DIV' );
+			expect( contentElement.classList.contains( 'ck' ) ).to.true;
 			expect( contentElement.classList.contains( 'ck-sticky-panel__content' ) ).to.true;
 		} );
 

+ 1 - 0
packages/ckeditor5-ui/tests/toolbar/toolbarseparatorview.js

@@ -17,6 +17,7 @@ describe( 'ToolbarSeparatorView', () => {
 	describe( 'template', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'SPAN' );
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-toolbar__separator' ) ).to.true;
 		} );
 	} );

+ 1 - 0
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -60,6 +60,7 @@ describe( 'ToolbarView', () => {
 
 	describe( 'template', () => {
 		it( 'should create element from template', () => {
+			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-toolbar' ) ).to.true;
 		} );
 

+ 2 - 0
packages/ckeditor5-ui/tests/tooltip/tooltipview.js

@@ -17,10 +17,12 @@ describe( 'TooltipView', () => {
 	describe( 'constructor()', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.tagName ).to.equal( 'SPAN' );
+			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-tooltip' ) ).to.be.true;
 			expect( view.element.childNodes ).to.have.length( 1 );
 
 			expect( text.tagName ).to.equal( 'SPAN' );
+			expect( text.classList.contains( 'ck' ) ).to.be.true;
 			expect( text.classList.contains( 'ck-tooltip__text' ) ).to.be.true;
 		} );
 

+ 2 - 2
packages/ckeditor5-ui/theme/components/button/button.css

@@ -6,8 +6,8 @@
 @import "../../mixins/_unselectable.css";
 @import "../tooltip/mixins/_tooltip.css";
 
-.ck-button,
-a.ck-button {
+.ck.ck-button,
+a.ck.ck-button {
 	@mixin ck-unselectable;
 	@mixin ck-tooltip_enabled;
 

+ 16 - 16
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -5,7 +5,7 @@
 
 @import "../tooltip/mixins/_tooltip.css";
 
-.ck-dropdown {
+.ck.ck-dropdown {
 	display: inline-block;
 	position: relative;
 
@@ -28,24 +28,24 @@
 			@mixin ck-tooltip_disabled;
 		}
 	}
-}
 
-.ck-dropdown__panel {
-	/* This is to get rid of flickering when the tooltip is shown under the panel,
-	which looks like the panel moves vertically a pixel down and up. */
-	-webkit-backface-visibility: hidden;
+	& .ck-dropdown__panel {
+		/* This is to get rid of flickering when the tooltip is shown under the panel,
+		which looks like the panel moves vertically a pixel down and up. */
+		-webkit-backface-visibility: hidden;
 
-	display: none;
-	z-index: var(--ck-z-modal);
+		display: none;
+		z-index: var(--ck-z-modal);
 
-	position: absolute;
-	left: 0px;
-	transform: translate3d( 0, 100%, 0 );
-}
+		position: absolute;
+		left: 0px;
+		transform: translate3d( 0, 100%, 0 );
 
-.ck-dropdown__panel-visible {
-	display: inline-block;
+		&.ck-dropdown__panel-visible {
+			display: inline-block;
 
-	/* This will prevent blurry icons in dropdown on Firefox. See #340. */
-	will-change: transform;
+			/* This will prevent blurry icons in dropdown on Firefox. See #340. */
+			will-change: transform;
+		}
+	}
 }

+ 6 - 5
packages/ckeditor5-ui/theme/components/dropdown/splitbutton.css

@@ -5,16 +5,17 @@
 
 @import "../tooltip/mixins/_tooltip.css";
 
-.ck-splitbutton {
+.ck.ck-splitbutton {
 	/* Enable font size inheritance, which allows fluid UI scaling. */
 	font-size: inherit;
 
 	& .ck-splitbutton__action:focus {
 		z-index: calc(var(--ck-z-default) + 1);
 	}
-}
 
-/* Disable tooltips for the buttons when the button is "open" */
-.ck-splitbutton.ck-splitbutton_open > .ck-button {
-	@mixin ck-tooltip_disabled;
+	/* Disable tooltips for the buttons when the button is "open" */
+	&.ck-splitbutton_open > .ck-button {
+		@mixin ck-tooltip_disabled;
+	}
 }
+

+ 1 - 1
packages/ckeditor5-ui/theme/components/dropdown/toolbardropdown.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-toolbar-dropdown {
+.ck.ck-toolbar-dropdown {
 	& .ck-toolbar {
 		flex-wrap: nowrap;
 	}

+ 1 - 1
packages/ckeditor5-ui/theme/components/icon/icon.css

@@ -3,6 +3,6 @@
  * For licensing, see LICENSE.md.
  */
 
-svg.ck-icon {
+.ck.ck-icon {
 	vertical-align: middle;
 }

+ 2 - 2
packages/ckeditor5-ui/theme/components/label/label.css

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-label {
+.ck.ck-label {
 	display: block;
 }
 
-.ck-voice-label {
+.ck.ck-voice-label {
 	display: none;
 }

+ 7 - 7
packages/ckeditor5-ui/theme/components/list/list.css

@@ -5,18 +5,18 @@
 
 @import "../../mixins/_unselectable.css";
 
-.ck-list {
+.ck.ck-list {
 	@mixin ck-unselectable;
 
 	/* Crop the the items when the list has huge border-radius. */
 	overflow: hidden;
-}
 
-.ck-list__item {
-	display: block;
+	& .ck-list__item {
+		display: block;
 
-	&:focus {
-		position: relative;
-		z-index: var(--ck-z-default);
+		&:focus {
+			position: relative;
+			z-index: var(--ck-z-default);
+		}
 	}
 }

+ 4 - 4
packages/ckeditor5-ui/theme/components/panel/balloonpanel.css

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-balloon-panel {
+.ck.ck-balloon-panel {
 	display: none;
 	position: absolute;
 
@@ -44,8 +44,8 @@
 			z-index: calc(var(--ck-z-default) + 1);
 		}
 	}
-}
 
-.ck-balloon-panel_visible {
-	display: block;
+	&.ck-balloon-panel_visible {
+		display: block;
+	}
 }

+ 9 - 11
packages/ckeditor5-ui/theme/components/panel/stickypanel.css

@@ -3,17 +3,15 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-editor {
-	& .ck-sticky-panel {
-		& .ck-sticky-panel__content_sticky {
-			z-index: var(--ck-z-modal); /* #315 */
-			position: fixed;
-			top: 0;
-		}
+.ck.ck-sticky-panel {
+	& .ck-sticky-panel__content_sticky {
+		z-index: var(--ck-z-modal); /* #315 */
+		position: fixed;
+		top: 0;
+	}
 
-		& .ck-sticky-panel__content_sticky_bottom-limit {
-			top: auto;
-			position: absolute;
-		}
+	& .ck-sticky-panel__content_sticky_bottom-limit {
+		top: auto;
+		position: absolute;
 	}
 }

+ 7 - 7
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -5,7 +5,7 @@
 
 @import "../../mixins/_unselectable.css";
 
-.ck-toolbar {
+.ck.ck-toolbar {
 	@mixin ck-unselectable;
 
 	display: flex;
@@ -15,17 +15,17 @@
 	&.ck-toolbar_vertical {
 		flex-direction: column;
 	}
+
+	&.ck-toolbar_floating {
+		flex-wrap: nowrap;
+	}
 }
 
-.ck-toolbar__separator {
+.ck.ck-toolbar__separator {
 	display: inline-block;
 }
 
-.ck-toolbar__newline {
+.ck.ck-toolbar__newline {
 	display: block;
 	width: 100%;
 }
-
-.ck-toolbar_floating {
-	flex-wrap: nowrap;
-}

+ 9 - 10
packages/ckeditor5-ui/theme/components/tooltip/tooltip.css

@@ -3,8 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-tooltip,
-.ck-tooltip__text::after {
+.ck.ck-tooltip,
+.ck.ck-tooltip .ck-tooltip__text::after {
 	position: absolute;
 
 	/* Without this, hovering the tooltip could keep it visible. */
@@ -21,15 +21,14 @@
 	opacity: 0;
 	display: none;
 	z-index: var(--ck-z-modal);
-}
 
-.ck-tooltip__text {
-	display: inline-block;
+	& .ck-tooltip__text {
+		display: inline-block;
 
-	&::after {
-		content: "";
-		width: 0;
-		height: 0;
+		&::after {
+			content: "";
+			width: 0;
+			height: 0;
+		}
 	}
 }
-

+ 3 - 3
packages/ckeditor5-ui/theme/globals/_reset.css

@@ -3,9 +3,9 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-reset,
-.ck-reset_all,
-.ck-reset_all * {
+.ck.ck-reset,
+.ck.ck-reset_all,
+.ck.ck-reset_all * {
 	box-sizing: border-box;
 	width: auto;
 	height: auto;