diff --git a/addon/components/o-s-s/country-selector.hbs b/addon/components/o-s-s/country-selector.hbs
index 43756bfef..34878e639 100644
--- a/addon/components/o-s-s/country-selector.hbs
+++ b/addon/components/o-s-s/country-selector.hbs
@@ -30,23 +30,18 @@
@onSelect={{this.onItemSelected}}
@searchPlaceholder={{t "oss-components.country-selector.search"}}
@onClose={{this.closeDropdown}}
- @enableKeyboard={{true}}
id={{this.portalId}}
class={{concat "margin-top-px-0 country-selector-container__dropdown " this.dropdownAddressableClass}}
{{on-click-outside this.onClickOutside}}
{{on "click" this.noop}}
>
<:option as |item|>
-
- {{#if item.id}}
-
- {{/if}}
-
{{item.name}}
- {{#if (eq this.selectedCountry item)}}
-
-
- {{/if}}
-
-
-
{{country.name}}
-
(+{{get
- country.countryCallingCodes
- 0
- }})
- {{#if (eq this.selectedCountry country)}}
-
- {{/if}}
-
- {{currency.symbol}}
- {{currency.code}}
- {{#if (eq this.selectedCurrency currency)}}
-
- {{/if}}
-
+
+ <:prefix>
+
+ {{currency.symbol}}
+
+
+
{{/in-element}}
diff --git a/addon/components/o-s-s/smart/immersive/currency-input.ts b/addon/components/o-s-s/smart/immersive/currency-input.ts
index 025557efe..723208a9d 100644
--- a/addon/components/o-s-s/smart/immersive/currency-input.ts
+++ b/addon/components/o-s-s/smart/immersive/currency-input.ts
@@ -72,7 +72,9 @@ export default class OSSSmartImmersiveCurrencyInput extends OSSCurrencyInput void;
diff --git a/addon/components/o-s-s/smart/immersive/select.hbs b/addon/components/o-s-s/smart/immersive/select.hbs
index 8eaf4082e..93ce56d73 100644
--- a/addon/components/o-s-s/smart/immersive/select.hbs
+++ b/addon/components/o-s-s/smart/immersive/select.hbs
@@ -41,7 +41,6 @@
@loading={{@loading}}
@loadingMore={{@loadingMore}}
@onBottomReached={{@onBottomReached}}
- @enableKeyboard={{true}}
@searchEnabled={{@searchEnabled}}
class={{concat "margin-top-px-0 upf-power-select__dropdown " this.dropdownAddressableClass}}
id={{this.portalId}}
diff --git a/app/styles/atoms/smart/immersive-currency-input.less b/app/styles/atoms/smart/immersive-currency-input.less
index f5c3ef610..cd567e35c 100644
--- a/app/styles/atoms/smart/immersive-currency-input.less
+++ b/app/styles/atoms/smart/immersive-currency-input.less
@@ -22,7 +22,6 @@
background-color: var(--color-white);
&:not(.disabled, :disabled) {
-
&:hover,
&:focus-within {
border: 1px dashed var(--color-gray-500);
@@ -81,15 +80,17 @@
.rainbow-text-animated {
.font-weight-semibold;
- background: linear-gradient(130deg,
- var(--color-gray-400) 18%,
- var(--color-gray-300) 25%,
- rgba(250, 198, 255, 1) 56%,
- var(--color-primary-100) 62%,
- var(--color-white) 66%,
- rgba(250, 198, 255, 0.58) 68%,
- var(--color-gray-300) 73%,
- var(--color-gray-400) 85%);
+ background: linear-gradient(
+ 130deg,
+ var(--color-gray-400) 18%,
+ var(--color-gray-300) 25%,
+ rgba(250, 198, 255, 1) 56%,
+ var(--color-primary-100) 62%,
+ var(--color-white) 66%,
+ rgba(250, 198, 255, 0.58) 68%,
+ var(--color-gray-300) 73%,
+ var(--color-gray-400) 85%
+ );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -100,6 +101,17 @@
}
}
+ &__dropdown {
+ .upf-infinite-select__item {
+ padding: 0;
+
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
+ }
+ }
+
&--filled {
.smart-immersive-currency-input {
border-color: var(--color-primary-400);
@@ -115,7 +127,6 @@
}
&:not(.disabled, :disabled) {
-
&:focus-within,
&:active {
border-color: var(--color-primary-400);
@@ -138,7 +149,6 @@
.border-color-error;
&:not(.disabled, :disabled) {
-
&:focus-within,
&:hover {
.border-color-error;
@@ -156,4 +166,4 @@
100% {
background-position: 0 0%;
}
-}
\ No newline at end of file
+}
diff --git a/app/styles/base/_floating-menu.less b/app/styles/base/_floating-menu.less
index df9e2dc42..bfbbe2822 100644
--- a/app/styles/base/_floating-menu.less
+++ b/app/styles/base/_floating-menu.less
@@ -18,9 +18,10 @@
}
.upf-floating-menu {
- background-color: #ffffff;
- border-radius: var(--border-radius-sm);
- box-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.2);
+ background-color: var(--color-white);
+ border: 1px solid var(--color-border-default);
+ border-radius: var(--border-radius-md);
+ box-shadow: var(--box-shadow-md);
display: flex;
flex-direction: column;
@@ -28,7 +29,7 @@
overflow: hidden auto;
max-height: var(--floating-max-height, 250px);
max-width: 350px;
- padding: var(--spacing-px-6);
+ padding: var(--spacing-px-9) var(--spacing-px-6);
margin-top: var(--spacing-px-12);
position: absolute;
z-index: 1100;
diff --git a/app/styles/base/_infinite-select.less b/app/styles/base/_infinite-select.less
index 62104850a..dc847ce7a 100644
--- a/app/styles/base/_infinite-select.less
+++ b/app/styles/base/_infinite-select.less
@@ -3,6 +3,10 @@
width: 100%;
overscroll-behavior: contain;
+ .upf-infinite-select--search {
+ margin: var(--spacing-px-3) var(--spacing-px-6) 0 var(--spacing-px-6);
+ }
+
ul {
padding: 0;
}
@@ -26,6 +30,7 @@
.upf-infinite-select__container {
position: relative;
+ overflow: auto;
}
.upf-infinite-select__items-container {
@@ -66,7 +71,7 @@
padding: var(--spacing-px-6);
gap: var(--spacing-px-6);
- &.upf-power-select__dropdown {
+ &.upf-power-select__dropdown {
overflow: auto;
}
diff --git a/app/styles/country-selector.less b/app/styles/country-selector.less
index a978f756e..c8c358b83 100644
--- a/app/styles/country-selector.less
+++ b/app/styles/country-selector.less
@@ -22,28 +22,15 @@
}
}
- .row-selected span {
- .text-color-default;
- }
-
- .upf-infinite-select {
- max-width: 100%;
-
- padding: var(--spacing-px-12);
- margin-top: var(--spacing-px-6);
+ &__dropdown {
.upf-infinite-select__item {
- &:focus {
- background-color: var(--color-gray-100);
- }
+ padding: 0;
- &:focus-visible {
- outline: none;
+ &:hover,
+ &:focus {
+ background-color: transparent;
}
}
-
- .row-selected span {
- color: var(--color-gray-900);
- }
}
&--success {
diff --git a/app/styles/molecules/infinite-select-option.less b/app/styles/molecules/infinite-select-option.less
index 5ff2a5d40..c0935d937 100644
--- a/app/styles/molecules/infinite-select-option.less
+++ b/app/styles/molecules/infinite-select-option.less
@@ -25,7 +25,6 @@
&__title {
.text-ellipsis;
- flex: 1;
}
&__prefix-icon {
@@ -67,7 +66,8 @@
&--selected {
background-color: var(--color-primary-50);
- .oss-infinite-select-option__title {
+ .oss-infinite-select-option__title,
+ .oss-infinite-select-option__prefix-icon {
color: var(--color-primary-500);
}
}
diff --git a/app/styles/phone-number-input.less b/app/styles/phone-number-input.less
index 3f8290504..5420412a7 100644
--- a/app/styles/phone-number-input.less
+++ b/app/styles/phone-number-input.less
@@ -1,17 +1,14 @@
.phone-number-container {
position: relative;
- .upf-infinite-select {
- max-width: 100%;
- padding: var(--spacing-px-12);
- margin-top: var(--spacing-px-6);
-
+ &__dropdown {
.upf-infinite-select__item {
- padding: var(--spacing-px-6);
- }
+ padding: 0;
- .row-selected span {
- color: var(--color-gray-900);
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ }
}
}
diff --git a/tests/integration/components/o-s-s/country-selector-test.ts b/tests/integration/components/o-s-s/country-selector-test.ts
index 82c9bf4cd..82310fdda 100644
--- a/tests/integration/components/o-s-s/country-selector-test.ts
+++ b/tests/integration/components/o-s-s/country-selector-test.ts
@@ -115,6 +115,37 @@ module('Integration | Component | o-s-s/country-selector', function (hooks) {
await click('[data-control-name="country-selector-input"]');
assert.dom('.upf-infinite-select__item' + ' .fflag.fflag-US').exists();
});
+
+ module('Selected item highlighting', () => {
+ test('The selected country has the selected class', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('[data-control-name="country-selector-input"]');
+
+ assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+ assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('France');
+ });
+
+ test('The selected country has a check icon', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('[data-control-name="country-selector-input"]');
+
+ assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+ });
+
+ test('The selected province has the selected class', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('[data-control-name="country-selector-input"]');
+
+ assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+ assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('Alabama');
+ });
+ });
});
test('If @sourceList contains ids, then the country placeholder is displayed', async function (assert) {
diff --git a/tests/integration/components/o-s-s/infinite-select-test.js b/tests/integration/components/o-s-s/infinite-select-test.js
index 1dd910487..568cb0a8b 100644
--- a/tests/integration/components/o-s-s/infinite-select-test.js
+++ b/tests/integration/components/o-s-s/infinite-select-test.js
@@ -283,9 +283,14 @@ module('Integration | Component | o-s-s/infinite-select', function (hooks) {
});
module('If keyboard is disabled', function () {
+ hooks.beforeEach(function () {
+ this.enableKeyboard = false;
+ });
+
test('The first element should not be focused on load', async function (assert) {
await render(
- hbs``
+ hbs``
);
assert.notOk(_isFocused(document.querySelectorAll('.upf-infinite-select__item')[0]));
@@ -293,7 +298,8 @@ module('Integration | Component | o-s-s/infinite-select', function (hooks) {
test('The keyboard controls are disabled', async function (assert) {
await render(
- hbs``
+ hbs``
);
assert.notOk(_isFocused(document.querySelectorAll('.upf-infinite-select__item')[0]));
diff --git a/tests/integration/components/o-s-s/phone-number-input-test.ts b/tests/integration/components/o-s-s/phone-number-input-test.ts
index b91b92a36..a41c46636 100644
--- a/tests/integration/components/o-s-s/phone-number-input-test.ts
+++ b/tests/integration/components/o-s-s/phone-number-input-test.ts
@@ -78,6 +78,23 @@ module('Integration | Component | o-s-s/phone-number-input', function (hooks) {
assert.equal(clickableRows.length, 2);
assert.dom(clickableRows[0]).hasText('France (+33)');
});
+
+ module('Selected country highlighting', () => {
+ test('The selected country has the selected class', async function (assert) {
+ await render(hbs``);
+ await click('.country-selector');
+
+ assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+ assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('France');
+ });
+
+ test('The selected country has a check icon', async function (assert) {
+ await render(hbs``);
+ await click('.country-selector');
+
+ assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+ });
+ });
});
module('Phone Number Input', (hooks) => {
diff --git a/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
index c573fb0f0..c2af8e9ec 100644
--- a/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
+++ b/tests/integration/components/o-s-s/smart/immersive/currency-input-test.ts
@@ -101,6 +101,39 @@ module('Integration | Component | o-s-s/smart/immersive/currency-input', functio
const clickableRows = findAll('.upf-infinite-select__item');
assert.equal(clickableRows.length, 2);
});
+
+ module('Selected currency highlighting', () => {
+ test('The selected currency has the selected class', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('.currency-selector');
+
+ assert.dom('.oss-infinite-select-option--selected').exists({ count: 1 });
+ assert.dom('.oss-infinite-select-option--selected .oss-infinite-select-option__title').hasText('EUR');
+ });
+
+ test('The selected currency has a check icon', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('.currency-selector');
+
+ assert.dom('.oss-infinite-select-option--selected .fa-check').exists({ count: 1 });
+ });
+
+ test('Only the selected currency symbol is highlighted with primary color', async function (assert) {
+ await render(
+ hbs``
+ );
+ await click('.currency-selector');
+
+ assert.dom('.oss-infinite-select-option--selected .font-color-primary-500').hasText('€');
+ assert
+ .dom('.oss-infinite-select-option:not(.oss-infinite-select-option--selected) .font-color-primary-500')
+ .doesNotExist();
+ });
+ });
});
module('Currency Input', () => {