feat(search): ✨ add clear button to search box

resources/skins.citizen.preferences/skins.citizen.preferences.js

@@ -388,7 +388,7 @@ function initPref( window ) {
 			container.classList.add( CLASS, 'citizen-header__item' );
 			button.id = CLASS + '-toggle';
 
-			button.classList.add( CLASS + '__button', 'citizen-header__button' );
+			button.classList.add( CLASS + '__button', 'citizen-header__button', 'citizen-button' );
 			button.setAttribute( 'title', mw.message( 'preferences' ).text() );
 			button.setAttribute( 'aria-label', mw.message( 'preferences' ).text() );
 			button.setAttribute( 'aria-controls', CLASS + '-panel' );

resources/skins.citizen.preferences/skins.citizen.preferences.less

@@ -3,12 +3,6 @@
 
 .citizen-pref {
 	&__button {
-		padding: 0;
-		border: 0;
-		appearance: none;
-		background: transparent;
-		cursor: pointer;
-
 		&[ aria-expanded='true' ] {
 			background-color: var( --background-color-primary--active );
 		}

resources/skins.citizen.scripts/search.js

@@ -147,6 +147,37 @@ function bindExpandOnSlash( window, checkbox, input ) {
 	window.addEventListener( 'keydown', onExpandOnSlash, true );
 }
 
+/**
+ * Add clear button to search field when there are input value
+ *
+ * @param {HTMLInputElement} input
+ * @return {void}
+ */
+function renderSearchClearButton( input ) {
+	const
+		clearButton = document.createElement( 'button' ),
+		clearIcon = document.createElement( 'span' );
+
+	clearButton.classList.add( 'citizen-search__clear', 'citizen-search__formButton', 'citizen-button' );
+	clearIcon.classList.add( 'citizen-ui-icon', 'mw-ui-icon-wikimedia-clear' );
+	clearButton.append( clearIcon );
+
+	clearButton.addEventListener( 'click', ( event ) => {
+		event.preventDefault();
+		clearButton.remove();
+		input.value = '';
+		input.focus();
+	} );
+
+	input.addEventListener( 'input', ( event ) => {
+		if ( event.target.value === '' ) {
+			clearButton.remove();
+		} else {
+			event.target.after( clearButton );
+		}
+	} );
+}
+
 /**
  * @param {Window} window
  * @return {void}
@@ -173,6 +204,7 @@ function initSearch( window ) {
 		if ( isPrimarySearch ) {
 			const checkbox = document.getElementById( 'citizen-search__checkbox' );
 			bindExpandOnSlash( window, checkbox, input );
+			renderSearchClearButton( input );
 			// Focus when toggled
 			checkbox.addEventListener( 'input', () => {
 				focusOnChecked( checkbox, input );

resources/skins.citizen.styles/common/common.less

@@ -83,6 +83,14 @@ td {
 	white-space: nowrap;
 }
 
+.citizen-button {
+	padding: 0;
+	border: 0;
+	appearance: none;
+	background: transparent;
+	cursor: pointer;
+}
+
 /*
  * Content
 */

resources/skins.citizen.styles/components/Search.less

@@ -27,12 +27,14 @@
 		}
 	}
 
-	&__random {
+	&__formButton {
 		border-radius: var( --border-radius--small );
+		transition: var( --transition-hover );
+		transition-property: background;
 
 		.citizen-ui-icon::before {
 			transition: var( --transition-hover );
-			transition-property: transform;
+			transition-property: opacity;
 		}
 
 		&:hover {
@@ -40,7 +42,6 @@
 
 			.citizen-ui-icon::before {
 				opacity: var( --opacity-icon-base--hover );
-				transform: rotate( 30deg );
 			}
 		}
 
@@ -53,6 +54,24 @@
 		}
 	}
 
+	&__clear {
+		.citizen-ui-icon::before {
+			background-size: 0.875rem; // Align with text size
+		}
+	}
+
+	&__random {
+		.citizen-ui-icon::before {
+			transition-property: opacity, transform;
+		}
+
+		&:hover {
+			.citizen-ui-icon::before {
+				transform: rotate( 30deg );
+			}
+		}
+	}
+
 	&__form {
 		display: flex;
 
@@ -80,6 +99,11 @@
 			// border-color: var( --color-primary );
 			// box-shadow: inset 0 0 0 1px var( --color-primary );
 		}
+
+		// Remove browser native clear all button in search field
+		&::-webkit-search-cancel-button {
+			-webkit-appearance: none;
+		}
 	}
 }
 

skin.json

@@ -237,6 +237,7 @@
 				"articleSearch",
 				"articlesSearch",
 				"block",
+				"clear",
 				"collapse",
 				"database",
 				"die",

templates/Search.mustache

@@ -24,7 +24,7 @@
 			</label>
 			{{{html-input}}}
 			<a
-				class="citizen-search__random"
+				class="citizen-search__random citizen-search__formButton"
 				href="{{html-random-href}}"
 				title="{{msg-randompage}}">
 				<span class="citizen-ui-icon mw-ui-icon-wikimedia-die"></span>