move to a predetermined size model instead of inheriting

src/mm-button/doc.json

@@ -43,6 +43,15 @@
 			"optional":true,
 			"default":"false",
 			"reflect":true
+		},
+		{
+			"name":"size",
+			"type":"String",
+			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
+			"optional":true,
+			"default":"none",
+			"options":["normal","large"],
+			"reflect":true
 		}
 	]
 }

src/mm-button/mm-button.js

@@ -20,6 +20,10 @@
 				value: "primary",
 				reflectToAttribute: true
 			},
+			size: {
+				type: String,
+				reflectToAttribute: true
+			},
 			disabled: { 
 				type: Boolean,
 				value: false, 

src/mm-input/doc.json

@@ -87,6 +87,15 @@
 			"description":"Used to display a visual error state, can be set via validation or directly.",
 			"optional":true,
 			"default":"false"
+		},
+		{
+			"name":"size",
+			"type":"String",
+			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
+			"optional":true,
+			"default":"none",
+			"options":["normal","large"],
+			"reflect":true
 		}
 	],
 	"methods": [

src/mm-input/mm-input.js

@@ -20,6 +20,10 @@
 				type: String,
 				value: false
 			},
+			size: {
+				type: String,
+				reflectToAttribute: true
+			},
 			placeholder: {
 				type: String,
 				reflectToAttribute: true

src/mm-input/mm-input.scss

@@ -16,8 +16,6 @@
 	vertical-align: middle;
 	position: relative;
 	font-size: 0em;
-	height: 29px !important;
-	line-height: 2.231em !important; // line-height equal to height, in em (don't remember the specifics around this choice but there was a case for this)
 }
 
 :host([disabled]) {
@@ -41,16 +39,15 @@
 	}
 }
 
-
 .clear-btn {
 	display: none;
 	cursor: pointer;	
 }
 
 .text-input {
 	box-sizing: border-box;
-	height: inherit;
-	line-height: inherit; 
+	height: 29px !important;
+	line-height: 2.231em !important; // line-height equal to height, in em (don't remember the specifics around this choice but there was a case for this)
 	padding: 0 10px;
 }
 
@@ -118,4 +115,23 @@
 	.text-input:focus {
 		box-shadow: none;
 	}
+}
+
+// support multiple size configurations
+:host([size='large']){
+	.text-input {
+		height: 46px !important;
+		font-size: 15px !important;
+		line-height: 2.875em !important;
+		padding: 0 15px;
+	}
+}
+
+:host([size='normal']){
+	.text-input {
+		height: 29px !important;
+		font-size: 13px !important;
+		line-height: 2.231em !important;
+		padding: 0 10px;
+	}
 }

src/shared/sass/_button.scss

@@ -6,10 +6,6 @@
 */
 @import "_mixins";
 
-:host {
-	height: 29px !important;
-}
-
 .button {
 	box-sizing: border-box;
 	@include user-select(none);
@@ -23,7 +19,7 @@
 	padding: 0 10px;
 	cursor: pointer;
 	margin: 0;
-	height: inherit;
+	height: 29px !important;
 	width: auto;
 
 	& > ::content label {
@@ -170,3 +166,20 @@
 		border-radius: 0px 0px 4px 4px;
 	}
 }
+
+// support multiple size configurations
+:host([size='large']){
+	.button {
+		height: 46px !important;
+		font-size: 15px !important;
+		padding: 0 15px;
+	}
+}
+
+:host([size='normal']){
+	.button {
+		height: 29px !important;
+		font-size: 13px !important;
+		padding: 0 10px;
+	}
+}