Typescript ❤️
A form allows users to input information.
Install
yarn add @atlaskit/formSource
Bundle
Changelog
Latest
12.0.1
Patch Changes
- Updated dependencies
This component is now documented on atlassian.design
Skip to:
A form allows users to input information.
yarn add @atlaskit/form#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/react4660ec858a305 -
Update React from v16 to v185255a1a097bad -
Update dependencies and remove unused internal exports.7dc9e1f2a2cb7 -
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/form, 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](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/859b27dba8a5f3cd -
Update types to improve compatibility with React 18.57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party appsf2ca7201459b1 -
Change react-uid to use ID generator that is compatible with React16 and React 18; Strict React
18 behind a flag.5d414827c3394 -
Removes usages of deprecated CustomThemeButton in favor of the new Button770bc26d556f7 -
Migrate to new icons behind a feature flag56dfbfe361f96 -
Upgrade react-select from 5.4 to 5.8 and replace it with internal atlaskit/react-select778c15c1d279a -
[ux] Removed feature flag platform.design-system-team.form-header-typography-updates_4f1g6 and
platform.design-system-team.form-label-typography-updates feature flags resulting in minor
visual changes to typography.#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.
ff0815316ab38 -
Removes usage of custom theme button in places where its API is not being used and the default
button is able to be used instead. This should give a slight performance (runtime) improvement.f2f51e7a24d00 -
Internal change only. Update typography to use typography tokens.c733254a2dd6e -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.a791a005eaec -
[ux] We are testing a visual change behind a feature flag. The font weight and color of form
labels changes. If this change is successful it will be available in a later release.f60a622d5890 -
FormHeader refactor to follow new typography system behind a feature flag. FormHeader title does
not truncate any more.7a11b97d325a -
Add support for React 18 in non-strict mode.34507dd83e5e -
Typography changes to form section titles. Form section titles don't truncate content anymore.e241d0c95e65 -
Typography tokenisation and improvements for form messages.22e0fd4f6694 -
Move the onBlur event from the input to the input container in DatePicker. Add the type
aria-describedby in to Field component.4c87d9b4f0c2 -
The internal composition of this component has changed. There is no expected change in behavior.03e4aaa5a468 -
Adds ability to subscribe to form state using the useFormState hook. This can be helpful in
situations such as forms with conditional fields, or for previewing a form response.
Read the docs here.8eba69714ea6 -
The internal composition of this component has changed. There is no expected change in behaviour.2f37600156ae -
The internal composition of a component in this package has changed. There is no expected change
in behaviour.57a79a328287 -
Revert the solution with the hidden span in the Label which was merged in scope of DST-11061.b9826ea49c47 -
Update dependencies that were impacted by HOT-106483 to latest.f12e489f23b0 -
Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).536478cdcf0b -
Updated Form messages to have a small gap between the icon and message text.ec7c2a38247 - Removed
all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and
InlineMessage components.07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windows7c7704ad529 - Imports
from @atlaskit/form/Messages will no longer pull react-final-form and Field in the bundle.85935c8cde4 - [ux]
Denoting live region of form messages using aria-live attribute instead of alert role.421b74bf0f9 - Combines
stylings of label and legend for simpler maintenance.215b4b5df50 - Removes
redundant label from legend in fieldset.ddb4e858a79 - Removes
usage of deprecated theme mixins in favor of static token / color usage.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.b1bdec7cce2 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.49b08bfdf5f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.56507598609 - Skip
minor dependency bumpc71b0ac8222 - Added
testId prop to the Field component for better testing.824851f3580 - [ux]
Gives added affordance to sighted users to get information on meaning of asterisk symbol on
required fields.2e01c9c74b5 - DUMMY
remove before merging to master; dupe adf-schema via adf-utils1c6c493447f - [ux]
Place label and message fields in correct aria attributes.261420360ec - Upgrades
component types to support React 18.74c1b81a476 - Replaces
use of gridSize with space tokens. There is no expected visual change.#28090
1b8e257525f - [ux]
Message content now preserves whitespace between elements.
ea1ad1d867f - Message
typings have been corrected, removing a number of props. These props existed only in the type and
had no effect when used.
The props which were removed from the typings are:
errorfieldIdvalidb96e69cdf36 - [ux]
DSP-6625: Updated Form label text color token to match the design.
f2d39d67a70 - Fixed
the issue where field's value was reset on the component re-mount.500a96aa7de - Add
elementAfterLabel prop to form Field.001c650e983 - Add
ds-lib devDependency. No behaviour change.ae87a1a6d39 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.#24004
0fbb2840aba - Add
isInvalid prop to @atlastkit/Select. The prop indicates whether if the component is in the error
state. If true, it visually shows a red border around the input.
This replaces validationState to make Select more consistent like other components that uses isInvalid prop.
Updated dependencies
f2b8ca863a0 - [ux]
Updates to slightly darken fallback colors for field messagesc987bb60a89 - Exposes
an additional Label component in @atlaskit/form - this component is designed to be wrapped by
the Field component but there are certain use cases that require a Label on its own. This is to
fulfill those use cases.58884c2f6c1 - Internal
code change turning on a new linting rule.19d72473dfb - Updates
usage of deprecated token names so they're aligned with the latest naming conventions. No UI or
visual changes19d72473dfb - Bump
dependency tiny-invariant to latest"f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.b9b3ab10494 - There
was a bug in 8.4.0 where the props in FormSection were not recognized. This has now been fixed.4e3c853e85f - This
change removes the dependency styled-components. It has been refactored to use @emotion/core
instead and entrypoints have been updated. Some examples have also been updated. There should be
no UI or UX change.cf853e39278 - Internal
changes to remove @atlaskit/theme/math usage.4cab1a3d163 - Form is
now instrumented with the new tokens theme implementation. This change is interoperable with the
previous theme implementation.f701489305f - Export
Field directly for types to be exported explicitly.c50a63f9f72 - Upgrade
@types/react-select to v3.1.2 and fix type breaksfa4256f9b0 - Add
getState to FormProps for inspecting internal Form state (errors, values, et al)9552363cb7 - [ux] Added
a RangeField component to address issues surrounding Range having a different interface to other
kinds of inputs. Use a RangeField instead of a Field when using a Range inside of a Form. You must
provide a defaultValue.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.741e4240d0 - Final form
dependencies have been upgraded to their latest versions3773e0ad4e - There was
an issue where the validate function in Field would return an incorrect value or even go
unresponsive when mixing async and sync validators. This has been fixed by updating the version of
final-form. The test that validates this is working has been re-enabled.#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.
6262f382de - Use the
'lodash' package instead of single-function 'lodash.*' packagese99262c6f0 - All form
elements now have a default font explicitly set694fee4dcc - Adding
validating status to meta for async validations, and make sure the default value of error in form
is a stringdb053b24d8 - 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/39534fc690a7dd4 -
HelperMessage, ErrorMessage and ValidMessage now have an optional prop testId that will set the
attribute value data-testid.54a9514fcf - Build and
supporting files will no longer be published to npm56d6259cf5 - Change
FormHeader and FormSection to use h2 and h3 respectively for headings instead of h1 and h2.54d82b49f0 - Remove
unused dependencies[patch]0059d26429:
Change imports to comply with Atlassian conventions- Updated dependencies 62390c4755:
Updated dependencies 3940bd71f1:
Updated dependencies 9e4b195732:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 9a534d6a74:
Updated dependencies 57c0487a02:
Updated dependencies a4acc95793:
Updated dependencies 68ff159118:
Updated dependencies 6efb12e06d:
Updated dependencies fd41d77c29:
Updated dependencies ca494abcd5:
Updated dependencies 7a2540821c:
[minor]294c05bcdf:
Form now exposes a setFieldValue command which enables the ability to imperatively change field
values. For example, if you have an input field whos value is concatinated to the next of the next
input.
[patch]eaad41d56c:
Fixes form typing to a form event - widens the type to allow no event to be passed.- [patch]c12ba5eb3e:
Fixed an ambigous type definition for FormApi- Updated dependencies 116cb9b00f:
Updated dependencies 9e87af4685:
Updated dependencies 0603860c07:
Updated dependencies 91a1eb05db:
Updated dependencies c1992227dc:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[minor]ff32b3db47:
Adds the ability to reset a form to it's default state. This is useful for cases where a user might want to manually clear their information.
[patch]ec76622d34:
Adds missing type definition for name to fieldProps, which are passed down to children components- [patch]d93de8e56e:
Fix clearing for Selects. Fix defaultValue for non-primitive values.- Updated dependencies e20d7996ca:
Updated dependencies 6e55ab88df:
[major]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:
Fix internal use of props.name property which could cause the internal fieldId to be incorrectly
set- Updated dependencies
24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
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]2deee10c17:
Bugfix - DS-6661 - The componentWillUnmount method is not overridden properly in Form component as it has been misspelled as 'componenWillUnmount'.
[patch]5ccdfaeef2:
Fixes bug where onSubmit function in Form may not be called if reference changes
[minor]1f2c548ffa:
Fixes an issue where Select inside a Form would not be clearable
[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
[patch]abee1a5f4f:
Bumping internal dependency (memoize-one) to latest version (5.1.0). memoize-one@5.1.0 has full typescript support so it is recommended that typescript consumers use it also.
[patch]d905cbc0ac:
Adding a condition to check if the component are referenced in tests running in CI. It reduces the noise and help reading the CI log.
[minor]7bbf303d01:
[patch]19bbcb44ed:
[major]7c17b35107:
[patch]cb7ec50eca:
[patch]9b0bdd73c2:
[patch]a1217df379:
[minor]fe7683f9d6:
[patch]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.
[patch]887c85ffdc:
getValues function to it's child render function. The getValues function
returns an object containing the current value of all fields.[patch]0c0f20c9cf:
[patch]a360a3d2b6:
[patch]58e7bc1:
[minor]b36a82f:
[major]647a46f:
Form component must be the source of truth for the form state.
This means you keep track of far less state in your application.Form, Field and CheckboxField components use render props. This was
done to maximise the flexiblity of the what can be rendered inside Form or Fields.[patch]e6d3f57:
[patch][c8d935f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/c8d935f" d):