Skip to content

fix(clerk-js): Optically align clerk logo in components #6790

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.

Sign up for GitHub

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(clerk-js): Optically align clerk logo in components #6790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f8658a
fix(clerk-js): Optically align clerk logo in components
alexcarpenter Sep 16, 2025
d131882
Create hot-hornets-wash.md
nikosdouvlis Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/hot-hornets-wash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
5 changes: 3 additions & 2 deletions packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CardClerkAndPagesTag = React.memo(
>
<>
<Text variant='buttonSmall'>Secured by</Text>
<LogoMarkIconLink />
<LogoMarkIconLink sx={{ transform: 'translateY(-1px)' }} />
</>
</Flex>
)}
Expand All @@ -90,13 +90,14 @@ export const CardClerkAndPagesTag = React.memo(
}),
);

const LogoMarkIconLink = () => {
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
{...props}
>
Comment on lines +93 to 101
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

❓ Verification inconclusive

Don’t allow callers to override invariant Link props (href, isExternal, aria-label)

Spreading {...props} after fixed props lets consumers change href/isExternal/aria-label, which weakens UX and can be a security posture gap. Also: localize the aria label, add default element descriptors, and prefer an explicit return type.

Minimal safe fix (preserve invariants by ordering):

-    <Link
-      href='https://go.clerk.com/components'
-      colorScheme='inherit'
-      isExternal
-      aria-label='Clerk logo'
-      {...props}
-    >
+    <Link
+      {...props}
+      href='https://go.clerk.com/components'
+      colorScheme='inherit'
+      isExternal
+      aria-label='Clerk logo'
+      elementDescriptor='logoMarkIconLink'
+    >

Prefer stricter surface (only allow styling/theming props):

-const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
+type LogoMarkIconLinkProps = Pick<PropsOfComponent<typeof Link>, 'sx' | 'className' | 'elementDescriptor' | 'elementId'>;
+const LogoMarkIconLink = (props: LogoMarkIconLinkProps): JSX.Element => {

Localize the aria label (illustrative—use your localization util/key):

-      aria-label='Clerk logo'
+      aria-label={/* t('clerk.logoAriaLabel') */ 'Clerk logo'}

Optional: add an element descriptor to the icon for theming:

       <Icon
         icon={LogoMark}
+        elementDescriptor="logoMarkIcon"
         sx={theme => ({
           width: theme.sizes.$12,
           height: theme.sizes.$3x5,
         })}
       />

Note: Ensure the Link component sets rel="noopener noreferrer" when isExternal is true (if not already handled internally).

Prevent callers from overriding invariant Link props

Spreading {...props} after fixed props allows consumers to override href / isExternal / aria-label (UX/security risk). Fix required.

File: packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx (lines 93–101)

Minimal safe fix (preserve invariants by ordering):

-    <Link
-      href='https://go.clerk.com/components'
-      colorScheme='inherit'
-      isExternal
-      aria-label='Clerk logo'
-      {...props}
-    >
+    <Link
+      {...props}
+      href='https://go.clerk.com/components'
+      colorScheme='inherit'
+      isExternal
+      aria-label='Clerk logo'
+      elementDescriptor='logoMarkIconLink'
+    >

Recommended extras (brief):

  • Narrow public surface: type LogoMarkIconLinkProps = Pick<PropsOfComponent, 'sx' | 'className' | 'elementDescriptor' | 'elementId'>; const LogoMarkIconLink = (props: LogoMarkIconLinkProps): JSX.Element => { ... }
  • Localize aria-label (use i18n key).
  • Ensure Link sets rel="noopener noreferrer" when isExternal (if not already handled).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
{...props}
>
const LogoMarkIconLink = (props: PropsOfComponent<typeof Link>) => {
return (
<Link
{...props}
href='https://go.clerk.com/components'
colorScheme='inherit'
isExternal
aria-label='Clerk logo'
elementDescriptor='logoMarkIconLink'
>
🤖 Prompt for AI Agents 
packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx around lines
93–101: the component spreads {...props} after fixed Link props which allows
callers to override invariants (href, isExternal, aria-label); reorder and/or
pick-safe props so fixed props cannot be overridden and only allow a small safe
set from callers. Change the component to accept a narrowed
LogoMarkIconLinkProps type (e.g. Pick<PropsOfComponent<typeof Link>,
'sx'|'className'|'elementDescriptor'|'elementId'>) and spread those props into
Link before or instead of spreading arbitrary props; ensure
href='https://go.clerk.com/components', isExternal, aria-label remain
hard-coded, and add rel="noopener noreferrer" to the Link when isExternal if not
already applied; optionally replace aria-label with an i18n key.

<Icon
icon={LogoMark}
Expand Down
Loading