@atlaskit/share 6.9.0 → 6.11.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/share
 
+## 6.11.0
+
+### Minor Changes
+
+- [#169389](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169389)
+  [`879143e11dc2d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/879143e11dc2d) -
+  [ux] Update share dialog styles for the extended variant
+
+## 6.10.0
+
+### Minor Changes
+
+- [#167224](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/167224)
+  [`198e371fcf6c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/198e371fcf6c7) -
+  We are testing adding `shouldRenderToProp` to Design System dropdown menu and popup components to
+  improve accessibility. If this fix is successful it will be available in a later release.
+
 ## 6.9.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,7 @@
         "declaration": true,
         "target": "es5",
         "composite": true,
-        "outDir": "../dist",
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__share",
         "rootDir": "../"
     },
     "include": [

package/dist/cjs/components/ShareForm.js

@@ -83,6 +83,9 @@ var formFooterStyles = exports.formFooterStyles = (0, _react2.css)({
 var formFieldStyles = (0, _react2.css)({
   marginBottom: "var(--ds-space-150, 12px)"
 });
+var formFieldStylesSpacious = (0, _react2.css)({
+  marginBottom: "var(--ds-space-250, 20px)"
+});
 var integrationWrapperStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center'
@@ -165,11 +168,12 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           source: _analytics.ANALYTICS_SOURCE
         }
       }, (0, _react2.jsx)("form", formProps, showTitle && (0, _react2.jsx)(_ShareHeader.ShareHeader, {
+        isExtendedShareDialogEnabled: isExtendedShareDialogEnabled,
         title: title
       }), !isExtendedShareDialogEnabled && (0, _react2.jsx)("div", {
         css: requiredFieldInfoStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.requiredFieldSummary), (0, _react2.jsx)(_form.RequiredAsterisk, null)), (0, _react2.jsx)("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, isExtendedShareDialogEnabled ? (0, _react2.jsx)(_primitives.Inline, {
         space: "space.100"
       }, (0, _react2.jsx)(_primitives.Box, {
@@ -215,7 +219,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         productAttributes: productAttributes,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled
       })), (0, _react2.jsx)("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, (0, _react2.jsx)(_CommentField.CommentField, {
         defaultValue: defaultValue && defaultValue.comment,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled

package/dist/cjs/components/ShareHeader.js

@@ -21,14 +21,19 @@ var headerWrapperStyles = (0, _primitives.xcss)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'space.400'
 });
+var headerWrapperExtraSpaceStyles = (0, _primitives.xcss)({
+  marginBottom: 'space.200'
+});
 var ShareHeader = exports.ShareHeader = function ShareHeader(_ref) {
-  var title = _ref.title;
+  var isExtendedShareDialogEnabled = _ref.isExtendedShareDialogEnabled,
+    title = _ref.title;
+  var headingSize = isExtendedShareDialogEnabled ? 'medium' : 'small';
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: headerWrapperStyles
+    xcss: [headerWrapperStyles, isExtendedShareDialogEnabled && headerWrapperExtraSpaceStyles]
   }, (0, _platformFeatureFlags.fg)('share-header-accessibility') ? /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "small",
+    size: headingSize,
     as: "h2"
   }, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)) : /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "small"
+    size: headingSize
   }, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)));
 };

package/dist/cjs/components/SplitButton.js

@@ -14,7 +14,7 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _i18n = require("../i18n");
@@ -76,13 +76,18 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
         label: ""
       }, providedProps, {
         ref: triggerRef,
-        icon: _chevronDown.default,
+        icon: function icon(iconProps) {
+          return (0, _react2.jsx)(_chevronDown.default, (0, _extends2.default)({}, iconProps, {
+            size: "small"
+          }));
+        },
         appearance: triggerButtonAppearance
       }));
     },
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-people-and-')
   }, (0, _react2.jsx)(_dropdownMenu.DropdownItemGroup, null, shareIntegrations.map(function (integration) {
     return (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
       key: integration.type,

package/dist/cjs/components/UserPickerField.js

@@ -279,9 +279,13 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
       var UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? _smartUserPicker.default : _userPicker.default;
       var menuPortalTarget = (0, _utils.getMenuPortalTargetCurrentHTML)(selectPortalRef);
       return /*#__PURE__*/_react.default.createElement(_form.Field, {
-        label: /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        label: /*#__PURE__*/_react.default.createElement(_compiled.Text, (0, _extends2.default)({
           id: USER_PICKER_FIELD_LABEL
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
+        }, isExtendedShareDialogEnabled ? {
+          weight: 'bold',
+          size: 'small',
+          color: 'color.text.subtle'
+        } : {}), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
         name: "users",
         validate: !isExtendedShareDialogEnabled ? validate : undefined,
         defaultValue: defaultValue,

package/dist/cjs/components/analytics/analytics.js

@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "6.9.0"
+    packageVersion: "6.11.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/es2019/components/ShareForm.js

@@ -68,6 +68,9 @@ export const formFooterStyles = css({
 const formFieldStyles = css({
   marginBottom: "var(--ds-space-150, 12px)"
 });
+const formFieldStylesSpacious = css({
+  marginBottom: "var(--ds-space-250, 20px)"
+});
 const integrationWrapperStyles = css({
   display: 'flex',
   alignItems: 'center'
@@ -145,11 +148,12 @@ class InternalForm extends React.PureComponent {
           source: ANALYTICS_SOURCE
         }
       }, jsx("form", formProps, showTitle && jsx(ShareHeader, {
+        isExtendedShareDialogEnabled: isExtendedShareDialogEnabled,
         title: title
       }), !isExtendedShareDialogEnabled && jsx("div", {
         css: requiredFieldInfoStyles
       }, jsx(FormattedMessage, messages.requiredFieldSummary), jsx(RequiredAsterisk, null)), jsx("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, isExtendedShareDialogEnabled ? jsx(Inline, {
         space: "space.100"
       }, jsx(Box, {
@@ -195,7 +199,7 @@ class InternalForm extends React.PureComponent {
         productAttributes: productAttributes,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled
       })), jsx("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, jsx(CommentField, {
         defaultValue: defaultValue && defaultValue.comment,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled

package/dist/es2019/components/ShareHeader.js

@@ -14,15 +14,20 @@ const headerWrapperStyles = xcss({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'space.400'
 });
+const headerWrapperExtraSpaceStyles = xcss({
+  marginBottom: 'space.200'
+});
 export const ShareHeader = ({
+  isExtendedShareDialogEnabled,
   title
 }) => {
+  const headingSize = isExtendedShareDialogEnabled ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: headerWrapperStyles
+    xcss: [headerWrapperStyles, isExtendedShareDialogEnabled && headerWrapperExtraSpaceStyles]
   }, fg('share-header-accessibility') ? /*#__PURE__*/React.createElement(Heading, {
-    size: "small",
+    size: headingSize,
     as: "h2"
   }, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)) : /*#__PURE__*/React.createElement(Heading, {
-    size: "small"
+    size: headingSize
   }, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
 };

package/dist/es2019/components/SplitButton.js

@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SplitButton as AKSplitButton, IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N800 } from '@atlaskit/theme/colors';
 import { messages } from '../i18n';
@@ -68,12 +68,15 @@ const SplitButtonDropdown = props => {
       label: ""
     }, providedProps, {
       ref: triggerRef,
-      icon: ChevronDownIcon,
+      icon: iconProps => jsx(ChevronDownIcon, _extends({}, iconProps, {
+        size: "small"
+      })),
       appearance: triggerButtonAppearance
     })),
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-people-and-')
   }, jsx(DropdownItemGroup, null, shareIntegrations.map(integration => jsx(DropdownItem, {
     key: integration.type,
     testId: `split-button-dropdownitem-${integration.type}`

package/dist/es2019/components/UserPickerField.js

@@ -232,9 +232,13 @@ export class UserPickerFieldComponent extends React.Component {
     const UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? SmartUserPicker : UserPicker;
     const menuPortalTarget = getMenuPortalTargetCurrentHTML(selectPortalRef);
     return /*#__PURE__*/React.createElement(Field, {
-      label: /*#__PURE__*/React.createElement(Text, {
+      label: /*#__PURE__*/React.createElement(Text, _extends({
         id: USER_PICKER_FIELD_LABEL
-      }, /*#__PURE__*/React.createElement(FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
+      }, isExtendedShareDialogEnabled ? {
+        weight: 'bold',
+        size: 'small',
+        color: 'color.text.subtle'
+      } : {}), /*#__PURE__*/React.createElement(FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
       name: "users",
       validate: !isExtendedShareDialogEnabled ? validate : undefined,
       defaultValue: defaultValue,

package/dist/es2019/components/analytics/analytics.js

@@ -1,7 +1,7 @@
 import { isEmail, isExternalUser, isGroup, isTeam, isUser } from '@atlaskit/smart-user-picker';
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "6.9.0",
+  packageVersion: "6.11.0",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({

package/dist/esm/components/ShareForm.js

@@ -77,6 +77,9 @@ export var formFooterStyles = css({
 var formFieldStyles = css({
   marginBottom: "var(--ds-space-150, 12px)"
 });
+var formFieldStylesSpacious = css({
+  marginBottom: "var(--ds-space-250, 20px)"
+});
 var integrationWrapperStyles = css({
   display: 'flex',
   alignItems: 'center'
@@ -159,11 +162,12 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           source: ANALYTICS_SOURCE
         }
       }, jsx("form", formProps, showTitle && jsx(ShareHeader, {
+        isExtendedShareDialogEnabled: isExtendedShareDialogEnabled,
         title: title
       }), !isExtendedShareDialogEnabled && jsx("div", {
         css: requiredFieldInfoStyles
       }, jsx(FormattedMessage, messages.requiredFieldSummary), jsx(RequiredAsterisk, null)), jsx("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, isExtendedShareDialogEnabled ? jsx(Inline, {
         space: "space.100"
       }, jsx(Box, {
@@ -209,7 +213,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         productAttributes: productAttributes,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled
       })), jsx("div", {
-        css: formFieldStyles
+        css: isExtendedShareDialogEnabled ? formFieldStyles : formFieldStylesSpacious
       }, jsx(CommentField, {
         defaultValue: defaultValue && defaultValue.comment,
         isExtendedShareDialogEnabled: isExtendedShareDialogEnabled

package/dist/esm/components/ShareHeader.js

@@ -14,14 +14,19 @@ var headerWrapperStyles = xcss({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'space.400'
 });
+var headerWrapperExtraSpaceStyles = xcss({
+  marginBottom: 'space.200'
+});
 export var ShareHeader = function ShareHeader(_ref) {
-  var title = _ref.title;
+  var isExtendedShareDialogEnabled = _ref.isExtendedShareDialogEnabled,
+    title = _ref.title;
+  var headingSize = isExtendedShareDialogEnabled ? 'medium' : 'small';
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: headerWrapperStyles
+    xcss: [headerWrapperStyles, isExtendedShareDialogEnabled && headerWrapperExtraSpaceStyles]
   }, fg('share-header-accessibility') ? /*#__PURE__*/React.createElement(Heading, {
-    size: "small",
+    size: headingSize,
     as: "h2"
   }, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)) : /*#__PURE__*/React.createElement(Heading, {
-    size: "small"
+    size: headingSize
   }, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
 };

package/dist/esm/components/SplitButton.js

@@ -13,7 +13,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SplitButton as AKSplitButton, IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N800 } from '@atlaskit/theme/colors';
 import { messages } from '../i18n';
@@ -69,13 +69,18 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
         label: ""
       }, providedProps, {
         ref: triggerRef,
-        icon: ChevronDownIcon,
+        icon: function icon(iconProps) {
+          return jsx(ChevronDownIcon, _extends({}, iconProps, {
+            size: "small"
+          }));
+        },
         appearance: triggerButtonAppearance
       }));
     },
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
-    onOpenChange: onOpenChange
+    onOpenChange: onOpenChange,
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-people-and-')
   }, jsx(DropdownItemGroup, null, shareIntegrations.map(function (integration) {
     return jsx(DropdownItem, {
       key: integration.type,

package/dist/esm/components/UserPickerField.js

@@ -270,9 +270,13 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
       var UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? SmartUserPicker : UserPicker;
       var menuPortalTarget = getMenuPortalTargetCurrentHTML(selectPortalRef);
       return /*#__PURE__*/React.createElement(Field, {
-        label: /*#__PURE__*/React.createElement(Text, {
+        label: /*#__PURE__*/React.createElement(Text, _extends({
           id: USER_PICKER_FIELD_LABEL
-        }, /*#__PURE__*/React.createElement(FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
+        }, isExtendedShareDialogEnabled ? {
+          weight: 'bold',
+          size: 'small',
+          color: 'color.text.subtle'
+        } : {}), /*#__PURE__*/React.createElement(FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
         name: "users",
         validate: !isExtendedShareDialogEnabled ? validate : undefined,
         defaultValue: defaultValue,

package/dist/esm/components/analytics/analytics.js

@@ -6,7 +6,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "6.9.0"
+    packageVersion: "6.11.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/types/components/ShareHeader.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export type Props = {
+    isExtendedShareDialogEnabled?: boolean;
     title?: React.ReactNode;
 };
-export declare const ShareHeader: ({ title }: Props) => React.JSX.Element;
+export declare const ShareHeader: ({ isExtendedShareDialogEnabled, title }: Props) => React.JSX.Element;

package/dist/types-ts4.5/components/ShareHeader.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export type Props = {
+    isExtendedShareDialogEnabled?: boolean;
     title?: React.ReactNode;
 };
-export declare const ShareHeader: ({ title }: Props) => React.JSX.Element;
+export declare const ShareHeader: ({ isExtendedShareDialogEnabled, title }: Props) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/share",
-	"version": "6.9.0",
+	"version": "6.11.0",
 	"description": "Fabric Share Element",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.0.0",
+		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/user-picker": "^11.2.0",
@@ -139,6 +139,9 @@
 		},
 		"dst-a11y__replace-anchor-with-link__people-and-tea": {
 			"type": "boolean"
+		},
+		"should-render-to-parent-should-be-true-people-and-": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [