A horizontal navigation component for Atlassian apps.
A horizontal navigation component for Atlassian products.
atlassian
yarn add @atlaskit/atlassian-navigationDetailed docs and example usage can be found here.
To add side navigation, use
@atlaskit/side-navigation To
control the layout of these navigation elements and add expand/collapse functionality to
side-navigation, use
@atlaskit/page-layout.
d14ea5f60b689 -
chore: migrate platform UI & component libraries icon imports from migration paths to corea60a82196851a -
Internal refactors to remove unused variables. No functional or public changes.f089cdf7f6a28 -
PrimaryButton now supports displaying a shortcut in the tooltip, through the new shortcut prop.
It is passed through to the Tooltip's shortcut prop.211a83504b30b -
[ux] GCKO-936 Add switcher support for same tab 1P links437668dfbdec9 -
Add explicit types to a number of DST components39e543109ec09 -
add type info to forwardRef components248faa32d4835 -
Internal changes to how borders are applied.f0662cd7a143e -
Internal changes to how borders are applied.74c2f420ee49b -
Internal changes to how border radius is applied.23bcc5bbc9cee -
Internal changes to how border radius is applied.3b5b4a919aaaf -
Internal changes to how border radius is applied.2af42ad93c3e0 -
Internal changes to use tokens for border radius.0c3ef91864885 -
Fixes a bug where when no custom theming preferences are set, iconColor and textColor still
had colors set, overriding default logo colors and causing bugs with some logos. This change was
previously tested behind a feature flag.8cd7b52d423d1 -
Internal changes resulting from update to @atlaskit/navigation-system58822a702f803 -
[ux] Updated Atlassian navigation buttons to use subtle background states that match the default
background token. Hovered state now uses color.background.neutral.subtle.hovered instead of
color.background.neutral.hovered. Pressed state now uses
color.background.neutral.subtle.pressed instead of color.background.neutral.pressed.ee906c44a058e -
Internal refactors to accommodate for platform package rename.cb9fe0058ed87 -
Updates package.json direct dependencies to align with actual usage.a149a0b1559ec -
We are testing the migration to the ADS Link component behind a feature flag. If this fix is
successful it will be available in a later release.f9ab0e846ae21 -
Updated to support size prop for new icons from @atlaskit/icon.6fdb42d9282af -
Refreshed "issue" terminology.d6934885b334e -
Fixed some new icons that were enabled with the incorrect feature flag.379be130e4891 -
Fixes bug with internal feature flagging logic2b4555de9adf4 -
Minor type adjustment to support different logo types73f69318be2bc -
Added isScreenReaderAnnouncementDisabled for iconButton tooltip to avoid duplicate announcements.#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 prop910a3ef2381d3 -
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.a1e80ec0a5e4a -
Enable new icons behind a feature flag.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 Buttone1150e9523e1f -
Update AppSwitcher to support Nav49502975197692 -
[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.3as well as to have a consistent peer
dependency range forreactandreact-domfor/platform` packages.
f80ae8ed91fc9 -
Adding data-vc attributes for tracking TTVC (go/ttvc).d85d7e47179c1 -
change default aria-label on AppSwitcherIcon0704ecd9a56c0 -
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 themes26d9763b841d -
Fix broken colors for "more" button items.a21b8dc426e8 -
Add support for React 18 in non-strict mode.5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #73849606ba9f16130d -
Internal changes to typography, no visual change.a2541fb3baec -
[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.529d60f091ea -
Add aria label prop for Create button4c87d9b4f0c2 -
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.8d4e99057fe0 -
Upgrade Typescript from 4.9.5 to 5.4.2c0002528c07e -
Refactor border width style to make it work in SSR8ab7a816dca7 -
Revert input border change from the previous version427c2dd9e0d6 -
[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.395c74147990 -
Migrate packages to use declarative entry pointsd36b4575ba4b -
Accessibility changes: improving semantics for better readability for screen readers.f320c8ce5039 -
This package has been added to the Jira push model.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/xNFyPqkm73ad379b73c6 - [ux]
Add proper labels to icon buttons.abe039bab59 -
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 flag1ed303de3e8 - Updated
dependenciesaa737a93ee3 - Bug fix
for primary items container behind the "platform.design-system-team.navigation-v2-no-jank_5yhbd"
feature flag.3fadbb8bf73 - Internal
changes.9b8eb462cf4 - [ux]
update color.border.focused fallback to B200599bfe90ee3 - 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"9d00501a414 - Ensure
legacy types are published for TS 4.5-4.841fae2c6f68 - Upgrade
Typescript from 4.5.5 to 4.9.556507598609 - 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.8cc2f888c83 - Upgrade
Typescript from 4.3.5 to 4.5.5eb77cae1ea4 - [ux]
Selected buttons that have menus in the atlassian-navigation component now show the correct
background color when "selected"8d4228767b0 - Upgrade
Typescript from 4.2.4 to 4.3.5.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.d28c3b5078e - Updated
type documentation81addc0c144 - [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 emptycb2392f6d33 - Upgrade
to TypeScript 4.2.45772d2d059c - 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 selectedc55c736ecea - Patch
VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489#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.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 circumstances789bc630b95 - Moved
switcher test utils to private scope.1a68f990792 - 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 containsd3265f19be - Transpile
packages using babel rather than tsccadfec2b52 - [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 usedcc14956821 - Update all
the theme imports to a path thats tree shakable739dc7c15c - Introduces
shouldShowSearch prop on SkeletonNavigation to control search skeleton54d82b49f0 - Remove
unused dependencies649f69b6d7 - Patch all
packages that are used by confluence that have a broken es2019 dist32db77ba72 - Fix test
id to the correct naming conventionccdbfccfae - FIX:
Double create buttons appear in all screens during lazy load[patch]b788e3359a:
Pass additional hover CSS to search
[patch]4515d1bc47:
Fix text color for selected item in custom theme
[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:
[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:
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:
[patch]6c94b91976:
Fixes avatar skeleton size.- [patch]64aefb016d:
Fixes overflow menu popup placement.
[patch]666ecab6c9:
Improve styles for Atlassian Navigation when SSRd
[patch]9af7977678:
Fixing visual tweaks for top nav and menu spacing
[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
[minor]63b9f324df:
Change the way ProductHome is rendered
[patch]38a300c7e0:
Misc UI changes- Updated dependencies d0415ae306:
[patch]c86f02bcb3:
Added selected state to more menu
[patch]e419c3c01f:
Update color of skeleton in atlassian-navigation
[patch]1ef7f6bba9:
Fixed nav height
[patch]8e8366be2c:
Update IconButton types from string to React.ReactNode.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]fcfd4db9c0:
Fixing focus styles for IconButtons
[patch]fda9024074:
Add a fully instrumented example of atlassian-navigation using @atlaskit/analytics-next
[patch]c24724add6:
Update entry points and exports
[patch]6a82fd06ab:
Render tooltip only when supplied, and fix button focus background color
[patch]c810632671:
Update theme generation
[patch]f7eb0a4886:
Ensuring new horizontal nav allows for scrollbar width. Using 'vw' units prevents this.
[minor]c5939cb73d:
Integrate popup component
[patch]9a59c6e93b:
Fix badge and primary items container styles
[patch]197aa4ed2c:
Use context hooks in favour of emotion-theming
[minor]382273ee49:
Add more behaviour
[patch]13f8980fb2:
Use emotion object style
[minor]187b3147bd:
Add theming support
[patch]8e692b02f5:
Add AppNavigationSkeleton as a named export.
[patch]f0980913df:
Add missing dependencies to package.json