From 64ed2fe151ad11b04632b71153b35374273a3adc Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 19 Jun 2024 13:00:10 +0200 Subject: [PATCH 1/5] add descriptor --- .../OrganizationProfile/OrganizationProfileAvatarUploader.tsx | 4 ++-- packages/clerk-js/src/ui/customizables/elementDescriptors.ts | 2 ++ packages/types/src/appearance.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx index 856396afaab..32625654583 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx @@ -1,6 +1,6 @@ import type { OrganizationResource } from '@clerk/types'; -import { Col, Text } from '../../customizables'; +import { Col, descriptors, Text } from '../../customizables'; import type { AvatarUploaderProps } from '../../elements'; import { AvatarUploader, OrganizationAvatar } from '../../elements'; import { localizationKeys } from '../../localization'; @@ -11,7 +11,7 @@ export const OrganizationProfileAvatarUploader = ( const { organization, ...rest } = props; return ( - + ({ diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index 463aa036d10..1796721e9f8 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -166,6 +166,8 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'organizationPreviewMainIdentifier', 'organizationPreviewSecondaryIdentifier', + 'organizationCreateAvatarContainer', + 'membersPageInviteButton', 'identityPreview', diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index eb44d134c9f..174c6cddf4e 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -290,6 +290,8 @@ export type ElementsConfig = { organizationPreviewMainIdentifier: WithOptions; organizationPreviewSecondaryIdentifier: WithOptions; + organizationCreateAvatarContainer: WithOptions; + membersPageInviteButton: WithOptions; identityPreview: WithOptions; From 09938c099762e8c74851c872c5ddcdce08b97e56 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 19 Jun 2024 13:06:01 +0200 Subject: [PATCH 2/5] add changeset --- .changeset/seven-feet-beam.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/seven-feet-beam.md diff --git a/.changeset/seven-feet-beam.md b/.changeset/seven-feet-beam.md new file mode 100644 index 00000000000..2ab69b61d23 --- /dev/null +++ b/.changeset/seven-feet-beam.md @@ -0,0 +1,6 @@ +--- +"@clerk/clerk-js": patch +"@clerk/types": patch +--- + +Add `organizationCreateAvatarContainer` descriptor for logo upload box inside "Create Organization" flow From 9f91bbd0b45b8194fdf12fe6414ab3d7c7cc372d Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 19 Jun 2024 13:06:17 +0200 Subject: [PATCH 3/5] remove unnecessary wrapping div --- .../CreateOrganizationForm.tsx | 70 +++++++++---------- 1 file changed, 34 insertions(+), 36 deletions(-) diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx index f76a183cb0b..968d6852e57 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx @@ -134,44 +134,42 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani onSubmit={onSubmit} sx={t => ({ gap: t.space.$6 })} > - - await setFile(file)} - onAvatarRemove={file ? onAvatarRemove : null} - avatarPreviewPlaceholder={ - ({ - color: t.colors.$colorTextSecondary, - transitionDuration: t.transitionDuration.$controls, - })} - /> - } - sx={t => ({ - width: t.sizes.$16, - height: t.sizes.$16, - borderRadius: t.radii.$md, - borderWidth: t.borderWidths.$normal, - borderStyle: t.borderStyles.$dashed, - borderColor: t.colors.$neutralAlpha200, + await setFile(file)} + onAvatarRemove={file ? onAvatarRemove : null} + avatarPreviewPlaceholder={ + ({ + color: t.colors.$colorTextSecondary, + transitionDuration: t.transitionDuration.$controls, + })} + /> + } + sx={t => ({ + width: t.sizes.$16, + height: t.sizes.$16, + borderRadius: t.radii.$md, + borderWidth: t.borderWidths.$normal, + borderStyle: t.borderStyles.$dashed, + borderColor: t.colors.$neutralAlpha200, + backgroundColor: t.colors.$neutralAlpha50, + ':hover': { backgroundColor: t.colors.$neutralAlpha50, - ':hover': { - backgroundColor: t.colors.$neutralAlpha50, - svg: { - transform: 'scale(1.2)', - }, + svg: { + transform: 'scale(1.2)', }, - })} - /> - } - /> - + }, + })} + /> + } + /> Date: Wed, 19 Jun 2024 13:27:24 +0200 Subject: [PATCH 4/5] Revert "remove unnecessary wrapping div" This reverts commit 9f91bbd0b45b8194fdf12fe6414ab3d7c7cc372d. --- .../CreateOrganizationForm.tsx | 70 ++++++++++--------- 1 file changed, 36 insertions(+), 34 deletions(-) diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx index 968d6852e57..f76a183cb0b 100644 --- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx +++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx @@ -134,42 +134,44 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani onSubmit={onSubmit} sx={t => ({ gap: t.space.$6 })} > - await setFile(file)} - onAvatarRemove={file ? onAvatarRemove : null} - avatarPreviewPlaceholder={ - ({ - color: t.colors.$colorTextSecondary, - transitionDuration: t.transitionDuration.$controls, - })} - /> - } - sx={t => ({ - width: t.sizes.$16, - height: t.sizes.$16, - borderRadius: t.radii.$md, - borderWidth: t.borderWidths.$normal, - borderStyle: t.borderStyles.$dashed, - borderColor: t.colors.$neutralAlpha200, - backgroundColor: t.colors.$neutralAlpha50, - ':hover': { + + await setFile(file)} + onAvatarRemove={file ? onAvatarRemove : null} + avatarPreviewPlaceholder={ + ({ + color: t.colors.$colorTextSecondary, + transitionDuration: t.transitionDuration.$controls, + })} + /> + } + sx={t => ({ + width: t.sizes.$16, + height: t.sizes.$16, + borderRadius: t.radii.$md, + borderWidth: t.borderWidths.$normal, + borderStyle: t.borderStyles.$dashed, + borderColor: t.colors.$neutralAlpha200, backgroundColor: t.colors.$neutralAlpha50, - svg: { - transform: 'scale(1.2)', + ':hover': { + backgroundColor: t.colors.$neutralAlpha50, + svg: { + transform: 'scale(1.2)', + }, }, - }, - })} - /> - } - /> + })} + /> + } + /> + Date: Wed, 19 Jun 2024 13:29:03 +0200 Subject: [PATCH 5/5] review comment --- .changeset/seven-feet-beam.md | 2 +- .../OrganizationProfile/OrganizationProfileAvatarUploader.tsx | 2 +- packages/clerk-js/src/ui/customizables/elementDescriptors.ts | 2 +- packages/types/src/appearance.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.changeset/seven-feet-beam.md b/.changeset/seven-feet-beam.md index 2ab69b61d23..ea8bc129d5b 100644 --- a/.changeset/seven-feet-beam.md +++ b/.changeset/seven-feet-beam.md @@ -3,4 +3,4 @@ "@clerk/types": patch --- -Add `organizationCreateAvatarContainer` descriptor for logo upload box inside "Create Organization" flow +Add `organizationAvatarUploaderContainer` descriptor which is used e.g. for the logo upload box inside "Create Organization" flow diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx index 32625654583..fdbc745dfa5 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx @@ -11,7 +11,7 @@ export const OrganizationProfileAvatarUploader = ( const { organization, ...rest } = props; return ( - + ({ diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index 1796721e9f8..cd979b3d740 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -166,7 +166,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'organizationPreviewMainIdentifier', 'organizationPreviewSecondaryIdentifier', - 'organizationCreateAvatarContainer', + 'organizationAvatarUploaderContainer', 'membersPageInviteButton', diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 174c6cddf4e..c479de540ef 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -290,7 +290,7 @@ export type ElementsConfig = { organizationPreviewMainIdentifier: WithOptions; organizationPreviewSecondaryIdentifier: WithOptions; - organizationCreateAvatarContainer: WithOptions; + organizationAvatarUploaderContainer: WithOptions; membersPageInviteButton: WithOptions;