firefoxux / styleguide Goto Github PK

Reported by @sevaan here: FirefoxUX/icons#10
We use both on this page: https://firefoxux.github.io/StyleGuide/#/buttons

But we should probably settle on one.

At line numbers 69, 70, and 71 over here -> https://github.com/FirefoxUX/StyleGuide/blob/master/contents/colours.html#L69 - they are all #2284e6. Is this intentional?

Apologies if this isn't the right place to ask this.

There is an arrow in the dropdown fields in the style guide, but this glyph is missing on the icons page.

Many docs website use this one https://www.algolia.com/

... we don't have 'em! Is this spec'd out somewhere other than the Sketch files @shorlander?

Firefox Heartbeat uses a Heart symbol that is not in this list.

The "import export" icon under the Places section on this page is a little hard to read at a small size.

(read the following in Seinfeld voice)

what's the deal with a static dir sitting in the repo?

Are they:

• Their own section (kinda weird since there are like three things)
• Part of Glyphs (since they are kinda glyphy)
• Part of Shapes (since they kinda work with prompts)

Michael and Markus were working on copy for this, I believe. I will make it look like something!

When you click on a style guide colour, it should automatically copy the hex value to the users clipboard (along with a little "Copied!" notification).

• We need to give the site typography a once over. I'll provide the css for it.
• Padding review.
• Follow style guide for various components (input fields, etc.)

https://cl.ly/2a3e1j252Y1X

FF 49.0.2
macOS 10.12.1

We internally agreed that we are building a Design System and not a Style Guide. Can we rename the repository accordingly? We should also align on who we name the repository under Firefox UX. Sometimes we user camel case other times hyphens. Personally I prefer all lowercase with hyphens.

Is this something we can fit into v1?

As per conversation with Madhava.
Also, see about making the height of the iframe be the height of the content.

How do we integrate that site into the style guide? Link out? Build it as a sub-page in the site?

v1 of the site will not have search.

I've recently started using browser_style for my popups, mainly to try and see how the styles work. During that I have made a few observations and @bwinton asked me to post those here:

• The popup styles aren't friendly in combination with semantic elements like buttons, most notably the tabs and footer parts. For example to use a button in a footer you have to manually reset multiple properties to the values of .panel-section-footer-button in order for the styles to match. This of course moves the browser styles back into the extension, which is not optimal.
• The list item contents have nice styles but there seems to be no spacing between icon, text and keyboard shortcut and no max-size to the icon, which can result in pretty weird looking results. This is easy to fix from a style sheet, but will lead to every extension looking just slightly different.
• It is not very obvious how separators and sections in a panel should be interleaved. For example the examples just silently use a separator right after the tabs section, but not after the header or before the footer section.
• Using some semantic elements like <ul> as .panel-section-list may require clever resetting of styles. While I do not necessarily think that's something the browser_styles should take care of, it is weird to see all the panel examples just use <div>s
• The styles de-style all elements but only apply styles to the text, checkbox and radio types.
• I think it'd be nice to be able to just use things like <section> without classes when enabling browser_styles in a popup, since it's specifically opt-in, but I can understand if you want to avoid that.
• It seems weird to have to create elements for separators, but I assume it's the easiest way to make them not mess with the flex layout.

That's all that comes to mind right now, I hope this is useful input. Generally I really like the idea of having native styles an extension can use to appear more integrated.

The current choice does not have enough contrast.

Working on it, need to move it past the first revision.

Since we're killing Patterns.

For Selections:

• Change the order: Active On, Active Off, Inactive On, Inactive Off
• Alignment: Left and right switches should line up with the edge of the div line (with the 2nd and 3rd centered in bewteen).
• Add labels underneath each switch (use above for labels)

For Progress States:

• switch order and add labels (Installing, Un-installing)
• Add code
• Alignment: Align with the first 2 switches above in default state

For Download:

• Can we add more states to show the switch filling up so that we have 3 before install successful?
• Add Labels: Downlading, Download Complete
  and code 🙂

Please remove the top-level Patterns section. We do not have content for this yet.

For quick reference

How to space groups of elements on pages where there are different kinds of controls.

All of the pages in the contents directory should have reasonable text in them, describing the various pages, and including rationale where appropriate.
If you want to work on this, please leave a comment as to which file you're updating, so that we don't duplicate work! 😃

Hey @bwinton here are some changes we'll need for the menu, let me know if you have any questions. Once these are done I'll take another look :). Thanks!

• Motion of Menu (including the underlay movement) - https://www.dropbox.com/s/a94shyb943mtrzy/style_guide_nav.mp4?dl=0
• Vertical Spacing - for main Categories (Overview, Design Foundation, etc.) the spacing should be 60px from base line to base line
• Vertical Spacing - from main category to sub category - 40px from base line to base line
• Font Weights - Can we drop the weight of the main categories (but 1 weight), they are looking a little heavy
• Arrows - they are 7 pixel wide (up for closed and down for open). Do I need to provide an asset for these or can these be created in css?
• Hover state of main categories - on mouse over the text should change to #505050
• Hover state of selected sub categories - none needed (currently they turn to a lighter blue but we can remove this since clicking the section again doesn't do anything)
• Sub menu items shouldn't shift up and down when selected

The Mozilla Style Guide on mozilla.org used to include wordmarks for use with Firefox. Trying to access these wordmarks results in a redirect to "https://design.firefox.com/photon/visuals/product-identity-assets.html#using-icons-with-firefox-wordmarks-or-logos" which doesn't include wordmarks for Firefox (+ Quantum), Nightly, etc. Is the intent that recreating wordmarks is up to the individual?

Additionally "Product Identity Assets" is (opinion mine) needlessly complicated. Can we just have a subsection for "Logos and Wordmarks"?

STEPS TO REPRODUCE

1. Visit https://bwinton.github.io/StyleGuide/
2. Click Firefox UX link in top left

EXPECTED RESULTS

• It directs to the home page of the style guide: https://bwinton.github.io/StyleGuide/#/welcome

ACTUAL RESULTS

• It goes to this WIP page https://firefoxux.github.io/

Currently browsing...
(this is also a test issue to check if Trello integration is working)

https://www.mozilla.org/en-US/styleguide/

is old and outdated.

Couple options:

• Max height for a code text field is ~250px, with a button or txt link to expand and show all code.
• Max height for a code text field is ~250px and scrolls vertically.
• Max height is one line of copy and the field scrolls horizontally.

All fields will have a "click to copy" button. If that's the case, do we need to expand to show all?

How does the user know that they can copy the color, and how would the know that the color is now in their clipboard? And would they now it the color contains the # or not? Even if indication is only via the tooltip, giving feedback seams very important to me.
For examples on how such indication and feedback could work see bit.ly shortened link or dropbox & google drive link sharing.

Scour the style guide files and makes sure everything is represented on the style guide site.

• Sketch master file
• CSS values file
• PS master file (?)
• Design Values PDF
• Glyph template of some kind

We have them right now, but not sure if we still need them. Anyhow, it might be valuable to have specs for print stuff too.

Need some inspiring and engaging copy for the Home, Visual Design, Components and Resources pages.

The link to the "Staging Site" at the top of the old Style Guide is dead and should probably redirect to the correct place.

http://design.firefox.com/StyleGuide/