@atlaskit/editor-plugin-extension 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-extension
 
+## 0.6.0
+
+### Minor Changes
+
+- [#67100](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67100) [`55cdf07c41cb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/55cdf07c41cb) - Allow create label formatting for custom fields from extension
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.5.2
+
+### Patch Changes
+
+- [#66759](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66759) [`906578f1ea5d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/906578f1ea5d) - [ux] ED-21787: Migrating few CSS entries to space and color tokens
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/cjs/ui/ConfigPanel/Fields/Boolean.js

@@ -26,7 +26,7 @@ var toggleFieldWrapperStyles = (0, _react2.css)({
 });
 var toggleLabelStyles = (0, _react2.css)({
   display: 'flex',
-  padding: '3px 3px 3px 0px',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-0, 0px)"),
   flexGrow: 1
 });
 function _validate(value, isRequired) {

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -362,7 +362,10 @@ var ColorPicker = function ColorPicker(props) {
       height: "var(--ds-space-300, 24px)"
     }
     /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
-      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
+      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */
+    // Disabling design token check as this is a calculated value
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    ,
     absoluteOffset: {
       right: Number(-1.5 * getCurrentRemSize() - 1)
     }

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -142,7 +142,8 @@ function CustomSelect(_ref2) {
     var message = intl.formatMessage(_messages.messages.createOption);
     return "".concat(message, " \"").concat(value, "\"");
   }
-  var isCreatable = options.isCreatable;
+  var isCreatable = options.isCreatable,
+    customFormatCreateLabel = options.formatCreateLabel;
   return /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: name,
     label: label,
@@ -172,7 +173,7 @@ function CustomSelect(_ref2) {
       validationState: error ? 'error' : 'default',
       defaultOptions: defaultOptions,
       formatCreateLabel: function formatCreateLabel(value) {
-        return _formatCreateLabel(value);
+        return customFormatCreateLabel ? customFormatCreateLabel(value) : _formatCreateLabel(value);
       },
       formatOptionLabel: _SelectItem.formatOptionLabel,
       loadOptions: function loadOptions(searchTerm) {

package/dist/cjs/ui/ConfigPanel/Fields/SelectItem.js

@@ -22,9 +22,11 @@ var itemWrapperStyles = (0, _react.css)({
 var iconWrapperStyles = (0, _react.css)({
   lineHeight: 1
 });
+
+// Adding 4px instead of 3px, since Design tokens supports space sizes in 2 multiples only Ref: https://atlassian.design/components/tokens/all-tokens
 var iconWrapperMenuStyles = (0, _react.css)({
   alignSelf: 'flex-start',
-  marginTop: '3px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 var getIconSize = function getIconSize(context, description) {
   if (context === 'value' || !description) {

package/dist/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -13,7 +13,7 @@ const toggleFieldWrapperStyles = css({
 });
 const toggleLabelStyles = css({
   display: 'flex',
-  padding: '3px 3px 3px 0px',
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-0, 0px)"}`,
   flexGrow: 1
 });
 function validate(value, isRequired) {

package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js

@@ -353,7 +353,10 @@ const ColorPicker = props => {
       height: "var(--ds-space-300, 24px)"
     }
     /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
-      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
+      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */
+    // Disabling design token check as this is a calculated value
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    ,
     absoluteOffset: {
       right: Number(-1.5 * getCurrentRemSize() - 1)
     }

package/dist/es2019/ui/ConfigPanel/Fields/CustomSelect.js

@@ -88,7 +88,8 @@ function CustomSelect({
     return `${message} "${value}"`;
   }
   const {
-    isCreatable
+    isCreatable,
+    formatCreateLabel: customFormatCreateLabel
   } = options;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
@@ -114,7 +115,7 @@ function CustomSelect({
     isValidNewOption: value => !!(isCreatable && value),
     validationState: error ? 'error' : 'default',
     defaultOptions: defaultOptions,
-    formatCreateLabel: value => formatCreateLabel(value),
+    formatCreateLabel: value => customFormatCreateLabel ? customFormatCreateLabel(value) : formatCreateLabel(value),
     formatOptionLabel: formatOptionLabel,
     loadOptions: searchTerm => {
       return resolver(searchTerm, fieldDefaultValue, parameters);

package/dist/es2019/ui/ConfigPanel/Fields/SelectItem.js

@@ -14,9 +14,11 @@ const itemWrapperStyles = css({
 const iconWrapperStyles = css({
   lineHeight: 1
 });
+
+// Adding 4px instead of 3px, since Design tokens supports space sizes in 2 multiples only Ref: https://atlassian.design/components/tokens/all-tokens
 const iconWrapperMenuStyles = css({
   alignSelf: 'flex-start',
-  marginTop: '3px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 const getIconSize = (context, description) => {
   if (context === 'value' || !description) {

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -16,7 +16,7 @@ var toggleFieldWrapperStyles = css({
 });
 var toggleLabelStyles = css({
   display: 'flex',
-  padding: '3px 3px 3px 0px',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-0, 0px)"),
   flexGrow: 1
 });
 function _validate(value, isRequired) {

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -356,7 +356,10 @@ var ColorPicker = function ColorPicker(props) {
       height: "var(--ds-space-300, 24px)"
     }
     /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
-      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
+      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */
+    // Disabling design token check as this is a calculated value
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    ,
     absoluteOffset: {
       right: Number(-1.5 * getCurrentRemSize() - 1)
     }

package/dist/esm/ui/ConfigPanel/Fields/CustomSelect.js

@@ -132,7 +132,8 @@ function CustomSelect(_ref2) {
     var message = intl.formatMessage(messages.createOption);
     return "".concat(message, " \"").concat(value, "\"");
   }
-  var isCreatable = options.isCreatable;
+  var isCreatable = options.isCreatable,
+    customFormatCreateLabel = options.formatCreateLabel;
   return /*#__PURE__*/React.createElement(Field, {
     name: name,
     label: label,
@@ -162,7 +163,7 @@ function CustomSelect(_ref2) {
       validationState: error ? 'error' : 'default',
       defaultOptions: defaultOptions,
       formatCreateLabel: function formatCreateLabel(value) {
-        return _formatCreateLabel(value);
+        return customFormatCreateLabel ? customFormatCreateLabel(value) : _formatCreateLabel(value);
       },
       formatOptionLabel: formatOptionLabel,
       loadOptions: function loadOptions(searchTerm) {

package/dist/esm/ui/ConfigPanel/Fields/SelectItem.js

@@ -14,9 +14,11 @@ var itemWrapperStyles = css({
 var iconWrapperStyles = css({
   lineHeight: 1
 });
+
+// Adding 4px instead of 3px, since Design tokens supports space sizes in 2 multiples only Ref: https://atlassian.design/components/tokens/all-tokens
 var iconWrapperMenuStyles = css({
   alignSelf: 'flex-start',
-  marginTop: '3px'
+  marginTop: "var(--ds-space-050, 4px)"
 });
 var getIconSize = function getIconSize(context, description) {
   if (context === 'value' || !description) {

package/example-utils/config-panel/fields.ts

@@ -565,6 +565,21 @@ export const customFields: FieldDefinition[] = [
       },
     },
   },
+  {
+    name: 'custom-format-create-label',
+    type: 'custom',
+    label: 'Custom: Customized create label',
+    description: 'Select or create an option with a custom label',
+    options: {
+      isCreatable: true,
+      formatCreateLabel: (value: string) => {
+        return `Add "${value}" to the list`;
+      },
+      resolver: {
+        type: 'mock-resolver',
+      },
+    },
+  },
   {
     name: 'unsupported',
     type: 'custom',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-extension",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "editor-plugin-extension plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
     "@atlaskit/button": "^17.2.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/datetime-picker": "^13.0.3",
-    "@atlaskit/editor-common": "^76.39.0",
+    "@atlaskit/editor-common": "^76.41.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-context-panel": "^0.2.0",