Heading
A heading is a typography component used to display text in different sizes and formats.
Installation
yarn add @atlaskit/heading
Usage
Detailed docs and example usage can be found here.
A heading is a typography component used to display text in different sizes and formats.
A heading is a typography component used to display text in different sizes and formats.
yarn add @atlaskit/heading
Detailed docs and example usage can be found here.
1c66b8e32f30a
-
[ux] Removed feature flag platform-typography-improved-color-control
resulting in automatic
color inversion based on bold surfaces will only affect the default color.b2d69a39e6687
-
Update @compiled/react
dependency for improved type checking support.4850fa1a503ba
-
[ux] Automatic color inversion based on bold surfaces will only affect the default color behind a
feature flag. If testing successful, this change will be made available in a later release.#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
084765a9c326c
-
Remove old codemods and update dependencies.b50c5d5d65ae2
-
Bump to the latest version of @compiled/react49d35008263f7
-
Added ref forwarding support.4660ec858a305
-
Update React
from v16 to v18cbc1d5f5bf950
-
Update dev depdencies and remove unused internal exports.#171160
0d474a7c26c0d
-
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/heading
, 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.
c02bd4e1ce076
-
Removed unused types related to the old Heading API. Exported types for the Heading component are
now HeadingProps
and HeadingColor
. Removed circular type references.061d0c77948b7
-
Breaking change: The deprecated level
prop has been removed. Use the size
prop instead.
See https://atlassian.design/components/heading/migration-to-size-prop for migration details.962b5e77810fb
-
Adds side-effect config to support Compiled css extraction in third-party appsc733254a2dd6e
-
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.c3dc02298f8aa
-
[ux] Change heading xsmall lineheight from 16 to 20 for minor third theme.3e6f291ec2d5
-
Color prop to take color tokens when using heading with size prop.d7770083ff25
-
Add support for React 18 in non-strict mode.4efd62cdc533
-
SHPLVIII-481: Assign name to default export components to fix quick-fix imports8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
2e05dc3106e3
-
Run codegen for Heading font family changes.c193ae1d1163
-
Fix heading typography styles to for apple OS edge cases.bc7085853ea2
-
Renamed variant
prop to size
. The prop values remain unchanged.8ab7a816dca7
-
Revert input border change from the previous version8877e9b57d55
-
Added size
prop which will replace variant
prop in the next major version.427c2dd9e0d6
-
Update input border color token and width to meet 3:1 color contrast32e4d951a5ae
-
Run the codegen and update heading.partial.tsxfdf7f6635426
-
Modified mapping of variant
to the HTML element that gets rendered. Previously xlarge
would
render a h2
, large
would render a h3
etc... Now xlarge
renders a h1
and so on...e2d35320717b
-
Fix types to set either level or variant to be required props to prevent exceptions being thrown.caac5b953575
-
Fixed an issue where typography tokens referenced font family tokens that may not exist on a page,
causing fallbacks to break.cae958047771
-
Internal change to how typography tokens are imported. There is no expected behaviour change.fc7aba3cbae
- [ux]
Further fixes related to heading getting into possible invalid state. Heading will now always
produce valid markup / aria-attributes for any configuration. Previously if there was no
HeadingContext
in the tree the heading would not produce accessibly correct markup in some
cases. This is now resolved.40cd7f0c882
- Fix to
prevent heading getting into possible invalid state.8d9dad6b977
- Heading
will apply an aria level if rendered as a div. This is an accessibility fix for an incomplete
feature shipped in the previous minor version.b1882fdd842
- Change
typography token naming to be more verbose.9cc7e23c65b
- [ux]
Adds additional heading types via the variant
prop. This prop has been added to aid deprecation
of the previous level
prop. The level
prop will be removed in a future release.ff79902b24c
- This
package is now onboarded onto the product push model.4ae083a7e66
- Use
@af/accessibility-testing
for default jest-axe config and jest-axe import in accessibility
testing.529814693a1
- Pin
version of @atlaskit/primitives so it resolves to correct versionb8b41649492
- Update
how certain background colors are referenced by name. Internal changes only.779727e307a
- Internal
change only. Replace all instances of Box with stable @atlaskit/primitives version.61cb5313358
- Removing
unused dependencies and dev dependencies9d00501a414
- Ensure
legacy types are published for TS 4.5-4.841fae2c6f68
- Upgrade
Typescript from 4.5.5
to 4.9.5
56507598609
- Skip
minor dependency bumpe0460d5d989
- Usages
of process
are now guarded by a typeof
check.261420360ec
- Upgrades
component types to support React 18.cfe48bb7ece
- Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives
.b6c5779d358
- Internal
changes only to restrict usage of Box
from the primitives package.18aeca8c199
- Internal
change to update token references. There is no expected behaviour or visual change.fce52a022f5
- Adds
typography tokens to @atlaskit/heading.95fdae34c94
- Revert
experimental change to @compiled/react
from @emotion/react
.#27238
7d92ed50264
- [ux]
This package is still considered to be in an experimental state and is discouraged for use in
production. The major is to simplify consumption and versioning in product.
Other changes:
HeadingContext
provider to aid with creating the right semantic structure
for headings.@compiled/react
from @emotion/react
.bc989043572
- Internal
changes to apply spacing tokens. This should be a no-op change.8cc2f888c83
- Upgrade
Typescript from 4.3.5
to 4.5.5
30b11aab9fb
- Updates
@emotion/core
to @emotion/react
; v10 to v11. There is no expected behavior change.8d4228767b0
- Upgrade
Typescript from 4.2.4
to 4.3.5
.47b01007f27
-
Introduces color prop with values default and inverse.354050b68da
- Revert
font size calculations to raw pixels.cb2392f6d33
- Upgrade
to TypeScript 4.2.419d72473dfb
- Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changesf460cc7c411
- Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.d7a9a4ff7ec
-
Instrumented heading 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.ee15e59ba60
- This is
the initial release of the Heading package. Typography styles have been duplicated from the
@atlaskit/theme
package as standalone components.46816ee8526
- Changes
heading element mappings to match '@atlaskit/css-reset'.f9cd2065648
- Removed
redundant styles for text-transform, moved font-size to rem
insteda of em
.