@atlaskit/popup 4.12.0 → 4.13.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`dd02781bfb92f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd02781bfb92f) -
8
+ Increases the height of the popup on viewports with appearance `UNSAFE_modal-below-sm`, i.e.
9
+ viewports below "sm" (mobile) from 50vh to 100vh. This change is behind the
10
+ `platform_dst_nav4_flyout_menu_slots_close_button` feature gate.
11
+
3
12
  ## 4.12.0
4
13
 
5
14
  ### Minor Changes
@@ -12,6 +12,7 @@
12
12
  ._1reo1wug{overflow-x:auto}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
14
  ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
15
+ ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
15
16
  ._c71ldtre{max-height:50vh}
16
17
  ._kqsw1n9t{position:fixed}
17
18
  ._syazi7uo{color:var(--ds-text,#292a2e)}
@@ -32,6 +32,7 @@ var wrapperStyles = {
32
32
  var scrollableStyles = null;
33
33
  var blanketStyles = null;
34
34
  var modalStyles = null;
35
+ var newModalStyles = null;
35
36
  var focusRingStyles = {
36
37
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
37
38
  };
@@ -46,7 +47,7 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
46
47
  htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
47
48
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
48
49
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
49
- className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
50
+ className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
50
51
  }, htmlAttributes, {
51
52
  ref: ref
52
53
  }), children);
@@ -12,6 +12,7 @@
12
12
  ._1reo1wug{overflow-x:auto}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
14
  ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
15
+ ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
15
16
  ._c71ldtre{max-height:50vh}
16
17
  ._kqsw1n9t{position:fixed}
17
18
  ._syazi7uo{color:var(--ds-text,#292a2e)}
@@ -19,6 +19,7 @@ const wrapperStyles = {
19
19
  const scrollableStyles = null;
20
20
  const blanketStyles = null;
21
21
  const modalStyles = null;
22
+ const newModalStyles = null;
22
23
  const focusRingStyles = {
23
24
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
24
25
  };
@@ -35,7 +36,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
35
36
  } = props;
36
37
  return /*#__PURE__*/React.createElement("div", _extends({
37
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
38
- className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
39
+ className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
39
40
  }, htmlAttributes, {
40
41
  ref: ref
41
42
  }), children);
@@ -12,6 +12,7 @@
12
12
  ._1reo1wug{overflow-x:auto}
13
13
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
14
14
  ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
15
+ ._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
15
16
  ._c71ldtre{max-height:50vh}
16
17
  ._kqsw1n9t{position:fixed}
17
18
  ._syazi7uo{color:var(--ds-text,#292a2e)}
@@ -23,6 +23,7 @@ var wrapperStyles = {
23
23
  var scrollableStyles = null;
24
24
  var blanketStyles = null;
25
25
  var modalStyles = null;
26
+ var newModalStyles = null;
26
27
  var focusRingStyles = {
27
28
  root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
28
29
  };
@@ -37,7 +38,7 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
37
38
  htmlAttributes = _objectWithoutProperties(props, _excluded);
38
39
  return /*#__PURE__*/React.createElement("div", _extends({
39
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
40
- className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
41
+ className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
41
42
  }, htmlAttributes, {
42
43
  ref: ref
43
44
  }), children);
@@ -98,6 +98,8 @@ export interface PopupComponentProps {
98
98
  /**
99
99
  * The "default" appearance is used for standard popups.
100
100
  * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
101
+ * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
102
+ * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
101
103
  */
102
104
  appearance?: 'default' | 'UNSAFE_modal-below-sm';
103
105
  /**
@@ -98,6 +98,8 @@ export interface PopupComponentProps {
98
98
  /**
99
99
  * The "default" appearance is used for standard popups.
100
100
  * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
101
+ * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
102
+ * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
101
103
  */
102
104
  appearance?: 'default' | 'UNSAFE_modal-below-sm';
103
105
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "4.12.0",
3
+ "version": "4.13.0",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -60,7 +60,7 @@
60
60
  "@atlaskit/docs": "^11.2.0",
61
61
  "@atlaskit/form": "^15.2.0",
62
62
  "@atlaskit/heading": "^5.2.0",
63
- "@atlaskit/icon": "^29.3.0",
63
+ "@atlaskit/icon": "^29.4.0",
64
64
  "@atlaskit/link": "^3.3.0",
65
65
  "@atlaskit/modal-dialog": "^14.9.0",
66
66
  "@atlaskit/section-message": "^8.11.0",