@atlaskit/flag 14.4.1 → 14.5.2

package/dist/es2019/flag-group.js

@@ -4,6 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
 import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
@@ -11,9 +13,6 @@ export const flagWidth = gridSize * 50;
 export const flagAnimationTime = 400;
 const flagBottom = gridSize * 6;
 const flagLeft = gridSize * 10;
-
-function noop() {}
-
 const defaultFlagGroupContext = {
   onDismissed: () => {},
   isDismissAllowed: false
@@ -24,38 +23,51 @@ export function useFlagGroup() {
 } // transition: none is set on first-of-type to prevent a bug in Firefox
 // that causes a broken transition
 
-const baseStyles = `
-  bottom: 0;
-  position: absolute;
-  width: ${flagWidth}px;
-  transition: transform ${flagAnimationTime}ms ease-in-out;
-
-  @media (max-width: 560px) {
-    width: 100vw;
-  }
-
-  &:first-of-type {
-    transition: none;
-    transform: translate(0,0);
+const baseStyles = css({
+  width: flagWidth,
+  position: 'absolute',
+  bottom: 0,
+  transition: `transform ${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(${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
 
-  &:nth-of-type(n + 2) {
-    animation-duration: 0ms;
-    transform: translateX(0) translateY(100%) translateY(${2 * gridSize}px);
+const dismissAllowedStyles = css({
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '&& + *': {
+    transform: `translate(0, 0)`,
+    transitionDuration: `${flagAnimationTime / 2}ms`
   }
-
-  /* Layer the 'primary' flag above the 'secondary' flag */
-  &:nth-of-type(1) {
-    z-index: 5;
-  }
-  &:nth-of-type(2) {
-    z-index: 4;
-  }
-
-  &:nth-of-type(n + 4) {
-    visibility: hidden;
+});
+const flagGroupContainerStyles = css({
+  position: 'fixed',
+  zIndex: layers.flag(),
+  bottom: flagBottom,
+  left: flagLeft,
+  '@media (max-width: 560px)': {
+    bottom: 0,
+    left: 0
   }
-`;
+});
 
 const FlagGroup = props => {
   const {
@@ -75,21 +87,12 @@ const FlagGroup = props => {
     return children && typeof children === 'object' ? Children.map(children, (flag, index) => {
       const isDismissAllowed = index === 0;
       return jsx(SlideIn, {
-        enterFrom: 'left',
-        fade: 'inout',
+        enterFrom: "left",
+        fade: "inout",
         duration: flagAnimationTime,
         animationTimingFunction: () => easeIn
       }, props => jsx("div", _extends({}, props, {
-        css: css`
-                    ${baseStyles}
-                    ${isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
-        // Exiting time should match the exiting time of motion so is halved
-        `
-                    && + * {
-                     transform: translate(0, 0);
-                     transition-duration: ${flagAnimationTime / 2}ms
-                   }` : ''}
-                  `
+        css: [baseStyles, isDismissAllowed && dismissAllowedStyles]
       }), jsx(FlagGroupContext.Provider, {
         value: // Only the first flag should be able to be dismissed.
         isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
@@ -101,28 +104,8 @@ const FlagGroup = props => {
     zIndex: layers.flag()
   }, jsx("div", {
     id: id,
-    css: css`
-          bottom: ${flagBottom}px;
-          left: ${flagLeft}px;
-          position: fixed;
-          z-index: ${layers.flag()};
-          @media (max-width: 560px) {
-            bottom: 0;
-            left: 0;
-          }
-        `
-  }, hasFlags ? jsx(LabelTag, {
-    css: css`
-              border: 0;
-              clip: rect(1px, 1px, 1px, 1px);
-              height: 1px;
-              overflow: hidden;
-              padding: 0;
-              position: absolute;
-              white-space: nowrap;
-              width: 1px;
-            `
-  }, label) : null, jsx(ExitingPersistence, {
+    css: flagGroupContainerStyles
+  }, hasFlags ? jsx(VisuallyHidden, null, jsx(LabelTag, null, label)) : null, jsx(ExitingPersistence, {
     appear: false
   }, renderChildren())));
 };

package/dist/es2019/flag.js

@@ -3,28 +3,41 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/core';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
-import GlobalTheme from '@atlaskit/theme/components';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
 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, getFlagFocusRingColor, getFlagTextColor } from './theme';
-import Expander from './expander';
+import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagTextColor, getFlagIconColor } from './theme';
 import Actions from './flag-actions';
 import { useFlagGroup } from './flag-group';
-
-function noop() {}
-
+import { Title, Description, Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.4.1"
+  packageVersion: "14.5.2"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;
 const headerHeight = gridSize * 4;
+const iconStyles = css({
+  display: 'flex',
+  height: headerHeight,
+  alignItems: 'center'
+});
+const flagHeaderStyles = css({
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: doubleGridSize,
+  borderRadius: borderRadius()
+});
+const flagContainerStyles = css({
+  width: '100%',
+  zIndex: layers.flag(),
+  borderRadius: borderRadius(),
+  transition: 'background-color 200ms'
+});
 
 const Flag = props => {
   const {
@@ -59,74 +72,14 @@ const Flag = props => {
     ...analyticsAttributes
   });
   const isBold = appearance !== DEFAULT_APPEARANCE;
-  const renderToggleOrDismissButton = useCallback(({
-    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;
+  const toggleExpand = useCallback(() => {
+    setIsExpanded(previous => !previous);
+  }, []);
+  const buttonActionCallback = useCallback(() => {
+    if (isDismissAllowed) {
+      onDismissedAnalytics(id);
     }
-
-    let ButtonIcon = CrossIcon;
-    let buttonLabel = 'Dismiss';
-
-    let buttonAction = () => {
-      if (isDismissAllowed) {
-        onDismissedAnalytics(id);
-      }
-    };
-
-    let size = 'small';
-    let buttonTestId = testId && `${testId}-dismiss`;
-    let a11yProps = {};
-
-    if (isBold) {
-      ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
-      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
-
-      buttonAction = () => setIsExpanded(!isExpanded);
-
-      size = 'large';
-      buttonTestId = testId && `${testId}-toggle`;
-      a11yProps = {
-        'aria-expanded': isExpanded
-      };
-    }
-
-    return jsx("button", _extends({
-      css: css`
-            appearance: none;
-            background: none;
-            border: none;
-            border-radius: ${borderRadius()}px;
-            color: ${getFlagTextColor(appearance, mode)};
-            cursor: pointer;
-            flex: 0 0 auto;
-            line-height: 1;
-            margin-left: ${gridSize}px;
-            padding: 0;
-            white-space: nowrap;
-            &:focus {
-              outline: none;
-              box-shadow: 0 0 0 2px ${getFlagFocusRingColor(appearance, mode)};
-            }
-          `,
-      onClick: buttonAction,
-      "data-testid": buttonTestId,
-      type: "button"
-    }, a11yProps), jsx(ButtonIcon, {
-      label: buttonLabel,
-      size: size
-    }));
-  }, [actions.length, appearance, description, id, isBold, isDismissAllowed, isExpanded, onDismissedAnalytics, testId]);
+  }, [onDismissedAnalytics, id, isDismissAllowed]);
   useEffect(() => {
     // If buttons are removed as a prop, update isExpanded to be false
     if (isBold && isExpanded && !description && !actions.length) {
@@ -151,95 +104,57 @@ const Flag = props => {
     onMouseOut,
     onBlur: onBlurAnalytics
   };
-  const OptionalDismissButton = renderToggleOrDismissButton;
-  let boxShadow = `0 20px 32px -8px ${flagShadowColor}`;
+  let boxShadow = `var(--ds-shadow-overlay, ${`0 20px 32px -8px ${flagShadowColor}`})`;
 
   if (!isBold) {
-    boxShadow = `0 0 1px ${flagBorderColor}, ${boxShadow}`;
+    boxShadow = `var(--ds-shadow-overlay, ${`0 0 1px ${flagBorderColor}, ${boxShadow}`})`;
   }
 
-  return jsx(GlobalTheme.Consumer, null, tokens => {
-    const mode = tokens.mode;
-    const textColour = getFlagTextColor(appearance, mode);
-    return jsx("div", _extends({
-      css: css`
-              background-color: ${getFlagBackgroundColor(appearance, mode)};
-              border-radius: ${borderRadius()}px;
-              box-shadow: ${boxShadow};
-              color: ${textColour};
-              transition: background-color 200ms;
-              width: 100%;
-              z-index: ${layers.flag()};
-            `,
-      role: "alert",
-      "data-testid": testId
-    }, autoDismissProps), jsx("div", {
-      css: css`
-                width: 100%;
-                padding: ${doubleGridSize}px;
-                box-sizing: border-box;
-                border-radius: ${borderRadius()}px;
-
-                &:focus-visible {
-                  outline: none;
-                  box-shadow: 0 0 0 2px
-                    ${getFlagFocusRingColor(appearance, mode)};
-                }
-
-                @supports not selector(*:focus-visible) {
-                  &:focus {
-                    outline: none;
-                    box-shadow: 0 0 0 2px
-                      ${getFlagFocusRingColor(appearance, mode)};
-                  }
-                }
-
-                @media screen and (forced-colors: active),
-                  screen and (-ms-high-contrast: active) {
-                  &:focus-visible {
-                    outline: 1px solid;
-                  }
-                }
-              ` // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      tabIndex: 0
-    }, jsx("div", {
-      css: css`
-                  display: flex;
-                  align-items: center;
-                  height: ${headerHeight}px;
-                `
-    }, icon, jsx("span", {
-      css: css`
-                    color: ${textColour};
-                    font-weight: 600;
-                    flex: 1;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    padding: 0 0 0 ${doubleGridSize}px;
-                  `
-    }, title), jsx(OptionalDismissButton, {
-      mode: mode
-    })), jsx(Expander, {
-      isExpanded: !isBold || isExpanded,
-      testId: testId
-    }, description && jsx("div", {
-      css: css`
-                      color: ${textColour};
-                      word-wrap: break-word;
-                      overflow: auto;
-                      max-height: 100px; /* height is defined as 5 lines maximum by design */
-                    `,
-      "data-testid": testId && `${testId}-description`
-    }, description), jsx(Actions, {
-      actions: actions,
-      appearance: appearance,
-      linkComponent: linkComponent,
-      testId: testId,
-      mode: mode
-    }))));
-  });
+  const {
+    mode
+  } = useGlobalTheme();
+  const textColor = getFlagTextColor(appearance, mode);
+  const iconColor = getFlagIconColor(appearance, mode);
+  const isDismissable = isBold || isDismissAllowed;
+  return jsx("div", _extends({
+    style: {
+      color: textColor,
+      backgroundColor: getFlagBackgroundColor(appearance, mode),
+      boxShadow
+    },
+    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
+  }, jsx("div", {
+    style: {
+      color: iconColor
+    },
+    css: iconStyles
+  }, icon, jsx(Title, {
+    color: textColor
+  }, title), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
+    testId: testId,
+    appearance: appearance,
+    isBold: isBold,
+    isExpanded: isExpanded,
+    onClick: isBold ? toggleExpand : buttonActionCallback
+  }) : null), jsx(Expander, {
+    isExpanded: !isBold || isExpanded,
+    testId: testId
+  }, description && jsx(Description, {
+    testId: testId && `${testId}-description`,
+    color: textColor
+  }, description), jsx(Actions, {
+    actions: actions,
+    appearance: appearance,
+    linkComponent: linkComponent,
+    testId: testId,
+    mode: mode
+  })))));
 };
 
 export default Flag;

package/dist/es2019/internal/description.js

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+const descriptionStyles = css({
+  /* height is defined as 5 lines maximum by design */
+  maxHeight: 100,
+  overflow: 'auto',
+  wordWrap: 'break-word'
+});
+
+const Description = ({
+  color,
+  testId,
+  children
+}) => jsx("div", {
+  style: {
+    color
+  },
+  css: descriptionStyles,
+  "data-testid": testId
+}, children);
+
+export default Description;

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

@@ -0,0 +1,63 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx, css } from '@emotion/core';
+import FocusRing from '@atlaskit/focus-ring';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/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';
+const gridSize = getGridSize();
+const borderRadius = getBorderRadius();
+const dismissButtonStyles = css({
+  marginLeft: gridSize,
+  padding: 0,
+  flex: '0 0 auto',
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  borderRadius,
+  cursor: 'pointer',
+  lineHeight: '1',
+  whiteSpace: 'nowrap'
+});
+
+const DismissButton = ({
+  appearance,
+  onClick,
+  isBold,
+  isExpanded,
+  testId
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  let ButtonIcon = CrossIcon;
+  let buttonLabel = 'Dismiss';
+  let size = 'small';
+  let buttonTestId = testId && `${testId}-dismiss`;
+
+  if (isBold) {
+    ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+    buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+    size = 'large';
+    buttonTestId = testId && `${testId}-toggle`;
+  }
+
+  return jsx(FocusRing, null, jsx("button", {
+    style: {
+      color: getFlagTextColor(appearance, mode)
+    },
+    css: dismissButtonStyles,
+    onClick: onClick,
+    "data-testid": buttonTestId,
+    type: "button",
+    "aria-expanded": isBold ? isExpanded : undefined
+  }, jsx(ButtonIcon, {
+    label: buttonLabel,
+    size: size
+  })));
+};
+
+export default /*#__PURE__*/memo(DismissButton);

package/dist/es2019/{expander.js → internal/expander.js}

@@ -3,6 +3,19 @@ import { css, jsx } from '@emotion/core';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { gridSize } from '@atlaskit/theme/constants';
 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,
@@ -14,16 +27,7 @@ const Expander = ({
   // the the reveal because we don't know the height of the content.
   return jsx("div", {
     "aria-hidden": !isExpanded,
-    css: css`
-        max-height: ${isExpanded ? 150 : 0}px;
-        transition: max-height 0.3s;
-        display: flex;
-        flex: 1 1 100%;
-        flex-direction: column;
-        justify-content: center;
-        min-width: 0;
-        padding: 0 0 0 ${paddingLeft}px;
-      `,
+    css: [expanderStyles, isExpanded && expandedStyles],
     "data-testid": testId && `${testId}-expander`
   }, jsx(ExitingPersistence, {
     appear: true

package/dist/es2019/internal/index.js

@@ -0,0 +1,4 @@
+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/internal/title.js

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+const titleStyles = css({
+  padding: `0 0 0 16px`,
+  flex: 1,
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+const Title = ({
+  color,
+  children
+}) => jsx("span", {
+  style: {
+    color
+  },
+  css: titleStyles
+}, children);
+
+export default Title;