Make link button variants match other buttons.

elementalui · Mar 16, 2016 · cc544fa · cc544fa
1 parent 9586e5f
commit cc544fa
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 58 deletions.
diff --git a/less/components/Button.less b/less/components/Button.less
@@ -153,65 +153,33 @@
 
 // Make a button look and behave like a link
 .Button--link {
-	color: @link-color;
-	font-weight: normal;
-
-	&,
-	&:active,
-	&.active,
-	&[disabled],
-	fieldset[disabled] & {
-		.box-shadow(none);
-		background-color: transparent;
-	}
-	&,
-	&:hover,
-	&:focus,
-	&:active {
-		border-color: transparent;
-		outline: none;
-	}
-	&:hover,
-	&:focus {
-		background-color: transparent;
-		color: @link-hover-color;
-		text-decoration: @link-hover-decoration;
-	}
+	.button-link-variant(@link-color; @link-hover-color; @link-hover-decoration);
 }
-.Button--link-text {
-	.Button--link();
-	color: @text-color;
 
-	&:hover,
-	&:focus {
-		color: @app-primary;
-		outline: none;
-	}
+// Make a button look and behave like text.
+.Button--link-text {
+	.button-link-variant(@text-color; @app-primary; @link-hover-decoration);
 }
-.Button--link-cancel {
-	.Button--link();
-	color: @gray-light;
 
-	&:hover,
-	&:focus {
-		color: @app-danger;
-		outline: none;
-	}
+.Button--link-primary {
+	.button-link-variant(@app-primary; @app-primary; @link-hover-decoration);
 }
 .Button--link-success {
-	.Button--link();
-	color: @app-success;
+	.button-link-variant(@app-success; @app-success; @link-hover-decoration);
+}
+.Button--link-warning {
+	.button-link-variant(@app-warning; @app-warning; @link-hover-decoration);
+}
+.Button--link-danger {
+	.button-link-variant(@app-danger; @app-danger; @link-hover-decoration);
+}
 
-	&:hover,
-	&:focus {
-		color: @app-success;
-		outline: none;
-	}
+// Some special link button styles.
+.Button--link-cancel {
+	.button-link-variant(@gray-light; @app-danger; @link-hover-decoration);
 }
 .Button--link-delete {
-	.Button--link();
-	color: @gray-light;
-
+	.button-link-variant(@gray-light; @app-danger; @link-hover-decoration);
 	&:hover,
 	&:focus {
 		#gradient .vertical(lighten(@app-danger, 4%), darken(@app-danger, 4%));

diff --git a/less/mixins/buttons.less b/less/mixins/buttons.less
@@ -1,4 +1,4 @@
-// 
+//
 // Button variants
 // ==============================
 
@@ -103,4 +103,35 @@
 		border-color: darken(@border, 20%);
 		box-shadow: none;
 	}
-}
+}
+
+
+
+// Link
+
+.button-link-variant(@color; @hover-color; @hover-decoration) {
+	color: @color;
+	font-weight: normal;
+
+	&,
+	&:active,
+	&.active,
+	&[disabled],
+	fieldset[disabled] & {
+		.box-shadow(none);
+		background-color: transparent;
+	}
+	&,
+	&:hover,
+	&:focus,
+	&:active {
+		border-color: transparent;
+		outline: none;
+	}
+	&:hover,
+	&:focus {
+		background-color: transparent;
+		color: @hover-color;
+		text-decoration: @hover-decoration;
+	}
+}
diff --git a/site/src/pages/Buttons.js b/site/src/pages/Buttons.js
@@ -45,6 +45,10 @@ const BUTTON_HOLLOW_VARIANTS = [
 const BUTTON_LINK_VARIANTS = [
 	{ label: 'Link',             value: 'link' },
 	{ label: 'Link Text',        value: 'link-text' },
+	{ label: 'Link Primary',     value: 'link-primary' },
+	{ label: 'Link Success',     value: 'link-success' },
+	{ label: 'Link Warning',     value: 'link-warning' },
+	{ label: 'Link Danger',      value: 'link-danger' },
 	{ label: 'Link Cancel',      value: 'link-cancel' },
 	{ label: 'Link Delete',      value: 'link-delete' }
 ];
@@ -77,6 +81,12 @@ var Buttons = React.createClass({
 			);
 		});
 	},
+	renderButtonSource(variantType) {
+		var parts = variantType.map(type => {
+			return `<Button type="${type.value}">${type.label}</Button>`;
+		});
+		return parts.join('\n');
+	},
 
 	render () {
 		return (
@@ -146,12 +156,7 @@ var Buttons = React.createClass({
 						{this.renderButtonVariants(BUTTON_LINK_VARIANTS)}
 					</div>
 					<ExampleSource>
-						{`
-							<Button type="link">Link</Button>
-							<Button type="link-text">Link Text</Button>
-							<Button type="link-cancel">Link Cancel</Button>
-							<Button type="link-delete">Link Delete</Button>
-						`}
+						{this.renderButtonSource(BUTTON_LINK_VARIANTS)}
 					</ExampleSource>
 				</div>
 

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -20,6 +20,10 @@ const BUTTON_TYPES = [
 	'danger',
 	'link',
 	'link-text',
+	'link-primary',
+	'link-success',
+	'link-warning',
+	'link-danger',
 	'link-cancel',
 	'link-delete',
 ];