Merge pull request #18 from misteinb/bugfix/upgrade-fluent-css

Bugfix/upgrade fluent css

.gitignore

@@ -2,3 +2,4 @@ lib/**/*.js
 lib/**/*.d.ts
 dist/
 node_modules/
+static/

CHANGELOG.md

@@ -0,0 +1,16 @@
+# CHANGELOG
+
+## v2.0.1
+### Fixed
+- alert close button hover colors didn't work across themes. updated to newer version of fluent-colors
+- update git ignore to include static folder
+
+## v2.0.0
+### Changed
+- Alert close button changed from Icon to ActionTriggerButton
+
+### Removed
+- Alert.attr.closeIcon
+
+### Added
+- Alert.attr.closeButtonTitle

lib/components/Alert/Alert.md

@@ -21,13 +21,15 @@ ______________________________________________________________________________
 #### Information Alert
 
 ```jsx
-<Alert icon='info' type={0}>This is an information alert!</Alert>
+let onClose = () => alert('Alert close button pushed!');
+<Alert icon='info' type={0} onClose={onClose} attr={{closeButtonTitle: 'dismiss'}}>This is an information alert!</Alert>
 ```
 
 #### Warning Alert
 
 ```jsx
-<Alert icon='warning' type={1}>This is a warning alert!</Alert>
+let onClose = () => alert('Alert close button pushed!');
+<Alert icon='warning' type={1} onClose={onClose} attr={{closeButtonTitle: 'dismiss'}}>This is a warning alert!</Alert>
 ```
 
 #### Error Alert
@@ -43,8 +45,6 @@ let onClose = () => alert('Alert close button pushed!');
 <Alert icon='error' type={2} onClose={onClose} attr={{closeButtonTitle: 'dismiss'}}>This is an error alert with a close button! pp This is an error alert with a close button! This is an error alert with a close button! This is an error alert with a close button!</Alert>
 ```
 
-#### Multiline alert
-
 ```jsx
 <Alert icon='info' type={0} multiline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur eros nec arcu vulputate placerat. Mauris porta consectetur eros, id vehicula ligula tempus at. Pellentesque sed velit nisl. Pellentesque efficitur orci ultrices dui condimentum venenatis. Pellentesque risus tortor, mollis tincidunt euismod in, rutrum et nisl. Praesent tincidunt metus justo, tempus tincidunt nisi facilisis ac. Praesent a metus nec urna viverra ultrices id sed arcu.</Alert>
 ```

lib/components/Alert/Alert.scss

@@ -51,6 +51,12 @@ $icon-margin-top: 3px;
         }
     }
 
+    .close-button {
+        &:focus {
+            outline-offset: -1px;
+        }
+    }
+
     &.alert-fixed {
         width: 71*$grid-size;
     }
@@ -59,32 +65,56 @@ $icon-margin-top: 3px;
         @include themify{
             background-color: themed('color-bg-alert-info');
             color: themed('color-text-rest');
-        }
 
-        .alert-text {
-            @include themify{
+            .alert-text {
                 color: themed('color-text-rest');
             }
+
+            .close-button {
+                &:hover, &:focus {
+                    background-color: themed('color-bg-alert-info-close-hover');
+                }
+            }
         }
     }
 
     &.alert-warning {
         @include themify{
             background-color: themed('color-bg-alert-warning');
             color: themed('color-text-black');
+
+            .close-button {
+                &:hover, &:focus {
+                    background-color: themed('color-bg-alert-warning-close-hover');
+                }
+            }
+
+            .close-button-container {
+                color: themed('color-text-black');
+            }
         }
     }
 
     &.alert-error {
         @include themify{
             background-color: themed('color-bg-alert-error');
             color: themed('color-text-white');
-        }
-        .alert-text {
-            @include themify{
+
+            .alert-text {
+                color: themed('color-text-white');
+            }
+
+            .close-button {
+                &:hover, &:focus {
+                    background-color: themed('color-bg-alert-error-close-hover');
+                }
+            }
+
+            .close-button-container {
                 color: themed('color-text-white');
             }
         }
+
     }
 
     &.alert-multiline {

lib/components/Alert/Alert.tsx

@@ -102,11 +102,15 @@ export const Alert: React.StatelessComponent<AlertProps> = (props: AlertProps) =
         const closeButtonTitle = props.attr && props.attr.closeButtonTitle ? props.attr.closeButtonTitle : undefined;
         close = (
             <ActionTriggerButton
+                className={css('close-button')}
                 onClick={props.onClose}
                 icon={'cancelLegacy'}
                 attr={{
                     button: {
                         title: closeButtonTitle
+                    },
+                    container: {
+                        className: css('close-button-container')
                     }
                 }}
             />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",
@@ -29,7 +29,7 @@
         "url": "https://msazure.visualstudio.com/DefaultCollection/One/_git/azure-iot-ux-baseline"
     },
     "devDependencies": {
-        "@microsoft/azure-iot-ux-fluent-css": "^1.0.0",
+        "@microsoft/azure-iot-ux-fluent-css": "^1.1.0",
         "@types/chai": "^4.0.4",
         "@types/classnames": "^2.2.3",
         "@types/enzyme": "^2.8.9",