diff --git a/.gitignore b/.gitignore index 57e7783..e6efa2a 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ lib/**/*.js lib/**/*.d.ts dist/ node_modules/ +static/ \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..594fcbf --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/components/Alert/Alert.md b/lib/components/Alert/Alert.md index 211272f..f5e76f2 100644 --- a/lib/components/Alert/Alert.md +++ b/lib/components/Alert/Alert.md @@ -21,13 +21,15 @@ ______________________________________________________________________________ #### Information Alert ```jsx -This is an information alert! +let onClose = () => alert('Alert close button pushed!'); +This is an information alert! ``` #### Warning Alert ```jsx -This is a warning alert! +let onClose = () => alert('Alert close button pushed!'); +This is a warning alert! ``` #### Error Alert @@ -43,8 +45,6 @@ let onClose = () => alert('Alert close button pushed!'); 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! ``` -#### Multiline alert - ```jsx 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. ``` diff --git a/lib/components/Alert/Alert.scss b/lib/components/Alert/Alert.scss index 0189243..1ade339 100644 --- a/lib/components/Alert/Alert.scss +++ b/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,12 +65,16 @@ $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'); + } + } } } @@ -72,6 +82,16 @@ $icon-margin-top: 3px; @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'); + } } } @@ -79,12 +99,22 @@ $icon-margin-top: 3px; @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 { diff --git a/lib/components/Alert/Alert.tsx b/lib/components/Alert/Alert.tsx index cda05e7..2415919 100644 --- a/lib/components/Alert/Alert.tsx +++ b/lib/components/Alert/Alert.tsx @@ -102,11 +102,15 @@ export const Alert: React.StatelessComponent = (props: AlertProps) = const closeButtonTitle = props.attr && props.attr.closeButtonTitle ? props.attr.closeButtonTitle : undefined; close = ( diff --git a/package-lock.json b/package-lock.json index 1c5576c..0ce0ce1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,13 @@ { "name": "@microsoft/azure-iot-ux-fluent-controls", - "version": "2.0.0", + "version": "2.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { "@microsoft/azure-iot-ux-fluent-css": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@microsoft/azure-iot-ux-fluent-css/-/azure-iot-ux-fluent-css-1.0.0.tgz", - "integrity": "sha512-DlK8Zwoh9DY/QfdRwYUdm91stnNu//Z6DG5CsEE1YIT8Fh5/KfeeLLW6yKxtFlXKCN7DVrHGhGLtoRnj6jPGiA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@microsoft/azure-iot-ux-fluent-css/-/azure-iot-ux-fluent-css-1.1.0.tgz", + "integrity": "sha512-NbRZkvp8HC+SpBSxyNfgBYRgTkCvi7DFYiWlkfbNFLTqFmjVAyJpw81JDCixfnjFt5/09jtH05djj1oOKP4C+Q==", "dev": true }, "@sinonjs/formatio": { diff --git a/package.json b/package.json index c7e1108..76bc44c 100644 --- a/package.json +++ b/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",