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

Card component custom style hook unstable #33912

Draft
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

terynk
Copy link

@terynk terynk commented Feb 26, 2025

Old Behavior

Users were unable to apply Custom Style Hooks to Card, CardHeader, CardFooter, and CardPreview.

New Behavior

Users can now apply Custom Style Hooks to Card, CardHeader, CardFooter, and CardPreview. The screen shots below show test cases for each component that demonstrate the ability to apply Custom Hooks. In each Custom Hook, the backgroundColor of the component was updated to tokens.colorNeutralBackground3. The test code will be removed but can be found in commits 03817b9 and 65d20ca. The test code applies Custom Style Hooks to the Default styling of each component.

Test Screenshots

Default styling can be found under each subpage on the Fluent V9 Website

Card
Screenshot 2025-02-26 at 4 47 29 PM

CardFooter
Screenshot 2025-02-26 at 4 57 09 PM

CardHeader
Screenshot 2025-02-26 at 4 59 57 PM

CardPreview
Screenshot 2025-02-27 at 9 21 25 AM

Copy link

Pull request demo site: URL

Co-authored-by: Owen Campbell <ocampbell95@gmail.com>
Copy link

github-actions bot commented Feb 26, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-card
Card - All
101.73 kB
28.745 kB
102.031 kB
28.833 kB
301 B
88 B
react-card
Card
94.504 kB
26.924 kB
94.677 kB
26.996 kB
173 B
72 B
react-card
CardFooter
14.381 kB
5.799 kB
14.56 kB
5.874 kB
179 B
75 B
react-card
CardHeader
16.914 kB
6.677 kB
17.093 kB
6.745 kB
179 B
68 B
react-card
CardPreview
14.446 kB
5.929 kB
14.626 kB
6 kB
180 B
71 B
react-components
react-components: entire library
1.174 MB
293.93 kB
1.174 MB
293.942 kB
147 B
12 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.638 kB
20.24 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.271 kB
65.211 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
🤖 This report was generated against 365204e3b2f4f4d8f9534ce1598ac937a10beb04

@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "fix custom style hook for Card, CardFooter, CardHeader, CardPreview",
Copy link
Contributor

Choose a reason for hiding this comment

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

double check this format matches the previous change logs.


const useCardStyle = makeStyles({
root: {
backgroundColor: tokens.colorNeutralBackground3,
Copy link
Contributor

Choose a reason for hiding this comment

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

simplify these styles - just set than background to 'red' to ensure the styles pump through.

Then make it clear in the PR description that we'll remove it.

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.

4 participants