feat(icons): add currentColor example (#3007)

salesforce-ux · Jan 13, 2018 · 2ef3489 · 2ef3489
1 parent 1c5b024
commit 2ef3489
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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" />
+  }
+];