Fix modifier removal

assets/admin/tour/helper.js

@@ -27,13 +27,14 @@ export function performStepAction( index, steps ) {
  * @param {string} modifier  A modifier to add to the highlight class.
  */
 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( className );
+			element.classList.add( HIGHLIGHT_CLASS );
+
+			if ( modifier ) {
+				element.classList.add( HIGHLIGHT_CLASS + '--' + modifier );
+			}
 		}
 	} );
 }
@@ -46,7 +47,12 @@ export function removeHighlightClasses() {
 		'.sensei-tour-highlight'
 	);
 	highlightedElements.forEach( function ( element ) {
-		element.classList.remove( HIGHLIGHT_CLASS );
+		// Remove class and modifiers.
+		[ ...element.classList ].forEach( ( className ) => {
+			if ( className.startsWith( HIGHLIGHT_CLASS ) ) {
+				element.classList.remove( className );
+			}
+		} );
 	} );
 }
 

assets/admin/tour/helper.test.js

@@ -93,7 +93,9 @@ describe( 'highlightElementsWithBorders', () => {
 
 		highlightElementsWithBorders( [ 'div' ], 'modifier' );
 
-		expect( element.className ).toBe( HIGHLIGHT_CLASS + '--modifier' );
+		expect( element.className ).toBe(
+			`${ HIGHLIGHT_CLASS } ${ HIGHLIGHT_CLASS }--modifier`
+		);
 	} );
 } );
 
@@ -149,6 +151,30 @@ describe( 'removeHighlightClasses', () => {
 			);
 		} );
 	} );
+
+	it( 'should add remove modifier classNames', () => {
+		const mockedElement = document.createElement( 'div' );
+
+		mockedElement.classList.add(
+			'any-other-class',
+			HIGHLIGHT_CLASS,
+			HIGHLIGHT_CLASS + '--modifier'
+		);
+
+		mockQuerySelectorAll.mockReturnValue( [ mockedElement ] );
+
+		removeHighlightClasses();
+
+		expect( mockedElement.classList.contains( HIGHLIGHT_CLASS ) ).toBe(
+			false
+		);
+		expect(
+			mockedElement.classList.contains( HIGHLIGHT_CLASS + '--modifier' )
+		).toBe( false );
+		expect( mockedElement.classList.contains( 'any-other-class' ) ).toBe(
+			true
+		);
+	} );
 } );
 
 describe( 'performStepActionsAsync', () => {

assets/admin/tour/style.scss

@@ -19,8 +19,8 @@ $border-color: var(--wp--preset--color--primary, #46c8ad );
 	outline: 2px solid $border-color !important;
 	box-shadow: 0 0 $shadow-width $border-color !important;
 
-	&--inset {
-		outline: none;
+	&.sensei-tour-highlight--inset {
+		outline: none !important;
 		box-shadow: inset 0 0 $shadow-width $border-color !important;;
 	}
 }