Skip to content

[DevTools] Larger panel buttons and center #34619

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

Merged
merged 1 commit into from
Sep 28, 2025
+1 −1
Merged

[DevTools] Larger panel buttons and center #34619

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ type Props = {
type: IconType,
};

const panelIcons = '0 -960 960 820';
const panelIcons = '96 -864 768 768';
Copy link
Collaborator

@eps1lon eps1lon Sep 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

The AI model I used told me 144 -816 672 672 is the viewbox that fits the path perfectly which I used in #34517.

The original viewbox was directly from the Material icons which didn't fit the path perfectly so it became off-center depending on the font size.

Did you check the alignment when increasing/decreasing base browser font size via settings?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yea. Seems fine. The font size doesn't matter. Doesn't change. That's up to the button to align itself. If the button comes out of alignment then that's a different issue.

But I mean alignment of the rest of the row is messed up because things like the checkboxes should be buttons etc.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yea. Seems fine. The font size doesn't matter. Doesn't change. That's up to the button to align itself. If the button comes out of alignment then that's a different issue.

Well, it does matter if the path is not centered in viewbox. But seems like it still is.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yea I'm not sure where the 820 box came from because all the materialize design ones have a 960 height for the 24px versions which puts them center:

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%231f1f1f

Then I just applied equal sizing to make it a little larger while still always fitting in our viewbox. Seems to work well for all of them.

Really it's weird that we use 24px basis icons and then resize them to 16px. We should probably use 16px basis icon to begin with or maybe use 24px icons everywhere without having to scale them and fix the padding of the buttons instead.

export default function ButtonIcon({className = '', type}: Props): React.Node {
let pathData = null;
let viewBox = '0 0 24 24';
Expand Down
Loading