@atlaskit/editor-toolbar 0.0.9 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-toolbar
 
+## 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
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Add background colour to Toolbar component in editor-toolbar, add EditorToolbarProvider to the
+  selection Toolbar
+
 ## 0.0.9
 
 ### 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() {
@@ -352,4 +358,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/Toolbar.compiled.css

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/ui/Toolbar.js

@@ -11,7 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

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/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

@@ -48,4 +48,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/Toolbar.compiled.css

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export const Toolbar = ({
   children,

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/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

@@ -48,4 +48,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/Toolbar.compiled.css

@@ -5,4 +5,5 @@
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
 ._4t3i14no{height:36px}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/esm/ui/Toolbar.js

@@ -4,7 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  toolbar: "_2rkoi2wt _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
+  toolbar: "_2rkoi2wt _bfhkvuon _u5f31b66 _19bv1b66 _16qs1cd0 _4t3i14no _1bsb184x _1e0c1txw _4cvr1h6o"
 };
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,

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/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

@@ -48,4 +48,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/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

@@ -48,4 +48,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/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/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.0.9",
+	"version": "0.1.0",
 	"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

@@ -50,5 +50,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/Toolbar.tsx

@@ -6,6 +6,7 @@ import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	toolbar: {
+		backgroundColor: token('elevation.surface'),
 		paddingRight: token('space.050'),
 		paddingLeft: token('space.050'),
 		boxShadow: token('elevation.shadow.overlay'),

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/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"
+	/>
+);