From 2ef3489a917cb25cdbea237db7f6e4ea02cc4932 Mon Sep 17 00:00:00 2001
From: Ed Ngai <edmund.ngai@salesforce.com>
Date: Fri, 12 Jan 2018 17:56:11 -0800
Subject: [PATCH] feat(icons): add currentColor example (#3007)

---
 ui/components/icons/_doc.scss        |  4 ++++
 ui/components/icons/base/_index.scss |  2 ++
 ui/components/icons/base/example.jsx | 14 +++++++++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui/components/icons/_doc.scss b/ui/components/icons/_doc.scss
index e1580c7472..0e60cf4e37 100644
--- a/ui/components/icons/_doc.scss
+++ b/ui/components/icons/_doc.scss
@@ -49,6 +49,10 @@
  * - [Standard](/components/icons?variant=standard) and [Custom](/components/icons?variant=custom) icons have a rounded square shape and use a class on the container for the background color.
  * - [Utility](/components/icons?variant=base) icons have no background color.
  *
+ * #### Changing the fill of an icon using currentColor
+ *
+ * To change the fill of an icon to match the current color of it's parent, add the `slds-current-color` class to the icon's container. This class utilizes the css currentColor value.
+ *
  * #### Accessibility
  *
  * Icons require a `span` with the `.slds-icon_container` class. This contains
diff --git a/ui/components/icons/base/_index.scss b/ui/components/icons/base/_index.scss
index 09561cb9cd..e5a13405fb 100644
--- a/ui/components/icons/base/_index.scss
+++ b/ui/components/icons/base/_index.scss
@@ -181,6 +181,8 @@ $bg-standard-map: map-merge($task2-monkey-patch, $bg-standard-map);
 /**
  * @selector .slds-current-color
  * @restrict *
+ * @modifier
+ * @group color
  */
 .slds-current-color {
 
diff --git a/ui/components/icons/base/example.jsx b/ui/components/icons/base/example.jsx
index cf6ed90ae8..00e3435132 100644
--- a/ui/components/icons/base/example.jsx
+++ b/ui/components/icons/base/example.jsx
@@ -14,9 +14,9 @@ export let UtilityIcon = props => {
         props.containerClassName
       )}
       title={
-        props.title !== false ? (
-          props.title || 'Description of icon when needed'
-        ) : null
+        props.title !== false
+          ? props.title || 'Description of icon when needed'
+          : null
       }
     >
       <SvgIcon
@@ -38,3 +38,11 @@ export let UtilityIcon = props => {
 /// ///////////////////////////////////////////
 
 export default <UtilityIcon className="slds-icon-text-default" />;
+
+export let examples = [
+  {
+    id: 'currentColor',
+    label: 'Current Color',
+    element: <UtilityIcon containerClassName="slds-current-color" />
+  }
+];