feat(ui): Initial AppearanceProvider support by dstaley · Pull Request #3976 · clerk/javascript

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

dstaley · 2024-08-16T21:20:52Z

Description

This PR contains a complete implementation of the appearance prop for the new AIO components. Notable changes from the existing appearance prop include the dropping of arbitrary CSS (such as pseudo elements) and the removal of component-specific styles like appearance={{ elements: { signIn: { ... } } }}.

This PR also contains the following sub-PRs:

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-08-16T21:20:55Z

🦋 Changeset detected

Latest commit: 1ecaaed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

+ <AppearanceProvider appearance={{ layout: { unsafe_disableDevelopmentModeWarnings: devMode === 'off' } }}>
+ <style
+ dangerouslySetInnerHTML={{
+ __html: css,


alexcarpenter · 2024-08-28T19:37:16Z

+/**
+ * Union of all valid descriptors used throughout the components.
+ */
+export type DescriptorIdentifier = 'alert' | 'alert__error' | 'alert__warning' | 'alertRoot' | 'alertIcon';


Will definitely want to work out an approach for naming here. I think this was just for testing to start. But ideally we have a convention for underscore vs camelcase etc.

alexcarpenter · 2024-08-28T19:51:48Z

+export const layoutStyle = {
+ alert: {
+ className: 'border px-4 py-3',
+ },
+ alert__warning: {},
+ alert__error: {},
+ alertRoot: {
+ className: 'flex gap-x-2',
+ },
+ alertIcon: {
+ className: 'mt-px shrink-0 *:size-4',
+ },
+} satisfies ParsedElementsFragment;
+
+export const visualStyle = {
+ alert: {
+ className: 'leading-small rounded-md text-base',
+ },
+ alert__warning: {
+ className: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
+ },
+ alert__error: {
+ className: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
+ },
+ alertRoot: {},
+ alertIcon: {},
+} satisfies ParsedElementsFragment;


Since both the layout and visual styles are needed for each component (I think), have you considered a helper function that'd solve some of the need to have empty objects defined here?

Will also have a good amount of these objects for files like the card component which has a good amount of nested components https://github.com/clerk/javascript/blob/main/packages/ui/src/primitives/card.tsx

The empty objects are a type checking requirement, but after talking with Bryce we decided to move to a runtime validation approach instead. In a future PR, we'll be able to remove these empty objects, and our useAppearance hook will automatically create the empty objects without us needing to specify them.

alexcarpenter · 2024-08-28T19:56:07Z

+} from '~/contexts/AppearanceContext';
 import * as Icon from './icon';

+export const layoutStyle = {


I am still not super sold on the layout naming for the based styles. But we can start with it and iterate if we want to change.

brkalow · 2024-08-29T21:12:05Z

-function FirstFactorConnections({
- isGlobalLoading,
- hasConnection,
-}: {
- isGlobalLoading: boolean;
- hasConnection: boolean;
-}) {
- const { t } = useLocalizations();


Are these changes meant to be here? 👀

Ah, I see yes! Alex had a few PRs targeting this branch 👍

brkalow · 2024-08-30T15:23:24Z

+
+export { AppearanceProvider, useAppearance };
+
+if (import.meta.vitest) {


love that you can test local functions without having to export them!

brkalow · 2024-08-30T15:24:48Z

+ return result;
+}
+
+function mergeAppearance(a: Appearance | null | undefined, b: Appearance | null | undefined): Appearance | null {


Might be helpful to outline the merging heuristic in prose in a JSDoc. 👀

alexcarpenter

This is a solid foundation to build from. I am interested in getting this in sooner than later, and continue iterating on it.

brkalow

👏 great start!

Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>

feat(ui): Initial AppearanceProvider support
c53973f

github-advanced-securityAI found potential problems Aug 16, 2024
View reviewed changes

dstaleyand others added 6 commits August 16, 2024 15:26

docs(ui): Add comments
cc505cf

chore(ui): Use parsed appearance (#3981)
4028bf1

Merge branch 'main' into ds.feat/elements-appearance-prop
afc2f38

feat(ui): Add useCard hook (#3984)
fa908ba

feat(ui): Remove need to manually pass globalAppearance (#3985)
e880cb2

feature(ui): ImplementsocialButtonsPlacementlayout logic (#3992)
d67a3e8

dstaley mentioned this pull request Aug 27, 2024
feat(ui): Add support for element descriptors #3999
Merged
9 tasks

dstaley added 2 commits August 27, 2024 17:35

feat(ui): Initial support for elements appearance prop (#3988)
a157995

Merge branch 'main' into ds.feat/elements-appearance-prop
e085156

clerk-cookie added the clerk-js label Aug 28, 2024

dstaley added 4 commits August 28, 2024 10:15

test(ui): Use test-friendly class names
2d950b4

fix(ui): Remove unused code
83ebc75

chore(ui): Add changeset
6e0ad74

Merge branch 'main' into ds.feat/elements-appearance-prop
12915a9

dstaley marked this pull request as ready for review August 28, 2024 18:31

alexcarpenter requested review from alexcarpenter and brkalow August 28, 2024 19:32

alexcarpenter reviewed Aug 28, 2024
View reviewed changes

test(ui): Add tests for overriding style
1cdd7ff

brkalow reviewed Aug 29, 2024
View reviewed changes

brkalow reviewed Aug 30, 2024
View reviewed changes

alexcarpenter approved these changes Aug 30, 2024
View reviewed changes

brkalow approved these changes Sep 4, 2024
View reviewed changes

Merge branch 'main' into ds.feat/elements-appearance-prop
e988eac

clerk-cookie added the elements label Sep 4, 2024

fix(elements): Add explicit type cast
1ecaaed

dstaley merged commit a6a715d into mainSep 4, 2024

dstaley deleted the ds.feat/elements-appearance-prop branch September 4, 2024 19:33

wobsoriano pushed a commit that referenced this pull request Feb 8, 2025
feat(ui): Initial AppearanceProvider support (#3976)
caaf4d9
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>


		export { AppearanceProvider, useAppearance };

		if (import.meta.vitest) {

Uh oh!

Conversation

dstaley commented Aug 16, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Aug 16, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Check warning

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcarpenter left a comment

Choose a reason for hiding this comment

Uh oh!

brkalow left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

dstaley commented Aug 16, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-botBot commented Aug 16, 2024• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Check warning

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexcarpenter left a comment

Choose a reason for hiding this comment

dstaley commented Aug 16, 2024•
edited
Loading

changeset-botBot commented Aug 16, 2024•
edited
Loading

dstaley commented Aug 16, 2024•
edited
Loading

changeset-botBot commented Aug 16, 2024•
edited
Loading

dstaley commented Aug 16, 2024•
edited
Loading

changeset-botBot commented Aug 16, 2024•
edited
Loading