@atlaskit/flag 14.7.2 → 15.0.0

package/dist/es2019/internal/expander.js

@@ -1,22 +1,7 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '@atlaskit/ds-explorations';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
-const paddingLeft = gridSize * 5;
-const expanderStyles = css({
-  display: 'flex',
-  minWidth: 0,
-  maxHeight: 0,
-  padding: `0 0 0 ${paddingLeft}px`,
-  justifyContent: 'center',
-  flex: '1 1 100%',
-  flexDirection: 'column',
-  transition: `max-height 0.3s`
-});
-const expandedStyles = css({
-  maxHeight: 150
-});
 
 const Expander = ({
   children,
@@ -26,13 +11,25 @@ const Expander = ({
   // Need to always render the ExpanderInternal otherwise the
   // reveal transition doesn't happen. We can't use CSS animation for
   // the the reveal because we don't know the height of the content.
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement(Box, {
+    UNSAFE_style: {
+      minWidth: 0,
+      maxHeight: isExpanded ? 150 : 0,
+      flex: '1 1 100%',
+      transition: `max-height 0.3s`
+    },
     "aria-hidden": !isExpanded,
-    css: [expanderStyles, isExpanded && expandedStyles],
-    "data-testid": testId && `${testId}-expander`
-  }, jsx(ExitingPersistence, {
+    testId: testId && `${testId}-expander`
+  }, /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
-  }, isExpanded && jsx(FadeIn, null, props => jsx("div", props, children))));
+  }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, props => /*#__PURE__*/React.createElement(Box, _extends({
+    display: "block",
+    UNSAFE_style: {
+      width: '100%'
+    }
+  }, props), /*#__PURE__*/React.createElement(Stack, {
+    gap: "scale.100"
+  }, children)))));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 
 

package/dist/es2019/internal/index.js

@@ -1,4 +1,2 @@
-export { default as Title } from './title';
-export { default as Description } from './description';
 export { default as Expander } from './expander';
 export { default as DismissButton } from './dismiss-button';

package/dist/es2019/theme.js

@@ -1,149 +1,55 @@
-import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
-const flagBackgroundColor = {
-  error: {
-    light: `var(--ds-background-danger-bold, ${R400})`,
-    dark: `var(--ds-background-danger-bold, ${R300})`
-  },
-  info: {
-    light: `var(--ds-background-neutral-bold, ${N500})`,
-    dark: `var(--ds-background-neutral-bold, ${N500})`
-  },
-  normal: {
-    light: `var(--ds-surface-overlay, ${N0})`,
-    dark: `var(--ds-surface-overlay, ${DN50})`
-  },
-  success: {
-    light: `var(--ds-background-success-bold, ${G400})`,
-    dark: `var(--ds-background-success-bold, ${G300})`
-  },
-  warning: {
-    light: `var(--ds-background-warning-bold, ${Y200})`,
-    dark: `var(--ds-background-warning-bold, ${Y300})`
-  }
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { B100, B400, N0, N200, N30A, N40, N500, N700 } from '@atlaskit/theme/colors';
+export const flagBackgroundColor = {
+  error: 'danger.bold',
+  info: 'neutral.bold',
+  normal: 'elevation.surface.overlay',
+  success: 'success.bold',
+  warning: 'warning.bold'
+};
+export const flagIconColor = {
+  error: `var(--ds-icon-inverse, ${N0})`,
+  info: `var(--ds-icon-inverse, ${N0})`,
+  normal: `var(--ds-icon-subtle, ${N500})`,
+  success: `var(--ds-icon-inverse, ${N0})`,
+  warning: `var(--ds-icon-warning-inverse, ${N700})`
 };
-export const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode]; // token set in flag.tsx instead
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
-export const flagBorderColor = N60A;
-export const flagShadowColor = N50A;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
-const flagIconColor = {
-  error: {
-    light: `var(--ds-icon-inverse, ${N0})`,
-    dark: `var(--ds-icon-inverse, ${DN40})`
-  },
-  info: {
-    light: `var(--ds-icon-inverse, ${N0})`,
-    dark: `var(--ds-icon-inverse, ${DN600})`
-  },
-  normal: {
-    light: `var(--ds-icon-subtle, ${N500})`,
-    dark: `var(--ds-icon-subtle, ${DN600})`
-  },
-  success: {
-    light: `var(--ds-icon-inverse, ${N0})`,
-    dark: `var(--ds-icon-inverse, ${DN40})`
-  },
-  warning: {
-    light: `var(--ds-icon-warning-inverse, ${N700})`,
-    dark: `var(--ds-icon-warning-inverse, ${DN40})`
-  }
-};
-const flagTextColor = {
-  error: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN40})`
-  },
-  info: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN600})`
-  },
-  normal: {
-    light: `var(--ds-text-subtle, ${N500})`,
-    dark: `var(--ds-text-subtle, ${DN600})`
-  },
-  success: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN40})`
-  },
-  warning: {
-    light: `var(--ds-text-warning-inverse, ${N700})`,
-    dark: `var(--ds-text-warning-inverse, ${DN40})`
-  }
+export const flagTextColor = {
+  error: 'inverse',
+  info: 'inverse',
+  normal: 'subtle',
+  success: 'inverse',
+  warning: 'warning.inverse'
 };
-export const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
-export const getFlagIconColor = (appearance, mode) => flagIconColor[appearance][mode];
-const flagFocusRingColor = {
-  error: {
-    light: `var(--ds-border-focused, ${N40})`,
-    dark: `var(--ds-border-focused, ${N40})`
-  },
-  info: {
-    light: `var(--ds-border-focused, ${N40})`,
-    dark: `var(--ds-border-focused, ${N40})`
-  },
-  normal: {
-    light: `var(--ds-border-focused, ${B100})`,
-    dark: `var(--ds-border-focused, ${B100})`
-  },
-  success: {
-    light: `var(--ds-border-focused, ${N40})`,
-    dark: `var(--ds-border-focused, ${N40})`
-  },
-  warning: {
-    light: `var(--ds-border-focused, ${N200})`,
-    dark: `var(--ds-border-focused, ${N200})`
-  }
+export const flagTextColorToken = {
+  error: `var(--ds-text-inverse, ${N0})`,
+  info: `var(--ds-text-inverse, ${N0})`,
+  normal: `var(--ds-text-subtle, ${N500})`,
+  success: `var(--ds-text-inverse, ${N0})`,
+  warning: `var(--ds-text-warning-inverse, ${N700})`
 };
-export const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
-const lightButtonBackground = 'rgba(255, 255, 255, 0.08)'; // TODO: DSP-2519 Interaction tokens should be used for hovered and pressed states
+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
 
-const actionBackground = {
-  success: {
-    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
-    dark: `var(--ds-background-neutral, ${N30A})`
-  },
-  info: {
-    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
-    dark: `var(--ds-background-neutral, ${lightButtonBackground})`
-  },
-  error: {
-    light: `var(--ds-background-neutral, ${lightButtonBackground})`,
-    dark: `var(--ds-background-neutral, ${N30A})`
-  },
-  warning: {
-    light: `var(--ds-background-neutral, ${N30A})`,
-    dark: `var(--ds-background-neutral, ${N30A})`
-  },
-  normal: {
-    light: 'none',
-    dark: 'none'
-  }
-};
-const actionColor = {
-  success: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN40})`
-  },
-  info: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN600})`
-  },
-  error: {
-    light: `var(--ds-text-inverse, ${N0})`,
-    dark: `var(--ds-text-inverse, ${DN600})`
-  },
-  warning: {
-    light: `var(--ds-text-warning-inverse, ${N700})`,
-    dark: `var(--ds-text-warning-inverse, ${DN40})`
-  },
-  normal: {
-    light: `var(--ds-link, ${B400})`,
-    dark: `var(--ds-link, ${B100})`
-  }
+export const actionBackgroundColor = {
+  success: `var(--ds-background-neutral, ${N30A})`,
+  info: `var(--ds-background-neutral, ${N30A})`,
+  error: `var(--ds-background-neutral, ${N30A})`,
+  warning: `var(--ds-background-neutral, ${N30A})`,
+  normal: 'none'
 };
-export const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];
-export const getActionColor = (appearance, mode) => actionColor[appearance][mode];
+export const actionTextColor = {
+  success: `var(--ds-text-inverse, ${N0})`,
+  info: `var(--ds-text-inverse, ${N0})`,
+  error: `var(--ds-text-inverse, ${N0})`,
+  warning: `var(--ds-text-warning-inverse, ${N700})`,
+  normal: `var(--ds-link, ${B400})`
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.7.2",
+	"version": "15.0.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 = "14.7.2";
+var packageVersion = "15.0.0";
 export var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/esm/flag-actions.js

@@ -3,30 +3,13 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { DEFAULT_APPEARANCE } from './constants';
-import { getActionBackground, getActionColor, getFlagFocusRingColor } from './theme';
+import { flagFocusRingColor, actionBackgroundColor, actionTextColor } from './theme';
 var gridSize = getGridSize();
-var separatorWidth = gridSize * 2;
-var defaultAppearanceTranslate = gridSize / 4;
-var separatorStyles = css({
-  display: 'inline-block',
-  width: separatorWidth,
-  textAlign: 'center'
-});
-var actionContainerStyles = css({
-  display: 'flex',
-  paddingTop: gridSize,
-  alignItems: 'center',
-  flexWrap: 'wrap',
-  transform: "translateX(-".concat(defaultAppearanceTranslate, "px)")
-});
-var boldActionContainerStyles = css({
-  transform: 0
-});
 var buttonStyles = css({
   '&&, a&&': {
-    marginLeft: 0,
     padding: "0 ".concat(gridSize, "px !important"),
     background: "var(--bg-color)",
     color: "var(--color) !important",
@@ -39,16 +22,11 @@ var buttonStyles = css({
     textDecoration: 'underline'
   }
 });
-var appeanceNormalButtonStyles = css({
+var appearanceNormalButtonStyles = css({
   '&&, a&&': {
     padding: '0 !important'
   }
 });
-var isBoldButtonStyles = css({
-  '&&, a&&': {
-    marginRight: gridSize
-  }
-});
 
 var FlagActions = function FlagActions(props) {
   var _props$appearance = props.appearance,
@@ -56,7 +34,6 @@ var FlagActions = function FlagActions(props) {
       _props$actions = props.actions,
       actions = _props$actions === void 0 ? [] : _props$actions,
       linkComponent = props.linkComponent,
-      mode = props.mode,
       testId = props.testId;
 
   if (!actions.length) {
@@ -64,14 +41,17 @@ var FlagActions = function FlagActions(props) {
   }
 
   var isBold = appearance !== DEFAULT_APPEARANCE;
-  return jsx("div", {
-    css: [actionContainerStyles, isBold && boldActionContainerStyles],
-    "data-testid": testId && "".concat(testId, "-actions")
+  return jsx(Inline, {
+    gap: "scale.100",
+    flexWrap: "wrap",
+    alignItems: "center",
+    divider: isBold ? null : '·',
+    UNSAFE_style: isBold ? undefined : {
+      transform: "translateX(-2px)"
+    },
+    testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
-    return [index && !isBold ? jsx("div", {
-      css: separatorStyles,
-      key: index + 0.5
-    }, "\xB7") : '', jsx(Button, {
+    return jsx(Button, {
       onClick: action.onClick,
       href: action.href,
       target: action.target,
@@ -81,12 +61,12 @@ var FlagActions = function FlagActions(props) {
       testId: action.testId,
       key: index,
       style: {
-        '--color': getActionColor(appearance, mode),
-        '--bg-color': getActionBackground(appearance, mode),
-        '--focus-color': getFlagFocusRingColor(appearance, mode)
+        '--color': actionTextColor[appearance],
+        '--bg-color': actionBackgroundColor[appearance],
+        '--focus-color': flagFocusRingColor[appearance]
       },
-      css: [buttonStyles, isBold && isBoldButtonStyles, appearance === 'normal' && appeanceNormalButtonStyles]
-    }, action.content)];
+      css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
+    }, action.content);
   }));
 }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
 

package/dist/esm/flag-group.js

@@ -1,9 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import noop from '@atlaskit/ds-lib/noop';
@@ -28,7 +28,6 @@ export function useFlagGroup() {
 
 var baseStyles = css({
   width: flagWidth,
-  position: 'absolute',
   bottom: 0,
   transition: "transform ".concat(flagAnimationTime, "ms ease-in-out"),
   '@media (max-width: 560px)': {
@@ -62,7 +61,6 @@ var dismissAllowedStyles = css({
   }
 });
 var flagGroupContainerStyles = css({
-  position: 'fixed',
   zIndex: layers.flag(),
   bottom: flagBottom,
   left: flagLeft,
@@ -107,10 +105,16 @@ var FlagGroup = function FlagGroup(props) {
         animationTimingFunction: function animationTimingFunction() {
           return easeIn;
         }
-      }, function (props) {
-        return jsx("div", _extends({}, props, {
-          css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
-        }), jsx(FlagGroupContext.Provider, {
+      }, function (_ref) {
+        var className = _ref.className,
+            ref = _ref.ref;
+        return jsx(Box, {
+          display: "block",
+          position: "absolute",
+          css: [baseStyles, isDismissAllowed && dismissAllowedStyles],
+          className: className,
+          ref: ref
+        }, jsx(FlagGroupContext.Provider, {
           value: // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
         }, flag));
@@ -120,7 +124,9 @@ var FlagGroup = function FlagGroup(props) {
 
   return jsx(Portal, {
     zIndex: layers.flag()
-  }, jsx("div", {
+  }, jsx(Box, {
+    display: "block",
+    position: "fixed",
     id: id,
     css: flagGroupContainerStyles
   }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {

package/dist/esm/flag.js

@@ -8,46 +8,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline, UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import FocusRing from '@atlaskit/focus-ring';
 import { DEFAULT_APPEARANCE } from './constants';
-import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagTextColor, getFlagIconColor } from './theme';
+import { flagTextColor, flagBackgroundColor, flagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
-import { Title, Description, Expander, DismissButton } from './internal';
+import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.2"
+  packageVersion: "15.0.0"
 };
-var gridSize = getGridSize();
-var doubleGridSize = gridSize * 2;
-var titleGroupStyles = css({
-  display: 'flex',
-  alignItems: 'start'
-});
-var iconTitleStyles = css({
-  display: 'flex',
-  paddingTop: "".concat(gridSize / 2, "px"),
-  alignItems: 'start',
-  flex: 1
-});
-var flagHeaderStyles = css({
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: doubleGridSize,
-  borderRadius: borderRadius()
-});
-var flagContainerStyles = css({
-  width: '100%',
-  zIndex: layers.flag(),
-  borderRadius: borderRadius(),
-  transition: 'background-color 200ms'
-});
 /**
  * __Flag__
  *
@@ -132,42 +107,55 @@ var Flag = function Flag(props) {
     onMouseOut: onMouseOut,
     onBlur: onBlurAnalytics
   };
-  var boxShadowValue = "0 20px 32px -8px ".concat(flagShadowColor);
-
-  if (!isBold) {
-    boxShadowValue = "0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadowValue);
-  }
-
-  var boxShadow = "var(--ds-shadow-overlay, ".concat(boxShadowValue, ")");
-
-  var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
-  var textColor = getFlagTextColor(appearance, mode);
-  var iconColor = getFlagIconColor(appearance, mode);
+  var textColor = flagTextColor[appearance];
+  var iconColor = flagIconColor[appearance];
   var isDismissable = isBold || isDismissAllowed;
-  return jsx("div", _extends({
-    style: {
-      color: textColor,
-      backgroundColor: getFlagBackgroundColor(appearance, mode),
-      boxShadow: boxShadow
+  var shouldRenderGap = !isBold && (description || actions.length) || isExpanded;
+  return jsx(FocusRing, null, jsx(Box, _extends({
+    display: "block",
+    backgroundColor: flagBackgroundColor[appearance],
+    shadow: "overlay",
+    padding: "scale.200",
+    borderRadius: "normal",
+    overflow: "hidden",
+    layer: "flag",
+    UNSAFE_style: {
+      width: '100%',
+      transition: 'background-color 200ms'
     },
-    css: flagContainerStyles,
     role: "alert",
-    "data-testid": testId
-  }, autoDismissProps), jsx(FocusRing, null, jsx("div", {
-    css: flagHeaderStyles // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0,
+    testId: testId
+  }, autoDismissProps), jsx(Inline, {
+    gap: "scale.200"
+  }, jsx(Box, {
+    alignItems: "start",
+    UNSAFE_style: {
+      color: iconColor,
+      flexShrink: 0
+    }
+  }, icon), jsx(Stack, {
+    gap: shouldRenderGap ? 'scale.100' : 'scale.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
     ,
-    tabIndex: 0
-  }, jsx("div", {
-    style: {
-      color: iconColor
-    },
-    css: titleGroupStyles
-  }, jsx("div", {
-    css: iconTitleStyles
-  }, icon, jsx(Title, {
-    color: textColor
+    UNSAFE_style: {
+      flexGrow: 1,
+      transition: "gap 0.3s"
+    }
+  }, jsx(Inline, {
+    gap: "scale.100",
+    justifyContent: "spaceBetween"
+  }, jsx(Box, {
+    display: "block",
+    UNSAFE_style: {
+      paddingTop: 2
+    }
+  }, jsx(Text, {
+    color: textColor,
+    fontWeight: "600",
+    UNSAFE_style: {
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    }
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
     appearance: appearance,
@@ -177,17 +165,23 @@ var Flag = function Flag(props) {
   }) : null), jsx(Expander, {
     isExpanded: !isBold || isExpanded,
     testId: testId
-  }, description && jsx(Description, {
-    testId: testId && "".concat(testId, "-description"),
+  }, description && jsx(Text, {
+    as: "div",
     color: textColor,
-    isBold: isBold
+    UNSAFE_style: {
+      maxHeight: 100,
+      // height is defined as 5 lines maximum by design
+      overflow: 'auto',
+      overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
+
+    },
+    testId: testId && "".concat(testId, "-description")
   }, description), jsx(Actions, {
     actions: actions,
     appearance: appearance,
     linkComponent: linkComponent,
-    testId: testId,
-    mode: mode
-  })))));
+    testId: testId
+  }))))));
 };
 
 export default Flag;