@atlaskit/editor-plugin-find-replace 1.1.0 → 1.1.1

package/.eslintrc.js

@@ -2,6 +2,10 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-duplicate-imports': 'error',
     '@typescript-eslint/no-explicit-any': 'error',
+    '@atlaskit/design-system/ensure-design-token-usage/preview': [
+      'error',
+      { domains: ['spacing'], shouldEnforceFallbacks: false },
+    ],
     '@typescript-eslint/ban-types': [
       'error',
       {

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-find-replace
 
+## 1.1.1
+
+### Patch Changes
+
+- [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/ui/Replace.js

@@ -253,7 +253,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, (0, _react2.jsx)("div", {
         css: _styles.orderOneStyles
       }, (0, _react2.jsx)("div", {
-        css: _styles.NextPreviousItem
+        css: _styles.nextPreviousItemStyles
       }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
@@ -263,7 +263,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
       })), (0, _react2.jsx)("div", {
-        css: _styles.NextPreviousItem
+        css: _styles.nextPreviousItemStyles
       }, (0, _react2.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
@@ -275,7 +275,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       })), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? (0, _react2.jsx)(_primitives.Inline, {
         space: "space.075",
         xcss: (0, _primitives.xcss)({
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           paddingInlineStart: 'space.050',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           paddingInlineEnd: 'space.025'
         })
       }, (0, _react2.jsx)(_new.default, {
@@ -303,7 +305,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
       }, this.replaceAll))), (0, _react2.jsx)("div", {
-        css: _styles.orderZeroStyles
+        css: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? _styles.orderZeroStyles : _styles.orderZeroDeprecatedStyles
       }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? (0, _react2.jsx)(_new.default, {
         appearance: "subtle",
         testId: this.closeFindReplaceDialog,

package/dist/cjs/ui/styles.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyles = exports.wrapperPaddingStyles = exports.textFieldWrapper = exports.sectionWrapperStylesAlternate = exports.sectionWrapperStyles = exports.sectionWrapperJustified = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.orderZeroStyles = exports.orderOneStyles = exports.matchCaseSection = exports.countWrapperStyles = exports.countStylesAlternateStyles = exports.countStyles = exports.afterInputSection = exports.NextPreviousItem = void 0;
+exports.wrapperStyles = exports.wrapperPaddingStyles = exports.textFieldWrapper = exports.sectionWrapperStylesAlternate = exports.sectionWrapperStyles = exports.sectionWrapperJustified = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.orderZeroStyles = exports.orderZeroDeprecatedStyles = exports.orderOneStyles = exports.nextPreviousItemStyles = exports.matchCaseSection = exports.countWrapperStyles = exports.countStylesAlternateStyles = exports.countStyles = exports.afterInputSection = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -47,7 +47,9 @@ var sectionWrapperJustified = exports.sectionWrapperJustified = (0, _react.css)(
 var textFieldWrapper = exports.textFieldWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 100%;\n  flex-wrap: wrap;\n\n  #find-text-field,\n  #replace-text-field {\n    height: ", "em;\n  }\n\n  label {\n    font-size: ", ";\n    line-height: ", "px;\n  }\n"])), gridSize * 4.5 / fontSize, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), gridSize * 2);
 var afterInputSection = exports.afterInputSection = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n"])));
 var matchCaseSection = exports.matchCaseSection = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  padding-right: ", ";\n\n  button {\n    width: 20px;\n    height: 20px;\n  }\n"])), "var(--ds-space-100, 8px)");
-var NextPreviousItem = exports.NextPreviousItem = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 3px;\n"])));
+var nextPreviousItemStyles = exports.nextPreviousItemStyles = (0, _react.css)({
+  padding: "0px ".concat("var(--ds-space-025, 2px)")
+});
 var countStyles = exports.countStyles = (0, _react.css)({
   color: "var(--ds-text-subtlest, #626F86)",
   fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
@@ -66,7 +68,11 @@ var countWrapperStyles = exports.countWrapperStyles = (0, _react.css)({
 });
 var orderZeroStyles = exports.orderZeroStyles = (0, _react.css)({
   order: '0',
-  marginInline: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.editor-new-button_jjjdo') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)") : 0
+  marginInline: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+});
+var orderZeroDeprecatedStyles = exports.orderZeroDeprecatedStyles = (0, _react.css)({
+  order: '0',
+  marginInline: 0
 });
 var orderOneStyles = exports.orderOneStyles = (0, _react.css)({
   order: '1'

package/dist/es2019/ui/Replace.js

@@ -15,7 +15,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Inline, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
-import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
+import { nextPreviousItemStyles, orderOneStyles, orderZeroDeprecatedStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class Replace extends React.PureComponent {
   constructor(props) {
@@ -229,7 +229,7 @@ class Replace extends React.PureComponent {
     }, jsx("div", {
       css: orderOneStyles
     }, jsx("div", {
-      css: NextPreviousItem
+      css: nextPreviousItemStyles
     }, jsx(FindReplaceTooltipButton, {
       title: this.findNext,
       icon: this.findNextIcon,
@@ -239,7 +239,7 @@ class Replace extends React.PureComponent {
       onClick: this.handleFindNextClick,
       disabled: count.total <= 1
     })), jsx("div", {
-      css: NextPreviousItem
+      css: nextPreviousItemStyles
     }, jsx(FindReplaceTooltipButton, {
       title: this.findPrevious,
       icon: this.findPrevIcon,
@@ -251,7 +251,9 @@ class Replace extends React.PureComponent {
     })), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
       space: "space.075",
       xcss: xcss({
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         paddingInlineStart: 'space.050',
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         paddingInlineEnd: 'space.025'
       })
     }, jsx(Button, {
@@ -279,7 +281,7 @@ class Replace extends React.PureComponent {
       onClick: this.handleReplaceAllClick,
       isDisabled: !canReplace
     }, this.replaceAll))), jsx("div", {
-      css: orderZeroStyles
+      css: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? orderZeroStyles : orderZeroDeprecatedStyles
     }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Button, {
       appearance: "subtle",
       testId: this.closeFindReplaceDialog,

package/dist/es2019/ui/styles.js

@@ -87,9 +87,9 @@ export const matchCaseSection = css`
     height: 20px;
   }
 `;
-export const NextPreviousItem = css`
-  padding: 0px 3px;
-`;
+export const nextPreviousItemStyles = css({
+  padding: `0px ${"var(--ds-space-025, 2px)"}`
+});
 export const countStyles = css({
   color: `${"var(--ds-text-subtlest, #626F86)"}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,
@@ -108,7 +108,11 @@ export const countWrapperStyles = css({
 });
 export const orderZeroStyles = css({
   order: '0',
-  marginInline: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"}` : 0
+  marginInline: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"}`
+});
+export const orderZeroDeprecatedStyles = css({
+  order: '0',
+  marginInline: 0
 });
 export const orderOneStyles = css({
   order: '1'

package/dist/esm/ui/Replace.js

@@ -23,7 +23,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Inline, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
-import { NextPreviousItem, orderOneStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
+import { nextPreviousItemStyles, orderOneStyles, orderZeroDeprecatedStyles, orderZeroStyles, replaceSectionButtonStyles, sectionWrapperJustified, sectionWrapperStyles, sectionWrapperStylesAlternate, textFieldWrapper } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Replace = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Replace, _React$PureComponent);
@@ -245,7 +245,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx("div", {
         css: orderOneStyles
       }, jsx("div", {
-        css: NextPreviousItem
+        css: nextPreviousItemStyles
       }, jsx(FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
@@ -255,7 +255,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
       })), jsx("div", {
-        css: NextPreviousItem
+        css: nextPreviousItemStyles
       }, jsx(FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
@@ -267,7 +267,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
       })), getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Inline, {
         space: "space.075",
         xcss: xcss({
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           paddingInlineStart: 'space.050',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           paddingInlineEnd: 'space.025'
         })
       }, jsx(Button, {
@@ -295,7 +297,7 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onClick: this.handleReplaceAllClick,
         isDisabled: !canReplace
       }, this.replaceAll))), jsx("div", {
-        css: orderZeroStyles
+        css: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? orderZeroStyles : orderZeroDeprecatedStyles
       }, getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? jsx(Button, {
         appearance: "subtle",
         testId: this.closeFindReplaceDialog,

package/dist/esm/ui/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
@@ -42,7 +42,9 @@ export var sectionWrapperJustified = css(_templateObject3 || (_templateObject3 =
 export var textFieldWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 100%;\n  flex-wrap: wrap;\n\n  #find-text-field,\n  #replace-text-field {\n    height: ", "em;\n  }\n\n  label {\n    font-size: ", ";\n    line-height: ", "px;\n  }\n"])), gridSize * 4.5 / fontSize, relativeFontSizeToBase16(14), gridSize * 2);
 export var afterInputSection = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n"])));
 export var matchCaseSection = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding-right: ", ";\n\n  button {\n    width: 20px;\n    height: 20px;\n  }\n"])), "var(--ds-space-100, 8px)");
-export var NextPreviousItem = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0px 3px;\n"])));
+export var nextPreviousItemStyles = css({
+  padding: "0px ".concat("var(--ds-space-025, 2px)")
+});
 export var countStyles = css({
   color: "var(--ds-text-subtlest, #626F86)",
   fontSize: "".concat(relativeFontSizeToBase16(12)),
@@ -61,7 +63,11 @@ export var countWrapperStyles = css({
 });
 export var orderZeroStyles = css({
   order: '0',
-  marginInline: getBooleanFF('platform.design-system-team.editor-new-button_jjjdo') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)") : 0
+  marginInline: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)")
+});
+export var orderZeroDeprecatedStyles = css({
+  order: '0',
+  marginInline: 0
 });
 export var orderOneStyles = css({
   order: '1'

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

@@ -8,9 +8,10 @@ export declare const sectionWrapperJustified: import("@emotion/react").Serialize
 export declare const textFieldWrapper: import("@emotion/react").SerializedStyles;
 export declare const afterInputSection: import("@emotion/react").SerializedStyles;
 export declare const matchCaseSection: import("@emotion/react").SerializedStyles;
-export declare const NextPreviousItem: import("@emotion/react").SerializedStyles;
+export declare const nextPreviousItemStyles: import("@emotion/react").SerializedStyles;
 export declare const countStyles: import("@emotion/react").SerializedStyles;
 export declare const countStylesAlternateStyles: import("@emotion/react").SerializedStyles;
 export declare const countWrapperStyles: import("@emotion/react").SerializedStyles;
 export declare const orderZeroStyles: import("@emotion/react").SerializedStyles;
+export declare const orderZeroDeprecatedStyles: import("@emotion/react").SerializedStyles;
 export declare const orderOneStyles: import("@emotion/react").SerializedStyles;

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

@@ -8,9 +8,10 @@ export declare const sectionWrapperJustified: import("@emotion/react").Serialize
 export declare const textFieldWrapper: import("@emotion/react").SerializedStyles;
 export declare const afterInputSection: import("@emotion/react").SerializedStyles;
 export declare const matchCaseSection: import("@emotion/react").SerializedStyles;
-export declare const NextPreviousItem: import("@emotion/react").SerializedStyles;
+export declare const nextPreviousItemStyles: import("@emotion/react").SerializedStyles;
 export declare const countStyles: import("@emotion/react").SerializedStyles;
 export declare const countStylesAlternateStyles: import("@emotion/react").SerializedStyles;
 export declare const countWrapperStyles: import("@emotion/react").SerializedStyles;
 export declare const orderZeroStyles: import("@emotion/react").SerializedStyles;
+export declare const orderZeroDeprecatedStyles: import("@emotion/react").SerializedStyles;
 export declare const orderOneStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-find-replace",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "find replace plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",