Merge pull request #142 from josemarluedke/feat/btn-custom

Add custom appearance to Button

packages/buttons/addon/components/button.md

@@ -14,16 +14,21 @@ The Button component can be used to trigger an action, such as submitting a form
 <div>
   <Button>Default</Button>
   <Button @appearance="outlined">Outlined</Button>
-  <Button @appearance="minimal">minimal</Button>
+  <Button @appearance="minimal">Minimal</Button>
+  <Button @appearance="custom">Custom</Button>
 </div>
 <div class="mt-4">
   <Button disabled>Default</Button>
   <Button @appearance="outlined" disabled>Outlined</Button>
-  <Button @appearance="minimal" disabled>minimal</Button>
+  <Button @appearance="minimal" disabled>Minimal</Button>
+  <Button @appearance="custom" disabled>Custom</Button>
 </div>
 
 ```
 
+The `custom` appearance is available for the cases where you might want to fully customize the appearance of the button.
+The default styles are mainly structural. Intent colors are applied as `color`.
+
 ## Button Intents
 
 ```hbs preview-template
@@ -84,6 +89,16 @@ You can also use TailwindCSS classes to customize even further.
 </Button>
 ```
 
+Here is another example using TailwindCSS classes with the `custom` appearance.
+```hbs preview-template
+<Button
+  @appearance="custom"
+  class="bg-teal-100 hover:bg-teal-200 hover:text-teal-600 border-teal-600 rounded-none border-dashed"
+>
+  Button
+</Button>
+```
+
 ## API
 
 <ArgsTable @of="Button" />

packages/buttons/addon/components/button.ts

@@ -13,7 +13,7 @@ interface ButtonArgs {
    *
    * @defaultValue 'default'
    */
-  appearance?: 'default' | 'outlined' | 'minimal';
+  appearance?: 'default' | 'outlined' | 'minimal' | 'custom';
 
   /**
    * The intent of the button
@@ -52,6 +52,8 @@ export default class Button extends Component<ButtonArgs> {
       names.push('btn-outlined');
     } else if (this.args.appearance === 'minimal') {
       names.push('btn-minimal');
+    } else if (this.args.appearance === 'custom') {
+      names.push('btn-custom');
     } else {
       names.push('btn');
     }

packages/buttons/tailwind/default-options.js

@@ -42,8 +42,8 @@ const defaultConfig = {
 };
 
 function defaultOptions({ config }) {
-  const hover = '&:not([disabled])&:hover';
-  const active = '&:not([disabled])&:active,&.is-active';
+  const hover = '&:not([disabled]):hover';
+  const active = '&:not([disabled]):active,&.is-active';
 
   function generateIntents(options) {
     return {
@@ -71,6 +71,9 @@ function defaultOptions({ config }) {
       },
       minimal: {
         color: options.color
+      },
+      custom: {
+        color: options.color
       }
     };
   }
@@ -93,7 +96,7 @@ function defaultOptions({ config }) {
   }
 
   return {
-    'default, outlined, minimal': {
+    'default, outlined, minimal, custom': {
       baseStyle: {
         lineHeight: defaultTheme.lineHeight.tight,
         display: 'inline-block',
@@ -169,6 +172,15 @@ function defaultOptions({ config }) {
       },
 
       variants: generateVariants('minimal')
+    },
+    custom: {
+      baseStyle: {
+        '&[disabled]': {
+          opacity: null
+        }
+      },
+
+      variants: generateVariants('custom')
     }
   };
 }

packages/buttons/tailwind/index.js

@@ -14,5 +14,6 @@ module.exports = plugin.withOptions(function () {
     addSinglePartComponent(addComponents, '.btn', components.default);
     addSinglePartComponent(addComponents, '.btn-outlined', components.outlined);
     addSinglePartComponent(addComponents, '.btn-minimal', components.minimal);
+    addSinglePartComponent(addComponents, '.btn-custom', components.custom);
   };
 });

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

@@ -1,71 +1,231 @@
+<h2 class="text-2xl mt-6">
+  Default
+</h2>
 <div class="mt-6">
-  <Button>Default</Button>
-  <Button @intent="primary">Primary</Button>
-  <Button @intent="success">Success</Button>
-  <Button @intent="warning">Warning</Button>
-  <Button @intent="danger">Danger</Button>
+  <Button>
+    Default
+  </Button>
+  <Button @intent="primary">
+    Primary
+  </Button>
+  <Button @intent="success">
+    Success
+  </Button>
+  <Button @intent="warning">
+    Warning
+  </Button>
+  <Button @intent="danger">
+    Danger
+  </Button>
 </div>
 
 <div class="mt-6">
-  <Button disabled="true">Default</Button>
-  <Button disabled="true" @intent="primary">Primary</Button>
-  <Button disabled="true" @intent="success">Success</Button>
-  <Button disabled="true" @intent="warning">Warning</Button>
-  <Button disabled="true" @intent="danger">Danger</Button>
+  <Button disabled="true">
+    Default
+  </Button>
+  <Button disabled="true" @intent="primary">
+    Primary
+  </Button>
+  <Button disabled="true" @intent="success">
+    Success
+  </Button>
+  <Button disabled="true" @intent="warning">
+    Warning
+  </Button>
+  <Button disabled="true" @intent="danger">
+    Danger
+  </Button>
 </div>
 
+<h2 class="text-2xl mt-6">
+  Outlined
+</h2>
+
 <div class="mt-6">
-  <Button @appearance="outlined">Button</Button>
-  <Button @appearance="outlined" @intent="primary">Primary</Button>
-  <Button @appearance="outlined" @intent="success">Success</Button>
-  <Button @appearance="outlined" @intent="warning">Warning</Button>
-  <Button @appearance="outlined" @intent="danger">Danger</Button>
+  <Button @appearance="outlined">
+    Button
+  </Button>
+  <Button @appearance="outlined" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="outlined" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="outlined" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="outlined" @intent="danger">
+    Danger
+  </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="outlined" disabled="true">Button</Button>
-  <Button @appearance="outlined" disabled="true" @intent="primary">Primary</Button>
-  <Button @appearance="outlined" disabled="true" @intent="success">Success</Button>
-  <Button @appearance="outlined" disabled="true" @intent="warning">Warning</Button>
-  <Button @appearance="outlined" disabled="true" @intent="danger">Danger</Button>
+  <Button @appearance="outlined" disabled="true">
+    Button
+  </Button>
+  <Button @appearance="outlined" disabled="true" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="outlined" disabled="true" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="outlined" disabled="true" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="outlined" disabled="true" @intent="danger">
+    Danger
+  </Button>
 </div>
 
+<h2 class="text-2xl mt-6">
+  Minimal
+</h2>
 <div class="mt-6">
-  <Button @appearance="minimal">Button</Button>
-  <Button @appearance="minimal" @intent="primary">Primary</Button>
-  <Button @appearance="minimal" @intent="success">Success</Button>
-  <Button @appearance="minimal" @intent="warning">Warning</Button>
-  <Button @appearance="minimal" @intent="danger">Danger</Button>
+  <Button @appearance="minimal">
+    Button
+  </Button>
+  <Button @appearance="minimal" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="minimal" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="minimal" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="minimal" @intent="danger">
+    Danger
+  </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="minimal" disabled="true">Button</Button>
-  <Button @appearance="minimal" disabled="true" @intent="primary">Primary</Button>
-  <Button @appearance="minimal" disabled="true" @intent="success">Success</Button>
-  <Button @appearance="minimal" disabled="true" @intent="warning">Warning</Button>
-  <Button @appearance="minimal" disabled="true" @intent="danger">Danger</Button>
+  <Button @appearance="minimal" disabled="true">
+    Button
+  </Button>
+  <Button @appearance="minimal" disabled="true" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="minimal" disabled="true" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="minimal" disabled="true" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="minimal" disabled="true" @intent="danger">
+    Danger
+  </Button>
 </div>
 
+<h2 class="text-2xl mt-6">
+  Custom
+</h2>
 <div class="mt-6">
-  <Button @isXSmall={{true}}>XSmall</Button>
-  <Button @isSmall={{true}}>Small</Button>
-  <Button>Normal</Button>
-  <Button @isLarge={{true}}>Large</Button>
-  <Button @isXLarge={{true}}>XLarge</Button>
+  <Button @appearance="custom">
+    Button
+  </Button>
+  <Button @appearance="custom" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="custom" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="custom" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="custom" @intent="danger">
+    Danger
+  </Button>
 </div>
 
 <div class="mt-6">
-  <Button @appearance="outlined" @isXSmall={{true}}>XSmall</Button>
-  <Button @appearance="outlined" @isSmall={{true}}>Small</Button>
-  <Button @appearance="outlined">Normal</Button>
-  <Button @appearance="outlined" @isLarge={{true}}>Large</Button>
-  <Button @appearance="outlined" @isXLarge={{true}}>XLarge</Button>
+  <Button @appearance="custom" disabled="true">
+    Button
+  </Button>
+  <Button @appearance="custom" disabled="true" @intent="primary">
+    Primary
+  </Button>
+  <Button @appearance="custom" disabled="true" @intent="success">
+    Success
+  </Button>
+  <Button @appearance="custom" disabled="true" @intent="warning">
+    Warning
+  </Button>
+  <Button @appearance="custom" disabled="true" @intent="danger">
+    Danger
+  </Button>
 </div>
 
+<h2 class="text-2xl mt-6">
+  Sizes
+</h2>
 <div class="mt-6">
-  <Button @appearance="minimal" @isXSmall={{true}}>XSmall</Button>
-  <Button @appearance="minimal" @isSmall={{true}}>Small</Button>
-  <Button @appearance="minimal">Normal</Button>
-  <Button @appearance="minimal" @isLarge={{true}}>Large</Button>
-  <Button @appearance="minimal" @isXLarge={{true}}>XLarge</Button>
+  <Button @isXSmall={{true}}>
+    XSmall
+  </Button>
+  <Button @isSmall={{true}}>
+    Small
+  </Button>
+  <Button>
+    Normal
+  </Button>
+  <Button @isLarge={{true}}>
+    Large
+  </Button>
+  <Button @isXLarge={{true}}>
+    XLarge
+  </Button>
 </div>
+
+<div class="mt-6">
+  <Button @appearance="outlined" @isXSmall={{true}}>
+    XSmall
+  </Button>
+  <Button @appearance="outlined" @isSmall={{true}}>
+    Small
+  </Button>
+  <Button @appearance="outlined">
+    Normal
+  </Button>
+  <Button @appearance="outlined" @isLarge={{true}}>
+    Large
+  </Button>
+  <Button @appearance="outlined" @isXLarge={{true}}>
+    XLarge
+  </Button>
+</div>
+
+<div class="mt-6">
+  <Button @appearance="minimal" @isXSmall={{true}}>
+    XSmall
+  </Button>
+  <Button @appearance="minimal" @isSmall={{true}}>
+    Small
+  </Button>
+  <Button @appearance="minimal">
+    Normal
+  </Button>
+  <Button @appearance="minimal" @isLarge={{true}}>
+    Large
+  </Button>
+  <Button @appearance="minimal" @isXLarge={{true}}>
+    XLarge
+  </Button>
+</div>
+
+<div class="mt-6">
+  <Button @appearance="custom" @isXSmall={{true}}>
+    XSmall
+  </Button>
+  <Button @appearance="custom" @isSmall={{true}}>
+    Small
+  </Button>
+  <Button @appearance="custom">
+    Normal
+  </Button>
+  <Button @appearance="custom" @isLarge={{true}}>
+    Large
+  </Button>
+  <Button @appearance="custom" @isXLarge={{true}}>
+    XLarge
+  </Button>
+</div>