@atlaskit/editor-toolbar 0.0.10 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-toolbar
 
+## 0.1.1
+
+### Patch Changes
+
+- [`428e4e6ff8ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/428e4e6ff8ac9) -
+  ED-28683 remove textStyle option from ToolbarDropdownItem, apply this style from the children
+  instead
+- [#197017](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197017)
+  [`5ef01d09bada1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ef01d09bada1) -
+  [ux] ED-28687 [Register] Text colour + highlight
+
+## 0.1.0
+
+### Minor Changes
+
+- [#196043](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196043)
+  [`c6cb0ed855827`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6cb0ed855827) -
+  Add new ShowMoreHorizontal Icon, add new ranks to support overflow menu, add pin as a menu item
+
 ## 0.0.10
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -201,6 +201,12 @@ Object.defineProperty(exports, "QuoteIcon", {
     return _QuoteIcon.QuoteIcon;
   }
 });
+Object.defineProperty(exports, "ShowMoreHorizontalIcon", {
+  enumerable: true,
+  get: function get() {
+    return _ShowMoreHorizontal.ShowMoreHorizontalIcon;
+  }
+});
 Object.defineProperty(exports, "StrikeThroughIcon", {
   enumerable: true,
   get: function get() {
@@ -249,6 +255,12 @@ Object.defineProperty(exports, "ToolbarButtonGroup", {
     return _ToolbarButtonGroup.ToolbarButtonGroup;
   }
 });
+Object.defineProperty(exports, "ToolbarColorSwatch", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarColorSwatch.ToolbarColorSwatch;
+  }
+});
 Object.defineProperty(exports, "ToolbarDropdownDivider", {
   enumerable: true,
   get: function get() {
@@ -314,6 +326,7 @@ var _ToolbarSection = require("./ui/ToolbarSection");
 var _ToolbarTooltip = require("./ui/ToolbarTooltip");
 var _ToolbarNestedDropdownMenu = require("./ui/ToolbarNestedDropdownMenu");
 var _ToolbarDropdownDivider = require("./ui/ToolbarDropdownDivider");
+var _ToolbarColorSwatch = require("./ui/ToolbarColorSwatch");
 var _AIAdjustLengthIcon = require("./ui/icons/AIAdjustLengthIcon");
 var _AIChatIcon = require("./ui/icons/AIChatIcon");
 var _AIProfessionalIcon = require("./ui/icons/AIProfessionalIcon");
@@ -352,4 +365,5 @@ var _UnderlineIcon = require("./ui/icons/UnderlineIcon");
 var _StrikeThroughIcon = require("./ui/icons/StrikeThroughIcon");
 var _CodeIcon = require("./ui/icons/CodeIcon");
 var _SubscriptIcon = require("./ui/icons/SubscriptIcon");
-var _SuperscriptIcon = require("./ui/icons/SuperscriptIcon");
+var _SuperscriptIcon = require("./ui/icons/SuperscriptIcon");
+var _ShowMoreHorizontal = require("./ui/icons/ShowMoreHorizontal");

package/dist/cjs/ui/ToolbarButton.js

@@ -35,7 +35,8 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     testId = _ref.testId,
     groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
-    ariaKeyshortcuts = _ref.ariaKeyshortcuts;
+    ariaKeyshortcuts = _ref.ariaKeyshortcuts,
+    label = _ref.label;
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
     xcss: (0, _css.cx)(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
@@ -44,6 +45,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
     "aria-keyshortcuts": ariaKeyshortcuts,
+    "aria-label": label,
     "data-ds--level": dataDsLevel,
     onClick: onClick,
     onBlur: onBlur,

package/dist/cjs/ui/ToolbarDropdownItem.compiled.css

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -17,14 +17,7 @@ var styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
@@ -54,8 +47,6 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     elemAfter = _ref2.elemAfter,
     isSelected = _ref2.isSelected,
     children = _ref2.children,
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? 'normal' : _ref2$textStyle,
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
@@ -73,7 +64,5 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/cjs/ui/ToolbarDropdownMenu.js

@@ -13,7 +13,8 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
     groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    label = _ref.label;
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
@@ -28,7 +29,8 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
         testId: testId,
         iconBefore: iconBefore,
         groupLocation: groupLocation,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        label: label
       });
     }
   }, children);

package/dist/cjs/ui/icons/ShowMoreHorizontal.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShowMoreHorizontalIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var ShowMoreHorizontalIcon = exports.ShowMoreHorizontalIcon = function ShowMoreHorizontalIcon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId,
+    color = _ref.color,
+    shouldRecommendSmallIcon = _ref.shouldRecommendSmallIcon,
+    spacing = _ref.spacing;
+  return /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
+    label: label,
+    testId: testId,
+    color: color,
+    shouldRecommendSmallIcon: shouldRecommendSmallIcon,
+    spacing: spacing,
+    size: "small"
+  });
+};

package/dist/es2019/index.js

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -48,4 +49,5 @@ export { UnderlineIcon } from './ui/icons/UnderlineIcon';
 export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
-export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';

package/dist/es2019/ui/ToolbarButton.js

@@ -27,7 +27,8 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   testId,
   groupLocation,
   isDisabled,
-  ariaKeyshortcuts
+  ariaKeyshortcuts,
+  label
 }, ref) => {
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
@@ -37,6 +38,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
     "aria-keyshortcuts": ariaKeyshortcuts,
+    "aria-label": label,
     "data-ds--level": dataDsLevel,
     onClick: onClick,
     onBlur: onBlur,

package/dist/es2019/ui/ToolbarDropdownItem.compiled.css

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -4,19 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   children,
@@ -45,7 +38,6 @@ export const ToolbarDropdownItem = ({
   elemAfter,
   isSelected,
   children,
-  textStyle = 'normal',
   isDisabled,
   hasNestedDropdownMenu,
   triggerRef,
@@ -63,6 +55,4 @@ export const ToolbarDropdownItem = ({
   ref: triggerRef,
   component: CustomDropdownMenuItemButton,
   testId: testId
-}, /*#__PURE__*/React.createElement(Box, {
-  xcss: styles[textStyle]
-}, children));
+}, children);

package/dist/es2019/ui/ToolbarDropdownMenu.js

@@ -6,7 +6,8 @@ export const ToolbarDropdownMenu = ({
   groupLocation,
   children,
   isDisabled,
-  testId
+  testId,
+  label
 }) => {
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -21,7 +22,8 @@ export const ToolbarDropdownMenu = ({
       testId: testId,
       iconBefore: iconBefore,
       groupLocation: groupLocation,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      label: label
     })
   }, children);
 };

package/dist/es2019/ui/icons/ShowMoreHorizontal.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Icon from '@atlaskit/icon/core/show-more-horizontal';
+export const ShowMoreHorizontalIcon = ({
+  label,
+  testId,
+  color,
+  shouldRecommendSmallIcon,
+  spacing
+}) => /*#__PURE__*/React.createElement(Icon, {
+  label: label,
+  testId: testId,
+  color: color,
+  shouldRecommendSmallIcon: shouldRecommendSmallIcon,
+  spacing: spacing,
+  size: "small"
+});

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -48,4 +49,5 @@ export { UnderlineIcon } from './ui/icons/UnderlineIcon';
 export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
-export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';

package/dist/esm/ui/ToolbarButton.js

@@ -27,7 +27,8 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId = _ref.testId,
     groupLocation = _ref.groupLocation,
     isDisabled = _ref.isDisabled,
-    ariaKeyshortcuts = _ref.ariaKeyshortcuts;
+    ariaKeyshortcuts = _ref.ariaKeyshortcuts,
+    label = _ref.label;
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
@@ -36,6 +37,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
     "aria-keyshortcuts": ariaKeyshortcuts,
+    "aria-label": label,
     "data-ds--level": dataDsLevel,
     onClick: onClick,
     onBlur: onBlur,

package/dist/esm/ui/ToolbarDropdownItem.compiled.css

@@ -1,10 +1,3 @@
-._11c8140y{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81c04{font:var(--ds-font-heading-xlarge,normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c8nf1z{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1tke14no{min-height:36px}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -4,19 +4,12 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 var styles = {
   toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
   disabled: "_syaz1lh4 _80om13gf",
-  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
-  normal: "_11c82smr",
-  heading1: "_11c81c04",
-  heading2: "_11c8nf1z",
-  heading3: "_11c8lodh",
-  heading4: "_11c8nbxd",
-  heading5: "_11c8140y",
-  heading6: "_11c81vhk"
+  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -46,8 +39,6 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     elemAfter = _ref2.elemAfter,
     isSelected = _ref2.isSelected,
     children = _ref2.children,
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? 'normal' : _ref2$textStyle,
     isDisabled = _ref2.isDisabled,
     hasNestedDropdownMenu = _ref2.hasNestedDropdownMenu,
     triggerRef = _ref2.triggerRef,
@@ -65,7 +56,5 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     ref: triggerRef,
     component: CustomDropdownMenuItemButton,
     testId: testId
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles[textStyle]
-  }, children));
+  }, children);
 };

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -6,7 +6,8 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
     groupLocation = _ref.groupLocation,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    label = _ref.label;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -21,7 +22,8 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         testId: testId,
         iconBefore: iconBefore,
         groupLocation: groupLocation,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        label: label
       });
     }
   }, children);

package/dist/esm/ui/icons/ShowMoreHorizontal.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Icon from '@atlaskit/icon/core/show-more-horizontal';
+export var ShowMoreHorizontalIcon = function ShowMoreHorizontalIcon(_ref) {
+  var label = _ref.label,
+    testId = _ref.testId,
+    color = _ref.color,
+    shouldRecommendSmallIcon = _ref.shouldRecommendSmallIcon,
+    spacing = _ref.spacing;
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: label,
+    testId: testId,
+    color: color,
+    shouldRecommendSmallIcon: shouldRecommendSmallIcon,
+    spacing: spacing,
+    size: "small"
+  });
+};

package/dist/types/index.d.ts

@@ -9,6 +9,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -48,4 +49,5 @@ export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/dist/types/ui/ToolbarButton.d.ts

@@ -12,6 +12,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
+    label?: string;
 };
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/ToolbarDropdownItem.d.ts

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -6,6 +6,7 @@ type ToolbarDropdownMenuProps = {
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
+    label?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types/ui/icons/ShowMoreHorizontal.d.ts

@@ -0,0 +1,2 @@
+import { type IconComponent } from '../../types';
+export declare const ShowMoreHorizontalIcon: IconComponent;

package/dist/types-ts4.5/index.d.ts

@@ -9,6 +9,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -48,4 +49,5 @@ export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/dist/types-ts4.5/ui/ToolbarButton.d.ts

@@ -12,6 +12,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     ariaKeyshortcuts?: string;
+    label?: string;
 };
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts

@@ -20,5 +20,5 @@ type ToolbarDropdownItemProps = {
     testId?: string;
     ariaKeyshortcuts?: string;
 };
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, textStyle, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, testId, ariaKeyshortcuts, }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts

@@ -6,6 +6,7 @@ type ToolbarDropdownMenuProps = {
     groupLocation?: ToolbarButtonGroupLocation;
     isDisabled?: boolean;
     testId?: string;
+    label?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, }: ToolbarDropdownMenuProps) => React.JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/icons/ShowMoreHorizontal.d.ts

@@ -0,0 +1,2 @@
+import { type IconComponent } from '../../types';
+export declare const ShowMoreHorizontalIcon: IconComponent;

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import Toggle from '@atlaskit/toggle';
 import { token } from '@atlaskit/tokens';
@@ -52,6 +53,27 @@ import { ToolbarTooltip } from '../../../src/ui/ToolbarTooltip';
 
 import { useExampleToolbarState } from './useExampleToolbarState';
 
+const headingSizeStylesMap = cssMap({
+    xlarge: {
+		font: token('font.heading.xlarge'),
+	},
+    large: {
+		font: token('font.heading.large')
+	},
+    medium: {
+		font: token('font.heading.medium')
+	},
+    small: {
+		 font: token('font.heading.small')
+	},
+    xsmall: {
+		font: token('font.heading.xsmall')
+	},
+    xxsmall: {
+		font: token('font.heading.xxsmall')
+	},
+});
+
 export const ExampleManuallyComposedToolbar = () => {
 	const {
 		textStyle,
@@ -271,7 +293,6 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
 										onClick={onClick('Normal text', onSetTextStyle('normal'))}
 										isSelected={textStyle === 'normal'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥0"
 									>
 										Normal text
@@ -281,20 +302,18 @@ export const ExampleManuallyComposedToolbar = () => {
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
 										onClick={onClick('Heading one', onSetTextStyle('heading1'))}
 										isSelected={textStyle === 'heading1'}
-										textStyle="heading1"
 										ariaKeyshortcuts="⌘⌥1"
 									>
-										Heading 1
+										<Box xcss={headingSizeStylesMap.xlarge}>Heading 1</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingTwoIcon label="Heading Two" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
 										onClick={onClick('Heading two', onSetTextStyle('heading2'))}
 										isSelected={textStyle === 'heading2'}
-										textStyle="heading2"
 										ariaKeyshortcuts="⌘⌥2"
 									>
-										Heading 2
+										<Box xcss={headingSizeStylesMap.large}>Heading 2</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingThreeIcon label="Heading Three" />}
@@ -304,44 +323,40 @@ export const ExampleManuallyComposedToolbar = () => {
 										textStyle="heading3"
 										ariaKeyshortcuts="⌘⌥3"
 									>
-										Heading 3
+										<Box xcss={headingSizeStylesMap.medium}>Heading 3</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFourIcon label="Heading Four" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
 										onClick={onClick('Heading four', onSetTextStyle('heading4'))}
 										isSelected={textStyle === 'heading4'}
-										textStyle="heading4"
 										ariaKeyshortcuts="⌘⌥4"
 									>
-										Heading 4
+										<Box xcss={headingSizeStylesMap.small}>Heading 4</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingFiveIcon label="Heading Five" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
 										onClick={onClick('Heading five', onSetTextStyle('heading5'))}
 										isSelected={textStyle === 'heading5'}
-										textStyle="heading5"
 										ariaKeyshortcuts="⌘⌥5"
 									>
-										Heading 5
+										<Box xcss={headingSizeStylesMap.xsmall}>Heading 5</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<HeadingSixIcon label="Heading Six" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
 										onClick={onClick('Heading six', onSetTextStyle('heading6'))}
 										isSelected={textStyle === 'heading6'}
-										textStyle="heading6"
 										ariaKeyshortcuts="⌘⌥6"
 									>
-										Heading 6
+										<Box xcss={headingSizeStylesMap.xxsmall}>Heading 6</Box>
 									</ToolbarDropdownItem>
 									<ToolbarDropdownItem
 										elemBefore={<QuoteIcon label="Quote" />}
 										elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
 										onClick={onClick('Quote', onSetTextStyle('quote'))}
 										isSelected={textStyle === 'quote'}
-										textStyle="normal"
 										ariaKeyshortcuts="⌘⌥9"
 									>
 										Quote

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.10",
+	"version": "0.1.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -28,8 +28,8 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/icon": "^27.9.0",
-		"@atlaskit/icon-lab": "^5.3.0",
+		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/icon-lab": "^5.4.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.11.0",

package/src/index.ts

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
+export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
 
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
@@ -50,5 +51,6 @@ export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
 export { CodeIcon } from './ui/icons/CodeIcon';
 export { SubscriptIcon } from './ui/icons/SubscriptIcon';
 export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
+export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
 
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';

package/src/ui/ToolbarButton.tsx

@@ -84,6 +84,7 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	ariaKeyshortcuts?: string;
+	label?: string;
 };
 
 export const ToolbarButton = forwardRef(
@@ -103,6 +104,7 @@ export const ToolbarButton = forwardRef(
 			groupLocation,
 			isDisabled,
 			ariaKeyshortcuts,
+			label,
 		}: ToolbarButtonProps,
 		ref: Ref<HTMLButtonElement>,
 	) => {
@@ -121,6 +123,7 @@ export const ToolbarButton = forwardRef(
 				aria-haspopup={ariaHasPopup}
 				aria-controls={ariaControls}
 				aria-keyshortcuts={ariaKeyshortcuts}
+				aria-label={label}
 				data-ds--level={dataDsLevel}
 				onClick={onClick}
 				onBlur={onBlur}

package/src/ui/ToolbarDropdownItem.tsx

@@ -3,7 +3,7 @@ import React, { type ReactNode, forwardRef, type Ref } from 'react';
 import { cssMap, cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import type { CustomItemComponentProps } from '@atlaskit/menu/types';
-import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
 type TextStyle =
@@ -50,27 +50,6 @@ const styles = cssMap({
 			backgroundColor: token('color.background.selected.pressed'),
 		},
 	},
-	normal: {
-		font: token('font.body'),
-	},
-	heading1: {
-		font: token('font.heading.xlarge'),
-	},
-	heading2: {
-		font: token('font.heading.large'),
-	},
-	heading3: {
-		font: token('font.heading.medium'),
-	},
-	heading4: {
-		font: token('font.heading.small'),
-	},
-	heading5: {
-		font: token('font.heading.xsmall'),
-	},
-	heading6: {
-		font: token('font.heading.xxsmall'),
-	},
 });
 
 export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & {
@@ -137,7 +116,6 @@ export const ToolbarDropdownItem = ({
 	elemAfter,
 	isSelected,
 	children,
-	textStyle = 'normal',
 	isDisabled,
 	hasNestedDropdownMenu,
 	triggerRef,
@@ -157,6 +135,6 @@ export const ToolbarDropdownItem = ({
 		component={CustomDropdownMenuItemButton}
 		testId={testId}
 	>
-		<Box xcss={styles[textStyle]}>{children}</Box>
+		{children}
 	</DropdownItem>
 );

package/src/ui/ToolbarDropdownMenu.tsx

@@ -12,6 +12,7 @@ type ToolbarDropdownMenuProps = {
 	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	testId?: string;
+	label?: string;
 };
 
 export const ToolbarDropdownMenu = ({
@@ -20,6 +21,7 @@ export const ToolbarDropdownMenu = ({
 	children,
 	isDisabled,
 	testId,
+	label,
 }: ToolbarDropdownMenuProps) => {
 	return (
 		<DropdownMenu<HTMLButtonElement>
@@ -37,6 +39,7 @@ export const ToolbarDropdownMenu = ({
 					iconBefore={iconBefore}
 					groupLocation={groupLocation}
 					isDisabled={isDisabled}
+					label={label}
 				/>
 			)}
 		>

package/src/ui/icons/ShowMoreHorizontal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon/core/show-more-horizontal';
+
+import { type IconComponent } from '../../types';
+
+export const ShowMoreHorizontalIcon: IconComponent = ({
+	label,
+	testId,
+	color,
+	shouldRecommendSmallIcon,
+	spacing,
+}) => (
+	<Icon
+		label={label}
+		testId={testId}
+		color={color}
+		shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+		spacing={spacing}
+		size="small"
+	/>
+);