Masterbar: Add a label for the Reader icon. (#98479)

* Masterbar: Add a label for the Reader icon. * Remove comment * Hide the label on mobile screens. * Added translation. * Make <span> a child component of Item.
Automattic · Jan 16, 2025 · 06fa126 · 06fa126
1 parent 58f2dfa
commit 06fa126
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
@@ -487,7 +487,11 @@ class MasterbarLoggedIn extends Component {
 				tooltip={ translate( 'Read the blogs and topics you follow' ) }
 				preloadSection={ this.preloadReader }
 				hasGlobalBorderStyle
-			/>
+			>
+				<span class="masterbar__icon-label masterbar__item-reader-label">
+					{ translate( 'Reader' ) }
+				</span>
+			</Item>
 		);
 	}
 

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -845,6 +845,10 @@ body.is-mobile-app-view {
 	}
 }
 
+.masterbar__item-reader-label {
+	padding-left: 6px;
+}
+
 .masterbar-cart-button {
 	svg {
 		overflow: visible;