@atlaskit/help 6.0.8 → 7.1.0

package/dist/es2019/components/Article/HelpArticle/index.js

@@ -14,7 +14,7 @@ export const HelpArticle = ({
   isLoading
 }) => {
   const {
-    setArticleId,
+    openArticle,
     getCurrentArticleItemData
   } = useNavigationContext();
   const {
@@ -56,13 +56,11 @@ export const HelpArticle = ({
       onRelatedArticlesListItemClick(event, analyticsEvent, articleData);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-  }, [setArticleId, onRelatedArticlesListItemClick]);
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
+  }, [openArticle, onRelatedArticlesListItemClick]);
   const handleOnRelatedArticlesShowMoreClick = useCallback((event, analyticsEvent, isCollapsed) => {
     analyticsEvent.payload.attributes = {
       componentName: 'Article',

package/dist/es2019/components/Article/WhatsNewArticle/styled.js

@@ -2,9 +2,10 @@
 import styled from '@emotion/styled';
 import { fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewTypeTitle = styled.span`
   text-decoration: none;
-  color: ${colors.N300};
+  color: ${token('color.text.subtlest', colors.N300)};
   font-size: ${fontSize()}px;
   vertical-align: middle;
   padding-left: ${gridSize() / 2}px;
@@ -18,7 +19,7 @@ export const WhatsNewIconContainer = styled.div`
 `;
 export const WhatsNewTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSize()}px;
   font-weight: 600;
   white-space: normal;
@@ -28,7 +29,7 @@ export const WhatsNewTitleText = styled.span`
 `;
 export const WhatsNewRelatedLinksTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSizeSmall()}px;
   font-weight: 600;
   white-space: normal;

package/dist/es2019/components/Article/styled.js

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const ArticleContainer = styled.div`
   padding: ${gridSize() * 2}px ${gridSize() * 3}px;
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   left: 100%;
   flex: 1;
   flex-direction: column;

package/dist/es2019/components/ArticlesList/ArticlesList.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import AnimateHeight from 'react-animate-height';
 import ArticlesListItem from './ArticlesListItem';
 import { MIN_ITEMS_TO_DISPLAY, ANIMATE_HEIGHT_TRANSITION_DURATION_MS } from './constants';
@@ -14,7 +15,7 @@ const articlesList = ({
 }) => articles && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, articles.slice(0, minItemsToDisplay).map((article, i) => {
   return /*#__PURE__*/React.createElement(ArticlesListItem, {
     styles: {
-      border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+      border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
       padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
       marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
     },
@@ -35,7 +36,7 @@ const articlesList = ({
   height: numberOfArticlesToDisplay > minItemsToDisplay ? 'auto' : 0
 }, articles.slice(minItemsToDisplay, articles.length).map((article, i) => /*#__PURE__*/React.createElement(ArticlesListItem, {
   styles: {
-    border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+    border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
     padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
     marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
   },

package/dist/es2019/components/ArticlesList/ArticlesListItem/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 // import { messages } from '../../../messages';
@@ -55,8 +56,8 @@ export const ArticlesListItem = ({
   }, /*#__PURE__*/React.createElement(ArticlesListItemContainer, null, typeTitle && /*#__PURE__*/React.createElement(ArticlesListItemTypeTitle, null, formatMessage(typeTitle)), /*#__PURE__*/React.createElement(ArticlesListItemTitleText, null, title), href && /*#__PURE__*/React.createElement(ArticlesListItemLinkIcon, null, /*#__PURE__*/React.createElement(ShortcutIcon, {
     size: "small",
     label: "",
-    primaryColor: colors.N90,
-    secondaryColor: colors.N90
+    primaryColor: token('color.icon.subtle', colors.N90),
+    secondaryColor: token('color.icon.subtle', colors.N90)
   }))), /*#__PURE__*/React.createElement(ArticlesListItemDescription, null, description));
 };
 

package/dist/es2019/components/ArticlesList/ArticlesListItem/styled.js

@@ -2,6 +2,7 @@
 import styled from '@emotion/styled';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const ArticlesListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
@@ -9,21 +10,22 @@ export const ArticlesListItemWrapper = styled.a({
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
-  color: `${colors.N200}`,
+  color: `${token('color.text.subtlest', colors.N200)}`,
   borderRadius: `3px`,
+  backgroundColor: `${token('color.background.neutral.subtle', 'transparent')}`,
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: `none`,
     outline: `none`,
     outlineOffset: `none`
   },
   '&:focus': {
-    boxShadow: `${colors.B100} 0px 0px 0px 2px inset`
+    boxShadow: `${token('color.border.focused', colors.B100)} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${colors.N30}`
+    backgroundColor: `${token('color.background.neutral.subtle.hovered', colors.N30)}`
   },
   '&:active': {
-    backgroundColor: `${colors.B50}`
+    backgroundColor: `${token('color.background.neutral.subtle.pressed', colors.B50)}`
   }
 }, props => props.styles);
 export const ArticlesListItemContainer = styled.div`
@@ -34,7 +36,7 @@ export const ArticlesListItemTypeTitle = styled.div`
   font-weight: bold;
   font-size: 11px;
   line-height: ${gridSize() * 2}px;
-  color: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   padding-bottom: ${gridSize() / 2}px;
 `;
 export const ArticlesListItemLinkIcon = styled.div`
@@ -42,7 +44,7 @@ export const ArticlesListItemLinkIcon = styled.div`
 `;
 export const ArticlesListItemTitleText = styled.span`
   text-decoration: none;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   font-size: ${fontSize()}px;
   font-weight: 600;
   display: block;
@@ -54,6 +56,6 @@ export const ArticlesListItemTitleText = styled.span`
 export const ArticlesListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${colors.N400};
+  color: ${token('color.text.subtle', colors.N400)};
   margin: 0;
 `;

package/dist/es2019/components/HelpContentButton/styled.js

@@ -2,11 +2,12 @@
 import styled from 'styled-components';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const HelpContentButtonContainer = styled.a`
   display: block;
   cursor: pointer;
   width: calc(100% - ${gridSize() * 2}px);
-  color: ${colors.N600};
+  color: ${token('color.text.subtle', colors.N600)};
   padding: ${gridSize}px;
   border-radius: 3px;
 
@@ -17,19 +18,19 @@ export const HelpContentButtonContainer = styled.a`
     text-decoration: none;
     outline: none;
     outline-offset: none;
-    color: ${colors.N600};
+    color: ${token('color.text.subtle', colors.N600)};
   }
 
   &:focus {
-    box-shadow: ${colors.B100} 0 0 0 2px inset;
+    box-shadow: ${token('color.border.focused', colors.B100)} 0 0 0 2px inset;
   }
 
   &:hover {
-    background-color: ${colors.N30};
+    background-color: ${token('color.background.neutral.subtle.hovered', colors.N30)};
   }
 
   &:active {
-    background-color: ${colors.B50};
+    background-color: ${token('color.background.neutral.subtle.pressed', colors.B50)};
   }
 `;
 export const HelpContentButtonIcon = styled.div`

package/dist/es2019/components/RelatedArticles/styled.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import * as colors from '@atlaskit/theme/colors';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 
 const baseHeading = (size, lineHeight) => `
   font-size: ${size / fontSize()}em;
@@ -18,7 +19,7 @@ export const truncate = (width = '100%') => css`
 `;
 export const RelatedArticlesTitle = styled.div`
   ${baseHeading(16, 20)}
-  color: ${colors.heading};
+  color: ${token('color.text', colors.N800)};
   font-weight: 600;
   letter-spacing: -0.006em;
   padding: ${gridSize() * 2}px 0;

package/dist/es2019/components/Search/SearchResults/SearchExternalSite.js

@@ -6,6 +6,7 @@ import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { SearchResultSearchExternalSiteContainer } from './styled';
+import { token } from '@atlaskit/tokens';
 export const SearchExternalSite = ({
   searchExternalUrl,
   onSearchExternalUrlClick,
@@ -35,8 +36,8 @@ export const SearchExternalSite = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: colors.N90,
-      secondaryColor: colors.N90
+      primaryColor: token('color.icon.subtle', colors.N90),
+      secondaryColor: token('color.icon.subtle', colors.N90)
     }),
     spacing: "compact",
     href: searchExternalUrl,

package/dist/es2019/components/Search/SearchResults/SearchResultsEmpty.js

@@ -3,6 +3,7 @@ import { useAnalyticsEvents, AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import NotFoundImage from '../../../assets/NotFoundImage';
 import { messages } from '../../../messages';
@@ -36,8 +37,8 @@ export const SearchResultsEmpty = ({
     iconAfter: /*#__PURE__*/React.createElement(ShortcutIcon, {
       size: "small",
       label: "",
-      primaryColor: colors.N90,
-      secondaryColor: colors.N90
+      primaryColor: token('color.icon.subtle', colors.N90),
+      secondaryColor: token('color.icon.subtle', colors.N90)
     }),
     spacing: "compact",
     href: searchExternalUrl,

package/dist/es2019/components/Search/SearchResults/index.js

@@ -44,19 +44,16 @@ export const SearchResults = () => {
     onSearchExternalUrlClick
   } = useSearchContext();
   const {
-    setArticleId,
+    openArticle,
     view
   } = useNavigationContext();
   const handleOnSearchResultItemClick = useCallback((event, analyticsEvent, articleData) => {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.HELP_ARTICLE
-      });
-    }
-
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.HELP_ARTICLE
+    });
     onSearchResultItemClick(event, analyticsEvent, articleData);
-  }, [onSearchResultItemClick, setArticleId]);
+  }, [onSearchResultItemClick, openArticle]);
   return /*#__PURE__*/React.createElement(Transition, {
     in: view === VIEW.SEARCH && isSearchResultVisible,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS

package/dist/es2019/components/Search/SearchResults/styled.js

@@ -2,12 +2,13 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const SearchResultsContainer = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;
@@ -29,7 +30,7 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;
 export const SearchResultSearchExternalSiteContainer = styled.div`
@@ -37,6 +38,6 @@ export const SearchResultSearchExternalSiteContainer = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

package/dist/es2019/components/WhatsNew/WhatsNewButton/index.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import * as colors from '@atlaskit/theme/colors';
 import LightbulbIcon from '@atlaskit/icon/glyph/lightbulb';
+import { token } from '@atlaskit/tokens';
 import { injectIntl } from 'react-intl-next';
 import { name as packageName, version as packageVersion } from '../../../version.json';
 import { useWhatsNewArticleContext } from '../../contexts/whatsNewArticleContext';
@@ -25,20 +26,18 @@ export const WhatsNewButton = ({
     whatsNewGetNotificationProvider
   } = useWhatsNewArticleContext();
   const {
-    setArticleId
+    openArticle
   } = useNavigationContext();
   const handleOnButtonClick = useCallback((id, analytics, event) => {
     if (onWhatsNewButtonClick) {
       onWhatsNewButtonClick(event, analytics);
     }
 
-    if (setArticleId) {
-      setArticleId({
-        id: '',
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
-  }, [onWhatsNewButtonClick, setArticleId]);
+    openArticle({
+      id: '',
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
+  }, [onWhatsNewButtonClick, openArticle]);
   return /*#__PURE__*/React.createElement(HelpContentButton, {
     id: "whats-new",
     key: "whats-new",
@@ -49,7 +48,7 @@ export const WhatsNewButton = ({
       productName
     }) : formatMessage(messages.help_whats_new_button_label_without_product_name),
     icon: /*#__PURE__*/React.createElement(LightbulbIcon, {
-      primaryColor: colors.N600,
+      primaryColor: token('color.icon.subtle', colors.N600),
       size: "medium",
       label: ""
     })

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsEmpty/styled.js

@@ -2,6 +2,7 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewResultsEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -11,6 +12,6 @@ export const WhatsNewResultsEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsError/styled.js

@@ -2,6 +2,7 @@
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const SearchResultEmptyMessageImage = styled.div`
   padding: ${3 * gridSize()}px ${3 * gridSize()}px 0 ${3 * gridSize()}px;
   text-align: center;
@@ -11,6 +12,6 @@ export const SearchResultEmptyMessageText = styled.div`
   text-align: center;
 
   p {
-    color: ${colors.N200};
+    color: ${token('color.text.subtlest', colors.N200)};
   }
 `;

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultItem/styled.js

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewResultListItemWrapper = styled.a({
   position: `relative`,
   boxSizing: `border-box`,
@@ -10,7 +11,8 @@ export const WhatsNewResultListItemWrapper = styled.a({
   display: `block`,
   textDecoration: `none`,
   cursor: `pointer`,
-  color: `${colors.N200}`,
+  color: `${token('color.text.subtlest', colors.N200)}`,
+  backgroundColor: `${token('color.background.neutral.subtle', colors.N0)}`,
   borderRadius: `3px`,
   '&:hover, &:focus, &:visited, &:active': {
     textDecoration: `none`,
@@ -18,13 +20,13 @@ export const WhatsNewResultListItemWrapper = styled.a({
     outlineOffset: `none`
   },
   '&:focus': {
-    boxShadow: `${colors.B100} 0px 0px 0px 2px inset`
+    boxShadow: `${token('color.border.focused', colors.B100)} 0px 0px 0px 2px inset`
   },
   '&:hover': {
-    backgroundColor: `${colors.N30}`
+    backgroundColor: `${token('color.background.neutral.subtle.hovered', colors.N30)}`
   },
   '&:active': {
-    backgroundColor: `${colors.B50}`
+    backgroundColor: `${token('color.background.neutral.subtle.pressed', colors.B50)}`
   }
 }, props => props.styles);
 export const WhatsNewResultListItemTitleContainer = styled.div`
@@ -45,6 +47,6 @@ export const WhatsNewResultListItemTitleText = styled.span`
 export const WhatsNewResultListItemDescription = styled.p`
   display: block;
   line-height: ${gridSize() * 2.5}px;
-  color: ${colors.N800};
+  color: ${token('color.text', colors.N800)};
   margin: 0;
 `;

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/WhatsNewResultsList.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import toDate from 'date-fns/toDate';
 import isYesterday from 'date-fns/isYesterday';
 import isToday from 'date-fns/isToday';
@@ -40,7 +41,7 @@ const WhatsNewResultsList = ({
       key: key
     }, /*#__PURE__*/React.createElement(WhatsNewResultsListGroupTitle, null, whatsNewArticlesGroupedByDate[key].title), whatsNewArticlesGroupedByDate[key].items.map((whatsNewArticle, i) => /*#__PURE__*/React.createElement(WhatsNewResultItem, {
       styles: {
-        border: style === 'secondary' ? `2px solid ${colors.N30}` : 0,
+        border: style === 'secondary' ? `2px solid ${token('color.border', colors.N30)}` : 0,
         padding: style === 'secondary' ? `${gridSize()}px ${gridSize() * 2}px` : `${gridSize()}px`,
         marginBottom: style === 'secondary' ? `${gridSize() * 1.5}px` : 0
       },

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/index.js

@@ -29,7 +29,7 @@ const WhatsNewResultsList = ({
   onShowMoreButtonClick
 }) => {
   const {
-    setArticleId
+    openArticle
   } = useNavigationContext();
 
   const handleShowMoreButtonClick = (event, analyticsEvent) => {
@@ -39,17 +39,15 @@ const WhatsNewResultsList = ({
   };
 
   const handleOnWhatsNewResultItemClick = useCallback((event, analyticsEvent, articleData) => {
-    if (setArticleId) {
-      setArticleId({
-        id: articleData.id,
-        type: ARTICLE_TYPE.WHATS_NEW
-      });
-    }
+    openArticle({
+      id: articleData.id,
+      type: ARTICLE_TYPE.WHATS_NEW
+    });
 
     if (onWhatsNewResultItemClick) {
       onWhatsNewResultItemClick(event, analyticsEvent, articleData);
     }
-  }, [onWhatsNewResultItemClick, setArticleId]);
+  }, [onWhatsNewResultItemClick, openArticle]);
   return whatsNewArticles && whatsNewArticles.length > 0 ? /*#__PURE__*/React.createElement(WhatsNewResultsListContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: {
       [itemThemeNamespace]: ITEM_THEME

package/dist/es2019/components/WhatsNew/WhatsNewResults/WhatsNewResultsList/styled.js

@@ -2,6 +2,7 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import * as colors from '@atlaskit/theme/colors';
 export const truncate = (width = '100%') => css`
   overflow-x: hidden;
@@ -16,7 +17,7 @@ export const WhatsNewResultsListGroupWrapper = styled.div`
   padding: ${gridSize()}px 0 ${gridSize()}px 0;
 `;
 export const WhatsNewResultsListGroupTitle = styled.div`
-  color: ${colors.N200};
+  color: ${token('color.text.subtlest', colors.N200)};
   font-size: ${fontSizeSmall()}px;
   font-weight: bold;
   padding: 0 ${gridSize()}px ${gridSize()}px ${gridSize()}px;

package/dist/es2019/components/WhatsNew/WhatsNewResults/index.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { Transition } from 'react-transition-group';
+import isEqual from 'lodash/isEqual';
 import Select from '@atlaskit/select';
 import { injectIntl } from 'react-intl-next';
 import { VIEW } from '../../constants';
@@ -51,11 +52,17 @@ export const WhatsNewResults = ({
     searchWhatsNewArticlesState,
     onWhatsNewResultItemClick
   } = useWhatsNewArticleContext();
+  const containerRef = useRef(null);
+  const containerScrollPosition = useRef(0);
   const SELECT_DEFAULT_VALUE = {
     value: '',
     label: formatMessage(messages.help_whats_new_filter_select_option_all)
   };
-  const [selectedOption, setSelectedOption] = useState(SELECT_DEFAULT_VALUE);
+  const SELECT_EMPTY_VALUE = {
+    value: undefined,
+    label: ''
+  };
+  const [selectedOption, setSelectedOption] = useState(SELECT_EMPTY_VALUE);
   const handleOnShowMoreButtonClick = useCallback(() => {
     if (searchWhatsNewArticlesResult && onSearchWhatsNewArticles) {
       const {
@@ -70,8 +77,25 @@ export const WhatsNewResults = ({
   }, [onSearchWhatsNewArticles, searchWhatsNewArticlesResult, selectedOption]);
 
   const handleOnEnter = () => {
-    setSelectedOption(SELECT_DEFAULT_VALUE);
-    onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    setTimeout(() => {
+      if (containerRef.current) {
+        containerRef.current.scrollTop = containerScrollPosition.current;
+      }
+    }, 0);
+
+    if (isEqual(selectedOption, SELECT_EMPTY_VALUE)) {
+      setSelectedOption(SELECT_DEFAULT_VALUE);
+      onSearchWhatsNewArticles && onSearchWhatsNewArticles();
+    }
+  };
+
+  const handleOnExit = () => {
+    if (helpContextView === VIEW.DEFAULT_CONTENT) {
+      setSelectedOption(SELECT_EMPTY_VALUE);
+      containerScrollPosition.current = 0;
+    } else {
+      containerScrollPosition.current = containerRef.current ? containerRef.current.scrollTop : 0;
+    }
   };
 
   const handleOnClearFilter = () => {
@@ -87,8 +111,10 @@ export const WhatsNewResults = ({
   return /*#__PURE__*/React.createElement(Transition, {
     in: helpContextView === VIEW.WHATS_NEW,
     timeout: FADEIN_OVERLAY_TRANSITION_DURATION_MS,
-    onEnter: handleOnEnter
+    onEnter: handleOnEnter,
+    onExit: handleOnExit
   }, state => /*#__PURE__*/React.createElement(WhatsNewResultsContainer, {
+    ref: containerRef,
     style: { ...defaultStyle,
       ...transitionStyles[state]
     }

package/dist/es2019/components/WhatsNew/WhatsNewResults/styled.js

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import styled from '@emotion/styled';
 import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const WhatsNewResultsContainer = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
-  background-color: #ffffff;
+  background-color: ${token('elevation.surface', '#FFFFFF')};
   flex: 1;
   flex-direction: column;
   box-sizing: border-box;