A text field is an input that allows a user to write or edit text.
yarn add @atlaskit/textfield#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
#114073
b5b9031ffaa05 -
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/textfield, 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.
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.
#161890
6735226160872 -
Update the font size and padding styles for the text field component 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.
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 apps56dfbfe361f96 -
Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select#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.
0733b41bad0b4 -
Remove remnants of extract-react-types from textfield. Previously had a workaround so that API
could be properly documented, but is no longer necessary.cd506a937e44f -
Internal change to how typography is applied. There should be no visual change.d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.b6435f7c8d0d -
Internal changes to typography, no visual change.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 → #7384964efd62cdc533 -
SHPLVIII-481: Assign name to default export components to fix quick-fix imports427c2dd9e0d6 -
[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 1pxdf6d526f3c8 - Removed
all remaining legacy theming logic from the TextField component.6900f89eb0e - Internal
changes to use space tokens. There is no expected visual or behaviour change.3c114ea4257 - Update
type definitions to conform to inherited changes from @types/react@16.14.15.4ae083a7e66 - Use
@af/accessibility-testing for default jest-axe config and jest-axe import in accessibility
testing.a90730ddb33 - Disallow
use of unused prop disabled. Disabled textfields should use isDisabled. This change includes a
codemod for transitioning existing code over to the proper usage.774ed69ecef - Internal
changes to use space tokens for spacing values. There is no visual change.c9c3a3f43af - [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.b8841384da6 - 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.acf974e717c - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.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.19d72473dfb - 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.#13302
78ba9e045b8 - Internal
refactor to align to the design system techstack.
4d34d35270e -
Instrumented text field 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.
af4bca32ad4 - Internal
changes to supress eslint rules.ac656b4875e - Internal
style refactor with no visual change.a7d1415e5e6 - [ux] add
high contrast mode supporting for Textfield6f0bbf09744 - [ux] Fix
disabled TextField text contrast on Safari/WebKit browsersd6f7ff383cf - Updates
to development dependency storybook-addon-performance79c23df6340 - Use
injected package name and version for analytics instead of version.json.Summary
The goal of this major for TextField is to improve the component's performance, by both reducing static structure and avoiding unnecessary function calls.
Changes
In this version we improved the performance of TextField by making it more similar to a native
input field and removing the slow theme prop.
Theming
The theme prop allows you to customize the appearance of TextField. Theming was previously
used to customize the container div and input element styling in TextField. We found that there
was minimal usage of this API and it was identified to have a negative performance impact
regardless of whether it was used.
We decided to remove this API to benefit all consumers of TextField. If you would like to
continue customizing TextField we have added data attributes (data-ds--text-field--container and
data-ds--text-field--input) to both container div and input element of TextField. Therefore
consumers can use this if they want to override style of respective element in TextField. For
example,
import React from 'react';
import { css } from '@emotion/core';
import { TextField } from '@atlaskit/textfield';
export default function CustomStyleExample() {
return (
<TextField
css={{
padding: 5,
border: '2px solid orange',
'& > [data-ds--text-field--input]': {
fontSize: 20,
border: '2px solid green',
},
}}
/>
);
}
You can also override CSS using className and data-attributes in TextField.
// component
import React from 'react';
import { TextField } from '@atlaskit/textfield';
import './styles.css';
export default () => {
return (
<TextField
width="large"
className='myClass'
/>
);
};
// styles.css
.myClass [data-ds--text-field--container] {
border: 2px solid orange;
padding: 5px;
}
.myClass [data-ds--text-field--input] {
border: 2px solid green;
font-size: 20px;
};
Note that TextField still supports the light mode / dark mode global token. Along with this
change we have removed the exports ThemeProps, ThemeTokens and Theme from TextField as
they can no longer be used with the removal of theme.
TextField
are applied using CSS selectors.TextField and TextFieldProps. These exports
ThemeProps, ThemeTokens and Theme have now been removed.There is a codemod that assists you in upgrading most of the changes from above. However, a manual step is still required to override styles via data attributes.
theme and overrides prop.ThemeProps, ThemeTokens and Theme.
# You first need to have the latest `TextField` installed before you can run the codemod
`yarn upgrade @atlaskit/textfield@^5.0.0`
# Run the codemod cli
# Pass in a parser for your codebase
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.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working6529a49064 - Removed
IE11 and outdated browser-prefixed styles targeting the placeholder attribute#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.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/39534088c636cbd - Updated
disabled state border-color to match the ADG spec. It now appears as if there is no border on a
disabled textfield.54a9514fcf - Build and
supporting files will no longer be published to npm83f4f94df3 - Change
imports to comply with Atlassian conventions- Updated dependencies[patch]91a1eb05db:
Textfield now exports its props as TextFieldProps- Updated dependencies eaad41d56c:
Updated dependencies c12ba5eb3e:
Updated dependencies 0603860c07:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]24865cfaff:
Form has been converted to Typescript. TypeScript consumers will now get static type safety. Flow types are no longer provided. No API changes.- [patch]24865cfaff:
Added name prop to component prop types.- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[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]9638c553c0:
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]d5def52d98:
Refactored textfield styles to better support border-box being set globally.
[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]708028db86:
Change all the imports to theme in Core to use multi entry points
[major]84887b940c:
<input> elementisHovered and isFocused from public API as they previously did not do anything[patch]2fe6e8fbdf:
Removed unused dependencies from package.json for textfield: @emotion/core was unused.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[major]7c17b35107:
[major]6cdf11238d:
[patch]7157a95389:
[patch]a28eb04426:
[patch]e0797c2937:
[minor]8eff47cacb:
[minor]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.
[minor]e9b824bf86:
theme prop. The type of this prop remains as
(ThemeTokens, ThemeProps) => ThemeTokens.
ThemeTokens has changed. container and input keys are now required. The
value of these keys are style objects.type ThemeTokens = {
- backgroundColor: string
- backgroundColorFocus: string
- backgroundColorHover: string
- borderColor: string
- borderColorFocus: string
- textColor: string
- disabledTextColor: string
- placeholderTextColor: string
+ container: Object,
+ input: Object
}
type ThemeProps = {
appearance: ThemeAppearance,
mode: 'dark' | 'light',
+ isDisabled: boolean,
+ isFocused: boolean,
+ isHovered: boolean,
+ isInvalid: boolean,
+ isMonospaced: boolean,
+ isCompact: boolean,
+ width?: string | number,
};
[patch]3d8322bd71:
[patch]63f969d:
[patch]480a57c:
[minor]62109bd: