Flag
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
Installation
yarn add @atlaskit/flag
Usage
Detailed docs and example usage can be found here.
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
yarn add @atlaskit/flag
Detailed docs and example usage can be found here.
b2d69a39e6687
-
Update @compiled/react
dependency for improved type checking support.00925dc5af2a6
-
[ux] Flag description and actions now explicitly set the font style to use typography tokens,
instead of relying on the CSS reset to be present. This change is behind the feature flag
platform_ads_explicit_font_styles
.#124832
aa446a240d0bd
-
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/flag
, 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.
d8df33a58ab3b
-
Updated flag dismiss and expand button to use new icons. This change is behind a feature flag and
will be available in a later release.903841d1b85ba
-
Removes the explicit return type on withFlagsProvider to allow typescript to infer the real type.
This allows consumers to have a better typescript experience and not have to cast the
withFlagsProvider type in storybook.47ed83a62335a
-
We are testing improvements behind a feature flag. Flags with default icons, and support for icons
with no spacing. If this fix is successful it will be 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
5033cb80b3765
-
Updates internal animation logic to leverage static animation timing names, rather than arbitrary
values.4660ec858a305
-
Update React
from v16 to v18124bd21a27dae
-
Update dependencies.2eea1b16e9f57
-
delayAnnouncement type added for AutoDismissFlag57f451bda8919
-
Adds side-effect config to support Compiled css extraction in third-party apps2ac6ec33aa35a
-
Added aria-hidden to title and description when delayAnnouncement enabled to avoid duplicate
announcement. Also removed condition for role alert5d414827c3394
-
Removes usages of deprecated CustomThemeButton in favor of the new Button#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.
77504ff274f72
-
DSP-19576: Assign names to anonymous default exportscca5dee6530a8
-
Accessibility improvements. Add headingLevel
prop.b52de02acc0d0
-
Add support to delay the screen reader announcement by props223959ef57c80
-
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.e7b8d483e629
-
Introduce a new prop shouldRenderToParent on FlagProvider to render flag group directly to parent
instead of Portalbbed9621a7a3
-
HTML buttons used in flags have been replaced with the Pressable
primitive.23eb450d6c2b
-
Internal change only: update to use new typography system.3f7f99daae4a
-
Add support for React 18 in non-strict mode.6c6d44b0293f
-
Add shouldRenderToParent prop on flag group to render directly in the parent so the flags can be
acessed in aria-modal components8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
04235acacd6
- Enrol
package to push model in Jira4d35602a23a
- Removes
tabindex from Flag containerfd6bb9c9184
- Delete
version.json1ed303de3e8
- 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.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.774ed69ecef
- Internal
changes to use space tokens for spacing values. There is no visual change.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.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 bump4ba10567310
- Internal
changes.2e01c9c74b5
- DUMMY
remove before merging to master; dupe adf-schema via adf-utilsbe1170b4b1f
- Removes
custom appearance styles for focus. Now uses color.border.focused
token consistenly across all
appearances..261420360ec
- Upgrades
component types to support React 18.74c1b81a476
- Replaces
use of gridSize
with space tokens. There is no expected visual change.cfe48bb7ece
- Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives
.842bb999a85
- Internal
change only. Replace usages of Inline/Stack with stable version from @atlaskit/primitives
.eadbf13d8c0
- Updated
usages of Text
, Box
, Stack
, and Inline
primitives to reflect their updated APIs. There are
no visual or behaviour changes.b0f6dd0bc35
- Updated
to use typography tokens. There is no expected behaviour or visual change.56a44cd0ae9
- - [ux]
Updated Flag component colored background buttons to use correct tokens for better contrast#26712
f7b2dbd6eba
- BREAKING
CHANGE: We have removed support for legacy light and dark themes. Previously, Flag used the
useGlobalTheme
hook to detect 'light' or 'dark' modes and apply suitable styles accordingly.
This functionality has been removed in favor of supporting token-based light and dark themes as
well as including fallbacks for non-token environments.
Other changes include:
a1af6f8bb99
- Fixes a
regression that could cause Flag description or actions to display incorrectly or not at all.373f54c8212
- Fixed an
issue where Flag title or description could overflow its container if a single word exceeded the
length of the container (for example, long filenames).bbd4e296a68
- Fixes a
regression that could cause Flag description or actions to display incorrectly or not at all.9de88fa1e1e
- Internal
changes to include spacing tokens in component implementations.8cc2f888c83
- Upgrade
Typescript from 4.3.5
to 4.5.5
d176305ad56
- 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
.8202e37941b
- Internal
code change turning on new linting rules.982f05dc6b9
- [ux]
Remove left indentation on bold flag's actions section45ebe7af434
- Moved to
using declarative entrypoints internally. Public API is unchanged.379b0a864df
- [ux]
Remove truncation of titles and wrap text instead. Very slightly changed title text positioning.f16146d83ff
- [ux] Fix
cross icon positioning2329b0e8cc0
- [ux]
DSP-4541 Update wrongly used tokenscb2392f6d33
- Upgrade
to TypeScript 4.2.40739258f502
- [ux]
Fixed token usages on backgrounds and action links.19d72473dfb
- Internal
changes to support adoption of '@compiled/react'.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.19d72473dfb
- An a11y
fix for the flag dismiss/toggle button such that it retains focus when toggled.#17576
c04528ade6a
-
Note: It is a re-release of the wrongly patched
version 14.4.2
that should have been a
minor
release.
[ux] Instrumented flag 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.
WRONG RELEASE TYPE - DON'T USE
#15998
4567d73813c
-
Instrumented flag 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.
f460cc7c411
- Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.230e1862182
- Fix a11y
eslint error in Flag component378d1cef00f
- Bump
@atlaskit/theme
to version ^11.3.0
.bc7669cb402
- [ux]
Fixed flag labels to be more accurately describe their elements.d6f7ff383cf
- Updates
to development dependency storybook-addon-performance
1964787a3ce
- [ux]
fixes issue where flags wrapped in another component would fail to autodismiss after 8 seconds in
FlagGroupc139588c86d
- Remove
aria-expanded attribute from Flag close buttons57f551bad1f
- Flag
group children types now can have falsy children.79c23df6340
- Use
injected package name and version for analytics instead of version.json.b11ea3f327e
- [ux] Fix
text not being able to be selected.952019cfd39
- Removed
extraneous/unnecessary dependencies for design system components.6a9e722703e
- You can
now place an onDismissed
prop on a Flag. This was removed as part of a major version upgrade and
was previously a "private prop". It has been added back as there is a need for a Flag to know when
it is being dimissed.f92b240fc3
- Add an
optional id attribute to FlagGroup via propsd3265f19be
- 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.83e32fa998
- Now uses
useAnalyticsEventHandler
in @atlaskit/analytics-next rather than its own version of the hook93b04d1161
- Fixed
focus ring cut off issue on flag6360c46009
- Reenable
integration tests for Edge browserc740579074
- The h2 for
Flag Groups no longer causes scrollbars to be triggered when a flag displays.#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.#3428
807cd28fc0
- In this
version we made flag dramatically faster, lighter and easier to use 🤩
In 13.0.0
we bring significant performance improvements as well as improving the experience of
using flag.
peerDependency
on styled-components@3
. Internally flag is now using
@emotion/core
for styling@atlaskit/motion
instead of
react-transition-group
. Along with this change exit animations are now 2x quicker than the
entering animation as per the standardized animation practices in motion
.FlagProvider
wrapper for single page applications that allows you to show flags in a
flag group imperatively by calling a function, showFlags
that is stored in the context. Check
the docs for more detailsisDismissAllowed
and onDismissed
from FlagProps
, in favour of
accessing them from context that FlagGroup creates.onDismissed
on FlagGroup
is now defined as
(id: number | string, analyticsEvent: UIAnalyticsEvent) => void
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/39534eec3c9944e
- Export
FlagProps type54a9514fcf
- Build and
supporting files will no longer be published to npm4560b65a4f
- upgrade
react-transition-group to latest98f462e2aa
- Bumping
use the latest version of @atlaskit/spinner958b2bf6f8
- FIX:
Screen reader text won't be rendered when there is no flag FIX: FlagGroup screen reader text
defaults to h2
tag now. Was previously h1. NEW: Customize screen reader text and the tag that
renders the text[patch]bf7a09790f:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
[patch]5ecbbaadb3:
Fixes flag icon being slightly off center.- Updated dependencies 0603860c07:
[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 28f8f0e089:
Updated dependencies 82747f2922:
[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]f86839ca4e:
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
[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]33d2e11038:
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.
[patch]2b158873d1:
Add linting rule to prevent unsafe usage of setTimeout within React components.
[patch]67a3a1ee02:
Converts prop types to interfaces
[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
[minor]3e0267e5dd:
FlagGroup is centered on mobile
[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]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps
alias has been removed, please use withAnalyticsEvents
AnalyticsContextWrappedComp
alias has been removed, please use withAnalyticsContext
Breaking changes to TypeScript annotations
withAnalyticsEvents
now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext
now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps
has been renamed to WithAnalyticsEventsProps
to match source
codeCreateUIAnalyticsEventSignature
has been renamed to CreateUIAnalyticsEvent
to match
source codeUIAnalyticsEventHandlerSignature
has been renamed to UIAnalyticsEventHandler
to match
source codeAnalyticsEventsPayload
has been renamed to AnalyticsEventPayload
ObjectType
has been removed, please use Record<string, any>
or [key: string]: any
UIAnalyticsEventInterface
has been removed, please use UIAnalyticsEvent
AnalyticsEventInterface
has been removed, please use AnalyticsEvent
CreateAndFireEventFunction
removed and should now be inferred by TypeScriptAnalyticsEventUpdater
removed and should now be inferred by TypeScript[patch]688f2957ca:
Fixes various TypeScript errors which were previously failing silently
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[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]76b4718f7d:
Fixing mounting and unmounting animations
[patch]4615439434:
index.ts will now be ignored when publishing to npm
[patch]93bcf314c6:
Added missing tslib dep
[patch]9c80ef7539:
The update to node 10 reveals that unknown type is breaking the extract react types. I had to replace unknown type by any
[patch]ff649e1001:
Widens type of title prop from string to ReactNode. This gives flexibility to pass i18n components as flag titles.
[patch]b0ef06c685:
[patch]cdba81d4f2:
[major]238b65171f:
[patch]dccab11ef4:
[major]7c17b35107:
[patch]23672bbd2d:
[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.