@atlaskit/editor-toolbar 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-toolbar
 
+## 2.1.2
+
+### Patch Changes
+
+- [`7ebb725ea5629`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ebb725ea5629) -
+  Remove pressed semantics from toolbar popup triggers, gated behind jira_editor_a11y_toolbar_fixes
+- Updated dependencies
+
+## 2.1.1
+
+### Patch Changes
+
+- [`cc7e55c918e23`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc7e55c918e23) -
+  [ux] Adds info icon next to visually disabled table column sort buttons with a tooltip explaining
+  that sort won't work when merged cells present.
+- Updated dependencies
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -232,6 +232,12 @@ Object.defineProperty(exports, "IndentIcon", {
     return _IndentIcon.IndentIcon;
   }
 });
+Object.defineProperty(exports, "InformationCircleIcon", {
+  enumerable: true,
+  get: function get() {
+    return _InformationCircleIcon.InformationCircleIcon;
+  }
+});
 Object.defineProperty(exports, "ItalicIcon", {
   enumerable: true,
   get: function get() {
@@ -650,6 +656,7 @@ var _HeadingOneIcon = require("./ui/icons/HeadingOneIcon");
 var _HeadingSixIcon = require("./ui/icons/HeadingSixIcon");
 var _HeadingThreeIcon = require("./ui/icons/HeadingThreeIcon");
 var _HeadingTwoIcon = require("./ui/icons/HeadingTwoIcon");
+var _InformationCircleIcon = require("./ui/icons/InformationCircleIcon");
 var _ItalicIcon = require("./ui/icons/ItalicIcon");
 var _LinkIcon = require("./ui/icons/LinkIcon");
 var _ListBulletedIcon = require("./ui/icons/ListBulletedIcon");

package/dist/cjs/ui/ToolbarButton.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _uiContext = require("../hooks/ui-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
@@ -46,7 +47,8 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
   return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     ref: ref,
     xcss: (0, _css.cx)(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
-    "aria-pressed": isSelected,
+    "aria-pressed": (0, _expValEquals.expValEquals)('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? Boolean(ariaHasPopup) ? undefined // No aria-pressed for dropdown buttons
+    : isSelected : isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
@@ -67,6 +69,7 @@ var ToolbarButton = exports.ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(
       }
     },
     "data-toolbar-component": "button",
+    "data-selected": (0, _expValEquals.expValEquals)('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? isSelected : undefined,
     interactionName: interactionName
   }, iconBefore, children);
 });

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

@@ -3,6 +3,7 @@
 ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
 ._1e0c1txw{display:flex}
+._1gt41dpa:has([data-toolbar-component=button]:not([data-selected=true]):not([disabled]):hover) [data-toolbar-component=button]:not([data-selected=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
 ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
 ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}

package/dist/cjs/ui/ToolbarButtonGroup.js

@@ -12,9 +12,11 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   container: "_zulpv77o _1e0c1txw _14jy1dpa",
+  containerWithA11yToolbarFixes: "_zulpv77o _1e0c1txw _1gt41dpa",
   firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
   lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
 };
@@ -27,7 +29,7 @@ var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGrou
   var LastChild = (0, _platformFeatureFlags.fg)('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
   var middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.container,
+    xcss: (0, _expValEquals.expValEquals)('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? styles.containerWithA11yToolbarFixes : styles.container,
     "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)([styles.firstChild])

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InformationCircleIcon", {
+  enumerable: true,
+  get: function get() {
+    return _informationCircle.default;
+  }
+});
+var _informationCircle = _interopRequireDefault(require("@atlaskit/icon/core/information-circle"));

package/dist/es2019/index.js

@@ -39,6 +39,7 @@ export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
 export { HeadingSixIcon } from './ui/icons/HeadingSixIcon';
 export { HeadingThreeIcon } from './ui/icons/HeadingThreeIcon';
 export { HeadingTwoIcon } from './ui/icons/HeadingTwoIcon';
+export { InformationCircleIcon } from './ui/icons/InformationCircleIcon';
 export { ItalicIcon } from './ui/icons/ItalicIcon';
 export { LinkIcon } from './ui/icons/LinkIcon';
 export { ListBulletedIcon } from './ui/icons/ListBulletedIcon';

package/dist/es2019/ui/ToolbarButton.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 const styles = {
   button: "_zulp12x7 _2rko12b0 _11c8fhey _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syazazsu _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
@@ -40,7 +41,8 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
-    "aria-pressed": isSelected,
+    "aria-pressed": expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? Boolean(ariaHasPopup) ? undefined // No aria-pressed for dropdown buttons
+    : isSelected : isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
@@ -61,6 +63,7 @@ export const ToolbarButton = /*#__PURE__*/forwardRef(({
       }
     },
     "data-toolbar-component": "button",
+    "data-selected": expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? isSelected : undefined,
     interactionName: interactionName
   }, iconBefore, children);
 });

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

@@ -3,6 +3,7 @@
 ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
 ._1e0c1txw{display:flex}
+._1gt41dpa:has([data-toolbar-component=button]:not([data-selected=true]):not([disabled]):hover) [data-toolbar-component=button]:not([data-selected=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
 ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
 ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}

package/dist/es2019/ui/ToolbarButtonGroup.js

@@ -5,8 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Children, Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
   container: "_zulpv77o _1e0c1txw _14jy1dpa",
+  containerWithA11yToolbarFixes: "_zulpv77o _1e0c1txw _1gt41dpa",
   firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
   lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
 };
@@ -20,7 +22,7 @@ export const ToolbarButtonGroup = ({
   const LastChild = fg('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
   const middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? styles.containerWithA11yToolbarFixes : styles.container,
     "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.firstChild])

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

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as InformationCircleIcon } from '@atlaskit/icon/core/information-circle';

package/dist/esm/index.js

@@ -39,6 +39,7 @@ export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
 export { HeadingSixIcon } from './ui/icons/HeadingSixIcon';
 export { HeadingThreeIcon } from './ui/icons/HeadingThreeIcon';
 export { HeadingTwoIcon } from './ui/icons/HeadingTwoIcon';
+export { InformationCircleIcon } from './ui/icons/InformationCircleIcon';
 export { ItalicIcon } from './ui/icons/ItalicIcon';
 export { LinkIcon } from './ui/icons/LinkIcon';
 export { ListBulletedIcon } from './ui/icons/ListBulletedIcon';

package/dist/esm/ui/ToolbarButton.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef } from 'react';
 import { cx } from '@atlaskit/css';
 import { Pressable } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useToolbarUI } from '../hooks/ui-context';
 var styles = {
   button: "_zulp12x7 _2rko12b0 _11c8fhey _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syazazsu _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
@@ -38,7 +39,8 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Pressable, {
     ref: ref,
     xcss: cx(styles.button, disabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
-    "aria-pressed": isSelected,
+    "aria-pressed": expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? Boolean(ariaHasPopup) ? undefined // No aria-pressed for dropdown buttons
+    : isSelected : isSelected,
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-controls": ariaControls,
@@ -59,6 +61,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     },
     "data-toolbar-component": "button",
+    "data-selected": expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? isSelected : undefined,
     interactionName: interactionName
   }, iconBefore, children);
 });

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

@@ -3,6 +3,7 @@
 ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
 ._1e0c1txw{display:flex}
+._1gt41dpa:has([data-toolbar-component=button]:not([data-selected=true]):not([disabled]):hover) [data-toolbar-component=button]:not([data-selected=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
 ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
 ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
 ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}

package/dist/esm/ui/ToolbarButtonGroup.js

@@ -5,8 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import { Children, Fragment } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
   container: "_zulpv77o _1e0c1txw _14jy1dpa",
+  containerWithA11yToolbarFixes: "_zulpv77o _1e0c1txw _1gt41dpa",
   firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
   lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
 };
@@ -19,7 +21,7 @@ export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
   var LastChild = fg('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
   var middleChildren = items.slice(1, -1);
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.container,
+    xcss: expValEquals('jira_editor_a11y_toolbar_fixes', 'isEnabled', true) ? styles.containerWithA11yToolbarFixes : styles.container,
     "data-toolbar-component": "button-group"
   }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ax([styles.firstChild])

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

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as InformationCircleIcon } from '@atlaskit/icon/core/information-circle';

package/dist/types/index.d.ts

@@ -38,6 +38,7 @@ export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
 export { HeadingSixIcon } from './ui/icons/HeadingSixIcon';
 export { HeadingThreeIcon } from './ui/icons/HeadingThreeIcon';
 export { HeadingTwoIcon } from './ui/icons/HeadingTwoIcon';
+export { InformationCircleIcon } from './ui/icons/InformationCircleIcon';
 export { ItalicIcon } from './ui/icons/ItalicIcon';
 export { LinkIcon } from './ui/icons/LinkIcon';
 export { ListBulletedIcon } from './ui/icons/ListBulletedIcon';

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

@@ -0,0 +1 @@
+export { default as InformationCircleIcon } from '@atlaskit/icon/core/information-circle';

package/editor-toolbar.docs.tsx

@@ -0,0 +1,41 @@
+import path from 'path';
+
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
+
+import packageJson from './package.json';
+
+const packagePath = path.resolve(__dirname);
+
+const documentation: StructuredContentSource = {
+	components: [
+		{
+			name: 'Toolbar',
+			description:
+				'A common toolbar component for editor-like interfaces, providing a container for buttons, dropdowns, and other controls.',
+			status: 'general-availability',
+			import: {
+				name: 'Toolbar',
+				package: '@atlaskit/editor-toolbar',
+				type: 'named',
+				packagePath,
+				packageJson,
+			},
+			usageGuidelines: [
+				'Use Toolbar to organize actions and controls for content editing.',
+				'Supports grouping buttons and responsive behavior.',
+				'Can be used as a primary toolbar or within specific sections of an interface.',
+			],
+			examples: [
+				{
+					name: 'Basic',
+					description: 'Standard toolbar with basic buttons and groups.',
+					source: path.resolve(packagePath, './examples/basic.tsx'),
+				},
+			],
+			keywords: ['toolbar', 'editor', 'actions', 'controls', 'buttons'],
+			categories: ['interaction', 'layout'],
+		},
+	],
+};
+
+export default documentation;

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "2.1.0",
+	"version": "2.1.2",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"react-compiler": {
@@ -36,10 +36,10 @@
 		"@atlaskit/icon-lab": "^7.2.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/popup": "^5.1.0",
-		"@atlaskit/primitives": "^20.1.0",
+		"@atlaskit/primitives": "^20.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^114.0.0",
-		"@atlaskit/tokens": "^15.1.0",
+		"@atlaskit/tmp-editor-statsig": "^114.6.0",
+		"@atlaskit/tokens": "^15.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",