@atlaskit/media-avatar-picker 28.3.4 → 28.3.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-avatar-picker
 
+## 28.3.5
+
+### Patch Changes
+
+- [`db4ffeaeaec78`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db4ffeaeaec78) -
+  Avatar picker dialog now keeps its 470px preferred height as a minimum and grows to fit the submit
+  error flag, so the Save and Cancel buttons stay within the modal.
+
 ## 28.3.4
 
 ### Patch Changes

package/dist/cjs/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

package/dist/cjs/avatar-picker-dialog/index.js

@@ -57,6 +57,11 @@ var fixedCrop = exports.fixedCrop = {
   y: 0,
   size: _layoutConst.CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+var AVATAR_DIALOG_HEIGHT = 470;
+var dialogContentStyles = {
+  root: "_1tke1784"
+};
 var formStyles = null;
 var avatarPickerViewWrapperStyles = null;
 var altTextFieldStyles = {
@@ -258,10 +263,12 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     key: "render",
     value: function render() {
       var content = /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-        height: "".concat(_layoutConst.AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+        xcss: dialogContentStyles.root,
+        testId: "avatar-picker-dialog-content"
       }, this.props.avatars.length > 0 && /*#__PURE__*/_react.default.createElement(_SRLiveTitle.SRLiveTitle, {
         mode: this.state.mode
       }), /*#__PURE__*/_react.default.createElement(_modalHeader.default, {
@@ -270,10 +277,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       }, /*#__PURE__*/_react.default.createElement(_modalTitle.default, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
-        className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+        className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
       }, /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
-      }, this.renderBody())), this.footerContent()));
+      }, this.renderBody())), this.footerContent())));
       return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
         locale: "en"
       }, content);

package/dist/cjs/avatar-picker-dialog/layout-const.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_HEIGHT = void 0;
+exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = void 0;
 var _rectangle = require("@atlaskit/media-ui/rectangle");
 var DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 var AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_WIDTH = 375;
-var AVATAR_DIALOG_HEIGHT = exports.AVATAR_DIALOG_HEIGHT = 470;
 var PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 var PREDEFINED_AVATARS_VIEW_HEIGHT = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 var CONTAINER_SIZE = exports.CONTAINER_SIZE = 8 * 32;

package/dist/es2019/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

package/dist/es2019/avatar-picker-dialog/index.js

@@ -19,13 +19,13 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';
 import { PredefinedAvatarList } from '../predefined-avatar-list';
 import { PredefinedAvatarView } from '../predefined-avatar-view';
 import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
-import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
+import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
 import { SRLiveTitle } from './SRLiveTitle';
 import { SubmitErrorDialog } from './SubmitErrorDialog';
 import { Mode } from './types';
@@ -41,6 +41,11 @@ export const fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+const AVATAR_DIALOG_HEIGHT = 470;
+const dialogContentStyles = {
+  root: "_1tke1784"
+};
 const formStyles = null;
 const avatarPickerViewWrapperStyles = null;
 const altTextFieldStyles = {
@@ -225,10 +230,12 @@ export class AvatarPickerDialog extends PureComponent {
   }
   render() {
     const content = /*#__PURE__*/React.createElement(ModalDialog, {
-      height: `${AVATAR_DIALOG_HEIGHT}px`,
       width: `${AVATAR_DIALOG_WIDTH}px`,
       shouldScrollInViewport: true,
       onClose: this.props.onCancel
+    }, /*#__PURE__*/React.createElement(Stack, {
+      xcss: dialogContentStyles.root,
+      testId: "avatar-picker-dialog-content"
     }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
       mode: this.state.mode
     }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -237,10 +244,10 @@ export class AvatarPickerDialog extends PureComponent {
     }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
       "aria-label": "form",
       onSubmit: this.onSave,
-      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
     }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
       className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
-    }, this.renderBody())), this.footerContent()));
+    }, this.renderBody())), this.footerContent())));
     return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, content);

package/dist/es2019/avatar-picker-dialog/layout-const.js

@@ -1,7 +1,6 @@
 import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export const AVATAR_DIALOG_WIDTH = 375;
-export const AVATAR_DIALOG_HEIGHT = 470;
 export const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export const CONTAINER_SIZE = 8 * 32;

package/dist/esm/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

package/dist/esm/avatar-picker-dialog/index.js

@@ -28,13 +28,13 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';
 import { PredefinedAvatarList } from '../predefined-avatar-list';
 import { PredefinedAvatarView } from '../predefined-avatar-view';
 import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
-import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
+import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
 import { SRLiveTitle } from './SRLiveTitle';
 import { SubmitErrorDialog } from './SubmitErrorDialog';
 import { Mode } from './types';
@@ -50,6 +50,11 @@ export var fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+var AVATAR_DIALOG_HEIGHT = 470;
+var dialogContentStyles = {
+  root: "_1tke1784"
+};
 var formStyles = null;
 var avatarPickerViewWrapperStyles = null;
 var altTextFieldStyles = {
@@ -251,10 +256,12 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var content = /*#__PURE__*/React.createElement(ModalDialog, {
-        height: "".concat(AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
+      }, /*#__PURE__*/React.createElement(Stack, {
+        xcss: dialogContentStyles.root,
+        testId: "avatar-picker-dialog-content"
       }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
         mode: this.state.mode
       }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -263,10 +270,10 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
-        className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+        className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
       }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
         className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
-      }, this.renderBody())), this.footerContent()));
+      }, this.renderBody())), this.footerContent())));
       return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, content);

package/dist/esm/avatar-picker-dialog/layout-const.js

@@ -1,7 +1,6 @@
 import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export var DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export var AVATAR_DIALOG_WIDTH = 375;
-export var AVATAR_DIALOG_HEIGHT = 470;
 export var PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export var PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export var CONTAINER_SIZE = 8 * 32;

package/dist/types/avatar-picker-dialog/layout-const.d.ts

@@ -1,7 +1,6 @@
 import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export declare const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export declare const AVATAR_DIALOG_WIDTH = 375;
-export declare const AVATAR_DIALOG_HEIGHT = 470;
 export declare const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export declare const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export declare const CONTAINER_SIZE: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "28.3.4",
+	"version": "28.3.5",
 	"description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -46,7 +46,7 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tokens": "^20.0.0",
+		"@atlaskit/tokens": "^20.1.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",