@atlaskit/editor-toolbar 2.2.4 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-toolbar
 
+## 2.3.0
+
+### Minor Changes
+
+- [`d778b282fb391`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d778b282fb391) -
+  Tighten color picker spacing and footer dimensions.
+
+  The `@atlaskit/editor-toolbar/color-palette` entry point now supports a `gap` prop to customise
+  spacing between color tile wrappers, for example: `<ColorPalette gap="space.0" {...props} />`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.2.4
 
 ### Patch Changes

package/dist/cjs/ui/ColorPalette/index.js

@@ -9,7 +9,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _chromatism = _interopRequireDefault(require("chromatism"));
 var _reactIntl = require("react-intl");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
 var _Color = require("./Color");
 var _getColorMessage = _interopRequireDefault(require("./getColorMessage"));
@@ -56,6 +58,8 @@ function getCheckMarkColor(color, useIconToken) {
 var ColorPalette = function ColorPalette(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'space.050' : _ref$gap,
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
     selectedColor = _ref.selectedColor,
@@ -68,6 +72,7 @@ var ColorPalette = function ColorPalette(_ref) {
   var _useThemeObserver = (0, _useThemeObserver2.useThemeObserver)(),
     tokenTheme = _useThemeObserver.colorMode;
   var useIconToken = !!hexToPaletteColor;
+  var shouldUseInlineColorGap = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1');
 
   // Refs for keyboard navigation
   var paletteRef = (0, _react.useRef)(null);
@@ -253,12 +258,13 @@ var ColorPalette = function ColorPalette(_ref) {
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
   return /*#__PURE__*/_react.default.createElement(_compiled.Grid, {
-    gap: "space.050",
+    gap: gap,
     ref: paletteRef,
     role: "group"
   }, colorsPerRow.map(function (row, rowIndex) {
     return /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
-      rowSpace: "space.050",
+      space: shouldUseInlineColorGap ? gap : undefined,
+      rowSpace: shouldUseInlineColorGap ? undefined : gap,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
     }, row.map(function (_ref2, colIndex) {

package/dist/es2019/ui/ColorPalette/index.js

@@ -1,7 +1,9 @@
 import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import chromatism from 'chromatism';
 import { useIntl } from 'react-intl';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Grid, Inline } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { Color } from './Color';
 import getColorMessage from './getColorMessage';
@@ -45,6 +47,7 @@ function getCheckMarkColor(color, useIconToken) {
  */
 const ColorPalette = ({
   cols = DEFAULT_COLOR_PICKER_COLUMNS,
+  gap = 'space.050',
   onClick,
   onKeyDown,
   selectedColor,
@@ -62,6 +65,7 @@ const ColorPalette = ({
     colorMode: tokenTheme
   } = useThemeObserver();
   const useIconToken = !!hexToPaletteColor;
+  const shouldUseInlineColorGap = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1');
 
   // Refs for keyboard navigation
   const paletteRef = useRef(null);
@@ -249,11 +253,12 @@ const ColorPalette = ({
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
   return /*#__PURE__*/React.createElement(Grid, {
-    gap: "space.050",
+    gap: gap,
     ref: paletteRef,
     role: "group"
   }, colorsPerRow.map((row, rowIndex) => /*#__PURE__*/React.createElement(Inline, {
-    rowSpace: "space.050",
+    space: shouldUseInlineColorGap ? gap : undefined,
+    rowSpace: shouldUseInlineColorGap ? undefined : gap,
     key: `row-first-color-${row[0].value}`,
     role: "radiogroup"
   }, row.map(({

package/dist/esm/ui/ColorPalette/index.js

@@ -1,7 +1,9 @@
 import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import chromatism from 'chromatism';
 import { useIntl } from 'react-intl';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Grid, Inline } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { Color } from './Color';
 import getColorMessage from './getColorMessage';
@@ -48,6 +50,8 @@ function getCheckMarkColor(color, useIconToken) {
 var ColorPalette = function ColorPalette(_ref) {
   var _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _ref$cols,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'space.050' : _ref$gap,
     onClick = _ref.onClick,
     onKeyDown = _ref.onKeyDown,
     selectedColor = _ref.selectedColor,
@@ -60,6 +64,7 @@ var ColorPalette = function ColorPalette(_ref) {
   var _useThemeObserver = useThemeObserver(),
     tokenTheme = _useThemeObserver.colorMode;
   var useIconToken = !!hexToPaletteColor;
+  var shouldUseInlineColorGap = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_1');
 
   // Refs for keyboard navigation
   var paletteRef = useRef(null);
@@ -245,12 +250,13 @@ var ColorPalette = function ColorPalette(_ref) {
     }
   }, [colorsPerRow, focusColorAt, onClick, onKeyDown]);
   return /*#__PURE__*/React.createElement(Grid, {
-    gap: "space.050",
+    gap: gap,
     ref: paletteRef,
     role: "group"
   }, colorsPerRow.map(function (row, rowIndex) {
     return /*#__PURE__*/React.createElement(Inline, {
-      rowSpace: "space.050",
+      space: shouldUseInlineColorGap ? gap : undefined,
+      rowSpace: shouldUseInlineColorGap ? undefined : gap,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
     }, row.map(function (_ref2, colIndex) {

package/dist/types/ui/ColorPalette/index.d.ts

@@ -11,5 +11,5 @@ import type { ColorPaletteProps } from './types';
  * - Design token integration
  * - Customizable color mapping
  */
-declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+declare const ColorPalette: ({ cols, gap, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
 export default ColorPalette;

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

@@ -26,6 +26,7 @@ export type PaletteTooltipMessages = {
     dark: Record<string, MessageDescriptor>;
     light: Record<string, MessageDescriptor>;
 };
+export type ColorPaletteGap = 'space.0' | 'space.050';
 /**
  * Configuration options for the color palette
  */
@@ -51,6 +52,8 @@ export interface ColorPaletteProps {
     className?: string;
     /** Number of columns in the palette grid */
     cols?: number;
+    /** Gap between color tile wrappers */
+    gap?: ColorPaletteGap;
     /** Callback when a color is clicked */
     onClick: (value: string, label: string, event: React.MouseEvent | React.KeyboardEvent) => void;
     /** Optional callback for keyboard navigation */

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "2.2.4",
+	"version": "2.3.0",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"react-compiler": {
@@ -38,7 +38,7 @@
 		"@atlaskit/popup": "^5.1.0",
 		"@atlaskit/primitives": "^21.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^126.0.0",
+		"@atlaskit/tmp-editor-statsig": "^126.1.0",
 		"@atlaskit/tokens": "^15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",