@atlaskit/avatar
Advanced tools
@atlaskit/avatar - npm Package Compare versions
Comparing version 20.4.2 to 20.5.0
| # @atlaskit/avatar | ||
| ## 20.5.0 | ||
| ### Minor Changes | ||
| - [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Fix avatar focus ring in windows high contrast mode | ||
| ### Patch Changes | ||
| - Updated dependencies | ||
| ## 20.4.2 | ||
@@ -4,0 +14,0 @@ |
@@ -43,3 +43,3 @@ "use strict"; | ||
| var packageName = "@atlaskit/avatar"; | ||
| var packageVersion = "20.4.2"; | ||
| var packageVersion = "20.5.0"; | ||
@@ -56,3 +56,3 @@ var getStyles = function getStyles(css, _ref) { | ||
| return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
| css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ").concat((0, _tokens.token)('color.border.focus', _colors.B300), "\n }\n\n :hover {\n &::after {\n background-color: ").concat((0, _tokens.token)('color.overlay.hover', _colors.N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ").concat((0, _tokens.token)('color.overlay.pressed', _colors.N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: 0.7;\n pointer-events: none;\n background-color: ".concat((0, _tokens.token)('color.background.default', _colors.N0), ";\n }\n ")) | ||
| css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ").concat((0, _tokens.token)('color.border.focus', _colors.B300), "\n }\n\n :hover {\n &::after {\n background-color: ").concat((0, _tokens.token)('color.overlay.hover', _colors.N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ").concat((0, _tokens.token)('color.overlay.pressed', _colors.N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: 0.7;\n pointer-events: none;\n background-color: ".concat((0, _tokens.token)('color.background.default', _colors.N0), ";\n }\n ")) | ||
| ); | ||
@@ -59,0 +59,0 @@ }; |
| { | ||
| "name": "@atlaskit/avatar", | ||
| "version": "20.4.2", | ||
| "version": "20.5.0", | ||
| "sideEffects": false | ||
| } |
@@ -14,3 +14,3 @@ /** @jsx jsx */ | ||
| const packageName = "@atlaskit/avatar"; | ||
| const packageVersion = "20.4.2"; | ||
| const packageVersion = "20.5.0"; | ||
@@ -101,2 +101,8 @@ const getStyles = (css, { | ||
| } | ||
| @media screen and (forced-colors: active) { | ||
| &:focus-visible { | ||
| outline: 1px solid | ||
| } | ||
| } | ||
| `} | ||
@@ -103,0 +109,0 @@ |
| { | ||
| "name": "@atlaskit/avatar", | ||
| "version": "20.4.2", | ||
| "version": "20.5.0", | ||
| "sideEffects": false | ||
| } |
@@ -24,3 +24,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty"; | ||
| var packageName = "@atlaskit/avatar"; | ||
| var packageVersion = "20.4.2"; | ||
| var packageVersion = "20.5.0"; | ||
@@ -37,3 +37,3 @@ var getStyles = function getStyles(css, _ref) { | ||
| return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals | ||
| css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ").concat(token('color.border.focus', B300), "\n }\n\n :hover {\n &::after {\n background-color: ").concat(token('color.overlay.hover', N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ").concat(token('color.overlay.pressed', N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: 0.7;\n pointer-events: none;\n background-color: ".concat(token('color.background.default', N0), ";\n }\n ")) | ||
| css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n align-items: stretch;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: content-box;\n cursor: inherit;\n display: flex;\n flex-direction: column;\n justify-content: center;\n outline: none;\n overflow: hidden;\n position: static;\n transform: translateZ(0);\n transition: transform 200ms, opacity 200ms;\n box-shadow: 0 0 0 ", "px ", ";\n border: none;\n margin: ", "px;\n padding: 0;\n\n /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n font-size: inherit;\n font-family: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n margin: 0;\n padding: 0;\n }\n\n &::after {\n background-color: transparent;\n bottom: 0px;\n\n /* Added border-radius style to fix hover issue in safari */\n border-radius: ", ";\n content: ' ';\n left: 0px;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n right: 0px;\n top: 0px;\n transition: opacity 200ms;\n width: 100%;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :focus {\n outline: none;\n box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ").concat(token('color.border.focus', B300), "\n }\n\n :hover {\n &::after {\n background-color: ").concat(token('color.overlay.hover', N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ").concat(token('color.overlay.pressed', N70A), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: 0.7;\n pointer-events: none;\n background-color: ".concat(token('color.background.default', N0), ";\n }\n ")) | ||
| ); | ||
@@ -40,0 +40,0 @@ }; |
| { | ||
| "name": "@atlaskit/avatar", | ||
| "version": "20.4.2", | ||
| "version": "20.5.0", | ||
| "sideEffects": false | ||
| } |
| { | ||
| "name": "@atlaskit/avatar", | ||
| "version": "20.4.2", | ||
| "version": "20.5.0", | ||
| "description": "An avatar is a visual representation of a user or entity.", | ||
@@ -36,4 +36,4 @@ "publishConfig": { | ||
| "@atlaskit/analytics-next": "^8.0.0", | ||
| "@atlaskit/icon": "^21.8.0", | ||
| "@atlaskit/theme": "^11.5.0", | ||
| "@atlaskit/icon": "^21.9.0", | ||
| "@atlaskit/theme": "^12.0.0", | ||
| "@atlaskit/tokens": "^0.2.0", | ||
@@ -51,7 +51,7 @@ "@babel/runtime": "^7.0.0", | ||
| "@atlaskit/field-base": "^15.0.0", | ||
| "@atlaskit/icon": "^21.8.0", | ||
| "@atlaskit/icon": "^21.9.0", | ||
| "@atlaskit/section-message": "^6.1.0", | ||
| "@atlaskit/ssr": "*", | ||
| "@atlaskit/toggle": "^12.2.0", | ||
| "@atlaskit/tooltip": "^17.4.0", | ||
| "@atlaskit/toggle": "^12.3.0", | ||
| "@atlaskit/tooltip": "^17.5.0", | ||
| "@atlaskit/visual-regression": "*", | ||
@@ -58,0 +58,0 @@ "@atlaskit/webdriver-runner": "*", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.3%
205149
- Lines of code
- increased by0.15%
3897
Dependency changes
- Removed@atlaskit/theme@11.5.2(transitive)
- Removedasap@2.0.6(transitive)
- Removedbase64-js@1.5.1(transitive)
- Removedbuffer@5.7.1(transitive)
- Removedcamelize@1.0.1(transitive)
- Removedcore-js@1.2.7(transitive)
- Removedcss-color-keywords@1.0.0(transitive)
- Removedcss-to-react-native@2.3.2(transitive)
- Removedencoding@0.1.13(transitive)
- Removedexenv@1.2.2(transitive)
- Removedfbjs@0.8.18(transitive)
- Removedhas-flag@1.0.0(transitive)
- Removedhoist-non-react-statics@2.5.5(transitive)
- Removediconv-lite@0.6.3(transitive)
- Removedieee754@1.2.1(transitive)
- Removedis-stream@1.1.0(transitive)
- Removedisomorphic-fetch@2.2.1(transitive)
- Removednode-fetch@1.7.3(transitive)
- Removedpostcss-value-parser@3.3.1(transitive)
- Removedpromise@7.3.1(transitive)
- Removedsafer-buffer@2.1.2(transitive)
- Removedsetimmediate@1.0.5(transitive)
- Removedstyled-components@3.4.10(transitive)
- Removedstylis@3.5.4(transitive)
- Removedstylis-rule-sheet@0.0.10(transitive)
- Removedsupports-color@3.2.3(transitive)
- Removedua-parser-js@0.7.39(transitive)
- Removedwhatwg-fetch@3.6.20(transitive)
Updated@atlaskit/icon@^21.9.0
Updated@atlaskit/theme@^12.0.0