Improve and standardize title styling of CustomCard

[kruulik]

Description Of Changes

Extend the CustomCard HOC with new props for title rendering:

• showTitleDivider (boolean) — toggle the header/body border
• titleHeading (boolean) — wrap the title in <Typography.Title level={5}> and collapse header padding so it flows seamlessly into the body

Also adds CSS overrides in .titleHeading to handle Ant Design's conditional tab padding rules, and changes .inlineHeader align-items from center to flex-start for better tab alignment.

Code Changes

• clients/fidesui/src/hoc/CustomCard.tsx — add titleFont, showTitleDivider, titleHeading props with style/class logic
• clients/fidesui/src/hoc/CustomCard.module.scss — add .titleHeading class with tab padding overrides; change .inlineHeader align-items to flex-start
• clients/fidesui/src/hoc/CustomCard.stories.tsx — new storybook file with basic prop stories, side-by-side comparison stories, and tab story

Steps to Confirm

1. Run fidesui Storybook: cd clients/fidesui && npm run storybook
2. Navigate to Data Display / Card
3. Verify Default, MonoTitle, NoDivider, ClassicHeader stories render correctly
4. Verify Compare: * stories show visually similar output between existing and new approaches
5. Verify WithTabs story shows inline title + tabs with no extra padding

Pre-Merge Checklist

• All CI checks pass
• Visually reviewed in Storybook
• No regressions in existing card usage

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Mar 16, 2026 5:46pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Mar 16, 2026 5:46pm

[greptile-apps]

Greptile Summary

This PR refactors the CustomCard HOC to standardize title rendering: string titles are automatically wrapped in <Typography.Title level={5}> with collapsed header padding, the header divider is always removed, and tabs are always rendered inline (removing the opt-in headerLayout prop). A new Storybook file provides visual comparison stories.

• Breaking change: The headerLayout prop was removed but StatCard.stories.tsx still references it, which will cause a TypeScript error
• Visual regression risk: borderBottom: "none" is now applied unconditionally to all Card headers, affecting existing consumers that pass JSX titles (e.g., ConfidenceCard, ConfigurationCard) which previously had the default Ant Design divider
• PR description mismatch: The description mentions showTitleDivider, titleHeading, and titleFont props that do not exist in the actual implementation
• CSS duplication: .inlineHeader and .stringTitle share identical !important padding overrides that could be extracted into a shared mixin

Confidence Score: 2/5

• This PR has a TypeScript compilation error in an existing story file and risks visual regressions for existing Card consumers due to unconditional divider removal.
• Score of 2 reflects: (1) a confirmed TypeScript error from the removed headerLayout prop still used in StatCard.stories.tsx, (2) unconditional borderBottom: "none" applied to all titled Cards which is a silent visual regression for JSX-title consumers like ConfidenceCard and ConfigurationCard, and (3) the PR description being out of sync with the actual implementation.
• Pay close attention to clients/fidesui/src/hoc/CustomCard.tsx — the unconditional header divider removal and missing headerLayout migration affect multiple downstream consumers.

Important Files Changed

Filename	Overview
clients/fidesui/src/hoc/CustomCard.tsx	Removes headerLayout prop (breaking change for StatCard.stories.tsx), always removes header divider (visual regression risk for JSX-title consumers), and auto-wraps string titles in Typography.Title.
clients/fidesui/src/hoc/CustomCard.module.scss	Adds .stringTitle class for tab padding overrides, changes .inlineHeader alignment to flex-start, and contains duplicated CSS rules between the two classes.
clients/fidesui/src/hoc/CustomCard.stories.tsx	New Storybook file with well-structured stories for the Card component, including comparison stories and tab examples.

Comments Outside Diff (1)

1. clients/fidesui/src/hoc/CustomCard.module.scss, line 26-32 (link)

   Duplicated CSS rules between .inlineHeader and .stringTitle

   Lines 26–32 in .inlineHeader duplicate the same padding-top: 0 !important overrides found in .stringTitle (lines 42–47). Since both classes can be applied simultaneously (a string title with tabs), consider extracting the shared !important overrides into a common class or mixin to reduce duplication.

   // Shared override for Ant's conditional tab padding
   @mixin reset-tab-title-padding {
     :global(.ant-card-head .ant-card-head-title),
     :global(.ant-card-head .ant-card-extra) {
       padding-top: 0 !important;
     }
   }

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

_{Last reviewed commit: 5606047}

[gilluminate]

LGTM! Just need to fix that lint error

[kruulik]

@gilluminate error resolved!