@atlaskit/editor-plugin-media 1.8.2 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js +45 -17
  3. package/dist/cjs/ui/ImageBorder/styles.js +2 -2
  4. package/dist/cjs/ui/Media/DropPlaceholder.js +21 -6
  5. package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js +44 -45
  6. package/dist/es2019/ui/ImageBorder/styles.js +3 -3
  7. package/dist/es2019/ui/Media/DropPlaceholder.js +20 -20
  8. package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js +44 -15
  9. package/dist/esm/ui/ImageBorder/styles.js +2 -2
  10. package/dist/esm/ui/Media/DropPlaceholder.js +20 -6
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#80857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80857) [`ad7674680f2d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad7674680f2d) - [ux] Changed spacing styles to use design token instead of static values
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
3
13
  ## 1.8.2
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -12,7 +12,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
12
12
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
13
13
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
16
15
  var _react = _interopRequireDefault(require("react"));
17
16
  var _react2 = require("@emotion/react");
18
17
  var _reactIntlNext = require("react-intl-next");
@@ -26,19 +25,48 @@ var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/che
26
25
  var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
27
26
  var _colors = require("@atlaskit/theme/colors");
28
27
  var _commands = require("../commands");
29
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
30
- /** @jsx jsx */
31
28
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
32
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
29
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
33
30
  var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
34
31
  var MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
35
32
 
36
- var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n font-size: ", ";\n padding: ", " ", ";\n line-height: 20px;\n border-top: 1px solid ", ";\n margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
37
- var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: ", "px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
38
- var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n line-height: 0;\n padding: 5px 0;\n align-items: center;\n"])));
39
- var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n line-height: 0;\n padding: ", " ", "\n ", " 0;\n margin: 0 ", " 0 ", ";\n border-top: 1px solid ", ";\n align-items: start;\n flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));
40
- var buttonWrapper = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
41
- var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
33
+ var supportTextStyles = (0, _react2.css)({
34
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
35
+ fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(12),
36
+ padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-500, 40px)"),
37
+ lineHeight: '20px',
38
+ borderTop: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
39
+ margin: 0
40
+ });
41
+ var containerStyles = (0, _react2.css)({
42
+ width: "".concat(CONTAINER_WIDTH_IN_PX, "px"),
43
+ display: 'flex',
44
+ flexDirection: 'column',
45
+ overflow: 'auto',
46
+ lineHeight: 2
47
+ });
48
+ var inputWrapperStyles = (0, _react2.css)({
49
+ display: 'flex',
50
+ lineHeight: 0,
51
+ padding: "var(--ds-space-075, 6px)".concat(" 0"),
52
+ alignItems: 'center'
53
+ });
54
+ var validationWrapperStyles = (0, _react2.css)({
55
+ display: 'flex',
56
+ lineHeight: 0,
57
+ padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
58
+ margin: "0 ".concat("var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-500, 40px)"),
59
+ borderTop: "1px solid ".concat("var(--ds-border-danger, ".concat(_colors.R400, ")")),
60
+ alignItems: 'start',
61
+ flexDirection: 'column'
62
+ });
63
+ var buttonWrapperStyles = (0, _react2.css)({
64
+ display: 'flex',
65
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
66
+ });
67
+ var clearTextStyles = (0, _react2.css)({
68
+ color: "var(--ds-icon-subtle, ".concat(_colors.N80, ")")
69
+ });
42
70
  // eslint-disable-next-line @repo/internal/react/no-class-components
43
71
  var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
44
72
  (0, _inherits2.default)(AltTextEditComponent, _React$Component);
@@ -151,11 +179,11 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
151
179
  });
152
180
  var hasErrors = !!errorsList.length;
153
181
  return (0, _react2.jsx)("div", {
154
- css: container
182
+ css: containerStyles
155
183
  }, (0, _react2.jsx)("section", {
156
- css: inputWrapper
184
+ css: inputWrapperStyles
157
185
  }, (0, _react2.jsx)("div", {
158
- css: buttonWrapper
186
+ css: buttonWrapperStyles
159
187
  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
160
188
  title: formatMessage(_media.altTextMessages.back),
161
189
  icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
@@ -178,12 +206,12 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
178
206
  ariaInvalid: hasErrors,
179
207
  autoFocus: true
180
208
  }), showClearTextButton && (0, _react2.jsx)("div", {
181
- css: buttonWrapper
209
+ css: buttonWrapperStyles
182
210
  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
183
211
  testId: "alt-text-clear-button",
184
212
  title: formatMessage(_media.altTextMessages.clear),
185
213
  icon: (0, _react2.jsx)("span", {
186
- css: clearText
214
+ css: clearTextStyles
187
215
  }, (0, _react2.jsx)(_crossCircle.default, {
188
216
  label: formatMessage(_media.altTextMessages.clear)
189
217
  })),
@@ -193,9 +221,9 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
193
221
  id: "errors-list",
194
222
  ref: this.errorsListRef,
195
223
  "aria-live": "assertive",
196
- css: validationWrapper
224
+ css: validationWrapperStyles
197
225
  }, errorsList), (0, _react2.jsx)("p", {
198
- css: supportText,
226
+ css: supportTextStyles,
199
227
  id: "support-text"
200
228
  }, formatMessage(_media.altTextMessages.supportText)));
201
229
  }
package/dist/cjs/ui/ImageBorder/styles.js CHANGED
@@ -40,7 +40,7 @@ var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
40
40
  };
41
41
 
42
42
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
43
- var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n border: 1px solid transparent;\n margin: 1px;\n font-size: 0;\n display: flex;\n align-items: center;\n padding: 1px;\n border-radius: 6px;\n &:focus-within,\n &:focus,\n &:hover {\n border-color: ", " !important;\n }\n"])), _colors.N50);
43
+ var buttonWrapperStyle = exports.buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n border: 1px solid transparent;\n margin: ", ";\n font-size: 0;\n display: flex;\n align-items: center;\n padding: ", ";\n border-radius: 6px;\n &:focus-within,\n &:focus,\n &:hover {\n border-color: ", " !important;\n }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _colors.N50);
44
44
  var line = exports.line = function line(size, selected) {
45
45
  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 12px;\n height: ", "px;\n background-color: ", ";\n border-radius: 90px;\n transform: translate(-50%, -50%) rotate(135deg);\n }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, #44546F)");
46
46
  };
@@ -50,5 +50,5 @@ var getHoverStyles = function getHoverStyles(selector) {
50
50
  var toolbarButtonWrapper = exports.toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
51
51
  var enabled = _ref.enabled,
52
52
  isOpen = _ref.isOpen;
53
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n .image-border-toolbar-btn {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n & > span {\n margin: 0;\n }\n }\n .image-border-toolbar-dropdown {\n padding: 0;\n & > span {\n margin: 0;\n }\n width: 16px !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-left: 1px;\n }\n\n ", "\n ", "\n"])), !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
53
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n .image-border-toolbar-btn {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n & > span {\n margin: 0;\n }\n }\n .image-border-toolbar-dropdown {\n padding: 0;\n & > span {\n margin: 0;\n }\n width: 16px !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-left: ", ";\n }\n\n ", "\n ", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
54
54
  };
package/dist/cjs/ui/Media/DropPlaceholder.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
8
  var _react = require("@emotion/react");
10
9
  var _reactIntlNext = require("react-intl-next");
11
10
  var _adfSchema = require("@atlaskit/adf-schema");
@@ -14,15 +13,31 @@ var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/docum
14
13
  var _colors = require("@atlaskit/theme/colors");
15
14
  var _constants = require("@atlaskit/theme/constants");
16
15
  var _media2 = require("../../nodeviews/mediaNodeView/media");
17
- var _templateObject, _templateObject2;
18
16
  /** @jsx jsx */
19
- var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background: ", ";\n border-radius: ", "px;\n margin: 5px 3px 25px;\n width: ", "px;\n min-height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"), (0, _constants.borderRadius)(), _media2.FILE_WIDTH, _media2.MEDIA_HEIGHT);
20
- var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border-radius: ", "px;\n margin: ", " 0;\n width: 100%;\n height: 2px;\n"])), "var(--ds-border-focused, ".concat(_colors.B200, ")"), (0, _constants.borderRadius)(), "var(--ds-space-025, 2px)");
17
+
18
+ var iconWrapperStyles = (0, _react.css)({
19
+ color: "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"),
20
+ background: "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"),
21
+ borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
22
+ margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
23
+ width: "".concat(_media2.FILE_WIDTH, "px"),
24
+ minHeight: "".concat(_media2.MEDIA_HEIGHT, "px"),
25
+ display: 'flex',
26
+ alignItems: 'center',
27
+ justifyContent: 'center'
28
+ });
29
+ var dropLineStyles = (0, _react.css)({
30
+ background: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
31
+ borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
32
+ margin: "var(--ds-space-025, 2px)".concat(" 0"),
33
+ width: '100%',
34
+ height: '2px'
35
+ });
21
36
  var IconWrapperComponent = function IconWrapperComponent(props) {
22
37
  var intl = props.intl;
23
38
  var dropPlaceholderLabel = _media.dropPlaceholderMessages.dropPlaceholderLabel;
24
39
  return (0, _react.jsx)("div", {
25
- css: iconWrapper
40
+ css: iconWrapperStyles
26
41
  }, (0, _react.jsx)(_documentFilled.default, {
27
42
  label: intl.formatMessage(dropPlaceholderLabel),
28
43
  size: "medium"
@@ -33,6 +48,6 @@ var _default = exports.default = function _default(_ref) {
33
48
  var _ref$type = _ref.type,
34
49
  type = _ref$type === void 0 ? 'group' : _ref$type;
35
50
  return type === 'single' ? (0, _react.jsx)("div", {
36
- css: dropLine
51
+ css: dropLineStyles
37
52
  }) : (0, _react.jsx)(IntlIconWrapper, null);
38
53
  };
package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -17,44 +17,43 @@ import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands
17
17
  export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
18
18
  export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
19
19
 
20
- const supportText = css`
21
- color: ${`var(--ds-text-subtlest, ${N200})`};
22
- font-size: ${relativeFontSizeToBase16(12)};
23
- padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"};
24
- line-height: 20px;
25
- border-top: 1px solid ${`var(--ds-border, ${N30})`};
26
- margin: 0;
27
- `;
28
- const container = css`
29
- width: ${CONTAINER_WIDTH_IN_PX}px;
30
- display: flex;
31
- flex-direction: column;
32
- overflow: auto;
33
- line-height: 2;
34
- `;
35
- const inputWrapper = css`
36
- display: flex;
37
- line-height: 0;
38
- padding: 5px 0;
39
- align-items: center;
40
- `;
41
- const validationWrapper = css`
42
- display: flex;
43
- line-height: 0;
44
- padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"}
45
- ${"var(--ds-space-150, 12px)"} 0;
46
- margin: 0 ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-500, 40px)"};
47
- border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
48
- align-items: start;
49
- flex-direction: column;
50
- `;
51
- const buttonWrapper = css`
52
- display: flex;
53
- padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
54
- `;
55
- const clearText = css`
56
- color: ${`var(--ds-icon-subtle, ${N80})`};
57
- `;
20
+ const supportTextStyles = css({
21
+ color: `var(--ds-text-subtlest, ${N200})`,
22
+ fontSize: relativeFontSizeToBase16(12),
23
+ padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"}`,
24
+ lineHeight: '20px',
25
+ borderTop: `1px solid ${`var(--ds-border, ${N30})`}`,
26
+ margin: 0
27
+ });
28
+ const containerStyles = css({
29
+ width: `${CONTAINER_WIDTH_IN_PX}px`,
30
+ display: 'flex',
31
+ flexDirection: 'column',
32
+ overflow: 'auto',
33
+ lineHeight: 2
34
+ });
35
+ const inputWrapperStyles = css({
36
+ display: 'flex',
37
+ lineHeight: 0,
38
+ padding: `${"var(--ds-space-075, 6px)"} 0`,
39
+ alignItems: 'center'
40
+ });
41
+ const validationWrapperStyles = css({
42
+ display: 'flex',
43
+ lineHeight: 0,
44
+ padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"} ${"var(--ds-space-150, 12px)"} 0`,
45
+ margin: `0 ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-500, 40px)"}`,
46
+ borderTop: `1px solid ${`var(--ds-border-danger, ${R400})`}`,
47
+ alignItems: 'start',
48
+ flexDirection: 'column'
49
+ });
50
+ const buttonWrapperStyles = css({
51
+ display: 'flex',
52
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
53
+ });
54
+ const clearTextStyles = css({
55
+ color: `var(--ds-icon-subtle, ${N80})`
56
+ });
58
57
  // eslint-disable-next-line @repo/internal/react/no-class-components
59
58
  export class AltTextEditComponent extends React.Component {
60
59
  constructor(props) {
@@ -165,11 +164,11 @@ export class AltTextEditComponent extends React.Component {
165
164
  });
166
165
  const hasErrors = !!errorsList.length;
167
166
  return jsx("div", {
168
- css: container
167
+ css: containerStyles
169
168
  }, jsx("section", {
170
- css: inputWrapper
169
+ css: inputWrapperStyles
171
170
  }, jsx("div", {
172
- css: buttonWrapper
171
+ css: buttonWrapperStyles
173
172
  }, jsx(Button, {
174
173
  title: formatMessage(messages.back),
175
174
  icon: jsx(ChevronLeftLargeIcon, {
@@ -192,12 +191,12 @@ export class AltTextEditComponent extends React.Component {
192
191
  ariaInvalid: hasErrors,
193
192
  autoFocus: true
194
193
  }), showClearTextButton && jsx("div", {
195
- css: buttonWrapper
194
+ css: buttonWrapperStyles
196
195
  }, jsx(Button, {
197
196
  testId: "alt-text-clear-button",
198
197
  title: formatMessage(messages.clear),
199
198
  icon: jsx("span", {
200
- css: clearText
199
+ css: clearTextStyles
201
200
  }, jsx(CrossCircleIcon, {
202
201
  label: formatMessage(messages.clear)
203
202
  })),
@@ -207,9 +206,9 @@ export class AltTextEditComponent extends React.Component {
207
206
  id: "errors-list",
208
207
  ref: this.errorsListRef,
209
208
  "aria-live": "assertive",
210
- css: validationWrapper
209
+ css: validationWrapperStyles
211
210
  }, errorsList), jsx("p", {
212
- css: supportText,
211
+ css: supportTextStyles,
213
212
  id: "support-text"
214
213
  }, formatMessage(messages.supportText)));
215
214
  }
package/dist/es2019/ui/ImageBorder/styles.js CHANGED
@@ -65,11 +65,11 @@ export const buttonStyle = selected => css`
65
65
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
66
66
  export const buttonWrapperStyle = css`
67
67
  border: 1px solid transparent;
68
- margin: 1px;
68
+ margin: ${"var(--ds-space-025, 2px)"};
69
69
  font-size: 0;
70
70
  display: flex;
71
71
  align-items: center;
72
- padding: 1px;
72
+ padding: ${"var(--ds-space-025, 2px)"};
73
73
  border-radius: 6px;
74
74
  &:focus-within,
75
75
  &:focus,
@@ -120,7 +120,7 @@ export const toolbarButtonWrapper = ({
120
120
  width: 16px !important;
121
121
  border-top-left-radius: 0 !important;
122
122
  border-bottom-left-radius: 0 !important;
123
- margin-left: 1px;
123
+ margin-left: ${"var(--ds-space-025, 2px)"};
124
124
  }
125
125
 
126
126
  ${!enabled && getHoverStyles('.image-border-toolbar-btn')}
package/dist/es2019/ui/Media/DropPlaceholder.js CHANGED
@@ -7,24 +7,24 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
7
7
  import { B200, B300, B400 } from '@atlaskit/theme/colors';
8
8
  import { borderRadius } from '@atlaskit/theme/constants';
9
9
  import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
10
- const iconWrapper = css`
11
- color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
12
- background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
13
- border-radius: ${borderRadius()}px;
14
- margin: 5px 3px 25px;
15
- width: ${FILE_WIDTH}px;
16
- min-height: ${MEDIA_HEIGHT}px;
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- `;
21
- const dropLine = css`
22
- background: ${`var(--ds-border-focused, ${B200})`};
23
- border-radius: ${borderRadius()}px;
24
- margin: ${"var(--ds-space-025, 2px)"} 0;
25
- width: 100%;
26
- height: 2px;
27
- `;
10
+ const iconWrapperStyles = css({
11
+ color: `var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`,
12
+ background: `var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`,
13
+ borderRadius: `${borderRadius()}px`,
14
+ margin: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-300, 24px)"}`,
15
+ width: `${FILE_WIDTH}px`,
16
+ minHeight: `${MEDIA_HEIGHT}px`,
17
+ display: 'flex',
18
+ alignItems: 'center',
19
+ justifyContent: 'center'
20
+ });
21
+ const dropLineStyles = css({
22
+ background: `var(--ds-border-focused, ${B200})`,
23
+ borderRadius: `${borderRadius()}px`,
24
+ margin: `${"var(--ds-space-025, 2px)"} 0`,
25
+ width: '100%',
26
+ height: '2px'
27
+ });
28
28
  const IconWrapperComponent = props => {
29
29
  const {
30
30
  intl
@@ -33,7 +33,7 @@ const IconWrapperComponent = props => {
33
33
  dropPlaceholderLabel
34
34
  } = dropPlaceholderMessages;
35
35
  return jsx("div", {
36
- css: iconWrapper
36
+ css: iconWrapperStyles
37
37
  }, jsx(DocumentFilledIcon, {
38
38
  label: intl.formatMessage(dropPlaceholderLabel),
39
39
  size: "medium"
@@ -43,5 +43,5 @@ const IntlIconWrapper = injectIntl(IconWrapperComponent);
43
43
  export default (({
44
44
  type = 'group'
45
45
  }) => type === 'single' ? jsx("div", {
46
- css: dropLine
46
+ css: dropLineStyles
47
47
  }) : jsx(IntlIconWrapper, null));
package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js CHANGED
@@ -5,8 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
5
5
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
6
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
9
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
10
8
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
11
9
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
12
10
  /** @jsx jsx */
@@ -27,12 +25,43 @@ import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands
27
25
  export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
28
26
  export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
29
27
 
30
- var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n font-size: ", ";\n padding: ", " ", ";\n line-height: 20px;\n border-top: 1px solid ", ";\n margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
31
- var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
32
- var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n line-height: 0;\n padding: 5px 0;\n align-items: center;\n"])));
33
- var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n line-height: 0;\n padding: ", " ", "\n ", " 0;\n margin: 0 ", " 0 ", ";\n border-top: 1px solid ", ";\n align-items: start;\n flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(R400, ")"));
34
- var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n padding: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
35
- var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
28
+ var supportTextStyles = css({
29
+ color: "var(--ds-text-subtlest, ".concat(N200, ")"),
30
+ fontSize: relativeFontSizeToBase16(12),
31
+ padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-500, 40px)"),
32
+ lineHeight: '20px',
33
+ borderTop: "1px solid ".concat("var(--ds-border, ".concat(N30, ")")),
34
+ margin: 0
35
+ });
36
+ var containerStyles = css({
37
+ width: "".concat(CONTAINER_WIDTH_IN_PX, "px"),
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ overflow: 'auto',
41
+ lineHeight: 2
42
+ });
43
+ var inputWrapperStyles = css({
44
+ display: 'flex',
45
+ lineHeight: 0,
46
+ padding: "var(--ds-space-075, 6px)".concat(" 0"),
47
+ alignItems: 'center'
48
+ });
49
+ var validationWrapperStyles = css({
50
+ display: 'flex',
51
+ lineHeight: 0,
52
+ padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
53
+ margin: "0 ".concat("var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-500, 40px)"),
54
+ borderTop: "1px solid ".concat("var(--ds-border-danger, ".concat(R400, ")")),
55
+ alignItems: 'start',
56
+ flexDirection: 'column'
57
+ });
58
+ var buttonWrapperStyles = css({
59
+ display: 'flex',
60
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
61
+ });
62
+ var clearTextStyles = css({
63
+ color: "var(--ds-icon-subtle, ".concat(N80, ")")
64
+ });
36
65
  // eslint-disable-next-line @repo/internal/react/no-class-components
37
66
  export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
38
67
  _inherits(AltTextEditComponent, _React$Component);
@@ -145,11 +174,11 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
145
174
  });
146
175
  var hasErrors = !!errorsList.length;
147
176
  return jsx("div", {
148
- css: container
177
+ css: containerStyles
149
178
  }, jsx("section", {
150
- css: inputWrapper
179
+ css: inputWrapperStyles
151
180
  }, jsx("div", {
152
- css: buttonWrapper
181
+ css: buttonWrapperStyles
153
182
  }, jsx(Button, {
154
183
  title: formatMessage(messages.back),
155
184
  icon: jsx(ChevronLeftLargeIcon, {
@@ -172,12 +201,12 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
172
201
  ariaInvalid: hasErrors,
173
202
  autoFocus: true
174
203
  }), showClearTextButton && jsx("div", {
175
- css: buttonWrapper
204
+ css: buttonWrapperStyles
176
205
  }, jsx(Button, {
177
206
  testId: "alt-text-clear-button",
178
207
  title: formatMessage(messages.clear),
179
208
  icon: jsx("span", {
180
- css: clearText
209
+ css: clearTextStyles
181
210
  }, jsx(CrossCircleIcon, {
182
211
  label: formatMessage(messages.clear)
183
212
  })),
@@ -187,9 +216,9 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
187
216
  id: "errors-list",
188
217
  ref: this.errorsListRef,
189
218
  "aria-live": "assertive",
190
- css: validationWrapper
219
+ css: validationWrapperStyles
191
220
  }, errorsList), jsx("p", {
192
- css: supportText,
221
+ css: supportTextStyles,
193
222
  id: "support-text"
194
223
  }, formatMessage(messages.supportText)));
195
224
  }
package/dist/esm/ui/ImageBorder/styles.js CHANGED
@@ -30,7 +30,7 @@ export var buttonStyle = function buttonStyle(selected) {
30
30
  };
31
31
 
32
32
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
33
- export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border: 1px solid transparent;\n margin: 1px;\n font-size: 0;\n display: flex;\n align-items: center;\n padding: 1px;\n border-radius: 6px;\n &:focus-within,\n &:focus,\n &:hover {\n border-color: ", " !important;\n }\n"])), N50);
33
+ export var buttonWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border: 1px solid transparent;\n margin: ", ";\n font-size: 0;\n display: flex;\n align-items: center;\n padding: ", ";\n border-radius: 6px;\n &:focus-within,\n &:focus,\n &:hover {\n border-color: ", " !important;\n }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", N50);
34
34
  export var line = function line(size, selected) {
35
35
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n &:before {\n content: '';\n display: block;\n position: absolute;\n top: 50%;\n left: 50%;\n width: 12px;\n height: ", "px;\n background-color: ", ";\n border-radius: 90px;\n transform: translate(-50%, -50%) rotate(135deg);\n }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, #44546F)");
36
36
  };
@@ -40,5 +40,5 @@ var getHoverStyles = function getHoverStyles(selector) {
40
40
  export var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
41
41
  var enabled = _ref.enabled,
42
42
  isOpen = _ref.isOpen;
43
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n .image-border-toolbar-btn {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n & > span {\n margin: 0;\n }\n }\n .image-border-toolbar-dropdown {\n padding: 0;\n & > span {\n margin: 0;\n }\n width: 16px !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-left: 1px;\n }\n\n ", "\n ", "\n"])), !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
43
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n .image-border-toolbar-btn {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n padding: 0;\n & > span {\n margin: 0;\n }\n }\n .image-border-toolbar-dropdown {\n padding: 0;\n & > span {\n margin: 0;\n }\n width: 16px !important;\n border-top-left-radius: 0 !important;\n border-bottom-left-radius: 0 !important;\n margin-left: ", ";\n }\n\n ", "\n ", "\n"])), "var(--ds-space-025, 2px)", !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
44
44
  };
package/dist/esm/ui/Media/DropPlaceholder.js CHANGED
@@ -1,5 +1,3 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2;
3
1
  /** @jsx jsx */
4
2
  import { css, jsx } from '@emotion/react';
5
3
  import { injectIntl } from 'react-intl-next';
@@ -9,13 +7,29 @@ import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
9
7
  import { B200, B300, B400 } from '@atlaskit/theme/colors';
10
8
  import { borderRadius } from '@atlaskit/theme/constants';
11
9
  import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
12
- var iconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n background: ", ";\n border-radius: ", "px;\n margin: 5px 3px 25px;\n width: ", "px;\n min-height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"), borderRadius(), FILE_WIDTH, MEDIA_HEIGHT);
13
- var dropLine = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n margin: ", " 0;\n width: 100%;\n height: 2px;\n"])), "var(--ds-border-focused, ".concat(B200, ")"), borderRadius(), "var(--ds-space-025, 2px)");
10
+ var iconWrapperStyles = css({
11
+ color: "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"),
12
+ background: "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"),
13
+ borderRadius: "".concat(borderRadius(), "px"),
14
+ margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
15
+ width: "".concat(FILE_WIDTH, "px"),
16
+ minHeight: "".concat(MEDIA_HEIGHT, "px"),
17
+ display: 'flex',
18
+ alignItems: 'center',
19
+ justifyContent: 'center'
20
+ });
21
+ var dropLineStyles = css({
22
+ background: "var(--ds-border-focused, ".concat(B200, ")"),
23
+ borderRadius: "".concat(borderRadius(), "px"),
24
+ margin: "var(--ds-space-025, 2px)".concat(" 0"),
25
+ width: '100%',
26
+ height: '2px'
27
+ });
14
28
  var IconWrapperComponent = function IconWrapperComponent(props) {
15
29
  var intl = props.intl;
16
30
  var dropPlaceholderLabel = dropPlaceholderMessages.dropPlaceholderLabel;
17
31
  return jsx("div", {
18
- css: iconWrapper
32
+ css: iconWrapperStyles
19
33
  }, jsx(DocumentFilledIcon, {
20
34
  label: intl.formatMessage(dropPlaceholderLabel),
21
35
  size: "medium"
@@ -26,6 +40,6 @@ export default (function (_ref) {
26
40
  var _ref$type = _ref.type,
27
41
  type = _ref$type === void 0 ? 'group' : _ref$type;
28
42
  return type === 'single' ? jsx("div", {
29
- css: dropLine
43
+ css: dropLineStyles
30
44
  }) : jsx(IntlIconWrapper, null);
31
45
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.8.2",
3
+ "version": "1.9.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-namespaced-context": "^6.9.0",
38
38
  "@atlaskit/analytics-next": "^9.2.0",
39
39
  "@atlaskit/button": "^17.7.0",
40
- "@atlaskit/editor-common": "^78.11.0",
40
+ "@atlaskit/editor-common": "^78.12.0",
41
41
  "@atlaskit/editor-palette": "1.5.2",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.0.0",
43
43
  "@atlaskit/editor-plugin-annotation": "1.2.2",
@@ -63,10 +63,10 @@
63
63
  "@atlaskit/media-ui": "^25.4.0",
64
64
  "@atlaskit/media-viewer": "^48.3.0",
65
65
  "@atlaskit/platform-feature-flags": "^0.2.0",
66
- "@atlaskit/primitives": "^4.0.0",
67
- "@atlaskit/textfield": "^6.0.0",
66
+ "@atlaskit/primitives": "^4.1.0",
67
+ "@atlaskit/textfield": "^6.1.0",
68
68
  "@atlaskit/theme": "^12.6.0",
69
- "@atlaskit/tokens": "^1.39.0",
69
+ "@atlaskit/tokens": "^1.41.0",
70
70
  "@atlaskit/tooltip": "^18.1.0",
71
71
  "@babel/runtime": "^7.0.0",
72
72
  "@emotion/react": "^11.7.1",