@atlaskit/editor-toolbar 0.19.9 → 0.19.11
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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/ui/ResponsiveContainer.compiled.css +0 -14
- package/dist/cjs/ui/ResponsiveContainer.js +3 -16
- package/dist/cjs/ui/Toolbar.js +2 -4
- package/dist/cjs/ui/ToolbarDropdownMenu.js +5 -0
- package/dist/es2019/ui/ResponsiveContainer.compiled.css +0 -14
- package/dist/es2019/ui/ResponsiveContainer.js +3 -16
- package/dist/es2019/ui/Toolbar.js +2 -4
- package/dist/es2019/ui/ToolbarDropdownMenu.js +5 -0
- package/dist/esm/ui/ResponsiveContainer.compiled.css +0 -14
- package/dist/esm/ui/ResponsiveContainer.js +3 -16
- package/dist/esm/ui/Toolbar.js +2 -4
- package/dist/esm/ui/ToolbarDropdownMenu.js +5 -0
- package/dist/types/ui/ResponsiveContainer.d.ts +3 -10
- package/dist/types/ui/Toolbar.d.ts +1 -1
- package/dist/types/ui/ToolbarDropdownMenu.d.ts +2 -1
- package/dist/types-ts4.5/ui/ResponsiveContainer.d.ts +3 -10
- package/dist/types-ts4.5/ui/Toolbar.d.ts +1 -1
- package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts +2 -1
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.19.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e504eea6e1d3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e504eea6e1d3f) -
|
|
8
|
+
EDITOR-4665: Clean up platform_editor_toolbar_aifc_responsive_improve feature flag
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 0.19.10
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`e170ad8b5a383`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e170ad8b5a383) -
|
|
16
|
+
[EDTIOR-4501] add optional id prop to ToolbarDropdownMenu
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 0.19.9
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -18,50 +18,36 @@
|
|
|
18
18
|
@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
|
|
19
19
|
@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
|
|
20
20
|
@container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
|
|
21
|
-
@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
|
|
22
21
|
@container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
|
|
23
|
-
@container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
|
|
24
22
|
@container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
|
|
25
23
|
@container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
|
|
26
24
|
@container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
|
|
27
25
|
@container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
|
|
28
|
-
@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
|
|
29
|
-
@container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
|
|
30
26
|
@container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
|
|
31
27
|
@container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
|
|
32
28
|
@container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
|
|
33
|
-
@container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
|
|
34
29
|
@container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
|
|
35
|
-
@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
|
|
36
30
|
@container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
|
|
37
31
|
@container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
|
|
38
|
-
@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
|
|
39
32
|
@container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
|
|
40
33
|
@container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
|
|
41
34
|
@container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
|
|
42
|
-
@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
|
|
43
35
|
@container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
|
|
44
36
|
@container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
|
|
45
37
|
@container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
|
|
46
|
-
@container toolbar-container (min-width: 211px) and (max-width: 408px){._77vl1ule._77vl1ule .show-only-sm{display:block}}
|
|
47
38
|
@container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
|
|
48
39
|
@container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
|
|
49
40
|
@container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
|
|
50
|
-
@container toolbar-container (min-width: 408px) and (max-width: 575px){._1h871ule._1h871ule .show-only-md{display:block}}
|
|
51
41
|
@container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
|
|
52
|
-
@container toolbar-container (min-width: 411px) and (max-width: 476px){._tjgx1ule .show-only-sm{display:block}}
|
|
53
42
|
@container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
|
|
54
43
|
@container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
|
|
55
44
|
@container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
|
|
56
|
-
@container toolbar-container (min-width: 477px) and (max-width: 768px){._jt9u1ule .show-only-md{display:block}}
|
|
57
45
|
@container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
|
|
58
|
-
@container toolbar-container (min-width: 576px) and (max-width: 1024px){._ghxv1ule._ghxv1ule .show-only-lg{display:block}}
|
|
59
46
|
@container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
|
|
60
47
|
@container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
|
|
61
48
|
@container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
|
|
62
49
|
@container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
|
|
63
50
|
@container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
|
|
64
|
-
@container toolbar-container (min-width: 768px) and (max-width: 1024px){._6c751ule .show-only-lg{display:block}}
|
|
65
51
|
@container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
|
|
66
52
|
@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
|
|
67
53
|
@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
|
|
@@ -13,7 +13,6 @@ require("./ResponsiveContainer.compiled.css");
|
|
|
13
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
14
|
var _react = _interopRequireDefault(require("react"));
|
|
15
15
|
var _css = require("@atlaskit/css");
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
18
17
|
var styles = {
|
|
19
18
|
responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
|
|
@@ -23,9 +22,6 @@ var styles = {
|
|
|
23
22
|
jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
24
23
|
jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
25
24
|
confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
26
|
-
responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule _1je21ule _tjgx1ule _jt9u1ule _6c751ule",
|
|
27
|
-
responsiveRulesReduced: "_j094glyw _1mc51ule _77vl1ule _gipeglyw _311r1ule _1h871ule _11u4glyw _v1i61ule _ghxv1ule _19x4glyw _qck01ule _87bn1ule",
|
|
28
|
-
responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
|
|
29
25
|
responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
|
|
30
26
|
};
|
|
31
27
|
|
|
@@ -82,23 +78,14 @@ var presetStyleMap = {
|
|
|
82
78
|
* </ResponsiveContainer>
|
|
83
79
|
* ```
|
|
84
80
|
*
|
|
85
|
-
* @param
|
|
86
|
-
*
|
|
87
|
-
* @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
|
|
81
|
+
* @param breakpointPreset - Selects the breakpoint preset for the responsive container
|
|
88
82
|
* @returns A Box component with container query styles applied
|
|
89
83
|
*/
|
|
90
84
|
var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
|
|
91
85
|
var children = _ref.children,
|
|
92
|
-
breakpointPreset = _ref.breakpointPreset
|
|
93
|
-
reducedBreakpoints = _ref.reducedBreakpoints;
|
|
94
|
-
// Use new preset-based logic when preset is provided and feature gate is enabled
|
|
95
|
-
if (breakpointPreset && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_responsive_improve')) {
|
|
96
|
-
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
97
|
-
xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
98
|
-
}, children);
|
|
99
|
-
}
|
|
86
|
+
breakpointPreset = _ref.breakpointPreset;
|
|
100
87
|
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
101
|
-
xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer,
|
|
88
|
+
xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
102
89
|
}, children);
|
|
103
90
|
};
|
|
104
91
|
|
package/dist/cjs/ui/Toolbar.js
CHANGED
|
@@ -76,11 +76,9 @@ var Toolbar = exports.Toolbar = function Toolbar(_ref) {
|
|
|
76
76
|
var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref2) {
|
|
77
77
|
var children = _ref2.children,
|
|
78
78
|
label = _ref2.label,
|
|
79
|
-
breakpointPreset = _ref2.breakpointPreset
|
|
80
|
-
reducedBreakpoints = _ref2.reducedBreakpoints;
|
|
79
|
+
breakpointPreset = _ref2.breakpointPreset;
|
|
81
80
|
return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveContainer, {
|
|
82
|
-
breakpointPreset: breakpointPreset
|
|
83
|
-
reducedBreakpoints: reducedBreakpoints
|
|
81
|
+
breakpointPreset: breakpointPreset
|
|
84
82
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
85
83
|
xcss: (0, _css.cx)(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
|
|
86
84
|
role: (0, _expValEquals.expValEquals)('platform_editor_aifc_remove_duplicate_role', 'isEnabled', true) ? undefined : 'toolbar',
|
|
@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _react2 = require("@compiled/react");
|
|
14
14
|
var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
|
|
15
15
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
16
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
16
17
|
var _uiContext = require("../hooks/ui-context");
|
|
17
18
|
var _ToolbarButton = require("./ToolbarButton");
|
|
18
19
|
var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
|
|
@@ -26,6 +27,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
26
27
|
var iconBefore = _ref.iconBefore,
|
|
27
28
|
children = _ref.children,
|
|
28
29
|
isDisabled = _ref.isDisabled,
|
|
30
|
+
id = _ref.id,
|
|
29
31
|
testId = _ref.testId,
|
|
30
32
|
label = _ref.label,
|
|
31
33
|
_onClick = _ref.onClick;
|
|
@@ -60,6 +62,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
60
62
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
61
63
|
},
|
|
62
64
|
onFocus: triggerProps.onFocus,
|
|
65
|
+
id: (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
63
66
|
testId: testId,
|
|
64
67
|
iconBefore: iconBefore,
|
|
65
68
|
isDisabled: isDisabled,
|
|
@@ -74,6 +77,7 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
|
|
|
74
77
|
var iconBefore = _ref2.iconBefore,
|
|
75
78
|
children = _ref2.children,
|
|
76
79
|
isDisabled = _ref2.isDisabled,
|
|
80
|
+
id = _ref2.id,
|
|
77
81
|
testId = _ref2.testId,
|
|
78
82
|
label = _ref2.label,
|
|
79
83
|
_ref2$hasSectionMargi = _ref2.hasSectionMargin,
|
|
@@ -84,6 +88,7 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
|
|
|
84
88
|
return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
|
|
85
89
|
iconBefore: iconBefore,
|
|
86
90
|
isDisabled: isDisabled,
|
|
91
|
+
id: (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
87
92
|
testId: testId,
|
|
88
93
|
label: label,
|
|
89
94
|
onClick: onClick
|
|
@@ -18,50 +18,36 @@
|
|
|
18
18
|
@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
|
|
19
19
|
@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
|
|
20
20
|
@container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
|
|
21
|
-
@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
|
|
22
21
|
@container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
|
|
23
|
-
@container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
|
|
24
22
|
@container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
|
|
25
23
|
@container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
|
|
26
24
|
@container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
|
|
27
25
|
@container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
|
|
28
|
-
@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
|
|
29
|
-
@container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
|
|
30
26
|
@container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
|
|
31
27
|
@container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
|
|
32
28
|
@container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
|
|
33
|
-
@container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
|
|
34
29
|
@container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
|
|
35
|
-
@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
|
|
36
30
|
@container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
|
|
37
31
|
@container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
|
|
38
|
-
@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
|
|
39
32
|
@container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
|
|
40
33
|
@container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
|
|
41
34
|
@container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
|
|
42
|
-
@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
|
|
43
35
|
@container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
|
|
44
36
|
@container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
|
|
45
37
|
@container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
|
|
46
|
-
@container toolbar-container (min-width: 211px) and (max-width: 408px){._77vl1ule._77vl1ule .show-only-sm{display:block}}
|
|
47
38
|
@container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
|
|
48
39
|
@container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
|
|
49
40
|
@container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
|
|
50
|
-
@container toolbar-container (min-width: 408px) and (max-width: 575px){._1h871ule._1h871ule .show-only-md{display:block}}
|
|
51
41
|
@container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
|
|
52
|
-
@container toolbar-container (min-width: 411px) and (max-width: 476px){._tjgx1ule .show-only-sm{display:block}}
|
|
53
42
|
@container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
|
|
54
43
|
@container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
|
|
55
44
|
@container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
|
|
56
|
-
@container toolbar-container (min-width: 477px) and (max-width: 768px){._jt9u1ule .show-only-md{display:block}}
|
|
57
45
|
@container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
|
|
58
|
-
@container toolbar-container (min-width: 576px) and (max-width: 1024px){._ghxv1ule._ghxv1ule .show-only-lg{display:block}}
|
|
59
46
|
@container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
|
|
60
47
|
@container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
|
|
61
48
|
@container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
|
|
62
49
|
@container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
|
|
63
50
|
@container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
|
|
64
|
-
@container toolbar-container (min-width: 768px) and (max-width: 1024px){._6c751ule .show-only-lg{display:block}}
|
|
65
51
|
@container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
|
|
66
52
|
@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
|
|
67
53
|
@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
|
|
@@ -6,7 +6,6 @@ import "./ResponsiveContainer.compiled.css";
|
|
|
6
6
|
import { ax, ix } from "@compiled/react/runtime";
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { cx } from '@atlaskit/css';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
10
|
const styles = {
|
|
12
11
|
responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
|
|
@@ -16,9 +15,6 @@ const styles = {
|
|
|
16
15
|
jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
17
16
|
jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
18
17
|
confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
19
|
-
responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule _1je21ule _tjgx1ule _jt9u1ule _6c751ule",
|
|
20
|
-
responsiveRulesReduced: "_j094glyw _1mc51ule _77vl1ule _gipeglyw _311r1ule _1h871ule _11u4glyw _v1i61ule _ghxv1ule _19x4glyw _qck01ule _87bn1ule",
|
|
21
|
-
responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
|
|
22
18
|
responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
|
|
23
19
|
};
|
|
24
20
|
|
|
@@ -75,24 +71,15 @@ const presetStyleMap = {
|
|
|
75
71
|
* </ResponsiveContainer>
|
|
76
72
|
* ```
|
|
77
73
|
*
|
|
78
|
-
* @param
|
|
79
|
-
*
|
|
80
|
-
* @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
|
|
74
|
+
* @param breakpointPreset - Selects the breakpoint preset for the responsive container
|
|
81
75
|
* @returns A Box component with container query styles applied
|
|
82
76
|
*/
|
|
83
77
|
export const ResponsiveContainer = ({
|
|
84
78
|
children,
|
|
85
|
-
breakpointPreset
|
|
86
|
-
reducedBreakpoints
|
|
79
|
+
breakpointPreset
|
|
87
80
|
}) => {
|
|
88
|
-
// Use new preset-based logic when preset is provided and feature gate is enabled
|
|
89
|
-
if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
|
|
90
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
91
|
-
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
92
|
-
}, children);
|
|
93
|
-
}
|
|
94
81
|
return /*#__PURE__*/React.createElement(Box, {
|
|
95
|
-
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer,
|
|
82
|
+
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
96
83
|
}, children);
|
|
97
84
|
};
|
|
98
85
|
|
|
@@ -73,12 +73,10 @@ export const Toolbar = ({
|
|
|
73
73
|
export const PrimaryToolbar = ({
|
|
74
74
|
children,
|
|
75
75
|
label,
|
|
76
|
-
breakpointPreset
|
|
77
|
-
reducedBreakpoints
|
|
76
|
+
breakpointPreset
|
|
78
77
|
}) => {
|
|
79
78
|
return /*#__PURE__*/React.createElement(ResponsiveContainer, {
|
|
80
|
-
breakpointPreset: breakpointPreset
|
|
81
|
-
reducedBreakpoints: reducedBreakpoints
|
|
79
|
+
breakpointPreset: breakpointPreset
|
|
82
80
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
83
81
|
xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
|
|
84
82
|
role: expValEquals('platform_editor_aifc_remove_duplicate_role', 'isEnabled', true) ? undefined : 'toolbar',
|
|
@@ -5,6 +5,7 @@ import React, { useCallback } from 'react';
|
|
|
5
5
|
import { cx } from '@compiled/react';
|
|
6
6
|
import DropdownMenu from '@atlaskit/dropdown-menu';
|
|
7
7
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
9
|
import { useToolbarUI } from '../hooks/ui-context';
|
|
9
10
|
import { ToolbarButton } from './ToolbarButton';
|
|
10
11
|
import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
|
|
@@ -17,6 +18,7 @@ const ToolbarDropdownMenuContent = ({
|
|
|
17
18
|
iconBefore,
|
|
18
19
|
children,
|
|
19
20
|
isDisabled,
|
|
21
|
+
id,
|
|
20
22
|
testId,
|
|
21
23
|
label,
|
|
22
24
|
onClick
|
|
@@ -52,6 +54,7 @@ const ToolbarDropdownMenuContent = ({
|
|
|
52
54
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
53
55
|
},
|
|
54
56
|
onFocus: triggerProps.onFocus,
|
|
57
|
+
id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
55
58
|
testId: testId,
|
|
56
59
|
iconBefore: iconBefore,
|
|
57
60
|
isDisabled: isDisabled,
|
|
@@ -65,6 +68,7 @@ export const ToolbarDropdownMenu = ({
|
|
|
65
68
|
iconBefore,
|
|
66
69
|
children,
|
|
67
70
|
isDisabled,
|
|
71
|
+
id,
|
|
68
72
|
testId,
|
|
69
73
|
label,
|
|
70
74
|
hasSectionMargin = true,
|
|
@@ -74,6 +78,7 @@ export const ToolbarDropdownMenu = ({
|
|
|
74
78
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
75
79
|
iconBefore: iconBefore,
|
|
76
80
|
isDisabled: isDisabled,
|
|
81
|
+
id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
77
82
|
testId: testId,
|
|
78
83
|
label: label,
|
|
79
84
|
onClick: onClick
|
|
@@ -18,50 +18,36 @@
|
|
|
18
18
|
@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
|
|
19
19
|
@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
|
|
20
20
|
@container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
|
|
21
|
-
@container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
|
|
22
21
|
@container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
|
|
23
|
-
@container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
|
|
24
22
|
@container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
|
|
25
23
|
@container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
|
|
26
24
|
@container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
|
|
27
25
|
@container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
|
|
28
|
-
@container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
|
|
29
|
-
@container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
|
|
30
26
|
@container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
|
|
31
27
|
@container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
|
|
32
28
|
@container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
|
|
33
|
-
@container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
|
|
34
29
|
@container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
|
|
35
|
-
@container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
|
|
36
30
|
@container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
|
|
37
31
|
@container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
|
|
38
|
-
@container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
|
|
39
32
|
@container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
|
|
40
33
|
@container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
|
|
41
34
|
@container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
|
|
42
|
-
@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
|
|
43
35
|
@container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
|
|
44
36
|
@container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
|
|
45
37
|
@container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
|
|
46
|
-
@container toolbar-container (min-width: 211px) and (max-width: 408px){._77vl1ule._77vl1ule .show-only-sm{display:block}}
|
|
47
38
|
@container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
|
|
48
39
|
@container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
|
|
49
40
|
@container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
|
|
50
|
-
@container toolbar-container (min-width: 408px) and (max-width: 575px){._1h871ule._1h871ule .show-only-md{display:block}}
|
|
51
41
|
@container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
|
|
52
|
-
@container toolbar-container (min-width: 411px) and (max-width: 476px){._tjgx1ule .show-only-sm{display:block}}
|
|
53
42
|
@container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
|
|
54
43
|
@container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
|
|
55
44
|
@container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
|
|
56
|
-
@container toolbar-container (min-width: 477px) and (max-width: 768px){._jt9u1ule .show-only-md{display:block}}
|
|
57
45
|
@container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
|
|
58
|
-
@container toolbar-container (min-width: 576px) and (max-width: 1024px){._ghxv1ule._ghxv1ule .show-only-lg{display:block}}
|
|
59
46
|
@container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
|
|
60
47
|
@container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
|
|
61
48
|
@container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
|
|
62
49
|
@container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
|
|
63
50
|
@container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
|
|
64
|
-
@container toolbar-container (min-width: 768px) and (max-width: 1024px){._6c751ule .show-only-lg{display:block}}
|
|
65
51
|
@container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
|
|
66
52
|
@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
|
|
67
53
|
@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
|
|
@@ -6,7 +6,6 @@ import "./ResponsiveContainer.compiled.css";
|
|
|
6
6
|
import { ax, ix } from "@compiled/react/runtime";
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { cx } from '@atlaskit/css';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
10
|
var styles = {
|
|
12
11
|
responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
|
|
@@ -16,9 +15,6 @@ var styles = {
|
|
|
16
15
|
jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
17
16
|
jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
18
17
|
confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
|
|
19
|
-
responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule _1je21ule _tjgx1ule _jt9u1ule _6c751ule",
|
|
20
|
-
responsiveRulesReduced: "_j094glyw _1mc51ule _77vl1ule _gipeglyw _311r1ule _1h871ule _11u4glyw _v1i61ule _ghxv1ule _19x4glyw _qck01ule _87bn1ule",
|
|
21
|
-
responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
|
|
22
18
|
responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
|
|
23
19
|
};
|
|
24
20
|
|
|
@@ -75,23 +71,14 @@ var presetStyleMap = {
|
|
|
75
71
|
* </ResponsiveContainer>
|
|
76
72
|
* ```
|
|
77
73
|
*
|
|
78
|
-
* @param
|
|
79
|
-
*
|
|
80
|
-
* @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
|
|
74
|
+
* @param breakpointPreset - Selects the breakpoint preset for the responsive container
|
|
81
75
|
* @returns A Box component with container query styles applied
|
|
82
76
|
*/
|
|
83
77
|
export var ResponsiveContainer = function ResponsiveContainer(_ref) {
|
|
84
78
|
var children = _ref.children,
|
|
85
|
-
breakpointPreset = _ref.breakpointPreset
|
|
86
|
-
reducedBreakpoints = _ref.reducedBreakpoints;
|
|
87
|
-
// Use new preset-based logic when preset is provided and feature gate is enabled
|
|
88
|
-
if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
|
|
89
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
90
|
-
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
91
|
-
}, children);
|
|
92
|
-
}
|
|
79
|
+
breakpointPreset = _ref.breakpointPreset;
|
|
93
80
|
return /*#__PURE__*/React.createElement(Box, {
|
|
94
|
-
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer,
|
|
81
|
+
xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
|
|
95
82
|
}, children);
|
|
96
83
|
};
|
|
97
84
|
|
package/dist/esm/ui/Toolbar.js
CHANGED
|
@@ -69,11 +69,9 @@ export var Toolbar = function Toolbar(_ref) {
|
|
|
69
69
|
export var PrimaryToolbar = function PrimaryToolbar(_ref2) {
|
|
70
70
|
var children = _ref2.children,
|
|
71
71
|
label = _ref2.label,
|
|
72
|
-
breakpointPreset = _ref2.breakpointPreset
|
|
73
|
-
reducedBreakpoints = _ref2.reducedBreakpoints;
|
|
72
|
+
breakpointPreset = _ref2.breakpointPreset;
|
|
74
73
|
return /*#__PURE__*/React.createElement(ResponsiveContainer, {
|
|
75
|
-
breakpointPreset: breakpointPreset
|
|
76
|
-
reducedBreakpoints: reducedBreakpoints
|
|
74
|
+
breakpointPreset: breakpointPreset
|
|
77
75
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
78
76
|
xcss: cx(styles.toolbarBase, styles.primaryToolbar, styles.hiddenSelectors),
|
|
79
77
|
role: expValEquals('platform_editor_aifc_remove_duplicate_role', 'isEnabled', true) ? undefined : 'toolbar',
|
|
@@ -5,6 +5,7 @@ import React, { useCallback } from 'react';
|
|
|
5
5
|
import { cx } from '@compiled/react';
|
|
6
6
|
import DropdownMenu from '@atlaskit/dropdown-menu';
|
|
7
7
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
9
|
import { useToolbarUI } from '../hooks/ui-context';
|
|
9
10
|
import { ToolbarButton } from './ToolbarButton';
|
|
10
11
|
import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
|
|
@@ -17,6 +18,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
17
18
|
var iconBefore = _ref.iconBefore,
|
|
18
19
|
children = _ref.children,
|
|
19
20
|
isDisabled = _ref.isDisabled,
|
|
21
|
+
id = _ref.id,
|
|
20
22
|
testId = _ref.testId,
|
|
21
23
|
label = _ref.label,
|
|
22
24
|
_onClick = _ref.onClick;
|
|
@@ -51,6 +53,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
51
53
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
52
54
|
},
|
|
53
55
|
onFocus: triggerProps.onFocus,
|
|
56
|
+
id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
54
57
|
testId: testId,
|
|
55
58
|
iconBefore: iconBefore,
|
|
56
59
|
isDisabled: isDisabled,
|
|
@@ -65,6 +68,7 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
|
65
68
|
var iconBefore = _ref2.iconBefore,
|
|
66
69
|
children = _ref2.children,
|
|
67
70
|
isDisabled = _ref2.isDisabled,
|
|
71
|
+
id = _ref2.id,
|
|
68
72
|
testId = _ref2.testId,
|
|
69
73
|
label = _ref2.label,
|
|
70
74
|
_ref2$hasSectionMargi = _ref2.hasSectionMargin,
|
|
@@ -75,6 +79,7 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
|
75
79
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
76
80
|
iconBefore: iconBefore,
|
|
77
81
|
isDisabled: isDisabled,
|
|
82
|
+
id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
|
|
78
83
|
testId: testId,
|
|
79
84
|
label: label,
|
|
80
85
|
onClick: onClick
|
|
@@ -17,13 +17,8 @@ export type ResponsiveContainerProps = {
|
|
|
17
17
|
*
|
|
18
18
|
* @default 'fullpage'
|
|
19
19
|
*/
|
|
20
|
-
breakpointPreset
|
|
20
|
+
breakpointPreset: BreakpointPreset;
|
|
21
21
|
children: ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
|
|
24
|
-
* Usages - for smaller editors such as comments
|
|
25
|
-
*/
|
|
26
|
-
reducedBreakpoints?: boolean;
|
|
27
22
|
};
|
|
28
23
|
/**
|
|
29
24
|
* A responsive container that enables container query-based responsive design using CSS container queries.
|
|
@@ -65,12 +60,10 @@ export type ResponsiveContainerProps = {
|
|
|
65
60
|
* </ResponsiveContainer>
|
|
66
61
|
* ```
|
|
67
62
|
*
|
|
68
|
-
* @param
|
|
69
|
-
*
|
|
70
|
-
* @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
|
|
63
|
+
* @param breakpointPreset - Selects the breakpoint preset for the responsive container
|
|
71
64
|
* @returns A Box component with container query styles applied
|
|
72
65
|
*/
|
|
73
|
-
export declare const ResponsiveContainer: ({ children, breakpointPreset,
|
|
66
|
+
export declare const ResponsiveContainer: ({ children, breakpointPreset, }: ResponsiveContainerProps) => React.JSX.Element;
|
|
74
67
|
/**
|
|
75
68
|
* A wrapper that supports responsiveness with media queries. It needs to used together with Show component
|
|
76
69
|
*/
|
|
@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
|
|
|
21
21
|
/**
|
|
22
22
|
* A simple component representing a toolbar without box shadows - used to represent a primary toolbar
|
|
23
23
|
*/
|
|
24
|
-
export declare const PrimaryToolbar: ({ children, label, breakpointPreset,
|
|
24
|
+
export declare const PrimaryToolbar: ({ children, label, breakpointPreset, }: PrimaryToolbarProps) => React.JSX.Element;
|
|
25
25
|
export {};
|
|
@@ -14,10 +14,11 @@ type ToolbarDropdownMenuProps = {
|
|
|
14
14
|
*/
|
|
15
15
|
hasSectionMargin?: boolean;
|
|
16
16
|
iconBefore: React.ReactNode;
|
|
17
|
+
id?: string;
|
|
17
18
|
isDisabled?: boolean;
|
|
18
19
|
label?: string;
|
|
19
20
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
|
|
20
21
|
testId?: string;
|
|
21
22
|
};
|
|
22
|
-
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
23
|
+
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -17,13 +17,8 @@ export type ResponsiveContainerProps = {
|
|
|
17
17
|
*
|
|
18
18
|
* @default 'fullpage'
|
|
19
19
|
*/
|
|
20
|
-
breakpointPreset
|
|
20
|
+
breakpointPreset: BreakpointPreset;
|
|
21
21
|
children: ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* Use `preset` prop instead. This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
|
|
24
|
-
* Usages - for smaller editors such as comments
|
|
25
|
-
*/
|
|
26
|
-
reducedBreakpoints?: boolean;
|
|
27
22
|
};
|
|
28
23
|
/**
|
|
29
24
|
* A responsive container that enables container query-based responsive design using CSS container queries.
|
|
@@ -65,12 +60,10 @@ export type ResponsiveContainerProps = {
|
|
|
65
60
|
* </ResponsiveContainer>
|
|
66
61
|
* ```
|
|
67
62
|
*
|
|
68
|
-
* @param
|
|
69
|
-
*
|
|
70
|
-
* @param reducedBreakpoints - Legacy prop for reduced breakpoints (deprecated, use preset instead)
|
|
63
|
+
* @param breakpointPreset - Selects the breakpoint preset for the responsive container
|
|
71
64
|
* @returns A Box component with container query styles applied
|
|
72
65
|
*/
|
|
73
|
-
export declare const ResponsiveContainer: ({ children, breakpointPreset,
|
|
66
|
+
export declare const ResponsiveContainer: ({ children, breakpointPreset, }: ResponsiveContainerProps) => React.JSX.Element;
|
|
74
67
|
/**
|
|
75
68
|
* A wrapper that supports responsiveness with media queries. It needs to used together with Show component
|
|
76
69
|
*/
|
|
@@ -21,5 +21,5 @@ type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
|
|
|
21
21
|
/**
|
|
22
22
|
* A simple component representing a toolbar without box shadows - used to represent a primary toolbar
|
|
23
23
|
*/
|
|
24
|
-
export declare const PrimaryToolbar: ({ children, label, breakpointPreset,
|
|
24
|
+
export declare const PrimaryToolbar: ({ children, label, breakpointPreset, }: PrimaryToolbarProps) => React.JSX.Element;
|
|
25
25
|
export {};
|
|
@@ -14,10 +14,11 @@ type ToolbarDropdownMenuProps = {
|
|
|
14
14
|
*/
|
|
15
15
|
hasSectionMargin?: boolean;
|
|
16
16
|
iconBefore: React.ReactNode;
|
|
17
|
+
id?: string;
|
|
17
18
|
isDisabled?: boolean;
|
|
18
19
|
label?: string;
|
|
19
20
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
|
|
20
21
|
testId?: string;
|
|
21
22
|
};
|
|
22
|
-
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
23
|
+
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
23
24
|
export {};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.19.
|
|
6
|
+
"version": "0.19.11",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"team": "Editor: Jenga",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
31
31
|
"@atlaskit/popup": "^4.13.0",
|
|
32
32
|
"@atlaskit/primitives": "^17.1.0",
|
|
33
|
-
"@atlaskit/tmp-editor-statsig": "^17.
|
|
33
|
+
"@atlaskit/tmp-editor-statsig": "^17.7.0",
|
|
34
34
|
"@atlaskit/tokens": "^10.1.0",
|
|
35
35
|
"@atlaskit/tooltip": "^20.14.0",
|
|
36
36
|
"@babel/runtime": "^7.0.0",
|
|
@@ -81,9 +81,6 @@
|
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
"platform-feature-flags": {
|
|
84
|
-
"platform_editor_toolbar_aifc_responsive_improve": {
|
|
85
|
-
"type": "boolean"
|
|
86
|
-
},
|
|
87
84
|
"platform_editor_toolbar_aifc_undo_redo_confluence": {
|
|
88
85
|
"type": "boolean"
|
|
89
86
|
},
|