Skip to content

99 mweb component for single stats #200

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.

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 12 commits into from
Aug 7, 2025
Merged

Conversation

12-aryan
Copy link
Collaborator

@12-aryan 12-aryan commented Aug 6, 2025

Summary

Added mweb support for stat cards with responsive tokens


Affected Scope

  • Design System Component (@blend/*)
  • Documentation (apps/docs)
  • Tests or Configuration
  • Tools / Scripts
  • Backend / API
  • Refactor / Cleanup

Changes Made

Added mweb support for stat cards with responsive tokens
Added maxDropDown height for dropdown input
Added inline support for select and multiselect


How to Test


Screenshots (if applicable)

| Before | After |
|

Screen.Recording.2025-08-06.at.9.00.34.PM.mov

| ----- |
|

Screen.Recording.2025-08-07.at.3.27.03.PM.mov

|


Related Issues

Closes #99
#201
#202

@12-aryan 12-aryan linked an issue Aug 6, 2025 that may be closed by this pull request
6 tasks
titleIcon: {
width: foundationToken.unit[20],
height: foundationToken.unit[20],
marginBottom: foundationToken.unit[16],
Copy link
Collaborator

Choose a reason for hiding this comment

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

same as above

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@fractaljs Done

fontSize: foundationToken.font.size.body.md.fontSize,
fontWeight: foundationToken.font.weight[500],
helpIcon: {
width: '16px',
Copy link
Collaborator

Choose a reason for hiding this comment

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

Dont use hardcoded values, refer to FOUNDATION_TOKENS

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@fractaljs Done

marginLeft: foundationToken.unit[8],
arrow: {
width: '14px',
height: '14px',
Copy link
Collaborator

Choose a reason for hiding this comment

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

same as above

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done

line: {
strokeWidth: 2,
activeDot: {
radius: 4,
Copy link
Collaborator

Choose a reason for hiding this comment

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

hardcoded values

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

fontWeight: foundationToken.font.weight[500],
color: foundationToken.colors.gray[400],
bar: {
radius: [2, 2, 0, 0],
Copy link
Collaborator

Choose a reason for hiding this comment

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

hardcoded value use foundationToken like

${foundationTokens.units[2]}px ${foundationTokens.units[2]}px 0 0

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

arrow: {
width: '14px',
height: '14px',
marginRight: foundationToken.unit[2],
Copy link
Collaborator

Choose a reason for hiding this comment

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

hardcoded values

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

},
bar: {
radius: [2, 2, 0, 0],
Copy link
Collaborator

Choose a reason for hiding this comment

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

same as above

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

@12-aryan 12-aryan mentioned this pull request Aug 7, 2025
6 tasks
line: {
strokeWidth: toPixels(foundationToken.unit[2]),
activeDot: {
radius: toPixels(foundationToken.unit[4]),
Copy link
Collaborator

Choose a reason for hiding this comment

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

I am not sure if this is needed, type casting is enough here. If not we would have to use toPixels() everywhere -- which clearly we are not doing.

Copy link
Collaborator Author

@12-aryan 12-aryan Aug 7, 2025

Choose a reason for hiding this comment

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

done

toPixels(foundationToken.unit[2]),
toPixels(foundationToken.unit[0]),
toPixels(foundationToken.unit[0]),
],
Copy link
Collaborator

Choose a reason for hiding this comment

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

Same

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

done

@dkrai04 dkrai04 merged commit 759f40e into dev Aug 7, 2025
1 check passed
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.

Mweb component for Single Stats
3 participants