diff --git a/.pullapprove.yml b/.pullapprove.yml index f9ebf5c..10795ad 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -1 +1 @@ -extends: default +extends: base diff --git a/README.md b/README.md index 97937e1..8fbb7ff 100644 --- a/README.md +++ b/README.md @@ -32,15 +32,16 @@ ember install ember-frost-button | `text` | `string` | `` | text do display on the button | | `subtext` | `string` | `` | subtext do display on the button underneath main `text` | | `size` | `string` | `small` | The smallest button you ever did see | -| | | `medium` | **default**: Not quite as small as `small`, but not very big either | +| | | `medium` | Not quite as small as `small`, but not very big either | | | | `large` | Now *that's* what I call a button! | | | | `extra-large` | My grandma, what a big button you have!
Recommended when `icon`, `text`, and `subtext` are used together | | `priority` | `string` | `primary` | Call-to-action :telephone: | -| | | `secondary` | **default**: Run of the mill, garden variety | +| | | `secondary` | Run of the mill, garden variety | | | | `tertiary` | Low-key, subdued | | | | `confirm` | An alias for `primary` | | | | `normal` | An alias for `secondary` | | | | `cancel` | An alias for `tertiary` | +| `design`| `string` | `tab` | Custom styling for applications that use buttons but don't follow the button styling. Requires `text` or `icon` to be specified. Should not be used with `priority` and `size`. | ## Examples @@ -89,6 +90,13 @@ ember install ember-frost-button }} ``` +### Design +```handlebars +{{frost-button + design='tab' + text='Tab' +}} + ## Development ### Setup diff --git a/addon/components/frost-button.js b/addon/components/frost-button.js index 06f47a3..196c8f7 100644 --- a/addon/components/frost-button.js +++ b/addon/components/frost-button.js @@ -55,6 +55,28 @@ function addSizeClass (size, classes) { } } +/** + * Add the appropriate class for the button design to the Array of classes + * Button design is restricted for use with specific applications. + * For example, frost-tabs uses button for tabs, but styling for + * tabs is quite different then for a button. By providing 'design' + * property, we can style the button appropriately and still re-use + * other functionality. + * + * @param {String} design - button design + * @param {String[]} classes - the classes to add the size class to + */ +function addDesignClass (design, classes) { + switch (design) { + case 'tab': + classes.push('tab') + break + default: + // no class to add for this invalid size + break + } +} + export default Ember.Component.extend({ tagName: 'button', classNames: [ @@ -92,7 +114,7 @@ export default Ember.Component.extend({ * 'cancel' => 'tertiary' * @type {String} */ - priority: 'confirm', + priority: '', /** * How big do you want your button? @@ -100,7 +122,15 @@ export default Ember.Component.extend({ * ['small', 'medium', 'large', 'extra-large'] * @type {String} */ - size: 'medium', + size: '', + + /** + * Specifies design of the button. + * Currently available options are: + * ['tab'] + * @type {String} + */ + design: '', /** * The text to display within this button @@ -156,11 +186,26 @@ export default Ember.Component.extend({ extraClasses: Ember.computed('priority', 'vertical', function () { const classes = [] - addSizeClass(this.get('size'), classes) - addPriorityClass(this.get('priority'), classes) - - if (this.get('vertical')) { - classes.push('vertical') + addDesignClass(this.get('design'), classes) + + // only add size and priority if design has not been specified + if (classes.length === 0) { + addSizeClass(this.get('size'), classes) + addPriorityClass(this.get('priority'), classes) + if (this.get('vertical')) { + classes.push('vertical') + } + } else { + // design button needs to have either text or icon property present + if ((this.get('text') === '') && (this.get('icon') === '')) { + Ember.Logger.error('Error: The `design` property requires `text` or `icon` property to be specified.') + return + } + + // display warning when design property is used together with size and/or priority + if ((this.get('priority') !== '') || (this.get('size') !== '')) { + Ember.Logger.warn('Warning: The `design` property takes precedence over `size` and `priority`.') + } } return classes.join(' ') diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 2357dad..f257b2a 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -144,6 +144,24 @@ $frost-color-button-primary-active: $frost-color-blue-4; // TODO move to ember-f } } + // Design - 'tab' + &.tab { + height: 35px; + padding: 0 15px; + box-shadow: none; + cursor: default; + + .text { + font-family: $frost-font-family; + font-size: $frost-font-m; + color: $frost-color-grey-5; + } + + &:hover { + background-color: $frost-color-button-tertiary-hover-bg; + } + } + // Content - text &.text { // Deprecated format diff --git a/tests/dummy/app/pods/demo/template.hbs b/tests/dummy/app/pods/demo/template.hbs index 23b7151..a922dfd 100644 --- a/tests/dummy/app/pods/demo/template.hbs +++ b/tests/dummy/app/pods/demo/template.hbs @@ -299,6 +299,33 @@ }} + +
+
Design - tab
+
+ {{format-markdown "```handlebars +{{frost-button + autofocus=true + on-click=(action 'click') + design='tab' + text='Design Tab' + vertical=vertical +}} +```" + }} +
+
+ {{frost-button + autofocus=true + on-click=(action 'click') + design='tab' + text='Design Tab' + vertical=vertical + }} +
+
+ +