Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

Commit

Permalink
Get rid of icon prop and adjust examples to showcase how to use icons…
Browse files Browse the repository at this point in the history 
… now

Use css grid, remove UIKit styles from button and move docs into docs block
  • Loading branch information
@LukasHirt
Lukas Hirt authored and LukasHirt committed Sep 14, 2020
1 parent 8ca6013 commit 932f4e1
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 172 deletions.
8 changes: 8 additions & 0 deletions changelog/unreleased/reworked-button
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
Change: Remove icon prop from buttons and use css grid

We've removed the prop which was responsible for displaying icons in the button component.
To add an icon into the button, it needs to be included in the slot together with the text.
We've added css grid into the button to ensure that all child items of the button will have a predefined gutter between them.
We've removed all UIKit button styles from the button component.

https://github.com/owncloud/owncloud-design-system/pull/418
187 changes: 86 additions & 101 deletions src/elements/OcButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,13 @@
:aria-label="ariaLabel"
:class="$_ocButton_buttonClass"
:disabled="disabled"
@click="onClick"
>
<oc-icon v-if="icon" :name="icon" />
<span v-if="$slots.default">
<slot name="default" />
</span>
<!-- @slot Content of the button -->
<slot />
</component>
</template>

<script>
/**
* Buttons are generally used for interface actions. Suitable for all-purpose use.
*
* Defaults to appearance that has white background with grey border.
* Primary style should be used only once per view for main call-to-action.
*
* ## Accessibility
* ### Distinction when to use a `<button>`, when to use an `<a>`
*
* Regardless of the visual representation the following differentiation should be made if in doubt what to choose.
*
* - an anchor/link changes the location, be it internally on the website, or to another resource/document/route.
* - a button does change the state of the website, e.g.: adds, deletes, opens, ... something.
*
* ### Accessible name
* The accessible name ([explainer for the term](https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)) of a button is derived from several sources. Right now, only two of them are relevant:
*
* 1. The value of the `aria-label` attribute
* 2. The text between the opening and closing tag, `<button>This text here</button>`
*
* When an aria-label attribute exists, its value will override the button text. So in this case, the accessible name would be "foo": `<button aria-label="foo">Bar</button>`, although visual users will see "Bar". This difference between accessible name and visual name is a problem for a certain type of assistive technology ([explainer for the term](https://en.wikipedia.org/wiki/Assistive_technology)), this is why the [WCAG success criterion 2.5.3, "Label in name"](https://www.w3.org/TR/WCAG21/#label-in-name) exists. This difference should be avoided, if it can't, W3C recommends that the accessible name should start with visible label.
*
* ### Icon-only button
*
* Every button has to have an accessible name. Can it not be provided by a text between the button tags (for example, because it is an icon button; see "Upload" example below), the accessible name has to be provided by `aria-label`.
*/
export default {
name: "oc-button",
status: "review",
Expand All @@ -56,7 +27,7 @@ export default {
type: String,
default: "button",
validator: value => {
return value.match(/(button|a|router)/)
return value.match(/(button|a|router-link)/)
},
},
/**
Expand Down Expand Up @@ -108,22 +79,15 @@ export default {
return value.match(/(null|submit)/)
},
},
/**
* Set the button’s icon to display.
*/
icon: {
type: String,
default: null,
},
/**
* Style variation to give additional meaning.
* `primary, secondary, danger`
* `primary, danger`
*/
variation: {
type: String,
default: "default",
validator: value => {
return value.match(/(default|primary|secondary|danger|raw)/)
return value.match(/(default|primary|danger|raw)/)
},
},
/**
Expand All @@ -140,73 +104,94 @@ export default {
let classes = ["oc-button"]
if (this.variation && !this.disabled) classes.push(`uk-button-${this.variation}`)
if (this.variation && !this.disabled) classes.push(`oc-button-${this.variation}`)
if (this.disabled) classes.push("uk-button-default")
if (this.disabled) classes.push("oc-button-default")
if (this.size && this.variation !== "raw") classes.push(`uk-button-${this.size}`)
if (this.size && this.variation !== "raw") classes.push(`oc-button-${this.size}`)
return classes
},
},
methods: {
onClick(val) {
/**
* Click event
* @event click
* @type {event}
*/
this.$emit("click", val)
},
},
}
}
</script>
<docs>
```
<template>
<section>
<h3 class="uk-heading-divider">
Button Types
</h3>
<oc-button @click="onClick">Default Button</oc-button>
<oc-button variation="primary">Primary Button</oc-button>
<oc-button variation="secondary">Secondary Button</oc-button>
<oc-button variation="danger" icon="delete">Danger Button</oc-button>
<oc-button disabled>Disabled Button</oc-button>
<oc-button variation="raw">Raw Button</oc-button>

<h3 class="uk-heading-divider">
Button sizes
</h3>
<oc-button size="large">Large</oc-button>
<oc-button size="small">Small</oc-button>

<h3 class="uk-heading-divider">
Button with icons
</h3>
<oc-button icon="home">Home</oc-button>
<oc-button variation="primary" icon="save">Save</oc-button>
<oc-button icon="save" disabled>Save disabled</oc-button>
<oc-button variation="primary" icon="cloud_upload" />

<h3 class="uk-heading-divider">
Using buttons in a group
</h3>
<div class="uk-button-group">
<oc-button variation="primary">Hello</oc-button>
<oc-button variation="secondary">What's up?</oc-button>
<oc-button icon="folder">Demo Button</oc-button>
</div>
</section>
</template>
<script>
export default {
methods: {
onClick(val) {
alert(val)
}
}
}
</script>
Buttons are generally used for interface actions. Suitable for all-purpose use.

Defaults to appearance that has white background with blue border.
Primary style should be used only once per view for main call-to-action.
All buttons are built with a css grid which ensures that there will be a pre-defined gutter between all child items.

## Accessibility
### Distinction when to use a `<button>`, when to use an `<a>`

Regardless of the visual representation the following differentiation should be made if in doubt what to choose.

- an anchor/link changes the location, be it internally on the website, or to another resource/document/route.
- a button does change the state of the website, e.g.: adds, deletes, opens, ...

### Accessible name
The accessible name ([explainer for the term](https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)) of a button is derived from several sources. Right now, only two of them are relevant:

1. The value of the `aria-label` attribute
2. The text between the opening and closing tag, `<button>This text here</button>`

When an aria-label attribute exists, its value will override the button text. So in this case, the accessible name would be "foo": `<button aria-label="foo">Bar</button>`, although visual users will see "Bar". This difference between accessible name and visual name is a problem for a certain type of assistive technology ([explainer for the term](https://en.wikipedia.org/wiki/Assistive_technology)), this is why the [WCAG success criterion 2.5.3, "Label in name"](https://www.w3.org/TR/WCAG21/#label-in-name) exists. This difference should be avoided, if it can't, W3C recommends that the accessible name should start with visible label.

### Icon-only button

Every button has to have an accessible name. It cannot be provided by a text between the button tags (for example, because it is an icon button; see "Upload" example below), the accessible name has to be provided by `aria-label`.

```js
<h3 class="uk-heading-divider">
Button Types
</h3>
<div class="uk-flex">
<oc-button class="uk-margin-small-right" v-text="'Default button'" />
<oc-button variation="primary" class="uk-margin-small-right">Primary button</oc-button>
<oc-button variation="danger" class="uk-margin-small-right">
<oc-icon name="delete" aria-hidden="true" />
Danger Button
</oc-button>
<oc-button disabled class="uk-margin-small-right">Disabled button</oc-button>
<oc-button variation="raw">Raw button</oc-button>
</div>

<h3 class="uk-heading-divider">
Button sizes
</h3>
<div class="uk-flex">
<oc-button size="large" class="uk-margin-small-right">Large</oc-button>
<oc-button size="small" class="oc-align-self-center">Small</oc-button>
</div>

<h3 class="uk-heading-divider">
Button with icons
</h3>
<div class="uk-flex">
<oc-button class="uk-margin-small-right">
<oc-icon name="home" aria-hidden="true" />
Home
</oc-button>
<oc-button variation="primary" class="uk-margin-small-right">
Select
<oc-icon name="expand_more" aria-hidden="true" />
</oc-button>
<oc-button variation="primary" aria-label="Upload a file">
<oc-icon name="cloud_upload" />
</oc-button>
</div>

<h3 class="uk-heading-divider">
Using buttons in a group
</h3>
<div class="oc-button-group">
<oc-button variation="primary">Hello</oc-button>
<oc-button>
<oc-icon name="folder" />
Demo Button
</oc-button>
<oc-button variation="danger">Delete</oc-button>
</div>
```
</docs>
2 changes: 2 additions & 0 deletions src/styles/theme/helper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ $directions: 'top', 'right', 'bottom', 'left';
}

.oc-button-reset {
-webkit-appearance: none;
background: transparent;
border: 0;
font: inherit;
min-height: 0;
padding: 0;

&::-moz-focus-inner {
Expand Down
Loading

0 comments on commit 932f4e1

Please sign in to comment.