Skip to content

Commit

Permalink
Merge pull request #63 from DeloitteDigitalAPAC/feature/button-icons
Browse files Browse the repository at this point in the history 
Add icon to button component
  • Loading branch information
@ricominten
ricominten authored Aug 23, 2019
2 parents 9545b10 + 29814ef commit bff2274
Show file tree
Hide file tree
Showing 8 changed files with 257 additions and 154 deletions.
70 changes: 54 additions & 16 deletions components/RuiButton/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,91 @@ package: "@rhythm-ui"
title: "rui-button"
---

# button
# Button

Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.

## Types
```html preview
<rui-button>Button</rui-button>
```

## Configuration

|Prop|Values|Notes|
|---|---|---|
|Types| **primary/secondary/tertiary** |Set button type|
|Variants|**fill/outline/tertiary**|Set button variant|
|Sizes|**small/normal/large**|Set button size|
|Disabled|**true/false**|Set button disabled state|
|Behaviour|**button/submit/reset/anchor**|Set button behaviour, if unspecified the default `button` will be set, unless an href has been specified then it will be an `a` tag|
|label|**string**|Set button aria-label, should be used if the button only displays an icon to the user|

## Examples

### Types
```html preview
<rui-button>Default</rui-button>
<rui-button type="primary">Primary</rui-button>
<rui-button type="secondary">Secondary</rui-button>
<rui-button type="tertiary">Tertiary</rui-button>
```

## Variants

### Variants
Variant options are: **fill|outline|tertiary**
```html preview
<rui-button variant="fill">Fill (default)</rui-button>
<rui-button variant="outline">Outline</rui-button>
<rui-button variant="ghost">Ghost</rui-button>
```

## Behaviour
### Sizes
Size options are: **small|normal|large**

```html preview
<rui-button behaviour="button">Button (default)</rui-button>
<rui-button behaviour="submit">Form Submit</rui-button>
<rui-button behaviour="reset">Form Reset</rui-button>
<rui-button behaviour="anchor">Anchor</rui-button>
<rui-button href="#">Href</rui-button>
<rui-button size="small">Small</rui-button>
<rui-button size="normal">Normal (default)</rui-button>
<rui-button size="large">Large</rui-button>
```

## Disabled

Button can be disabled by using the disabled prop
```html preview
<rui-button disabled>Disabled</rui-button>
<rui-button variant="outline" disabled>Outline</rui-button>
<rui-button variant="ghost" disabled>Ghost</rui-button>
```
> (Disabled is not supported with the anchor behaviour)
## Sizes
### Icons
Button can accept iconography by adding the icon in the desired location relative to the text, styling the icon is like styling any regular nested html element.
```html preview
<rui-button>Proceed <rui-icon src="http://pluspng.com/img-png/right-arrow-png-right-arrow-512.png"></rui-icon></rui-button>
<rui-button label="Proceed"><rui-icon src="http://pluspng.com/img-png/right-arrow-png-right-arrow-512.png"></rui-icon></rui-button>
<rui-button class="custom-button-icon" variant="outline"><rui-icon src="https://image.flaticon.com/icons/svg/54/54321.svg"></rui-icon>Back</rui-icon></rui-button>
```
```css
rui-button rui-icon {
--rui-icon__width: 12px;
--rui-icon__height: 12px;
--rui-icon__color: #ffffff;
}
rui-button:hover rui-icon {
--rui-icon__color: #000000;
}
```

## Behaviour
Behaviour options are: **button|submit|reset|anchor** (if nothing is specified the default will be set unless an href has been specified)
```html preview
<rui-button size="small">Small</rui-button>
<rui-button size="normal">Normal (default)</rui-button>
<rui-button size="large">Large</rui-button>
<rui-button behaviour="button">Button (default)</rui-button>
<rui-button behaviour="submit">Form Submit</rui-button>
<rui-button behaviour="reset">Form Reset</rui-button>
<rui-button behaviour="anchor">Anchor</rui-button>
<rui-button href="#">Href</rui-button>
<rui-button onClick="() => {window.alert('button clicked')}"}">onClick</rui-button>
```
## Extending
```js
Expand Down
71 changes: 36 additions & 35 deletions components/RuiButton/src/RuiButton.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ export const layout = css`
user-select: none;
white-space: nowrap;
vertical-align: middle;
box-sizing: border-box;
line-height: var(--rui-button__line-height);
align-items: var(--rui-button__align-items);
Expand Down Expand Up @@ -284,40 +285,6 @@ export const layout = css`
transform: var(--rui-button__transform-active);
}
/* Disabled */
:host([disabled]) .btn,
:host([disabled]) .btn:hover,
:host([disabled]) .btn:focus,
:host([disabled]) .btn:active {
cursor: var(--rui-button__cursor-disabled);
background-color: var(--rui-button__background-color-disabled);
color: var(--rui-button__color-disabled);
transform: var(--rui-button__transform-disabled);
border: var(--rui-button__border-disabled);
}
/* Variants */
:host([variant="outline"]) .btn {
--rui-button__background-color: transparent;
--rui-button__border-active: var(--rui-button__border);
--rui-button__border-focus: var(--rui-button__border);
--rui-button__border-hover: var(--rui-button__border);
--rui-button__border: 1px solid var(--rui-button__border-color);
--rui-button__color: var(--global-gray-color-3, #595457);
}
:host([variant="ghost"]) .btn {
--rui-button__background-color-active: var(--global-gray-color-3, #595457);
--rui-button__background-color-focus: var(--global-gray-color-3, #595457);
--rui-button__background-color-hover: var(--global-gray-color-3, #595457);
--rui-button__background-color: transparent;
--rui-button__border-active: none;
--rui-button__border-focus: none;
--rui-button__border-hover: none;
--rui-button__border: none;
--rui-button__color: var(--global-gray-color-3, #595457);
}
/* Themes */
/* Primary Theming */
Expand Down Expand Up @@ -347,6 +314,40 @@ export const layout = css`
--rui-button__background-color-focus: var(--global-tertiary-shade-4, #B71C1C);
}
/* Variants */
:host([variant="outline"]) .btn {
--rui-button__background-color: transparent;
--rui-button__border-active: var(--rui-button__border);
--rui-button__border-focus: var(--rui-button__border);
--rui-button__border-hover: var(--rui-button__border);
--rui-button__border: 1px solid var(--rui-button__border-color);
--rui-button__color: var(--global-gray-color-3, #595457);
}
:host([variant="ghost"]) {
--rui-button__background-color-active: var(--global-gray-color-3, #595457);
--rui-button__background-color-focus: var(--global-gray-color-3, #595457);
--rui-button__background-color-hover: var(--global-gray-color-3, #595457);
--rui-button__background-color: transparent;
--rui-button__border-active: none;
--rui-button__border-focus: none;
--rui-button__border-hover: none;
--rui-button__border: none;
--rui-button__color: var(--global-gray-color-3, #595457);
}
/* Disabled */
:host([disabled]) .btn,
:host([disabled]) .btn:hover,
:host([disabled]) .btn:focus,
:host([disabled]) .btn:active {
cursor: var(--rui-button__cursor-disabled);
background-color: var(--rui-button__background-color-disabled);
color: var(--rui-button__color-disabled);
transform: var(--rui-button__transform-disabled);
border: var(--rui-button__border-disabled);
}
/* Sizes */
:host([size="small"]) .btn {
Expand All @@ -358,4 +359,4 @@ export const layout = css`
--rui-button__padding: var(--rui-button__padding-large);
--rui-button__font-size: var(--rui-button__font-size-large);
}
`
`
Loading

0 comments on commit bff2274

Please sign in to comment.