From c2fe73d6d1bcd3778dd683388a055ce47860610d Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 6 May 2020 17:53:09 -0400
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20support=20for?=
 =?UTF-8?q?=20left=20and=20right=20icons=20to=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/button.js   |  2 ++
 addons/rose/addon/styles/rose/_icon.scss      |  2 +-
 .../addon/styles/rose/utilities/_button.scss  | 10 +++++++++
 .../templates/components/rose/button.hbs      | 22 ++++++++++++++++++-
 .../addon/templates/components/rose/icon.hbs  |  2 +-
 addons/rose/stories/button.stories.js         | 15 +++++++++++--
 .../components/rose/button-test.js            | 17 +++++++++-----
 7 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/addons/rose/addon/components/rose/button.js b/addons/rose/addon/components/rose/button.js
index 3b11f0a24..f5d06e910 100644
--- a/addons/rose/addon/components/rose/button.js
+++ b/addons/rose/addon/components/rose/button.js
@@ -10,4 +10,6 @@ import layout from '../../templates/components/rose/button';
  */
 export default Component.extend({
   layout,
+
+  tagName: ''
 });
diff --git a/addons/rose/addon/styles/rose/_icon.scss b/addons/rose/addon/styles/rose/_icon.scss
index 003d287c0..08d4c6438 100644
--- a/addons/rose/addon/styles/rose/_icon.scss
+++ b/addons/rose/addon/styles/rose/_icon.scss
@@ -14,6 +14,6 @@
   > svg {
     width: var(--size);
     height: var(--size);
-    vertical-align: middle;
+    vertical-align: text-top;
   }
 }
diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index 29cee9130..ea1e9b539 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -24,6 +24,16 @@
       text-shadow: map.get($default, 'text-shadow');
     }
 
+    > .rose-button-icon-left {
+      margin-left: -(sizing.rems(xs));
+      margin-right: sizing.rems(xxs);
+    }
+
+    > .rose-button-icon-right {
+      margin-left: sizing.rems(xxs);
+      margin-right: -(sizing.rems(xs));
+    }
+
     &:not(:disabled) {
       @if $hover {
         &:hover {
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index 6256543d0..c9ff41a6b 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -4,5 +4,25 @@
   disabled={{if @disabled "disabled"}}
   class={{if  @style (concat "rose-button-" @style)}}
   >
-  {{yield}}
+
+  {{#if @iconLeft}}
+    <Rose::Icon
+      @name={{@iconLeft}}
+      @size="medium"
+      class="rose-button-icon-left"
+    />
+  {{/if}}
+
+  <span class="rose-button-body">
+    {{yield}}
+  </span>
+
+  {{#if @iconRight}}
+    <Rose::Icon
+      @name={{@iconRight}}
+      @size="medium"
+      class="rose-button-icon-right"
+    />
+  {{/if}}
+
 </button>
diff --git a/addons/rose/addon/templates/components/rose/icon.hbs b/addons/rose/addon/templates/components/rose/icon.hbs
index d215526f6..8973d5a78 100644
--- a/addons/rose/addon/templates/components/rose/icon.hbs
+++ b/addons/rose/addon/templates/components/rose/icon.hbs
@@ -1,3 +1,3 @@
-<span class="rose-icon {{@size}}">
+<span ...attributes class="rose-icon {{@size}}">
   {{inline-svg @name}}
 </span>
diff --git a/addons/rose/stories/button.stories.js b/addons/rose/stories/button.stories.js
index 645f8c39c..546301459 100644
--- a/addons/rose/stories/button.stories.js
+++ b/addons/rose/stories/button.stories.js
@@ -6,19 +6,28 @@ export default {
   title: 'Rose::Button',
 };
 
+const icons = {
+  none: null,
+  'alert-circle-fill': 'alert-circle-fill',
+  'chevron-right': 'chevron-right',
+  'copy-action': 'copy-action',
+};
+
 export const Normal = () => ({
   template: hbs`
     <Rose::Button
       @submit={{submit}}
       @disabled={{disabled}}
       @style={{style}}
+      @iconLeft={{iconLeft}}
+      @iconRight={{iconRight}}
       {{on "click" onClick}}
       >
       {{text}}
     </Rose::Button>
   `,
   context: {
-    text: text('text', 'Button 🌈'),
+    text: text('text', 'Button'),
     submit: boolean('submit', false),
     disabled: boolean('disabled', false),
     style: select(
@@ -32,6 +41,8 @@ export const Normal = () => ({
       },
       'primary'
     ),
+    iconLeft: select('iconLeft', icons, 'copy-action'),
+    iconRight: select('iconRight', icons, 'chevron-right'),
     onClick: action('clicked'),
-  },
+  }
 });
diff --git a/addons/rose/tests/integration/components/rose/button-test.js b/addons/rose/tests/integration/components/rose/button-test.js
index 89ba514fb..dfe764fc9 100644
--- a/addons/rose/tests/integration/components/rose/button-test.js
+++ b/addons/rose/tests/integration/components/rose/button-test.js
@@ -13,23 +13,30 @@ module('Integration | Component | rose/button', function (hooks) {
 
   test('it is type="button" by default', async function (assert) {
     await render(hbs`<Rose::Button>Button</Rose::Button>`);
-    assert.equal(await find('button').type, 'button');
+    assert.equal(find('button').type, 'button');
   });
 
   test('it is type="submit" when @submit={{true}}', async function (assert) {
     await render(hbs`<Rose::Button @submit={{true}} />`);
-    assert.equal(await find('button').type, 'submit');
+    assert.equal(find('button').type, 'submit');
   });
 
   test('it is disabled when @disabled={{true}}', async function (assert) {
     await render(hbs`<Rose::Button @disabled={{true}} />`);
-    assert.equal(await find('button').disabled, true);
+    assert.equal(find('button').disabled, true);
   });
 
   test('it adds a style class', async function (assert) {
     await render(hbs`<Rose::Button @style="primary" />`);
-    assert.ok(await find('button.rose-button-primary'));
+    assert.ok(find('.rose-button-primary'));
     await render(hbs`<Rose::Button @style="secondary" />`);
-    assert.ok(await find('button.rose-button-secondary'));
+    assert.ok(find('.rose-button-secondary'));
+  });
+
+  test('it supports left and right icons', async function (assert) {
+    await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-left'));
+    await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-right'));
   });
 });

From 36675fdc6f3cd73edd7baf8e44d4b0ff02348637 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 7 May 2020 11:59:35 -0400
Subject: [PATCH 2/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20initial=20icon-only?=
 =?UTF-8?q?=20support=20in=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/utilities/_button.scss  | 13 +++++++++++++
 .../templates/components/rose/button.hbs      | 10 +++++++++-
 addons/rose/stories/button.stories.js         | 19 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index ea1e9b539..f07bd5cb5 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -9,6 +9,19 @@
   padding: sizing.rems(off-xs) sizing.rems(l);
   border-radius: sizing.rems(xxxs);
   border: sizing.rems(xxxxs) solid;
+
+  &.rose-button-icon-only {
+    padding-right: sizing.rems(s);
+    padding-left: sizing.rems(s);
+    .rose-button-body {
+      position: absolute;
+      top: -1000px;
+      left: -1000px;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+    }
+  }
 }
 
 @mixin button-style($name, $default, $hover: &, $active: &, $disabled: &) {
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index c9ff41a6b..19f28bca1 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -2,7 +2,7 @@
   ...attributes
   type={{if @submit "submit" "button"}}
   disabled={{if @disabled "disabled"}}
-  class={{if  @style (concat "rose-button-" @style)}}
+  class="{{if  @style (concat "rose-button-" @style)}} {{if @iconOnly "rose-button-icon-only"}}"
   >
 
   {{#if @iconLeft}}
@@ -17,6 +17,14 @@
     {{yield}}
   </span>
 
+  {{#if @iconOnly}}
+    <Rose::Icon
+      @name={{@iconOnly}}
+      @size="medium"
+      class="rose-button-icon-only"
+    />
+  {{/if}}
+
   {{#if @iconRight}}
     <Rose::Icon
       @name={{@iconRight}}
diff --git a/addons/rose/stories/button.stories.js b/addons/rose/stories/button.stories.js
index 546301459..abad0aab2 100644
--- a/addons/rose/stories/button.stories.js
+++ b/addons/rose/stories/button.stories.js
@@ -46,3 +46,22 @@ export const Normal = () => ({
     onClick: action('clicked'),
   }
 });
+
+export const IconOnly = () => ({
+  template: hbs`
+    <p>Icon-only buttons visually hide their text, revealing just an icon.
+    It's still important to include meaningful text in the body of the
+    button for accessibility purposes.</p>
+
+    <Rose::Button
+      @style="secondary"
+      @iconOnly={{iconOnly}}
+      >
+      {{text}}
+    </Rose::Button>
+  `,
+  context: {
+    text: text('text', 'Button'),
+    iconOnly: select('iconOnly', icons, 'copy-action'),
+  }
+});

From 01954f189bc9a2f7e16a1f6d4c3f457a739390b5 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 7 May 2020 14:27:42 -0400
Subject: [PATCH 3/4] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20icon=20only=20?=
 =?UTF-8?q?button=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/button.js              | 2 +-
 addons/rose/addon/templates/components/rose/button.hbs   | 1 -
 addons/rose/stories/button.stories.js                    | 9 +++++----
 .../tests/integration/components/rose/button-test.js     | 6 ++++++
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/addons/rose/addon/components/rose/button.js b/addons/rose/addon/components/rose/button.js
index f5d06e910..02b50d397 100644
--- a/addons/rose/addon/components/rose/button.js
+++ b/addons/rose/addon/components/rose/button.js
@@ -11,5 +11,5 @@ import layout from '../../templates/components/rose/button';
 export default Component.extend({
   layout,
 
-  tagName: ''
+  tagName: '',
 });
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index 19f28bca1..bb940e89c 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -21,7 +21,6 @@
     <Rose::Icon
       @name={{@iconOnly}}
       @size="medium"
-      class="rose-button-icon-only"
     />
   {{/if}}
 
diff --git a/addons/rose/stories/button.stories.js b/addons/rose/stories/button.stories.js
index abad0aab2..53cca2788 100644
--- a/addons/rose/stories/button.stories.js
+++ b/addons/rose/stories/button.stories.js
@@ -11,6 +11,7 @@ const icons = {
   'alert-circle-fill': 'alert-circle-fill',
   'chevron-right': 'chevron-right',
   'copy-action': 'copy-action',
+  'lock-closed': 'lock-closed',
 };
 
 export const Normal = () => ({
@@ -44,7 +45,7 @@ export const Normal = () => ({
     iconLeft: select('iconLeft', icons, 'copy-action'),
     iconRight: select('iconRight', icons, 'chevron-right'),
     onClick: action('clicked'),
-  }
+  },
 });
 
 export const IconOnly = () => ({
@@ -56,12 +57,12 @@ export const IconOnly = () => ({
     <Rose::Button
       @style="secondary"
       @iconOnly={{iconOnly}}
-      >
+    >
       {{text}}
     </Rose::Button>
   `,
   context: {
     text: text('text', 'Button'),
-    iconOnly: select('iconOnly', icons, 'copy-action'),
-  }
+    iconOnly: select('iconOnly', icons, 'lock-closed'),
+  },
 });
diff --git a/addons/rose/tests/integration/components/rose/button-test.js b/addons/rose/tests/integration/components/rose/button-test.js
index dfe764fc9..2a717f01f 100644
--- a/addons/rose/tests/integration/components/rose/button-test.js
+++ b/addons/rose/tests/integration/components/rose/button-test.js
@@ -39,4 +39,10 @@ module('Integration | Component | rose/button', function (hooks) {
     await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
     assert.ok(find('.rose-button-icon-right'));
   });
+
+  test('it supports an icon-only type', async function (assert) {
+    await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
+    assert.ok(find('.rose-button-icon-only'));
+    assert.ok(find('.rose-button-icon-only .rose-icon'));
+  });
 });

From 7961e59925b84bf1c6e5339e116d88418d2326aa Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 7 May 2020 14:44:41 -0400
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20simplify=20butto?=
 =?UTF-8?q?n=20icon=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/utilities/_button.scss  | 22 +++++++++----------
 .../templates/components/rose/button.hbs      |  4 +---
 .../components/rose/button-test.js            |  7 +++---
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/addons/rose/addon/styles/rose/utilities/_button.scss b/addons/rose/addon/styles/rose/utilities/_button.scss
index f07bd5cb5..3bb506024 100644
--- a/addons/rose/addon/styles/rose/utilities/_button.scss
+++ b/addons/rose/addon/styles/rose/utilities/_button.scss
@@ -10,7 +10,17 @@
   border-radius: sizing.rems(xxxs);
   border: sizing.rems(xxxxs) solid;
 
-  &.rose-button-icon-only {
+  &.has-icon-left > .rose-icon:first-child {
+    margin-left: -(sizing.rems(xs));
+    margin-right: sizing.rems(xxs);
+  }
+
+  &.has-icon-right > .rose-icon:last-child {
+    margin-left: sizing.rems(xxs);
+    margin-right: -(sizing.rems(xs));
+  }
+
+  &.has-icon-only {
     padding-right: sizing.rems(s);
     padding-left: sizing.rems(s);
     .rose-button-body {
@@ -37,16 +47,6 @@
       text-shadow: map.get($default, 'text-shadow');
     }
 
-    > .rose-button-icon-left {
-      margin-left: -(sizing.rems(xs));
-      margin-right: sizing.rems(xxs);
-    }
-
-    > .rose-button-icon-right {
-      margin-left: sizing.rems(xxs);
-      margin-right: -(sizing.rems(xs));
-    }
-
     &:not(:disabled) {
       @if $hover {
         &:hover {
diff --git a/addons/rose/addon/templates/components/rose/button.hbs b/addons/rose/addon/templates/components/rose/button.hbs
index bb940e89c..f109c1407 100644
--- a/addons/rose/addon/templates/components/rose/button.hbs
+++ b/addons/rose/addon/templates/components/rose/button.hbs
@@ -2,14 +2,13 @@
   ...attributes
   type={{if @submit "submit" "button"}}
   disabled={{if @disabled "disabled"}}
-  class="{{if  @style (concat "rose-button-" @style)}} {{if @iconOnly "rose-button-icon-only"}}"
+  class="{{if  @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
   >
 
   {{#if @iconLeft}}
     <Rose::Icon
       @name={{@iconLeft}}
       @size="medium"
-      class="rose-button-icon-left"
     />
   {{/if}}
 
@@ -28,7 +27,6 @@
     <Rose::Icon
       @name={{@iconRight}}
       @size="medium"
-      class="rose-button-icon-right"
     />
   {{/if}}
 
diff --git a/addons/rose/tests/integration/components/rose/button-test.js b/addons/rose/tests/integration/components/rose/button-test.js
index 2a717f01f..be532a65f 100644
--- a/addons/rose/tests/integration/components/rose/button-test.js
+++ b/addons/rose/tests/integration/components/rose/button-test.js
@@ -35,14 +35,13 @@ module('Integration | Component | rose/button', function (hooks) {
 
   test('it supports left and right icons', async function (assert) {
     await render(hbs`<Rose::Button @iconLeft="chevron-left" />`);
-    assert.ok(find('.rose-button-icon-left'));
+    assert.ok(find('.has-icon-left .rose-icon'));
     await render(hbs`<Rose::Button @iconRight="chevron-left" />`);
-    assert.ok(find('.rose-button-icon-right'));
+    assert.ok(find('.has-icon-right .rose-icon'));
   });
 
   test('it supports an icon-only type', async function (assert) {
     await render(hbs`<Rose::Button @iconOnly="chevron-left" />`);
-    assert.ok(find('.rose-button-icon-only'));
-    assert.ok(find('.rose-button-icon-only .rose-icon'));
+    assert.ok(find('.has-icon-only .rose-icon'));
   });
 });