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

Package detail

@atlaskit/lozenge

atlassian168.6kApache-2.013.0.15TypeScript support: included

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

readme

Lozenge

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

Installation

yarn add @atlaskit/lozenge

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/lozenge

13.0.15

Patch Changes

  • Updated dependencies

13.0.14

Patch Changes

  • Updated dependencies

13.0.13

Patch Changes

  • Updated dependencies

13.0.12

Patch Changes

  • 248faa32d4835 - Internal changes to how borders are applied.
  • Updated dependencies

13.0.11

Patch Changes

  • Updated dependencies

13.0.10

Patch Changes

  • Updated dependencies

13.0.9

Patch Changes

  • Updated dependencies

13.0.8

Patch Changes

  • 255837cfba315 - Internal changes to how border radius is applied.
  • Updated dependencies

13.0.7

Patch Changes

  • 23bcc5bbc9cee - Internal changes to how border radius is applied.
  • Updated dependencies

13.0.6

Patch Changes

  • Updated dependencies

13.0.5

Patch Changes

  • Updated dependencies

13.0.4

Patch Changes

  • #193214 c661806a65543 - Internal changes to how border radius and border width values are applied. No visual change.
  • Updated dependencies

13.0.3

Patch Changes

  • Updated dependencies

13.0.2

Patch Changes

  • Updated dependencies

13.0.1

Patch Changes

  • Updated dependencies

13.0.0

Major Changes

  • #157573 e9334c37a9e16 - Removes Emotion variant of the Lozenge and replaces contents with styles from Compiled CSS.

Patch Changes

  • Updated dependencies

12.2.5

Patch Changes

  • Updated dependencies

12.2.4

Patch Changes

12.2.3

Patch Changes

12.2.2

Patch Changes

12.2.1

Patch Changes

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

12.2.0

Minor Changes

  • #122758 d5c8218ff84d4 - Internally test the @atlaskit/lozenge/compiled variant replacing the current Emotion variant, behind a feature gate.

Patch Changes

  • Updated dependencies

12.1.0

Minor Changes

  • #117377 f6fa74e4221cd - [ux] We are increasing the letter spacing behind a feature flag. If testing successful, this change will be made available in a later release.

12.0.0

Major Changes

Patch Changes

  • Updated dependencies

11.14.0

Minor Changes

Patch Changes

  • Updated dependencies

11.13.4

Patch Changes

  • Updated dependencies

11.13.3

Patch Changes

11.13.2

Patch Changes

  • Updated dependencies

11.13.1

Patch Changes

  • Updated dependencies

11.13.0

Minor Changes

Patch Changes

  • Updated dependencies

11.12.7

Patch Changes

11.12.6

Patch Changes

11.12.5

Patch Changes

  • Updated dependencies

11.12.4

Patch Changes

11.12.3

Patch Changes

  • Updated dependencies

11.12.2

Patch Changes

  • #158114 01676a379617b - The experimental compiled variant makes use of the compiled Primitives variant.
  • Updated dependencies

11.12.1

Patch Changes

  • #157006 8108b044c362b - Changes the way our JSX pragma is applied and removes Compiled as a direct dependency (it is still an indirect dependncy via @atlaskit/css)

11.12.0

Minor Changes

Patch Changes

  • Updated dependencies

11.11.1

Patch Changes

  • Updated dependencies

11.11.0

Minor Changes

  • #146405 a92a52978058c - Adds an experimental Compiled CSS-in-JS entrypoint for our Lozenge component. This requires specific setup that is not documented fully and is not intended for external consumption.

11.10.2

Patch Changes

  • Updated dependencies

11.10.1

Patch Changes

  • Updated dependencies

11.10.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

11.9.1

Patch Changes

  • Updated dependencies

11.9.0

Minor Changes

Patch Changes

  • Updated dependencies

11.8.5

Patch Changes

  • Updated dependencies

11.8.4

Patch Changes

  • Updated dependencies

11.8.3

Patch Changes

  • Updated dependencies

11.8.2

Patch Changes

  • #113134 23be44b6bf355 - Internal change to hardcode font size for now to ensure it doesn't change with new typography themes.
  • Updated dependencies

11.8.1

Patch Changes

  • Updated dependencies

11.8.0

Minor Changes

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

Patch Changes

  • Updated dependencies

11.7.3

Patch Changes

  • Updated dependencies

11.7.2

Patch Changes

11.7.1

Patch Changes

  • Updated dependencies

11.7.0

Minor Changes

11.6.6

Patch Changes

11.6.5

Patch Changes

  • Updated dependencies

11.6.4

Patch Changes

  • Updated dependencies

11.6.3

Patch Changes

  • Updated dependencies

11.6.2

Patch Changes

  • Updated dependencies

11.6.1

Patch Changes

11.6.0

Minor Changes

Patch Changes

  • Updated dependencies

11.5.0

Minor Changes

  • #57070 96de6e4e4ca2 - Lozenge now uses height: min-content so it doesn't stretch when directly used as a flex / grid item.

11.4.6

Patch Changes

  • #41725 8d838ab41ed - Removed all remaining legacy theming logic from Badge, IconObject, Lozenge and SectionMessage. This only affects the examples and some tests in each component. No internal component logic contained legacy theming.

11.4.5

Patch Changes

  • Updated dependencies

11.4.4

Patch Changes

  • #38743 3b97837c528 - The internal composition of this component has changed. There is no expected change in behavior.
  • Updated dependencies

11.4.3

Patch Changes

11.4.2

Patch Changes

11.4.1

Patch Changes

11.4.0

Minor Changes

Patch Changes

  • Updated dependencies

11.3.10

Patch Changes

11.3.9

Patch Changes

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

11.3.8

Patch Changes

  • #31242 cfe48bb7ece - Internal change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives.

11.3.7

Patch Changes

  • Updated dependencies

11.3.6

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

11.3.5

Patch Changes

11.3.4

Patch Changes

  • Updated dependencies

11.3.3

Patch Changes

  • Updated dependencies

11.3.2

Patch Changes

  • #27076 25e09731caa - Fixes:

    • Removes vertical-align: baseline from Lozenge which was being applied incorrectly.
    • Removes a default prop which was causing unintended re-renders.

  • Updated dependencies

11.3.1

Patch Changes

  • Updated dependencies

11.3.0

Minor Changes

  • #25860 f97c945d57f - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • 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

11.2.5

Patch Changes

  • #26408 9de88fa1e1e - Internal changes to include spacing tokens in component implementations.

11.2.4

Patch Changes

  • #25795 4c6b6f0c927 - Removes @emotion/core dependency as it is no longer used within Lozenge. There is no expected behavior change.

11.2.3

Patch Changes

  • #24710 3ee63238f49 - Update internals of Box, Text, Inline and Stack to handle children more accurately. Also update scope of use-primitives to suggest Box and Text more selectively.

11.2.2

Patch Changes

11.2.1

Patch Changes

11.2.0

Minor Changes

  • #24004 bf235e83ac0 - Internal changes to the way styles are applied. The Lozenge background is now centred properly resulting in it sitting 1px higher, however the text inside the Lozenge is unaffected.

Patch Changes

  • 37246e87cfc - Adds position static to Box. Changes lozenge to use position static instead of relative.
  • 6e0671cb45c - Internal change to implementation which should not have any noticeable impact.
  • Updated dependencies

11.1.12

Patch Changes

11.1.11

Patch Changes

  • Updated dependencies

11.1.10

Patch Changes

11.1.9

Patch Changes

  • Updated dependencies

11.1.8

Patch Changes

  • #19618 62edf20ab1e - 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.
  • Updated dependencies

11.1.7

Patch Changes

  • Updated dependencies

11.1.6

Patch Changes

  • #16752 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • Updated dependencies

11.1.5

Patch Changes

  • Updated dependencies

11.1.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.1.3

Patch Changes

  • Updated dependencies

11.1.2

Patch Changes

  • Updated dependencies

11.1.1

Patch Changes

  • Updated dependencies

11.1.0

Minor Changes

  • #13302 d7caf75e732 - - [ux] Colors are now sourced through tokens.
    • Deprecate @atlaskit/lozenge/theme entry-point.

Patch Changes

  • Updated dependencies

11.0.0

Major Changes

  • #12837 1cd379a2199 - - In this version we made Lozenge dramatically faster and lighter. 🤩

    • General performance improvements.

    • We are now exporting a new style prop which you can use to pass a custom backgroundColor and color.

    • BREAKING We have removed the deprecated theme prop. Don't worry if you do use the theming API, you can now use the new style prop for custom styling.

    Before:

    import Lozenge from '@atlaskit/lozenge';

type GetThemeTokensFn<ThemeTokens, ThemeProps> = (props: ThemeProps) => ThemeTokens;

const lozengeTheme = (
    getTokens: GetThemeTokensFn<ThemeTokens, ThemeProps>,
    themeProps: ThemeProps,
): ThemeTokens => {
    const defaultTokens = getTokens(themeProps);

    if (themeProps.appearance === 'removed') {
        return {
            ...defaultTokens,
            textColor: 'grey',
        };
        return defaultTokens;
    }
};

<Lozenge appearance="removed" theme={lozengeTheme}>
    removed
</Lozenge>;

    After:

    import Badge, { BadgeProps } from '@atlaskit/badge';

<Lozenge appearance="removed" style={{ color: 'grey' }}>
    removed
</Lozenge>;
    • BREAKING We have removed the support of appearance prop object value. Please use style prop for customization.

    Before:

    import Lozenge from '@atlaskit/lozenge';

<Lozenge appearance={{ backgroundColor: 'blue', textColor: 'white' }}>custom</Lozenge>;

    After:

    import Lozenge from '@atlaskit/lozenge';

<Lozenge style={{ backgroundColor: 'blue', color: 'white' }}>custom</Lozenge>;

    Running the codemod cli

    To run the codemod: You first need to have the latest version installed

    yarn upgrade @atlaskit/lozenge@^11.0.0

    Once upgraded, use @atlaskit/codemod-cli via npx:

    npx @atlaskit/codemod-cli --parser babel --extensions ts,tsx,js [relativePath]

    The CLI will show a list of components and versions so select @atlaskit/lozenge@^11.0.0 and you will automatically be upgraded.

    What will be changed:

    • It will move backgroundColor and textColor from appearance prop (if object is passed as appearance prop value) to style prop.

    Run npx @atlaskit/codemod-cli -h for more details on usage.

    For Atlassians,

    refer to the documentation for more details on the codemod CLI.

Patch Changes

  • 0d0ecc6e790 - Corrects eslint supressions.
  • Updated dependencies

10.1.4

Patch Changes

10.1.3

Patch Changes

  • #12328 9c98e8227f6 - Internal refactor for style declarations.
  • 42e722938da - Converted class components to functional components
  • 8f0e5cbea57 - Migrated from @compiled to @emotion
  • f84de8233f3 - Add Techstacks rules to package.json
  • 7bb3268f2c8 - Removed version.json and unused dependency - react-test-renderer
  • f78ced42525 - Wrapped the root component in React.memo() to memorize the rendered lozenge

10.1.2

Patch Changes

10.1.1

Patch Changes

10.1.0

Minor Changes

10.0.7

Patch Changes

10.0.6

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.

10.0.5

Patch Changes

  • Updated dependencies

10.0.4

Patch Changes

10.0.3

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.

10.0.2

Patch Changes

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

10.0.1

Patch Changes

10.0.0

Major Changes

Patch Changes

  • Updated dependencies

9.1.9

Patch Changes

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

9.1.8

Patch Changes

  • Updated dependencies

9.1.7

Patch Changes

9.1.6

Patch Changes

9.1.5

Patch Changes

9.1.4

Patch Changes

9.1.3

Patch Changes

9.1.2

Patch Changes

  • [patch]557a8e2451:

    Rebuilds package to fix typescript typing error.

9.1.1

Patch Changes

  • [patch]35d2229b2a:

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

9.1.0

Minor Changes

  • [minor]10e0798da6:

    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.

9.0.7

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

9.0.6

Patch Changes

9.0.5

Patch Changes

  • [patch]708028db86:

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

9.0.4

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

9.0.3

Patch Changes

  • [patch]bbff8a7d87:

    Fixes bug, missing version.json file

9.0.2

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

9.0.1

Patch Changes

  • [patch]f8778d517a:

    Remove index.ts from built module

9.0.0

  • [major]ed41cac6ac:
    • Lozenge has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

8.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.

7.0.3

  • [patch]73a5c6f3dc:
    • Add emotion and remove styled-components

7.0.2

7.0.1

  • [patch]98e11001ff:
    • Removes duplicate babel-runtime dependency

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

6.2.4

6.2.3

  • [patch]d13242d:
    • Change API to experimental theming API to namespace component themes into separate contexts and make theming simpler. Update all dependant components.

6.2.2

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

6.2.1

  • [patch] Pulling the shared styles from @atlaskit/theme and removed dependency on util-shraed-styles 7d51a09

6.2.0

  • [minor] Use new theme API. Adds "theme" prop and exports new theme types. 4b36fd6

6.1.8

  • [patch] AK-5321 Lozenge with maxWidth should be constrained by container width 969233e

6.1.7

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

6.1.5

6.1.4

6.1.3

6.1.2

6.1.1

6.1.0

  • [minor] Improve behavior when using a narrow container ebf6b97
  • [none] Updated dependencies ebf6b97

6.0.0

5.0.4

5.0.3

5.0.2

5.0.1

5.0.0

4.1.1

  • [patch] Updae bold color to N800 0838cb0
  • [patch] Update colors of appearance to new color palette pairings 979aff5
  • [none] Updated dependencies 0838cb0
  • [none] Updated dependencies 979aff5

4.1.0

  • [patch] Update appearance enum test b42eaa5
  • [patch] Update test c668ac9
  • [minor] Update Lozenge to accept colors pairing 4638c7a
  • [none] Updated dependencies b42eaa5
  • [none] Updated dependencies c668ac9
  • [none] Updated dependencies 4638c7a

4.0.1

4.0.0

  • [major] Bump to React 16.3. 4251858

3.6.1

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

3.6.0

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

3.5.2

3.5.1

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

3.5.0

  • [minor] Add React 16 support. 12ea6e4

3.4.2 (2017-07-27)

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

3.4.1 (2017-07-25)

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

3.1.0 (2017-07-17)

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

3.1.0 (2017-07-17)

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

3.0.3 (2017-07-13)

  • fix; add prop-types as a dependency to avoid React 15.x warnings (92598eb)

3.0.2 (2017-04-27)

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

3.0.1 (2017-04-26)

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

2.0.0 (2017-03-27)

  • bump major to avoid API conflict with mentions (1d01253)
  • updating dependencies (d293404)
  • breaking; update lozenge major version
  • breaking; removed classnames dep and .d.ts file

1.0.11 (2017-03-23)

  • fix; Empty commit to release the component (49c08ee)
  • refactor the lozenge component to use styled-components (eb738ca)
  • breaking; now requires peerDep of "styled-components"

1.0.9 (2017-03-21)

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

1.0.8 (2017-02-28)

  • fix; dummy commit to release stories (3df5d9f)

1.0.6 (2017-02-28)

  • fix; dummy commit to fix broken stories and missing registry pages (a31e92a)

1.0.6 (2017-02-28)

  • fix; dummy commit to release stories for components (a105c02)

1.0.5 (2017-02-28)

  • fix; removes jsdoc annotations and moves them to usage.md (2c53fea)

1.0.4 (2017-02-20)

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

1.0.2 (2017-02-07)

  • fix; Updates docs with yarn installation instructions (aebf31a)
  • Add TypeScript declarations for lozenge. (5993cf8)

1.0.1 (2017-02-06)

  • fix; Updates package to use scoped ak packages (b655c30)