diff --git a/CHANGELOG.md b/CHANGELOG.md index 41274afe6..e7ab11b2b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Photon Design System Releases +## [[0.6.6] - 2018-02-06](https://github.com/firefoxux/photon/releases/tag/v0.6.6) + +### Fix + +- [#244](https://github.com/firefoxux/photon/issues/244) Component card: Describe +- [#261](https://github.com/firefoxux/photon/issues/261) Added a tooltip for đź‘Ť đź‘Ž +- [#251](https://github.com/firefoxux/photon/issues/251) Add a JS event listener to the interactive radio button example + ## [[0.6.5] - 2018-01-30](https://github.com/firefoxux/photon/releases/tag/v0.6.5) ### Fix diff --git a/contents/components/-input-fields.html b/contents/components/-input-fields.html deleted file mode 100644 index 36c9fe6a2..000000000 --- a/contents/components/-input-fields.html +++ /dev/null @@ -1,174 +0,0 @@ -
- <%- include('../includes/global/message-bar.html', {type: 'Warning', text: 'This is a working draft', button: 'Report issue'}); %> -

Input Fields

-

- Input fields allow users to add text within a defined area. -

-
- -
-

Usage

-

- Use input fields when requiring users to enter text (like email address, account name, search keyword, etc.) that can’t be automatically generated or displayed. -

-
- -
-

Types

- -
-
- -

Text Field

-

- A text field can simply store data a user enters or can be used to validate the data and offer hints for meeting the field’s input criteria. -

-
- -
- -

Search Field

-

- A search field can either live-search results or present search results after users send a query. -

- -
-
-
- -
-

Styles

-

Size and Color

-
-
- -
-
-

Label: Body 10, Grey 90 -
Hint: Body 20, Grey 90, 40% -
Field height: 30px

-
-
- -
-
- -
-
-

Label: Body 10, Grey 90 -
Hint: Body 20, Grey 90, 40% -
Field height: 30px -
Icon: 16Ă—16px, Gray 90, 40%

-
-
- -

Behaviors

-
-
- -
-
-


Border color:
Grey 90 #0c0c0d 30%

-
-
- -
-
- -
-
-


Border color:
Grey 90 #0c0c0d 50%

-
-
- -
-
- -
-
-


Border color:
Focused square (TBD)

-
-
- -
-
- -
-
-


Border color:
Focused square (TBD)

-
-
- -
-
- -
-
-


Border color:
Grey 90 #0c0c0d 30%

-
-
- -
-
- -
-
-


Border color:
Focused square (TBD)

-
-
-
- -
-

Variants

-

The following variants are optional for input fields. Pairing variants if needed.

- -

Button

-
-
- -
-
-

A call to action button that interacts with the input field are recommended to stick next to the input field.

-
-
- -

Caption

-
-
- -
-
-

Captions can tell the criteria of the input field. Use Caption 10 for captions. See Typography

-

* The Visual design is TBD

-
-
- -

Dropdown List

-
-
- -
-
-

A dropdown list can be paired with input fields for giving suggestions.

-
-
-
- -
-

Copy Rules

-

Error Message

-

-

- -

Search Field Hint

-

-

-

-
\ No newline at end of file diff --git a/contents/components/card.html b/contents/components/card.html new file mode 100644 index 000000000..e78576bd6 --- /dev/null +++ b/contents/components/card.html @@ -0,0 +1,58 @@ +
+ <%- include('../includes/global/message-bar.html', {type: 'Warning', text: 'This is a working draft', button: 'Report Issue'}); %> +

Card

+

+ Card is a component to visually group related information and controls. +

+
+ +
+

Usage

+
+
+ TestPilot website uses the card component +
+
+

+ When there are collections of images and components that need to be presented on the same page, use cards to help users quickly scan the information from collections to collections. +

+
+
+
+ +
+

Styles

+

Borders

+
+
+ visual examples of border radius and highlight +
+
+

Border radius: 4px

+

Highlight border: Grey 30 #D7D7DB, 5px (outside)

+
+
+ +

Shadow

+
+
+ a visual example of shadow 10 +
+
+

Shadow is optional for cards.

+

If there’s a need of adding a shadow, use shadow 10 to highlight elevation.

+
+
+ +

Padding

+

Use the same padding on the left & right to keep the visual balance.

+
+
+ The activity stream example of left right padding +
+
+

Default padding: 16px

+

Large padding: 20px

+
+
+
\ No newline at end of file diff --git a/contents/components/radio-buttons.html b/contents/components/radio-buttons.html index 61c97404f..65868cc66 100644 --- a/contents/components/radio-buttons.html +++ b/contents/components/radio-buttons.html @@ -213,7 +213,27 @@

Unselected

Focused

- +
+
+
+
+ When Nightly Starts +
+ + +
+
+ + +
+
+ + +
+
+
+
+
Interactive example (Currently only renders correctly in Firefox.)
diff --git a/contents/includes/copy/capitalization/uppercase-usage.html b/contents/includes/copy/capitalization/uppercase-usage.html index b9bf436e8..ee3a668fc 100644 --- a/contents/includes/copy/capitalization/uppercase-usage.html +++ b/contents/includes/copy/capitalization/uppercase-usage.html @@ -6,7 +6,7 @@
- an Activity Stream card using uppercase for a title + an Activity Stream card using uppercase for a title
Card with secondary text elements in all caps
diff --git a/contents/includes/introduction/introduction-uncanny-valley.html b/contents/includes/introduction/introduction-uncanny-valley.html index ba32e860f..eaecea2d5 100644 --- a/contents/includes/introduction/introduction-uncanny-valley.html +++ b/contents/includes/introduction/introduction-uncanny-valley.html @@ -14,7 +14,7 @@

- 3. Uncanny Valley
So much platform that people do not feel the product, but not enough for it to feel it fully native + 3. Uncanny Valley
So much platform that people do not feel the product, but not enough for it to feel fully native

@@ -22,4 +22,4 @@ 4. No Brand
So much platform that people do not feel the product

-
\ No newline at end of file + diff --git a/contents/index.json b/contents/index.json index c1794d16b..97353a773 100644 --- a/contents/index.json +++ b/contents/index.json @@ -97,6 +97,9 @@ "file": "buttons.html"}, {"title": "Checkboxes", "file": "checkboxes.html"}, + {"title": "Card", + "file": "card.html", + "draft":"true"}, {"title": "Doorhangers", "file": "doorhangers.html", "draft": "true"}, diff --git a/contents/visuals/color.html b/contents/visuals/color.html index b3abaceb3..c172348d6 100644 --- a/contents/visuals/color.html +++ b/contents/visuals/color.html @@ -23,10 +23,6 @@

Blue

Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the active tab in Firefox default theme.

<% include ../includes/color/color-blue.html %> -

- Blue 50 can be used with an alpha channel in elements like the focus state of a component. -

- <% include ../includes/color/color-blue-alpha.html %>

Teal

@@ -81,10 +77,6 @@

Grey

Firefox Grey is commonly used for interfaces (e.g., Firefox light theme).

<% include ../includes/color/color-grey.html %> -

- Grey 90 can be used with an alpha channel in elements like icons, default buttons, overlays and shadows. -

- <% include ../includes/color/color-grey-alpha.html %>

White

diff --git a/images/components/card/borders.png b/images/components/card/borders.png new file mode 100644 index 000000000..0967221f2 Binary files /dev/null and b/images/components/card/borders.png differ diff --git a/images/components/card/card-usage.svg b/images/components/card/card-usage.svg new file mode 100644 index 000000000..a15f53e6f --- /dev/null +++ b/images/components/card/card-usage.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/components/card/padding.svg b/images/components/card/padding.svg new file mode 100644 index 000000000..8a74ba2bc --- /dev/null +++ b/images/components/card/padding.svg @@ -0,0 +1 @@ +12px \ No newline at end of file diff --git a/images/components/card/padding_1.svg b/images/components/card/padding_1.svg new file mode 100644 index 000000000..b4f9ecb72 --- /dev/null +++ b/images/components/card/padding_1.svg @@ -0,0 +1 @@ +12px \ No newline at end of file diff --git a/images/components/card/padding_2.svg b/images/components/card/padding_2.svg new file mode 100644 index 000000000..efae4dcb7 --- /dev/null +++ b/images/components/card/padding_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/components/card/shadow.svg b/images/components/card/shadow.svg new file mode 100644 index 000000000..a1552c43f --- /dev/null +++ b/images/components/card/shadow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/copy/capitalization/capitalization-all-caps-dekstop.png b/images/copy/capitalization/capitalization-all-caps-dekstop.png new file mode 100644 index 000000000..ada5b0b68 Binary files /dev/null and b/images/copy/capitalization/capitalization-all-caps-dekstop.png differ diff --git a/images/link/link-focused.svg b/images/link/link-focused.svg index 8fcd50400..abec58cc6 100644 --- a/images/link/link-focused.svg +++ b/images/link/link-focused.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 07c4518a5..fe36ea564 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4074,7 +4074,7 @@ "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", - "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", + "integrity": "sha1-qjiWs+abSH8X4x7SFD1pqOMMLYo=", "dev": true }, "globby": { @@ -4094,7 +4094,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -4127,7 +4127,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -5620,7 +5620,7 @@ "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", "requires": { "brace-expansion": "1.1.8" } @@ -5729,7 +5729,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -5820,7 +5820,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -6213,7 +6213,7 @@ "photon-colors": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/photon-colors/-/photon-colors-2.0.1.tgz", - "integrity": "sha512-0plqHIhBgKj7hLja1JFC6GcoTFjZe78OumiJ00k+Y6wLDJH1TxisWBA4PlLOzU1oRuuHZSlLuv2rRTw6dLebDw==", + "integrity": "sha1-RHCfXs8A738tzZyJ4kqNlUOUBKs=", "dev": true }, "pify": { @@ -7049,7 +7049,7 @@ "readable-stream": { "version": "2.2.11", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz", - "integrity": "sha512-h+8+r3MKEhkiVrwdKL8aWs1oc1VvBu33ueshOvS26RsZQ3Amhx/oO3TKe4lApSV9ueY6as8EAh7mtuFjdlhg9Q==", + "integrity": "sha1-B5azH412iAB/8Lk6gIjTSqF8D3I=", "dev": true, "requires": { "core-util-is": "1.0.2", @@ -7398,7 +7398,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -7470,7 +7470,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -8211,7 +8211,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -9031,7 +9031,7 @@ "wide-align": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=", "dev": true, "requires": { "string-width": "1.0.2" diff --git a/src/components/Feedback.jsx b/src/components/Feedback.jsx index 0497b0180..1f4de0df0 100644 --- a/src/components/Feedback.jsx +++ b/src/components/Feedback.jsx @@ -38,14 +38,14 @@ const Feedback = connect(state => {

{'đź‘Ť'} {'đź‘Ž'}

diff --git a/src/components/TableOfContents.jsx b/src/components/TableOfContents.jsx index 102bff00e..a56f4fa4f 100644 --- a/src/components/TableOfContents.jsx +++ b/src/components/TableOfContents.jsx @@ -112,7 +112,7 @@ const TableOfContents = React.createClass({ href="https://github.com/FirefoxUX/photon/releases" >{'Changelog'} - {'v0.6.5'} + {'v0.6.6'}