refactor(ui): Break <Icon /> component into individual components (#…

…4147)
clerk · Sep 13, 2024 · d0960c4 · d0960c4
1 parent f5b63b3
commit d0960c4
Show file tree

Hide file tree

Showing 70 changed files with 1,680 additions and 1,474 deletions.
diff --git a/.changeset/rotten-turtles-design.md b/.changeset/rotten-turtles-design.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/connections.tsx b/packages/ui/src/common/connections.tsx
@@ -1,11 +1,10 @@
 import * as Common from '@clerk/elements/common';
 import * as React from 'react';
 
-import { PROVIDERS } from '~/constants/providers';
 import { useAppearance } from '~/contexts';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { Button } from '~/primitives/button';
-import * as Icon from '~/primitives/icon';
+import { PROVIDERS } from '~/primitives/icons/providers';
 
 /**
  * Calculates the number of columns given the total number of items and the maximum columns allowed per row.
@@ -73,9 +72,6 @@ export function Connections(
         style={{ '--cl-connection-columns': columns } as React.CSSProperties}
       >
         {enabledConnections.map(c => {
-          const connection = PROVIDERS.find(provider => provider.id === c.provider);
-          const iconKey = connection?.icon;
-          const IconComponent = iconKey ? Icon[iconKey] : null;
           return (
             <li
               key={c.provider}
@@ -92,10 +88,10 @@ export function Connections(
                         intent='connection'
                         busy={isConnectionLoading}
                         disabled={props?.disabled || isConnectionLoading}
-                        iconStart={IconComponent ? <IconComponent /> : null}
+                        iconStart={PROVIDERS[c.provider] || null}
                         textVisuallyHidden={textVisuallyHidden}
                       >
-                        {connection?.name || c.provider}
+                        {c.name}
                       </Button>
                     </Common.Connection>
                   );

diff --git a/packages/ui/src/common/password-field.tsx b/packages/ui/src/common/password-field.tsx
@@ -5,7 +5,8 @@ import React from 'react';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Animated } from '~/primitives/animated';
 import * as Field from '~/primitives/field';
-import * as Icon from '~/primitives/icon';
+import EyeSlashSm from '~/primitives/icons/eye-slash-sm';
+import EyeSm from '~/primitives/icons/eye-sm';
 import { translatePasswordError } from '~/utils/make-localizable';
 
 export function PasswordField({
@@ -69,7 +70,7 @@ export function PasswordField({
                     disabled={props.disabled}
                   >
                     <span className='sr-only'>{[type === 'password' ? 'Show' : 'Hide', 'password'].join(' ')}</span>
-                    {type === 'password' ? <Icon.EyeSlashSm /> : <Icon.EyeSm />}
+                    {type === 'password' ? <EyeSlashSm /> : <EyeSm />}
                   </button>
                 </Field.InputGroupEnd>
               </Field.InputGroup>

diff --git a/packages/ui/src/common/phone-number-field.tsx b/packages/ui/src/common/phone-number-field.tsx
@@ -9,7 +9,8 @@ import { type CountryIso, IsoToCountryMap } from '~/constants/phone-number';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Animated } from '~/primitives/animated';
 import * as Field from '~/primitives/field';
-import * as Icon from '~/primitives/icon';
+import CheckmarkSm from '~/primitives/icons/checkmark-sm';
+import ChevronUpDownSm from '~/primitives/icons/chevron-down-sm';
 import { mergeRefs } from '~/utils/merge-refs';
 import { extractDigits, formatPhoneNumber, parsePhoneString } from '~/utils/phone-number';
 
@@ -217,7 +218,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                     className='hover:enabled:bg-gray-2 focus-visible:ring-light-opaque focus-visible:ring-offset-gray-8 flex items-center gap-x-1 rounded-l-md bg-white px-2 py-1 text-base outline-none focus-visible:ring focus-visible:ring-offset-1'
                   >
                     <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
-                    <Icon.ChevronUpDownSm className='text-gray-9 text-[length:theme(size.4)]' />
+                    <ChevronUpDownSm className='text-gray-9 size-4' />
                   </Button>
                   <Popover
                     isOpen={isOpen}
@@ -259,9 +260,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
                                 className='leading-small aria-selected:bg-gray-2 flex cursor-pointer gap-x-2 px-4 py-1.5 text-base'
                               >
                                 <span className='grid w-3 shrink-0 place-content-center'>
-                                  {selectedCountry === countryOptions[index] && (
-                                    <Icon.CheckmarkSm className='text-[length:theme(size.4)]' />
-                                  )}
+                                  {selectedCountry === countryOptions[index] && <CheckmarkSm className='size-4' />}
                                 </span>
                                 <span className='grow truncate'>{name}</span>
                                 <span className='text-gray-11 ms-auto'>+{code}</span>

diff --git a/packages/ui/src/components/sign-in/steps/choose-session.tsx b/packages/ui/src/components/sign-in/steps/choose-session.tsx
@@ -8,7 +8,7 @@ import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useLocalizations } from '~/hooks/use-localizations';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import RightArrowSm from '~/primitives/icons/right-arrow-sm';
 
 function getInitials({
   firstName,
@@ -110,7 +110,7 @@ export function SignInChooseSession() {
                               ) : null}
                             </span>
                             <span className='text-gray-11 w-4 shrink-0 opacity-[--session-icon-opacity] transition-opacity'>
-                              <Icon.RightArrowSm />
+                              <RightArrowSm />
                             </span>
                           </Button>
                         </SignIn.Action>

diff --git a/packages/ui/src/components/sign-in/steps/choose-strategy.tsx b/packages/ui/src/components/sign-in/steps/choose-strategy.tsx
@@ -6,14 +6,16 @@ import { Connections } from '~/common/connections';
 import { GlobalError } from '~/common/global-error';
 import { useGetHelp } from '~/components/sign-in/hooks/use-get-help';
 import { LOCALIZATION_NEEDED } from '~/constants/localizations';
-import { useAppearance } from '~/contexts';
 import { useCard } from '~/hooks/use-card';
 import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
-import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import EnvelopeSm from '~/primitives/icons/envelope-sm';
+import FingerprintSm from '~/primitives/icons/fingerprint-sm';
+import LinkSm from '~/primitives/icons/link-sm';
+import LockSm from '~/primitives/icons/lock-sm';
+import SmsSm from '~/primitives/icons/sms-sm';
 import { LinkButton } from '~/primitives/link';
 
 /* Internal
@@ -33,11 +35,9 @@ function FirstFactorConnections({ isGlobalLoading }: { isGlobalLoading: boolean
   ============================================ */
 
 export function SignInChooseStrategy() {
-  const enabledConnections = useEnabledConnections();
   const { t } = useLocalizations();
   const { setShowHelp } = useGetHelp();
 
-  const hasConnection = enabledConnections.length > 0;
   const isDev = useDevModeWarning();
   const { logoProps, footerProps } = useCard();
 
@@ -69,7 +69,7 @@ export function SignInChooseStrategy() {
                       >
                         <Button
                           intent='secondary'
-                          iconStart={<Icon.LinkSm />}
+                          iconStart={<LinkSm />}
                         >
                           <SignIn.SafeIdentifier
                             transform={(identifier: string) =>
@@ -87,7 +87,7 @@ export function SignInChooseStrategy() {
                       >
                         <Button
                           intent='secondary'
-                          iconStart={<Icon.EnvelopeSm />}
+                          iconStart={<EnvelopeSm />}
                         >
                           <SignIn.SafeIdentifier
                             transform={(identifier: string) =>
@@ -105,7 +105,7 @@ export function SignInChooseStrategy() {
                       >
                         <Button
                           intent='secondary'
-                          iconStart={<Icon.SMSSm />}
+                          iconStart={<SmsSm />}
                         >
                           <SignIn.SafeIdentifier
                             transform={(identifier: string) =>
@@ -123,7 +123,7 @@ export function SignInChooseStrategy() {
                       >
                         <Button
                           intent='secondary'
-                          iconStart={<Icon.FingerprintSm />}
+                          iconStart={<FingerprintSm />}
                         >
                           {t('signIn.alternativeMethods.blockButton__passkey')}
                         </Button>
@@ -135,7 +135,7 @@ export function SignInChooseStrategy() {
                       >
                         <Button
                           intent='secondary'
-                          iconStart={<Icon.LockSm />}
+                          iconStart={<LockSm />}
                         >
                           {t('signIn.alternativeMethods.blockButton__password')}
                         </Button>

diff --git a/packages/ui/src/components/sign-in/steps/forgot-password.tsx b/packages/ui/src/components/sign-in/steps/forgot-password.tsx
@@ -10,7 +10,11 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import EnvelopeSm from '~/primitives/icons/envelope-sm';
+import FingerprintSm from '~/primitives/icons/fingerprint-sm';
+import LinkSm from '~/primitives/icons/link-sm';
+import LockSm from '~/primitives/icons/lock-sm';
+import SmsSm from '~/primitives/icons/sms-sm';
 import { LinkButton } from '~/primitives/link';
 import { Separator } from '~/primitives/separator';
 
@@ -64,7 +68,7 @@ export function SignInForgotPassword() {
                     >
                       <Button
                         intent='secondary'
-                        iconStart={<Icon.LinkSm />}
+                        iconStart={<LinkSm />}
                       >
                         <SignIn.SafeIdentifier
                           transform={(identifier: string) =>
@@ -82,7 +86,7 @@ export function SignInForgotPassword() {
                     >
                       <Button
                         intent='secondary'
-                        iconStart={<Icon.EnvelopeSm />}
+                        iconStart={<EnvelopeSm />}
                       >
                         <SignIn.SafeIdentifier
                           transform={(identifier: string) =>
@@ -100,7 +104,7 @@ export function SignInForgotPassword() {
                     >
                       <Button
                         intent='secondary'
-                        iconStart={<Icon.SMSSm />}
+                        iconStart={<SmsSm />}
                       >
                         <SignIn.SafeIdentifier
                           transform={(identifier: string) =>
@@ -118,7 +122,7 @@ export function SignInForgotPassword() {
                     >
                       <Button
                         intent='secondary'
-                        iconStart={<Icon.FingerprintSm />}
+                        iconStart={<FingerprintSm />}
                       >
                         {t('signIn.alternativeMethods.blockButton__passkey')}
                       </Button>
@@ -130,7 +134,7 @@ export function SignInForgotPassword() {
                     >
                       <Button
                         intent='secondary'
-                        iconStart={<Icon.LockSm />}
+                        iconStart={<LockSm />}
                       >
                         {t('signIn.alternativeMethods.blockButton__password')}
                       </Button>

diff --git a/packages/ui/src/components/sign-in/steps/get-help.tsx b/packages/ui/src/components/sign-in/steps/get-help.tsx
@@ -7,7 +7,7 @@ import { useLocalizations } from '~/hooks/use-localizations';
 import { useSupportEmail } from '~/hooks/use-support-email';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm';
 import { LinkButton } from '~/primitives/link';
 
 export function SignInGetHelp() {
@@ -43,7 +43,7 @@ export function SignInGetHelp() {
             onClick={() => {
               window.location.href = `mailto:${supportEmail}`;
             }}
-            iconEnd={<Icon.CaretRightLegacy />}
+            iconEnd={<CaretRightLegacySm />}
           >
             Email support
           </Button>

diff --git a/packages/ui/src/components/sign-in/steps/start.tsx b/packages/ui/src/components/sign-in/steps/start.tsx
@@ -20,7 +20,7 @@ import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import CaretRightLegacySm from '~/primitives/icons/caret-right-legacy-sm';
 import { LinkButton } from '~/primitives/link';
 import { Separator } from '~/primitives/separator';
 
@@ -148,7 +148,7 @@ export function SignInStart() {
                           <Button
                             busy={isSubmitting}
                             disabled={isGlobalLoading}
-                            iconEnd={<Icon.CaretRightLegacy />}
+                            iconEnd={<CaretRightLegacySm />}
                           >
                             {t('formButtonPrimary')}
                           </Button>

diff --git a/packages/ui/src/components/sign-in/steps/status.tsx b/packages/ui/src/components/sign-in/steps/status.tsx
@@ -6,7 +6,10 @@ import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useLocalizations } from '~/hooks/use-localizations';
 import * as Card from '~/primitives/card';
-import * as Icon from '~/primitives/icon';
+import ExclamationTrianglelg from '~/primitives/icons/exclamation-triangle-lg';
+import SpinnerLg from '~/primitives/icons/spinner-lg';
+import SwitchArrowslg from '~/primitives/icons/switch-arrows-lg';
+import TickShieldlg from '~/primitives/icons/tick-shield-lg';
 import type { VerificationStatus } from '~/types/utils';
 import type { DefaultLocalizationKey } from '~/utils/make-localizable';
 
@@ -46,42 +49,12 @@ const signInStatusLocalizationKeys: Record<
 type Status = keyof typeof signInStatusLocalizationKeys;
 
 const statusIcon: Record<Status, React.ReactElement> = {
-  loading: (
-    <Icon.SpinnerLg
-      size='lg'
-      className='mb-8 motion-safe:animate-spin motion-safe:[animation-duration:1.5s]'
-    />
-  ),
-  verified: (
-    <Icon.TickShieldlg
-      size='lg'
-      className='mb-2 text-[#22C543]'
-    />
-  ),
-  verified_switch_tab: (
-    <Icon.SwitchArrowslg
-      size='lg'
-      className='mb-2 text-[#747686]'
-    />
-  ),
-  expired: (
-    <Icon.ExclamationTrianglelg
-      size='lg'
-      className='mb-2 text-[#F36B16]'
-    />
-  ),
-  failed: (
-    <Icon.ExclamationTrianglelg
-      size='lg'
-      className='mb-2 text-[#EF4444]'
-    />
-  ),
-  client_mismatch: (
-    <Icon.ExclamationTrianglelg
-      size='lg'
-      className='mb-2 text-[#F36B16]'
-    />
-  ),
+  loading: <SpinnerLg className='mb-8 motion-safe:animate-spin motion-safe:[animation-duration:1.5s]' />,
+  verified: <TickShieldlg className='mb-2 text-[#22C543]' />,
+  verified_switch_tab: <SwitchArrowslg className='mb-2 text-[#747686]' />,
+  expired: <ExclamationTrianglelg className='mb-2 text-[#F36B16]' />,
+  failed: <ExclamationTrianglelg className='mb-2 text-[#EF4444]' />,
+  client_mismatch: <ExclamationTrianglelg className='mb-2 text-[#F36B16]' />,
 };
 
 export function SignInStatus() {