@atlaskit/inline-edit 12.2.0 → 12.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-edit
 
+## 12.2.1
+
+### Patch Changes
+
+- [`be93a207731`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be93a207731) - Action buttons now use interactive elevation design tokens. There is no change to their appearance when design tokens are not enabled.
+
 ## 12.2.0
 
 ### Minor Changes

package/dist/cjs/inline-edit.js

@@ -51,7 +51,7 @@ var buttonStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.0"
+  packageVersion: "12.2.1"
 };
 
 var noop = function noop() {};

package/dist/cjs/internal/buttons.js

@@ -29,10 +29,38 @@ var buttonsContainerStyles = (0, _react.css)({
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = (0, _react.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"),
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
 var buttonWrapperElevationLightStyles = (0, _react.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
 var buttonWrapperBaseStyles = (0, _react.css)({
   boxSizing: 'border-box',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.2.0",
+	"version": "12.2.1",
 	"sideEffects": false
 }

package/dist/es2019/inline-edit.js

@@ -20,7 +20,7 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.0"
+  packageVersion: "12.2.1"
 };
 
 const noop = () => {};

package/dist/es2019/internal/buttons.js

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 const buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ const buttonsContainerStyles = css({
   flexShrink: 0
 });
 const buttonWrapperElevationDarkStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`,
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${DN70})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperElevationLightStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${N20A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.2.0",
+	"version": "12.2.1",
 	"sideEffects": false
 }

package/dist/esm/inline-edit.js

@@ -26,7 +26,7 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.0"
+  packageVersion: "12.2.1"
 };
 
 var noop = function noop() {};

package/dist/esm/internal/buttons.js

@@ -3,7 +3,7 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 var buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ var buttonsContainerStyles = css({
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"),
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperElevationLightStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
+  // These buttons are floating, so they need an override to overlay interaction states
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.2.0",
+	"version": "12.2.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,8 +52,8 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",