Skip to content

Commit

Permalink
[CHUX-462] ec-dropdown - expand ui to accomodate new design (#1954)
Browse files Browse the repository at this point in the history 
* CHUX-462-ec-dropdown - expand ui to accomodate new design

* added story and test

* added test

* feedback

* tests

* updated design

* fix: cursor pointer

* updated snapshots

* fix test

* fix: tooltip

* fix: unit test

* feedback

* added test

* moved input tolltip condition

* replace tooltiptext with showTootlip

* upddated snapshots

* applied design changes requests

* updated snapshots
  • Loading branch information
@corinaper
corinaper authored May 21, 2024
1 parent c6c3391 commit 0b9880b
Show file tree
Hide file tree
Showing 28 changed files with 583 additions and 297 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.8.4",
"version": "2.8.5",
"main": "src/main.ts",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
37 changes: 20 additions & 17 deletions src/components/ec-amount-filter-input/__snapshots__/ec-amount-filter-input.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ exports[`EcAmountFilterInput > :props > should render with a note when the "note
exports[`EcAmountFilterInput > :props > should render with a placeholder when "amountPlaceholder" is set 1`] = `
<input
autocomplete="off"
class="ec-input-field__input ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-3"
placeholder="Random test placeholder"
type="text"
Expand All @@ -101,6 +101,7 @@ exports[`EcAmountFilterInput > :props > should render with a sensitive class whe
<div
class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
data-test="ec-dropdown ec-dropdown-search"
is-in-light-mode="false"
>
<ec-stub
autosize="min"
Expand All @@ -121,8 +122,8 @@ exports[`EcAmountFilterInput > :props > should render with a sensitive class whe
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--is-in-group-right ec-input-field__input--has-icon my-sensitive-content-test-class"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-right ec-input-field__input--has-icon my-sensitive-content-test-class ec-input-field__input--cursor-pointer"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-amount-filter-input-1"
placeholder=""
readonly=""
Expand All @@ -141,7 +142,7 @@ exports[`EcAmountFilterInput > :props > should render with a sensitive class whe
width="24"
>
<use
xlink:href="#ec-simple-arrow-drop-down"
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
Expand Down Expand Up @@ -200,8 +201,8 @@ exports[`EcAmountFilterInput > :props > should render with a sensitive class whe
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input ec-input-field__input--is-in-group-left my-sensitive-content-test-class"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-left my-sensitive-content-test-class"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-3"
type="text"
/>
Expand Down Expand Up @@ -249,6 +250,7 @@ exports[`EcAmountFilterInput > attrs > should render with custom attributes 1`]
<div
class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
data-test="ec-dropdown ec-dropdown-search"
is-in-light-mode="false"
>
<ec-stub
autosize="min"
Expand All @@ -269,8 +271,8 @@ exports[`EcAmountFilterInput > attrs > should render with custom attributes 1`]
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--is-in-group-right ec-input-field__input--has-icon"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-right ec-input-field__input--has-icon ec-input-field__input--cursor-pointer"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-amount-filter-input-1"
placeholder=""
readonly=""
Expand All @@ -289,7 +291,7 @@ exports[`EcAmountFilterInput > attrs > should render with custom attributes 1`]
width="24"
>
<use
xlink:href="#ec-simple-arrow-drop-down"
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
Expand Down Expand Up @@ -348,8 +350,8 @@ exports[`EcAmountFilterInput > attrs > should render with custom attributes 1`]
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-3"
type="text"
/>
Expand All @@ -374,6 +376,7 @@ exports[`EcAmountFilterInput > should render properly 1`] = `
<div
class="ec-amount-filter-input__comparison-symbol-selector ec-dropdown ec-dropdown-search"
data-test="ec-dropdown ec-dropdown-search"
is-in-light-mode="false"
>
<ec-stub
autosize="min"
Expand All @@ -394,8 +397,8 @@ exports[`EcAmountFilterInput > should render properly 1`] = `
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--is-in-group-right ec-input-field__input--has-icon"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-right ec-input-field__input--has-icon ec-input-field__input--cursor-pointer"
data-test="ec-amount-filter-input__comparison-symbol-selector ec-dropdown__input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-amount-filter-input-1"
placeholder=""
readonly=""
Expand All @@ -414,7 +417,7 @@ exports[`EcAmountFilterInput > should render properly 1`] = `
width="24"
>
<use
xlink:href="#ec-simple-arrow-drop-down"
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
Expand Down Expand Up @@ -473,8 +476,8 @@ exports[`EcAmountFilterInput > should render properly 1`] = `
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 ec-input-field__input--is-in-group-left"
data-test="ec-amount-filter-input__amount ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-3"
type="text"
/>
Expand Down
12 changes: 6 additions & 6 deletions src/components/ec-amount-input/__snapshots__/ec-amount-input.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ exports[`EcAmountInput > should render properly 1`] = `
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input"
data-test="ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8"
data-test="ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-1"
type="text"
/>
Expand All @@ -27,8 +27,8 @@ exports[`EcAmountInput > should render with a sensitive class when isSensitive p
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input my-sensitive-content-test-class"
data-test="ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8 my-sensitive-content-test-class"
data-test="ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="ec-input-field-1"
type="text"
/>
Expand All @@ -46,8 +46,8 @@ exports[`EcAmountInput > should render with custom attributes 1`] = `
<!--v-if-->
<input
autocomplete="off"
class="ec-input-field__input"
data-test="my-data-test ec-amount-input ec-input-field__input"
class="ec-input-field__input ec-input-field__input--bg-gray-8"
data-test="my-data-test ec-amount-input ec-input-field__input ec-mock ec-tooltip-mock"
id="test-id"
type="text"
/>
Expand Down
Loading

0 comments on commit 0b9880b

Please sign in to comment.