Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Jan 16, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1443af4
Masterbar: Add a label for the Reader icon.
spsiddarthan Jan 16, 2025
b403d2d
Remove comment
spsiddarthan Jan 16, 2025
f8333ae
Hide the label on mobile screens.
spsiddarthan Jan 16, 2025
8f765f6
Added translation.
spsiddarthan Jan 16, 2025
84bc6bd
Make <span> a child component of Item.
spsiddarthan Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion client/layout/masterbar/logged-in.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@holdercp 👋 Flagging the incorrect use of the class prop — in React, the className property should be used instead. This is also causing an error in the browser console: Warning: Invalid DOM property 'class'., which looks like it got missed during the PR review.

I'm going to address this as part of #98510, I'm going to add the folks who worked on this PR as reviewers. Thank you in advance!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ciampo Ah, totally slipped by me. Thank you!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for catching that @ciampo - I totally missed it, I see the PR is in draft, I am happy to make a different PR as well to fix the warning in a few hours

Copy link
Contributor Author

@spsiddarthan spsiddarthan Jan 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought I will make a quick PR to get rid of the warning, @ciampo, I see you're improving a few other things as well in your PR, happy to test those out if they're still necessary.

{ translate( 'Reader' ) }
</span>
</Item>
);
}

Expand Down
4 changes: 4 additions & 0 deletions client/layout/masterbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -845,6 +845,10 @@ body.is-mobile-app-view {
}
}

.masterbar__item-reader-label {
padding-left: 6px;
}

.masterbar-cart-button {
svg {
overflow: visible;
Expand Down
Loading