@atlaskit/editor-plugin-floating-toolbar 1.14.15 → 1.14.16

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/EmojiPickerButton.js +50 -27
  3. package/dist/es2019/ui/EmojiPickerButton.js +45 -24
  4. package/dist/esm/ui/EmojiPickerButton.js +50 -27
  5. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 1.14.16
4
+
5
+ ### Patch Changes
6
+
7
+ - [#99080](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99080)
8
+ [`8b2f0af25c400`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b2f0af25c400) -
9
+ [ux] ED-26062: Removed icon blue borders when selected
10
+
3
11
  ## 1.14.15
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/EmojiPickerButton.js CHANGED
@@ -9,12 +9,13 @@ exports.EmojiPickerButton = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
12
- var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
12
+ var _new = require("@atlaskit/button/new");
13
13
  var _hooks = require("@atlaskit/editor-common/hooks");
14
14
  var _ui = require("@atlaskit/editor-common/ui");
15
15
  var _uiReact = require("@atlaskit/editor-common/ui-react");
16
16
  var _emoji = require("@atlaskit/emoji");
17
17
  var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
19
20
  var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
20
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -26,10 +27,40 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
26
27
 
27
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
28
29
 
29
- // helps adjusts position of popup
30
30
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
31
31
  var emojiPickerButtonWrapper = (0, _react2.css)({
32
- position: 'relative'
32
+ position: 'relative',
33
+ // helps adjusts position of popup
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ button: {
36
+ top: '-1px',
37
+ // adjust position of emoji icon when using the IconButtom component
38
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
39
+ '&:not([disabled])::after': {
40
+ border: 'none' // remove blue border when picker has been selected
41
+ }
42
+ },
43
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
44
+ svg: {
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
46
+ path: {
47
+ // adjust size of emoji icon when using the IconButtom component, otherwise it's too small
48
+ transformOrigin: '50% 50%',
49
+ transform: 'scale(1.14)'
50
+ }
51
+ }
52
+ });
53
+
54
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
55
+ var emojiPickerButtonWrapperVisualRefresh = (0, _react2.css)({
56
+ position: 'relative',
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
58
+ button: {
59
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
60
+ '&:not([disabled])::after': {
61
+ border: 'none' // remove blue border when picker has been selected
62
+ }
63
+ }
33
64
  });
34
65
  var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
35
66
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
@@ -116,35 +147,27 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
116
147
  };
117
148
  var title = props.title || '';
118
149
  return (0, _react2.jsx)("div", {
119
- css: emojiPickerButtonWrapper
150
+ css:
151
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
152
+ (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? emojiPickerButtonWrapperVisualRefresh : emojiPickerButtonWrapper
120
153
  }, (0, _react2.jsx)(_tooltip.default, {
121
154
  content: title,
122
155
  position: "top"
123
- }, (0, _react2.jsx)(_standardButton.default, {
124
- appearance: 'subtle',
125
- key: props.idx
126
- // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
127
- ,
128
- style: {
129
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
130
- padding: 0,
131
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
132
- margin: 0,
133
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
134
- display: 'flex',
135
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
136
- height: '24px',
137
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
138
- width: '24px'
139
- },
156
+ }, (0, _react2.jsx)(_new.IconButton, {
157
+ appearance: "subtle",
158
+ key: props.idx,
140
159
  onClick: togglePopup,
141
160
  ref: buttonRef,
142
161
  isSelected: props.isSelected,
143
- "aria-label": title,
144
- iconBefore: (0, _react2.jsx)(_emojiAdd.default, {
145
- color: "currentColor",
146
- LEGACY_fallbackIcon: _EditorEmojiAddIcon.default,
147
- label: "emoji-picker-button"
148
- })
162
+ label: title,
163
+ spacing: "compact",
164
+ icon: function icon() {
165
+ return (0, _react2.jsx)(_emojiAdd.default, {
166
+ color: "currentColor",
167
+ LEGACY_fallbackIcon: _EditorEmojiAddIcon.default,
168
+ label: "emoji-picker-button",
169
+ spacing: "spacious"
170
+ });
171
+ }
149
172
  })), renderPopup());
150
173
  };
package/dist/es2019/ui/EmojiPickerButton.js CHANGED
@@ -6,19 +6,50 @@ import React, { useCallback, useContext } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
- import Button from '@atlaskit/button/standard-button';
9
+ import { IconButton } from '@atlaskit/button/new';
10
10
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
11
11
  import { Popup } from '@atlaskit/editor-common/ui';
12
12
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
13
13
  import { EmojiPicker } from '@atlaskit/emoji';
14
14
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
15
16
  import Tooltip from '@atlaskit/tooltip';
16
17
  import EditorEmojiAddIcon from './EditorEmojiAddIcon';
17
18
 
18
- // helps adjusts position of popup
19
19
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
20
20
  const emojiPickerButtonWrapper = css({
21
- position: 'relative'
21
+ position: 'relative',
22
+ // helps adjusts position of popup
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
24
+ button: {
25
+ top: '-1px',
26
+ // adjust position of emoji icon when using the IconButtom component
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
28
+ '&:not([disabled])::after': {
29
+ border: 'none' // remove blue border when picker has been selected
30
+ }
31
+ },
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
33
+ svg: {
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ path: {
36
+ // adjust size of emoji icon when using the IconButtom component, otherwise it's too small
37
+ transformOrigin: '50% 50%',
38
+ transform: 'scale(1.14)'
39
+ }
40
+ }
41
+ });
42
+
43
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
44
+ const emojiPickerButtonWrapperVisualRefresh = css({
45
+ position: 'relative',
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
47
+ button: {
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
49
+ '&:not([disabled])::after': {
50
+ border: 'none' // remove blue border when picker has been selected
51
+ }
52
+ }
22
53
  });
23
54
  const EmojiPickerWithProvider = props => {
24
55
  const {
@@ -101,35 +132,25 @@ export const EmojiPickerButton = props => {
101
132
  };
102
133
  const title = props.title || '';
103
134
  return jsx("div", {
104
- css: emojiPickerButtonWrapper
135
+ css:
136
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
137
+ fg('platform-visual-refresh-icons') ? emojiPickerButtonWrapperVisualRefresh : emojiPickerButtonWrapper
105
138
  }, jsx(Tooltip, {
106
139
  content: title,
107
140
  position: "top"
108
- }, jsx(Button, {
109
- appearance: 'subtle',
110
- key: props.idx
111
- // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
112
- ,
113
- style: {
114
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
115
- padding: 0,
116
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
117
- margin: 0,
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
119
- display: 'flex',
120
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
121
- height: '24px',
122
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
123
- width: '24px'
124
- },
141
+ }, jsx(IconButton, {
142
+ appearance: "subtle",
143
+ key: props.idx,
125
144
  onClick: togglePopup,
126
145
  ref: buttonRef,
127
146
  isSelected: props.isSelected,
128
- "aria-label": title,
129
- iconBefore: jsx(EmojiAddIcon, {
147
+ label: title,
148
+ spacing: "compact",
149
+ icon: () => jsx(EmojiAddIcon, {
130
150
  color: "currentColor",
131
151
  LEGACY_fallbackIcon: EditorEmojiAddIcon,
132
- label: "emoji-picker-button"
152
+ label: "emoji-picker-button",
153
+ spacing: "spacious"
133
154
  })
134
155
  })), renderPopup());
135
156
  };
package/dist/esm/ui/EmojiPickerButton.js CHANGED
@@ -7,19 +7,50 @@ import React, { useCallback, useContext } from 'react';
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
- import Button from '@atlaskit/button/standard-button';
10
+ import { IconButton } from '@atlaskit/button/new';
11
11
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
12
  import { Popup } from '@atlaskit/editor-common/ui';
13
13
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
14
14
  import { EmojiPicker } from '@atlaskit/emoji';
15
15
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
16
+ import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import Tooltip from '@atlaskit/tooltip';
17
18
  import EditorEmojiAddIcon from './EditorEmojiAddIcon';
18
19
 
19
- // helps adjusts position of popup
20
20
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
21
21
  var emojiPickerButtonWrapper = css({
22
- position: 'relative'
22
+ position: 'relative',
23
+ // helps adjusts position of popup
24
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
25
+ button: {
26
+ top: '-1px',
27
+ // adjust position of emoji icon when using the IconButtom component
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
29
+ '&:not([disabled])::after': {
30
+ border: 'none' // remove blue border when picker has been selected
31
+ }
32
+ },
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
34
+ svg: {
35
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
36
+ path: {
37
+ // adjust size of emoji icon when using the IconButtom component, otherwise it's too small
38
+ transformOrigin: '50% 50%',
39
+ transform: 'scale(1.14)'
40
+ }
41
+ }
42
+ });
43
+
44
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
45
+ var emojiPickerButtonWrapperVisualRefresh = css({
46
+ position: 'relative',
47
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
48
+ button: {
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
50
+ '&:not([disabled])::after': {
51
+ border: 'none' // remove blue border when picker has been selected
52
+ }
53
+ }
23
54
  });
24
55
  var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
25
56
  var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
@@ -106,35 +137,27 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
106
137
  };
107
138
  var title = props.title || '';
108
139
  return jsx("div", {
109
- css: emojiPickerButtonWrapper
140
+ css:
141
+ // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
142
+ fg('platform-visual-refresh-icons') ? emojiPickerButtonWrapperVisualRefresh : emojiPickerButtonWrapper
110
143
  }, jsx(Tooltip, {
111
144
  content: title,
112
145
  position: "top"
113
- }, jsx(Button, {
114
- appearance: 'subtle',
115
- key: props.idx
116
- // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
117
- ,
118
- style: {
119
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
120
- padding: 0,
121
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
122
- margin: 0,
123
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
124
- display: 'flex',
125
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
126
- height: '24px',
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
128
- width: '24px'
129
- },
146
+ }, jsx(IconButton, {
147
+ appearance: "subtle",
148
+ key: props.idx,
130
149
  onClick: togglePopup,
131
150
  ref: buttonRef,
132
151
  isSelected: props.isSelected,
133
- "aria-label": title,
134
- iconBefore: jsx(EmojiAddIcon, {
135
- color: "currentColor",
136
- LEGACY_fallbackIcon: EditorEmojiAddIcon,
137
- label: "emoji-picker-button"
138
- })
152
+ label: title,
153
+ spacing: "compact",
154
+ icon: function icon() {
155
+ return jsx(EmojiAddIcon, {
156
+ color: "currentColor",
157
+ LEGACY_fallbackIcon: EditorEmojiAddIcon,
158
+ label: "emoji-picker-button",
159
+ spacing: "spacious"
160
+ });
161
+ }
139
162
  })), renderPopup());
140
163
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "1.14.15",
3
+ "version": "1.14.16",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -116,6 +116,9 @@
116
116
  },
117
117
  "platform_editor_floating_toolbar_padding_fix": {
118
118
  "type": "boolean"
119
+ },
120
+ "platform-visual-refresh-icons": {
121
+ "type": "boolean"
119
122
  }
120
123
  }
121
124
  }