@atlaskit/flag 14.5.1 → 14.5.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/flag
 
+## 14.5.2
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Internal changes to support adoption of '@compiled/react'.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - An a11y fix for the flag dismiss/toggle button such that it retains focus when toggled.
+- Updated dependencies
+
 ## 14.5.1
 
 ### Patch Changes

package/__perf__/withFlagGroup.tsx

@@ -13,7 +13,7 @@ export default () => (
       icon={
         <SuccessIcon
           label="Success"
-          secondaryColor={token('color.iconBorder.success', G400)}
+          secondaryColor={token('color.icon.success', G400)}
         />
       }
       id="success"

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

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _flag = _interopRequireDefault(require("./flag"));
 
 var _flagGroup = require("./flag-group");
@@ -24,17 +26,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 = "14.5.1";
+var packageVersion = "14.5.2";
 var AUTO_DISMISS_SECONDS = 8;
 exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
 
-function noop() {}
-
 var AutoDismissFlag = function AutoDismissFlag(props) {
   var id = props.id,
       analyticsContext = props.analyticsContext,
       _props$onDismissed = props.onDismissed,
-      onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed;
+      onDismissedProp = _props$onDismissed === void 0 ? _noop.default : _props$onDismissed;
   var autoDismissTimer = (0, _react.useRef)(null);
 
   var _useFlagGroup = (0, _flagGroup.useFlagGroup)(),

package/dist/cjs/flag-actions.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _core = require("@emotion/core");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -19,11 +17,52 @@ var _constants2 = require("./constants");
 
 var _theme = require("./theme");
 
-var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable @repo/internal/styles/no-nested-styles */
 
+/** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var separatorWidth = gridSize * 2;
 var defaultAppearanceTranslate = gridSize / 4;
+var separatorStyles = (0, _core.css)({
+  display: 'inline-block',
+  width: separatorWidth,
+  textAlign: 'center'
+});
+var actionContainerStyles = (0, _core.css)({
+  display: 'flex',
+  paddingTop: gridSize,
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
+});
+var boldActionContainerStyles = (0, _core.css)({
+  transform: 0
+});
+var buttonStyles = (0, _core.css)({
+  '&&, a&&': {
+    marginLeft: 0,
+    padding: "0 ".concat(gridSize, "px !important"),
+    background: "var(--bg-color)",
+    color: "var(--color) !important",
+    fontWeight: 500
+  },
+  '&&:focus, a&&:focus': {
+    boxShadow: "0 0 0 2px var(--focus-color)"
+  },
+  '&&:hover, &&:active, a&&:hover, a&&:active': {
+    textDecoration: 'underline'
+  }
+});
+var appeanceNormalButtonStyles = (0, _core.css)({
+  '&&, a&&': {
+    padding: '0 !important'
+  }
+});
+var isBoldButtonStyles = (0, _core.css)({
+  '&&, a&&': {
+    marginLeft: gridSize
+  }
+});
 
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
@@ -40,11 +79,11 @@ var FlagActions = function FlagActions(props) {
 
   var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
   return (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        flex-wrap: wrap;\n        padding-top: ", "px;\n        transform: ", ";\n        align-items: center;\n      "])), gridSize, appearance === _constants2.DEFAULT_APPEARANCE ? "translateX(-".concat(defaultAppearanceTranslate, "px)") : 0),
+    css: [actionContainerStyles, isBold && boldActionContainerStyles],
     "data-testid": testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     return [index && !isBold ? (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              text-align: center;\n              display: inline-block;\n              width: ", "px;\n            "])), separatorWidth),
+      css: separatorStyles,
       key: index + 0.5
     }, "\xB7") : '', (0, _core.jsx)(_customThemeButton.default, {
       onClick: action.onClick,
@@ -55,7 +94,12 @@ var FlagActions = function FlagActions(props) {
       spacing: "compact",
       testId: action.testId,
       key: index,
-      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n            &&,\n            a&& {\n              margin-left: ", "px;\n              font-weight: 500;\n              padding: 0 ", "px !important;\n              background: ", ";\n              color: ", " !important;\n            }\n            &&:focus,\n            a&&:focus {\n              box-shadow: 0 0 0 2px ", ";\n            }\n            &&:hover,\n            &&:active,\n            a&&:hover,\n            a&&:active {\n              text-decoration: underline;\n            }\n          "])), index && isBold ? gridSize : 0, appearance === 'normal' ? 0 : gridSize, (0, _theme.getActionBackground)(appearance, mode), (0, _theme.getActionColor)(appearance, mode), (0, _theme.getFlagFocusRingColor)(appearance, mode))
+      style: {
+        '--color': (0, _theme.getActionColor)(appearance, mode),
+        '--bg-color': (0, _theme.getActionBackground)(appearance, mode),
+        '--focus-color': (0, _theme.getFlagFocusRingColor)(appearance, mode)
+      },
+      css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
     }, action.content)];
   }));
 };

package/dist/cjs/flag-group.js

@@ -10,8 +10,6 @@ exports.useFlagGroup = useFlagGroup;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = require("react");
@@ -20,12 +18,15 @@ var _core = require("@emotion/core");
 
 var _motion = require("@atlaskit/motion");
 
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3;
-
+/** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var flagWidth = gridSize * 50;
 exports.flagWidth = flagWidth;
@@ -33,9 +34,6 @@ var flagAnimationTime = 400;
 exports.flagAnimationTime = flagAnimationTime;
 var flagBottom = gridSize * 6;
 var flagLeft = gridSize * 10;
-
-function noop() {}
-
 var defaultFlagGroupContext = {
   onDismissed: function onDismissed() {},
   isDismissAllowed: false
@@ -49,7 +47,51 @@ function useFlagGroup() {
 // that causes a broken transition
 
 
-var baseStyles = "\n  bottom: 0;\n  position: absolute;\n  width: ".concat(flagWidth, "px;\n  transition: transform ").concat(flagAnimationTime, "ms ease-in-out;\n\n  @media (max-width: 560px) {\n    width: 100vw;\n  }\n\n  &:first-of-type {\n    transition: none;\n    transform: translate(0,0);\n  }\n\n  &:nth-of-type(n + 2) {\n    animation-duration: 0ms;\n    transform: translateX(0) translateY(100%) translateY(").concat(2 * gridSize, "px);\n  }\n\n  /* Layer the 'primary' flag above the 'secondary' flag */\n  &:nth-of-type(1) {\n    z-index: 5;\n  }\n  &:nth-of-type(2) {\n    z-index: 4;\n  }\n\n  &:nth-of-type(n + 4) {\n    visibility: hidden;\n  }\n");
+var baseStyles = (0, _core.css)({
+  width: flagWidth,
+  position: 'absolute',
+  bottom: 0,
+  transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
+  '@media (max-width: 560px)': {
+    width: '100vw'
+  },
+  ':first-of-type': {
+    transform: "translate(0,0)",
+    transition: 'none'
+  },
+  ':nth-of-type(n + 2)': {
+    animationDuration: '0ms',
+    transform: "translateX(0) translateY(100%) translateY(".concat(2 * gridSize, "px)")
+  },
+  ':nth-of-type(1)': {
+    zIndex: 5
+  },
+  ':nth-of-type(2)': {
+    zIndex: 4
+  },
+  '&:nth-of-type(n + 4)': {
+    visibility: 'hidden'
+  }
+}); // Transform needed to push up while 1st flag is leaving
+// Exiting time should match the exiting time of motion so is halved
+
+var dismissAllowedStyles = (0, _core.css)({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&& + *': {
+    transform: "translate(0, 0)",
+    transitionDuration: "".concat(flagAnimationTime / 2, "ms")
+  }
+});
+var flagGroupContainerStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: _constants.layers.flag(),
+  bottom: flagBottom,
+  left: flagLeft,
+  '@media (max-width: 560px)': {
+    bottom: 0,
+    left: 0
+  }
+});
 
 var FlagGroup = function FlagGroup(props) {
   var id = props.id,
@@ -59,7 +101,7 @@ var FlagGroup = function FlagGroup(props) {
       LabelTag = _props$labelTag === void 0 ? 'h2' : _props$labelTag,
       children = props.children,
       _props$onDismissed = props.onDismissed,
-      onDismissed = _props$onDismissed === void 0 ? noop : _props$onDismissed;
+      onDismissed = _props$onDismissed === void 0 ? _noop.default : _props$onDismissed;
   var hasFlags = Array.isArray(children) ? children.length > 0 : Boolean(children);
   var dismissFlagContext = (0, _react.useMemo)(function () {
     return {
@@ -72,17 +114,15 @@ var FlagGroup = function FlagGroup(props) {
     return children && (0, _typeof2.default)(children) === 'object' ? _react.Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
       return (0, _core.jsx)(_motion.SlideIn, {
-        enterFrom: 'left',
-        fade: 'inout',
+        enterFrom: "left",
+        fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: function animationTimingFunction() {
           return _motion.easeIn;
         }
       }, function (props) {
         return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
-          css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    ", "\n                    ", "\n                  "])), baseStyles, isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
-          // Exiting time should match the exiting time of motion so is halved
-          "\n                    && + * {\n                     transform: translate(0, 0);\n                     transition-duration: ".concat(flagAnimationTime / 2, "ms\n                   }") : '')
+          css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
         }), (0, _core.jsx)(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
@@ -95,10 +135,8 @@ var FlagGroup = function FlagGroup(props) {
     zIndex: _constants.layers.flag()
   }, (0, _core.jsx)("div", {
     id: id,
-    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          bottom: ", "px;\n          left: ", "px;\n          position: fixed;\n          z-index: ", ";\n          @media (max-width: 560px) {\n            bottom: 0;\n            left: 0;\n          }\n        "])), flagBottom, flagLeft, _constants.layers.flag())
-  }, hasFlags ? (0, _core.jsx)(LabelTag, {
-    css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              border: 0;\n              clip: rect(1px, 1px, 1px, 1px);\n              height: 1px;\n              overflow: hidden;\n              padding: 0;\n              position: absolute;\n              white-space: nowrap;\n              width: 1px;\n            "])))
-  }, label) : null, (0, _core.jsx)(_motion.ExitingPersistence, {
+    css: flagGroupContainerStyles
+  }, hasFlags ? (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)(LabelTag, null, label)) : null, (0, _core.jsx)(_motion.ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };

package/dist/cjs/flag.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -19,44 +17,55 @@ var _react = require("react");
 
 var _core = require("@emotion/core");
 
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-
-var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
-
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
-
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
 var _constants2 = require("./constants");
 
 var _theme = require("./theme");
 
-var _expander = _interopRequireDefault(require("./expander"));
-
 var _flagActions = _interopRequireDefault(require("./flag-actions"));
 
 var _flagGroup = require("./flag-group");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _internal = require("./internal");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function noop() {}
-
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.5.1"
+  packageVersion: "14.5.2"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;
 var headerHeight = gridSize * 4;
+var iconStyles = (0, _core.css)({
+  display: 'flex',
+  height: headerHeight,
+  alignItems: 'center'
+});
+var flagHeaderStyles = (0, _core.css)({
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: doubleGridSize,
+  borderRadius: (0, _constants.borderRadius)()
+});
+var flagContainerStyles = (0, _core.css)({
+  width: '100%',
+  zIndex: _constants.layers.flag(),
+  borderRadius: (0, _constants.borderRadius)(),
+  transition: 'background-color 200ms'
+});
 
 var Flag = function Flag(props) {
   var _props$actions = props.actions,
@@ -69,12 +78,12 @@ var Flag = function Flag(props) {
       linkComponent = props.linkComponent,
       onMouseOver = props.onMouseOver,
       _props$onFocus = props.onFocus,
-      onFocus = _props$onFocus === void 0 ? noop : _props$onFocus,
+      onFocus = _props$onFocus === void 0 ? _noop.default : _props$onFocus,
       onMouseOut = props.onMouseOut,
       _props$onBlur = props.onBlur,
-      onBlur = _props$onBlur === void 0 ? noop : _props$onBlur,
+      onBlur = _props$onBlur === void 0 ? _noop.default : _props$onBlur,
       _props$onDismissed = props.onDismissed,
-      onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed,
+      onDismissedProp = _props$onDismissed === void 0 ? _noop.default : _props$onDismissed,
       testId = props.testId,
       id = props.id,
       analyticsContext = props.analyticsContext;
@@ -99,60 +108,16 @@ var Flag = function Flag(props) {
     analyticsData: analyticsContext
   }, analyticsAttributes));
   var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
-  var renderToggleOrDismissButton = (0, _react.useCallback)(function (_ref) {
-    var mode = _ref.mode;
-
-    // If it is normal appearance a toggle button cannot be rendered
-    // Ensure onDismissed is defined and isDismissAllowed is true to render
-    // the dismiss button
-    if (!isBold && !isDismissAllowed) {
-      return null;
-    } // If it is bold then ensure there is a description or actions to render
-    // the toggle button
-
-
-    if (isBold && !description && !actions.length) {
-      return null;
+  var toggleExpand = (0, _react.useCallback)(function () {
+    setIsExpanded(function (previous) {
+      return !previous;
+    });
+  }, []);
+  var buttonActionCallback = (0, _react.useCallback)(function () {
+    if (isDismissAllowed) {
+      onDismissedAnalytics(id);
     }
-
-    var ButtonIcon = _cross.default;
-    var buttonLabel = 'Dismiss';
-
-    var buttonAction = function buttonAction() {
-      if (isDismissAllowed) {
-        onDismissedAnalytics(id);
-      }
-    };
-
-    var size = 'small';
-    var buttonTestId = testId && "".concat(testId, "-dismiss");
-    var a11yProps = {};
-
-    if (isBold) {
-      ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
-      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-
-      buttonAction = function buttonAction() {
-        return setIsExpanded(!isExpanded);
-      };
-
-      size = 'large';
-      buttonTestId = testId && "".concat(testId, "-toggle");
-      a11yProps = {
-        'aria-expanded': isExpanded
-      };
-    }
-
-    return (0, _core.jsx)("button", (0, _extends2.default)({
-      css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            appearance: none;\n            background: none;\n            border: none;\n            border-radius: ", "px;\n            color: ", ";\n            cursor: pointer;\n            flex: 0 0 auto;\n            line-height: 1;\n            margin-left: ", "px;\n            padding: 0;\n            white-space: nowrap;\n            &:focus {\n              outline: none;\n              box-shadow: 0 0 0 2px ", ";\n            }\n          "])), (0, _constants.borderRadius)(), (0, _theme.getFlagTextColor)(appearance, mode), gridSize, (0, _theme.getFlagFocusRingColor)(appearance, mode)),
-      onClick: buttonAction,
-      "data-testid": buttonTestId,
-      type: "button"
-    }, a11yProps), (0, _core.jsx)(ButtonIcon, {
-      label: buttonLabel,
-      size: size
-    }));
-  }, [actions.length, appearance, description, id, isBold, isDismissAllowed, isExpanded, onDismissedAnalytics, testId]);
+  }, [onDismissedAnalytics, id, isDismissAllowed]);
   (0, _react.useEffect)(function () {
     // If buttons are removed as a prop, update isExpanded to be false
     if (isBold && isExpanded && !description && !actions.length) {
@@ -175,45 +140,57 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var OptionalDismissButton = renderToggleOrDismissButton;
-  var boxShadow = "var(--ds-overlay, ".concat("0 20px 32px -8px ".concat(_theme.flagShadowColor), ")");
+  var boxShadow = "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(_theme.flagShadowColor), ")");
 
   if (!isBold) {
-    boxShadow = "var(--ds-overlay, ".concat("0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow), ")");
+    boxShadow = "var(--ds-shadow-overlay, ".concat("0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow), ")");
   }
 
-  return (0, _core.jsx)(_components.default.Consumer, null, function (tokens) {
-    var mode = tokens.mode;
-    var textColour = (0, _theme.getFlagTextColor)(appearance, mode);
-    var iconColour = (0, _theme.getFlagIconColor)(appearance, mode);
-    return (0, _core.jsx)("div", (0, _extends2.default)({
-      css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), (0, _theme.getFlagBackgroundColor)(appearance, mode), (0, _constants.borderRadius)(), boxShadow, textColour, _constants.layers.flag()),
-      role: "alert",
-      "data-testid": testId
-    }, autoDismissProps), (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, (0, _constants.borderRadius)(), (0, _theme.getFlagFocusRingColor)(appearance, mode), (0, _theme.getFlagFocusRingColor)(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0
-    }, (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  color: ", ";\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), iconColour, headerHeight)
-    }, icon, (0, _core.jsx)("span", {
-      css: (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
-    }, title), (0, _core.jsx)(OptionalDismissButton, {
-      mode: mode
-    })), (0, _core.jsx)(_expander.default, {
-      isExpanded: !isBold || isExpanded,
-      testId: testId
-    }, description && (0, _core.jsx)("div", {
-      css: (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
-      "data-testid": testId && "".concat(testId, "-description")
-    }, description), (0, _core.jsx)(_flagActions.default, {
-      actions: actions,
-      appearance: appearance,
-      linkComponent: linkComponent,
-      testId: testId,
-      mode: mode
-    }))));
-  });
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var textColor = (0, _theme.getFlagTextColor)(appearance, mode);
+  var iconColor = (0, _theme.getFlagIconColor)(appearance, mode);
+  var isDismissable = isBold || isDismissAllowed;
+  return (0, _core.jsx)("div", (0, _extends2.default)({
+    style: {
+      color: textColor,
+      backgroundColor: (0, _theme.getFlagBackgroundColor)(appearance, mode),
+      boxShadow: boxShadow
+    },
+    css: flagContainerStyles,
+    role: "alert",
+    "data-testid": testId
+  }, autoDismissProps), (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("div", {
+    css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0
+  }, (0, _core.jsx)("div", {
+    style: {
+      color: iconColor
+    },
+    css: iconStyles
+  }, icon, (0, _core.jsx)(_internal.Title, {
+    color: textColor
+  }, title), isDismissable ? !(isBold && !description && !actions.length) && (0, _core.jsx)(_internal.DismissButton, {
+    testId: testId,
+    appearance: appearance,
+    isBold: isBold,
+    isExpanded: isExpanded,
+    onClick: isBold ? toggleExpand : buttonActionCallback
+  }) : null), (0, _core.jsx)(_internal.Expander, {
+    isExpanded: !isBold || isExpanded,
+    testId: testId
+  }, description && (0, _core.jsx)(_internal.Description, {
+    testId: testId && "".concat(testId, "-description"),
+    color: textColor
+  }, description), (0, _core.jsx)(_flagActions.default, {
+    actions: actions,
+    appearance: appearance,
+    linkComponent: linkComponent,
+    testId: testId,
+    mode: mode
+  })))));
 };
 
 var _default = Flag;

package/dist/cjs/internal/description.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+/** @jsx jsx */
+var descriptionStyles = (0, _core.css)({
+  /* height is defined as 5 lines maximum by design */
+  maxHeight: 100,
+  overflow: 'auto',
+  wordWrap: 'break-word'
+});
+
+var Description = function Description(_ref) {
+  var color = _ref.color,
+      testId = _ref.testId,
+      children = _ref.children;
+  return (0, _core.jsx)("div", {
+    style: {
+      color: color
+    },
+    css: descriptionStyles,
+    "data-testid": testId
+  }, children);
+};
+
+var _default = Description;
+exports.default = _default;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _components = require("@atlaskit/theme/components");
+
+var _theme = require("../theme");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var borderRadius = (0, _constants.borderRadius)();
+var dismissButtonStyles = (0, _core.css)({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius: borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+var DismissButton = function DismissButton(_ref) {
+  var appearance = _ref.appearance,
+      onClick = _ref.onClick,
+      isBold = _ref.isBold,
+      isExpanded = _ref.isExpanded,
+      testId = _ref.testId;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  var ButtonIcon = _cross.default;
+  var buttonLabel = 'Dismiss';
+  var size = 'small';
+  var buttonTestId = testId && "".concat(testId, "-dismiss");
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && "".concat(testId, "-toggle");
+  }
+
+  return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("button", {
+    style: {
+      color: (0, _theme.getFlagTextColor)(appearance, mode)
+    },
+    css: dismissButtonStyles,
+    onClick: onClick,
+    "data-testid": buttonTestId,
+    type: "button",
+    "aria-expanded": isBold ? isExpanded : undefined
+  }, (0, _core.jsx)(ButtonIcon, {
+    label: buttonLabel,
+    size: size
+  })));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(DismissButton);
+
+exports.default = _default;