@atlaskit/form 8.11.3 → 8.11.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.11.5
+
+### Patch Changes
+
+- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
+## 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

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'

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.3",
+	"version": "8.11.5",
 	"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'

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.3",
+	"version": "8.11.5",
 	"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'

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.3",
+	"version": "8.11.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.3",
+  "version": "8.11.5",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -64,19 +64,19 @@
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/calendar": "^13.1.0",
     "@atlaskit/checkbox": "^12.6.0",
-    "@atlaskit/datetime-picker": "^12.5.0",
+    "@atlaskit/datetime-picker": "^12.6.0",
     "@atlaskit/docs": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.9.0",
     "@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",
+    "@atlaskit/select": "^16.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.6.0",
-    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/textarea": "^4.7.0",
+    "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
@@ -106,7 +106,8 @@
       "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ],
       "theming": [
         "react-context"