Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Svelte: more welcome banner behavior updates#64311

Merged
camdencheek merged 12 commits intomainfrom
cc/no-auto-banner
Aug 7, 2024
Merged

Svelte: more welcome banner behavior updates#64311
camdencheek merged 12 commits intomainfrom
cc/no-auto-banner

Conversation

@camdencheek
Copy link
Member

@camdencheek camdencheek commented Aug 6, 2024

This makes some requested changes to the welcome banner.

Notably:

  • We no longer show the dialog unless the user switches into the svelte version from react
  • We don't show the dialog on every switch
  • The dialog is accessible in the React via the "Learn more" button in the menu
  • Copy is updated to be less verbose
  • The request for feedback is only shown once when switching out of the svelte webapp

Apologies for the messy code. I reimplemented the dialog in React so we could show it before the user decides to switch. In a world where I had more time, I'd try to get the "svelte in react" stuff working so that's a tool we can use.

Video walkthrough

Figma with updated designs

Test plan

See video

@cla-bot cla-bot bot added the cla-signed label Aug 6, 2024
@camdencheek camdencheek marked this pull request as ready for review August 6, 2024 23:16
@camdencheek camdencheek requested a review from a team August 6, 2024 23:17
})

return (
<dialog ref={dialogRef} className={styles.dialog}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Copy link
Contributor

Choose a reason for hiding this comment

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

+1 that shoud support closing, esc and clicking outside the modal.

Copy link
Member Author

Choose a reason for hiding this comment

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

Skipping this for now because getting the open behavior right was not trivial


const isLightTheme = useIsLightTheme()

const show = (): void => dialogRef.current?.showModal()
Copy link
Contributor

Choose a reason for hiding this comment

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

useCallback? purely an over-optimization but because we do everywhere else as well so...

Copy link
Member Author

Choose a reason for hiding this comment

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

Skipping for now since this is just a static component

@camdencheek camdencheek merged commit 3ff0f07 into main Aug 7, 2024
@camdencheek camdencheek deleted the cc/no-auto-banner branch August 7, 2024 14:55
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants