Support icon sizing according to 'size' prop in blocks button component

[kalashshah]

Pull Request Template

Ticket Number

• 1690

Description

Currently icons inside buttons component depend upon props passed from outside to handle the icon sizing resulting in an irregularity throughout the Dapp.

Problem/Feature:

• Handle icon sizing internally according to the design.

Type of Change

• [x] Other (please describe): css changes

Checklist

• [x] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [x] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [x] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Icons take default size when passed, causing breaking styling.

  

• After: Icon sizes depend upon the size prop passed and take sizes accordingly.

  

Additional Context

Review & Approvals

• [x] Self-review completed
• [ ] Code review by at least one other engineer
• [x] Documentation updates if applicable

Notes

[github-actions[bot]]

• In the getButtonVariantStyles function, the import for ThemeMode and ButtonVariant seems to be incorrect. It should be imported from a file named Button.types, but it is currently imported from ./Button.types.

• In the getButtonVariantStyles function, there is a typo in the import for ThemeMode from 'blocks/Blocks.types'. It should be 'blocks/types' instead of 'blocks/Blocks.types'.

• In the getButtonSizeStyles function, the property leading-trim and text-edge are not valid CSS properties. They might be custom properties specific to the stylesheet used, but they should be verified.

• The getButtonSizeStyles function seems to be handling the size prop correctly, but it's advisable to check if all the CSS values and calculations align with the design requirements.

• Overall, the code structure and logic seem to be correct. Double-check the imports, typos, and custom CSS properties for accuracy.

Therefore, the final review comment would be: 'All looks good.'

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-11 12:39 UTC

[github-actions[bot]]

All looks good.