Skip to content

fix: remove hardcoded font-size from SvgIcon to allow responsive parent sizing#4069

Open
ravitejapioneerblaze-code wants to merge 3 commits into
CMSgov:mainfrom
ravitejapioneerblaze-code:fix/svg-icon-fontsize-overwrite-3667
Open

fix: remove hardcoded font-size from SvgIcon to allow responsive parent sizing#4069
ravitejapioneerblaze-code wants to merge 3 commits into
CMSgov:mainfrom
ravitejapioneerblaze-code:fix/svg-icon-fontsize-overwrite-3667

Conversation

@ravitejapioneerblaze-code
Copy link
Copy Markdown

Summary

Removed hardcoded font-size: var(--font-size-base) from the
.ds-c-icon class so SVG icons scale responsively with their
parent container's font-size instead of being fixed at the base size.

Problem

The font-size property on .ds-c-icon was overriding the parent
container's font-size, preventing icons from growing or shrinking
based on button size (e.g. small vs large buttons on mobile/desktop).

Solution

Removed font-size: var(--font-size-base) from _SvgIcon.scss.
Icons now inherit font-size from their parent container, making
them fully responsive.

Changes

  • Removed font-size from .ds-c-icon in _SvgIcon.scss
  • Added automated tests in SvgIcon.test.tsx to verify:
    • No hardcoded font-size overrides
    • Icon renders with correct responsive class

Testing

  • All 10 tests passing
  • Run: "npm run test:unit -- --testPathPattern=SvgIcon --no-coverage"

References

  • Closes 3667

@ravitejapioneerblaze-code
Copy link
Copy Markdown
Author

Hi team, I'm an external contributor and would appreciate if a maintainer could endorse this PR to allow the CI checks to run. Happy to make any adjustments needed. Thank you!

@jack-ryan-nava-pbc
Copy link
Copy Markdown
Collaborator

Hi! Thanks for contributing. Not to be rude but I see the Github account associated with this use is only 3 days old. Is there actually a human being associated with this account or is this being opened by an agent or bot?

Copy link
Copy Markdown
Collaborator

@jack-ryan-nava-pbc jack-ryan-nava-pbc left a comment

Choose a reason for hiding this comment

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

I think the dependency changes are out of scope for this fix. Please revert those changes.

Comment thread package.json Outdated
"@storybook/react": "8.6.17",
"@storybook/react-webpack5": "8.6.17",
"@storybook/theming": "8.6.1",
"@testing-library/dom": "^10.4.1",
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Why did you update this dependency?

Comment thread package.json Outdated
"webpack-bundle-analyzer": "^4.10.2",
"webpack-stream": "^7.0.0",
"yargs": "^17.7.2"
},
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Why are these dependencies updated?

@ravitejapioneerblaze-code
Copy link
Copy Markdown
Author

Hi! Thanks for contributing. Not to be rude but I see the Github account associated with this use is only 3 days old. Is there actually a human being associated with this account or is this being opened by an agent or bot?

Hi, Firstly Thanks for the Review comments. Yes you got a valid question here, i can totally understand :), Nothing much to worry here- I am a Human with nearly 15 years of IT Experience, I have created this account with my new gmail recently. I can assure this account will be consistent from now on. Happy to Contribute.

@ravitejapioneerblaze-code
Copy link
Copy Markdown
Author

Thanks for the review! These dependency changes were unintentional —
added locally to resolve a test runner issue during development.
Reverted now.

@jack-ryan-nava-pbc
Copy link
Copy Markdown
Collaborator

not a wolf

@jack-ryan-nava-pbc
Copy link
Copy Markdown
Collaborator

@ravitejapioneerblaze-code can you resolve the conflicts?

@ravitejapioneerblaze-code ravitejapioneerblaze-code force-pushed the fix/svg-icon-fontsize-overwrite-3667 branch from 6ad5dbf to 6c5a435 Compare May 28, 2026 19:33
@ravitejapioneerblaze-code
Copy link
Copy Markdown
Author

ravitejapioneerblaze-code commented May 28, 2026

Conflicts resolved and branch updated with upstream main. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants