Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/banner

atlassian41kApache-2.014.0.8TypeScript support: included

A banner displays a prominent message at the top of the screen.

readme

Banner

A banner displays a prominent message at the top of the screen.

Installation

yarn add @atlaskit/banner

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/banner

14.0.8

Patch Changes

  • Updated dependencies

14.0.7

Patch Changes

14.0.6

Patch Changes

  • Updated dependencies

14.0.5

Patch Changes

  • Updated dependencies

14.0.4

Patch Changes

  • Updated dependencies

14.0.3

Patch Changes

  • Updated dependencies

14.0.2

Patch Changes

14.0.1

Patch Changes

  • #129972 b2d69a39e6687 - Update @compiled/react dependency for improved type checking support.
  • Updated dependencies

14.0.0

Major Changes

  • #122255 63035cd95a9b6 - 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/banner, 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 notneed 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 toCompiledCSS-in-JS

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

Patch Changes

  • Updated dependencies

12.7.3

Patch Changes

  • Updated dependencies

12.7.2

Patch Changes

12.7.1

Patch Changes

  • Updated dependencies

12.7.0

Minor Changes

Patch Changes

  • Updated dependencies

12.6.3

Patch Changes

12.6.2

Patch Changes

12.6.1

Patch Changes

  • Updated dependencies

12.6.0

Minor Changes

  • #165245 57c3a8cc3de44 - Wrap icons so they're centered in a 24px container, to support new, smaller icons

12.5.5

Patch Changes

  • #165531 57f451bda8919 - Adds side-effect config to support Compiled css extraction in third-party apps

12.5.4

Patch Changes

  • Updated dependencies

12.5.3

Patch Changes

  • Updated dependencies

12.5.2

Patch Changes

  • Updated dependencies

12.5.1

Patch Changes

  • Updated dependencies

12.5.0

Minor Changes

  • #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.

Patch Changes

  • Updated dependencies

12.4.6

Patch Changes

  • Updated dependencies

12.4.5

Patch Changes

  • Updated dependencies

12.4.4

Patch Changes

12.4.3

Patch Changes

  • Updated dependencies

12.4.2

Patch Changes

  • Updated dependencies

12.4.1

Patch Changes

  • Updated dependencies

12.4.0

Minor Changes

  • #111696 20c2d58f6f8a9 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

12.3.3

Patch Changes

  • Updated dependencies

12.3.2

Patch Changes

12.3.1

Patch Changes

  • Updated dependencies

12.3.0

Minor Changes

12.2.0

Minor Changes

12.1.23

Patch Changes

12.1.22

Patch Changes

  • Updated dependencies

12.1.21

Patch Changes

  • Updated dependencies

12.1.20

Patch Changes

  • Updated dependencies

12.1.19

Patch Changes

  • Updated dependencies

12.1.18

Patch Changes

  • #40650 07aa588c8a4 - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.

12.1.17

Patch Changes

12.1.16

Patch Changes

  • #38209 56b444b56a8 - Fix a bug where text descenders were cut off at high zoom levels on Windows

12.1.15

Patch Changes

12.1.14

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

12.1.13

Patch Changes

12.1.12

Patch Changes

  • Updated dependencies

12.1.11

Patch Changes

  • Updated dependencies

12.1.10

Patch Changes

  • Updated dependencies

12.1.9

Patch Changes

  • Updated dependencies

12.1.8

Patch Changes

  • Updated dependencies

12.1.7

Patch Changes

  • #35337 529814693a1 - Pin version of @atlaskit/primitives so it resolves to correct version

12.1.6

Patch Changes

  • #33833 b8b41649492 - Update how certain background colors are referenced by name. Internal changes only.
  • Updated dependencies

12.1.5

Patch Changes

  • #34922 779727e307a - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.

12.1.4

Patch Changes

  • Updated dependencies

12.1.3

Patch Changes

  • #34128 b95cc173965 - Moves banner to continuous releases and push model consumption - no code changes

12.1.2

Patch Changes

12.1.1

Patch Changes

12.1.0

Minor Changes

Patch Changes

  • Updated dependencies

12.0.20

Patch Changes

  • #32424 2e01c9c74b5 - DUMMY remove before merging to master; dupe adf-schema via adf-utils

12.0.19

Patch Changes

  • Updated dependencies

12.0.18

Patch Changes

  • Updated dependencies

12.0.17

Patch Changes

  • Updated dependencies

12.0.16

Patch Changes

  • Updated dependencies

12.0.15

Patch Changes

  • #31299 699a5048af2 - [ux] Removes inaccurate role, tabindex, and aria-label from announcement banners.

12.0.14

Patch Changes

  • Updated dependencies

12.0.13

Patch Changes

  • #31185 b6c5779d358 - Internal changes only to restrict usage of Box from the primitives package.

12.0.12

Patch Changes

  • Updated dependencies

12.0.11

Patch Changes

  • #30440 6d665548890 - Update usages of Inline and Stack to make use of stable version in @atlaskit/primitives. Internal change only.

12.0.10

Patch Changes

  • Updated dependencies

12.0.9

Patch Changes

  • #27891 eadbf13d8c0 - Updated usages of Text, Box, Stack, and Inline primitives to reflect their updated APIs. There are no visual or behaviour changes.
  • Updated dependencies

12.0.8

Patch Changes

  • #28090 acb689ac0da - Change to an example available on atlassian.design so it does not use internal components.

12.0.7

Patch Changes

  • Updated dependencies

12.0.6

Patch Changes

  • Updated dependencies

12.0.5

Patch Changes

  • #26712 f7b2dbd6eba - Replace truncation styles with new Text shouldTruncate prop. No change in behaviour.

12.0.4

Patch Changes

  • #27482 ace7aad3603 - Visual fix to padding on banner container to match grid system. This affects the height of the banner (previously 52px => now 48px). There is no expected behavior change.
  • Updated dependencies

12.0.3

Patch Changes

  • Updated dependencies

12.0.2

Patch Changes

  • #25860 7c6009de2f1 - [ux] Updates the visual appearance to match the legacy light mode palette.
  • e35fc41dc33 - Internal change to use updated primtive spacing prop values. No expected behaviour change.
  • Updated dependencies

12.0.1

Patch Changes

  • #26488 bc989043572 - Internal changes to apply spacing tokens. This should be a no-op change.

12.0.0

Major Changes

  • #24710 6f834df2eab - Removed isOpen and innerRef props. Banner is now displayed by default - use conditional rendering to achieve the same behaviour as isOpen.

Minor Changes

  • e9b3ce1794d - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.
  • b0418893d72 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • 5f07e7b56a2 - Updates to the public types to better reflect the actual API.

11.6.3

Patch Changes

11.6.2

Patch Changes

11.6.1

Patch Changes

  • #23674 a19199a0c68 - Mark isOpen and innerRef props on @atlaskit/banner as deprecated.

11.6.0

Minor Changes

  • #22642 52f9dc8a972 - [ux] Change text to be left-aligned and span the whole width of banner. Remove possibility of multi-line banners with announcement appearance.

11.5.1

Patch Changes

  • Updated dependencies

11.5.0

Minor Changes

  • #20721 46ea9efa81e - [ux] Remove open/close animation. Restructure component to reduce nested divs.

Patch Changes

  • 9fd5ab9a6b4 - Refactor dynamic styles that rely on appearance
  • 8da8f216d84 - Memoize getA11yProps() function and clean up a11y unit tests.
  • 05872fbd60e - Convert from class component to a functional component. Migrate unit tests from enzyme to RTL.
  • 7952548ec4a - Revert changes made to DOM structure and refs

11.4.11

Patch Changes

11.4.10

Patch Changes

  • Updated dependencies

11.4.9

Patch Changes

  • Updated dependencies

11.4.8

Patch Changes

  • Updated dependencies

11.4.7

Patch Changes

11.4.6

Patch Changes

  • 19d72473dfb - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
  • Updated dependencies

11.4.5

Patch Changes

  • Updated dependencies

11.4.4

Patch Changes

  • #15998 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

11.4.3

Patch Changes

  • Updated dependencies

11.4.2

Patch Changes

  • Updated dependencies

11.4.1

Patch Changes

  • Updated dependencies

11.4.0

Minor Changes

  • #13302 d92ab6985e4 - Instrumented Banner with the new theming package, @atlaskit/tokens.

    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.

Patch Changes

  • af4bca32ad4 - Internal changes to supress eslint rules.
  • b6b4c4100cd - Updates high contrast css declarations to use system color tokens + generic media query
  • Updated dependencies

11.3.0

Minor Changes

Patch Changes

11.2.3

Patch Changes

11.2.2

Patch Changes

  • #11649 c7319dcdea9 - Added the design system tech stacks to the package.json and fixed linting errors, also disabled some linting rules to prevent breaking changes

11.2.1

Patch Changes

11.2.0

Minor Changes

  • #10230 262bfb58dcd - [ux] Add focus opportunity for Banner with announcement appearance

Patch Changes

  • Updated dependencies

11.1.1

Patch Changes

  • #9510 2b5927de4d4 - Added support for Windows high contrast mode for Banner Icon

11.1.0

Minor Changes

  • #7170 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.

11.0.6

Patch Changes

11.0.5

Patch Changes

  • #5497 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.

11.0.4

Patch Changes

  • Updated dependencies

11.0.3

Patch Changes

11.0.2

Patch Changes

  • #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.

11.0.1

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

11.0.0

Major Changes

Patch Changes

  • Updated dependencies

10.1.10

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

10.1.9

Patch Changes

  • Updated dependencies

10.1.8

Patch Changes

10.1.7

Patch Changes

10.1.6

Patch Changes

10.1.5

Patch Changes

10.1.4

Patch Changes

10.1.3

Patch Changes

10.1.2

Patch Changes

  • [patch]d222c2b987:

    Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.

    Breaking

    ** 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');

10.1.1

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

10.1.0

Minor Changes

  • [minor]062d440e97:

    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.

10.0.12

Patch 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

10.0.11

Patch Changes

10.0.10

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

10.0.9

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

10.0.8

Patch Changes

  • [patch]f34776be97:

    Type definition files are now referenced in package.json

10.0.7

Patch Changes

  • [patch]bbff8a7d87:

    Fixes bug, missing version.json file

10.0.6

Patch Changes

  • [patch]18dfac7332:

    In this PR, we are:

    • Re-introducing dist build folders
    • Adding back cjs
    • Replacing es5 by cjs and es2015 by esm
    • Creating folders at the root for entry-points
    • Removing the generation of the entry-points at the root Please see this ticket or this page for further details

10.0.5

Patch Changes

  • [patch]29a1f158c1:

    Use default react import in typescript files.

10.0.4

10.0.3

Patch Changes

10.0.2

10.0.1

  • [patch]c9c5d026b1:

    • Fixed outline around links in banner

10.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

9.0.3

  • [patch]50e8c82ec4:

    • index.ts is now ignored when published to npm to avoid ambiguity between ts and js files

9.0.2

9.0.1

9.0.0

  • [major]1433f91820:

    • Banner has been internally converted to TypeScript. Typescript consumers will get static type safety. No API or behaviour changes. Flow Support has been dropped.

8.0.2

  • [patch]98e11001ff:

    • Removes duplicate babel-runtime dependency

8.0.1

8.0.0

  • [major]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    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.

7.0.13

7.0.12

7.0.11

7.0.10

7.0.9

7.0.8

  • [patch] Adds missing implicit @babel/runtime dependency b71751b

7.0.7

7.0.6

  • [patch] Adds sideEffects: false to allow proper tree shaking b5d6d04

7.0.4

7.0.3

6.1.0

7.0.2

7.0.1

7.0.0

6.1.3

6.1.2

6.1.1

6.0.1

6.0.0

5.0.3

  • [patch] Color of the links inside banner will follow the text color 1c87e5a

5.0.2

5.0.0

  • [major] Bump to React 16.3. 4251858

4.2.2

  • [patch] Re-releasing due to potentially broken babel release 9ed0bba

4.2.1

  • [patch] Update links in documentation c4f7497

4.2.0

  • [minor] Update styled-components dependency to support versions 1.4.6 - 3 ceccf30

4.1.4

4.1.3

  • [patch] Packages Flow types for elements components 3111e74

4.1.2

  • [patch] Flatten examples for easier consumer use 145b632

4.1.1

  • [patch] Resolved low hanging flow errors in field-base field-text comment icon item and website, $ 007de27

4.1.0

  • [minor] Add React 16 support. 12ea6e4

4.0.5

  • [patch] Migrate banner to new atlaskit repo 0d035b2

4.0.4 (2017-11-21)

  • bug fix; bumping internal dependencies to latest major version (3d49e8e)

4.0.3 (2017-10-26)

  • bug fix; fix to rebuild stories (793b2a7)

4.0.2 (2017-10-22)

  • bug fix; update dependencies for react-16 (077d1ad)

4.0.1 (2017-09-18)

  • bug fix; update darkmode colors (7ae860b)

4.0.0 (2017-08-11)

  • bug fix; fix the theme-dependency (db90333)
  • breaking; affects internal styled-components implementation (d14522a)
  • breaking; implement dark mode theme (d14522a)
  • feature; dark mode for Banner, plus loads of cleanup in docs/stories (3f03b9a)
  • bug fix; remove ak-icon and update @atlaskit/icon to latest in package.json (8018cf0)

3.0.0 (2017-08-11)

  • breaking; affects internal styled-components implementation (d14522a)
  • breaking; implement dark mode theme (d14522a)
  • feature; dark mode for Banner, plus loads of cleanup in docs/stories (3f03b9a)
  • bug fix; remove ak-icon and update @atlaskit/icon to latest in package.json (8018cf0)

2.4.2 (2017-07-27)

  • fix; rename jsnext:main to jsnext:experimental:main temporarily (c7508e0)

2.4.1 (2017-07-25)

  • fix; use class transform in loose mode in babel to improve load performance in apps (fde719a)

2.1.0 (2017-07-17)

  • fix; rerelease, failed prepublish scripts (5fd82f8)

2.1.0 (2017-07-17)

  • feature; added ES module builds to dist and add jsnext:main to most ADG packages (ea76507)

2.0.5 (2017-07-13)

  • fix; testing releasing more than 5 packages at a time (e69b832)
  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)

2.0.4 (2017-05-09)

  • fix; update dependencies (3295727)

2.0.3 (2017-04-28)

  • fix; banner max-height now a pixel value that matches the line-height and padding correct (85bac54)

2.0.2 (2017-04-27)

  • fix; update legal copy to be more clear. Not all modules include ADG license. (f3a945e)

2.0.1 (2017-04-26)

  • fix; update legal copy and fix broken links for component README on npm. New contribution and (0b3e454)

1.0.8 (2017-03-29)

  • fix; repush stories for broken releases (cde4000)
  • null refactor the banner component to use styled-components (a72af4c)
  • breaking; removed dependency "classnames", added peerDependency "styled-components"
  • ISSUES CLOSED: AK-1980

1.0.7 (2017-03-28)

  • fix; update banner readme story to use new readme component (fa7b692)

1.0.6 (2017-03-23)

  • fix; Empty commit to release the component (49c08ee)

1.0.4 (2017-03-21)

  • fix; maintainers for all the packages were added (261d00a)

1.0.3 (2017-02-20)

  • fix; use correctly scoped package names in npm docs (91dbd2f)

1.0.2 (2017-02-10)

  • fix; Dummy commit to release components to registry (5bac43b)

1.0.1 (2017-02-06)

  • fix; Updates deps to use scoped packages (f773486)