@atlaskit/form 8.8.8 → 8.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/form
 
+## 8.9.0
+
+### Minor Changes
+
+- [`824851f3580`](https://bitbucket.org/atlassian/atlassian-frontend/commits/824851f3580) - [ux] Gives added affordance to sighted users to get information on meaning of asterisk symbol on required fields.
+
+### Patch Changes
+
+- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
+
 ## 8.8.8
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -13,22 +13,16 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _colors = require("@atlaskit/theme/colors");
 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 fontFamily = (0, _constants.fontFamily)();
 var fieldWrapperStyles = (0, _react2.css)({
   marginTop: gridSize
 });
-var requiredIndicatorStyles = (0, _react2.css)({
-  paddingLeft: "".concat(gridSize / 4, "px"),
-  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
-  fontFamily: fontFamily
-});
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -265,10 +259,7 @@ function Field(props) {
   }, props.label && (0, _react2.jsx)(_label.default, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label")
-  }, props.label, props.isRequired && (0, _react2.jsx)("span", {
-    css: requiredIndicatorStyles,
-    "aria-hidden": "true"
-  }, "*"), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
+  }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/index.js

@@ -64,6 +64,12 @@ Object.defineProperty(exports, "RangeField", {
     return _rangeField.default;
   }
 });
+Object.defineProperty(exports, "RequiredAsterisk", {
+  enumerable: true,
+  get: function get() {
+    return _requiredAsterisk.default;
+  }
+});
 Object.defineProperty(exports, "ValidMessage", {
   enumerable: true,
   get: function get() {
@@ -85,4 +91,5 @@ var _checkboxField = _interopRequireDefault(require("./checkbox-field"));
 var _rangeField = _interopRequireDefault(require("./range-field"));
 var _label = _interopRequireDefault(require("./label"));
 var _messages = require("./messages");
-var _fieldset = _interopRequireDefault(require("./fieldset"));
+var _fieldset = _interopRequireDefault(require("./fieldset"));
+var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));

package/dist/cjs/required-asterisk.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RequiredAsterisk;
+var _react = require("@emotion/react");
+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"),
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  fontFamily: fontFamily
+});
+function RequiredAsterisk() {
+  return (0, _react.jsx)("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": "true",
+    title: "required"
+  }, "*");
+}

package/dist/cjs/version.json

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

package/dist/es2019/field.js

@@ -3,20 +3,14 @@ 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 { R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+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 fontFamily = getFontFamily();
 const fieldWrapperStyles = css({
   marginTop: gridSize
 });
-const requiredIndicatorStyles = css({
-  paddingLeft: `${gridSize / 4}px`,
-  color: `var(--ds-text-danger, ${R400})`,
-  fontFamily
-});
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -248,10 +242,7 @@ export default function Field(props) {
   }, props.label && jsx(Label, {
     htmlFor: fieldId,
     id: `${fieldId}-label`
-  }, props.label, props.isRequired && jsx("span", {
-    css: requiredIndicatorStyles,
-    "aria-hidden": "true"
-  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
+  }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/es2019/index.js

@@ -8,4 +8,5 @@ export { default as RangeField } from './range-field';
 export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
+export { default as RequiredAsterisk } from './required-asterisk';
 // eslint-disable-next-line import/no-unresolved

package/dist/es2019/required-asterisk.js

@@ -0,0 +1,18 @@
+/** @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();
+const fontFamily = getFontFamily();
+const requiredIndicatorStyles = css({
+  paddingLeft: `${gridSize / 4}px`,
+  color: `var(--ds-text-danger, ${R400})`,
+  fontFamily
+});
+export default function RequiredAsterisk() {
+  return jsx("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": "true",
+    title: "required"
+  }, "*");
+}

package/dist/es2019/version.json

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

package/dist/esm/field.js

@@ -8,20 +8,14 @@ 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 { R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+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 fontFamily = getFontFamily();
 var fieldWrapperStyles = css({
   marginTop: gridSize
 });
-var requiredIndicatorStyles = css({
-  paddingLeft: "".concat(gridSize / 4, "px"),
-  color: "var(--ds-text-danger, ".concat(R400, ")"),
-  fontFamily: fontFamily
-});
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -257,10 +251,7 @@ export default function Field(props) {
   }, props.label && jsx(Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label")
-  }, props.label, props.isRequired && jsx("span", {
-    css: requiredIndicatorStyles,
-    "aria-hidden": "true"
-  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
+  }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/esm/index.js

@@ -8,4 +8,5 @@ export { default as RangeField } from './range-field';
 export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
+export { default as RequiredAsterisk } from './required-asterisk';
 // eslint-disable-next-line import/no-unresolved

package/dist/esm/required-asterisk.js

@@ -0,0 +1,18 @@
+/** @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();
+var fontFamily = getFontFamily();
+var requiredIndicatorStyles = css({
+  paddingLeft: "".concat(gridSize / 4, "px"),
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
+  fontFamily: fontFamily
+});
+export default function RequiredAsterisk() {
+  return jsx("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": "true",
+    title: "required"
+  }, "*");
+}

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -13,4 +13,5 @@ export { default as Label } from './label';
 export type { LabelProps } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
+export { default as RequiredAsterisk } from './required-asterisk';
 export type { OnSubmitHandler, FormApi } from './types';

package/dist/types/required-asterisk.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function RequiredAsterisk(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.8.8",
+  "version": "8.9.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -278,6 +278,9 @@ export interface RangeFieldProps {
 // @public (undocumented)
 type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 
+// @public (undocumented)
+export function RequiredAsterisk(): jsx.JSX.Element;
+
 // @public (undocumented)
 type SupportedElements =
   | HTMLInputElement