fix(ui): Remove blank descriptors (#4371)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Oct 22, 2024 · 1997eac · 1997eac
1 parent bdb2e8b
commit 1997eac
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 315 deletions.
diff --git a/.changeset/bright-parents-work.md b/.changeset/bright-parents-work.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/connections.tsx b/packages/ui/src/common/connections.tsx
@@ -65,10 +65,8 @@ export const layoutStyle = {
   },
 };
 
-export const visualStyle = {
-  connectionList: {},
-  connectionListItem: {},
-};
+// Purposefully left blank to prevent confusion.
+export const visualStyle = {};
 
 export function Connections(
   props: { columns?: number } & Pick<React.ComponentProps<typeof Button>, 'disabled' | 'textVisuallyHidden'>,

diff --git a/packages/ui/src/descriptors.ts b/packages/ui/src/descriptors.ts
@@ -1,4 +1,4 @@
-import type { OAuthProvider, Web3Provider } from '@clerk/types';
+import { OAUTH_PROVIDERS, type OAuthProvider, WEB3_PROVIDERS, type Web3Provider } from '@clerk/types';
 
 export const DESCRIPTORS = [
   // Alert
@@ -23,6 +23,7 @@ export const DESCRIPTORS = [
   'buttonIconStart',
   'buttonIconEnd',
   'buttonSpinner',
+  ...[...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(({ provider }) => `buttonConnection__${provider}`),
 
   // Connection
   'connectionList',

diff --git a/packages/ui/src/primitives/alert.tsx b/packages/ui/src/primitives/alert.tsx
@@ -14,8 +14,6 @@ export const layoutStyle = {
   alert: {
     className: 'border px-4 py-3 flex gap-x-2',
   },
-  alert__warning: {},
-  alert__error: {},
   alertIcon: {
     className: 'shrink-0 size-4 mt-px',
   },
@@ -31,7 +29,6 @@ export const visualStyle = {
   alert__error: {
     className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
   },
-  alertIcon: {},
 } satisfies ParsedElementsFragment;
 
 export const Alert = React.forwardRef<

diff --git a/packages/ui/src/primitives/button.tsx b/packages/ui/src/primitives/button.tsx
@@ -18,51 +18,9 @@ export const layoutStyle = {
       '*:min-w-0',
     ].join(' '),
   },
-  buttonPrimary: {},
-  buttonSecondary: {},
-  buttonConnection: {},
-  buttonPrimaryDefault: {},
-  buttonSecondaryDefault: {},
-  buttonConnectionDefault: {},
-  buttonConnection__apple: {},
-  buttonConnection__atlassian: {},
-  buttonConnection__bitbucket: {},
-  buttonConnection__box: {},
-  buttonConnection__coinbase_wallet: {},
-  buttonConnection__coinbase: {},
-  buttonConnection__discord: {},
-  buttonConnection__dropbox: {},
-  buttonConnection__enstall: {},
-  buttonConnection__facebook: {},
-  buttonConnection__github: {},
-  buttonConnection__gitlab: {},
-  buttonConnection__google: {},
-  buttonConnection__hubspot: {},
-  buttonConnection__huggingface: {},
-  buttonConnection__instagram: {},
-  buttonConnection__line: {},
-  buttonConnection__linear: {},
-  buttonConnection__linkedin_oidc: {},
-  buttonConnection__linkedin: {},
-  buttonConnection__metamask: {},
-  buttonConnection__microsoft: {},
-  buttonConnection__notion: {},
-  buttonConnection__slack: {},
-  buttonConnection__spotify: {},
-  buttonConnection__tiktok: {},
-  buttonConnection__twitch: {},
-  buttonConnection__twitter: {},
-  buttonConnection__x: {},
-  buttonConnection__xero: {},
-  buttonDisabled: {},
-  buttonBusy: {},
-  buttonText: {},
-  buttonTextVisuallyHidden: {},
   buttonIcon: {
     className: 'shrink-0',
   },
-  buttonIconStart: {},
-  buttonIconEnd: {},
   buttonSpinner: {
     className: 'shrink-0',
   },
@@ -113,36 +71,6 @@ export const visualStyle = {
   buttonBusy: {
     className: 'cursor-wait',
   },
-  buttonConnection__apple: {},
-  buttonConnection__atlassian: {},
-  buttonConnection__bitbucket: {},
-  buttonConnection__box: {},
-  buttonConnection__coinbase_wallet: {},
-  buttonConnection__coinbase: {},
-  buttonConnection__discord: {},
-  buttonConnection__dropbox: {},
-  buttonConnection__enstall: {},
-  buttonConnection__facebook: {},
-  buttonConnection__github: {},
-  buttonConnection__gitlab: {},
-  buttonConnection__google: {},
-  buttonConnection__hubspot: {},
-  buttonConnection__huggingface: {},
-  buttonConnection__instagram: {},
-  buttonConnection__line: {},
-  buttonConnection__linear: {},
-  buttonConnection__linkedin_oidc: {},
-  buttonConnection__linkedin: {},
-  buttonConnection__metamask: {},
-  buttonConnection__microsoft: {},
-  buttonConnection__notion: {},
-  buttonConnection__slack: {},
-  buttonConnection__spotify: {},
-  buttonConnection__tiktok: {},
-  buttonConnection__twitch: {},
-  buttonConnection__twitter: {},
-  buttonConnection__x: {},
-  buttonConnection__xero: {},
   buttonText: {
     className: 'truncate leading-4',
   },
@@ -152,8 +80,6 @@ export const visualStyle = {
   buttonIcon: {
     className: 'text-[length:--button-icon-size] text-[--button-icon-color] opacity-[--button-icon-opacity]',
   },
-  buttonIconStart: {},
-  buttonIconEnd: {},
   buttonSpinner: {
     className: 'text-[length:--button-icon-size] text-[--button-icon-color]',
   },

diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
@@ -30,8 +30,6 @@ const cardRootLayoutStyle = {
       'relative w-full max-w-[25rem]',
     ].join(' '),
   },
-  cardRootDefault: {},
-  cardRootInner: {},
 };
 const cardRootVisualStyle = {
   cardRoot: {
@@ -135,9 +133,9 @@ const cardHeaderLayoutStyle = {
     className: 'z-1 flex flex-col items-center gap-1 text-center',
   },
 } satisfies ParsedElementsFragment;
-const cardHeaderVisualStyle = {
-  cardHeader: {},
-} satisfies ParsedElementsFragment;
+
+// Purposefully left blank to prevent confusion.
+const cardHeaderVisualStyle = {} satisfies ParsedElementsFragment;
 
 export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CardHeader(
   { children, className, ...props },
@@ -171,11 +169,9 @@ const cardLogoLayoutStyle = {
     className: 'size-full object-contain',
   },
 } satisfies ParsedElementsFragment;
-const cardLogoVisualStyle = {
-  cardLogoBox: {},
-  cardLogoLink: {},
-  cardLogoImage: {},
-} satisfies ParsedElementsFragment;
+
+// Purposefully left blank to prevent confusion.
+const cardLogoVisualStyle = {} satisfies ParsedElementsFragment;
 
 export const Logo = React.forwardRef(function CardLogo(
   {
@@ -222,9 +218,8 @@ export const Logo = React.forwardRef(function CardLogo(
 /**
  * CardTitle
  */
-const cardTitleLayoutStyle = {
-  cardTitle: {},
-} satisfies ParsedElementsFragment;
+// Purposefully left blank to prevent confusion.
+const cardTitleLayoutStyle = {} satisfies ParsedElementsFragment;
 const cardTitleVisualStyle = {
   cardTitle: {
     className: 'leading-medium text-gray-12 text-lg font-bold',
@@ -241,7 +236,6 @@ export const Title = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<H
       ref={forwardedRef}
       {...props}
       {...mergeDescriptors(elements.cardTitle)}
-      className={cx('leading-medium text-gray-12 text-lg font-bold', className)}
     >
       {children}
     </h2>
@@ -253,9 +247,8 @@ export const Title = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<H
 /**
  * CardDescription
  */
-const cardDescriptionLayoutStyle = {
-  cardDescription: {},
-} satisfies ParsedElementsFragment;
+// Purposefully left blank to prevent confusion.
+const cardDescriptionLayoutStyle = {} satisfies ParsedElementsFragment;
 const cardDescriptionVisualStyle = {
   cardDescription: {
     className: 'text-gray-a11 text-base',
@@ -287,9 +280,9 @@ const cardBodyLayoutStyle = {
     className: 'z-1 flex flex-col gap-6',
   },
 } satisfies ParsedElementsFragment;
-const cardBodyVisualStyle = {
-  cardBody: {},
-} satisfies ParsedElementsFragment;
+
+// Purposefully left blank to prevent confusion.
+const cardBodyVisualStyle = {} satisfies ParsedElementsFragment;
 
 export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CardBody(
   { children, className, ...props },
@@ -324,9 +317,9 @@ const cardActionsLayoutStyle = {
     ].join(' '),
   },
 } satisfies ParsedElementsFragment;
-const cardActionsVisualStyle = {
-  cardActions: {},
-} satisfies ParsedElementsFragment;
+
+// Purposefully left blank to prevent confusion.
+const cardActionsVisualStyle = {} satisfies ParsedElementsFragment;
 
 export const Actions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(function CardActions(
   { children, className, ...props },
@@ -357,13 +350,8 @@ const cardFooterLayoutStyle = {
   cardFooterAction: {
     className: 'px-6 py-4',
   },
-  cardFooterActionText: {},
-  cardFooterActionLink: {},
-  cardFooterActionButton: {},
-  cardFooterActionPageLink: {},
 } satisfies ParsedElementsFragment;
 const cardFooterVisualStyle = {
-  cardFooter: {},
   cardFooterAction: {
     className: 'border-gray-a3 border-b last-of-type:border-b-transparent',
   },