@atlaskit/form 8.11.2 → 8.11.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.11.4
+
+### Patch Changes
+
+- [`49b08bfdf5f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/49b08bfdf5f) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
+## 8.11.3
+
+### Patch Changes
+
+- [`e8dbb0a281b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e8dbb0a281b) - add a11y support for alert messages
+
 ## 8.11.2
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -13,15 +13,13 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _constants = require("@atlaskit/theme/constants");
 var _form = require("./form");
 var _label = _interopRequireDefault(require("./label"));
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
 var fieldWrapperStyles = (0, _react2.css)({
-  marginTop: gridSize
+  marginTop: "var(--ds-space-100, 8px)"
 });
 function isEvent(event) {
   return Boolean(event && event.target);

package/dist/cjs/fieldset.js

@@ -12,7 +12,6 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
 var fontFamily = (0, _constants.fontFamily)();
-var gridSize = (0, _constants.gridSize)();
 var fieldsetLabelStyles = (0, _react.css)({
   display: 'inline-block',
   marginTop: 0,
@@ -20,7 +19,7 @@ var fieldsetLabelStyles = (0, _react.css)({
   fontFamily: "".concat(fontFamily)
 });
 var fieldSetStyles = (0, _react.css)({
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 
 /**

package/dist/cjs/form-header.js

@@ -10,19 +10,18 @@ var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
-var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var formHeaderContentStyles = (0, _react.css)({
   minWidth: '100%',
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 var formHeaderDescriptionStyles = (0, _react.css)({
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 var formHeaderTitleStyles = (0, _react.css)({
   marginTop: 0,
-  marginRight: "".concat(gridSize * 4, "px"),
-  lineHeight: "".concat(gridSize * 4, "px"),
+  marginRight: "var(--ds-space-400, 32px)",
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/cjs/label.js

@@ -12,11 +12,10 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
 var fontFamily = (0, _constants.fontFamily)();
-var gridSize = (0, _constants.gridSize)();
 var labelStyles = (0, _react.css)({
   display: 'inline-block',
   marginTop: 0,
-  marginBottom: gridSize / 2,
+  marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
 

package/dist/cjs/messages.js

@@ -24,7 +24,6 @@ var _field = require("./field");
  * Public API of the various message components.
  */
 
-var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -41,7 +40,7 @@ var darkH200Styles = (0, _react2.css)((0, _typography.h200)({
 }));
 var messageStyles = (0, _react2.css)({
   display: 'flex',
-  marginTop: "".concat(gridSize * 0.5, "px"),
+  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
@@ -98,7 +97,8 @@ var Message = function Message(_ref2) {
   return (0, _react2.jsx)("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
 };
 

package/dist/cjs/required-asterisk.js

@@ -9,10 +9,9 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
-var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var requiredIndicatorStyles = (0, _react.css)({
-  paddingLeft: "".concat(gridSize / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   fontFamily: fontFamily
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.2",
+	"version": "8.11.4",
 	"sideEffects": false
 }

package/dist/es2019/field.js

@@ -3,13 +3,11 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState } from
 import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { FormContext, IsDisabledContext } from './form';
 import Label from './label';
 import RequiredAsterisk from './required-asterisk';
-const gridSize = getGridSize();
 const fieldWrapperStyles = css({
-  marginTop: gridSize
+  marginTop: "var(--ds-space-100, 8px)"
 });
 function isEvent(event) {
   return Boolean(event && event.target);

package/dist/es2019/fieldset.js

@@ -3,10 +3,9 @@
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
-const gridSize = getGridSize();
 const fieldsetLabelStyles = css({
   display: 'inline-block',
   marginTop: 0,
@@ -14,7 +13,7 @@ const fieldsetLabelStyles = css({
   fontFamily: `${fontFamily}`
 });
 const fieldSetStyles = css({
-  marginTop: `${gridSize}px`
+  marginTop: "var(--ds-space-100, 8px)"
 });
 
 /**

package/dist/es2019/form-header.js

@@ -2,21 +2,20 @@
 
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
-const gridSize = getGridSize();
 const fontFamily = getFontFamily();
 const formHeaderContentStyles = css({
   minWidth: '100%',
-  marginTop: `${gridSize}px`
+  marginTop: "var(--ds-space-100, 8px)"
 });
 const formHeaderDescriptionStyles = css({
-  marginTop: `${gridSize}px`
+  marginTop: "var(--ds-space-100, 8px)"
 });
 const formHeaderTitleStyles = css({
   marginTop: 0,
-  marginRight: `${gridSize * 4}px`,
-  lineHeight: `${gridSize * 4}px`,
+  marginRight: "var(--ds-space-400, 32px)",
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/es2019/label.js

@@ -3,14 +3,13 @@
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
-const gridSize = getGridSize();
 const labelStyles = css({
   display: 'inline-block',
   marginTop: 0,
-  marginBottom: gridSize / 2,
+  marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
 

package/dist/es2019/messages.js

@@ -6,7 +6,7 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
 
@@ -18,7 +18,6 @@ import { FieldId } from './field';
  * Public API of the various message components.
  */
 
-const gridSize = getGridSize();
 const fontFamily = getFontFamily();
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -35,7 +34,7 @@ const darkH200Styles = css(h200({
 }));
 const messageStyles = css({
   display: 'flex',
-  marginTop: `${gridSize * 0.5}px`,
+  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: `${fontFamily}`,
   fontWeight: 'normal'
@@ -94,7 +93,8 @@ const Message = ({
   return jsx("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/es2019/required-asterisk.js

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 const fontFamily = getFontFamily();
 const requiredIndicatorStyles = css({
-  paddingLeft: `${gridSize / 4}px`,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: `var(--ds-text-danger, ${R400})`,
   fontFamily
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.2",
+	"version": "8.11.4",
 	"sideEffects": false
 }

package/dist/esm/field.js

@@ -8,13 +8,11 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState } from
 import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { FormContext, IsDisabledContext } from './form';
 import Label from './label';
 import RequiredAsterisk from './required-asterisk';
-var gridSize = getGridSize();
 var fieldWrapperStyles = css({
-  marginTop: gridSize
+  marginTop: "var(--ds-space-100, 8px)"
 });
 function isEvent(event) {
   return Boolean(event && event.target);

package/dist/esm/fieldset.js

@@ -3,10 +3,9 @@
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
-var gridSize = getGridSize();
 var fieldsetLabelStyles = css({
   display: 'inline-block',
   marginTop: 0,
@@ -14,7 +13,7 @@ var fieldsetLabelStyles = css({
   fontFamily: "".concat(fontFamily)
 });
 var fieldSetStyles = css({
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 
 /**

package/dist/esm/form-header.js

@@ -2,21 +2,20 @@
 
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';
-var gridSize = getGridSize();
 var fontFamily = getFontFamily();
 var formHeaderContentStyles = css({
   minWidth: '100%',
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 var formHeaderDescriptionStyles = css({
-  marginTop: "".concat(gridSize, "px")
+  marginTop: "var(--ds-space-100, 8px)"
 });
 var formHeaderTitleStyles = css({
   marginTop: 0,
-  marginRight: "".concat(gridSize * 4, "px"),
-  lineHeight: "".concat(gridSize * 4, "px"),
+  marginRight: "var(--ds-space-400, 32px)",
+  lineHeight: "var(--ds-font-lineHeight-500, 32px)",
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/esm/label.js

@@ -3,14 +3,13 @@
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
-var gridSize = getGridSize();
 var labelStyles = css({
   display: 'inline-block',
   marginTop: 0,
-  marginBottom: gridSize / 2,
+  marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
 

package/dist/esm/messages.js

@@ -6,7 +6,7 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
 
@@ -18,7 +18,6 @@ import { FieldId } from './field';
  * Public API of the various message components.
  */
 
-var gridSize = getGridSize();
 var fontFamily = getFontFamily();
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -35,7 +34,7 @@ var darkH200Styles = css(h200({
 }));
 var messageStyles = css({
   display: 'flex',
-  marginTop: "".concat(gridSize * 0.5, "px"),
+  marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
@@ -92,7 +91,8 @@ var Message = function Message(_ref2) {
   return jsx("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/esm/required-asterisk.js

@@ -1,11 +1,10 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 var fontFamily = getFontFamily();
 var requiredIndicatorStyles = css({
-  paddingLeft: "".concat(gridSize / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   fontFamily: fontFamily
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.11.2",
+	"version": "8.11.4",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.2",
+  "version": "8.11.4",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -70,7 +70,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.5.0",
-    "@atlaskit/radio": "^5.5.0",
+    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.2.0",