Blanket
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.
Installation
yarn add @atlaskit/blanket
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.
yarn add @atlaskit/blanket
23bcc5bbc9cee -
Internal changes to how border radius is applied.1378ea7a99ce1 -
Upgrades jscodeshift to handle generics properly.b2d69a39e6687 -
Update @compiled/react dependency for improved type checking support.#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/reactdc89be79601e2 -
Remove old codemods.4660ec858a305 -
Update React from v16 to v188adc915d624f9 -
Update dev dependencies.9f62ecec4d422 -
Update dependencies.#176786
30a4108a8fe56 -
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/blanket, 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.
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 forreactandreact-domfor/platform` packages.
20c2d58f6f8a9 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.bb32e67d8926 -
Add support for React 18 in non-strict mode.8d4e99057fe0 -
Upgrade Typescript from 4.9.5 to 5.4.2909e4a30fe7 - Removed
all remaining legacy theming logic from the Blanket, Breadcrumbs and Checkbox components.b289e593932 - Internal
change to apply logical properties instead of physical properties for spacing, border, and
position.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.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.556507598609 - Skip
minor dependency bump4ba10567310 - Internal
changes.a7e8a6c3ace - Prevent
onBlanketClick function firing on Blanket when mousedown event begins on Blanket childrenbc989043572 - Internal
changes to apply spacing tokens. This should be a no-op change.f2fe91811eb - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behaviour change.8cc2f888c83 - Upgrade
Typescript from 4.3.5 to 4.5.58d4228767b0 - Upgrade
Typescript from 4.2.4 to 4.3.5.cb2392f6d33 - Upgrade
to TypeScript 4.2.4dcd92130cc4 - Migrate
deleted background accent tokens to replacementsa0b4a3db79c - Change
internal type syntax to work with extract-react-types19d72473dfb - 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.34282240102 - Adds
explicit type to button usages components.9f7f8e0b581 - [ux]
Blanket now uses a transparent background color when un-tinted instead of using opacity.2d7cc544696 - Updates
token usage to match the latest token set6071d362abb - [ux]
Colors now sourced from tokens.8279380176b - Internal
code changes.378d1cef00f - Bump
@atlaskit/theme to version ^11.3.0.#12328
f166f5398b2 - In this
version we made Blanket faster and lighter
General performance improvements
BREAKING Blanket now accepts a children prop whose value is of type ReactElement.
BREAKING canClickThrough prop is now renamed to shouldAllowClickThrough.
Running the codemod cli
To run the codemod: You first need to have the latest version installed
yarn upgrade @atlaskit/blanket@^12.0.0Once upgraded, use @atlaskit/codemod-cli:
npx @atlaskit/codemod-cli --parser babel --extensions ts,tsx,js [relativePath]The CLI will show a list of components and versions so select @atlaskit/blanket@^12.0.0 and you
will automatically be upgraded.
What will be changed:
canClickThrough prop to shouldAllowClickThrough.Run npx @atlaskit/codemod-cli -h for more details on usage.
For Atlassians, refer to the documentation for more details on the codemod CLI.
9c98e8227f6 - Internal
refactor for style declarations.dd89416d229 - Updated
dependency of @atlaskit/theme to 11.2.096fda7877a1 - We
converted blanket from class to functional component and replaced styled components with emotiond6f7ff383cf - Updates
to development dependency storybook-addon-performancef6b951a51f2 - Removes
usage of styled-components in favour of standardising on emotione08a57e5055 - Added
the design-system tech stacks to the package.json990aefd838b - Blanket
now accepts testId prop to be used for automated testing purposes.79c23df6340 - Use
injected package name and version for analytics instead of version.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.#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.
87f4720f27 - 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]6d744d3ff1:
Change imports to comply with Atlassian conventions- Updated dependencies 6b8e60827e:
Updated dependencies 57c0487a02:
[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:
Updated dependencies 4a223473c5:
[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]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
[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 withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking 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 AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[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]29a1f158c1:
Use default react import in typescript files.
[patch]93bcf314c6:
Added missing tslib dep
onBlanketClicked prop[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.
canClickThroughBlanket prop to Blanket to make it possible to animate
(cacb5cb)