Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(clerk-js): Add dev mode notice to components #3511

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(clerk-js): Add dev mode notice to components #3511

wants to merge 2 commits into from
+147 −44

Conversation

desiprisg
Copy link
Contributor

@desiprisg desiprisg commented Jun 4, 2024 •
edited by octoper
Loading

Description

Add a development mode notice to our components to avoid going to productions with dev keys by accident.

CleanShot 2024-07-12 at 03 22 15@2x

CleanShot 2024-07-12 at 03 22 47@2x

CleanShot 2024-07-12 at 03 23 40@2x

CleanShot 2024-07-12 at 03 25 34@2x

CleanShot 2024-07-12 at 03 25 51@2x

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

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jun 4, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: b5a6868

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

This PR includes changesets to release 4 packages
Name Type
@clerk/clerk-js Patch
@clerk/astro Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo 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

@desiprisg
Copy link
Contributor Author

!preview

@desiprisg desiprisg force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from d0c8cd0 to 2cbdac6 Compare June 4, 2024 10:03
@clerk-cookie
Copy link
Collaborator

clerk-cookie commented Jun 4, 2024 •
edited
Loading

Hey @octoper, your preview is available.

Status Preview Updated (UTC)
🍪 Deployed Visit preview Jul 12, 2024 02:57 PM

@desiprisg desiprisg force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from 2cbdac6 to 8e9316d Compare June 4, 2024 10:17
@desiprisg
Copy link
Contributor Author

!preview

@anagstef
Copy link
Member

anagstef commented Jun 5, 2024

@desiprisg can we have a screenshot of how this looks like?

@desiprisg
Copy link
Contributor Author

@desiprisg can we have a screenshot of how this looks like?

Adding these! Feel free to check the preview deployment as well!

@desiprisg desiprisg force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch 3 times, most recently from a6e46ac to 8f84fb9 Compare June 6, 2024 10:50
anagstef
anagstef approved these changes Jun 6, 2024
View reviewed changes
packages/clerk-js/src/ui/elements/Navbar.tsx
width: 'fit-content',
paddingLeft: theme.space.$3,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Wouldn't the removal of the padding cause issues when the devmode notice is not shown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I remember correctly, we are changing how this appears completely. We want it centered now.

packages/clerk-js/src/ui/elements/PopoverCard.tsx
{shouldShowTagOrLinks && (
<Card.ClerkAndPagesTag
withFooterPages
sx={t => ({ padding: `${t.space.$4} ${t.space.$8}` })}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

@nikosdouvlis
Copy link
Member

Hey @desiprisg , whats the status of this one?

@desiprisg
Copy link
Contributor Author

Hey @desiprisg , whats the status of this one?

We were waiting for user button / org switcher designs before merging this one.

@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from 8f84fb9 to 5052798 Compare June 26, 2024 10:52
@octoper
Copy link
Member

octoper commented Jun 26, 2024

!preview

@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from 5052798 to 17d5afa Compare July 1, 2024 19:02
@nikosdouvlis
Copy link
Member

@octoper hey :) is this good to go? if not, do you need help with anything at this point?

@octoper
Copy link
Member

octoper commented Jul 11, 2024

There were no designs for <OrgSwitcher/> and <UserButton/> until yesterday, I will take a look at this today

@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from 17d5afa to 9d79ddb Compare July 11, 2024 22:17
@octoper
Copy link
Member

octoper commented Jul 12, 2024

!preview

@octoper octoper self-assigned this Jul 12, 2024
@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch 2 times, most recently from 05a4721 to e4f6058 Compare July 12, 2024 14:52
@octoper
Copy link
Member

octoper commented Jul 12, 2024

!preview

@kylemac
Copy link
Contributor

kylemac commented Jul 14, 2024

@octoper do we offer the ability for a developer to turn this off in Dev?

@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from e4f6058 to 1c8b152 Compare July 14, 2024 21:26
@octoper octoper force-pushed the george/sdk-1805-update-aio-component-ui-to-be-more-obviously-in-dev-mode branch from 1c8b152 to b5a6868 Compare July 15, 2024 11:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@PixelJanitor PixelJanitor PixelJanitor left review comments

@anagstef anagstef anagstef approved these changes

@nikosdouvlis nikosdouvlis Awaiting requested review from nikosdouvlis

@panteliselef panteliselef Awaiting requested review from panteliselef

Assignees

@octoper octoper

Labels
clerk-js
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@desiprisg @clerk-cookie @anagstef @nikosdouvlis @octoper @kylemac @PixelJanitor