Add new argument for a modifier to the highlight class

assets/admin/tour/helper.js

@@ -23,13 +23,17 @@ export function performStepAction( index, steps ) {
 /**
  * Highlights the elements with a border.
  *
- * @param {Array} selectors An array of selectors to highlight.
+ * @param {Array}  selectors An array of selectors to highlight.
+ * @param {string} modifier  A modifier to add to the highlight class.
  */
-export function highlightElementsWithBorders( selectors ) {
+export function highlightElementsWithBorders( selectors, modifier = '' ) {
+	const modifierSuffix = modifier ? '--' + modifier : '';
+	const className = HIGHLIGHT_CLASS + modifierSuffix;
+
 	selectors.forEach( function ( selector ) {
 		const element = document.querySelector( selector );
 		if ( element ) {
-			element.classList.add( HIGHLIGHT_CLASS );
+			element.classList.add( className );
 		}
 	} );
 }

assets/admin/tour/helper.test.js

@@ -83,6 +83,18 @@ describe( 'highlightElementsWithBorders', () => {
 			expect( document.querySelector( selector ) ).toBeNull();
 		} );
 	} );
+
+	it( 'should add highlight class to the element with a modifier', () => {
+		const element = document.createElement( 'div' );
+
+		mockQuerySelector.mockImplementation( () => {
+			return element;
+		} );
+
+		highlightElementsWithBorders( [ 'div' ], 'modifier' );
+
+		expect( element.className ).toBe( HIGHLIGHT_CLASS + '--modifier' );
+	} );
 } );
 
 describe( 'removeHighlightClasses', () => {