@atlaskit/flag 15.0.11 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/flag
 
+## 15.1.0
+
+### Minor Changes
+
+- [`be1170b4b1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be1170b4b1f) - Removes custom appearance styles for focus. Now uses `color.border.focused` token consistenly across all appearances..
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.0.12
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.0.11
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.11";
+var packageVersion = "15.1.0";
 var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VAR_FOCUS_COLOR = exports.VAR_COLOR = exports.VAR_BG_COLOR_HOVER = exports.VAR_BG_COLOR_ACTIVE = exports.VAR_BG_COLOR = exports.DEFAULT_APPEARANCE = void 0;
+exports.VAR_COLOR = exports.VAR_BG_COLOR_HOVER = exports.VAR_BG_COLOR_ACTIVE = exports.VAR_BG_COLOR = exports.DEFAULT_APPEARANCE = void 0;
 var DEFAULT_APPEARANCE = 'normal';
 exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;
 var VAR_COLOR = '--color';
@@ -13,6 +13,4 @@ exports.VAR_BG_COLOR = VAR_BG_COLOR;
 var VAR_BG_COLOR_HOVER = '--bg-color-hover';
 exports.VAR_BG_COLOR_HOVER = VAR_BG_COLOR_HOVER;
 var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
-exports.VAR_BG_COLOR_ACTIVE = VAR_BG_COLOR_ACTIVE;
-var VAR_FOCUS_COLOR = '--focus-color';
-exports.VAR_FOCUS_COLOR = VAR_FOCUS_COLOR;
+exports.VAR_BG_COLOR_ACTIVE = VAR_BG_COLOR_ACTIVE;

package/dist/cjs/flag-actions.js

@@ -22,9 +22,6 @@ var buttonStyles = (0, _react.css)({
     color: "var(".concat(_constants.VAR_COLOR, ") !important"),
     fontWeight: "var(--ds-font-weight-medium, 500)"
   },
-  '&&:focus, a&&:focus': {
-    boxShadow: "0 0 0 2px var(".concat(_constants.VAR_FOCUS_COLOR, ")")
-  },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
   },
@@ -76,7 +73,7 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), (0, _defineProperty2.default)(_ref, _constants.VAR_FOCUS_COLOR, _theme.flagFocusRingColor[appearance]), _ref),
+      style: (_ref = {}, (0, _defineProperty2.default)(_ref, _constants.VAR_COLOR, _theme.actionTextColor[appearance]), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR, _theme.actionBackgroundColor[appearance].default), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_HOVER, _theme.actionBackgroundColor[appearance].pressed), (0, _defineProperty2.default)(_ref, _constants.VAR_BG_COLOR_ACTIVE, _theme.actionBackgroundColor[appearance].active), _ref),
       css: [buttonStyles, appearance === _constants.DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
     }, action.content);
   })));

package/dist/cjs/flag.js

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.11"
+  packageVersion: "15.1.0"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,

package/dist/cjs/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flagTextColorToken = exports.flagTextColor = exports.flagIconColor = exports.flagFocusRingColor = exports.flagBackgroundColor = exports.actionTextColor = exports.actionBackgroundColor = void 0;
+exports.flagTextColorToken = exports.flagTextColor = exports.flagIconColor = exports.flagBackgroundColor = exports.actionTextColor = exports.actionBackgroundColor = void 0;
 var _colors = require("@atlaskit/theme/colors");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -41,14 +41,6 @@ var flagTextColorToken = {
   warning: "var(--ds-text-warning-inverse, ".concat(_colors.N700, ")")
 };
 exports.flagTextColorToken = flagTextColorToken;
-var flagFocusRingColor = {
-  error: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-  info: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-  normal: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
-  success: "var(--ds-border-focused, ".concat(_colors.N40, ")"),
-  warning: "var(--ds-border-focused, ".concat(_colors.N200, ")")
-};
-exports.flagFocusRingColor = flagFocusRingColor;
 // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
 var actionBackgroundColor = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "15.0.11";
+const packageVersion = "15.1.0";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/constants.js

@@ -2,5 +2,4 @@ export const DEFAULT_APPEARANCE = 'normal';
 export const VAR_COLOR = '--color';
 export const VAR_BG_COLOR = '--bg-color';
 export const VAR_BG_COLOR_HOVER = '--bg-color-hover';
-export const VAR_BG_COLOR_ACTIVE = '--bg-color-active';
-export const VAR_FOCUS_COLOR = '--focus-color';
+export const VAR_BG_COLOR_ACTIVE = '--bg-color-active';

package/dist/es2019/flag-actions.js

@@ -4,8 +4,8 @@
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Inline from '@atlaskit/primitives/inline';
-import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
-import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
+import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE } from './constants';
+import { actionBackgroundColor, actionTextColor } from './theme';
 const buttonStyles = css({
   '&&, a&&': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
@@ -14,9 +14,6 @@ const buttonStyles = css({
     color: `var(${VAR_COLOR}) !important`,
     fontWeight: "var(--ds-font-weight-medium, 500)"
   },
-  '&&:focus, a&&:focus': {
-    boxShadow: `0 0 0 2px var(${VAR_FOCUS_COLOR})`
-  },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
   },
@@ -70,8 +67,7 @@ const FlagActions = props => {
       [VAR_COLOR]: actionTextColor[appearance],
       [VAR_BG_COLOR]: actionBackgroundColor[appearance].default,
       [VAR_BG_COLOR_HOVER]: actionBackgroundColor[appearance].pressed,
-      [VAR_BG_COLOR_ACTIVE]: actionBackgroundColor[appearance].active,
-      [VAR_FOCUS_COLOR]: flagFocusRingColor[appearance]
+      [VAR_BG_COLOR_ACTIVE]: actionBackgroundColor[appearance].active
     },
     css: [buttonStyles, appearance === DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
   }, action.content))));

package/dist/es2019/flag.js

@@ -16,7 +16,7 @@ import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.11"
+  packageVersion: "15.1.0"
 };
 const transitionStyles = css({
   flexGrow: 1,

package/dist/es2019/theme.js

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-import { B100, B400, N0, N200, N30A, N40, N500, N700 } from '@atlaskit/theme/colors';
+import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
 export const flagBackgroundColor = {
   error: 'danger.bold',
   info: 'neutral.bold',
@@ -31,13 +31,6 @@ export const flagTextColorToken = {
   success: `var(--ds-text-inverse, ${N0})`,
   warning: `var(--ds-text-warning-inverse, ${N700})`
 };
-export const flagFocusRingColor = {
-  error: `var(--ds-border-focused, ${N40})`,
-  info: `var(--ds-border-focused, ${N40})`,
-  normal: `var(--ds-border-focused, ${B100})`,
-  success: `var(--ds-border-focused, ${N40})`,
-  warning: `var(--ds-border-focused, ${N200})`
-};
 // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
 export const actionBackgroundColor = {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "15.0.11";
+var packageVersion = "15.1.0";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/constants.js

@@ -2,5 +2,4 @@ export var DEFAULT_APPEARANCE = 'normal';
 export var VAR_COLOR = '--color';
 export var VAR_BG_COLOR = '--bg-color';
 export var VAR_BG_COLOR_HOVER = '--bg-color-hover';
-export var VAR_BG_COLOR_ACTIVE = '--bg-color-active';
-export var VAR_FOCUS_COLOR = '--focus-color';
+export var VAR_BG_COLOR_ACTIVE = '--bg-color-active';

package/dist/esm/flag-actions.js

@@ -5,8 +5,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Inline from '@atlaskit/primitives/inline';
-import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE, VAR_FOCUS_COLOR } from './constants';
-import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
+import { DEFAULT_APPEARANCE, VAR_COLOR, VAR_BG_COLOR, VAR_BG_COLOR_HOVER, VAR_BG_COLOR_ACTIVE } from './constants';
+import { actionBackgroundColor, actionTextColor } from './theme';
 var buttonStyles = css({
   '&&, a&&': {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
@@ -15,9 +15,6 @@ var buttonStyles = css({
     color: "var(".concat(VAR_COLOR, ") !important"),
     fontWeight: "var(--ds-font-weight-medium, 500)"
   },
-  '&&:focus, a&&:focus': {
-    boxShadow: "0 0 0 2px var(".concat(VAR_FOCUS_COLOR, ")")
-  },
   '&&:hover, &&:active, a&&:hover, a&&:active': {
     textDecoration: 'underline'
   },
@@ -69,7 +66,7 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      style: (_ref = {}, _defineProperty(_ref, VAR_COLOR, actionTextColor[appearance]), _defineProperty(_ref, VAR_BG_COLOR, actionBackgroundColor[appearance].default), _defineProperty(_ref, VAR_BG_COLOR_HOVER, actionBackgroundColor[appearance].pressed), _defineProperty(_ref, VAR_BG_COLOR_ACTIVE, actionBackgroundColor[appearance].active), _defineProperty(_ref, VAR_FOCUS_COLOR, flagFocusRingColor[appearance]), _ref),
+      style: (_ref = {}, _defineProperty(_ref, VAR_COLOR, actionTextColor[appearance]), _defineProperty(_ref, VAR_BG_COLOR, actionBackgroundColor[appearance].default), _defineProperty(_ref, VAR_BG_COLOR_HOVER, actionBackgroundColor[appearance].pressed), _defineProperty(_ref, VAR_BG_COLOR_ACTIVE, actionBackgroundColor[appearance].active), _ref),
       css: [buttonStyles, appearance === DEFAULT_APPEARANCE && appearanceNormalButtonStyles]
     }, action.content);
   })));

package/dist/esm/flag.js

@@ -20,7 +20,7 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.11"
+  packageVersion: "15.1.0"
 };
 var transitionStyles = css({
   flexGrow: 1,

package/dist/esm/theme.js

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-import { B100, B400, N0, N200, N30A, N40, N500, N700 } from '@atlaskit/theme/colors';
+import { B400, N0, N30A, N500, N700 } from '@atlaskit/theme/colors';
 export var flagBackgroundColor = {
   error: 'danger.bold',
   info: 'neutral.bold',
@@ -31,13 +31,6 @@ export var flagTextColorToken = {
   success: "var(--ds-text-inverse, ".concat(N0, ")"),
   warning: "var(--ds-text-warning-inverse, ".concat(N700, ")")
 };
-export var flagFocusRingColor = {
-  error: "var(--ds-border-focused, ".concat(N40, ")"),
-  info: "var(--ds-border-focused, ".concat(N40, ")"),
-  normal: "var(--ds-border-focused, ".concat(B100, ")"),
-  success: "var(--ds-border-focused, ".concat(N40, ")"),
-  warning: "var(--ds-border-focused, ".concat(N200, ")")
-};
 // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
 // https://product-fabric.atlassian.net/browse/DSP-2519
 export var actionBackgroundColor = {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/dist/types/constants.d.ts

@@ -4,4 +4,3 @@ export declare const VAR_COLOR = "--color";
 export declare const VAR_BG_COLOR = "--bg-color";
 export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
 export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";
-export declare const VAR_FOCUS_COLOR = "--focus-color";

package/dist/types/theme.d.ts

@@ -10,7 +10,6 @@ export declare const flagTextColorToken: {
     success: "var(--ds-text-inverse)";
     warning: "var(--ds-text-warning-inverse)";
 };
-export declare const flagFocusRingColor: Record<AppearanceTypes, string>;
 declare type ActionBackgroundColor = Record<Exclude<AppearanceTypes, 'normal'>, {
     default: 'var(--ds-background-inverse-subtle)';
     active: 'var(--ds-background-inverse-subtle-pressed)';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.0.11",
+  "version": "15.1.0",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/primitives": "^0.3.0",
+    "@atlaskit/primitives": "^0.4.0",
     "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",