A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.
yarn add @atlaskit/page-header#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 v1884c480f78de1e -
Remove unncessary styling code that breaks in Parcel CSS transformation.e9a8deefa644a -
Updated types for PageHeader9b8b32b12ca1e -
Added optional test id to page header#173248
1e25b83888a4a -
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/page-header, 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.
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsedb1983fa6cf7 -
Fix bug which caused a scrollbar to show up in FireFox on PageHeader.title when
truncateTitle={true}.778c15c1d279a -
[ux] Removed feature flag
platform.design-system-team.page-header-tokenised-typography-styles_lj1ix. Title line height
visually changes as part of the internal typography changes.300b0a472d9ce -
Removes deprecated usage of ak/theme mixin functions and replaces them with their direct outputs#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.a8bd419fd70b9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.9aeb04ba9d17 -
[ux] We are testing a visual change behind a feature flag. The line height of the title changes.
If this change is successful it will be available in a later release.2f37600156ae -
The internal composition of a component in this package has changed. There is no expected change
in behaviour.e7ea6832ad2 - 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.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.56507598609 - Skip
minor dependency bumpf8a61ff6218 - Enrol
@atlaskit/page-header on push model consumption in Jira261420360ec - Upgrades
component types to support React 18.74c1b81a476 - Replaces
use of gridSize with space tokens. There is no expected visual change.9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.ae50e8dea70 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.b3893a2357b - Fixes a
styling issue that arose in v10.2.0 relating to the lineHeight of the page header's title.6b76b1ceab3 - This
change removes the dependency styled components. It has been refactored to use @emotion/core
instead. Some examples have also been updated. There should be no UI or UX change.cd34d8ca8ea - Internal
wiring up to the tokens techstack, no code changes.169a082e5b4 - Added id
prop to the PageHeader component. Now header text can be used as label of other component via
aria-labelledby attribute44e6c77d533 - Renames
exports in page header examples to be more descriptive. For example, Example is renamed to
PageHeaderDefaultExample.ac373538cdd - Page
header migrated from atlaskit to atlassian.design. Documentation and examples added along with
updated snapshot test.8450e34990c - [ux]
Conditionally render ActionsWrapper for PageHeader's actions when provided.79c23df6340 - Use
injected package name and version for analytics instead of version.json.be0acecf54 - [ux]
page-header is a non interactive element and it was getting focus ring while clicking on it. Now
focus ring has been removed to fix this issue.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.#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.
f9fe8ed609 - Added
tabIndex and innerRef to underlying heading so it can be focused87f4720f27 - 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]45dcd1ca21:
Change imports to comply with Atlassian conventions- Updated dependencies 443bb984ab:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 57c0487a02:
Updated dependencies 71c1de8ee1:
Updated dependencies ffe88383f4:
Updated dependencies 6efb12e06d:
[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]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]0b09089d27:
Text alignment of action items will now only be applied to direct children
[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]688f2957ca:
Fixes various TypeScript errors which were previously failing silently
[major]afb88684ad:
[major]7c17b35107:
[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]4b0fb4e85f:
[minor]6cfa757: