@atlaskit/flag 17.2.1 → 17.2.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/flag
 
+## 17.2.2
+
+### Patch Changes
+
+- [#185048](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185048)
+  [`216bdb050fde5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/216bdb050fde5) -
+  Replaces custom dismiss button implementation with the default base button
+
 ## 17.2.1
 
 ### Patch Changes

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

@@ -14,7 +14,7 @@ var _flag = _interopRequireDefault(require("./flag"));
 var _flagGroup = require("./flag-group");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/flag";
-var packageVersion = "17.2.0";
+var packageVersion = "17.2.1";
 var AUTO_DISMISS_SECONDS = exports.AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -41,7 +41,7 @@ var flagWrapperStyles = null;
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.2.0"
+  packageVersion: "17.2.1"
 };
 var transitionStyles = null;
 

package/dist/cjs/internal/dismiss-button.js

@@ -1,4 +1,3 @@
-/* dismiss-button.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,19 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./dismiss-button.compiled.css");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _runtime = require("@compiled/react/runtime");
+var _new = require("@atlaskit/button/new");
 var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
 var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
 var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
-var _compiled = require("@atlaskit/primitives/compiled");
 var _theme = require("../theme");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  button: "_16jlidpf _1o9zidpf _i0dl1wug _1dqoglyw _1e0c1txw _1bsb1tcg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1h6o _1bah1h6o _80omtlke _o5721q9c"
-};
 var DismissButtonComponent = function DismissButtonComponent(_ref) {
   var appearance = _ref.appearance,
     onClick = _ref.onClick,
@@ -36,24 +30,22 @@ var DismissButtonComponent = function DismissButtonComponent(_ref) {
     size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
-  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
-    xcss: styles.button,
-    onClick: onClick
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: {
-      background: 'none'
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/_react.default.createElement(ButtonIcon, (0, _extends2.default)({}, iconProps, {
+        LEGACY_size: size,
+        size: "small",
+        label: "",
+        color: _theme.flagTextColorToken[appearance]
+      }));
     },
+    appearance: "subtle",
+    spacing: "compact",
+    label: buttonLabel,
+    onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId,
-    "aria-label": buttonLabel
-  }, /*#__PURE__*/React.createElement(ButtonIcon, {
-    label: "",
-    LEGACY_size: size,
-    LEGACY_primaryColor: _theme.flagTextColorToken[appearance],
-    color: _theme.flagTextColorToken[appearance],
-    size: "small"
-  }));
+    testId: buttonTestId
+  });
 };
 var DismissButton = /*#__PURE__*/(0, _react.memo)(DismissButtonComponent);
 

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 = "17.2.0";
+const packageVersion = "17.2.1";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -28,7 +28,7 @@ const flagWrapperStyles = null;
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.2.0"
+  packageVersion: "17.2.1"
 };
 const transitionStyles = null;
 

package/dist/es2019/internal/dismiss-button.js

@@ -1,16 +1,10 @@
-/* dismiss-button.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./dismiss-button.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { memo } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { memo } from 'react';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
-import { Pressable } from '@atlaskit/primitives/compiled';
 import { flagTextColorToken } from '../theme';
-const styles = {
-  button: "_16jlidpf _1o9zidpf _i0dl1wug _1dqoglyw _1e0c1txw _1bsb1tcg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1h6o _1bah1h6o _80omtlke _o5721q9c"
-};
 const DismissButtonComponent = ({
   appearance,
   onClick,
@@ -28,24 +22,20 @@ const DismissButtonComponent = ({
     size = 'medium';
     buttonTestId = testId && `${testId}-toggle`;
   }
-  return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: styles.button,
-    onClick: onClick
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: {
-      background: 'none'
-    },
+  return /*#__PURE__*/React.createElement(IconButton, {
+    icon: iconProps => /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+      LEGACY_size: size,
+      size: "small",
+      label: "",
+      color: flagTextColorToken[appearance]
+    })),
+    appearance: "subtle",
+    spacing: "compact",
+    label: buttonLabel,
+    onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId,
-    "aria-label": buttonLabel
-  }, /*#__PURE__*/React.createElement(ButtonIcon, {
-    label: "",
-    LEGACY_size: size,
-    LEGACY_primaryColor: flagTextColorToken[appearance],
-    color: flagTextColorToken[appearance],
-    size: "small"
-  }));
+    testId: buttonTestId
+  });
 };
 const DismissButton = /*#__PURE__*/memo(DismissButtonComponent);
 

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 = "17.2.0";
+var packageVersion = "17.2.1";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -32,7 +32,7 @@ var flagWrapperStyles = null;
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "17.2.0"
+  packageVersion: "17.2.1"
 };
 var transitionStyles = null;
 

package/dist/esm/internal/dismiss-button.js

@@ -1,16 +1,10 @@
-/* dismiss-button.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./dismiss-button.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { memo } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { memo } from 'react';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 import CloseIcon from '@atlaskit/icon/core/migration/close--cross';
-import { Pressable } from '@atlaskit/primitives/compiled';
 import { flagTextColorToken } from '../theme';
-var styles = {
-  button: "_16jlidpf _1o9zidpf _i0dl1wug _1dqoglyw _1e0c1txw _1bsb1tcg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1h6o _1bah1h6o _80omtlke _o5721q9c"
-};
 var DismissButtonComponent = function DismissButtonComponent(_ref) {
   var appearance = _ref.appearance,
     onClick = _ref.onClick,
@@ -27,24 +21,22 @@ var DismissButtonComponent = function DismissButtonComponent(_ref) {
     size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
-  return /*#__PURE__*/React.createElement(Pressable, {
-    xcss: styles.button,
-    onClick: onClick
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: {
-      background: 'none'
+  return /*#__PURE__*/React.createElement(IconButton, {
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+        LEGACY_size: size,
+        size: "small",
+        label: "",
+        color: flagTextColorToken[appearance]
+      }));
     },
+    appearance: "subtle",
+    spacing: "compact",
+    label: buttonLabel,
+    onClick: onClick,
     "aria-expanded": isBold ? isExpanded : undefined,
-    testId: buttonTestId,
-    "aria-label": buttonLabel
-  }, /*#__PURE__*/React.createElement(ButtonIcon, {
-    label: "",
-    LEGACY_size: size,
-    LEGACY_primaryColor: flagTextColorToken[appearance],
-    color: flagTextColorToken[appearance],
-    size: "small"
-  }));
+    testId: buttonTestId
+  });
 };
 var DismissButton = /*#__PURE__*/memo(DismissButtonComponent);
 

package/dist/types/internal/dismiss-button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AppearanceTypes } from '../types';
 interface DismissButtonProps {
     appearance: AppearanceTypes;
@@ -7,5 +7,5 @@ interface DismissButtonProps {
     isBold: boolean;
     testId?: string;
 }
-declare const DismissButton: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
+declare const DismissButton: React.MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => React.JSX.Element>;
 export default DismissButton;

package/dist/types-ts4.5/internal/dismiss-button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AppearanceTypes } from '../types';
 interface DismissButtonProps {
     appearance: AppearanceTypes;
@@ -7,5 +7,5 @@ interface DismissButtonProps {
     isBold: boolean;
     testId?: string;
 }
-declare const DismissButton: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => JSX.Element>;
+declare const DismissButton: React.MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => React.JSX.Element>;
 export default DismissButton;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "17.2.1",
+	"version": "17.2.2",
 	"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/"
@@ -54,7 +54,7 @@
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tokens": "^5.5.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"

package/dist/cjs/internal/dismiss-button.compiled.css

@@ -1,15 +0,0 @@
-
-._1dqoglyw{border-style:none}._16jlidpf{flex-grow:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
-._1bsb1tcg{width:24px}
-._1e0c1txw{display:flex}
-._1o9zidpf{flex-shrink:0}
-._4cvr1h6o{align-items:center}
-._4t3i1tcg{height:24px}
-._80omtlke{cursor:pointer}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._i0dl1wug{flex-basis:auto}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._o5721q9c{white-space:nowrap}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/es2019/internal/dismiss-button.compiled.css

@@ -1,15 +0,0 @@
-
-._1dqoglyw{border-style:none}._16jlidpf{flex-grow:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
-._1bsb1tcg{width:24px}
-._1e0c1txw{display:flex}
-._1o9zidpf{flex-shrink:0}
-._4cvr1h6o{align-items:center}
-._4t3i1tcg{height:24px}
-._80omtlke{cursor:pointer}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._i0dl1wug{flex-basis:auto}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._o5721q9c{white-space:nowrap}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}

package/dist/esm/internal/dismiss-button.compiled.css

@@ -1,15 +0,0 @@
-
-._1dqoglyw{border-style:none}._16jlidpf{flex-grow:0}
-._19bvze3t{padding-left:var(--ds-space-0,0)}
-._1bah1h6o{justify-content:center}
-._1bsb1tcg{width:24px}
-._1e0c1txw{display:flex}
-._1o9zidpf{flex-shrink:0}
-._4cvr1h6o{align-items:center}
-._4t3i1tcg{height:24px}
-._80omtlke{cursor:pointer}
-._ca0qze3t{padding-top:var(--ds-space-0,0)}
-._i0dl1wug{flex-basis:auto}
-._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
-._o5721q9c{white-space:nowrap}
-._u5f3ze3t{padding-right:var(--ds-space-0,0)}