@atlaskit/editor-plugin-text-formatting 5.3.0 → 5.3.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 5.3.1
+
+### Patch Changes
+
+- [`fb6997c75469f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb6997c75469f) -
+  [ux] ED-29319 [CR-6a] Update full page toolbar responstiveness
+- Updated dependencies
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/cjs/ui/Toolbar/components/BoldButtonGroup.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boldButtonGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _types = require("../types");
+var _Component = require("./Component");
+var _utils = require("./utils");
+var BoldButtonGroup = function BoldButtonGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      above: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+};
+var boldButtonGroup = exports.boldButtonGroup = function boldButtonGroup(api) {
+  return [{
+    type: _toolbar.BOLD_BUTTON_GROUP.type,
+    key: _toolbar.BOLD_BUTTON_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.BOLD_BUTTON_GROUP.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(BoldButtonGroup, null, children);
+    }
+  }, {
+    type: _toolbar.BOLD_BUTTON.type,
+    key: _toolbar.BOLD_BUTTON.key,
+    parents: [{
+      type: _toolbar.BOLD_BUTTON_GROUP.type,
+      key: _toolbar.BOLD_BUTTON_GROUP.key,
+      rank: 100
+    }],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      var _formatOptions$strong = (0, _utils.formatOptions)().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

package/dist/cjs/ui/Toolbar/components/TextFormattingGroupForInlineToolbar.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textFormattingGroupForInlineToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _types = require("../types");
+var _Component = require("./Component");
+var _utils = require("./utils");
+var textFormattingGroupForInlineToolbar = exports.textFormattingGroupForInlineToolbar = function textFormattingGroupForInlineToolbar(api) {
+  return [{
+    type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
+    key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION.type,
+      key: _toolbar.TEXT_SECTION.key,
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children);
+    }
+  }, {
+    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON.type,
+    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref2) {
+      var parents = _ref2.parents;
+      var _formatOptions$strong = (0, _utils.formatOptions)().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

package/dist/cjs/ui/Toolbar/components/TextFormattingGroups.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textFormattingGroupForPrimaryToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _types = require("../types");
+var _Component = require("./Component");
+var _utils = require("./utils");
+var TextFormattingGroup = function TextFormattingGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      above: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+};
+var TextFormattingGroupCollapsed = function TextFormattingGroupCollapsed(_ref2) {
+  var children = _ref2.children;
+  var _useEditorToolbar2 = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar2.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      below: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children);
+};
+var textFormattingGroupForPrimaryToolbar = exports.textFormattingGroupForPrimaryToolbar = function textFormattingGroupForPrimaryToolbar(api) {
+  return [{
+    type: _toolbar.TEXT_FORMATTING_GROUP.type,
+    key: _toolbar.TEXT_FORMATTING_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children;
+      return /*#__PURE__*/_react.default.createElement(TextFormattingGroup, null, children);
+    }
+  }, {
+    type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+    key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.TEXT_FORMATTING_GROUP.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(TextFormattingGroupCollapsed, null, children);
+    }
+  }, {
+    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON.type,
+    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_GROUP.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref5) {
+      var parents = _ref5.parents;
+      var _formatOptions$em = (0, _utils.formatOptions)().em,
+        icon = _formatOptions$em.icon,
+        command = _formatOptions$em.command,
+        shortcut = _formatOptions$em.shortcut,
+        title = _formatOptions$em.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.em,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }, {
+    type: _toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.type,
+    key: _toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_COLLAPSED_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON_COLLAPSED.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      var _formatOptions$strong = (0, _utils.formatOptions)().strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

package/dist/cjs/ui/Toolbar/components/TextFormattingMenuGroup.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textFormattingMenuGroup = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _Component = require("./Component");
+var _utils = require("./utils");
+var getFormatMenuItems = function getFormatMenuItems(api) {
+  return Object.entries((0, _utils.formatOptions)()).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      optionType = _ref2[0],
+      _ref2$ = _ref2[1],
+      icon = _ref2$.icon,
+      shortcut = _ref2$.shortcut,
+      title = _ref2$.title,
+      command = _ref2$.command,
+      rank = _ref2$.rank,
+      key = _ref2$.key;
+    return {
+      type: 'menu-item',
+      key: key,
+      parents: [{
+        type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
+        key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
+        rank: rank
+      }],
+      component: function component(_ref3) {
+        var parents = _ref3.parents;
+        return /*#__PURE__*/_react.default.createElement(_Component.FormatMenuItem, {
+          api: api,
+          parents: parents,
+          icon: icon,
+          shortcut: shortcut,
+          title: title,
+          optionType: optionType,
+          toggleMarkWithAnalyticsCallback: command
+        });
+      }
+    };
+  });
+};
+var textFormattingMenuGroup = exports.textFormattingMenuGroup = function textFormattingMenuGroup(api) {
+  return [{
+    type: _toolbar.TEXT_FORMATTING_MENU.type,
+    key: _toolbar.TEXT_FORMATTING_MENU.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_GROUP.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
+    }, {
+      type: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP_COLLAPSED.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
+    }, {
+      type: _toolbar.TEXT_FORMATTING_GROUP_INLINE.type,
+      key: _toolbar.TEXT_FORMATTING_GROUP_INLINE.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(_Component.MoreFormattingMenu, null, children);
+    }
+  }, {
+    type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
+    key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_MENU.type,
+      key: _toolbar.TEXT_FORMATTING_MENU.key,
+      rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
+    }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: _toolbar.TEXT_COLLAPSED_MENU.type,
+      key: _toolbar.TEXT_COLLAPSED_MENU.key,
+      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
+    }] : [])),
+    component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _Component.MenuSection : undefined
+  }].concat((0, _toConsumableArray2.default)(getFormatMenuItems(api)), [{
+    type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
+    key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.TEXT_FORMATTING_MENU.type,
+      key: _toolbar.TEXT_FORMATTING_MENU.key,
+      rank: _toolbar.TEXT_FORMAT_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
+    }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
+      type: _toolbar.TEXT_COLLAPSED_MENU.type,
+      key: _toolbar.TEXT_COLLAPSED_MENU.key,
+      rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
+    }] : [])),
+    component: function component(_ref5) {
+      var children = _ref5.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
+  }, {
+    type: _toolbar.CLEAR_FORMATTING_MENU_ITEM.type,
+    key: _toolbar.CLEAR_FORMATTING_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
+      key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
+      rank: _toolbar.CLEAR_FORMARTTING_MENU_SECTION_RANK[_toolbar.CLEAR_FORMATTING_MENU_ITEM.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Component.ClearFormatMenuItem, {
+        parents: parents,
+        api: api
+      }));
+    }
+  }]);
+};

package/dist/cjs/ui/Toolbar/components/UnderlineButtonGroup.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.underlineButtonGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _types = require("../types");
+var _Component = require("./Component");
+var _utils = require("./utils");
+var UnderlineButtonGroup = function UnderlineButtonGroup(_ref) {
+  var children = _ref.children;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
+      above: "xl"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
+  }
+};
+var underlineButtonGroup = exports.underlineButtonGroup = function underlineButtonGroup(api) {
+  return [{
+    type: _toolbar.UNDERLINE_BUTTON_GROUP.type,
+    key: _toolbar.UNDERLINE_BUTTON_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.type,
+      key: _toolbar.TEXT_SECTION_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.UNDERLINE_BUTTON_GROUP.key]
+    }],
+    component: function component(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react.default.createElement(UnderlineButtonGroup, null, children);
+    }
+  }, {
+    type: _toolbar.UNDERLINE_BUTTON.type,
+    key: _toolbar.UNDERLINE_BUTTON.key,
+    parents: [{
+      type: _toolbar.UNDERLINE_BUTTON_GROUP.type,
+      key: _toolbar.UNDERLINE_BUTTON_GROUP.key,
+      rank: 100
+    }],
+    component: function component(_ref3) {
+      var parents = _ref3.parents;
+      var _formatOptions$underl = (0, _utils.formatOptions)().underline,
+        icon = _formatOptions$underl.icon,
+        command = _formatOptions$underl.command,
+        shortcut = _formatOptions$underl.shortcut,
+        title = _formatOptions$underl.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.underline,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }];
+};

package/dist/cjs/ui/toolbar-components.js

@@ -4,52 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarComponents = void 0;
+exports.getToolbarComponentsResponsivenessUpdate = exports.getToolbarComponents = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _BoldButtonGroup = require("./Toolbar/components/BoldButtonGroup");
 var _Component = require("./Toolbar/components/Component");
+var _TextFormattingGroupForInlineToolbar = require("./Toolbar/components/TextFormattingGroupForInlineToolbar");
+var _TextFormattingGroups = require("./Toolbar/components/TextFormattingGroups");
+var _TextFormattingMenuGroup = require("./Toolbar/components/TextFormattingMenuGroup");
+var _UnderlineButtonGroup = require("./Toolbar/components/UnderlineButtonGroup");
 var _utils = require("./Toolbar/components/utils");
 var _types = require("./Toolbar/types");
-var getFormatMenuItems = function getFormatMenuItems(api) {
-  return Object.entries((0, _utils.formatOptions)()).map(function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-      optionType = _ref2[0],
-      _ref2$ = _ref2[1],
-      icon = _ref2$.icon,
-      shortcut = _ref2$.shortcut,
-      title = _ref2$.title,
-      command = _ref2$.command,
-      rank = _ref2$.rank,
-      key = _ref2$.key;
-    return {
-      type: 'menu-item',
-      key: key,
-      parents: [{
-        type: _toolbar.TEXT_FORMATTING_MENU_SECTION.type,
-        key: _toolbar.TEXT_FORMATTING_MENU_SECTION.key,
-        rank: rank
-      }],
-      component: function component(_ref3) {
-        var parents = _ref3.parents;
-        return /*#__PURE__*/_react.default.createElement(_Component.FormatMenuItem, {
-          api: api,
-          parents: parents,
-          icon: icon,
-          shortcut: shortcut,
-          title: title,
-          optionType: optionType,
-          toggleMarkWithAnalyticsCallback: command
-        });
-      }
-    };
-  });
-};
 var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
-  return [{
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsiveness_update', 'isEnabled', true) ? getToolbarComponentsResponsivenessUpdate(api) : [{
     type: _toolbar.TEXT_FORMATTING_GROUP.type,
     key: _toolbar.TEXT_FORMATTING_GROUP.key,
     parents: [{
@@ -65,8 +35,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TEXT_FORMATTING_GROUP.key,
       rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_HERO_BUTTON.key]
     }],
-    component: function component(_ref4) {
-      var parents = _ref4.parents;
+    component: function component(_ref) {
+      var parents = _ref.parents;
       var _formatOptions$strong = (0, _utils.formatOptions)().strong,
         icon = _formatOptions$strong.icon,
         command = _formatOptions$strong.command,
@@ -90,8 +60,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TEXT_FORMATTING_GROUP.key,
       rank: _toolbar.TEXT_FORMAT_GROUP_RANK[_toolbar.TEXT_FORMATTING_MENU.key]
     }],
-    component: function component(_ref5) {
-      var children = _ref5.children;
+    component: function component(_ref2) {
+      var children = _ref2.children;
       return /*#__PURE__*/_react.default.createElement(_Component.MoreFormattingMenu, null, children);
     }
   }, {
@@ -107,7 +77,7 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.TEXT_FORMATTING_MENU_SECTION.key]
     }] : [])),
     component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _Component.MenuSection : undefined
-  }].concat((0, _toConsumableArray2.default)(getFormatMenuItems(api)), [{
+  }, {
     type: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.type,
     key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
     parents: [{
@@ -119,8 +89,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.TEXT_COLLAPSED_MENU.key,
       rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.CLEAR_FORMARTTING_MENU_SECTION.key]
     }] : [])),
-    component: function component(_ref6) {
-      var children = _ref6.children;
+    component: function component(_ref3) {
+      var children = _ref3.children;
       return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
         hasSeparator: true
       }, children);
@@ -133,12 +103,15 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
       key: _toolbar.CLEAR_FORMARTTING_MENU_SECTION.key,
       rank: _toolbar.CLEAR_FORMARTTING_MENU_SECTION_RANK[_toolbar.CLEAR_FORMATTING_MENU_ITEM.key]
     }],
-    component: function component(_ref7) {
-      var parents = _ref7.parents;
+    component: function component(_ref4) {
+      var parents = _ref4.parents;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Component.ClearFormatMenuItem, {
         parents: parents,
         api: api
       }));
     }
-  }]);
+  }];
+};
+var getToolbarComponentsResponsivenessUpdate = exports.getToolbarComponentsResponsivenessUpdate = function getToolbarComponentsResponsivenessUpdate(api) {
+  return [].concat((0, _toConsumableArray2.default)((0, _TextFormattingGroups.textFormattingGroupForPrimaryToolbar)(api)), (0, _toConsumableArray2.default)((0, _TextFormattingGroupForInlineToolbar.textFormattingGroupForInlineToolbar)(api)), (0, _toConsumableArray2.default)((0, _BoldButtonGroup.boldButtonGroup)(api)), (0, _toConsumableArray2.default)((0, _UnderlineButtonGroup.underlineButtonGroup)(api)), (0, _toConsumableArray2.default)((0, _TextFormattingMenuGroup.textFormattingMenuGroup)(api)));
 };

package/dist/es2019/ui/Toolbar/components/BoldButtonGroup.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BOLD_BUTTON_GROUP, BOLD_BUTTON, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_FORMAT_GROUP_RANK, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+const BoldButtonGroup = ({
+  children
+}) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  if (editorAppearance === 'full-page') {
+    return /*#__PURE__*/React.createElement(Show, {
+      above: "xl"
+    }, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
+  }
+};
+export const boldButtonGroup = api => [{
+  type: BOLD_BUTTON_GROUP.type,
+  key: BOLD_BUTTON_GROUP.key,
+  parents: [{
+    type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
+    key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
+    rank: TEXT_FORMAT_GROUP_RANK[BOLD_BUTTON_GROUP.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(BoldButtonGroup, null, children);
+  }
+}, {
+  type: BOLD_BUTTON.type,
+  key: BOLD_BUTTON.key,
+  parents: [{
+    type: BOLD_BUTTON_GROUP.type,
+    key: BOLD_BUTTON_GROUP.key,
+    rank: 100
+  }],
+  component: ({
+    parents
+  }) => {
+    const {
+      icon,
+      command,
+      shortcut,
+      title
+    } = formatOptions().strong;
+    return /*#__PURE__*/React.createElement(FormatButton, {
+      api: api,
+      parents: parents,
+      icon: icon,
+      title: title,
+      shortcut: shortcut,
+      optionType: FormatOptions.strong,
+      toggleMarkWithAnalyticsCallback: command
+    });
+  }
+}];

package/dist/es2019/ui/Toolbar/components/TextFormattingGroupForInlineToolbar.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TEXT_FORMATTING_GROUP_INLINE, TEXT_FORMATTING_HERO_BUTTON, TEXT_SECTION, TEXT_SECTION_RANK, TEXT_FORMATTING_GROUP, TEXT_FORMAT_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
+import { ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
+import { FormatOptions } from '../types';
+import { FormatButton } from './Component';
+import { formatOptions } from './utils';
+export const textFormattingGroupForInlineToolbar = api => [{
+  type: TEXT_FORMATTING_GROUP_INLINE.type,
+  key: TEXT_FORMATTING_GROUP_INLINE.key,
+  parents: [{
+    type: TEXT_SECTION.type,
+    key: TEXT_SECTION.key,
+    rank: TEXT_SECTION_RANK[TEXT_FORMATTING_GROUP.key]
+  }],
+  component: ({
+    children
+  }) => {
+    return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children);
+  }
+}, {
+  type: TEXT_FORMATTING_HERO_BUTTON.type,
+  key: TEXT_FORMATTING_HERO_BUTTON.key,
+  parents: [{
+    type: TEXT_FORMATTING_GROUP_INLINE.type,
+    key: TEXT_FORMATTING_GROUP_INLINE.key,
+    rank: TEXT_FORMAT_GROUP_RANK[TEXT_FORMATTING_HERO_BUTTON.key]
+  }],
+  component: ({
+    parents
+  }) => {
+    const {
+      icon,
+      command,
+      shortcut,
+      title
+    } = formatOptions().strong;
+    return /*#__PURE__*/React.createElement(FormatButton, {
+      api: api,
+      parents: parents,
+      icon: icon,
+      title: title,
+      shortcut: shortcut,
+      optionType: FormatOptions.strong,
+      toggleMarkWithAnalyticsCallback: command
+    });
+  }
+}];