Bladeren bron

Added tooltips to list style buttons.

Aleksander Nowodzinski 5 jaren geleden
bovenliggende
commit
4a3254bb2f
2 gewijzigde bestanden met toevoegingen van 27 en 8 verwijderingen
  1. 15 5
      packages/ckeditor5-list/src/liststylesui.js
  2. 12 3
      packages/ckeditor5-list/tests/liststylesui.js

+ 15 - 5
packages/ckeditor5-list/src/liststylesui.js

@@ -59,17 +59,20 @@ export default class ListStylesUI extends Plugin {
 			toolbarAriaLabel: t( 'Bulleted list styles toolbar' ),
 			styleDefinitions: [
 				{
-					label: t( 'Toggle the "disc" list style' ),
+					label: t( 'Toggle the disc list style' ),
+					tooltip: t( 'Disc' ),
 					type: 'disc',
 					icon: listStyleDiscIcon
 				},
 				{
-					label: t( 'Toggle the "circle" list style' ),
+					label: t( 'Toggle the circle list style' ),
+					tooltip: t( 'Circle' ),
 					type: 'circle',
 					icon: listStyleCircleIcon
 				},
 				{
-					label: t( 'Toggle the "square" list style' ),
+					label: t( 'Toggle the square list style' ),
+					tooltip: t( 'Square' ),
 					type: 'square',
 					icon: listStyleSquareIcon
 				}
@@ -85,31 +88,37 @@ export default class ListStylesUI extends Plugin {
 			styleDefinitions: [
 				{
 					label: t( 'Toggle the decimal list style' ),
+					tooltip: t( 'Decimal' ),
 					type: 'decimal',
 					icon: listStyleDecimalIcon
 				},
 				{
 					label: t( 'Toggle the decimal with leading zero list style' ),
+					tooltip: t( 'Decimal with leading zero' ),
 					type: 'decimal-leading-zero',
 					icon: listStyleDecimalWithLeadingZeroIcon
 				},
 				{
 					label: t( 'Toggle the lower–roman list style' ),
+					tooltip: t( 'Lower–roman' ),
 					type: 'lower-roman',
 					icon: listStyleLowerRomanIcon
 				},
 				{
 					label: t( 'Toggle the upper–roman list style' ),
+					tooltip: t( 'Upper-roman' ),
 					type: 'upper-roman',
 					icon: listStyleUpperRomanIcon
 				},
 				{
 					label: t( 'Toggle the lower–latin list style' ),
+					tooltip: t( 'Lower-latin' ),
 					type: 'lower-latin',
 					icon: listStyleLowerLatinIcon
 				},
 				{
 					label: t( 'Toggle the upper–latin list style' ),
+					tooltip: t( 'Upper-latin' ),
 					type: 'upper-latin',
 					icon: listStyleUpperLatinIcon
 				}
@@ -181,11 +190,12 @@ function getStyleButtonCreator( { editor, listStylesCommand, parentCommandName }
 	// @param {String} label The label of the style button.
 	// @param {String} type The type of the style button (e.g. "roman" or "circle").
 	// @param {String} icon The SVG string of an icon of the style button.
+	// @param {String} tooltip The tooltip text of the button (shorter than verbose label).
 	// @returns {module:ui/button/buttonview~ButtonView}
-	return ( { label, type, icon } ) => {
+	return ( { label, type, icon, tooltip } ) => {
 		const button = new ButtonView( locale );
 
-		button.set( { label, icon } );
+		button.set( { label, icon, tooltip } );
 
 		listStylesCommand.on( 'change:value', () => {
 			button.isOn = listStylesCommand.value === type;

+ 12 - 3
packages/ckeditor5-list/tests/liststylesui.js

@@ -148,21 +148,24 @@ describe( 'ListStylesUI', () => {
 				it( 'should bring the "disc" list style button', () => {
 					const buttonView = toolbarView.items.get( 0 );
 
-					expect( buttonView.label ).to.equal( 'Toggle the "disc" list style' );
+					expect( buttonView.label ).to.equal( 'Toggle the disc list style' );
+					expect( buttonView.tooltip ).to.equal( 'Disc' );
 					expect( buttonView.icon ).to.equal( listStyleDiscIcon );
 				} );
 
 				it( 'should bring the "circle" list style button', () => {
 					const buttonView = toolbarView.items.get( 1 );
 
-					expect( buttonView.label ).to.equal( 'Toggle the "circle" list style' );
+					expect( buttonView.label ).to.equal( 'Toggle the circle list style' );
+					expect( buttonView.tooltip ).to.equal( 'Circle' );
 					expect( buttonView.icon ).to.equal( listStyleCircleIcon );
 				} );
 
 				it( 'should bring the "square" list style button', () => {
 					const buttonView = toolbarView.items.get( 2 );
 
-					expect( buttonView.label ).to.equal( 'Toggle the "square" list style' );
+					expect( buttonView.label ).to.equal( 'Toggle the square list style' );
+					expect( buttonView.tooltip ).to.equal( 'Square' );
 					expect( buttonView.icon ).to.equal( listStyleSquareIcon );
 				} );
 
@@ -326,6 +329,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 0 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the decimal list style' );
+					expect( buttonView.tooltip ).to.equal( 'Decimal' );
 					expect( buttonView.icon ).to.equal( listStyleDecimalIcon );
 				} );
 
@@ -333,6 +337,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 1 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the decimal with leading zero list style' );
+					expect( buttonView.tooltip ).to.equal( 'Decimal with leading zero' );
 					expect( buttonView.icon ).to.equal( listStyleDecimalWithLeadingZeroIcon );
 				} );
 
@@ -340,6 +345,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 2 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the lower–roman list style' );
+					expect( buttonView.tooltip ).to.equal( 'Lower–roman' );
 					expect( buttonView.icon ).to.equal( listStyleLowerRomanIcon );
 				} );
 
@@ -347,6 +353,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 3 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the upper–roman list style' );
+					expect( buttonView.tooltip ).to.equal( 'Upper-roman' );
 					expect( buttonView.icon ).to.equal( listStyleUpperRomanIcon );
 				} );
 
@@ -354,6 +361,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 4 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the lower–latin list style' );
+					expect( buttonView.tooltip ).to.equal( 'Lower-latin' );
 					expect( buttonView.icon ).to.equal( listStyleLowerLatinIcon );
 				} );
 
@@ -361,6 +369,7 @@ describe( 'ListStylesUI', () => {
 					const buttonView = toolbarView.items.get( 5 );
 
 					expect( buttonView.label ).to.equal( 'Toggle the upper–latin list style' );
+					expect( buttonView.tooltip ).to.equal( 'Upper-latin' );
 					expect( buttonView.icon ).to.equal( listStyleUpperLatinIcon );
 				} );