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

Refactor Button and ButtonGroup to Glimmer components #1022

Merged
merged 7 commits into from
Sep 6, 2020
Merged

Refactor Button and ButtonGroup to Glimmer components #1022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
662b94b
Refactor Button to Glimmer component
simonihmig Mar 28, 2020
c8f8957
Refactor ButtonGroup to Glimmer component
simonihmig Aug 19, 2020
d209e28
Refactor Dropdown/Button to Glimmer component
simonihmig Aug 19, 2020
98c9447
Add back deprecations/warnings for removed arguments and subclassing
simonihmig Aug 20, 2020
84e8173
Use macro-decorators in favor of Ember CPs
simonihmig Aug 20, 2020
bdb31c1
Fix Glimmer Buttons after rebase, address PR feedback
simonihmig Sep 5, 2020
b33faef
Fix yielded submitButton after Glimmer refactoring
simonihmig Sep 5, 2020
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
3 changes: 1 addition & 2 deletions addon/components/bs-button-group.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<div class="{{if this.vertical "btn-group-vertical" "btn-group"}} {{this.sizeClass}} {{if this.justified (if (macroCondition (macroGetOwnConfig "isBS3")) "btn-group-justified")}}" ...attributes>
<div class="{{if @vertical "btn-group-vertical" "btn-group"}} {{bs-size-class "btn-group" @size}} {{if @justified (if (macroCondition (macroGetOwnConfig "isBS3")) "btn-group-justified")}}" role="group" ...attributes>
{{yield
(hash
button=(component this.buttonComponent buttonGroupType=@type groupValue=@value onClick=this.buttonPressed)
)
}}

</div>
54 changes: 18 additions & 36 deletions addon/components/bs-button-group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { action } from '@ember/object';
import { tagName } from '@ember-decorators/component';
import { equal } from '@ember/object/computed';
import Component from '@ember/component';
import Component from '@glimmer/component';
import { A, isArray } from '@ember/array';
import sizeClass from 'ember-bootstrap/utils/cp/size-class';
import defaultValue from 'ember-bootstrap/utils/default-decorator';
import arg from 'ember-bootstrap/utils/decorators/arg';
import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';

/**
Expand Down Expand Up @@ -62,20 +59,17 @@ import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';

@class ButtonGroup
@namespace Components
@extends Ember.Component
@extends Glimmer.Component
@public
*/
@tagName('')
@deprecateSubclassing
export default class ButtonGroup extends Component {
ariaRole = 'group';

/**
* @property buttonComponent
* @type {String}
* @private
*/
@defaultValue
@arg
buttonComponent = 'bs-button-group/button';

/**
Expand All @@ -86,8 +80,6 @@ export default class ButtonGroup extends Component {
* @default false
* @public
*/
@defaultValue
vertical = false;

/**
* Set to true for the buttons to stretch at equal sizes to span the entire width of its parent. (BS3 only!)
Expand All @@ -107,8 +99,6 @@ export default class ButtonGroup extends Component {
* @default false
* @public
*/
@defaultValue
justified = false;

/**
* The type of the button group specifies how child buttons behave and how the `value` property will be computed:
Expand Down Expand Up @@ -145,14 +135,6 @@ export default class ButtonGroup extends Component {
* @public
*/

/**
* @property isRadio
* @type boolean
* @private
*/
@(equal('type', 'radio').readOnly())
isRadio;

/**
* Property for size styling, set to 'lg', 'sm' or 'xs'
*
Expand All @@ -162,11 +144,6 @@ export default class ButtonGroup extends Component {
* @type String
* @public
*/
@defaultValue
size = null;

@sizeClass('btn-group', 'size')
sizeClass;

/**
* This action is called whenever the button group's value should be changed because the user clicked a button.
Expand All @@ -177,27 +154,32 @@ export default class ButtonGroup extends Component {
* @param {*} value
* @public
*/
onChange() {}

@action
buttonPressed(pressedValue) {
if (!this.args.onChange) {
return;
}
let newValue;

if (this.isRadio) {
if (this.args.type === 'radio') {
newValue = pressedValue;
} else {
if (!isArray(this.value)) {
newValue = A([pressedValue]);
if (!isArray(this.args.value)) {
newValue = [pressedValue];
simonihmig marked this conversation as resolved.
Show resolved Hide resolved
} else {
newValue = A(this.value.slice());
if (newValue.includes(pressedValue)) {
newValue.removeObject(pressedValue);
if (this.args.value.includes(pressedValue)) {
newValue = this.args.value.filter((v) => v !== pressedValue);
} else {
newValue.pushObject(pressedValue);
newValue = [...this.args.value, pressedValue];
}
}

// For compatibility we continue to return an EmberArray instance for now
// @todo this should be changed for the next major release!
newValue = A(newValue);
}

this.onChange(newValue);
this.args.onChange(newValue);
}
}
17 changes: 17 additions & 0 deletions addon/components/bs-button-group/button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<button
disabled={{this.__disabled}}
type={{this.buttonType}}
class="btn {{if this.active "active"}} {{if this.block "btn-block"}} {{bs-size-class "btn" @size}} {{bs-type-class "btn" @type default=(if (macroCondition (macroGetOwnConfig "isBS3")) "default" "secondary") outline=@outline}}"
...attributes
{{on "click" this.handleClick}}
{{did-update this.resetState @reset}}
>
{{#if this.icon}}<i class={{this.icon}}></i> {{/if}}{{this.text}}{{yield
(hash
isFulfilled=this.isFulfilled
isPending=this.isPending
isRejected=this.isRejected
isSettled=this.isSettled
)
}}
</button>
11 changes: 2 additions & 9 deletions addon/components/bs-button-group/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { computed } from '@ember/object';
import { isArray } from '@ember/array';
import Button from 'ember-bootstrap/components/bs-button';
import defaultValue from 'ember-bootstrap/utils/default-decorator';

/**
Internal component for button-group buttons
Expand All @@ -18,27 +16,22 @@ export default class ButtonGroupButton extends Button {
* @property groupValue
* @private
*/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation for the removed private properties could be removed as well. Or did I missed something? It's the same for buttenGroupType as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those arguments are still passed, from the ButtonGroup component that yields the button. They are just not used on the component class, but as named arguments in the template. I thought we can still leave the doc blocks to document what arguments the component expects.

@defaultValue
groupValue = null;

/**
* @property buttonGroupType
* @type string
* @private
*/
@defaultValue
buttonGroupType = false;

/**
* @property active
* @type boolean
* @readonly
* @private
*/
@(computed('buttonGroupType', 'groupValue.[]', 'value').readOnly())
get active() {
let { value, groupValue } = this;
if (this.buttonGroupType === 'radio') {
let { value, groupValue } = this.args;
if (this.args.buttonGroupType === 'radio') {
return value === groupValue;
} else {
if (isArray(groupValue)) {
Expand Down
4 changes: 2 additions & 2 deletions addon/components/bs-button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<button
disabled={{this.__disabled}}
type={{this.buttonType}}
jelhan marked this conversation as resolved.
Show resolved Hide resolved
class="btn {{if this.active "active"}} {{if this.block "btn-block"}} {{this.sizeClass}} {{this.typeClass}}"
class="btn {{if @active "active"}} {{if this.block "btn-block"}} {{bs-size-class "btn" @size}} {{bs-type-class "btn" @type default=(if (macroCondition (macroGetOwnConfig "isBS3")) "default" "secondary") outline=@outline}}"
...attributes
{{on "click" this.handleClick}}
{{did-update this.resetState @reset}}
>
{{#if this.icon}}<i class={{this.icon}}></i> {{/if}}{{this.text}}{{yield
(hash
Expand All @@ -13,5 +14,4 @@
isSettled=this.isSettled
)
}}

</button>
Loading