@atlaskit/editor-toolbar 0.19.33 → 0.19.34

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 (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/ResponsiveContainer.compiled.css +8 -0
  3. package/dist/cjs/ui/ResponsiveContainer.js +9 -2
  4. package/dist/es2019/ui/ResponsiveContainer.compiled.css +8 -0
  5. package/dist/es2019/ui/ResponsiveContainer.js +9 -2
  6. package/dist/esm/ui/ResponsiveContainer.compiled.css +8 -0
  7. package/dist/esm/ui/ResponsiveContainer.js +9 -2
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.19.34
4
+
5
+ ### Patch Changes
6
+
7
+ - [`db3bf19a55517`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db3bf19a55517) -
8
+ Update breakpoint values for jira editor and jsm under platform_editor_toolbar_update_jira_config
9
+ experiment.
10
+ - Updated dependencies
11
+
3
12
  ## 0.19.33
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/ResponsiveContainer.compiled.css CHANGED
@@ -22,31 +22,39 @@
22
22
  @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
23
23
  @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
24
24
  @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 390px){._u7j1glyw._u7j1glyw .show-above-md{display:none}._c7al1ule._c7al1ule .show-below-md{display:block}}
25
26
  @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
26
27
  @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
27
28
  @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
28
29
  @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
29
30
  @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 506px){._1n52glyw._1n52glyw .show-above-md{display:none}._1nd71ule._1nd71ule .show-below-md{display:block}}
30
32
  @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
31
33
  @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
32
34
  @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
33
35
  @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
36
+ @container toolbar-container (max-width: 678px){._103bglyw._103bglyw .show-above-lg{display:none}._1p0z1ule._1p0z1ule .show-below-lg{display:block}}
34
37
  @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
35
38
  @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
36
39
  @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
37
40
  @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
38
41
  @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
42
+ @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
39
43
  @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
44
+ @container toolbar-container (min-width: 365px) and (max-width: 390px){._1u301ule._1u301ule .show-only-sm{display:block}}
40
45
  @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 391px) and (max-width: 629px){._14ob1ule._14ob1ule .show-only-md{display:block}}
41
47
  @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
42
48
  @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
43
49
  @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
44
50
  @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
45
51
  @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
52
+ @container toolbar-container (min-width: 507px) and (max-width: 678px){._lf431ule._lf431ule .show-only-md{display:block}}
46
53
  @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
47
54
  @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
48
55
  @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
49
56
  @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
50
58
  @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
51
59
  @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
52
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
package/dist/cjs/ui/ResponsiveContainer.js CHANGED
@@ -14,13 +14,16 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
  var _css = require("@atlaskit/css");
16
16
  var _compiled = require("@atlaskit/primitives/compiled");
17
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
18
  var styles = {
18
19
  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
19
20
  responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
20
21
  fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
21
22
  reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
22
23
  jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
24
+ jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
23
25
  jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
26
+ jsmCommentUpdated: "_s2iiglyw _o4331ule _1u301ule _u7j1glyw _c7al1ule _14ob1ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
24
27
  confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
25
28
  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
26
29
  };
@@ -30,7 +33,6 @@ var styles = {
30
33
  * Each preset defines a specific set of breakpoints optimized for different use cases.
31
34
  */
32
35
 
33
- // Map preset names to camelCase style keys
34
36
  var presetStyleMap = {
35
37
  fullpage: styles.fullpage,
36
38
  reduced: styles.reduced,
@@ -38,6 +40,10 @@ var presetStyleMap = {
38
40
  'jsm-comment': styles.jsmComment,
39
41
  'confluence-comment': styles.confluenceComment
40
42
  };
43
+ var updatedPresetStyleMap = {
44
+ 'jira-issue': styles.jiraIssueUpdated,
45
+ 'jsm-comment': styles.jsmCommentUpdated
46
+ };
41
47
  /**
42
48
  * A responsive container that enables container query-based responsive design using CSS container queries.
43
49
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -84,8 +90,9 @@ var presetStyleMap = {
84
90
  var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveContainer(_ref) {
85
91
  var children = _ref.children,
86
92
  breakpointPreset = _ref.breakpointPreset;
93
+ var isUpdatedConfig = (0, _expValEquals.expValEquals)('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
87
94
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
88
- xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
95
+ xcss: (0, _css.cx)(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
89
96
  }, children);
90
97
  };
91
98
 
package/dist/es2019/ui/ResponsiveContainer.compiled.css CHANGED
@@ -22,31 +22,39 @@
22
22
  @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
23
23
  @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
24
24
  @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 390px){._u7j1glyw._u7j1glyw .show-above-md{display:none}._c7al1ule._c7al1ule .show-below-md{display:block}}
25
26
  @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
26
27
  @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
27
28
  @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
28
29
  @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
29
30
  @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 506px){._1n52glyw._1n52glyw .show-above-md{display:none}._1nd71ule._1nd71ule .show-below-md{display:block}}
30
32
  @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
31
33
  @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
32
34
  @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
33
35
  @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
36
+ @container toolbar-container (max-width: 678px){._103bglyw._103bglyw .show-above-lg{display:none}._1p0z1ule._1p0z1ule .show-below-lg{display:block}}
34
37
  @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
35
38
  @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
36
39
  @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
37
40
  @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
38
41
  @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
42
+ @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
39
43
  @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
44
+ @container toolbar-container (min-width: 365px) and (max-width: 390px){._1u301ule._1u301ule .show-only-sm{display:block}}
40
45
  @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 391px) and (max-width: 629px){._14ob1ule._14ob1ule .show-only-md{display:block}}
41
47
  @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
42
48
  @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
43
49
  @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
44
50
  @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
45
51
  @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
52
+ @container toolbar-container (min-width: 507px) and (max-width: 678px){._lf431ule._lf431ule .show-only-md{display:block}}
46
53
  @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
47
54
  @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
48
55
  @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
49
56
  @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
50
58
  @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
51
59
  @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
52
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
package/dist/es2019/ui/ResponsiveContainer.js CHANGED
@@ -7,13 +7,16 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
  import React from 'react';
8
8
  import { cx } from '@atlaskit/css';
9
9
  import { Box } from '@atlaskit/primitives/compiled';
10
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
11
  const styles = {
11
12
  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
12
13
  responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
13
14
  fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
14
15
  reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
15
16
  jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
17
+ jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
16
18
  jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
19
+ jsmCommentUpdated: "_s2iiglyw _o4331ule _1u301ule _u7j1glyw _c7al1ule _14ob1ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
17
20
  confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
18
21
  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
19
22
  };
@@ -23,7 +26,6 @@ const styles = {
23
26
  * Each preset defines a specific set of breakpoints optimized for different use cases.
24
27
  */
25
28
 
26
- // Map preset names to camelCase style keys
27
29
  const presetStyleMap = {
28
30
  fullpage: styles.fullpage,
29
31
  reduced: styles.reduced,
@@ -31,6 +33,10 @@ const presetStyleMap = {
31
33
  'jsm-comment': styles.jsmComment,
32
34
  'confluence-comment': styles.confluenceComment
33
35
  };
36
+ const updatedPresetStyleMap = {
37
+ 'jira-issue': styles.jiraIssueUpdated,
38
+ 'jsm-comment': styles.jsmCommentUpdated
39
+ };
34
40
  /**
35
41
  * A responsive container that enables container query-based responsive design using CSS container queries.
36
42
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -78,8 +84,9 @@ export const ResponsiveContainer = ({
78
84
  children,
79
85
  breakpointPreset
80
86
  }) => {
87
+ const isUpdatedConfig = expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
81
88
  return /*#__PURE__*/React.createElement(Box, {
82
- xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
89
+ xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
83
90
  }, children);
84
91
  };
85
92
 
package/dist/esm/ui/ResponsiveContainer.compiled.css CHANGED
@@ -22,31 +22,39 @@
22
22
  @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
23
23
  @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
24
24
  @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 390px){._u7j1glyw._u7j1glyw .show-above-md{display:none}._c7al1ule._c7al1ule .show-below-md{display:block}}
25
26
  @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
26
27
  @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
27
28
  @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
28
29
  @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
29
30
  @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 506px){._1n52glyw._1n52glyw .show-above-md{display:none}._1nd71ule._1nd71ule .show-below-md{display:block}}
30
32
  @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
31
33
  @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
32
34
  @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
33
35
  @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
36
+ @container toolbar-container (max-width: 678px){._103bglyw._103bglyw .show-above-lg{display:none}._1p0z1ule._1p0z1ule .show-below-lg{display:block}}
34
37
  @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
35
38
  @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
36
39
  @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
37
40
  @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
38
41
  @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
42
+ @container toolbar-container (min-width: 280px) and (max-width: 506px){._1j4d1ule._1j4d1ule .show-only-sm{display:block}}
39
43
  @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
44
+ @container toolbar-container (min-width: 365px) and (max-width: 390px){._1u301ule._1u301ule .show-only-sm{display:block}}
40
45
  @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 391px) and (max-width: 629px){._14ob1ule._14ob1ule .show-only-md{display:block}}
41
47
  @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
42
48
  @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
43
49
  @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
44
50
  @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
45
51
  @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
52
+ @container toolbar-container (min-width: 507px) and (max-width: 678px){._lf431ule._lf431ule .show-only-md{display:block}}
46
53
  @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
47
54
  @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
48
55
  @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
49
56
  @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 679px) and (max-width: 1023px){._g5yu1ule._g5yu1ule .show-only-lg{display:block}}
50
58
  @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
51
59
  @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
52
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
package/dist/esm/ui/ResponsiveContainer.js CHANGED
@@ -7,13 +7,16 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
  import React from 'react';
8
8
  import { cx } from '@atlaskit/css';
9
9
  import { Box } from '@atlaskit/primitives/compiled';
10
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
11
  var styles = {
11
12
  responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
12
13
  responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
13
14
  fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
14
15
  reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
15
16
  jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
17
+ jiraIssueUpdated: "_152xglyw _1cn41ule _1j4d1ule _1n52glyw _1nd71ule _lf431ule _103bglyw _1p0z1ule _g5yu1ule _tzm6glyw _ktne1ule _87bn1ule",
16
18
  jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
19
+ jsmCommentUpdated: "_s2iiglyw _o4331ule _1u301ule _u7j1glyw _c7al1ule _14ob1ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
17
20
  confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
18
21
  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
19
22
  };
@@ -23,7 +26,6 @@ var styles = {
23
26
  * Each preset defines a specific set of breakpoints optimized for different use cases.
24
27
  */
25
28
 
26
- // Map preset names to camelCase style keys
27
29
  var presetStyleMap = {
28
30
  fullpage: styles.fullpage,
29
31
  reduced: styles.reduced,
@@ -31,6 +33,10 @@ var presetStyleMap = {
31
33
  'jsm-comment': styles.jsmComment,
32
34
  'confluence-comment': styles.confluenceComment
33
35
  };
36
+ var updatedPresetStyleMap = {
37
+ 'jira-issue': styles.jiraIssueUpdated,
38
+ 'jsm-comment': styles.jsmCommentUpdated
39
+ };
34
40
  /**
35
41
  * A responsive container that enables container query-based responsive design using CSS container queries.
36
42
  * This component establishes a containment context named 'toolbar-container' that child components can
@@ -77,8 +83,9 @@ var presetStyleMap = {
77
83
  export var ResponsiveContainer = function ResponsiveContainer(_ref) {
78
84
  var children = _ref.children,
79
85
  breakpointPreset = _ref.breakpointPreset;
86
+ var isUpdatedConfig = expValEquals('platform_editor_toolbar_update_jira_config', 'isEnabled', true) && breakpointPreset in updatedPresetStyleMap;
80
87
  return /*#__PURE__*/React.createElement(Box, {
81
- xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
88
+ xcss: cx(breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, isUpdatedConfig ? updatedPresetStyleMap[breakpointPreset] : presetStyleMap[breakpointPreset])
82
89
  }, children);
83
90
  };
84
91
 
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.19.33",
6
+ "version": "0.19.34",
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": "^18.0.0",
33
- "@atlaskit/tmp-editor-statsig": "^31.0.0",
33
+ "@atlaskit/tmp-editor-statsig": "^31.1.0",
34
34
  "@atlaskit/tokens": "^11.0.0",
35
35
  "@atlaskit/tooltip": "^20.14.0",
36
36
  "@babel/runtime": "^7.0.0",