From 8b40dc7a328d790b443a9a64401f895093d6b24b Mon Sep 17 00:00:00 2001
From: Papageorgiou Nikos <admin@nikospap.com>
Date: Mon, 6 Nov 2023 13:08:18 +0200
Subject: [PATCH] chore(clerk-js): Replace Avatar preview in
 OrganizationProfileAvatarUploader with Upload Button (#2014)

---
 .changeset/dull-stingrays-fix.md              |  5 ++
 .../CreateOrganizationForm.tsx                | 35 +++++++++++--
 .../src/ui/elements/AvatarUploader.tsx        | 11 +++-
 packages/clerk-js/src/ui/icons/index.ts       | 51 ++++++++++---------
 packages/clerk-js/src/ui/icons/upload.svg     |  1 +
 5 files changed, 73 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/dull-stingrays-fix.md
 create mode 100644 packages/clerk-js/src/ui/icons/upload.svg

diff --git a/.changeset/dull-stingrays-fix.md b/.changeset/dull-stingrays-fix.md
new file mode 100644
index 0000000000..7c2e680bba
--- /dev/null
+++ b/.changeset/dull-stingrays-fix.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Enhance `CreateOrganizationForm` by replacing `AvatarPreview` with an upload button to prevent layout shifts
\ No newline at end of file
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index cb999c8527..c5cbfceef8 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
 import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
-import { ContentPage, Form, FormButtonContainer, SuccessPage, useCardState } from '../../elements';
-import { QuestionMark } from '../../icons';
+import { Icon } from '../../customizables';
+import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
+import { QuestionMark, Upload } from '../../icons';
 import type { LocalizationKey } from '../../localization';
 import { localizationKeys } from '../../localization';
-import { createSlug, handleError, useFormControl } from '../../utils';
+import { colors, createSlug, handleError, useFormControl } from '../../utils';
 import { InviteMembersForm } from '../OrganizationProfile/InviteMembersForm';
 import { InvitationsSentMessage } from '../OrganizationProfile/InviteMembersPage';
 import { OrganizationProfileAvatarUploader } from '../OrganizationProfile/OrganizationProfileAvatarUploader';
@@ -121,6 +122,34 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
             organization={{ name: nameField.value }}
             onAvatarChange={async file => await setFile(file)}
             onAvatarRemove={file ? onAvatarRemove : null}
+            avatarPreviewPlaceholder={
+              <IconButton
+                variant='ghost'
+                colorScheme='neutral'
+                aria-label='Upload organization logo'
+                icon={
+                  <Icon
+                    size='md'
+                    icon={Upload}
+                    sx={theme => ({
+                      transitionDuration: theme.transitionDuration.$controls,
+                    })}
+                  />
+                }
+                sx={theme => ({
+                  width: theme.sizes.$11,
+                  height: theme.sizes.$11,
+                  borderRadius: theme.radii.$md,
+                  backgroundColor: theme.colors.$avatarBackground,
+                  ':hover': {
+                    backgroundColor: colors.makeTransparent(theme.colors.$avatarBackground, 0.2),
+                    svg: {
+                      transform: 'scale(1.2)',
+                    },
+                  },
+                })}
+              />
+            }
           />
           <Form.ControlRow elementId={nameField.id}>
             <Form.PlainInput
diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
index f47b3f7fbc..38b488afc8 100644
--- a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
@@ -11,6 +11,7 @@ export type AvatarUploaderProps = {
   avatarPreview: React.ReactElement;
   onAvatarChange: (file: File) => Promise<unknown>;
   onAvatarRemove?: (() => void) | null;
+  avatarPreviewPlaceholder?: React.ReactElement | null;
 };
 
 export const fileToBase64 = (file: File): Promise<string> => {
@@ -27,7 +28,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
   const [objectUrl, setObjectUrl] = React.useState<string>();
   const card = useCardState();
 
-  const { onAvatarChange, onAvatarRemove, title, avatarPreview, ...rest } = props;
+  const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;
 
   const toggle = () => {
     setShowUpload(!showUpload);
@@ -54,6 +55,12 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
     return onAvatarRemove?.();
   };
 
+  const previewElement = objectUrl
+    ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })
+    : avatarPreviewPlaceholder
+    ? React.cloneElement(avatarPreviewPlaceholder, { onClick: toggle })
+    : avatarPreview;
+
   return (
     <Col gap={4}>
       <Flex
@@ -61,7 +68,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
         align='center'
         {...rest}
       >
-        {objectUrl ? React.cloneElement(avatarPreview, { imageUrl: objectUrl }) : avatarPreview}
+        {previewElement}
         <Col gap={1}>
           <Text
             localizationKey={title}
diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/clerk-js/src/ui/icons/index.ts
index 3f9a2b6361..61073b8f45 100644
--- a/packages/clerk-js/src/ui/icons/index.ts
+++ b/packages/clerk-js/src/ui/icons/index.ts
@@ -7,41 +7,42 @@
 export { default as ArrowLeftIcon } from './arrow-left.svg';
 export { default as ArrowRightIcon } from './arrow-right.svg';
 export { default as AuthApp } from './auth-app.svg';
-export { default as Clipboard } from './clipboard.svg';
+export { default as Billing } from './billing.svg';
+export { default as Caret } from './caret.svg';
+export { default as ChatAltIcon } from './chat-alt.svg';
 export { default as CheckCircle } from './check-circle.svg';
-export { default as ExclamationTriangle } from './exclamation-triangle.svg';
+export { default as Clipboard } from './clipboard.svg';
+export { default as Close } from './close.svg';
+export { default as CogFilled } from './cog-filled.svg';
+export { default as DeviceLaptop } from './device-laptop.svg';
+export { default as DeviceMobile } from './device-mobile.svg';
+export { default as DotCircle } from './dot-circle-horizontal.svg';
+export { default as Email } from './email.svg';
 export { default as ExclamationCircle } from './exclamation-circle.svg';
+export { default as ExclamationTriangle } from './exclamation-triangle.svg';
 export { default as EyeSlash } from './eye-slash.svg';
+export { default as Eye } from './eye.svg';
+export { default as Folder } from './folder.svg';
 export { default as InformationCircle } from './information-circle.svg';
+export { default as LinkIcon } from './link.svg';
+export { default as LockClosedIcon } from './lock-closed.svg';
+export { default as LogoMark } from './logo-mark-new.svg';
 export { default as MagnifyingGlass } from './magnifying-glass.svg';
-export { default as Caret } from './caret.svg';
+export { default as Menu } from './menu.svg';
+export { default as Mobile } from './mobile-small.svg';
 export { default as PencilEdit } from './pencil-edit.svg';
 export { default as Pencil } from './pencil.svg';
-export { default as Email } from './email.svg';
-export { default as TickShield } from './tick-shield.svg';
-export { default as SwitchArrows } from './switch-arrows.svg';
-export { default as LogoMark } from './logo-mark-new.svg';
-export { default as SignOut } from './signout.svg';
-export { default as SignOutDouble } from './signout-double.svg';
 export { default as Plus } from './plus.svg';
-export { default as CogFilled } from './cog-filled.svg';
-export { default as LinkIcon } from './link.svg';
-export { default as LockClosedIcon } from './lock-closed.svg';
-export { default as ChatAltIcon } from './chat-alt.svg';
+export { default as QuestionMark } from './question-mark.svg';
 export { default as RequestAuthIcon } from './request-auth.svg';
-export { default as User } from './user.svg';
-export { default as Mobile } from './mobile-small.svg';
-export { default as Folder } from './folder.svg';
-export { default as DeviceMobile } from './device-mobile.svg';
-export { default as DeviceLaptop } from './device-laptop.svg';
-export { default as Menu } from './menu.svg';
-export { default as Eye } from './eye.svg';
-export { default as DotCircle } from './dot-circle-horizontal.svg';
 export { default as Selector } from './selector.svg';
+export { default as SignOutDouble } from './signout-double.svg';
+export { default as SignOut } from './signout.svg';
+export { default as SwitchArrows } from './switch-arrows.svg';
+export { default as ThreeDots } from './threeDots.svg';
+export { default as TickShield } from './tick-shield.svg';
 export { default as Times } from './times.svg';
 export { default as Trash } from './trash.svg';
+export { default as Upload } from './upload.svg';
+export { default as User } from './user.svg';
 export { default as UserAdd } from './userAdd.svg';
-export { default as ThreeDots } from './threeDots.svg';
-export { default as Billing } from './billing.svg';
-export { default as Close } from './close.svg';
-export { default as QuestionMark } from './question-mark.svg';
diff --git a/packages/clerk-js/src/ui/icons/upload.svg b/packages/clerk-js/src/ui/icons/upload.svg
new file mode 100644
index 0000000000..794924db52
--- /dev/null
+++ b/packages/clerk-js/src/ui/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15v1.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V15m14-7-5-5m0 0L7 8m5-5v12"/></svg>
\ No newline at end of file