feat(3000): Welcome panel #18842

benjackwhite · 2023-11-23T10:04:00Z

Problem

Some viewports can end up with really small banners which get very cramped.
Also we wanted a welcome banner. Merged into the same PR as I was working with both together at first, before deciding against the banner in the welcome page

Changes

For reviewers: You can access it always simply with http://localhost:8000/home#panel=welcome

Use a container query to change the layout optimising for space.
Added a Welcome panel with its own flag that we can setup for existing posthog users only.
Not married to the copy or list - really happy to have suggestions there.
Adds stories for the side panel

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

How did you test this code?

posthog-bot · 2023-11-23T10:12:14Z

📸 UI snapshots have been updated

8 snapshot changes in total. 0 added, 8 modified, 0 deleted:

chromium: 0 added, 8 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

github-actions · 2023-11-23T10:19:37Z

Size Change: +76 B (0%)

Total Size: 1.83 MB

ℹ️ View Unchanged

Filename	Size	Change
`frontend/dist/toolbar.js`	1.83 MB	+76 B (0%)

_{compressed-size-action}

posthog-bot · 2023-11-23T10:58:11Z

📸 UI snapshots have been updated

9 snapshot changes in total. 0 added, 9 modified, 0 deleted:

chromium: 0 added, 9 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-11-23T15:26:03Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

…o feat/welcome-to-3000

posthog-bot · 2023-11-23T15:50:19Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Twixes

This is very cool. As for the copy and design, gonna give @corywatilo a chance to poke at this

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

frontend/__snapshots__/lemon-ui-lemon-banner--error.png

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

corywatilo · 2023-12-01T23:18:07Z

FYI I changed the tab to say "What's new?". We can use it for specific updates when we want to in the future. (Different than changelog.)

Todos

Get button to open in a new window (currently opens in sidebar)
Fix above-mentioned button where I inlined display: inline-flex which the linter is not too happy about
Update button CTA to: /blog/posthog-as-a-dev-tool (to match this post)
Add in @lottiecoxon art (when it's ready) - not a blocker to merging

posthog-bot · 2023-12-01T23:21:03Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-12-05T17:04:03Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

Twixes

The new layout is great! I addressed the to-dos (except Lottie's art) and made some extra tweaks, here's what this looks like now:

This should be good to merge. I'm not sure if good to release, because I couldn't see the logic to set a person property on side panel close, but that's not PR-blocking.

Twixes · 2023-12-05T16:59:55Z

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

+                    We're past zero to one.
+                    <br />
+                    In this new version of PostHog, we're going from one… to&nbsp;3000.


Most style guides have a rule for spelling the numbers out when they're under ten (sometimes even under a hundred), because "zero to one" is much more legible than "0 to 1" in a non-technical context. I think the startup-y reference is also clearer with "zero to one" rather than "0 to 1", because the former is what the book is called.
This is a bit tricky because then we're introducing 3000, which is a large number. I added an ellipsis to make the context shift explicit, maybe that helps?

Twixes · 2023-12-05T17:01:19Z

frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx

+                    </Card>
+                    <Card className="flex flex-col">
+                        <div className="flex-1">
+                            <Title>Command bar</Title>


The "command palette" is the old name… the new iteration is called the "command bar"

frontend/src/layout/navigation-3000/sidepanel/sidePanelLogic.tsx

posthog-bot · 2023-12-05T17:12:41Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-12-05T17:21:22Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2023-12-05T18:54:52Z

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

chromium: 0 added, 4 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

* Improve banner layout with container queries * Update UI snapshots for `chromium` (1) * Fix * Update UI snapshots for `chromium` (1) * Fix * Fixes * Fix up closing * Started adding stories * Fixed up when it gets shown * Fixes * Update UI snapshots for `chromium` (1) * Fixes * fix * Update UI snapshots for `chromium` (1) * Fix * PR feedback * Added event for the flag * updates * Bunch of fixes * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Fixes * Fix lemon banner small size and add sidepanel stories * Fix * Update UI snapshots for `chromium` (1) * Update frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx Co-authored-by: Thomas Obermüller <[email protected]> * Fix * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Fix * Rework the welcome copy and tune styles * Remove a "the" * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) * updated design + content * transparent close button * dark mode images * finished dark mode screenshots * polish * updated welcome icon, label * updated welcome title to match tab * tweaked spacing * Update UI snapshots for `chromium` (1) * Limit opening posthog.com links in side panel to docs * Clean up the panel * Tune default and min width of side panel * Tweak some text * The palette is no more * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) * Constrain "Read the blog post" width * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Watilo <[email protected]> Co-authored-by: Thomas Obermüller <[email protected]> Co-authored-by: Michael Matloka <[email protected]>

joethreepwood · 2023-12-06T10:15:49Z

Not to rain on everyone's parade, but I quite strongly that this new welcome panel isn't readable and needs to be rolled back. The announcement looks great viewed in isolation, but when viewed in a sidebar alongside the rest of PostHog...

There's so much text on the page, no discernable pattern for a grid to understand it across the left and right hand sides of the page, and the level of contrast between the images and the actual text make it hard to know which is which. Some sections are zoomed in, some aren't. The images on the right are clipped off, which makes me feel like I'm not seeing the full image.

Even after looking at it for a few minutes and trying to read through item-by-item, I still find it hard to follow and really difficult to look at. And that's when I'm prepared to see PostHog 3000 - actual users will be even more overwhelmed because they won't expect this.

We could try to address the hierarchy by making the welcome message boxes order and highlight better, removing images - but my direct feedback is that we'd be best off reverting to the previous version and laying this information out as simply as possible.

EDIT: additional feedback here

benjackwhite and others added 2 commits November 23, 2023 10:25

Improve banner layout with container queries

01ddcca

Update UI snapshots for chromium (1)

ac8c586

benjackwhite and others added 2 commits November 23, 2023 11:50

Fix

a28b9e4

Update UI snapshots for chromium (1)

b5c7468

benjackwhite added 6 commits November 23, 2023 14:55

Fix

635ed63

Fixes

0544d51

Fix up closing

214c782

Started adding stories

2f91d4b

Fixed up when it gets shown

592fe45

Merge branch 'master' into feat/welcome-to-3000

07d3406

benjackwhite changed the title ~~feat: Improve banner layout with container queries~~ feat: Welcome panel and improved banner layout with container queries Nov 23, 2023

benjackwhite requested a review from a team November 23, 2023 15:20

benjackwhite and others added 3 commits November 23, 2023 16:21

Fixes

525d9bc

Update UI snapshots for chromium (1)

fdae1b1

Fixes

447bd70

benjackwhite and others added 4 commits November 23, 2023 16:30

fix

38cecad

Merge branch 'feat/welcome-to-3000' of github.com:PostHog/posthog int…

0497658

…o feat/welcome-to-3000

Merge branch 'master' into feat/welcome-to-3000

f12d7c9

Update UI snapshots for chromium (1)

bc90f35

Fix

499c7d1

benjackwhite marked this pull request as ready for review November 23, 2023 16:16

corywatilo self-assigned this Nov 23, 2023

Twixes reviewed Nov 23, 2023

View reviewed changes

benjackwhite added 2 commits November 24, 2023 09:51

PR feedback

dca580d

Added event for the flag

48e88b8

corywatilo requested a review from a team December 1, 2023 23:15

Update UI snapshots for chromium (1)

8923a3a

Twixes added 2 commits December 5, 2023 15:00

Merge branch 'master' into feat/welcome-to-3000

6e413b7

Limit opening posthog.com links in side panel to docs

bd7b40c

Twixes changed the title ~~feat: Welcome panel and improved banner layout with container queries~~ feat(3000): Welcome panel Dec 5, 2023

Clean up the panel

a9b9675

Twixes force-pushed the feat/welcome-to-3000 branch from e99b536 to a9b9675 Compare December 5, 2023 16:38

PostHog deleted a comment from posthog-bot Dec 5, 2023

Twixes added 2 commits December 5, 2023 17:45

Tune default and min width of side panel

645d68e

Tweak some text

becee00

Twixes force-pushed the feat/welcome-to-3000 branch from 438a782 to becee00 Compare December 5, 2023 16:54

PostHog deleted a comment from posthog-bot Dec 5, 2023

Twixes and others added 2 commits December 5, 2023 18:00

The palette is no more

f953d15

Update UI snapshots for chromium (1)

92a284f

Twixes approved these changes Dec 5, 2023

View reviewed changes

Update UI snapshots for chromium (1)

f042e21

Update UI snapshots for chromium (1)

0d62428

Twixes and others added 3 commits December 5, 2023 19:43

Constrain "Read the blog post" width

e9bdf41

Merge branch 'master' into feat/welcome-to-3000

1fce892

Update UI snapshots for chromium (1)

289f04a

Twixes merged commit 62e216b into master Dec 5, 2023

Twixes deleted the feat/welcome-to-3000 branch December 5, 2023 19:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(3000): Welcome panel #18842

feat(3000): Welcome panel #18842

benjackwhite commented Nov 23, 2023 •

edited

Loading

posthog-bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 •

edited

Loading

posthog-bot commented Nov 23, 2023

posthog-bot commented Nov 23, 2023

posthog-bot commented Nov 23, 2023

Twixes left a comment

corywatilo commented Dec 1, 2023 •

edited by Twixes

Loading

posthog-bot commented Dec 1, 2023

posthog-bot commented Dec 5, 2023

Twixes left a comment

Twixes Dec 5, 2023

Twixes Dec 5, 2023

posthog-bot commented Dec 5, 2023

posthog-bot commented Dec 5, 2023

posthog-bot commented Dec 5, 2023

joethreepwood commented Dec 6, 2023 •

edited

Loading

feat(3000): Welcome panel #18842

feat(3000): Welcome panel #18842

Conversation

benjackwhite commented Nov 23, 2023 • edited Loading

Problem

Changes

How did you test this code?

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

github-actions bot commented Nov 23, 2023 • edited Loading

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

posthog-bot commented Nov 23, 2023

📸 UI snapshots have been updated

Twixes left a comment

Choose a reason for hiding this comment

corywatilo commented Dec 1, 2023 • edited by Twixes Loading

Todos

posthog-bot commented Dec 1, 2023

📸 UI snapshots have been updated

posthog-bot commented Dec 5, 2023

📸 UI snapshots have been updated

Twixes left a comment

Choose a reason for hiding this comment

Twixes Dec 5, 2023

Choose a reason for hiding this comment

Twixes Dec 5, 2023

Choose a reason for hiding this comment

posthog-bot commented Dec 5, 2023

📸 UI snapshots have been updated

posthog-bot commented Dec 5, 2023

📸 UI snapshots have been updated

posthog-bot commented Dec 5, 2023

📸 UI snapshots have been updated

joethreepwood commented Dec 6, 2023 • edited Loading

benjackwhite commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading

corywatilo commented Dec 1, 2023 •

edited by Twixes

Loading

joethreepwood commented Dec 6, 2023 •

edited

Loading