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.

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

[Alert] Add support for CSS vars #32624

Merged
merged 6 commits into from Jun 22, 2022
Merged

[Alert] Add support for CSS vars #32624

merged 6 commits into from Jun 22, 2022

Conversation

haneenmahd
Copy link
Contributor

Add support for CSS variables for the component Alert (#32049).

@mui-bot
Copy link

mui-bot commented May 4, 2022

Details of bundle changes

@material-ui/core: parsed: +0.55% , gzip: +0.29%
@material-ui/lab: parsed: +0.10% , gzip: +0.06%

Generated by 🚫 dangerJS against 0929fad

@danilo-leal danilo-leal added component: alert This is the name of the generic UI component, not the React module! new feature New feature or request labels May 5, 2022
@siriwatknp siriwatknp added the on hold There is a blocker, we need to wait label May 5, 2022
@siriwatknp
Copy link
Member

The Alert needs to wait for a discussion about how to deal with darken(...), lighten(...).

@haneenmahd
Copy link
Contributor Author

The Alert needs to wait for a discussion about how to deal with darken(...), lighten(...).

I just changed the needed, and was waiting for the info about it

@mnajdova
Copy link
Member

@haneenmahd we have a resolution for the problem in #32049 (comment) Feel free to continue with the effort.

Comment on lines +134 to +149
errorColor: string;
infoColor: string;
successColor: string;
warningColor: string;
errorFilledBg: string;
infoFilledBg: string;
successFilledBg: string;
warningFilledBg: string;
errorStandardBg: string;
infoStandardBg: string;
successStandardBg: string;
warningStandardBg: string;
errorIconColor: string;
infoIconColor: string;
successIconColor: string;
warningIconColor: string;
Copy link
Member

Choose a reason for hiding this comment

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

@mnajdova I could not see other ways to reduce the number of tokens if we want to keep the same behavior. 😢

Copy link
Member

Choose a reason for hiding this comment

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

Would be tricky if people add custom colors here :\ Should we maybe create these based on the PaletteOptions type?

Copy link
Member

Choose a reason for hiding this comment

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

I don't think we should go that far for now. There is a trade-off because some people might not want the autogenerated variables (increase in bundle size) and we need to create more APIs to let them exclude things that they don't want.

At this point, I think we can leave the new custom palette effort to the developers and make sure that the docs are clear and comprehensive.

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 Last PR for CSS variables support. I'm pumped!

@haneenmahd
Copy link
Contributor Author

sorry, for asking but what exactly needed to be changed RN?

@siriwatknp
Copy link
Member

siriwatknp commented Jun 19, 2022

sorry, for asking but what exactly needed to be changed RN?

I have updated the implementation to follow #32835. In summary, we move the color manipulation from runtime to build time so that it does not cause the dark mode to flicker. Waiting for another review from @mnajdova

@siriwatknp siriwatknp removed the on hold There is a blocker, we need to wait label Jun 21, 2022
@siriwatknp siriwatknp requested a review from mnajdova June 21, 2022 02:32
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

Overall looks good, left one comment on the types.

@siriwatknp siriwatknp merged commit 76e2ef6 into mui:master Jun 22, 2022
@haneenmahd haneenmahd deleted the css-vars-alert branch June 22, 2022 16:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: alert This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants