Merge pull request #34 from josemarluedke/feat/renderless-button

Add renderless Button
josemarluedke · Feb 23, 2020 · 97c9490 · 97c9490
2 parents 416181e + 8146d02
commit 97c9490
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 7 deletions.
diff --git a/packages/buttons/addon/components/button.hbs b/packages/buttons/addon/components/button.hbs
@@ -9,10 +9,14 @@ Intents:
 --}}
 
 {{!-- template-lint-disable require-button-type --}}
-<button
-  type={{this.type}}
-  class={{this.classNames}}
-  ...attributes
->
-  {{yield}}
-</button>
+{{#if @isRenderless}}
+  {{yield (hash classNames=this.classNames)}}
+{{else}}
+  <button
+    type={{this.type}}
+    class={{this.classNames}}
+    ...attributes
+  >
+    {{yield}}
+  </button>
+{{/if}}
diff --git a/packages/buttons/addon/components/button.ts b/packages/buttons/addon/components/button.ts
@@ -9,6 +9,7 @@ interface ButtonArgs {
   isSmall?: boolean;
   isLarge?: boolean;
   isXLarge?: boolean;
+  isRenderless?: boolean;
 }
 
 export default class Button extends Component<ButtonArgs> {

diff --git a/packages/buttons/tests/integration/components/button-test.ts b/packages/buttons/tests/integration/components/button-test.ts
@@ -144,4 +144,13 @@ module('Integration | Component | Button', function(hooks) {
       });
     });
   });
+
+  test('it yields classNames when renderless', async function(assert) {
+    await render(
+      hbs`<Button @isRenderless={{true}} as |btn|>
+            <div data-test-id="my-div">{{btn.classNames}}</div>
+          </Button>`
+    );
+    assert.dom('[data-test-id="my-div"]').hasText('btn');
+  });
 });
diff --git a/packages/docs/app/components/demo/buttons/button-renderless.hbs b/packages/docs/app/components/demo/buttons/button-renderless.hbs
@@ -0,0 +1,12 @@
+<DocsDemo as |demo|>
+  {{#demo.example name="demo-buttons-button-renderless.hbs"}}
+    <Button @isRenderless={{true}} as |btn|>
+      <a href="javascript:void(0)" class={{btn.classNames}}>My Llink</a>
+    </Button>
+  {{/demo.example}}
+
+  <demo.snippet
+    @name="demo-buttons-button-renderless.hbs"
+    @label="components/demo.hbs"
+  />
+</DocsDemo>
diff --git a/packages/docs/app/templates/docs/buttons/button.md b/packages/docs/app/templates/docs/buttons/button.md
@@ -17,6 +17,16 @@ Here are the possible sizes and its argument name.
 
 <Demo::Buttons::ButtonSizes />
 
+## Renderless
+
+Sometimes a button element is not ideal for a given case, but the same styles are still desired.
+Frontile provides the option to disable rendering the element, but instead yield back an object with
+the class names it would use.
+
+To enable this behavior, pass `@isRenderless` as true to the `Button` component.
+
+<Demo::Buttons::ButtonRenderless />
+
 ## `@type` Argument
 
 Use the `@type` argument to modify the `type` attribute of the button. By default, `button` will be used.

diff --git a/packages/docs/app/templates/docs/index.md b/packages/docs/app/templates/docs/index.md
@@ -7,3 +7,5 @@ Packages:
 
 - `@frontile/core`
 - `@frontile/forms`
+- `@frontile/changeset-form`
+- `@frontile/buttons`