A text area lets users enter long form text which spans over multiple lines.
yarn add @atlaskit/textarea#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/react#113290
a8634aba15b6a -
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/textarea, 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.
Removed styles.tsx and component-tokens.tsx and their entry points
@atlaskit/textarea/component-tokens and @atlaskit/textarea/styles from package.json
#95577
ad478a9dbc399 -
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/textarea, 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.
Removed styles.tsx and component-tokens.tsx and their entry points from package.json
4660ec858a305 -
Update React from v16 to v18#173737
667640085e5c7 -
Update the font size for the textarea and select components at the xs breakpoint. The font size
will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
focused. Styles for larger breakpoints will remain unchanged.
Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
the media.above.xs breakpoint.
These changes are currently behind a feature gate and will be evaluated for effectiveness. If successful, they will be included in a future release.
962b5e77810fb -
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.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
f2f51e7a24d00 -
Internal change only. Update typography to use typography tokens.d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.5d9e1dccacca -
[ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496065756e95a09 -
[ux] This change includes a fix for the TextArea's text color when there is a placeholder and
isDisabled is true.427c2dd9e0d6 -
[ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast8e66f751df96 -
Use feature flag to roll out border width update from 2px to 1pxed8b6957789 - Removes
any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.5f37caad726 - [ux]
reduce border width to 1px and update fallback color of border49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bumpe028bee17df - [ux]
fix(style): update fallback color of placeholder to meet contrast requirement9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.6612a236510 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.32d761cfc1d - [ux] Fix
bug that prevented consumers from rendering a single line textareab8841384da6 - Disabled
background and border styles should not be applied to components that have either no background or
transparent background to begin with. Textfield and textarea variants that do not have backgrounds
(sublte or none) have no backgrounds or borders applied when disabled. As such, any comopnents
that consume these will also be affected.bedbdec0e82 - Update
hover state appearance of subtle Textarea, Textfield and Select components to match the hover
states of their default counterparts.e4abd2c2888 - Update
token used for background color of subtle text area on hover926f9b57c59 - Internal
code change turning on new linting rules.fe575d49d66 - Updated
styles to use new input design tokens45ebe7af434 - Moved to
using declarative entrypoints internally. Public API is unchanged.2e56ff8ea50 - [ux]
Fixed a bug where smart resize did not work when the value prop was changed19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.af7c289395b - Fix
TypeScript issue where text area HTML attributes were not exposed in component prop types.#13302
ae281b57bcd -
Instrumented Radio 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
2d7cc544696 - Updates
token usage to match the latest token setd6f7ff383cf - Updates
to development dependency storybook-addon-performance7af2427f3a8 - [ux]
Update form field examples for validation and add a new prop to RadioGroup component79c23df6340 - Use
injected package name and version for analytics instead of version.json.#5860
782b6e5182 - ### Brief
The goal of this major for textarea is to improve the component's performance, by both
reducing static structure and avoiding unnecessary function calls.
We have made internal refactors and optimizations to improve textarea performance. Some changes made are as follows:
Moving TextArea to a single element (removed an internal wrapping element)
Replace styled-components to emotion as styling library
Moving internal component analytics to a more efficient usePlatformLeafEventHandler hook
Refactoring styles to recalculate only when theme & certain props change
Controlling CSS change via attributes instead of props
DOM element 2 -> 1 Removed div surrounding (wrapper) native textarea element and moved all behaviors and CSS to that single element.
Measuring the height of the textarea element will now get different raw values because the text area is now rendering it’s own padding and border, but computed height is still the same.
# You first need to have the latest textarea installed before you can run the codemod
yarn upgrade @atlaskit/textarea@^4.0.0
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
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.6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0Since 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 npm7aa4756beb - Change imports to comply with Atlassian conventions- Updated dependenciesDeletes internal package @atlaskit/type-helpers and removes all usages. @atlaskit/type-helpers has been superseded by native typescript helper utilities.- Updated dependencies 168b5f90e5:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
Added name prop to component prop types.- Updated dependencies 24865cfaff:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
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.
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
Change all the imports to theme in Core to use multi entry points
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 TypeScriptConsume analytics-next ts type definitions as an ambient declaration.
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);
[major]7c17b35107:
[major]dd95622388:
[patch]0a4ccaafae:
[patch]cd67ae87f8:
[patch]3f28e6443c:
[patch]cf018d7630:
[minor]f504850fe2:
[patch]1bcaa1b991:
[patch]90a14be594:
[minor]9d5cc39394:
[patch]1b952c437d:
[patch]aab267bb3a:
[patch]9e6b592:
[patch]d13242d:
[minor]76a8f1c:
import '@atlaskit/button/dist/es5/components/ButtonGroup'[minor]9d77c4e: