Merge pull request #260 from ember-learn/redesign/buttons

Add styling for link buttons

Author: MelSumner

addon/styles/colors.css

@@ -29,6 +29,9 @@
   background-color: var(--color-gray-900);
   color: var(--color-gray-300);
 
+  --color-link: var(--color-brand);
+  --color-link-hover: var(--color-brand-hc-light);
+
   & h1,
   & h2,
   & h3,

addon/styles/components/es-button.css

@@ -1,9 +1,13 @@
 .es-button,
 a.es-button,
 a.es-button:link,
-a.es-button:visited {
-  background-color: var(--color-brand);
-  color: var(--color-white);
+a.es-button:visited,
+.es-button-secondary,
+a.es-button-secondary,
+a.es-button-secondary:link,
+a.es-button-secondary:visited {
+  background-color: var(--color-button-bg);
+  color: var(--color-button-text);
   padding-left: var(--spacing-3);
   padding-right: var(--spacing-3);
   padding-top: var(--spacing-1);
@@ -12,13 +16,42 @@ a.es-button:visited {
   border-radius: var(--radius-lg);
   font-size: var(--font-size-md);
   line-height: var(--line-height-md);
+  transition: background-color 0.2s, color 0.1s;
+  box-shadow: 0 0 2px -1px var(--color-gray-800), 0 2px 9px -5px var(--color-gray-800);
 }
 
-.es-button:active {
-  background: var(--color-brand-hc-dark);
+.es-button:focus,
+a.es-button:focus,
+.es-button-secondary:focus,
+a.es-button-secondary:focus {
+  box-shadow: var(--focus), 0 0 2px -1px var(--color-gray-800), 0 2px 8px -4px var(--color-gray-800);
 }
 
-a.es-button {
+.es-button:hover,
+.es-button:active,
+a.es-button:hover,
+a.es-button:active {
+  background: var(--color-button-bg-hover);
+}
+
+a.es-button,
+a.es-button-secondary {
   display: inline-block;
   text-decoration: none;
 }
+
+.es-button-secondary,
+a.es-button-secondary,
+a.es-button-secondary:link,
+a.es-button-secondary:visited {
+  background: var(--color-button-secondary-bg);
+  color: var(--color-button-secondary-text);
+}
+
+.es-button-secondary:hover,
+.es-button-secondary:active,
+a.es-button-secondary:hover,
+a.es-button-secondary:active {
+  background: var(--color-button-secondary-bg-hover);
+  color: var(--color-button-secondary-text-hover);
+}

addon/styles/components/es-header.css

@@ -216,7 +216,7 @@
     margin-left: -0.5rem;
     padding-right: 1rem;
     padding-left: 0.5rem;
-    background-position: right center;
+    background-position: right 1px center;
   }
 
   .navbar-dropdown-list {

addon/styles/global.css

@@ -67,6 +67,20 @@
 
   --radius: 0.3125rem;
   --radius-lg: 0.625rem;
+
+
+  --color-button-text: var(--color-white);
+  --color-button-bg: var(--color-brand);
+  --color-button-bg-hover: var(--color-brand-hc-dark);
+  --color-button-secondary-text: var(--color-brand);
+  --color-button-secondary-bg: var(--color-white);
+  --color-button-secondary-bg-hover: var(--color-brand);
+  --color-button-secondary-text-hover: var(--color-white);
+
+  --color-link: var(--color-brand-hc-dark);
+  --color-link-hover: var(--color-brand);
+
+  --focus: 0 0 0px 3px rgba(25, 116, 220, 0.8);
 }
 
 @media (min-width: 1008px) {
@@ -129,26 +143,23 @@ main {
 main a,
 main a:link,
 main a:visited {
-  color: var(--color-brand-hc-dark);
+  color: var(--color-link);
   text-decoration: none;
   background: no-repeat left bottom
     linear-gradient(var(--color-brand-40), var(--color-brand-40));
   background-size: 100% 0.1875rem;
 }
 
 main a:focus,
-main a:hover {
-  color: var(--color-brand);
-}
-
+main a:hover,
 main a:active,
 main .active {
-  color: var(--color-brand);
+  color: var(--color-link-hover);
 }
 
 *:focus {
   outline: none;
-  box-shadow: 0 0 0px 3px rgba(25, 116, 220, 0.8);
+  box-shadow: var(--focus);
 }
 
 p {

addon/templates/components/es-button.hbs

@@ -1,5 +1,5 @@
 <button
-  class="es-button {{if @isLight "button-light"}} {{if @isTiny "button-tiny"}} {{if @isBlock "button-block"}}"
+  class={{if @secondary "es-button-secondary" "es-button"}}
   aria-label={{@label}}
   onclick={{action this.buttonClicked}}
   ...attributes

docs/components/button.md

@@ -5,22 +5,15 @@
 Simplest use case: a button with text in it, telling the user what to do.
 
 ```handlebars
-{{es-button label="click me"}}
+<EsButton @label="click me" />
 ```
 
-
 Also supported- block use:
 
 ```handlebars
-{{#es-button}}
+<EsButton>
   click me <span>🐹</span>
-{{/es-button}}
-```
-
-To toggle the 'disabled' property, set 'isDisabled' to true
-
-```handlebars
-{{es-button label="click me" isDisabled=true}}
+</EsButton>
 ```
 
 To add interactivity you can pass an action to `onClicked`
@@ -33,37 +26,18 @@ To add interactivity you can pass an action to `onClicked`
 {{value}}
 ```
 
-## Styling Links
-It is also possible to style a link to look like a button using the `something` class
-
-```html
-<a href="https://emberjs.com" class="es-button">Go to Ember homepage</a>
-```
-
-## Styles
-
-Outline button style:
+## Secondary Buttons
 
 ```handlebars
-{{es-button label="click me" isDark=false}}
+<EsButton @label="click me" @secondary={{true}} />
 ```
 
-Smaller button:
-
-```handlebars
-{{es-button label="click me" isTiny=true}}
-```
-
-Less Padding:
-
-```handlebars
-{{es-button label="click me" isDark=true isDense=true}}
-```
-
-Full-width button:
+## Styling Links
+It is also possible to style a link to look like a button using the `something` class
 
-```handlebars
-{{es-button label="click me" isBlock=true}}
+```html
+<a href="https://emberjs.com" class="es-button">Go to Ember homepage</a>
+<a href="https://guides.emberjs.com" class="es-button-secondary">Go to the Guides</a>
 ```
 
 ## Accessibility
@@ -73,14 +47,7 @@ Since we're using the native HTML button element and requiring a label value to
 If you are going to put an icon in the button, then you will need to set an aria-label property on the button:
 
 ```handlebars
-{{#es-button  ariaLabel="Hamster Secrets" title="Hamster Secrets"}}
+<EsButton aria-label="Hamster Secrets" title="Hamster Secrets">
   🐹
-{{/es-button}}
+</EsButton>
 ```
-
-## Other Uses
-
-There are some other ways this component could be used:
-
-- as a link
-- as a toggle button (supports the aria-pressed attribute)

tests/integration/components/es-button-test.js

@@ -28,12 +28,6 @@ module('Integration | Component | es button', function(hooks){
     assert.ok(document.querySelector('.es-button'), 'has base es-button class');
   });
 
-  test('can set button-block class', async function(assert) {
-    await render(hbs`{{es-button isBlock=true}}`);
-
-    assert.ok(document.querySelector('.button-block'), 'has button-block class');
-  });
-
   test('can display set label', async function(assert) {
     const label = 'Button Label';