@atlaskit/editor-plugin-media 10.0.5 → 10.0.7
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 10.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 10.0.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`be5f64b1c1011`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be5f64b1c1011) -
|
|
14
|
+
[ux] Patch for image editor tool bar border drop downUI size
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 10.0.5
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -30,6 +30,22 @@ var _styles2 = require("./styles");
|
|
|
30
30
|
|
|
31
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
|
|
32
32
|
|
|
33
|
+
// New padding for border options drop down
|
|
34
|
+
var dropdownOptionButtonNew = (0, _react2.css)({
|
|
35
|
+
background: 'transparent',
|
|
36
|
+
borderWidth: "var(--ds-border-width-selected, 2px)",
|
|
37
|
+
borderStyle: 'solid',
|
|
38
|
+
borderColor: 'transparent',
|
|
39
|
+
display: 'flex',
|
|
40
|
+
width: '100%',
|
|
41
|
+
alignItems: 'center',
|
|
42
|
+
justifyContent: 'space-between',
|
|
43
|
+
padding: 0,
|
|
44
|
+
'&:focus': {
|
|
45
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
46
|
+
borderColor: "var(--ds-border-focused, #4688EC)"
|
|
47
|
+
}
|
|
48
|
+
});
|
|
33
49
|
var ImageBorder = function ImageBorder(_ref) {
|
|
34
50
|
var formatMessage = _ref.intl.formatMessage,
|
|
35
51
|
toggleBorder = _ref.toggleBorder,
|
|
@@ -127,10 +143,10 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
127
143
|
ref: dropDownColorOptionButton,
|
|
128
144
|
type: "button",
|
|
129
145
|
"aria-label": formatMessage(_media.imageBorderMessages.borderColorDropdownAriaLabel),
|
|
130
|
-
"data-testid": "image-border-dropdown-button-color"
|
|
146
|
+
"data-testid": "image-border-dropdown-button-color",
|
|
147
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
131
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
132
|
-
,
|
|
133
|
-
css: [_styles2.dropdownOptionButton],
|
|
149
|
+
: _styles2.dropdownOptionButton,
|
|
134
150
|
"aria-expanded": isColorSubmenuOpen,
|
|
135
151
|
onKeyDown: function onKeyDown(e) {
|
|
136
152
|
return handleTriggerByKeyboard(e, function () {
|
|
@@ -193,10 +209,10 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
193
209
|
content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
|
|
194
210
|
type: "button",
|
|
195
211
|
"aria-label": formatMessage(_media.imageBorderMessages.borderSizeDropdownAriaLabel),
|
|
196
|
-
"data-testid": "image-border-dropdown-button-size"
|
|
212
|
+
"data-testid": "image-border-dropdown-button-size",
|
|
213
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
197
214
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
198
|
-
,
|
|
199
|
-
css: [_styles2.dropdownOptionButton],
|
|
215
|
+
: _styles2.dropdownOptionButton,
|
|
200
216
|
"aria-expanded": isSizeSubmenuOpen,
|
|
201
217
|
ref: dropDownSizeOptionButton,
|
|
202
218
|
onKeyDown: function onKeyDown(e) {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
6
6
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
|
|
8
|
-
import { jsx } from '@emotion/react';
|
|
8
|
+
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
|
|
10
10
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
11
11
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -21,6 +21,22 @@ import { Text } from '@atlaskit/primitives/compiled';
|
|
|
21
21
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
22
22
|
import Tooltip from '@atlaskit/tooltip';
|
|
23
23
|
import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, menuItemDimensions, toolbarButtonWrapper } from './styles';
|
|
24
|
+
// New padding for border options drop down
|
|
25
|
+
const dropdownOptionButtonNew = css({
|
|
26
|
+
background: 'transparent',
|
|
27
|
+
borderWidth: "var(--ds-border-width-selected, 2px)",
|
|
28
|
+
borderStyle: 'solid',
|
|
29
|
+
borderColor: 'transparent',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
width: '100%',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
justifyContent: 'space-between',
|
|
34
|
+
padding: 0,
|
|
35
|
+
'&:focus': {
|
|
36
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
37
|
+
borderColor: "var(--ds-border-focused, #4688EC)"
|
|
38
|
+
}
|
|
39
|
+
});
|
|
24
40
|
const ImageBorder = ({
|
|
25
41
|
intl: {
|
|
26
42
|
formatMessage
|
|
@@ -109,10 +125,10 @@ const ImageBorder = ({
|
|
|
109
125
|
ref: dropDownColorOptionButton,
|
|
110
126
|
type: "button",
|
|
111
127
|
"aria-label": formatMessage(messages.borderColorDropdownAriaLabel),
|
|
112
|
-
"data-testid": "image-border-dropdown-button-color"
|
|
128
|
+
"data-testid": "image-border-dropdown-button-color",
|
|
129
|
+
css: expValEquals('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
113
130
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
114
|
-
,
|
|
115
|
-
css: [dropdownOptionButton],
|
|
131
|
+
: dropdownOptionButton,
|
|
116
132
|
"aria-expanded": isColorSubmenuOpen,
|
|
117
133
|
onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
|
|
118
134
|
}, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
|
|
@@ -171,10 +187,10 @@ const ImageBorder = ({
|
|
|
171
187
|
content: jsx("div", null, jsx("button", {
|
|
172
188
|
type: "button",
|
|
173
189
|
"aria-label": formatMessage(messages.borderSizeDropdownAriaLabel),
|
|
174
|
-
"data-testid": "image-border-dropdown-button-size"
|
|
190
|
+
"data-testid": "image-border-dropdown-button-size",
|
|
191
|
+
css: expValEquals('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
175
192
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
176
|
-
,
|
|
177
|
-
css: [dropdownOptionButton],
|
|
193
|
+
: dropdownOptionButton,
|
|
178
194
|
"aria-expanded": isSizeSubmenuOpen,
|
|
179
195
|
ref: dropDownSizeOptionButton,
|
|
180
196
|
onKeyDown: e => handleTriggerByKeyboard(e, () => setIsSizeSubmenuOpen(!isSizeSubmenuOpen))
|
|
@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
|
6
6
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
|
|
9
|
-
import { jsx } from '@emotion/react';
|
|
9
|
+
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
|
|
11
11
|
import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
12
12
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -22,6 +22,22 @@ import { Text } from '@atlaskit/primitives/compiled';
|
|
|
22
22
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
23
23
|
import Tooltip from '@atlaskit/tooltip';
|
|
24
24
|
import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, menuItemDimensions, toolbarButtonWrapper } from './styles';
|
|
25
|
+
// New padding for border options drop down
|
|
26
|
+
var dropdownOptionButtonNew = css({
|
|
27
|
+
background: 'transparent',
|
|
28
|
+
borderWidth: "var(--ds-border-width-selected, 2px)",
|
|
29
|
+
borderStyle: 'solid',
|
|
30
|
+
borderColor: 'transparent',
|
|
31
|
+
display: 'flex',
|
|
32
|
+
width: '100%',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
justifyContent: 'space-between',
|
|
35
|
+
padding: 0,
|
|
36
|
+
'&:focus': {
|
|
37
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
38
|
+
borderColor: "var(--ds-border-focused, #4688EC)"
|
|
39
|
+
}
|
|
40
|
+
});
|
|
25
41
|
var ImageBorder = function ImageBorder(_ref) {
|
|
26
42
|
var formatMessage = _ref.intl.formatMessage,
|
|
27
43
|
toggleBorder = _ref.toggleBorder,
|
|
@@ -119,10 +135,10 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
119
135
|
ref: dropDownColorOptionButton,
|
|
120
136
|
type: "button",
|
|
121
137
|
"aria-label": formatMessage(messages.borderColorDropdownAriaLabel),
|
|
122
|
-
"data-testid": "image-border-dropdown-button-color"
|
|
138
|
+
"data-testid": "image-border-dropdown-button-color",
|
|
139
|
+
css: expValEquals('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
123
140
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
124
|
-
,
|
|
125
|
-
css: [dropdownOptionButton],
|
|
141
|
+
: dropdownOptionButton,
|
|
126
142
|
"aria-expanded": isColorSubmenuOpen,
|
|
127
143
|
onKeyDown: function onKeyDown(e) {
|
|
128
144
|
return handleTriggerByKeyboard(e, function () {
|
|
@@ -185,10 +201,10 @@ var ImageBorder = function ImageBorder(_ref) {
|
|
|
185
201
|
content: jsx("div", null, jsx("button", {
|
|
186
202
|
type: "button",
|
|
187
203
|
"aria-label": formatMessage(messages.borderSizeDropdownAriaLabel),
|
|
188
|
-
"data-testid": "image-border-dropdown-button-size"
|
|
204
|
+
"data-testid": "image-border-dropdown-button-size",
|
|
205
|
+
css: expValEquals('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew
|
|
189
206
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
190
|
-
,
|
|
191
|
-
css: [dropdownOptionButton],
|
|
207
|
+
: dropdownOptionButton,
|
|
192
208
|
"aria-expanded": isSizeSubmenuOpen,
|
|
193
209
|
ref: dropDownSizeOptionButton,
|
|
194
210
|
onKeyDown: function onKeyDown(e) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.7",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
53
53
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
54
54
|
"@atlaskit/form": "^15.4.0",
|
|
55
|
-
"@atlaskit/icon": "^
|
|
56
|
-
"@atlaskit/icon-lab": "^
|
|
55
|
+
"@atlaskit/icon": "^33.0.0",
|
|
56
|
+
"@atlaskit/icon-lab": "^6.0.0",
|
|
57
57
|
"@atlaskit/media-card": "^79.15.0",
|
|
58
58
|
"@atlaskit/media-client": "^36.0.0",
|
|
59
59
|
"@atlaskit/media-client-react": "^5.0.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@atlaskit/primitives": "^18.0.0",
|
|
67
67
|
"@atlaskit/textfield": "^8.2.0",
|
|
68
68
|
"@atlaskit/theme": "^22.0.0",
|
|
69
|
-
"@atlaskit/tmp-editor-statsig": "^40.
|
|
69
|
+
"@atlaskit/tmp-editor-statsig": "^40.2.0",
|
|
70
70
|
"@atlaskit/tokens": "^11.1.0",
|
|
71
71
|
"@atlaskit/tooltip": "^20.14.0",
|
|
72
72
|
"@babel/runtime": "^7.0.0",
|