Merge pull request #143 from josemarluedke/feat/btn-size

[Breaking] Combine button size args (isSmall, isLarge, etc) into a unified size arg

.gitignore

@@ -9,6 +9,7 @@
 /node_modules/
 /packages/**/node_modules/
 /packages/**/dist/
+/site/dist/
 /site/node_modules/
 /site/lib/**/node_modules/
 

packages/buttons/addon/components/button.md

@@ -48,11 +48,11 @@ The default styles are mainly structural. Intent colors are applied as `color`.
 ## Button Sizes
 
 ```hbs preview-template
-<Button @isXSmall={{true}}>Button</Button>
-<Button @isSmall={{true}}>Button</Button>
+<Button @size="xs">Button</Button>
+<Button @size="sm">Button</Button>
 <Button>Button</Button>
-<Button @isLarge={{true}}>Button</Button>
-<Button @isXLarge={{true}}>Button</Button>
+<Button @size="lg">Button</Button>
+<Button @size="xl">Button</Button>
 ```
 
 ## Renderless Button
@@ -74,7 +74,7 @@ You can compose appearance with intents and more to create the button that best
 ```hbs preview-template
 <Button @appearance="outlined" @intent="primary">Button</Button>
 <Button @appearance="minimal" @intent="warning">Button</Button>
-<Button @isXSmall={{true}} @intent="danger">Button</Button>
+<Button @size="xs" @intent="danger">Button</Button>
 ```
 
 You can also use TailwindCSS classes to customize even further.

packages/buttons/addon/components/button.ts

@@ -19,10 +19,15 @@ interface ButtonArgs {
    * The intent of the button
    */
   intent?: 'primary' | 'success' | 'warning' | 'danger';
-  isXSmall?: boolean;
-  isSmall?: boolean;
-  isLarge?: boolean;
-  isXLarge?: boolean;
+
+  /**
+   * The size of the button
+   */
+  size?: 'xs' | 'sm' | 'lg' | 'xl';
+
+  /**
+   * Disable rendering the button element. It yields an object with classNames instead.
+   */
   isRenderless?: boolean;
 }
 
@@ -34,17 +39,6 @@ export default class Button extends Component<ButtonArgs> {
     return 'button';
   }
 
-  get size(): string | undefined {
-    const sizes: { [key: string]: boolean | undefined } = {
-      xs: this.args.isXSmall,
-      sm: this.args.isSmall,
-      lg: this.args.isLarge,
-      xl: this.args.isXLarge
-    };
-
-    return Object.keys(sizes).find((key: string) => sizes[key] === true);
-  }
-
   get classNames(): string {
     const names = [];
 
@@ -58,8 +52,8 @@ export default class Button extends Component<ButtonArgs> {
       names.push('btn');
     }
 
-    if (this.size) {
-      names.push(`${names[0]}--${this.size}`);
+    if (this.args.size) {
+      names.push(`${names[0]}--${this.args.size}`);
     }
 
     if (this.args.intent) {

packages/buttons/tests/dummy/app/templates/index.hbs

@@ -159,73 +159,73 @@
   Sizes
 </h2>
 <div class="mt-6">
-  <Button @isXSmall={{true}}>
+  <Button @size="xs">
     XSmall
   </Button>
-  <Button @isSmall={{true}}>
+  <Button @size="sm">
     Small
   </Button>
   <Button>
     Normal
   </Button>
-  <Button @isLarge={{true}}>
+  <Button @size="lg">
     Large
   </Button>
-  <Button @isXLarge={{true}}>
+  <Button @size="xl">
     XLarge
   </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="outlined" @isXSmall={{true}}>
+  <Button @appearance="outlined" @size="xs">
     XSmall
   </Button>
-  <Button @appearance="outlined" @isSmall={{true}}>
+  <Button @appearance="outlined" @size="sm">
     Small
   </Button>
   <Button @appearance="outlined">
     Normal
   </Button>
-  <Button @appearance="outlined" @isLarge={{true}}>
+  <Button @appearance="outlined" @size="lg">
     Large
   </Button>
-  <Button @appearance="outlined" @isXLarge={{true}}>
+  <Button @appearance="outlined" @size="xl">
     XLarge
   </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="minimal" @isXSmall={{true}}>
+  <Button @appearance="minimal" @size="xs">
     XSmall
   </Button>
-  <Button @appearance="minimal" @isSmall={{true}}>
+  <Button @appearance="minimal" @size="sm">
     Small
   </Button>
   <Button @appearance="minimal">
     Normal
   </Button>
-  <Button @appearance="minimal" @isLarge={{true}}>
+  <Button @appearance="minimal" @size="lg">
     Large
   </Button>
-  <Button @appearance="minimal" @isXLarge={{true}}>
+  <Button @appearance="minimal" @size="xl">
     XLarge
   </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="custom" @isXSmall={{true}}>
+  <Button @appearance="custom" @size="xs">
     XSmall
   </Button>
-  <Button @appearance="custom" @isSmall={{true}}>
+  <Button @appearance="custom" @size="sm">
     Small
   </Button>
   <Button @appearance="custom">
     Normal
   </Button>
-  <Button @appearance="custom" @isLarge={{true}}>
+  <Button @appearance="custom" @size="lg">
     Large
   </Button>
-  <Button @appearance="custom" @isXLarge={{true}}>
+  <Button @appearance="custom" @size="xl">
     XLarge
   </Button>
 </div>

packages/buttons/tests/integration/components/button-test.ts

@@ -119,41 +119,41 @@ module('Integration | Component | Button', function (hooks) {
     });
 
     module('sizes', () => {
-      test('it adds class @isXSmall', async function (assert) {
+      test('it adds class size xs"', async function (assert) {
         await render(
-          hbs`<Button @isXSmall={{true}} data-test-id="button">My Button</Button>`
+          hbs`<Button @size="xs" data-test-id="button">My Button</Button>`
         );
 
         assert.dom('[data-test-id="button"]').hasClass('btn--xs');
       });
 
-      test('it adds class @isSmall', async function (assert) {
+      test('it adds class size sm', async function (assert) {
         await render(
-          hbs`<Button @isSmall={{true}} data-test-id="button">My Button</Button>`
+          hbs`<Button @size="sm" data-test-id="button">My Button</Button>`
         );
 
         assert.dom('[data-test-id="button"]').hasClass('btn--sm');
       });
 
-      test('it adds class @isLarge', async function (assert) {
+      test('it adds class size lg', async function (assert) {
         await render(
-          hbs`<Button @isLarge={{true}} data-test-id="button">My Button</Button>`
+          hbs`<Button @size="lg" data-test-id="button">My Button</Button>`
         );
 
         assert.dom('[data-test-id="button"]').hasClass('btn--lg');
       });
 
-      test('it adds class @isXLarge', async function (assert) {
+      test('it adds class size xl', async function (assert) {
         await render(
-          hbs`<Button @isXLarge={{true}} data-test-id="button">My Button</Button>`
+          hbs`<Button @size="xl" data-test-id="button">My Button</Button>`
         );
 
         assert.dom('[data-test-id="button"]').hasClass('btn--xl');
       });
 
-      test('it adds class @isLarge with appearance', async function (assert) {
+      test('it adds class size with appearance', async function (assert) {
         await render(
-          hbs`<Button @appearance="outlined" @isLarge={{true}} data-test-id="button">My Button</Button>`
+          hbs`<Button @appearance="outlined" @size="lg" data-test-id="button">My Button</Button>`
         );
 
         assert.dom('[data-test-id="button"]').hasClass('btn-outlined--lg');