chore: 🤖 initial icon-only support in button

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: &) {

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}}

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'),
+  }
+});