Skip to content
Permalink
Browse files
feat(icons): add currentColor example (#3007)
  • Loading branch information
engai committed Jan 13, 2018
1 parent 1c5b024 commit 2ef3489a917cb25cdbea237db7f6e4ea02cc4932
Showing with 17 additions and 3 deletions.
  1. +4 −0 ui/components/icons/_doc.scss
  2. +2 −0 ui/components/icons/base/_index.scss
  3. +11 −3 ui/components/icons/base/example.jsx
@@ -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
@@ -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 {

@@ -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" />
}
];

0 comments on commit 2ef3489

Please sign in to comment.