Badge
A badge is a visual indicator for numeric values such as tallies and scores.
Installation
yarn add @atlaskit/badge
Usage
Detailed docs and example usage can be found here.
A badge is a visual indicator for numeric values such as tallies and scores.
A badge is a visual indicator for numeric values such as tallies and scores.
yarn add @atlaskit/badge
Detailed docs and example usage can be found here.
2f3c3d27e42b2
-
[ux] Updates badge styles to reflect our new visual design language. These changes were previously
behind a feature flag and are now fully rolled out.74c2f420ee49b
-
Internal changes to how border radius is applied.3b5b4a919aaaf
-
Internal changes to how border radius is applied.08019848e3eab
-
Refreshed "issue" terminology.b2d69a39e6687
-
Update @compiled/react
dependency for improved type checking support.c76a9ef9c9363
-
[ux] Add Support for showing negative numbers in Badge Component for Custom Number fields with max
prop supported#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/react5d898c3d9c9dc
-
Remove old codemods and update dependencies.4660ec858a305
-
Update React
from v16 to v182b1fcf6b76f75
-
Update dependencies and remove unused exports.313a78293b12a
-
Internal patch for testId. Fixes data-testId warning. No functionality change.#102595
d7f60cd2fb693
-
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/badge
, 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.
57f451bda8919
-
Adds side-effect config to support Compiled css extraction in third-party apps#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 for
reactand
react-domfor
/platform` packages.
055c56ce4412b
-
[ux] DSP-19189 We are testing a new visual appearance behind a feature flag. If successful it will
be released at a later date.20c2d58f6f8a9
-
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.0392b6e4d865a
-
Sets flex-shrink: 0
on Badge to avoid it spanning multiple lines when in flex containers that
aren't wide enough.6f40240a7290
-
Removed feature flag from previous release, keeping the newer changes.#88033
8c3fac87dcc9
-
Badge now sets specific font size, line height, font style, and font family properties under the
hood. If you previously had Badge wrapped with elements like <em>
or <strong>
that specify
font style or font weight properties, there will be a visual difference as these styles are
overriden within Badge. Avoid wrapping Badge in elements that modify text properties.
If you need to preserve these styles, wrap the children of Badge instead, for example:
<Badge><em>1</em></Badge>
. Please note however this is not fully supported and will not work
with the max
prop.
eef585934a84
-
Add support for React 18 in non-strict mode.8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
36d7e564977a
-
Explicitly coerce value in getSafeValue
utility function to improve compatibility with
TypeScript 5ae0930df4bfa
-
Renamed supportReact18 to runReact1842ba4ac39529
-
Badge now uses height: min-content so it doesn't stretch when directly used as a flex / grid item.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.1ed303de3e8
- Updated
dependencies95401cac781
- Internal
change to component composition. There is no expected change.4ae083a7e66
- Use
@af/accessibility-testing
for default jest-axe config and jest-axe import in accessibility
testing.7e4085cd951
- Allow
caret version range in @atlaskit/primitives dependency.5af07899f5b
- Loosens
types to better reflect xcss
API.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.77766ad157d
- Enrol
packages to push-model consumption in Jira.9d00501a414
- 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 bumpa7f643a0ee7
- Updated
badge line-height to use design system values, removed block padding. There are no visual or
behaviour changes.eadbf13d8c0
- Updated
usages of Text
, Box
, Stack
, and Inline
primitives to reflect their updated APIs. There are
no visual or behaviour changes.936d6bccf4f
- Update
to emotion v11. No expected behaviour change.e35fc41dc33
- Internal
change to use updated primtive spacing prop values. No expected behaviour change.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
342ab3bc77e
- Update
ds-explorations dependency to support previous patch57adb9bb931
- Fixes an
issue with '@atlaskit/badge' text color for certain appearances.fe54d8f1aec
- Update
ds-explorations dependency. No change in behaviour.06fd023cd85
- Minor
internal change to how text is displayed. No change to consumers.52809e4839b
- Allow
makers to disable max value formatting in the Badge component8d4228767b0
- Upgrade
Typescript from 4.2.4
to 4.3.5
.899199caabb
- Internal
changes to the way styles are applied. There should be no noticeable changes to consumers.8067cc918d9
- Update
implementation to match changes made to Text primitiveea36ea17c4e
- Text now
supports text-align and it's used for Badge to retain existing visualscb2392f6d33
- 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.#12837
942dd25df09
- In this
version we made Badge 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
.
You can now pass ReactNode
instead of string
as children; however, Badge should only be
used in cases where you want to represent a number. If the value is number
, we will use
existing formatting based on the max
prop, otherwise the value will get rendered as it is.
[BREAKING] We have removed the deprecated theme
prop. Please use a combination of
appearance
and style
prop for custom theming.
Before:
import Badge from '@atlaskit/badge';
type GetThemeTokensFn<ThemeTokens, ThemeProps> = (props: ThemeProps) => ThemeTokens;
function themeGetterFunction<ThemeTokens, ThemeProps>(
getTokens: GetThemeTokensFn<ThemeTokens, ThemeProps>,
themeProps: ThemeProps,
): ThemeTokens {
const defaultTokens = getTokens(themeProps);
if (themeProps.appearance === 'removed') {
return {
...defaultTokens,
textColor: 'grey',
};
}
return defaultTokens;
}
<Badge appearance="removed" theme={themeGetterFunction}>
{10}
</Badge>;
After:
import Badge, { BadgeProps } from '@atlaskit/badge';
function getStyle(appearance: BadgeProps['appearance']) {
if (appearance === 'removed') {
return {
color: 'grey',
};
}
return undefined;
}
const appearance = 'removed';
<Badge appearance={appearance} style={getStyle(appearance)}>
{10}
</Badge>;
Container
and Format
components. Please use a combination of
style
and ReactNode
type children
prop for customization.Before:
import { Container, Format } from '@atlaskit/badge';
<Container backgroundColor="red" textColor="blue">
<em>
<Format>{10}</Format>
</em>
</Container>;
After:
import Badge from '@atlaskit/badge';
<Badge style={{ backgroundColor: 'red', color: 'blue' }}>
<em>
{10}
</em>
</Badge>
// or if you are passing `max` prop so that formatting logic should work
<em>
<Badge style={{ backgroundColor: 'red', color: 'blue' }} max={5}>
{10}
</Badge>
</em>
appearance
prop object value. Please use style
prop for customization.Before:
import Badge from '@atlaskit/badge';
<Badge appearance={{ backgroundColor: 'red', textColor: 'blue' }}>{10}</Badge>;
After:
import Badge from '@atlaskit/badge';
<Badge style={{ backgroundColor: 'red', color: 'blue' }}>{10}</Badge>;
Running the codemod cli
To run the codemod: You first need to have the latest version installed
yarn upgrade @atlaskit/badge@^15.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/badge@^15.0.0
and you
will automatically be upgraded.
What will be changed:
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.
0ced21f8470
- [ux]
Colors are now sourced through tokens.378d1cef00f
- Bump
@atlaskit/theme
to version ^11.3.0
.9c98e8227f6
- Internal
refactor for style declarations.ed3b6be05af
- - Expose
2 new entry points: badge and types75b394efe89
- Added
the design-system tech stacks to the package.json and fixed linting errors, also disabled some
linting rules to prevent breaking changese3205bce20d
- Internal
change (migrated from styled-components to emotion)d6f7ff383cf
- Updates
to development dependency storybook-addon-performance
f6b951a51f2
- Removes
usage of styled-components in favour of standardising on emotionb71c7c1e132
- Added
the design-system
tech stacks to the package.json
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.d3265f19be
- Transpile
packages using babel rather than tsc5f58283e1f
- 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.6360c46009
- Reenable
integration tests for Edge browser#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.db053b24d8
- Update all
the theme imports to be tree-shakable87f4720f27
- 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]093fdc91b1:
Change imports to comply with Atlassian conventions- 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:
[patch]557a8e2451:
Rebuilds package to fix typescript typing error.
[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]a97f1c5b5e:
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.
[major]6410edd029:
Deprecated props, value
and onValueUpdated
have been removed from the Badge component. Please
use the children prop instead.
[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]ecca4d1dbb:
Upgraded Typescript to 3.3.x
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]de35ce8c67:
Updates component maintainers
[patch]bbff8a7d87:
Fixes bug, missing version.json file
[patch]18dfac7332:
In this PR, we are:
[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);
[patch]29a1f158c1:
Use default react import in typescript files.
[major]7c17b35107:
[patch]50e8c82ec4:
[patch]0a4ccaafae:
[major]c95557e3ff:
[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]d13242d: