@atlaskit/share 4.22.1 → 4.23.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/share
 
+## 4.23.0
+
+### Minor Changes
+
+- [#166181](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166181)
+  [`21e43f81fb5aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/21e43f81fb5aa) -
+  [ux] Added additional tab prop
+
+### Patch Changes
+
+- [#167430](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167430)
+  [`c01f64d7d85f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c01f64d7d85f5) -
+  Replace hard-coded font size with design tokens
+
 ## 4.22.1
 
 ### Patch Changes

package/dist/cjs/components/ShareForm.js

@@ -27,7 +27,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../i18n");
 var _types = require("../types");
@@ -91,7 +90,7 @@ var integrationIconWrapperStyles = (0, _react2.css)({
 var requiredFieldInfoStyles = (0, _react2.css)({
   marginBottom: "var(--ds-space-200, 16px)",
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  fontSize: "".concat((0, _constants.fontSizeSmall)(), "px")
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var menuGroupContainerStyles = (0, _primitives.xcss)({
   color: 'color.text',
@@ -345,7 +344,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           key: "share-tabPanel-default"
         }, (0, _react2.jsx)("div", {
           css: formWrapperStyles
-        }, this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
+        }, (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: platformTabWrapper
+        }, this.renderShareForm()) : this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-integration"
         }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
           data: {
@@ -353,12 +354,20 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, (0, _react2.jsx)("div", {
           css: formWrapperStyles
+        }, (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: platformTabWrapper
         }, (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
           },
           changeTab: this.changeTab
+        })) : (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          },
+          changeTab: this.changeTab
         })))), (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
           return (0, _react2.jsx)(_tabs.TabPanel, {
             key: "share-tabPanel-".concat(tab.label)
@@ -394,6 +403,9 @@ var ShareForm = exports.ShareForm = function ShareForm(props) {
     }));
   });
 };
+var platformTabWrapper = (0, _primitives.xcss)({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

package/dist/cjs/components/ShareFormWrapper/styled.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineDialogFormWrapper = exports.InlineDialogContentWrapper = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ShareMenuItem = require("../ShareMenuItem");
 /**
  * @jsxRuntime classic
@@ -25,6 +26,11 @@ var calculateFormWrapperWidth = function calculateFormWrapperWidth(_ref) {
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return _ShareMenuItem.menuWrapperWidth;
   }
+  if ((0, _platformFeatureFlags.fg)('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref2) {

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: "4.22.1"
+    packageVersion: "4.23.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/es2019/components/ShareForm.js

@@ -19,7 +19,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { N300, R400 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -74,7 +73,7 @@ const integrationIconWrapperStyles = css({
 const requiredFieldInfoStyles = css({
   marginBottom: "var(--ds-space-200, 16px)",
   color: `var(--ds-text-subtle, ${N300})`,
-  fontSize: `${fontSizeSmall()}px`
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 const menuGroupContainerStyles = xcss({
   color: 'color.text',
@@ -318,7 +317,9 @@ class InternalForm extends React.PureComponent {
         key: `share-tabPanel-default`
       }, jsx("div", {
         css: formWrapperStyles
-      }, this.renderShareForm())), jsx(TabPanel, {
+      }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+        xcss: platformTabWrapper
+      }, this.renderShareForm()) : this.renderShareForm())), jsx(TabPanel, {
         key: `share-tabPanel-integration`
       }, jsx(AnalyticsContext, {
         data: {
@@ -326,10 +327,16 @@ class InternalForm extends React.PureComponent {
         }
       }, jsx("div", {
         css: formWrapperStyles
+      }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+        xcss: platformTabWrapper
       }, jsx(IntegrationForm, {
         Content: firstIntegration.Content,
         onIntegrationClose: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
         changeTab: this.changeTab
+      })) : jsx(IntegrationForm, {
+        Content: firstIntegration.Content,
+        onIntegrationClose: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
+        changeTab: this.changeTab
       })))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(tab => jsx(TabPanel, {
         key: `share-tabPanel-${tab.label}`
       }, jsx("div", {
@@ -356,6 +363,9 @@ export const ShareForm = props => jsx(Form, {
   formProps: formProps,
   getValues: getValues
 })));
+const platformTabWrapper = xcss({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

package/dist/es2019/components/ShareFormWrapper/styled.js

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { menuWrapperWidth } from '../ShareMenuItem';
 
 /**
@@ -20,6 +21,11 @@ const calculateFormWrapperWidth = ({
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return menuWrapperWidth;
   }
+  if (fg('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 export const InlineDialogFormWrapper = ({

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: "4.22.1",
+  packageVersion: "4.23.0",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({

package/dist/esm/components/ShareForm.js

@@ -29,7 +29,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { N300, R400 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -84,7 +83,7 @@ var integrationIconWrapperStyles = css({
 var requiredFieldInfoStyles = css({
   marginBottom: "var(--ds-space-200, 16px)",
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  fontSize: "".concat(fontSizeSmall(), "px")
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var menuGroupContainerStyles = xcss({
   color: 'color.text',
@@ -338,7 +337,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           key: "share-tabPanel-default"
         }, jsx("div", {
           css: formWrapperStyles
-        }, this.renderShareForm())), jsx(TabPanel, {
+        }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+          xcss: platformTabWrapper
+        }, this.renderShareForm()) : this.renderShareForm())), jsx(TabPanel, {
           key: "share-tabPanel-integration"
         }, jsx(AnalyticsContext, {
           data: {
@@ -346,12 +347,20 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, jsx("div", {
           css: formWrapperStyles
+        }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+          xcss: platformTabWrapper
         }, jsx(IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
           },
           changeTab: this.changeTab
+        })) : jsx(IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          },
+          changeTab: this.changeTab
         })))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
           return jsx(TabPanel, {
             key: "share-tabPanel-".concat(tab.label)
@@ -387,6 +396,9 @@ export var ShareForm = function ShareForm(props) {
     }));
   });
 };
+var platformTabWrapper = xcss({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

package/dist/esm/components/ShareFormWrapper/styled.js

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { menuWrapperWidth } from '../ShareMenuItem';
 
 /**
@@ -19,6 +20,11 @@ var calculateFormWrapperWidth = function calculateFormWrapperWidth(_ref) {
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return menuWrapperWidth;
   }
+  if (fg('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 export var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref2) {

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: "4.22.1"
+    packageVersion: "4.23.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.22.1",
+	"version": "4.23.0",
 	"description": "Fabric Share Element",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,8 +42,8 @@
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/dropdown-menu": "^12.22.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/heading": "^3.0.0",
-		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/heading": "^3.1.0",
+		"@atlaskit/icon": "^22.25.0",
 		"@atlaskit/link": "^1.2.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/tabs": "^16.5.0",
 		"@atlaskit/textarea": "^5.6.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@atlaskit/user-picker": "^10.27.0",