@atlaskit/editor-core 185.11.3 → 185.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ui/ColorPickerButton/index.js +11 -4
  3. package/dist/cjs/version-wrapper.js +1 -1
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/ui/ColorPickerButton/index.js +13 -2
  6. package/dist/es2019/version-wrapper.js +1 -1
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/ui/ColorPickerButton/index.js +12 -4
  9. package/dist/esm/version-wrapper.js +1 -1
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 185.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`ad94cd465e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad94cd465e4) - ED-18748: [ux] Adding chevron to floating toolbar cell background
8
+
3
9
  ## 185.11.3
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/ui/ColorPickerButton/index.js CHANGED
@@ -22,16 +22,18 @@ var _common = require("../ColorPalette/Palettes/common");
22
22
  var _analyticsNext = require("@atlaskit/analytics-next");
23
23
  var _consts = require("../../plugins/analytics/consts");
24
24
  var _types = require("../../plugins/analytics/types");
25
- var _templateObject, _templateObject2, _templateObject3;
25
+ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
26
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
26
27
  /** @jsx jsx */
27
28
  // helps adjusts position of popup
28
29
  var colorPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
30
+ var colorPickerExpandContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px -4px;\n"])));
29
31
 
30
32
  // Control the size of color picker buttons and preview
31
33
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
32
34
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
33
35
  var colorPickerWrapper = function colorPickerWrapper(theme) {
34
- return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
36
+ return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n padding: 8px 0px;\n"])), (0, _constants.borderRadius)(), (0, _components.themed)({
35
37
  light: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
36
38
  dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
37
39
  })(theme), _colors.N60A, _colors.N60A);
@@ -166,7 +168,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
166
168
  };
167
169
  var title = props.title || '';
168
170
  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
169
- var buttonStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding: 6px;\n background-color: ", ";\n ", "\n &:before {\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n content: '';\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n width: ", ";\n height: ", ";\n padding: 0;\n }\n "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
171
+ var buttonStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 10px;\n background-color: ", ";\n ", "\n &:before {\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n content: '';\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n width: ", ";\n height: ", ";\n padding: 0;\n margin: 0px 2px;\n }\n "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
170
172
  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
171
173
  return (0, _react2.jsx)("div", {
172
174
  css: colorPickerButtonWrapper
@@ -185,7 +187,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
185
187
  setIsOpenedByKeyboard(true);
186
188
  }
187
189
  },
188
- css: buttonStyle
190
+ css: buttonStyle,
191
+ iconAfter: (0, _react2.jsx)("span", {
192
+ css: colorPickerExpandContainer
193
+ }, (0, _react2.jsx)(_chevronDown.default, {
194
+ label: ""
195
+ }))
189
196
  })), renderPopup());
190
197
  };
191
198
  var _default = (0, _analyticsNext.withAnalyticsContext)({
package/dist/cjs/version-wrapper.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "185.11.3";
9
+ var version = "185.12.0";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "185.11.3",
3
+ "version": "185.12.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/ui/ColorPickerButton/index.js CHANGED
@@ -14,10 +14,15 @@ import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
14
14
  import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
15
15
  import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
16
16
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
17
+ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
18
+
17
19
  // helps adjusts position of popup
18
20
  const colorPickerButtonWrapper = css`
19
21
  position: relative;
20
22
  `;
23
+ const colorPickerExpandContainer = css`
24
+ margin: 0px -4px;
25
+ `;
21
26
 
22
27
  // Control the size of color picker buttons and preview
23
28
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
@@ -152,7 +157,7 @@ const ColorPickerButton = props => {
152
157
  const title = props.title || '';
153
158
  const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
154
159
  const buttonStyle = css`
155
- padding: 6px;
160
+ padding: 0 10px;
156
161
  background-color: ${"var(--ds-background-neutral, transparent)"};
157
162
  ${
158
163
  /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
@@ -168,6 +173,7 @@ const ColorPickerButton = props => {
168
173
  width: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px'};
169
174
  height: ${((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px'};
170
175
  padding: 0;
176
+ margin: 0px 2px;
171
177
  }
172
178
  `;
173
179
  return jsx("div", {
@@ -187,7 +193,12 @@ const ColorPickerButton = props => {
187
193
  setIsOpenedByKeyboard(true);
188
194
  }
189
195
  },
190
- css: buttonStyle
196
+ css: buttonStyle,
197
+ iconAfter: jsx("span", {
198
+ css: colorPickerExpandContainer
199
+ }, jsx(ExpandIcon, {
200
+ label: ""
201
+ }))
191
202
  })), renderPopup());
192
203
  };
193
204
  export default withAnalyticsContext({
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "185.11.3";
2
+ export const version = "185.12.0";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "185.11.3",
3
+ "version": "185.12.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/ui/ColorPickerButton/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject, _templateObject2, _templateObject3;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
4
4
  /** @jsx jsx */
5
5
  import React from 'react';
6
6
  import { css, jsx } from '@emotion/react';
@@ -17,14 +17,17 @@ import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
17
17
  import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
18
18
  import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
19
19
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
20
+ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
21
+
20
22
  // helps adjusts position of popup
21
23
  var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
24
+ var colorPickerExpandContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 0px -4px;\n"])));
22
25
 
23
26
  // Control the size of color picker buttons and preview
24
27
  // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
25
28
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
26
29
  var colorPickerWrapper = function colorPickerWrapper(theme) {
27
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n padding: 8px 0px;\n"])), borderRadius(), themed({
30
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n padding: 8px 0px;\n"])), borderRadius(), themed({
28
31
  light: "var(--ds-surface-overlay, ".concat(N0, ")"),
29
32
  dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
30
33
  })(theme), N60A, N60A);
@@ -159,7 +162,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
159
162
  };
160
163
  var title = props.title || '';
161
164
  var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
162
- var buttonStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 6px;\n background-color: ", ";\n ", "\n &:before {\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n content: '';\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n width: ", ";\n height: ", ";\n padding: 0;\n }\n "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
165
+ var buttonStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 0 10px;\n background-color: ", ";\n ", "\n &:before {\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: center;\n content: '';\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n width: ", ";\n height: ", ";\n padding: 0;\n margin: 0px 2px;\n }\n "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
163
166
  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
164
167
  return jsx("div", {
165
168
  css: colorPickerButtonWrapper
@@ -178,7 +181,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
178
181
  setIsOpenedByKeyboard(true);
179
182
  }
180
183
  },
181
- css: buttonStyle
184
+ css: buttonStyle,
185
+ iconAfter: jsx("span", {
186
+ css: colorPickerExpandContainer
187
+ }, jsx(ExpandIcon, {
188
+ label: ""
189
+ }))
182
190
  })), renderPopup());
183
191
  };
184
192
  export default withAnalyticsContext({
package/dist/esm/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "185.11.3";
2
+ export var version = "185.12.0";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "185.11.3",
3
+ "version": "185.12.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "185.11.3",
3
+ "version": "185.12.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"