Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/textfield

atlassian185.4kApache-2.08.0.7TypeScript support: included

A text field is an input that allows a user to write or edit text.

atlaskit, react, ui

readme

Textfield

A text field is an input that allows a user to write or edit text.

Installation

yarn add @atlaskit/textfield

Usage

Detailed docs and example usage can be found here.

changelog

@atlaskit/textfield

8.0.7

Patch Changes

  • Updated dependencies

8.0.6

Patch Changes

  • Updated dependencies

8.0.5

Patch Changes

  • #156306 fce9f0b8cd381 - [ux] Applies visible focus only when the text input is actively focused, instead of any focusable elements rendered via elemBeforeInput or elemAfterInput.

8.0.4

Patch Changes

  • #129972 b2d69a39e6687 - Update @compiled/react dependency for improved type checking support.
  • Updated dependencies

8.0.3

Patch Changes

8.0.2

Patch Changes

8.0.1

Patch Changes

  • Updated dependencies

8.0.0

Major Changes

Patch Changes

  • Updated dependencies

7.0.0

Major Changes

  • #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.

6.8.3

Patch Changes

  • Updated dependencies

6.8.2

Patch Changes

  • Updated dependencies

6.8.1

Patch Changes

  • Updated dependencies

6.8.0

Minor Changes

Patch Changes

  • Updated dependencies

6.7.2

Patch Changes

6.7.1

Patch Changes

  • Updated dependencies

6.7.0

Minor Changes

  • #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.

6.6.0

Minor Changes

  • #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.

6.5.5

Patch Changes

  • #166026 962b5e77810fb - Adds side-effect config to support Compiled css extraction in third-party apps

6.5.4

Patch Changes

  • Updated dependencies

6.5.3

Patch Changes

  • #143559 56dfbfe361f96 - Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select

6.5.2

Patch Changes

  • Updated dependencies

6.5.1

Patch Changes

  • Updated dependencies

6.5.0

Minor Changes

  • #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.

Patch Changes

  • Updated dependencies

6.4.3

Patch Changes

  • Updated dependencies

6.4.2

Patch Changes

  • #119154 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.

6.4.1

Patch Changes

  • #116025 cd506a937e44f - Internal change to how typography is applied. There should be no visual change.

6.4.0

Minor Changes

  • #111016 d131599730792 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

Patch Changes

  • Updated dependencies

6.3.1

Patch Changes

  • #97073 b6435f7c8d0d - Internal changes to typography, no visual change.
  • Updated dependencies

6.3.0

Minor Changes

  • #94675 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 → #738496

Patch Changes

  • Updated dependencies

6.2.0

Minor Changes

6.1.3

Patch Changes

  • #83130 4efd62cdc533 - SHPLVIII-481: Assign name to default export components to fix quick-fix imports

6.1.2

Patch Changes

6.1.1

Patch Changes

6.1.0

Minor Changes

  • #80805 427c2dd9e0d6 - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast

Patch Changes

  • Updated dependencies

6.0.1

Patch Changes

6.0.0

Major Changes

  • #42569 df6d526f3c8 - Removed all remaining legacy theming logic from the TextField component.

5.6.8

Patch Changes

5.6.7

Patch Changes

  • #39787 6900f89eb0e - Internal changes to use space tokens. There is no expected visual or behaviour change.

5.6.6

Patch Changes

5.6.5

Patch Changes

  • #39128 3c114ea4257 - Update type definitions to conform to inherited changes from @types/react@16.14.15.

5.6.4

Patch Changes

5.6.3

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

5.6.2

Patch Changes

5.6.1

Patch Changes

5.6.0

Minor Changes

  • #35766 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.

5.5.2

Patch Changes

5.5.1

Patch Changes

  • #34881 774ed69ecef - Internal changes to use space tokens for spacing values. There is no visual change.

5.5.0

Minor Changes

  • #33167 c9c3a3f43af - [ux] reduce border width to 1px and update fallback color of border

5.4.3

Patch Changes

  • #34051 49b08bfdf5f - Migrated use of gridSize to space tokens where possible. There is no expected visual or behaviour change.

5.4.2

Patch Changes

5.4.1

Patch Changes

5.4.0

Minor Changes

Patch Changes

  • Updated dependencies

5.3.7

Patch Changes

  • #33004 e028bee17df - [ux] fix(style): update fallback color of placeholder to meet contrast requirement

5.3.6

Patch Changes

  • Updated dependencies

5.3.5

Patch Changes

  • Updated dependencies

5.3.4

Patch Changes

  • Updated dependencies

5.3.3

Patch Changes

  • Updated dependencies

5.3.2

Patch Changes

  • Updated dependencies

5.3.1

Patch Changes

  • #26303 9827dcb82b8 - No-op change to introduce spacing tokens to design system components.

5.3.0

Minor Changes

  • #24968 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.

5.2.2

Patch Changes

  • #25314 bedbdec0e82 - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.

5.2.1

Patch Changes

5.2.0

Minor Changes

  • #24004 acf974e717c - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

Patch Changes

  • Updated dependencies

5.1.13

Patch Changes

5.1.12

Patch Changes

5.1.11

Patch Changes

  • Updated dependencies

5.1.10

Patch Changes

5.1.9

Patch Changes

  • Updated dependencies

5.1.8

Patch Changes

  • #19618 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.
  • Updated dependencies

5.1.7

Patch Changes

  • Updated dependencies

5.1.6

Patch Changes

  • #16752 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • Updated dependencies

5.1.5

Patch Changes

  • Updated dependencies

5.1.4

Patch Changes

  • #15998 f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

5.1.3

Patch Changes

  • Updated dependencies

5.1.2

Patch Changes

  • Updated dependencies

5.1.1

Patch Changes

  • Updated dependencies

5.1.0

Minor Changes

  • #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.

Patch Changes

  • af4bca32ad4 - Internal changes to supress eslint rules.
  • ac656b4875e - Internal style refactor with no visual change.
  • Updated dependencies

5.0.5

Patch Changes

5.0.4

Patch Changes

  • #12328 a7d1415e5e6 - [ux] add high contrast mode supporting for Textfield
  • Updated dependencies

5.0.3

Patch Changes

  • #11649 6f0bbf09744 - [ux] Fix disabled TextField text contrast on Safari/WebKit browsers

5.0.2

Patch Changes

5.0.1

Patch Changes

  • #8644 79c23df6340 - Use injected package name and version for analytics instead of version.json.

5.0.0

Major Changes

  • #7170 9d0f54a809

    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.

    Other changes

    • Previously all interaction styles were generated in JavaScript using events, causing unnecessary and slow re-renders for actions like hovering and focusing. Now all styles for the TextField are applied using CSS selectors.
    • Updated the entry point to only export TextField and TextFieldProps. These exports ThemeProps, ThemeTokens and Theme have now been removed.

    Automatic upgrading

    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.

    • Removes theme and overrides prop.
    • Removes imports of 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]

4.0.10

Patch Changes

4.0.9

Patch Changes

  • #5497 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.

4.0.8

Patch Changes

  • Updated dependencies

4.0.7

Patch Changes

  • #5164 2ac834240e - Undo analytics-next file restructure to allow external ts definitions to continue working

4.0.6

Patch Changes

  • #4749 6529a49064 - Removed IE11 and outdated browser-prefixed styles targeting the placeholder attribute
  • Updated dependencies

4.0.5

Patch Changes

4.0.4

Patch Changes

  • #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.

4.0.3

Patch Changes

4.0.2

Patch Changes

  • #3823 e99262c6f0 - All form elements now have a default font explicitly set

4.0.1

Patch Changes

  • #3293 954cc87b62 - The readme and package information has been updated to point to the new design system website.

4.0.0

Major Changes

Patch Changes

  • Updated dependencies

3.1.13

Patch Changes

  • #2763 088c636cbd - Updated disabled state border-color to match the ADG spec. It now appears as if there is no border on a disabled textfield.

3.1.12

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

3.1.11

Patch Changes

  • Updated dependencies

3.1.10

Patch Changes

  • #1868 83f4f94df3 - Change imports to comply with Atlassian conventions- Updated dependencies

3.1.9

Patch Changes

3.1.8

Patch Changes

3.1.7

Patch Changes

3.1.6

Patch Changes

3.1.5

Patch Changes

3.1.4

Patch Changes

3.1.3

Patch Changes

  • [patch]557a8e2451:

    Rebuilds package to fix typescript typing error.

3.1.2

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

3.1.1

Patch Changes

  • [patch]a2d0043716:

    Updated version of analytics-next to fix potential incompatibilities with TS 3.6

3.1.0

Minor Changes

  • [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.

3.0.7

Patch Changes

  • [patch]d5def52d98:

    Refactored textfield styles to better support border-box being set globally.

3.0.6

3.0.5

Patch 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

3.0.4

Patch Changes

3.0.3

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

3.0.2

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

3.0.1

3.0.0

Major Changes

  • [major]84887b940c:

    • Converting from flow to typescript 🎉
    • Correctly typing the current prop spreading onto the internal <input> element
    • Removing isHovered and isFocused from public API as they previously did not do anything

2.0.5

Patch Changes

  • [patch]2fe6e8fbdf:

    Removed unused dependencies from package.json for textfield: @emotion/core was unused.

2.0.4

Patch Changes

  • [patch]9f8ab1084b:

    Consume analytics-next ts type definitions as an ambient declaration.

2.0.3

2.0.2

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

2.0.1

2.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

1.0.0

  • [major]6cdf11238d:

    • This major release indicates that this package is no longer under dev preview but is ready for use

0.4.5

  • [patch]7157a95389:

    • Internal changes only. Textfield is compatible with SSR.

0.4.4

0.4.3

0.4.2

  • [patch]a28eb04426:

    • Migrates package from emotion 9 to emotion 10. No behaviour or API changes.

0.4.1

  • [patch]e0797c2937:

    • Support object refs e.g. React.createRef()

0.4.0

  • [minor]8eff47cacb:

    • Allow element before and/or after input

0.3.1

0.3.0

  • [minor]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    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.

0.2.0

  • [minor]e9b824bf86:

    • Breaking: Changes to the theme prop. The type of this prop remains as (ThemeTokens, ThemeProps) => ThemeTokens.
      • The shape of ThemeTokens has changed. container and input keys are now required. The value of these keys are style objects.
      • More information has been added to ThemeProps.
    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,
};

0.1.6

  • [patch]3d8322bd71:

    • Trival refactor: update a variable name

0.1.5

0.1.4

0.1.3

  • [patch]63f969d:

    • Fixed height of compact textfields to correctly be 32px instead of 28px

0.1.2

  • [patch]480a57c:

    • Convert to use new theme API.

0.1.1

0.1.0

  • [minor]62109bd:

    • Refactor of field-text to remove field-base and normalise along api patterns established in other form components.