-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
Added borderless attr for power select #479
Changes from 1 commit
13fc5ce
65b7af8
f8e5281
040d949
8bcd3e6
afee941
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -40,6 +40,16 @@ export default { | |
}, | ||
control: { type: 'boolean' } | ||
}, | ||
borderless: { | ||
description: 'Display border of the component', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. "Hide the border around the dropdown component" |
||
table: { | ||
type: { | ||
summary: 'boolean' | ||
}, | ||
defaultValue: { summary: 'false' } | ||
}, | ||
control: { type: 'boolean' } | ||
}, | ||
loadingMore: { | ||
description: 'Display loading more state in the list of items', | ||
table: { | ||
|
@@ -123,6 +133,7 @@ const defaultArgs = { | |
selectedItems: FAKE_SELECTED_ITEMS, | ||
loading: false, | ||
loadingMore: false, | ||
borderless: false, | ||
placeholder: 'My placeholder', | ||
searchPlaceholder: 'My search placeholder', | ||
addressableAs: undefined, | ||
|
@@ -135,7 +146,8 @@ const Template = (args) => ({ | |
template: hbs` | ||
<div style="display: flex; justify-content: center; background-color: white; border-radius: 4px"> | ||
<OSS::PowerSelect class='padding-sm' @selectedItems={{this.selectedItems}} @items={{this.items}} | ||
@onSearch={{this.onSearch}} @onChange={{this.onChange}} @loading={{this.loading}} | ||
@onSearch={{this.onSearch}} @onChange={{this.onChange}} @loading={{this.loading}} | ||
@borderless={{this.borderless}} | ||
@loadingMore={{this.loadingMore}} @placeholder={{this.placeholder}} @searchPlaceholder={{this.searchPlaceholder}} | ||
@onBottomReached={{this.onBottomReached}} @addressableAs={{this.addressableAs}}> | ||
<:selected-item as |selectedItem|> | ||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -16,6 +16,12 @@ | |||||
} | ||||||
} | ||||||
|
||||||
&.borderless { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
.array-input-container { | ||||||
border: none; | ||||||
} | ||||||
} | ||||||
|
||||||
.upf-power-infinite-select-container { | ||||||
position: relative; | ||||||
height: 100%; | ||||||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -39,6 +39,25 @@ module('Integration | Component | o-s-s/power-select', function (hooks) { | |||||
assert.dom('.upf-power-select').hasAttribute('open'); | ||||||
}); | ||||||
|
||||||
test('it renders without a border when @borderless is true', async function (assert) { | ||||||
await render(hbs` | ||||||
<OSS::PowerSelect @selectedItems={{this.selectedItems}} @items={{this.items}} | ||||||
@onSearch={{this.onSearch}} @borderless={{true}}> | ||||||
<:selected-item as |selectedItem|> | ||||||
{{selectedItem}} | ||||||
</:selected-item> | ||||||
<:option-item as |item|> | ||||||
{{item}} | ||||||
</:option-item> | ||||||
<:empty-state> | ||||||
<div class="foobar">custom empty state</div> | ||||||
</:empty-state> | ||||||
</OSS::PowerSelect> | ||||||
`); | ||||||
|
||||||
assert.dom('.upf-power-select').hasClass('borderless'); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
}); | ||||||
|
||||||
test('custom empty state is properly rendered', async function (assert) { | ||||||
await render(hbs` | ||||||
<OSS::PowerSelect @selectedItems={{this.selectedItems}} @items={{this.items}} | ||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To better respect the BEM, maybe more
upf-power-select--borderless