Breadcrumbs are a navigation system used to show a user's location in a site or app.
yarn add @atlaskit/breadcrumbs#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
b50c5d5d65ae2 -
Bump to the latest version of @compiled/react4660ec858a305 -
Update React from v16 to v1857f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps#164155
23fd5e6b970e0 -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
Please note, in order to use this version of @atlaskit/breadcrumbs, you will need to ensure that
your bundler is configured to handle .css imports correctly. Most bundlers come with built-in
support for .css imports, so you may not need to do anything. If you are using a different
bundler, please refer to the documentation for that bundler to understand how to handle .css
imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
9c03322cef3d5 -
Improve typing and make spread props explicit in internal components.#145675
9b27f479611e2 -
Remove isNavigation prop. Breadcrumbs is intended to be used as a navigation component, and so
should always render as a <nav>.
Migration:
href:// Incorrect
<Breadcrumbs isNavigation={false}>
<BreadcrumbItem href="/page"></BreadcrumbItem>
</Breadcrumbs>
Remove the isNavigation prop:
// Correct
<Breadcrumbs>
<BreadcrumbItem href="/page"></BreadcrumbItem>
</Breadcrumbs>
This is semantically correct, and will help you avoid accessibility violations.
href:// Incorrect
<Breadcrumbs isNavigation={false}>
<BreadcrumbItem></BreadcrumbItem>
</Breadcrumbs>
Use @atlaskit/primitives Inline instead:
// Correct
<Inline separator="/">
<BreadcrumbItem></BreadcrumbItem>
</Inline>
#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.
8b8090800a35d -
Bump peer dependency for react-dom to include version 17 and 18.3ce915501ea5c -
Remove remnants of extract-react-types from tsconfig file.f5d70d96f5f53 -
Internal update to typography styles, no visual changes.f2f51e7a24d00 -
Internal change only. Remove references to deprecated @atlaskit/theme constants and replace with
hard-coded values.223959ef57c80 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.c99607483b8d -
Adds the aria-current attribute to the BreadcrumbsItem to define state of the current page.1cdec73eb809 -
Internal change to use font tokens. There is no visual change.5cf29a7b6787 -
Fixed an issue where breadcrumbs could infinitely resize and render if its text approached the
truncationWidth. Improved the logic for how truncation occurs to better take into account icons.
Improved the logic for when tooltips are displayed to be more accurate.35fdd0f6b801 - Fixes
an issue where style="--max-width: undefinedpx;" is applied to breadcrumb items when a value for
truncationWidth is missing.909e4a30fe7 - Removed
all remaining legacy theming logic from the Blanket, Breadcrumbs and Checkbox components.a41955df26f - use
array from instead of spread operator to fix ts error4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.774ed69ecef - Internal
changes to use space tokens for spacing values. There is no visual change.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bump80c5ca2be68 - [ux]
Added a feature flag which controls whether Tooltip is lazy loaded with react-loosely-lazy or not.
After the flag is cleaned up, react-loosely-lazy will be removed from the component.239f09ffdbf - Adds
isNavigation prop.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.b0f6dd0bc35 - Updated
to use typography tokens. There is no expected behaviour or visual change.cb8f8e76d25 - Update
types for react-select and @atlaskit/select upgrade Update commerce-ui entrypoints that caused a
pipeline issue.bc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.29dc4886507 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behaviour change.c963742d9cd - Added a
prop to allow a function to be called when a breadcrumb item tooltip is shownfa68e406db6 - Internal
styling has been refactored in preparation for @compiled/react19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes#17576
040a261b2d1 -
Note: It is a re-release of the wrongly patched version 11.4.1 that should have been a
minor release.
[ux] Bug fix; removed the dangling space that trails the final breadcrumbItem. Introduced in v11 there was additional space where the final '/' would be, now it ends directly after the final item again.
WRONG RELEASE TYPE - DON'T USE
ff925e68253 - [ux] Bug
fix; removed the dangling space that trails the final breadcrumbItem. Introduced in v11 there was
additional space where the final '/' would be, now it ends directly after the final item again.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.b60d5bd1e00 - [ux]
Implemented focusing of the first revealed breadcrumbs item after expansion.c37fc2898ff - [ux]
Colors now sourced from tokens.0d0ecc6e790 - Corrects
eslint supressions.9a84a3ceb82 - Internal
code changes.d797e84b724 -
SPFE-561: Update the react-loosely-lazy dependency. The previous version was using a broken ESM
build.cecc3efb15d - Added
the design-system tech stacks to the package.json and fixed linting errors, also disabled some
linting rules to prevent breaking changes139a522574f - Change
selector for checking if breadcrumbs where clicked with click-area-helper5e221ab3244 - Added
the design-system tech stacks to the package.json910c5ba2052 -
Breadcrumbs component now correctly forwards ref.b5bbdf4acb3 - [ux]
Added an 'ellipsisLabel' prop to the Breadcrumbs component. This text is passed to the aria-label
attribute on the ellipsis button (conditionally rendered when there are many items).81020d0b345 - [ux]
Wrapped breadcrumbs into nav tag; added label props that is used as aria-label of nav wrapper.b7c722cb270 - The
react-loosely-lazy dependency has been upgraded to v0.4.4.79c23df6340 - Use
injected package name and version for analytics instead of version.json.a0c2212596a - Adds a
build time flag that lets consumers drop tooltips from their SSR bundles#7762
3f80f8a2e4b - In this
version we made breadcrumbs dramatically faster, lighter and easier to use 🤩
Migrating from BreadcrumbsStateless
When needing to control breadcrumbs you can 1:1 replace the component with the default export from breadcrumbs.
-import { BreadcrumbsStateless } from '@atlaskit/breadcrumbs';
+import Breadcrumbs from '@atlaskit/breadcrumbs';
-<BreadcrumbsStateless isExpanded />
+<Breadcrumbs isExpanded />
When isExpanded is provided, the component will act controlled, otherwise uncontrolled.
Upgrading with the codemod
There exists a codemod to help you upgrade. Make sure to be on the latest version of breadcrumbs before running.
yarn upgrade @atlaskit/breadcrumbs@latest
Then you can use our cli tool to run the codemod:
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
And then follow the prompts to select the breadcrumbs codemod.
4f9e6e2db5 - These
packages now have defined entry points -- this means that you cannot access internal files in the
packages that are not meant to be public. Sub-components in these packages have been explicitly
defined, aiding tree-shaking and reducing bundle size.#6930
4f2b2b5750 - Internal
change from class to function components
usePlatformLeafEventHandler to replace HOCs from analytics-next25e8b332bf - replaced
styled-components to emotion
30360b3d28 - Internal
change from class to function components
9a403ed9b2 - Fix slash
color and font color in dark mode for breadcrumbs5f58283e1f - 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.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working#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.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.87f4720f27 - 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/3953454a9514fcf - Build and
supporting files will no longer be published to npm[patch]71c1de8ee1:
Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies f6667f2909:
Updated dependencies 57c0487a02:
Updated dependencies 6efb12e06d:
Updated dependencies fd41d77c29:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]30acc30979:
@atlaskit/select has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[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
[minor]2bbf7bc470:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[minor]c6efb2f5b6:
Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[major]52b15f57d3:
[major]7c17b35107:
[patch]98e11001ff:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[patch]c87112f:
itemsBeforeCollapse and itemsAfterCollapse. With these, you can
control how many items are displayed before and after the ellipsis in breadcrumbs' collapsed
state. The default for both of these is one, meaning that the base behaviour is unchanged.
58bd739refactored breadcrumbs to use styled-components (c5c31b6)
breaking; Now exports default (Breadcrumbs), BreadcrumbsStateless and BreadcrumbsItem, rather than default, AkBreadcrumbs and AkBreadcrumbsItem
ISSUES CLOSED: AK-2161, AK-2425