Metal-modal-deprecate#8: make modal resizable

demos/index.html

@@ -18,7 +18,9 @@ <h1>Modal</h1>
 			element: '.modal',
 			header: '<h4 class="modal-title">Modal header</h4>',
 			body: 'One fine body...',
-			footer: '<button type="button" class="btn btn-primary">OK</button>'
+			footer: '<button type="button" class="btn btn-primary">OK</button>',
+			maxHeight: 300,
+			width: 500
 		});
 
 		document.querySelector('.openModal').addEventListener('click', function() {

package.json

@@ -29,11 +29,8 @@
     "modal"
   ],
   "dependencies": {
-    "metal": "^2.0.0",
-    "metal-component": "^2.0.0",
-    "metal-dom": "^2.0.0",
-    "metal-events": "^2.0.0",
-    "metal-soy": "^2.0.0"
+		"metal-component": "^1.0.0-rc.11",
+    "metal-soy": "^1.0.0-rc.11"
   },
   "devDependencies": {
     "bootstrap": "^3.3.6",

src/Modal.js

@@ -243,6 +243,13 @@ Modal.STATE = {
 	header: {
 	},
 
+		/**
+		 * Number indicating the max height of the modal in pixels.
+		 * @type {number}
+		 */
+		maxHeight: {
+		},
+
 	/**
 	 * Whether modal should hide on esc.
 	 * @type {boolean}
@@ -290,6 +297,13 @@ Modal.STATE = {
 	role: {
 		validator: core.isString,
 		value: 'dialog'
+	},
+
+	/**
+	 * Number indicating the width of the modal in pixels.
+	 * @type {number}
+	 */
+	width: {
 	}
 };
 

src/Modal.soy

@@ -11,30 +11,33 @@
 	{@param? footer: html|string}
 	{@param? header: html|string}
 	{@param? headerId: string}
+	{@param? maxHeight: number}
 	{@param? noCloseButton: bool}
 	{@param? role: string}
 	{@param? visible: bool}
+	{@param? width: number}
 	<div
 		class="modal{$elementClasses ? ' ' + $elementClasses : ''}"
 		style="display: {$visible ? 'block' : 'none'}">
 		<div
+			aria-describedby="{$bodyId}"
+			aria-labelledby="{$headerId}"
 			class="modal-dialog{$dialogClasses ? ' ' + $dialogClasses : ''}"
 			tabindex="0"
 			role="{$role ? $role : 'dialog'}"
-			aria-labelledby="{$headerId}"
-			aria-describedby="{$bodyId}">
+			style="width: {$width}px">
 			<div class="modal-content">
 				<header class="modal-header">
 					{if $header}
 						{if not $noCloseButton}
-							<button type="button" class="close" data-onclick="hide" aria-label="Close">
+							<button aria-label="Close" class="close" data-onclick="hide" type="button">
 								<span aria-hidden="true">×</span>
 							</button>
 						{/if}
 						<div id="{$headerId}">{$header}</div>
 					{/if}
 				</header>
-				<section class="modal-body" id="{$bodyId}" role="document" tabindex="0">
+				<section class="modal-body" id="{$bodyId}" role="document" tabindex="0" style="max-height: {$maxHeight}px; overflow-y: auto">
 					{if $body}
 						{$body}
 					{/if}