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.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.