@atlaskit/editor-plugin-toolbar-lists-indentation 3.2.0 → 3.2.2

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 (8) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/ToolbarDropdown.js +42 -10
  3. package/dist/cjs/ui/index.js +3 -1
  4. package/dist/es2019/ui/ToolbarDropdown.js +42 -10
  5. package/dist/es2019/ui/index.js +3 -1
  6. package/dist/esm/ui/ToolbarDropdown.js +42 -10
  7. package/dist/esm/ui/index.js +3 -1
  8. package/package.json +13 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-toolbar-lists-indentation
2
2
 
3
+ ## 3.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#142312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142312)
14
+ [`21eed5379866d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21eed5379866d) -
15
+ [ux] Add icons to the list-indentation dropdown options and show active list option in the
16
+ toolbar.
17
+ - Updated dependencies
18
+
3
19
  ## 3.2.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/ui/ToolbarDropdown.js CHANGED
@@ -14,7 +14,13 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
14
14
  var _messages = require("@atlaskit/editor-common/messages");
15
15
  var _ui = require("@atlaskit/editor-common/ui");
16
16
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
17
+ var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
18
+ var _listNumbered = _interopRequireDefault(require("@atlaskit/icon/core/list-numbered"));
17
19
  var _listBulletedEditorBulletList = _interopRequireDefault(require("@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list"));
20
+ var _textIndentLeft = _interopRequireDefault(require("@atlaskit/icon/core/text-indent-left"));
21
+ var _textIndentRight = _interopRequireDefault(require("@atlaskit/icon/core/text-indent-right"));
22
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
23
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
24
  var _types = require("../types");
19
25
  function ToolbarDropdown(props) {
20
26
  var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -67,6 +73,24 @@ function ToolbarDropdown(props) {
67
73
  });
68
74
  };
69
75
  var reducedSpacing = props.toolbarType === _types.ToolbarType.FLOATING ? 'compact' : 'none';
76
+ var activeListIcon = null;
77
+ var isSelected = isDropdownOpen;
78
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
79
+ activeListIcon = orderedListActive ? /*#__PURE__*/_react.default.createElement(_listNumbered.default, {
80
+ spacing: "spacious",
81
+ label: ""
82
+ }) : /*#__PURE__*/_react.default.createElement(_listBulleted.default, {
83
+ spacing: "spacious",
84
+ label: ""
85
+ });
86
+ } else {
87
+ activeListIcon = /*#__PURE__*/_react.default.createElement(_listBulletedEditorBulletList.default, {
88
+ color: "currentColor",
89
+ spacing: "spacious",
90
+ label: labelLists
91
+ });
92
+ isSelected = bulletListActive || orderedListActive || isDropdownOpen;
93
+ }
70
94
  return /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownWrapper, null, /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
71
95
  items: items,
72
96
  onItemActivated: handleOnItemActivated,
@@ -86,7 +110,7 @@ function ToolbarDropdown(props) {
86
110
  }
87
111
  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
88
112
  spacing: isReducedSpacing ? reducedSpacing : 'default',
89
- selected: bulletListActive || orderedListActive || isDropdownOpen,
113
+ selected: isSelected,
90
114
  "aria-expanded": isDropdownOpen,
91
115
  "aria-haspopup": true,
92
116
  "aria-label": labelLists,
@@ -94,11 +118,7 @@ function ToolbarDropdown(props) {
94
118
  onClick: handleTriggerClick,
95
119
  onKeyDown: handleOnKeyDown,
96
120
  title: labelLists,
97
- iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_listBulletedEditorBulletList.default, {
98
- color: "currentColor",
99
- spacing: "spacious",
100
- label: labelLists
101
- }), /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null))
121
+ iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, activeListIcon, /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null))
102
122
  })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/_react.default.createElement(_ui.ToolbarSeparator, null));
103
123
  }
104
124
  function useItems(props) {
@@ -114,7 +134,10 @@ function useItems(props) {
114
134
  },
115
135
  isDisabled: props.bulletListDisabled,
116
136
  isActive: Boolean(props.bulletListActive),
117
- elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.toggleBulletList))
137
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.toggleBulletList)),
138
+ elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? /*#__PURE__*/_react.default.createElement(_listBulleted.default, {
139
+ label: ""
140
+ }) : undefined
118
141
  }, {
119
142
  key: 'orderedList',
120
143
  content: labelOrderedList,
@@ -123,7 +146,10 @@ function useItems(props) {
123
146
  },
124
147
  isDisabled: props.orderedListDisabled,
125
148
  isActive: Boolean(props.orderedListActive),
126
- elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList))
149
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.toggleOrderedList)),
150
+ elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? /*#__PURE__*/_react.default.createElement(_listNumbered.default, {
151
+ label: ""
152
+ }) : undefined
127
153
  }];
128
154
  if (props.showIndentationButtons) {
129
155
  var labelIndent = formatMessage(_messages.indentationMessages.indent);
@@ -136,7 +162,10 @@ function useItems(props) {
136
162
  },
137
163
  isDisabled: props.outdentDisabled,
138
164
  isActive: false,
139
- elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.outdent))
165
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.outdent)),
166
+ elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? /*#__PURE__*/_react.default.createElement(_textIndentLeft.default, {
167
+ label: ""
168
+ }) : undefined
140
169
  }, {
141
170
  key: 'indent',
142
171
  content: labelIndent,
@@ -145,7 +174,10 @@ function useItems(props) {
145
174
  },
146
175
  isDisabled: props.indentDisabled,
147
176
  isActive: false,
148
- elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.indent))
177
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.indent)),
178
+ elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? /*#__PURE__*/_react.default.createElement(_textIndentRight.default, {
179
+ label: ""
180
+ }) : undefined
149
181
  });
150
182
  }
151
183
  return [{
package/dist/cjs/ui/index.js CHANGED
@@ -9,6 +9,8 @@ exports.default = ToolbarListsIndentation;
9
9
  var React = _interopRequireWildcard(require("react"));
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _analytics = require("@atlaskit/editor-common/analytics");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
14
  var _types = require("../types");
13
15
  var _onItemActivated = require("./onItemActivated");
14
16
  var _Toolbar = require("./Toolbar");
@@ -35,7 +37,7 @@ function ToolbarListsIndentation(props) {
35
37
  pluginInjectionApi = props.pluginInjectionApi,
36
38
  toolbarType = props.toolbarType;
37
39
  var inputMethod = toolbarType ? (0, _inputMethod.getInputMethod)(toolbarType) : _analytics.INPUT_METHOD.TOOLBAR;
38
- if (isSmall || toolbarType === _types.ToolbarType.FLOATING) {
40
+ if (isSmall || toolbarType === _types.ToolbarType.FLOATING || (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
39
41
  var areAllOptionsDisabled = [bulletListDisabled, orderedListDisabled, indentDisabled, outdentDisabled].every(function (item) {
40
42
  return Boolean(item) === true;
41
43
  });
package/dist/es2019/ui/ToolbarDropdown.js CHANGED
@@ -6,7 +6,13 @@ import { toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeyma
6
6
  import { indentationMessages, listMessages } from '@atlaskit/editor-common/messages';
7
7
  import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
8
8
  import { DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
9
+ import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
10
+ import ListNumberedIcon from '@atlaskit/icon/core/list-numbered';
9
11
  import BulletListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
12
+ import TextIndentLeftIcon from '@atlaskit/icon/core/text-indent-left';
13
+ import TextIndentRightIcon from '@atlaskit/icon/core/text-indent-right';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
16
  import { ToolbarType } from '../types';
11
17
  export function ToolbarDropdown(props) {
12
18
  const {
@@ -56,6 +62,24 @@ export function ToolbarDropdown(props) {
56
62
  });
57
63
  };
58
64
  const reducedSpacing = props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
65
+ let activeListIcon = null;
66
+ let isSelected = isDropdownOpen;
67
+ if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
68
+ activeListIcon = orderedListActive ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
69
+ spacing: "spacious",
70
+ label: ""
71
+ }) : /*#__PURE__*/React.createElement(ListBulletedIcon, {
72
+ spacing: "spacious",
73
+ label: ""
74
+ });
75
+ } else {
76
+ activeListIcon = /*#__PURE__*/React.createElement(BulletListIcon, {
77
+ color: "currentColor",
78
+ spacing: "spacious",
79
+ label: labelLists
80
+ });
81
+ isSelected = bulletListActive || orderedListActive || isDropdownOpen;
82
+ }
59
83
  return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
60
84
  items: items,
61
85
  onItemActivated: handleOnItemActivated,
@@ -75,7 +99,7 @@ export function ToolbarDropdown(props) {
75
99
  }
76
100
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
77
101
  spacing: isReducedSpacing ? reducedSpacing : 'default',
78
- selected: bulletListActive || orderedListActive || isDropdownOpen,
102
+ selected: isSelected,
79
103
  "aria-expanded": isDropdownOpen,
80
104
  "aria-haspopup": true,
81
105
  "aria-label": labelLists,
@@ -83,11 +107,7 @@ export function ToolbarDropdown(props) {
83
107
  onClick: handleTriggerClick,
84
108
  onKeyDown: handleOnKeyDown,
85
109
  title: labelLists,
86
- iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
87
- color: "currentColor",
88
- spacing: "spacious",
89
- label: labelLists
90
- }), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
110
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, activeListIcon, /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
91
111
  })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
92
112
  }
93
113
  function useItems(props) {
@@ -104,7 +124,10 @@ function useItems(props) {
104
124
  },
105
125
  isDisabled: props.bulletListDisabled,
106
126
  isActive: Boolean(props.bulletListActive),
107
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
127
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap)),
128
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(ListBulletedIcon, {
129
+ label: ""
130
+ }) : undefined
108
131
  }, {
109
132
  key: 'orderedList',
110
133
  content: labelOrderedList,
@@ -113,7 +136,10 @@ function useItems(props) {
113
136
  },
114
137
  isDisabled: props.orderedListDisabled,
115
138
  isActive: Boolean(props.orderedListActive),
116
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
139
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap)),
140
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
141
+ label: ""
142
+ }) : undefined
117
143
  }];
118
144
  if (props.showIndentationButtons) {
119
145
  const labelIndent = formatMessage(indentationMessages.indent);
@@ -126,7 +152,10 @@ function useItems(props) {
126
152
  },
127
153
  isDisabled: props.outdentDisabled,
128
154
  isActive: false,
129
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap))
155
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap)),
156
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(TextIndentLeftIcon, {
157
+ label: ""
158
+ }) : undefined
130
159
  }, {
131
160
  key: 'indent',
132
161
  content: labelIndent,
@@ -135,7 +164,10 @@ function useItems(props) {
135
164
  },
136
165
  isDisabled: props.indentDisabled,
137
166
  isActive: false,
138
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap))
167
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap)),
168
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(TextIndentRightIcon, {
169
+ label: ""
170
+ }) : undefined
139
171
  });
140
172
  }
141
173
  return [{
package/dist/es2019/ui/index.js CHANGED
@@ -2,6 +2,8 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
7
  import { ToolbarType } from '../types';
6
8
  import { onItemActivated } from './onItemActivated';
7
9
  import { Toolbar } from './Toolbar';
@@ -28,7 +30,7 @@ export default function ToolbarListsIndentation(props) {
28
30
  toolbarType
29
31
  } = props;
30
32
  const inputMethod = toolbarType ? getInputMethod(toolbarType) : INPUT_METHOD.TOOLBAR;
31
- if (isSmall || toolbarType === ToolbarType.FLOATING) {
33
+ if (isSmall || toolbarType === ToolbarType.FLOATING || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
32
34
  const areAllOptionsDisabled = [bulletListDisabled, orderedListDisabled, indentDisabled, outdentDisabled].every(item => Boolean(item) === true);
33
35
  const isDisabled = disabled || areAllOptionsDisabled;
34
36
  return /*#__PURE__*/React.createElement(ToolbarDropdown, {
package/dist/esm/ui/ToolbarDropdown.js CHANGED
@@ -7,7 +7,13 @@ import { toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeyma
7
7
  import { indentationMessages, listMessages } from '@atlaskit/editor-common/messages';
8
8
  import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
9
9
  import { DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
10
+ import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
11
+ import ListNumberedIcon from '@atlaskit/icon/core/list-numbered';
10
12
  import BulletListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
13
+ import TextIndentLeftIcon from '@atlaskit/icon/core/text-indent-left';
14
+ import TextIndentRightIcon from '@atlaskit/icon/core/text-indent-right';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
16
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
17
  import { ToolbarType } from '../types';
12
18
  export function ToolbarDropdown(props) {
13
19
  var _useIntl = useIntl(),
@@ -60,6 +66,24 @@ export function ToolbarDropdown(props) {
60
66
  });
61
67
  };
62
68
  var reducedSpacing = props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
69
+ var activeListIcon = null;
70
+ var isSelected = isDropdownOpen;
71
+ if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
72
+ activeListIcon = orderedListActive ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
73
+ spacing: "spacious",
74
+ label: ""
75
+ }) : /*#__PURE__*/React.createElement(ListBulletedIcon, {
76
+ spacing: "spacious",
77
+ label: ""
78
+ });
79
+ } else {
80
+ activeListIcon = /*#__PURE__*/React.createElement(BulletListIcon, {
81
+ color: "currentColor",
82
+ spacing: "spacious",
83
+ label: labelLists
84
+ });
85
+ isSelected = bulletListActive || orderedListActive || isDropdownOpen;
86
+ }
63
87
  return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
64
88
  items: items,
65
89
  onItemActivated: handleOnItemActivated,
@@ -79,7 +103,7 @@ export function ToolbarDropdown(props) {
79
103
  }
80
104
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
81
105
  spacing: isReducedSpacing ? reducedSpacing : 'default',
82
- selected: bulletListActive || orderedListActive || isDropdownOpen,
106
+ selected: isSelected,
83
107
  "aria-expanded": isDropdownOpen,
84
108
  "aria-haspopup": true,
85
109
  "aria-label": labelLists,
@@ -87,11 +111,7 @@ export function ToolbarDropdown(props) {
87
111
  onClick: handleTriggerClick,
88
112
  onKeyDown: handleOnKeyDown,
89
113
  title: labelLists,
90
- iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
91
- color: "currentColor",
92
- spacing: "spacious",
93
- label: labelLists
94
- }), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
114
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, activeListIcon, /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
95
115
  })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
96
116
  }
97
117
  function useItems(props) {
@@ -107,7 +127,10 @@ function useItems(props) {
107
127
  },
108
128
  isDisabled: props.bulletListDisabled,
109
129
  isActive: Boolean(props.bulletListActive),
110
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
130
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap)),
131
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(ListBulletedIcon, {
132
+ label: ""
133
+ }) : undefined
111
134
  }, {
112
135
  key: 'orderedList',
113
136
  content: labelOrderedList,
@@ -116,7 +139,10 @@ function useItems(props) {
116
139
  },
117
140
  isDisabled: props.orderedListDisabled,
118
141
  isActive: Boolean(props.orderedListActive),
119
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
142
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap)),
143
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
144
+ label: ""
145
+ }) : undefined
120
146
  }];
121
147
  if (props.showIndentationButtons) {
122
148
  var labelIndent = formatMessage(indentationMessages.indent);
@@ -129,7 +155,10 @@ function useItems(props) {
129
155
  },
130
156
  isDisabled: props.outdentDisabled,
131
157
  isActive: false,
132
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap))
158
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap)),
159
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(TextIndentLeftIcon, {
160
+ label: ""
161
+ }) : undefined
133
162
  }, {
134
163
  key: 'indent',
135
164
  content: labelIndent,
@@ -138,7 +167,10 @@ function useItems(props) {
138
167
  },
139
168
  isDisabled: props.indentDisabled,
140
169
  isActive: false,
141
- elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap))
170
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap)),
171
+ elemBefore: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(TextIndentRightIcon, {
172
+ label: ""
173
+ }) : undefined
142
174
  });
143
175
  }
144
176
  return [{
package/dist/esm/ui/index.js CHANGED
@@ -2,6 +2,8 @@
2
2
  import * as React from 'react';
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
6
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
5
7
  import { ToolbarType } from '../types';
6
8
  import { onItemActivated } from './onItemActivated';
7
9
  import { Toolbar } from './Toolbar';
@@ -26,7 +28,7 @@ export default function ToolbarListsIndentation(props) {
26
28
  pluginInjectionApi = props.pluginInjectionApi,
27
29
  toolbarType = props.toolbarType;
28
30
  var inputMethod = toolbarType ? getInputMethod(toolbarType) : INPUT_METHOD.TOOLBAR;
29
- if (isSmall || toolbarType === ToolbarType.FLOATING) {
31
+ if (isSmall || toolbarType === ToolbarType.FLOATING || editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6')) {
30
32
  var areAllOptionsDisabled = [bulletListDisabled, orderedListDisabled, indentDisabled, outdentDisabled].every(function (item) {
31
33
  return Boolean(item) === true;
32
34
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-toolbar-lists-indentation",
3
- "version": "3.2.0",
3
+ "version": "3.2.2",
4
4
  "description": "Toolbar lists and indentation plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/css": "^0.10.0",
37
- "@atlaskit/editor-common": "^103.4.0",
37
+ "@atlaskit/editor-common": "^104.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-block-type": "^5.1.0",
40
40
  "@atlaskit/editor-plugin-feature-flags": "^1.4.0",
41
41
  "@atlaskit/editor-plugin-indentation": "^2.1.0",
42
42
  "@atlaskit/editor-plugin-list": "^4.2.0",
43
43
  "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
44
- "@atlaskit/editor-plugin-selection-toolbar": "^3.4.0",
44
+ "@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
45
45
  "@atlaskit/editor-plugin-tasks-and-decisions": "^5.1.0",
46
46
  "@atlaskit/editor-prosemirror": "7.0.0",
47
47
  "@atlaskit/editor-shared-styles": "^3.4.0",
48
- "@atlaskit/icon": "^25.5.0",
48
+ "@atlaskit/icon": "^25.6.0",
49
49
  "@atlaskit/platform-feature-flags": "^1.1.0",
50
- "@atlaskit/tmp-editor-statsig": "^4.6.0",
51
- "@atlaskit/tokens": "^4.7.0",
50
+ "@atlaskit/tmp-editor-statsig": "^4.16.0",
51
+ "@atlaskit/tokens": "^4.8.0",
52
52
  "@babel/runtime": "^7.0.0"
53
53
  },
54
54
  "peerDependencies": {
@@ -57,14 +57,14 @@
57
57
  "react-intl-next": "npm:react-intl@^5.18.1"
58
58
  },
59
59
  "devDependencies": {
60
- "@af/integration-testing": "^0.5.0",
61
- "@af/visual-regression": "^1.3.0",
60
+ "@af/integration-testing": "workspace:^",
61
+ "@af/visual-regression": "workspace:^",
62
62
  "@atlaskit/adf-schema": "^47.6.0",
63
63
  "@atlaskit/analytics-next": "^11.0.0",
64
64
  "@atlaskit/editor-plugin-base": "^2.3.0",
65
65
  "@atlaskit/editor-plugin-text-formatting": "^2.2.0",
66
- "@atlaskit/ssr": "^0.4.0",
67
- "@atlaskit/visual-regression": "^0.10.0",
66
+ "@atlaskit/ssr": "workspace:^",
67
+ "@atlaskit/visual-regression": "workspace:^",
68
68
  "@testing-library/react": "^13.4.0",
69
69
  "typescript": "~5.4.2",
70
70
  "wait-for-expect": "^1.2.0"
@@ -107,6 +107,9 @@
107
107
  "platform-feature-flags": {
108
108
  "platform-visual-refresh-icons": {
109
109
  "type": "boolean"
110
+ },
111
+ "platform_editor_controls_patch_6": {
112
+ "type": "boolean"
110
113
  }
111
114
  }
112
115
  }