Merge pull request #48 from salesforce-ux/icon-inverse

Icon inverse and a:link alignment & bug fix
salesforce-ux · Oct 19, 2015 · 79203a1 · 79203a1
2 parents c2d6bbc + 30b0716
commit 79203a1
Show file tree

Hide file tree

Showing 16 changed files with 57 additions and 50 deletions.
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -5,25 +5,32 @@
 
 - Upgraded @salesforce-ux/design-tokens to 1.3.0
 - Updated Voice and Tone guidelines
-- ***BIG CHANGE***
+
+- ***BREAKING CHANGES***
   - Changed `.slds-button--icon-border-small` to `.slds-button--icon-x-small`. This aligns with our other icon names which separate sizing from style
+  - Brought inverse close icons into alignment with the other icon buttons. Class on `.slds-button` has an added `.slds-button--icon-inverse`. The class `.slds-button__icon--inverse` was removed from the SVG within.
+
 - Changed `.slds-button__icon` fill colors to use currentColor value to match text color changes
 - Updated `.slds-button--icon-*` demo and fixed class name typo
 - Added new button variant: `.slds-button--destructive
 - Removed max-width (960px) from Modals > Large
 - Added new notification state in modals Notifications > Modal
 - Added `.slds-no-flex` to SVG in Notifications > Toast (needed for modal application)
-- Abstracted form states into own mixins (SASS Framework related)
-- Abstracted feed vertical rule into own mixin (SASS Framework related)
-- Bug fixes:
+
+- ***BUG FIXES***
   - `.slds-button--icon-*` can be placed on an `a` and aligns to the center
   - :hover, :focus state added for `.slds-button--icon-bare`
   - fixed line-height in `.slds-button--icon-border-small` and `.slds-button--icon-bare`
   - Added `overflow: auto;` to the options container for a Multi Select picklist
+
 - ***NEW***
   - Full-width button variant for small form factors [www.lightningdesignsystem.com/components/buttons#responsive](www.lightningdesignsystem.com/components/buttons#responsive)
   - Feed and Comment components have been added [www.lightningdesignsystem.com/components/feeds](www.lightningdesignsystem.com/components/feeds)
   - Publisher component has been added [www.lightningdesignsystem.com/components/publishers](www.lightningdesignsystem.com/components/publishers)
+
+- ***SASS UPDATES***
+  - Abstracted form states into own mixins
+  - Abstracted feed vertical rule into own mixin
 
 ## Site Update - October 5th, 2015
 

diff --git a/ui/components/button-groups/flavors/inverse/index.scss b/ui/components/button-groups/flavors/inverse/index.scss
@@ -8,15 +8,6 @@
 // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 
-
-.#{$css-prefix}button--icon-inverse {
-
-  &:hover,
-  &:focus {
-    @include button-base;
-  }
-}
-
 .#{$css-prefix}button-group .#{$css-prefix}button {
 
   &:first-child.#{$css-prefix}button--inverse[disabled] {

diff --git a/ui/components/buttons/flavors/base/index.scss b/ui/components/buttons/flavors/base/index.scss
@@ -38,11 +38,6 @@
     text-decoration: none;
   }
 
-  &:link,
-  &:visited {
-    color: $color-text-link;
-  }
-
   &:hover,
   &:focus {
     color: $color-text-link-hover;

diff --git a/ui/components/buttons/flavors/icon-inverse/index.react.example.jsx b/ui/components/buttons/flavors/icon-inverse/index.react.example.jsx
@@ -17,13 +17,13 @@ const pf = componentUtil.prefix;
 module.exports = (
   <div className='demo-only demo--inverse'>
     <ButtonIcon
-      iconFlavor="inverse"
+      flavor="icon-inverse"
       sprite="action"
       symbol="close"
       assistiveText="close" />
     <ButtonIcon
       disabled="true"
-      iconFlavor="inverse"
+      flavor="icon-inverse"
       sprite="action"
       symbol="close"
       assistiveText="close" />

diff --git a/ui/components/buttons/flavors/icon-inverse/index.scss b/ui/components/buttons/flavors/icon-inverse/index.scss
@@ -8,20 +8,20 @@
 // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 
-
-.#{$css-prefix}button__icon--inverse {
-  fill: $color-text-link-inverse;
+.#{$css-prefix}button--icon-inverse {
+  color: $color-text-link-inverse;
 
   &:hover,
   &:focus {
-    fill: $color-text-link-inverse-hover;
+    color: $color-text-link-inverse-hover;
   }
 
   &:active {
-    fill: $color-text-link-inverse-active;
+    color: $color-text-link-inverse-active;
   }
-}
 
-.#{$css-prefix}button[disabled] .#{$css-prefix}button__icon--inverse {
-  fill: $color-text-link-inverse-disabled;
+  &[disabled] {
+    color: $color-text-link-inverse-disabled;;
+  }
 }
+
diff --git a/ui/components/buttons/flavors/icon/index.react.jsx b/ui/components/buttons/flavors/icon/index.react.jsx
@@ -47,7 +47,7 @@ Component.propTypes = {
   flavor: componentUtil.PropTypes.flavor(
     'icon-container', 'icon-border', 'icon-small',
     'icon-bare', 'icon-inverse', 'icon-x-small',
-    'icon-border-filled'
+    'icon-border-filled', 'icon-inverse'
   ),
   iconFlavor: componentUtil.PropTypes.flavor(
     'inverse', 'hint', 'small', 'x-small', 'large'

diff --git a/ui/components/buttons/flavors/icon/index.scss b/ui/components/buttons/flavors/icon/index.scss
@@ -12,8 +12,10 @@
 .#{$css-prefix}button--icon-container,
 .#{$css-prefix}button--icon-border,
 .#{$css-prefix}button--icon-border-filled,
-.#{$css-prefix}button--icon-bare {
+.#{$css-prefix}button--icon-bare,
+.#{$css-prefix}button--icon-more {
   vertical-align: middle;
+  color: $color-text-icon-default;
 }
 
 .#{$css-prefix}button--icon-bare {
@@ -62,7 +64,7 @@
 
 .#{$css-prefix}button__icon { // This is the icon inside the button--icon button
   @include square($square-icon-medium-content);
-  fill: $color-text-icon-default;
+    fill: currentColor;
 
   &--large { // Usually used for the large close button
     @include square($square-icon-utility-large);

diff --git a/ui/components/data-tables/flavors/base/index.scss b/ui/components/data-tables/flavors/base/index.scss
@@ -139,7 +139,7 @@
   }
 
   .#{$css-prefix}button__icon {
-    fill: $color-text-link;
+    fill: $color-text-link; /* This - can we fix it? */
   }
 
   &:hover {

diff --git a/ui/components/dropdowns/index.docs.jsx b/ui/components/dropdowns/index.docs.jsx
@@ -37,7 +37,7 @@ module.exports = (
 
     <p>Expected keyboard interactions:</p>
     <ul>
-      <li>Arrow keys cycle focus through menu items</li>
+      <li>Arrow keys cycle focus through menu items (you should use JS to disable focus for any disabled items)</li>
       <li>Tab key closes menu and moves focus to the next focusable element on the page</li>
       <li>Esc key closes menu and moves focus back to the menu trigger</li>
       <li>Any character key moves focus to the next menu item that starts with that character, if applicable</li>

diff --git a/ui/components/modals/index.react.jsx b/ui/components/modals/index.react.jsx
@@ -76,7 +76,8 @@ class ModalHeader extends React.Component {
         { this.props.closeButton ?
             <ButtonIcon
               onClick={this.context.onRequestClose}
-              iconFlavor="inverse,large"
+              flavor="icon-inverse"
+              iconFlavor="large"
               className={pf('modal__close')}
               sprite="action"
               symbol="close"

diff --git a/ui/components/notifications/flavors/alert/index.react.example.jsx b/ui/components/notifications/flavors/alert/index.react.example.jsx
@@ -22,7 +22,7 @@ exports.preview = (
     <div className={pf('notify notify--alert theme--alert-texture')} role="alert">
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -33,7 +33,7 @@ exports.preview = (
     <div className={pf('notify notify--alert theme--success theme--alert-texture')} role="alert">
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -47,7 +47,7 @@ exports.preview = (
     <div className={pf('notify notify--alert theme--error theme--alert-texture')} role="alert">
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -61,7 +61,7 @@ exports.preview = (
     <div className={pf('notify notify--alert theme--offline theme--alert-texture')} role="alert">
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -81,7 +81,7 @@ exports.code = (
     <span className={pf('assistive-text')}>Info</span>
     <ButtonIcon
       className={pf('close icon--small')}
-      iconFlavor="inverse"
+      flavor="icon-inverse"
       sprite="action"
       symbol="close"
       assistiveText="Close" />

diff --git a/ui/components/notifications/flavors/base/index.react.example.jsx b/ui/components/notifications/flavors/base/index.react.example.jsx
@@ -22,7 +22,7 @@ module.exports = (
     <span className={pf('assistive-text')}>Info</span>
     <ButtonIcon
       className={pf('notify__close')}
-      iconFlavor="inverse"
+      flavor="icon-inverse"
       sprite="action"
       symbol="close"
       assistiveText="Close" />
@@ -36,7 +36,8 @@ module.exports = (
       <span className={pf('assistive-text')}>Info</span>
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse"
+        flavor="icon-inverse"
+        iconFlavor="large"
         sprite="action"
         symbol="close"
         assistiveText="Close" />

diff --git a/ui/components/notifications/flavors/modal/index.react.example.jsx b/ui/components/notifications/flavors/modal/index.react.example.jsx
@@ -49,7 +49,8 @@ class ModalExample extends React.Component {
                 <span className={pf('assistive-text')}>Error</span>
                 <ButtonIcon
                   className={pf('notify__close')}
-                  iconFlavor="inverse,large"
+                  iconFlavor="large"
+                  flavor="icon-inverse"
                   sprite="utility"
                   symbol="close"
                   assistiveText="Close" />

diff --git a/ui/components/notifications/flavors/toast/index.react.example.jsx b/ui/components/notifications/flavors/toast/index.react.example.jsx
@@ -23,7 +23,8 @@ exports.preview = (
       <span className={pf('assistive-text')}>Info</span>
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse,large"
+        iconFlavor="large"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -38,7 +39,8 @@ exports.preview = (
       <span className={pf('assistive-text')}>Success</span>
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse,large"
+        iconFlavor="large"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -69,7 +71,8 @@ exports.preview = (
       <span className={pf('assistive-text')}>Error</span>
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse,large"
+        iconFlavor="large"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />
@@ -86,7 +89,8 @@ exports.preview = (
       <span className={pf('assistive-text')}>Error</span>
       <ButtonIcon
         className={pf('notify__close')}
-        iconFlavor="inverse,large"
+        iconFlavor="large"
+        flavor="icon-inverse"
         sprite="utility"
         symbol="close"
         assistiveText="Close" />

diff --git a/ui/dependencies/core.scss b/ui/dependencies/core.scss
@@ -94,14 +94,15 @@
 
 
   a {
+    color: $color-text-link;
     text-decoration: none;
     transition: color .1s linear;
 
 
-    &:link,
-    &:visited {
-      color: $color-text-link;
-    }
+    // &:link,
+    // &:visited {
+    //   color: $color-text-link;
+    // }
 
     &:hover,
     &:focus {

diff --git a/ui/utilities/themes/flavors/color/index.scss b/ui/utilities/themes/flavors/color/index.scss
@@ -37,6 +37,10 @@
   &--warning {
     background-color: $color-background-warning;
     color: $color-text-default;
+
+    .#{$css-prefix}button__icon {
+      fill: $color-text-icon-default;
+    }
   }
 
   &--error {