Form
Form package provides layout & validation for form fields.
Installation
yarn add @atlaskit/form
Usage
Detailed docs and example usage can be found here.
A form allows users to input information.
Form package provides layout & validation for form fields.
yarn add @atlaskit/form
Detailed docs and example usage can be found here.
2e9c49d200b1d
-
Added resetFieldState to Form children props27fa43b33e35e
-
Add optional testId prop that applies a data-testid attribute to the underlying form element281cc603f5925
-
Improve typing within checkbox field020fb99d98aff
-
Simplified screenreader logic for message components when MessageWrapper is presentc22bdb7c0b0f8
-
[ux] Added support for focusing error fields containing react-select when submitting with errors84cea20e778c3
-
We are testing removing spread props for range field behind a feature flag. If this fix is
successful it will be implemented in a later release.c247b696ec62a
-
We are testing removing spread props for checkbox field behind a feature flag. If this fix is
successful it will be implemented in a later release.543068f818b30
-
Remove unused internal invariant for the field component.07de46497864a
-
We are testing a new way to render the Form component behind a feature flag. Rendering a Form
component with direct JSX elements instead of a function as children
will render an HTML form
element internally, reducing the boilerplate required for most use cases. If this fix is
successful it will be available in a later release.a32c90b3928be
-
We are testing a fix to message components behind a feature flag. There was an issue with messages
that made them not announce when using screenreaders, this has been fixed by adding a slight delay
to render message content. If this fix is successful it will be available in a later release.67eaf0a522c17
-
Update internal css usage from compiled/react to atlaskit/css1a88e6e2601ae
-
Migrated usage of renamed/deprecated icons971d04b4835b3
-
Remove React.FC from all form components.3d97095c489a5
-
Internal change to align styling solutions.08019848e3eab
-
Refreshed "issue" terminology.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/react4660ec858a305
-
Update React
from v16 to v185255a1a097bad
-
Update dependencies and remove unused internal exports.9f62ecec4d422
-
Update dependencies.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/859450cbe9dbf8ff
-
Upgrade from react-router-dom v4 to v6.b27dba8a5f3cd
-
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-select34d8c0a75098e
-
[ux] accessibility improvements to the error validation778c15c1d279a
-
[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.3as well as to have a consistent peer
dependency range for
reactand
react-domfor
/platform` packages.
f9641d1cfa4bd
-
Remove remnants of extract-react-types
.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.cb7514abb833
-
Typography tokens for form labels.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.4922acfee53b
-
Typography tokens for RequiredAsterisk.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.8d4e99057fe0
-
Upgrade Typescript from 4.9.5
to 5.4.2
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.a23882ab49f8
-
Upgrade depdendency final-form
for bugfix.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 Windows02b609f1447
- Form now
onboarded onto the product push model for Jira.7c7704ad529
- 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.e8dbb0a281b
- add a11y
support for alert messages9d00501a414
- Ensure
legacy types are published for TS 4.5-4.841fae2c6f68
- Upgrade
Typescript from 4.5.5
to 4.9.5
56507598609
- Skip
minor dependency bumpc71b0ac8222
- Added
testId prop to the Field component for better testing.eb179f0c089
- Migrates
unit tests from enzyme to RTL.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-utilse0460d5d989
- Usages
of process
are now guarded by a typeof
check.1c6c493447f
- [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.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:
error
fieldId
valid
b96e69cdf36
- [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.8cc2f888c83
- Upgrade
Typescript from 4.3.5
to 4.5.5
#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
8d4228767b0
- Upgrade
Typescript from 4.2.4
to 4.3.5
.f2b8ca863a0
- [ux]
Updates to slightly darken fallback colors for field messagescb2392f6d33
- Upgrade
to TypeScript 4.2.4c987bb60a89
- 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"c55c736ecea
- Patch
VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489f460cc7c411
- Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.2cf338dd802
- Added
homepage to package.json34282240102
- Adds
explicit type to button usages components.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.378d1cef00f
- Bump
@atlaskit/theme
to version ^11.3.0
.c50a63f9f72
- Upgrade
@types/react-select
to v3.1.2
and fix type breaks5af85edf960
- Internal
code style change of default exportsfa4256f9b0
- 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
.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.6360c46009
- Reenable
integration tests for Edge browser741e4240d0
- 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/395342e4000e57b
- Form now
fully supports object and array field names.fc690a7dd4
-
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:
[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:
[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:
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[minor]32c55df1d2:
Add align prop for FormFooter
[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]ecca4d1dbb:
Upgraded Typescript to 3.3.x
[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]de35ce8c67:
Updates component maintainers
[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]4615439434:
index.ts will now be ignored when publishing to npm
[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 Field
s.[patch]e6d3f57:
[patch][c8d935f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/c8d935f" d):