@atlaskit/flag 14.7.2 → 15.0.0

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

@@ -1,30 +1,12 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { jsx, css } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import FocusRing from '@atlaskit/focus-ring';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { useGlobalTheme } from '@atlaskit/theme/components';
-import { getFlagTextColor } from '../theme';
-var gridSize = getGridSize();
-var borderRadius = getBorderRadius();
-var dismissButtonStyles = css({
-  marginLeft: gridSize,
-  padding: 0,
-  flex: '0 0 auto',
-  appearance: 'none',
-  background: 'none',
-  border: 'none',
-  borderRadius: borderRadius,
-  cursor: 'pointer',
-  lineHeight: '1',
-  whiteSpace: 'nowrap'
-});
-var crossIconStyles = css({
-  paddingTop: "".concat(gridSize, "px")
-});
+import { flagTextColorToken } from '../theme';
 
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
@@ -32,10 +14,6 @@ var DismissButton = function DismissButton(_ref) {
       isBold = _ref.isBold,
       isExpanded = _ref.isExpanded,
       testId = _ref.testId;
-
-  var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
   var ButtonIcon = CrossIcon;
   var buttonLabel = 'Dismiss';
   var size = 'small';
@@ -44,22 +22,33 @@ var DismissButton = function DismissButton(_ref) {
   if (isBold) {
     ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
     buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-    size = 'large';
+    size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
 
-  return jsx(FocusRing, null, jsx("button", {
-    style: {
-      color: getFlagTextColor(appearance, mode)
-    },
-    css: [dismissButtonStyles, !isBold && crossIconStyles],
-    onClick: onClick,
-    "data-testid": buttonTestId,
+  return jsx(FocusRing, null, jsx(Box, {
+    as: "button",
     type: "button",
-    "aria-expanded": isBold ? isExpanded : undefined
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "none",
+    borderRadius: "normal",
+    padding: "scale.0",
+    width: "size.200",
+    height: "size.200",
+    onClick: onClick,
+    "aria-expanded": isBold ? isExpanded : undefined,
+    UNSAFE_style: {
+      flex: '0 0 auto',
+      background: 'none',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap'
+    },
+    testId: buttonTestId
   }, jsx(ButtonIcon, {
     label: buttonLabel,
-    size: size
+    size: size,
+    primaryColor: flagTextColorToken[appearance]
   })));
 };
 

package/dist/esm/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';
-var gridSize = getGridSize();
-var paddingLeft = gridSize * 5;
-var expanderStyles = css({
-  display: 'flex',
-  minWidth: 0,
-  maxHeight: 0,
-  padding: "0 0 0 ".concat(paddingLeft, "px"),
-  justifyContent: 'center',
-  flex: '1 1 100%',
-  flexDirection: 'column',
-  transition: "max-height 0.3s"
-});
-var expandedStyles = css({
-  maxHeight: 150
-});
 
 var Expander = function Expander(_ref) {
   var children = _ref.children,
@@ -25,14 +10,26 @@ var Expander = function Expander(_ref) {
   // 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 && "".concat(testId, "-expander")
-  }, jsx(ExitingPersistence, {
+    testId: testId && "".concat(testId, "-expander")
+  }, /*#__PURE__*/React.createElement(ExitingPersistence, {
     appear: true
-  }, isExpanded && jsx(FadeIn, null, function (props) {
-    return jsx("div", props, children);
+  }, isExpanded && /*#__PURE__*/React.createElement(FadeIn, null, function (props) {
+    return /*#__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/esm/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/esm/theme.js

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

package/dist/esm/version.json

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

package/dist/types/flag-actions.d.ts

@@ -1,15 +1,12 @@
 /** @jsx jsx */
-import type { ComponentType } from 'react';
-import { jsx } from '@emotion/react';
+import { ComponentType, FC } from 'react';
 import type { CustomThemeButtonProps } from '@atlaskit/button/types';
-import type { ThemeModes } from '@atlaskit/theme/types';
 import type { ActionsType, AppearanceTypes } from './types';
 declare type FlagActionsProps = {
     appearance: AppearanceTypes;
     actions: ActionsType;
     linkComponent?: ComponentType<CustomThemeButtonProps>;
-    mode: ThemeModes;
     testId?: string;
 };
-declare const FlagActions: (props: FlagActionsProps) => jsx.JSX.Element | null;
+declare const FlagActions: FC<FlagActionsProps>;
 export default FlagActions;

package/dist/types/flag.d.ts

@@ -1,4 +1,5 @@
-import { jsx } from '@emotion/react';
+/** @jsx jsx */
+import { FC } from 'react';
 import type { FlagProps } from './types';
 /**
  * __Flag__
@@ -10,5 +11,5 @@ import type { FlagProps } from './types';
  * - [Code](https://atlassian.design/components/flag/code)
  * - [Usage](https://atlassian.design/components/flag/usage)
  */
-declare const Flag: (props: FlagProps) => jsx.JSX.Element;
+declare const Flag: FC<FlagProps>;
 export default Flag;

package/dist/types/internal/expander.d.ts

@@ -1,8 +1,7 @@
-/** @jsx jsx */
-import { FC } from 'react';
+import React from 'react';
 declare type ExpanderProps = {
     isExpanded: boolean;
     testId?: string;
 };
-declare const Expander: FC<ExpanderProps>;
+declare const Expander: React.FC<ExpanderProps>;
 export default Expander;

package/dist/types/internal/index.d.ts

@@ -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/types/theme.d.ts

@@ -1,10 +1,15 @@
-import { ThemeModes } from '@atlaskit/theme/types';
+import { UNSAFE_BoxProps as BoxProps, UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
 import { AppearanceTypes } from './types';
-export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor = "rgba(9, 30, 66, 0.31)";
-export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
-export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const getFlagFocusRingColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const getActionBackground: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const getActionColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
+export declare const flagBackgroundColor: Record<AppearanceTypes, BoxProps['backgroundColor']>;
+export declare const flagIconColor: Record<AppearanceTypes, string>;
+export declare const flagTextColor: Record<AppearanceTypes, TextProps['color']>;
+export declare const flagTextColorToken: {
+    error: "var(--ds-text-inverse)";
+    info: "var(--ds-text-inverse)";
+    normal: "var(--ds-text-subtle)";
+    success: "var(--ds-text-inverse)";
+    warning: "var(--ds-text-warning-inverse)";
+};
+export declare const flagFocusRingColor: Record<AppearanceTypes, string>;
+export declare const actionBackgroundColor: Record<AppearanceTypes, string>;
+export declare const actionTextColor: Record<AppearanceTypes, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.7.2",
+  "version": "15.0.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/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -44,14 +36,15 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/ds-explorations": "^1.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/focus-ring": "^1.1.0",
+    "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/motion": "^1.2.0",
+    "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -63,7 +56,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/visual-regression": "*",
@@ -87,7 +80,8 @@
       "design-system": "v1",
       "design-tokens": "spacing",
       "ui-components": [
-        "lite-mode"
+        "lite-mode",
+        "primitives"
       ],
       "analytics": [
         "analytics-next"