Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Feature/quick actions v1 #10362
This PR adds the first iteration of static Quick Actions.
PR looks a bit big, but the majority of changes is from moving things around.
Update release notes:
osullivanchris left a comment
Hey I have red-lined the original mocks so that we can nail all the details. There are some small things I can see which are slightly off. E.g. site icon, text sizes and colours, size of Quick Action buttons, spacings. I know you were working without a spec so I think you should have everything you need here now and hopefully its just a case of changing values and not too much work. The text sizes are taken from those defined here https://material.io/design/typography/the-type-system.html#type-scale and the colours are taken from our colour studio values.
One thing I noticed that I am not clear on how to spec is the shadows on the Quick Actions. I'm not sure how we define shadows today but I found these guidelines which specify default elevation values.
It looks like you have something like a FAB (value 6dp) right now. I think we need something more like a card (1dp) or button (2dp)
If we don't use those elevation values, and need to code it ourselves for now, the values in the sketch file are 1px distance, 2px blur, HEX 000000 with 20% opacity (alpha 20)
Let me know if any more clarification needed or any other questions!
@osullivanchris Thanks for the redlines and comments!
I was using FAB for quick action buttons, so yes, they had a big shadow. I changed it to card shadow that we are using (2dp).
I changed the font type of site title and switch site button to medium and removed bold.
Hope I didn't miss anything!
Also, I was wondering, is there anything extra you maybe want to track?
@khaykov looks much better thanks for making those tweaks!
Just a few more to follow up on:
Sorry the default dimension for what? A FAB size or something else? I thought these circle buttons were our own design rather than a default component, so I would have gone with the size per the mock. But maybe there's something I'm missing.
Might not be exactly how you've written it in code but hope that makes sense! Thanks!
The dimension of FAB. Quick action buttons are just FAB's, so they already have correct dimensions.
Good catch! Totally missed that one.
@khaykov Yup looking great now. Checked with @SylvesterWilmott and yes the Quick Actions should be the same size as FABs. When I'm measuring it here it looks like the buttons are 48dp when I would expect 56. But it might be that I'm looking at the wrong density. Per the guidelines the only sizes are 56 and 40. Assuming you're using 56 already as 40 would be much too small.
The guidelines also mention only having one FAB per page. As long as it looks right I'm ok. And it looks right (just double checking that detail above). Just wanted to mention this in case there is any semantic issues or incase we get dinged in app store review or elsewhere. As I said once it looks like the mock I'm happy!
Two other small details that came up chatting to Sylvester
@osullivanchris Thanks for the guidance! I updated layout:
I double-checked and the size is correct
[Status] Needs Code Review
[Status] Needs Design Review
Aug 21, 2019
theck13 left a comment
I left some change requests in the code for review. I also have a few comments about the interface. We may want to summon @osullivanchris for input on the following.
The touch feedback for the Switch Site button isn't what I would expect from a text button. Material guidelines show a rectangular background when pressing text buttons. Should we change the background from
The Quick Action buttons look well-aligned with the interface below them on a typical phone form factor. On a tablet, they extend beyond the text. Should we use the content margin dimensions to keep the Quick Action buttons aligned with the interface below them on large sccreen? See the screenshots below for illustration.
The same situation applies to the site title and address. See the screenshots below for illustration.
Thanks for a thorough review, @theck13 !
Good catch! I changed the background and added a little bit of padding to the sides so it will look better.
I agree, but honestly not sure how to approach this. We are using layout_weight and evenly spreading button, so any margin will mess this up. I'm open to ideas :)
I added content margin to the site title and address tho :)
Great details to spot, thanks @theck13
Agree with all of those. Looks like the button touch area, and the content padding have already been adjusted.
Is it not possible to spread the buttons evenly within an area? Not sure how it would work in code. But could it be a separate div with margin outside of it, and the items spaced equally within it? Alternatively I could provide paddings between the buttons, but not sure that will be as successful across device sizes as evenly spacing them
@osullivanchris Hm. Maybe I'm missing something?
After adding padding, we can tell first and last button to stick to sides, instead of floating in the center of their box, this way we will get them to be extacly where we want, but this will make other buttons look weird:
this sounds like what I would expect
I don't think the outside of the buttons need to be strictly aligned to the edge of the list content. I would rather they end up narrower than the list, rather than spreading out wider than it. If this is confusing I can explain better on a call tomorrow or something! :)