Merge pull request #21 from misteinb/bugfix/danger-button-outline

add danger button outline

Author: misteinb

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+
+## v2.0.4
+### Fixed
+- add outline for danger button
+- upgrade fluent css version
+
 ## v2.0.3
 ### Fixed
 - add outline for primary  button

lib/components/Button/Button.md

@@ -119,6 +119,17 @@ const classnames = require('classnames');
 </Button>
 ```
 
+#### React Danger Button
+
+```jsx
+<Button
+    className='btn-danger'
+    attr={{container: {'data-test-hook': 'button1'}}}
+>
+    Danger Button
+</Button>
+```
+
 #### React Disabled Button
 
 ```jsx

lib/components/Button/Button.scss

@@ -121,7 +121,8 @@ $outline-focus-border-width: 1px;
         &:focus:not(:disabled) {
             color: themed('color-text-white');
             background-color: themed('color-bg-btn-danger-focus');
-            outline: $outline-focus-border-width dashed themed('color-border-focus');
+            outline: $outline-focus-border-width dashed themed('color-outline-btn-danger-focus');
+            outline-offset: -2px;
         }
 
         &:active:not(:disabled) {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@azure-iot/ux-fluent-controls",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",
@@ -26,7 +26,7 @@
         "node": ">=8"
     },
     "devDependencies": {
-        "@azure-iot/ux-fluent-css": "^3.0.2",
+        "@azure-iot/ux-fluent-css": "^3.0.3",
         "@types/chai": "^4.0.4",
         "@types/classnames": "^2.2.3",
         "@types/enzyme": "^2.8.9",