@atlaskit/editor-plugin-media 10.0.5 → 10.0.6

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/ImageBorder/index.js +22 -6
  3. package/dist/es2019/ui/ImageBorder/index.js +23 -7
  4. package/dist/esm/ui/ImageBorder/index.js +23 -7
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 10.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`be5f64b1c1011`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be5f64b1c1011) -
8
+ [ux] Patch for image editor tool bar border drop downUI size
9
+ - Updated dependencies
10
+
3
11
  ## 10.0.5
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/ImageBorder/index.js CHANGED
@@ -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) {
package/dist/es2019/ui/ImageBorder/index.js CHANGED
@@ -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))
package/dist/esm/ui/ImageBorder/index.js CHANGED
@@ -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.5",
3
+ "version": "10.0.6",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.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.0.0",
69
+ "@atlaskit/tmp-editor-statsig": "^40.1.0",
70
70
  "@atlaskit/tokens": "^11.1.0",
71
71
  "@atlaskit/tooltip": "^20.14.0",
72
72
  "@babel/runtime": "^7.0.0",