Skip to content

Commit

Permalink
feat(icons): add currentColor example (#3007)
Browse files Browse the repository at this point in the history
  • Loading branch information
engai committed Jan 13, 2018
1 parent 1c5b024 commit 2ef3489
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 3 deletions.
4 changes: 4 additions & 0 deletions ui/components/icons/_doc.scss
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions ui/components/icons/base/_index.scss
Expand Up @@ -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 {

Expand Down
14 changes: 11 additions & 3 deletions ui/components/icons/base/example.jsx
Expand Up @@ -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
Expand All @@ -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.