@atlaskit/editor-plugin-text-color 1.16.6 → 1.16.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,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-text-color
|
|
2
2
|
|
|
3
|
+
## 1.16.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#100162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100162)
|
|
8
|
+
[`e80e57fc37719`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e80e57fc37719) -
|
|
9
|
+
[ux] ED-26089: Add 4px gap to main nav bar items
|
|
10
|
+
|
|
3
11
|
## 1.16.6
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -38,6 +38,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
38
38
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
39
39
|
var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
|
|
40
40
|
var EXPERIMENT_GROUP_CONTROL = 'control';
|
|
41
|
+
var addMarginToWrapper = (0, _react2.css)({
|
|
42
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
43
|
+
});
|
|
44
|
+
|
|
41
45
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
42
46
|
var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
|
|
43
47
|
function ToolbarTextColor() {
|
|
@@ -172,88 +176,87 @@ var ToolbarTextColor = exports.ToolbarTextColor = /*#__PURE__*/function (_React$
|
|
|
172
176
|
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
|
|
173
177
|
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
174
178
|
var reducedSpacing = this.props.toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
|
|
175
|
-
return (
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
label: "",
|
|
221
|
-
color: "currentColor",
|
|
222
|
-
spacing: "spacious"
|
|
223
|
-
})
|
|
224
|
-
}) : (0, _react2.jsx)(_icons.SteppedRainbowIconDecoration, {
|
|
225
|
-
selectedColor: selectedColor,
|
|
226
|
-
disabled: pluginState.disabled,
|
|
227
|
-
icon: (0, _react2.jsx)(_icon.EditorTextColorIcon, null)
|
|
228
|
-
}),
|
|
229
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
230
|
-
(0, _react2.jsx)("span", {
|
|
231
|
-
css: _styles.expandIconContainerStyle
|
|
232
|
-
}, (0, _react2.jsx)(_chevronDown.default, {
|
|
179
|
+
return (0, _react2.jsx)("span", {
|
|
180
|
+
css:
|
|
181
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-prefix
|
|
182
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? [_styles.wrapperStyle, addMarginToWrapper] : _styles.wrapperStyle
|
|
183
|
+
}, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
|
|
184
|
+
mountTo: popupsMountPoint,
|
|
185
|
+
boundariesElement: popupsBoundariesElement,
|
|
186
|
+
scrollableElement: popupsScrollableElement,
|
|
187
|
+
isOpen: isOpen && !pluginState.disabled,
|
|
188
|
+
handleClickOutside: this.hide,
|
|
189
|
+
handleEscapeKeydown: this.hideonEsc,
|
|
190
|
+
zIndex: _editorSharedStyles.akEditorMenuZIndex,
|
|
191
|
+
fitWidth: fitWidth,
|
|
192
|
+
closeOnTab: true,
|
|
193
|
+
arrowKeyNavigationProviderOptions: {
|
|
194
|
+
type: _uiMenu.ArrowKeyNavigationType.COLOR,
|
|
195
|
+
selectedRowIndex: selectedRowIndex,
|
|
196
|
+
selectedColumnIndex: selectedColumnIndex,
|
|
197
|
+
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
198
|
+
isPopupPositioned: true
|
|
199
|
+
},
|
|
200
|
+
trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
|
|
201
|
+
buttonId: _uiMenu.TOOLBAR_BUTTON.TEXT_COLOR,
|
|
202
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
203
|
+
disabled: disabled || pluginState.disabled,
|
|
204
|
+
selected: isOpen,
|
|
205
|
+
"aria-label": labelTextColor,
|
|
206
|
+
"aria-expanded": isOpen,
|
|
207
|
+
"aria-haspopup": true,
|
|
208
|
+
title: tooltipTextColor,
|
|
209
|
+
onClick: this.toggleOpen,
|
|
210
|
+
onKeyDown: this.onKeyDown,
|
|
211
|
+
ref: this.toolbarItemRef,
|
|
212
|
+
iconBefore: (0, _react2.jsx)("div", {
|
|
213
|
+
css:
|
|
214
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
|
|
215
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
|
|
216
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
217
|
+
_styles.triggerWrapperStylesWithPadding :
|
|
218
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
219
|
+
_styles.triggerWrapperStyles
|
|
220
|
+
}, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.jsx)(_icons.DynamicStrokeIconDecoration, {
|
|
221
|
+
selectedColor: selectedColor,
|
|
222
|
+
disabled: pluginState.disabled,
|
|
223
|
+
icon: (0, _react2.jsx)(_textStyle.default, {
|
|
233
224
|
label: "",
|
|
234
225
|
color: "currentColor",
|
|
235
|
-
|
|
236
|
-
})
|
|
237
|
-
})
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
226
|
+
spacing: "spacious"
|
|
227
|
+
})
|
|
228
|
+
}) : (0, _react2.jsx)(_icons.SteppedRainbowIconDecoration, {
|
|
229
|
+
selectedColor: selectedColor,
|
|
230
|
+
disabled: pluginState.disabled,
|
|
231
|
+
icon: (0, _react2.jsx)(_icon.EditorTextColorIcon, null)
|
|
232
|
+
}),
|
|
233
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
234
|
+
(0, _react2.jsx)("span", {
|
|
235
|
+
css: _styles.expandIconContainerStyle
|
|
236
|
+
}, (0, _react2.jsx)(_chevronDown.default, {
|
|
237
|
+
label: "",
|
|
238
|
+
color: "currentColor",
|
|
239
|
+
LEGACY_margin: "0 0 0 -8px"
|
|
240
|
+
})))
|
|
241
|
+
})
|
|
242
|
+
}, (0, _react2.jsx)("div", {
|
|
243
|
+
"data-testid": "text-color-palette"
|
|
244
|
+
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
|
|
245
|
+
onClick: function onClick(color) {
|
|
246
|
+
var _pluginInjectionApi$a;
|
|
247
|
+
return _this2.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);
|
|
248
|
+
},
|
|
249
|
+
selectedColor: pluginState.color,
|
|
250
|
+
paletteOptions: {
|
|
251
|
+
palette: palette,
|
|
252
|
+
hexToPaletteColor: _editorPalette.hexToEditorTextPaletteColor,
|
|
253
|
+
paletteColorTooltipMessages: _uiColor.textPaletteTooltipMessages
|
|
254
|
+
}
|
|
255
|
+
}))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
256
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
257
|
+
(0, _react2.jsx)("span", {
|
|
258
|
+
css: _styles.separatorStyles
|
|
259
|
+
}));
|
|
257
260
|
}
|
|
258
261
|
}, {
|
|
259
262
|
key: "getSelectedColor",
|
|
@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
6
6
|
import React from 'react';
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
|
-
import { jsx } from '@emotion/react';
|
|
9
|
+
import { jsx, css } from '@emotion/react';
|
|
10
10
|
import { injectIntl } from 'react-intl-next';
|
|
11
11
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
12
12
|
import { DynamicStrokeIconDecoration, SteppedRainbowIconDecoration } from '@atlaskit/editor-common/icons';
|
|
@@ -25,6 +25,10 @@ import { ToolbarType } from '../../types';
|
|
|
25
25
|
import { EditorTextColorIcon } from './icon';
|
|
26
26
|
const EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
|
|
27
27
|
const EXPERIMENT_GROUP_CONTROL = 'control';
|
|
28
|
+
const addMarginToWrapper = css({
|
|
29
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
30
|
+
});
|
|
31
|
+
|
|
28
32
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
29
33
|
export class ToolbarTextColor extends React.Component {
|
|
30
34
|
constructor(...args) {
|
|
@@ -155,88 +159,87 @@ export class ToolbarTextColor extends React.Component {
|
|
|
155
159
|
selectedColumnIndex
|
|
156
160
|
} = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
|
|
157
161
|
const reducedSpacing = this.props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
|
|
158
|
-
return (
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
label: "",
|
|
204
|
-
color: "currentColor",
|
|
205
|
-
spacing: "spacious"
|
|
206
|
-
})
|
|
207
|
-
}) : jsx(SteppedRainbowIconDecoration, {
|
|
208
|
-
selectedColor: selectedColor,
|
|
209
|
-
disabled: pluginState.disabled,
|
|
210
|
-
icon: jsx(EditorTextColorIcon, null)
|
|
211
|
-
}),
|
|
212
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
213
|
-
jsx("span", {
|
|
214
|
-
css: expandIconContainerStyle
|
|
215
|
-
}, jsx(ChevronDownIcon, {
|
|
162
|
+
return jsx("span", {
|
|
163
|
+
css:
|
|
164
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-prefix
|
|
165
|
+
fg('platform-visual-refresh-icons') ? [wrapperStyle, addMarginToWrapper] : wrapperStyle
|
|
166
|
+
}, jsx(Dropdown, {
|
|
167
|
+
mountTo: popupsMountPoint,
|
|
168
|
+
boundariesElement: popupsBoundariesElement,
|
|
169
|
+
scrollableElement: popupsScrollableElement,
|
|
170
|
+
isOpen: isOpen && !pluginState.disabled,
|
|
171
|
+
handleClickOutside: this.hide,
|
|
172
|
+
handleEscapeKeydown: this.hideonEsc,
|
|
173
|
+
zIndex: akEditorMenuZIndex,
|
|
174
|
+
fitWidth: fitWidth,
|
|
175
|
+
closeOnTab: true,
|
|
176
|
+
arrowKeyNavigationProviderOptions: {
|
|
177
|
+
type: ArrowKeyNavigationType.COLOR,
|
|
178
|
+
selectedRowIndex,
|
|
179
|
+
selectedColumnIndex,
|
|
180
|
+
isOpenedByKeyboard,
|
|
181
|
+
isPopupPositioned: true
|
|
182
|
+
},
|
|
183
|
+
trigger: jsx(ToolbarButton, {
|
|
184
|
+
buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
|
|
185
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
186
|
+
disabled: disabled || pluginState.disabled,
|
|
187
|
+
selected: isOpen,
|
|
188
|
+
"aria-label": labelTextColor,
|
|
189
|
+
"aria-expanded": isOpen,
|
|
190
|
+
"aria-haspopup": true,
|
|
191
|
+
title: tooltipTextColor,
|
|
192
|
+
onClick: this.toggleOpen,
|
|
193
|
+
onKeyDown: this.onKeyDown,
|
|
194
|
+
ref: this.toolbarItemRef,
|
|
195
|
+
iconBefore: jsx("div", {
|
|
196
|
+
css:
|
|
197
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
|
|
198
|
+
fg('platform-visual-refresh-icons') ?
|
|
199
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
200
|
+
triggerWrapperStylesWithPadding :
|
|
201
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
202
|
+
triggerWrapperStyles
|
|
203
|
+
}, fg('platform-visual-refresh-icons') ? jsx(DynamicStrokeIconDecoration, {
|
|
204
|
+
selectedColor: selectedColor,
|
|
205
|
+
disabled: pluginState.disabled,
|
|
206
|
+
icon: jsx(TextStyleIcon, {
|
|
216
207
|
label: "",
|
|
217
208
|
color: "currentColor",
|
|
218
|
-
|
|
219
|
-
})
|
|
220
|
-
})
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
209
|
+
spacing: "spacious"
|
|
210
|
+
})
|
|
211
|
+
}) : jsx(SteppedRainbowIconDecoration, {
|
|
212
|
+
selectedColor: selectedColor,
|
|
213
|
+
disabled: pluginState.disabled,
|
|
214
|
+
icon: jsx(EditorTextColorIcon, null)
|
|
215
|
+
}),
|
|
216
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
217
|
+
jsx("span", {
|
|
218
|
+
css: expandIconContainerStyle
|
|
219
|
+
}, jsx(ChevronDownIcon, {
|
|
220
|
+
label: "",
|
|
221
|
+
color: "currentColor",
|
|
222
|
+
LEGACY_margin: "0 0 0 -8px"
|
|
223
|
+
})))
|
|
224
|
+
})
|
|
225
|
+
}, jsx("div", {
|
|
226
|
+
"data-testid": "text-color-palette"
|
|
227
|
+
}, jsx(ColorPalette, {
|
|
228
|
+
onClick: color => {
|
|
229
|
+
var _pluginInjectionApi$a;
|
|
230
|
+
return this.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);
|
|
231
|
+
},
|
|
232
|
+
selectedColor: pluginState.color,
|
|
233
|
+
paletteOptions: {
|
|
234
|
+
palette,
|
|
235
|
+
hexToPaletteColor: hexToEditorTextPaletteColor,
|
|
236
|
+
paletteColorTooltipMessages: textPaletteTooltipMessages
|
|
237
|
+
}
|
|
238
|
+
}))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
239
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
240
|
+
jsx("span", {
|
|
241
|
+
css: separatorStyles
|
|
242
|
+
}));
|
|
240
243
|
}
|
|
241
244
|
getSelectedColor(pluginState) {
|
|
242
245
|
const selectedColor = pluginState.color !== pluginState.defaultColor ? pluginState.color ?
|
|
@@ -15,7 +15,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
15
15
|
import React from 'react';
|
|
16
16
|
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
18
|
-
import { jsx } from '@emotion/react';
|
|
18
|
+
import { jsx, css } from '@emotion/react';
|
|
19
19
|
import { injectIntl } from 'react-intl-next';
|
|
20
20
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
21
21
|
import { DynamicStrokeIconDecoration, SteppedRainbowIconDecoration } from '@atlaskit/editor-common/icons';
|
|
@@ -34,6 +34,10 @@ import { ToolbarType } from '../../types';
|
|
|
34
34
|
import { EditorTextColorIcon } from './icon';
|
|
35
35
|
var EXPERIMENT_NAME = 'editor.toolbarTextColor.moreColors';
|
|
36
36
|
var EXPERIMENT_GROUP_CONTROL = 'control';
|
|
37
|
+
var addMarginToWrapper = css({
|
|
38
|
+
marginRight: "var(--ds-space-050, 4px)"
|
|
39
|
+
});
|
|
40
|
+
|
|
37
41
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
38
42
|
export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
|
|
39
43
|
function ToolbarTextColor() {
|
|
@@ -168,88 +172,87 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
|
|
|
168
172
|
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
|
|
169
173
|
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
170
174
|
var reducedSpacing = this.props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
|
|
171
|
-
return (
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
label: "",
|
|
217
|
-
color: "currentColor",
|
|
218
|
-
spacing: "spacious"
|
|
219
|
-
})
|
|
220
|
-
}) : jsx(SteppedRainbowIconDecoration, {
|
|
221
|
-
selectedColor: selectedColor,
|
|
222
|
-
disabled: pluginState.disabled,
|
|
223
|
-
icon: jsx(EditorTextColorIcon, null)
|
|
224
|
-
}),
|
|
225
|
-
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
226
|
-
jsx("span", {
|
|
227
|
-
css: expandIconContainerStyle
|
|
228
|
-
}, jsx(ChevronDownIcon, {
|
|
175
|
+
return jsx("span", {
|
|
176
|
+
css:
|
|
177
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-prefix
|
|
178
|
+
fg('platform-visual-refresh-icons') ? [wrapperStyle, addMarginToWrapper] : wrapperStyle
|
|
179
|
+
}, jsx(Dropdown, {
|
|
180
|
+
mountTo: popupsMountPoint,
|
|
181
|
+
boundariesElement: popupsBoundariesElement,
|
|
182
|
+
scrollableElement: popupsScrollableElement,
|
|
183
|
+
isOpen: isOpen && !pluginState.disabled,
|
|
184
|
+
handleClickOutside: this.hide,
|
|
185
|
+
handleEscapeKeydown: this.hideonEsc,
|
|
186
|
+
zIndex: akEditorMenuZIndex,
|
|
187
|
+
fitWidth: fitWidth,
|
|
188
|
+
closeOnTab: true,
|
|
189
|
+
arrowKeyNavigationProviderOptions: {
|
|
190
|
+
type: ArrowKeyNavigationType.COLOR,
|
|
191
|
+
selectedRowIndex: selectedRowIndex,
|
|
192
|
+
selectedColumnIndex: selectedColumnIndex,
|
|
193
|
+
isOpenedByKeyboard: isOpenedByKeyboard,
|
|
194
|
+
isPopupPositioned: true
|
|
195
|
+
},
|
|
196
|
+
trigger: jsx(ToolbarButton, {
|
|
197
|
+
buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
|
|
198
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
199
|
+
disabled: disabled || pluginState.disabled,
|
|
200
|
+
selected: isOpen,
|
|
201
|
+
"aria-label": labelTextColor,
|
|
202
|
+
"aria-expanded": isOpen,
|
|
203
|
+
"aria-haspopup": true,
|
|
204
|
+
title: tooltipTextColor,
|
|
205
|
+
onClick: this.toggleOpen,
|
|
206
|
+
onKeyDown: this.onKeyDown,
|
|
207
|
+
ref: this.toolbarItemRef,
|
|
208
|
+
iconBefore: jsx("div", {
|
|
209
|
+
css:
|
|
210
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
|
|
211
|
+
fg('platform-visual-refresh-icons') ?
|
|
212
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
213
|
+
triggerWrapperStylesWithPadding :
|
|
214
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
215
|
+
triggerWrapperStyles
|
|
216
|
+
}, fg('platform-visual-refresh-icons') ? jsx(DynamicStrokeIconDecoration, {
|
|
217
|
+
selectedColor: selectedColor,
|
|
218
|
+
disabled: pluginState.disabled,
|
|
219
|
+
icon: jsx(TextStyleIcon, {
|
|
229
220
|
label: "",
|
|
230
221
|
color: "currentColor",
|
|
231
|
-
|
|
232
|
-
})
|
|
233
|
-
})
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
222
|
+
spacing: "spacious"
|
|
223
|
+
})
|
|
224
|
+
}) : jsx(SteppedRainbowIconDecoration, {
|
|
225
|
+
selectedColor: selectedColor,
|
|
226
|
+
disabled: pluginState.disabled,
|
|
227
|
+
icon: jsx(EditorTextColorIcon, null)
|
|
228
|
+
}),
|
|
229
|
+
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
230
|
+
jsx("span", {
|
|
231
|
+
css: expandIconContainerStyle
|
|
232
|
+
}, jsx(ChevronDownIcon, {
|
|
233
|
+
label: "",
|
|
234
|
+
color: "currentColor",
|
|
235
|
+
LEGACY_margin: "0 0 0 -8px"
|
|
236
|
+
})))
|
|
237
|
+
})
|
|
238
|
+
}, jsx("div", {
|
|
239
|
+
"data-testid": "text-color-palette"
|
|
240
|
+
}, jsx(ColorPalette, {
|
|
241
|
+
onClick: function onClick(color) {
|
|
242
|
+
var _pluginInjectionApi$a;
|
|
243
|
+
return _this2.changeTextColor(color, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginState.disabled);
|
|
244
|
+
},
|
|
245
|
+
selectedColor: pluginState.color,
|
|
246
|
+
paletteOptions: {
|
|
247
|
+
palette: palette,
|
|
248
|
+
hexToPaletteColor: hexToEditorTextPaletteColor,
|
|
249
|
+
paletteColorTooltipMessages: textPaletteTooltipMessages
|
|
250
|
+
}
|
|
251
|
+
}))), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
|
|
252
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
253
|
+
jsx("span", {
|
|
254
|
+
css: separatorStyles
|
|
255
|
+
}));
|
|
253
256
|
}
|
|
254
257
|
}, {
|
|
255
258
|
key: "getSelectedColor",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-text-color",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.7",
|
|
4
4
|
"description": "Text color plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,17 +32,17 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^46.1.0",
|
|
35
|
-
"@atlaskit/editor-common": "^98.
|
|
35
|
+
"@atlaskit/editor-common": "^98.2.0",
|
|
36
36
|
"@atlaskit/editor-palette": "1.6.3",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.10.0",
|
|
38
38
|
"@atlaskit/editor-plugin-primary-toolbar": "^2.1.0",
|
|
39
39
|
"@atlaskit/editor-prosemirror": "6.2.1",
|
|
40
40
|
"@atlaskit/editor-shared-styles": "^3.2.0",
|
|
41
41
|
"@atlaskit/editor-tables": "^2.8.0",
|
|
42
|
-
"@atlaskit/icon": "^23.
|
|
42
|
+
"@atlaskit/icon": "^23.2.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
44
44
|
"@atlaskit/theme": "^14.0.0",
|
|
45
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
45
|
+
"@atlaskit/tmp-editor-statsig": "^2.33.0",
|
|
46
46
|
"@atlaskit/tokens": "^2.5.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0",
|
|
48
48
|
"@emotion/react": "^11.7.1"
|
|
@@ -95,5 +95,10 @@
|
|
|
95
95
|
"import-no-extraneous-disable-for-examples-and-docs"
|
|
96
96
|
]
|
|
97
97
|
}
|
|
98
|
+
},
|
|
99
|
+
"platform-feature-flags": {
|
|
100
|
+
"platform-visual-refresh-icons": {
|
|
101
|
+
"type": "boolean"
|
|
102
|
+
}
|
|
98
103
|
}
|
|
99
104
|
}
|