feat(experiments): UX refresh for the no-code toolbar. #25190
Conversation
Phanatic
changed the title
|
Size Change: -939 kB (-45.51%) 🎉 Total Size: 1.12 MB
|
|
Do we need the Cancel/Save buttons here? I think a simple text input would do.
|
|
Clicking on the accordion items doesn't expand them. Screen.Recording.2024-09-25.at.16.07.36.mov |
|
I'm not sure I like having the select button directly on the accordion header.
The purpose of the accordion header is only to collapse/uncollapse an accordion item. I don't think it's a good idea to mix it with the functionality to select an element. There is no point selecting an element if a particular accordion item is collapsed, so in that case that functionality should be hidden. My suggestion:
|
|
Change text to No need to be courteous on buttons :)) it should convey the meaning and take up as little space as possible
|
|
I would just use a ➕ icon here. The target icon is already used by the "Select element" button. Don't repeat icons for different buttons (generally)
|
|
We have a standardized success tag for the dark mode (LemonTag type="success") which looks like this:
|
|
Capitalize first letter: |
|
I'd suggest a bit more elaborate copy here:
|
|
Do not allow removing all elements for a variant. At least one must always be present. Otherwise it's the same as
|
|
Do not allow removing the last test variant - we always need the
|
|
Variant keys should be editable. Again, I suggesting putting the input field inside the accordion content, and only render the variant key on the accordion header (similar to #25190 (comment))
|
|
The main action button
|
|
There's a horizontal overflow here, rendering a scroll bar Screen.Recording.2024-09-25.at.16.34.42.mov |
| } | ||
| return 0 |
There was a problem hiding this comment.
lol thank you for doing this
| @@ -3,8 +3,10 @@ import { cssEscape } from 'lib/utils/cssEscape' | |||
| import { ElementType } from '~/types' | |||
|
|
|||
| // these plus any element with cursor:pointer will be click targets | |||
| export const CLICK_TARGETS = ['a', 'button', 'input', 'select', 'textarea', 'label', 'h1'] | |||
| export const CLICK_TARGETS = ['a', 'button', 'input', 'select', 'textarea'] | |||
| export const EXPERIMENT_TARGETS = ['label', 'h1', 'h2', 'h3', 'h4', 'span', 'img'] | |||
There was a problem hiding this comment.
@jurajmajerik or @corywatilo is this a good set of elements to run experiments on? I don't want to put in a * here and would rather limit the set.
📸 UI snapshots have been updated4 snapshot changes in total. 0 added, 4 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated2 snapshot changes in total. 0 added, 2 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated2 snapshot changes in total. 0 added, 2 modified, 0 deleted:
Triggered by this commit. |
Problem
@corywatilo and I did a design review of the no-code toolbar and found a lot of issues we could fix easily.
Below is the list:
Changes
Before
After
After
👉 Stay up-to-date with PostHog coding conventions for a smoother review.
Does this work well for both Cloud and self-hosted?
Yes
How did you test this code?
Manually, in local development