Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add custom appearance to Button #142

Merged
merged 1 commit into from
Feb 5, 2021
Merged

Add custom appearance to Button #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions packages/buttons/addon/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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" />
4 changes: 3 additions & 1 deletion packages/buttons/addon/components/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface ButtonArgs {
*
* @defaultValue 'default'
*/
appearance?: 'default' | 'outlined' | 'minimal';
appearance?: 'default' | 'outlined' | 'minimal' | 'custom';

/**
* The intent of the button
Expand Down Expand Up @@ -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');
}
Expand Down
18 changes: 15 additions & 3 deletions packages/buttons/tailwind/default-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -71,6 +71,9 @@ function defaultOptions({ config }) {
},
minimal: {
color: options.color
},
custom: {
color: options.color
}
};
}
Expand All @@ -93,7 +96,7 @@ function defaultOptions({ config }) {
}

return {
'default, outlined, minimal': {
'default, outlined, minimal, custom': {
baseStyle: {
lineHeight: defaultTheme.lineHeight.tight,
display: 'inline-block',
Expand Down Expand Up @@ -169,6 +172,15 @@ function defaultOptions({ config }) {
},

variants: generateVariants('minimal')
},
custom: {
baseStyle: {
'&[disabled]': {
opacity: null
}
},

variants: generateVariants('custom')
}
};
}
Expand Down
1 change: 1 addition & 0 deletions packages/buttons/tailwind/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
});
250 changes: 205 additions & 45 deletions packages/buttons/tests/dummy/app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading