Custom Typography HOC wrapper for Ant by gilluminate · Pull Request #6062 · ethyca/fides

gilluminate · 2025-04-17T22:13:27Z

Description Of Changes

Introduces a new custom Typography HOC in FidesUI that wraps Ant Design's Typography component, adding support for custom text sizes and heading sizes.

Code Changes

Added new CustomTypography HOC in FidesUI with support for custom text sizes (sm, default, lg) and heading sizes (h1-h5)
Added corresponding SCSS styles for typography size customization as well as custom paragraph margin handling.
Updated FidesUI exports to use the new CustomTypography component
Updated theme configuration with new typography-related token values (H1, H2, H3, etc)
Added Typography showcase section in the Ant POC page
Migrated PageHeader component from Chakra's Heading to Ant's Typography.Title (since that's used in the Ant POC page anyway)

Steps to Confirm

Check the Ant POC page to verify typography styles and variants

Pre-Merge Checklist

vercel · 2025-04-17T22:13:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2025 5:03pm
fides-privacy-center	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 18, 2025 5:03pm

gilluminate · 2025-04-17T23:08:36Z

    <Flex justify="space-between">
      {typeof heading === "string" ? (
-        <Heading
+        <Title


Since this component shows up in the Ant POC, I chose to migrate here. We'll save full migration for later

Good choice for the migration! I did find that the page titles changed from bold to semibold.
I tried switching it to 700 and the page titles stay consistent, but then the H2s, H3s become heavier than we had before. IMO the titles look better with 600 font-weight, but we ask for design input.

update: design said 600 font weight is good!

gilluminate · 2025-04-17T23:08:54Z

      <Content className="overflow-auto px-10 py-6">
        <PageHeader heading="Ant Design Proof of Concept" />
-        <Row gutter={16}>
+        <Row gutter={16} className="mt-6">


The header change made this necessary

gilluminate · 2025-04-17T23:09:28Z

+              variant="borderless"
+              className="h-full"
+            >
+              <Typography>


Note that this creates an <article> container when rendered

lucanovera

Thanks for unblocking us with the typography issues. The changes look good, I appreciate the flexibility of overriding styles while keeping semantics the same.
I updated a couple uses of h5 that now should be h3's and added back the margin.
I also found that the title font weight changes from 700 to 600 while switching the page title from chakra to ant, let's ask for design feedback.

Other than that, all the code changes look good and found no other issues while testing so I'll leave my approve here. 🚀

lucanovera · 2025-04-18T13:32:46Z

-        >
-          {title}
-        </Typography.Title>
+        <Typography.Title level={3}>{title}</Typography.Title>


I pushed this change to change the title level to 3 and removed unnecessary styles.

lucanovera · 2025-04-18T13:42:11Z


 import { NextBreadcrumb, NextBreadcrumbProps } from "./nav/NextBreadcrumb";

+const { Title } = Typography;


Ant uses this kind of destructuring in their examples, and it's nice using <Title> instead of Typography.Something every time you need to put a text.
But at the same time, do we want to have to add this line every single time we want to use a typography? Seems to me like the kind of thing that would get annoying after a while.

What do you think about exporting Title, Paragraph, Text, etc directly from fidesui? Can you see any downsides of doing that?

I'd be in favor of this approach also, provided there isn't an issue with it I'm missing.

Love the idea. I'll make that update

lucanovera · 2025-04-18T13:48:36Z

    <Flex justify="space-between">
      {typeof heading === "string" ? (
-        <Heading
+        <Title


Good choice for the migration! I did find that the page titles changed from bold to semibold.
I tried switching it to 700 and the page titles stay consistent, but then the H2s, H3s become heavier than we had before. IMO the titles look better with 600 font-weight, but we ask for design input.

lucanovera · 2025-04-18T13:49:11Z

      data-testid="custom-fields-form"
    >
-      <Typography.Title level={5}>Custom fields</Typography.Title>
+      <div className="mb-2">


I added this change to bring this title down to a h3 and added the margin back.

lucanovera · 2025-04-18T13:49:16Z

      >
        <div className="mb-4">
-          <Typography.Title level={5}>Details</Typography.Title>
+          <div className="mb-2">


I added this change to bring this title down to a h3 and added the margin back.

lucanovera · 2025-04-18T13:50:53Z

+      fontSizeXL: 24,
+      fontSizeLG: 18,
+      fontSizeSM: 12,
+      titleMarginBottom: 0,


In case you want to test title font weights, the token is fontWeightStrong: 700,

gilluminate · 2025-04-18T15:16:42Z

+}: React.ComponentProps<typeof Typography.Paragraph> &
+  CustomTypographyTextProps) => (
+  <Typography.Paragraph
+    role="paragraph"


@lucanovera @jpople I forgot to call this out before. There's no real way to change the rendered tag in the HOC, and on top of that, having it be a div was a choice made to better support the other variants like editable, etc. So instead of trying to wrangle all of that, I simply gave it the proper a11y role here and moved on.

@gilluminate that's a good workaround for accessibility! With admin-ui we don't have to worry about SEO so I think this it okay.

True! But also, what's good for a11y is good for SEO ;)

gilluminate · 2025-04-18T15:48:20Z

@@ -1,4 +1,4 @@
-import { AntFlex as Flex, Heading } from "fidesui";
+import { AntFlex as Flex, AntTitle as Title } from "fidesui";


@lucanovera @jpople updated!

cypress · 2025-04-18T17:35:21Z

fides Run #12836

Run Properties: Passed #12836 • 5e744725d1: Custom Typography HOC wrapper for Ant (#6062)

Project	`fides`
Branch Review	`main`
Run status	`Passed #12836`
Run duration	`00m 51s`
Commit	`5e744725d1: Custom Typography HOC wrapper for Ant (#6062)`
Committer	`Jason Gill`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`0`
Skipped	`0`
Passing	`5`
View all changes introduced in this branch ↗︎

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 22:16 View deployment

gilluminate changed the title ~~Gill/lj 692/typography~~ Custom Typography HOC wrapper for Ant Typography Apr 17, 2025

gilluminate changed the title ~~Custom Typography HOC wrapper for Ant Typography~~ Custom Typography HOC wrapper for Ant Apr 17, 2025

gilluminate force-pushed the gill/LJ-692/typography branch from 318db87 to 2645ff4 Compare April 17, 2025 22:17

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 22:21 View deployment

vercel Bot deployed to Preview – fides-plus-nightly April 17, 2025 22:54 View deployment

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 22:55 View deployment

gilluminate force-pushed the gill/LJ-692/typography branch from 0a533a6 to 279b1a2 Compare April 17, 2025 22:55

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 22:56 View deployment

vercel Bot deployed to Preview – fides-plus-nightly April 17, 2025 22:59 View deployment

gilluminate force-pushed the gill/LJ-692/typography branch from 279b1a2 to 653ab58 Compare April 17, 2025 23:03

gilluminate added 2 commits April 17, 2025 17:04

Initialize basic HOC with no modifications

b59cdf0

custom paragraph

039406e

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 23:04 View deployment

gilluminate force-pushed the gill/LJ-692/typography branch from 653ab58 to 1cf3ad0 Compare April 17, 2025 23:05

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 23:05 View deployment

gilluminate added 2 commits April 17, 2025 17:07

custom sizing and Include main Typography component in HOC

537dde4

Update CHANGELOG.md

6a20836

gilluminate force-pushed the gill/LJ-692/typography branch from 1cf3ad0 to 6a20836 Compare April 17, 2025 23:07

vercel Bot deployed to Preview – fides-privacy-center April 17, 2025 23:08 View deployment

gilluminate commented Apr 17, 2025

View reviewed changes

gilluminate marked this pull request as ready for review April 17, 2025 23:10

Update uses of title

fd4bd66

vercel Bot deployed to Preview – fides-privacy-center April 18, 2025 13:32 View deployment

vercel Bot deployed to Preview – fides-plus-nightly April 18, 2025 13:35 View deployment

lucanovera approved these changes Apr 18, 2025

View reviewed changes

gilluminate commented Apr 18, 2025

View reviewed changes

export destructured typography subcomponents

f266448

vercel Bot deployed to Preview – fides-privacy-center April 18, 2025 15:47 View deployment

gilluminate commented Apr 18, 2025

View reviewed changes

vercel Bot deployed to Preview – fides-plus-nightly April 18, 2025 15:50 View deployment

Merge branch 'main' into gill/LJ-692/typography

33cdd71

vercel Bot deployed to Preview – fides-privacy-center April 18, 2025 16:59 View deployment

vercel Bot deployed to Preview – fides-plus-nightly April 18, 2025 17:03 View deployment

gilluminate merged commit 5e74472 into main Apr 18, 2025
17 checks passed

gilluminate deleted the gill/LJ-692/typography branch April 18, 2025 17:18


		import { NextBreadcrumb, NextBreadcrumbProps } from "./nav/NextBreadcrumb";

		const { Title } = Typography;

		@@ -1,4 +1,4 @@
		import { AntFlex as Flex, Heading } from "fidesui";
		import { AntFlex as Flex, AntTitle as Title } from "fidesui";

Conversation

gilluminate commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel Bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucanovera left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucanovera Apr 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cypress Bot commented Apr 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gilluminate commented Apr 17, 2025 •

edited

Loading

vercel Bot commented Apr 17, 2025 •

edited

Loading

lucanovera Apr 18, 2025 •

edited

Loading