qa-wolf[bot]
commented
1 month ago QA Wolf here! As you write new code it's important that your test coverage is keeping up. Click here to request test coverage for this PR!
Open joebudi opened 1 month ago
qa-wolf[bot]
commented
1 month ago QA Wolf here! As you write new code it's important that your test coverage is keeping up. Click here to request test coverage for this PR!
aptkingston
commented
1 month ago I think these changes look really good Joe 👌
Only thing I spotted is that the looping icon needs updated to match the new icon styles:
I think the reduction in text here is welcome:
But do you reckon we could just remove it in general? We could put a warning icon up beside the activated toggle if the app is unpublished or something. I just think having this big warning in general looks not great and is very front and center.
I reckon we should also bring back the arrows for branches, because there are definitely cases where you'd want to reorder your branches, and the only option without that is to delete and recreate your conditions on every branch which would be quite tedious.
I don't mind the width reduction of the steps, but I don't like that this is now on 2 lines:
We should reduce the text so it fits on one line or increase the width again slightly. Not related to your changes, but this text also doesn't need to be so prominent and white. Maybe a size reduction and a darker shade of grey could work.
joebudi
commented
1 month ago I initially removed the warning from the new automation model. @PClmnt felt it was needed. I feel that if it is needed, this is not the place to show it - considering it's the first thing people see, and the action (publish) is the last thing users do.
Good spot with the looping icon. I wanted to create a 3rd category - Logic or something and provide a different color for them. If I was to make another change - I would change the shape of the trigger icon to a hexagon or something to make it really stand out - or the budibase logo arrow.
Branching arrows
There's a lot of power in those arrows - I don't like that they come before the warning - they look like a UI action for reordering branches. I think people will click them without reading the warning - at the bottom of the branch.
I would add a label above the branch to say something similar to the way Hubspot does it:
Also... if we do add back the arrows, I'd probably add a more icon and place the delete, left, and right functionality in there.
ben-budibase
commented
1 month ago @joebudi @aptkingston
Joe and had a call earlier with version iterations on the automation branching. As you'll see I've amended the design to include Joe's latest additions as well as some of my own. These include having 'First check this branch', then 'then check this branch' at the top of the nodes. In addition, we've removed the info text and placed the branch movement buttons in a submenu with contextual labels, that way the user understands what they mean.
Let me know your thoughts!
Description
I updated the UI in several places, primarily the Automations section, to improve the design and experience.
I made styling changes that were not attached to our design system - specifically, the yellow and indigo within automations. These colors make the UI "pop." Happy to discuss this in more detail.
@deanhannigan I removed the left and right arrows on branches—I don't think they're needed. We can add them back if necessary.
Screenshots
Automations
Darkest
Light
New Automation Modal
Darkest
Light
New Automation Action Modal
It would be beneficial to introduce a third category - Logic to this modal. I would also change Condition to "Continue If"
Darkest ![Uploading CleanShot 2024-10-23 at 15.54.59@2x.png…]()
Light
New Automation Card
Darkest
Tag
Darkest
Light
CTA tag
Non-CTA tag
Alignment issue
Add a small description in layman's terms of what this PR achieves. This will be used in the release notes.
I believe it improves the overall UX/UI