diff --git a/README.md b/README.md
index 2a3e468..695acc7 100755
--- a/README.md
+++ b/README.md
@@ -108,7 +108,7 @@ Sections help divide up the page into logical groups of items. It is recommended
### Heading
-**Manipulator:** `html`
+**Manipulator:** [`html`](#html)
Headings can be used in anywhere and can have their size adjusted to suit the context. If you place a heading item at the first position of a section's `items` array then it will automatically be styled as the header for that section.
@@ -138,7 +138,7 @@ Headings can be used in anywhere and can have their size adjusted to suit the co
### Text
-**Manipulator:** `html`
+**Manipulator:** [`html`](#html)
Text is used to provide descriptions of sections or to explain complex parts of your page. Feel free to add any extra HTML you require to the `defaultValue`
@@ -165,7 +165,7 @@ Text is used to provide descriptions of sections or to explain complex parts of
### Input
-**Manipulator:** `val`
+**Manipulator:** [`val`](#val)
Standard text input field.
@@ -203,7 +203,7 @@ Standard text input field.
#### Toggle
-**Manipulator:** `checked`
+**Manipulator:** [`checked`](#checked)
Switch for a single item.
@@ -238,7 +238,7 @@ Switch for a single item.
#### Select
-**Manipulator:** `val`
+**Manipulator:** [`val`](#val)
A dropdown menu containing multiple options.
@@ -291,7 +291,7 @@ A dropdown menu containing multiple options.
#### Color
-**Manipulator:** `color`
+**Manipulator:** [`color`](#color)
A color picker containing the 64 supported colors on Basalt and Chalk.
@@ -323,7 +323,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
#### RadioGroup
-**Manipulator:** `radiogroup`
+**Manipulator:** [`radiogroup`](#radiogroup)
A list of options allowing the user can only choose one option to submit.
@@ -368,7 +368,7 @@ A list of options allowing the user can only choose one option to submit.
#### CheckboxGroup
-**Manipulator:** `checkboxgroup`
+**Manipulator:** [`checkboxgroup`](#checkboxgroup)
A list of options where a user may choose more than one option to submit.
@@ -412,9 +412,37 @@ A list of options where a user may choose more than one option to submit.
---
+### Generic Button
+
+**Manipulator:** [`button`](#button)
+
+The submit button for the page. You **MUST** include this component somewhere in the config page (traditionally at the bottom) or users will not be able to save the form.
+
+##### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| type | string | Set to `button`. |
+| defaultValue | string | The text displayed on the button. |
+| primary | boolean | If `true` the button will be orange, if `false`, the button will be gray (defaults to `false`)|
+| attributes | object | An object containing HTML attributes to set on the input field. |
+| description | string | Optional sub-text to include below the component |
+
+##### Example
+
+```javascript
+{
+ "type": "button",
+ "primary": true,
+ "defaultValue": "Send"
+}
+```
+
+---
+
### Submit
-**Manipulator:** `html`
+**Manipulator:** [`button`](#button)
The submit button for the page. You **MUST** include this component somewhere in the config page (traditionally at the bottom) or users will not be able to save the form.
@@ -440,7 +468,6 @@ The submit button for the page. You **MUST** include this component somewhere in
### Coming Soon
- Range Slider
-- Generic Button
- Tabs
- Footer
- Dynamic + draggable list
@@ -464,6 +491,17 @@ Many of these methods fire an event when the method is called. You can listen fo
| `.hide()` | `ClayItem` | `hide` | Hides the item |
| `.show()` | `ClayItem` | `show` | Shows the item |
+#### button
+
+| Method | Returns | Event Fired | Description |
+|--------|---------|-------------| ------------|
+| `.set( [string\|HTML] value)` | `ClayItem` | `change` | Sets the content of this item. |
+| `.get()` | `string` | | Gets the content of this item. |
+| `.disable()` | `ClayItem` | `disabled` | Prevents this item from being clicked by the user. |
+| `.enable()` | `ClayItem` | `enabled` | Allows this item to be clicked by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
+
#### val
| Method | Returns | Event Fired | Description |
diff --git a/dev/config.js b/dev/config.js
index 7b13947..b19cc2c 100644
--- a/dev/config.js
+++ b/dev/config.js
@@ -50,6 +50,14 @@ module.exports = [
"defaultValue": "00FF00",
"label": "Sunny Color Picker",
"sunlight": true
+ },
+ {
+ type: 'button',
+ id: 'testButton',
+ primary: false,
+ defaultValue: 'Generic Button',
+ description: 'This is a generic button. ' +
+ 'You can listen for standard events like "click"'
}
]
},
diff --git a/src/images/example.png b/src/images/example.png
index 3a96913..6d2ebc8 100644
Binary files a/src/images/example.png and b/src/images/example.png differ
diff --git a/src/scripts/components/button.js b/src/scripts/components/button.js
new file mode 100644
index 0000000..64fc65c
--- /dev/null
+++ b/src/scripts/components/button.js
@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+ name: 'button',
+ template: require('../../templates/components/button.tpl'),
+ style: require('../../styles/clay/components/button.scss'),
+ manipulator: 'button',
+ defaults: {
+ primary: false,
+ attributes: {},
+ description: ''
+ }
+};
diff --git a/src/scripts/components/index.js b/src/scripts/components/index.js
index 5b8741c..251aba8 100644
--- a/src/scripts/components/index.js
+++ b/src/scripts/components/index.js
@@ -10,5 +10,6 @@ module.exports = {
text: require('./text'),
toggle: require('./toggle'),
radiogroup: require('./radiogroup'),
- checkboxgroup: require('./checkboxgroup')
+ checkboxgroup: require('./checkboxgroup'),
+ button: require('./button')
};
diff --git a/src/scripts/components/submit.js b/src/scripts/components/submit.js
index 18c684c..85d624e 100644
--- a/src/scripts/components/submit.js
+++ b/src/scripts/components/submit.js
@@ -4,7 +4,7 @@ module.exports = {
name: 'submit',
template: require('../../templates/components/submit.tpl'),
style: require('../../styles/clay/components/submit.scss'),
- manipulator: 'html',
+ manipulator: 'button',
defaults: {
attributes: {}
}
diff --git a/src/scripts/lib/manipulators.js b/src/scripts/lib/manipulators.js
index 9f0000b..fd277aa 100755
--- a/src/scripts/lib/manipulators.js
+++ b/src/scripts/lib/manipulators.js
@@ -46,6 +46,19 @@ module.exports = {
hide: hide,
show: show
},
+ button: {
+ get: function() {
+ return this.$manipulatorTarget.get('innerHTML');
+ },
+ set: function(value) {
+ this.$manipulatorTarget.set('innerHTML', value);
+ return this.trigger('change');
+ },
+ disable: disable,
+ enable: enable,
+ hide: hide,
+ show: show
+ },
val: {
get: function() {
return this.$manipulatorTarget.get('value');
diff --git a/src/styles/clay/_base.scss b/src/styles/clay/_base.scss
index aaa67a6..caea5e5 100644
--- a/src/styles/clay/_base.scss
+++ b/src/styles/clay/_base.scss
@@ -183,6 +183,7 @@ label {
padding: 0 $item-spacing-h $item-spacing-v ;
@include font-size(0.9);
color: $color-gray-9;
+ text-align: left;
}
.inputs {
diff --git a/src/styles/clay/_vars.scss b/src/styles/clay/_vars.scss
index 391ecbd..acb1d5e 100644
--- a/src/styles/clay/_vars.scss
+++ b/src/styles/clay/_vars.scss
@@ -34,7 +34,7 @@ $color-gray-9: #a4a4a4 ;
$color-gray-10: #ececec;
$color-gray-11: #f2f2f2;
-$button-padding: 0.7rem;
-$button-padding-ios: 0.6rem;
+$button-padding: 0.6rem;
+$button-padding-ios: 0.5rem;
$box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;
diff --git a/src/styles/clay/components/button.scss b/src/styles/clay/components/button.scss
new file mode 100644
index 0000000..b6c6e13
--- /dev/null
+++ b/src/styles/clay/components/button.scss
@@ -0,0 +1,12 @@
+.component-button {
+ text-align: center;
+
+ .section & {
+ padding-bottom: 0;
+ }
+
+ .description {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
diff --git a/src/styles/clay/elements/_button.scss b/src/styles/clay/elements/_button.scss
index 6ece43c..794ff54 100644
--- a/src/styles/clay/elements/_button.scss
+++ b/src/styles/clay/elements/_button.scss
@@ -3,52 +3,30 @@
button,
.button {
@include font-pfdin(medium);
+ @include font-size(1);
text-transform: uppercase;
- background-color: $color-gray-4;
+ background-color: $color-gray-7;
border-radius: $border-radius;
- font-size: 1rem;
- line-height: 1;
border: none;
display: inline-block;
color: $color-white;
min-width: 12rem;
text-align: center;
- margin: 0 auto;
- -webkit-tap-highlight-color: rgba(0,0,0,0);
-
+ margin: 0 auto $item-spacing-v;
padding: $button-padding;
+ @include tap-highlight($color-gray-8);
+
.platform-ios & {
padding: $button-padding-ios;
}
- &:disabled {
- background-color: $color-gray-3;
- color: $color-gray-8;
- }
-
- &:not(:disabled):active {
- background-color: $color-gray-8;
- }
-
- &.orange, &[type="submit"] {
+ &.primary, &[type="submit"] {
background-color: $color-orange;
- &:disabled {
- background-color: $color-orange-dark;
- color: $color-gray-3;
- }
-
- &:not(:disabled):active {
- background-color: $color-red;
- }
+ @include tap-highlight($color-red);
}
-
- &.light-grey {
- background-color: $color-gray-5;
- }
-
}
a.button {
diff --git a/src/templates/components/button.tpl b/src/templates/components/button.tpl
new file mode 100755
index 0000000..187a22c
--- /dev/null
+++ b/src/templates/components/button.tpl
@@ -0,0 +1,11 @@
+
diff --git a/test/spec/lib/manipulators.js b/test/spec/lib/manipulators.js
index 5dff85a..c3ce03e 100644
--- a/test/spec/lib/manipulators.js
+++ b/test/spec/lib/manipulators.js
@@ -139,10 +139,20 @@ describe('manipulators', function() {
describe('html', function() {
testSetGet('text', 'test123');
+ testSetGet('button', 'some HTML');
testShow('text');
testHide('text');
});
+ describe('button', function() {
+ testSetGet('button', 'test123');
+ testSetGet('button', 'some HTML');
+ testDisable('button');
+ testEnable('button');
+ testShow('button');
+ testHide('button');
+ });
+
describe('val', function() {
testSetGet('input', 'test321');
testDisable('input');