A horizontal navigation component for Atlassian products.
yarn add @atlaskit/atlassian-navigation#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
4660ec858a305 -
Update React from v16 to v18624d374b427b7 -
Cleans up and updates dependencies. Removes unused internal exports and deletes unused files.863b3f6a0adba - -
Remove Appearance from app switcher prop
910a3ef2381d3 -
Add isSSRPlaceholderEnabled prop for side and top nav v3883a3a2291949 -
Make spread props explicit and clean up ESLint disables within components.5c96046203b6f -
Tag top and side navigation components for SSR placeholder replacement2dd22b00bedaa -
Add props for handling server rendered components and data-vc57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps93794f3c42f1e -
Add explicit support for aria-label to ProductHome. This already worked due to spread props,
but is now typed and explicitly applied.6ed7ccbb0bf44 -
Remove experiment behind platform.design-system-team.navigation-v2-no-jank_5yhbd feature flag,
keeping the old behaviour in place.5d414827c3394 -
Removes usages of deprecated CustomThemeButton in favor of the new Button9502975197692 -
[ux] Providing Nav4 skeleton components for SSR#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
0704ecd9a56c0 -
Add exports for skeleton props. Removes extract react types remnants from documentation.b18e778d0c7f4 -
Accessibility changes: improving skeleton semantics for better readability for screen readers.821abfcb39199 -
Strip empty style properties to reduce SSR hydration warnings20c2d58f6f8a9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.01525ae5b7206 -
Remove iconGradientStart and iconGradientStop from ProductHomeCSS options in navigation themes5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496a2541fb3baec -
[ux] This release tests some default colour changes for ProductHome icons behind a feature flag.
If successful, these changes will be enabled in a future release.4c87d9b4f0c2 -
The internal composition of this component has changed. There is no expected change in behavior.6b1707c169e0 -
The internal composition of this component has changed. There is no expected change in behaviour.427c2dd9e0d6 -
[ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast8d01fc556d89 -
Add prop shouldRenderToParent to PrimaryItemsContainer and PrimaryItemsContainerV2. It makes
the content visible in nested menu.8e66f751df96 -
Use feature flag to roll out border width update from 2px to 1pxd18ec4d7ce20 -
[ux] Tidy up of the platform.design-system-team.icon-button-spacing-fix_o1zc5 Platform Feature
Flag which applies a small adjustment to icon spacing for buttons using iconBefore and
iconAfter props. Small visual adjustment is to be expected — keep this in mind when reviewing
any VR tests breaking. The spacing around the icons will be reduced.d36b4575ba4b -
Accessibility changes: improving semantics for better readability for screen readers.c8b7446ec45b -
[ux] Removes opacity from dropdown chevrons to support better color contrastea972e5bd62f -
Removing PrimarySplitButton which relies on (about to be removed) UNSAFE exports from
@atlaskit/button. See LDR https://hello.atlassian.net/l/cp/xNFyPqkmabe039bab59 -
Including missing dropdown-menu dev dependency and introduce PrimarySplitButton (unsafe)d84be9a0f39 - [ux] We
are testing icon button intenal spacing fix. We had to make related changes in dropdown menu
button behind a fetaure flag. There is no visual difference but external changes instead. If the
spacing fix is successful it will be available in a later release.f2eb005a30d - [ux]
Bottom border is now displayed when color tokens are not present, with a fallback color of N30
being used. The shadow styles that were previously visible when tokens were not present have been
removed.6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.11114bf2063 - [ux]
Introduce new border of search input with 1px border and 2px on selected under feature flagaa737a93ee3 - Bug fix
for primary items container behind the "platform.design-system-team.navigation-v2-no-jank_5yhbd"
feature flag.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.37131e3a8ea - Uses the
Alpha release of our responsive media helpers via either the public media export or the internal
UNSAFE_media export.967dd926bfc - Updates
all navigation components to use border/shape tokens. This is a no-op as these tokens are not
enabled in product.fe65eb90595 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.9eec8b31eaf - [ux]
Change reverts a previous change to the focus border highlight color on focus for quick search in
confluencee7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.e40a555bd64 - [ux]
Adds a platform-feature-flagged update to the way the top nav renders primary nav items, moving it
from unperformant JS-based calculations to a responsive CSS solution. PFF:
"platform.design-system-team.navigation-v2-no-jank_5yhbd"56507598609 - Skip
minor dependency bumpf7f852b0a4f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.e3fa4437cf5 - [ux]
Updates focus appearance of components using buttons and custom buttons. These states now use an
offset outline which is consistent with other applications of focus in Atlassian components.718d5ad3044 - Updates
to support the new @atlaskit/tokens theming API.cdc1dd169be - [ux]
When updating tokens for Search component of atlassian-navigation package we found that some
styles don't apply. This is due to the fact that some dynamic styles for hover and focus
states used to be passed via style attribute. style attribute doesn't allow usage of
pseudo-classes hens styles were never applied. We fixed this and made tokens follow the spec.
However, to prevent consumer's VR tests from breaking we decided to fallback on default styles so
the UI on legacy theming unchanged.27fc68c8e36 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.fc570a62923 - [ux]
Fixed a regression which could prevent items from collapsing.eb77cae1ea4 - [ux]
Selected buttons that have menus in the atlassian-navigation component now show the correct
background color when "selected"95c1a5e91d1 - Internal
code change turning on new linting rules.deeaf03eb21 - Fix an
issue where ProductHome rendered incorrectly in Safari416570be6bf - Small
update to styles to account for change in @atlaskit/logo.5b7962fbceb - Fix
visual bug with selected state of navigation iconButtonsdd991482e67 - [ux]
Fixed a regression causing the logoMaxWidth prop to have no effect. VR tests may need
regenerating, but in most cases will not.81addc0c144 - [ux]
Pass boxShadow for the focus styling of search section in the theme generator.3622df604ee - Fixes
bug where navigation items cannot be added after intial render if the initial item array was empty5772d2d059c - update
root babel config to correctly compile atlassian switcherac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changes62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.faee2b4ee52 - Rewrite
dynamic styles to be static to aid compiled migration.c4e94b64308 - Added a
new href prop to the Create button which causes it to be rendered as a link. This is suitable for
when the Create action is handled as a full page rather than in a modal-dialog.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.9dd6250db15 - Updates
token value for selected button text. Button text should now be "blue" when selected#14810
47f58da5946 -
ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including
breaking API changes, types and tests in atlassian-frontend packages
What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs. Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated. How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
"react-intl": "^2.6.0",
"react-intl-next": "npm:react-intl@^5.18.1",
import { IntlProvider } from 'react-intl';
import { IntlProvider as IntlNextProvider } from 'react-intl-next';
return (
<IntlProvider
key={locale}
data-test-language={locale}
locale={locale}
defaultLocale={DEFAULT_LOCALE}
messages={messages}
>
<IntlNextProvider
key={locale}
data-test-language={locale}
locale={locale}
defaultLocale={DEFAULT_LOCALE}
messages={messages}
>
{children}
</IntlNextProvider>
</IntlProvider>
);
9d4ca6e23da - [ux] New
create-dropdown-menu package for Create dropdown button#15998
a2f953f3814 -
Previously the ensure-design-token-usage eslint rule contained all checks relating to token use.
This has now been split up into two separate rules:
ensure-design-token-usage now covers:
legacyElevation — warns about old usages of the elevation mixins or styles, which instead
should use the card or overlay tokens.hardCodedColor — warns about use of hard-coded colors such as color: colors.B100, which
instead should be wrapped in a token() call. This covers the majority of cases in existing
codebases when first adopting tokens.no-unsafe-design-token-usage (new) covers the remaining rules:
directTokenUsage — warns against using the CSS Custom Property name that is output in the
browser by the token() call. Eg. directly using var(--ds-accent-subtleBlue) is bad.staticToken — warns when tokens aren't used inline. Inlining the token usages helps with
static analysis, which unlocks future improvements. Eg. pulling the token out into a const like
css={ color: token(primaryButtonText) } is bad.invalidToken — warns when using a token that doesn't exist (not one that's been renamed, see
the next point).tokenRenamed — warns when using a token that's been renamed in a subsequent release.tokenFallbackEnforced — warns if a fallback for the token call is not provided. Eg. call with
the fallback like this token('color.background.disabled', N10) instead of
token('color.background.disabled').tokenFallbackRestricted — the opposite of tokenFallbackEnforced. Eg. do not pass in a
fallback like this token('color.background.disabled', N10) and instead only include the token
token('color.background.disabled').Upgrading — some instances of \\eslint-disable may need to be changed to the new rule. If you
have failing lint rules after only bumping this package then switch those ignores to use
no-unsafe-design-token-usage instead.
22fb31312eb - Fixes
unmounted component state update warnings for AtlassianNavigation
f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.
Updated dependencies
bb54a699e54 - [ux]
Fixes a bug where a previously removed gradient positioned ::after primary actions was still
rendered. Also fixes a bug where this gradient rendered incorrectly on Safari.#14777
c9986657899 -
Instrumented atlassian-navigation with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
f791fab1bfa - Added
missing components and onBlur props to the props type used by secondary actions. These were
already available but were not documented.4f9dd11a8eb - Fixes a
visual bug which made the logo appear twice under very rare circumstances1a68f990792 - ACT-2057
transition @atlaskit/atlassian-switcher-vanilla & @atlaskit/atlassian-switcher to private scopee1bac029e02 - [ux]
Added notification badge to the Help button956eeeed790 - [ux]
Styles for the product icon and logo have been slightly refactored.88a19402c24 - Updates
to internal tests.68c25f52345 - This
1.0.0 release denotes that the package API is now stable and is no longer in developer preview.
There are NO API CHANGES in this release.95771438ed - [ux]
PrimaryItems will now overflow/resize correctly when the initial load screen size is narrower than
the items it containscadfec2b52 - [ux]
Introduced a new prop value in search field so that user can control it from outside and can
change the value of search field.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.9798ad1405 - Remove
deep import paths of dependencies in TS declaration filesac92cbbca8 - Replaced
WidthDetector with WidthObserver. We are doing this change because WidthDetector was causing some
performance issue.9f54ca0cf1 - Adds
maxwidth of 260px to logo in @atlaskit/atlassian-navigation and adds new prop logoMaxWidth to make
maxWidth for logo user driven.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packages2ae915c912 - Fixed
incorrect create-button color issue when hex color shorthand notion is used87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/395342221a004ff - Fixed
skeleton button not showing correct border color when selected8783e413a8 - Export
IconButton and IconButtonProps from atlassian-navigation73f23c649d - Fixed
incorrect create-button color issue when hex color shorthand notion is used739dc7c15c - Introduces
shouldShowSearch prop on SkeletonNavigation to control search skeleton649f69b6d7 - Patch all
packages that are used by confluence that have a broken es2019 distccdbfccfae - FIX:
Double create buttons appear in all screens during lazy load[patch]37edda3e89:
[patch]42eb460a09:
Adds lightweight non-interactive skeleton buttons which can be used in SSR mode.
Updates isHighlighted styles to be according to the design spec
[minor]6e2dda87f4:
Breaking Change:
label proptext prop to placeholder for claritylabel propAccessibility Changes
search landmark, further described by a label prop on the text fieldnavigation landmark for use with screen readers; this landmark
is further described by the label prop to differentiate it from side-navigationheader component[patch]b80c88fd26:
Fixes test id not being passed down to icon button.- [patch]9ec1606d00:
Export the value HORIZONTAL_GLOBAL_NAV_HEIGHT- [patch]1b3069e06b:
Added aria-label to input field in Search component- Updated dependencies 1f9c4f974a:
Updated dependencies 0603860c07:
Updated dependencies 3b92b89113:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]602ad2855a:
Reduces the size of the icon in the create cta button.- [patch]5c6a0d9512:
Adds testId to all components, read the docs for more information.-
[patch]ca86945834:
Fixes overflow menu having an unstable component reference when nothing had changed.- Updated dependencies 4ed951b8d8:
Updated dependencies e0e91e02a6:
Updated dependencies c0102a3ea2:
[patch]6c8c859801:
openOverflowMenu and closeOverflowMenu to useOverflowStatus.[patch]c3ccbe7d7b:
Bump @atlaskit/popup to get closeManager fixes- Updated dependencies eb1ecc219a:
[minor]24edf508bf:
BREAKING CHANGE Removes _itemTheme from package. Replaces popup examples with
@atlaskit/menu.
[patch]5c105059ef:
Increase stability of "more" collapse/expand behaviour- Updated dependencies 28f8f0e089:
Updated dependencies 82747f2922:
Updated dependencies f534973bd4:
Updated dependencies 4a223473c5:
[patch]6c94b91976:
Fixes avatar skeleton size.- [patch]64aefb016d:
Fixes overflow menu popup placement.
[patch]65e4e8a5ec:
Removing left margin for ProductHome when there's no Switcher before it.
[minor]df31cc4fb4:
Changed the ProductHome theme to remove all the button styles. Instead us the PrimaryButton styles.
[patch]72ceb0c548:
Fixes Skeleton for atlassian navigation, which had broken earlier due to the ProductHome re-write
[patch]38a300c7e0:
Misc UI changes- Updated dependencies d0415ae306:
[patch]02d05ff668:
buttonTooltip and iconButtonTooltip to configure tooltip for create button.[patch]042a5d87ea:
Reduced unnecessary deps for navigation, and added temp _itemTheme export to style dropdown-menu items
[minor]355e7ca2ea:
Breaking changes from previous version:
Other visual changes:
[patch]5eb3d1fc75:
Removed spinner from the notifications package (handled by the iframe content instead)
[minor]48640192dc:
Adds support for white nav. Repositions how the components are displayed. Changes to the theming API to support white nav. Add support for showing site name
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]fda9024074:
Add a fully instrumented example of atlassian-navigation using @atlaskit/analytics-next
[patch]6a82fd06ab:
Render tooltip only when supplied, and fix button focus background color
[patch]f7eb0a4886:
Ensuring new horizontal nav allows for scrollbar width. Using 'vw' units prevents this.