Merge pull request #125 from Wikia/XW-3085

latata · web-flow · commit 149d5100902b · 2017-04-10T15:39:54.000+02:00
XW-3085 | buttons with icons
diff --git a/app/styles/route-components/_buttons.scss b/app/styles/route-components/_buttons.scss
@@ -1,3 +1,7 @@
 .fixed-width-140px {
 	width: 140px;
 }
+
+.fixed-width-180px {
+	width: 180px;
+}
diff --git a/app/templates/route-components/buttons.hbs b/app/templates/route-components/buttons.hbs
@@ -18,12 +18,21 @@
 	Other <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes">
 	valid HTML attributes</a> may be passed as well.
 </p>
+<p>
+	Buttons can contain icons with text. Add <code class="format-code">.wds-has-icon</code> class to apply proper styles
+	for using <code class="format-code">.wds-icon</code> inside the button. We assume that standard and stretched
+	buttons contain small icons (18x18) and squished buttons contain tiny icons (12x12).
+</p>
 
 <section>
 	<h2 id="primary">Primary buttons</h2>
 	<p>Default version for general use.</p>
 	{{#component-demo}}
 		{{#wds-button}}Primary button{{/wds-button}}
+		{{#wds-button class='wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Primary button
+		{{/wds-button}}
 		{{#wds-button disabled=true}}Primary disabled{{/wds-button}}
 	{{/component-demo}}
 </section>
@@ -33,6 +42,10 @@
 	<p>Adding class <code class="format-code">.wds-is-secondary</code> changes the button's looks. It is used to create a button that draws less user's attention.</p>
 	{{#component-demo}}
 		{{#wds-button class='wds-is-secondary'}}Secondary button{{/wds-button}}
+		{{#wds-button class='wds-is-secondary wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Secondary button
+		{{/wds-button}}
 		{{#wds-button class='wds-is-secondary' disabled=true}}Secondary disabled{{/wds-button}}
 	{{/component-demo}}
 </section>
@@ -42,6 +55,10 @@
 	<p>These buttons are denoted with <code class="format-code">.wds-is-text</code> class. They are the least obtrusive. Nevertheless, their paddings remain untouched, which provides the same clickable area.</p>
 	{{#component-demo}}
 		{{#wds-button class='wds-is-text'}}Text button{{/wds-button}}
+		{{#wds-button class='wds-is-text wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Text button
+		{{/wds-button}}
 		{{#wds-button class='wds-is-text' disabled=true}}Text disabled{{/wds-button}}
 	{{/component-demo}}
 </section>
@@ -51,6 +68,10 @@
 	<p>Size of the button of any aforementioned variant can be adjusted. These are the default sizes of the buttons — for comparison.</p>
 	{{#component-demo}}
 		{{#wds-button}}Primary{{/wds-button}}
+		{{#wds-button class='wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Primary button
+		{{/wds-button}}
 		{{#wds-button class='wds-is-secondary'}}Secondary{{/wds-button}}
 		{{#wds-button class='wds-is-text'}}Text{{/wds-button}}
 	{{/component-demo}}
@@ -61,6 +82,10 @@
 	<p>To make the button smaller use <code class="format-code">.wds-is-squished</code> class. This can help with fitting a button in tighter layouts.</p>
 	{{#component-demo}}
 		{{#wds-button class='wds-is-squished'}}Primary{{/wds-button}}
+		{{#wds-button class='wds-is-squished wds-has-icon'}}
+			{{wds-icon name='fandom-heart-small' class='wds-icon-tiny'}}
+			Primary
+		{{/wds-button}}
 		{{#wds-button class='wds-is-secondary wds-is-squished'}}Secondary{{/wds-button}}
 		{{#wds-button class='wds-is-text wds-is-squished'}}Text{{/wds-button}}
 	{{/component-demo}}
@@ -85,6 +110,10 @@ html[lang^='zh'] &__start-a-wiki-button {
 	<p>For a button greater in size use <code class="format-code">.wds-is-stretched</code> class. This may come in handy to draw more user's attention to the button and increase the clickable area around the label.</p>
 	{{#component-demo}}
 		{{#wds-button class='wds-is-stretched'}}Primary{{/wds-button}}
+		{{#wds-button class='wds-is-stretched wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Primary button
+		{{/wds-button}}
 		{{#wds-button class='wds-is-secondary wds-is-stretched'}}Secondary{{/wds-button}}
 		{{#wds-button class='wds-is-text wds-is-stretched'}}Text{{/wds-button}}
 	{{/component-demo}}
@@ -104,6 +133,10 @@ html[lang^='zh'] &__start-a-wiki-button {
 	<p>Button labels can wrap to multiple lines.</p>
 	{{#component-demo}}
 		{{#wds-button class='fixed-width-140px'}}Multiline button label with 3rd line{{/wds-button}}
+		{{#wds-button class='fixed-width-180px wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Multiline button label
+		{{/wds-button}}
 	{{/component-demo}}
 </section>
 
@@ -112,6 +145,10 @@ html[lang^='zh'] &__start-a-wiki-button {
 	<p>When no special handlers of the click event are needed — just navigation to a certain URL, consider using an anchor tag <code>&lt;a&gt;</code> styled as a button. It is achieved by adding a <code class="format-code">.wds-button</code> class just like for the <code>&lt;button&gt;</code> element. Optionally add any other desired button classes.</p>
 	{{#component-demo}}
 		{{#wds-button tagName='a' href='#'}}Link button{{/wds-button}}
+		{{#wds-button tagName='a' href='#' class='wds-has-icon'}}
+			{{wds-icon name='fandom-heart' size='small'}}
+			Link button
+		{{/wds-button}}
 		{{#wds-button tagName='a' href='#' class='wds-is-secondary'}}Secondary link button{{/wds-button}}
 	{{/component-demo}}
 </section>
diff --git a/dist/css/styles.css b/dist/css/styles.css
diff --git a/dist/scss/wds-components/_buttons.scss b/dist/scss/wds-components/_buttons.scss
@@ -18,6 +18,8 @@
 	}
 
 	$active-color: darken($wds-color-link, 20%);
+	$button-padding-horizontal: 18px;
+	$button-squished-padding-horizontal: 12px;
 	$line-height: 1.3em;
 
 	@include button-background-color($wds-color-link);
@@ -32,7 +34,7 @@
 	letter-spacing: .15px;
 	line-height: $line-height;
 	outline: none;
-	padding: 16px 18px 15px;
+	padding: 16px $button-padding-horizontal 15px;
 	text-align: center;
 	text-decoration: none;
 	text-transform: uppercase;
@@ -63,7 +65,7 @@
 
 	&.wds-is-squished {
 		font-size: $wds-typescale-size-minus-3;
-		padding: 10px 12px 9px;
+		padding: 10px $button-squished-padding-horizontal 9px;
 	}
 
 	&.wds-is-stretched {
@@ -98,6 +100,28 @@
 		}
 	}
 
+	&.wds-has-icon {
+		padding-left: $button-padding-horizontal + $wds-icon-small-size + 6px;
+		position: relative;
+
+		&.wds-is-squished {
+			padding-left: $button-squished-padding-horizontal + $wds-icon-tiny-size + 6px;
+
+			.wds-icon {
+				left: $button-squished-padding-horizontal;
+				margin-top: -$wds-icon-tiny-size / 2;
+			}
+		}
+
+		.wds-icon {
+			left: $button-padding-horizontal;
+			margin-top: -$wds-icon-small-size / 2;
+			pointer-events: none;
+			position: absolute;
+			top: 50%;
+		}
+	}
+
 	$social-colors: (
 		facebook: $wds-color-social-facebook,
 		googleplus: $wds-color-social-googleplus,
diff --git a/dist/scss/wds-components/_icons.scss b/dist/scss/wds-components/_icons.scss
@@ -1,12 +1,12 @@
 .wds-icon {
 	fill: currentColor;
-	@include square(24px);
+	@include square($wds-icon-size);
 
 	&-small {
-		@include square(18px);
+		@include square($wds-icon-small-size);
 	}
 
 	&-tiny {
-		@include square(12px);
+		@include square($wds-icon-tiny-size);
 	}
 }
diff --git a/dist/scss/wds-variables/_icons.scss b/dist/scss/wds-variables/_icons.scss
@@ -0,0 +1,3 @@
+$wds-icon-size: 24px;
+$wds-icon-small-size: 18px;
+$wds-icon-tiny-size: 12px;
diff --git a/dist/scss/wds-variables/index.scss b/dist/scss/wds-variables/index.scss
@@ -1,6 +1,7 @@
 // Base variables
 @import 'breakpoints';
 @import 'colors';
+@import 'icons';
 @import 'typography';
 @import 'z-index-scale';
 
diff --git a/docs/assets/design-system.css b/docs/assets/design-system.css
diff --git a/docs/assets/design-system.js b/docs/assets/design-system.js
diff --git a/docs/assets/vendor.js b/docs/assets/vendor.js
diff --git a/docs/assets/wds.css b/docs/assets/wds.css
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     
-<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%225.11.0+0b3003f0%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
+<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%225.12.0+8167dabd%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
 
     <link rel="stylesheet" href="/assets/vendor.css">
     <link rel="stylesheet" href="/assets/design-system.css">
diff --git a/style-guide/styles/wds-components/_buttons.scss b/style-guide/styles/wds-components/_buttons.scss
@@ -18,6 +18,8 @@
 	}
 
 	$active-color: darken($wds-color-link, 20%);
+	$button-padding-horizontal: 18px;
+	$button-squished-padding-horizontal: 12px;
 	$line-height: 1.3em;
 
 	@include button-background-color($wds-color-link);
@@ -32,7 +34,7 @@
 	letter-spacing: .15px;
 	line-height: $line-height;
 	outline: none;
-	padding: 16px 18px 15px;
+	padding: 16px $button-padding-horizontal 15px;
 	text-align: center;
 	text-decoration: none;
 	text-transform: uppercase;
@@ -63,7 +65,7 @@
 
 	&.wds-is-squished {
 		font-size: $wds-typescale-size-minus-3;
-		padding: 10px 12px 9px;
+		padding: 10px $button-squished-padding-horizontal 9px;
 	}
 
 	&.wds-is-stretched {
@@ -98,6 +100,32 @@
 		}
 	}
 
+	&.wds-has-icon {
+		padding-left: $button-padding-horizontal + $wds-icon-small-size + 6px;
+		position: relative;
+
+		&.wds-is-squished {
+			padding-left: $button-squished-padding-horizontal + $wds-icon-tiny-size + 6px;
+
+			.wds-icon {
+				height: $wds-icon-tiny-size;
+				left: $button-squished-padding-horizontal;
+				margin-top: -$wds-icon-tiny-size / 2;
+				width: $wds-icon-tiny-size;
+			}
+		}
+
+		.wds-icon {
+			height: $wds-icon-small-size;
+			left: $button-padding-horizontal;
+			margin-top: -$wds-icon-small-size / 2;
+			pointer-events: none;
+			position: absolute;
+			top: 50%;
+			width: $wds-icon-small-size;
+		}
+	}
+
 	$social-colors: (
 		facebook: $wds-color-social-facebook,
 		googleplus: $wds-color-social-googleplus,
diff --git a/style-guide/styles/wds-components/_icons.scss b/style-guide/styles/wds-components/_icons.scss
@@ -1,12 +1,12 @@
 .wds-icon {
 	fill: currentColor;
-	@include square(24px);
+	@include square($wds-icon-size);
 
 	&-small {
-		@include square(18px);
+		@include square($wds-icon-small-size);
 	}
 
 	&-tiny {
-		@include square(12px);
+		@include square($wds-icon-tiny-size);
 	}
 }
diff --git a/style-guide/styles/wds-variables/_icons.scss b/style-guide/styles/wds-variables/_icons.scss
@@ -0,0 +1,3 @@
+$wds-icon-size: 24px;
+$wds-icon-small-size: 18px;
+$wds-icon-tiny-size: 12px;
diff --git a/style-guide/styles/wds-variables/index.scss b/style-guide/styles/wds-variables/index.scss
@@ -1,6 +1,7 @@
 // Base variables
 @import 'breakpoints';
 @import 'colors';
+@import 'icons';
 @import 'typography';
 @import 'z-index-scale';
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`.fixed-width-140px {`
`2`	`2`	`width: 140px;`
`3`	`3`	`}`
	`4`	`+`
	`5`	`+.fixed-width-180px {`
	`6`	`+ width: 180px;`
	`7`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`.wds-icon {`
`2`	`2`	`fill: currentColor;`
`3`		`- @include square(24px);`
	`3`	`+ @include square($wds-icon-size);`
`4`	`4`
`5`	`5`	`&-small {`
`6`		`- @include square(18px);`
	`6`	`+ @include square($wds-icon-small-size);`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`&-tiny {`
`10`		`- @include square(12px);`
	`10`	`+ @include square($wds-icon-tiny-size);`
`11`	`11`	`}`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+$wds-icon-size: 24px;`
	`2`	`+$wds-icon-small-size: 18px;`
	`3`	`+$wds-icon-tiny-size: 12px;`