search

FirefoxUX / photon-icons

The design tokens for the Photon icons
Mozilla Public License 2.0
22 stars 13 forks source link

DevTools Pane/Panel arrow icon #43

Open DPX-designer opened 5 years ago

DPX-designer commented 5 years ago

This arrow svg will become the new DevTools expand/collapse arrow for all panes. I am currently finalizing the documentation for panes and wondered whether this svg could live with the other Photon icons so that I may link to it from the docs?

Pane-arrow.svg.zip

aminalhazwani commented 5 years ago

@mcroud we currently have this icon https://github.com/FirefoxUX/photon-icons/blob/master/icons/desktop/arrowhead-down-12.svg (which unfortunately is not accessible on the website) that is also use on about:newtab for collapsable sections. It's a smaller 12px version of our standard 16px icon.

image

Can DevTools panes use the icon up here or is there a larger context for introducing a new one?

DPX-designer commented 5 years ago

Interesting! Well this SVG is 'new' from a scale point of view only. It is very similar to what we have currently had, only the scale and format (PNG -> SVG) has been tweaked to coincide with padding measurements we are trying to standardize. So the filled-in, triangle style is what is there already.

aminalhazwani commented 5 years ago

@mcroud gotcha, thanks for the further explanation. Do you think there is space for using the same icon then?

I made a small test and replaced the icons with the Photon one, what do you think?

image image
DPX-designer commented 5 years ago

The chevron style does sit well with me for panel headers, your visuals work equally well as the filled in triangle.

The snag is that the filled in triangle lives in lots and lots of other places, not just panel headers, one of which is the Inspector code view:

screen shot 2018-11-26 at 15 46 50

The code view is a jungle of < and > symbols. There is the potential that having a chevron style icon may introduce a margin of confusion here. The alternative is to perhaps only update the panel headers, the argument against may be we're introducing a new icon to DevTools that only applies to some parts of the UI but behaviorally they have the same function? Tricky stuff!

aminalhazwani commented 5 years ago

Ahhhh so many arrow drops 🙂 Yeah, I agree with you that it makes sense to keep this as it is as it might get confusing with the markup.

Regarding the panel headers, I would leave the decision to you if you want to use the arrow head icon or the caret icon.

DPX-designer commented 5 years ago

@aminalhazwani Super, does the SVG meet the criteria for inclusion in the Photon Icon Viewer?

aminalhazwani commented 5 years ago

@mcroud it's looking good, only two minor things. We would need 4 separate versions of the icon (up, down, right, and left). And the icon should we wrapped in a 12x12px container.

If you need a .ai template you can find it here https://design.firefox.com/photon/resources/icons.html#icons-template 🙂

DPX-designer commented 5 years ago

@brassy- I have followed Amin's guidance above, please find below the icon with 4 directional variants, each within a 12px grid.

DevTools Arrow.zip

Let me know if there is anything else I need to do!

brassy- commented 5 years ago

Thank you! I’ll check on Monday

Il giorno ven 14 dic 2018 alle 15:55 mcroud notifications@github.com ha scritto:

@brassy- https://github.com/brassy- I have followed Amin's guidance above, please find below the icon with 4 directional variants, each within a 12px grid.

DevTools Arrow.zip https://github.com/FirefoxUX/photon-icons/files/2680496/DevTools.Arrow.zip

Let me know if there is anything else I need to do!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FirefoxUX/photon-icons/issues/43#issuecomment-447348959, or mute the thread https://github.com/notifications/unsubscribe-auth/AGBHw2XbVi-Xd9eGNkB7l1tj3szs6agGks5u47vmgaJpZM4Ywr9c .

ariasuni commented 4 years ago

Any news about this?