Actions modal and icon UI update #14856
Conversation
Modal size and layout - increase the size of the modal header (and others) - increased modal size - changed the grid to 3 columns rather than 2 - increase the size of the label text - moved actions to the top and apps to the bottom Items: - increased the size of the automation labels - added a background color to action icons - increase the size of all icons - changed the color of action icons to gray 900 item cards: - updated the spacing within the item cards - changed border color of items disabled items: - added opacity to the disabled actions
- added background to trigger - orange - added background color to actions - indigo
- changed backend log icon - added static values for trigger icon and action icons - added a background to external app actions - changed layout of labels + fields - resized automation cards - removed automation label. Made Automation title more prominent. - creation automation modal layout changed - removed label for name field - removed help text - removed warning - added background to icons - changed item size - added placeholder to name input
- improved inline alert title spacing - added a background color to the modal component - it was grey on light - changed static color of triggers - yellow -
- the grey on grey has bugged me for eternity. I also like how it looks in darkest mode too - the contrast is nice.
- updated tag component to make it stand out more and add more color to the UI. Most of the time, the tag component is used to inform the user if a feature is paid. This work emphasizes this.
|
QA Wolf here! As you write new code it's important that your test coverage is keeping up. |
aptkingston
changed the base branch from
v3-ui
to
feature/automation-branching-ux
|
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: 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: |
|
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
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. |
|
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! |
- updated looping icon (cyan + black) - updated looping label type - to p - removed label margin
- spacing (between delete and chevron icons) was different between looping and actions
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