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

Fix: Implement Custom Style Hook for Card component #33912

Open
wants to merge 15 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 The test code making the background red will be REMOVED. THIS IS FOR TESTING PURPOSES ONLY.

Card
Screenshot 2025-03-04 at 8 56 42 AM

CardFooter
Screenshot 2025-03-04 at 8 57 15 AM

CardHeader
Screenshot 2025-03-04 at 8 57 48 AM

CardPreview
Screenshot 2025-03-04 at 9 00 49 AM
Note: Changed padding in addition to backgroundColor because preview image covered the entire background so users were unable to see the red.

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

@terynk terynk marked this pull request as ready for review March 4, 2025 17:16
@terynk terynk requested review from marcosmoura and a team as code owners March 4, 2025 17:16
@terynk terynk changed the title Card component custom style hook unstable Fix: Implement Custom Style Hook for Card component Mar 4, 2025
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