Skip to content

Commit

Permalink
[ONL-7914] Adds focus state for filters (#1798)
Browse files Browse the repository at this point in the history 
* [ONL-7914] Focus state for filter popover

* Makes use of button element

* Updates snapshots

* update screenshots

* revert package.json

* 2.5.3
  • Loading branch information
Derrick Greyvensteyn authored Dec 21, 2023
1 parent 490392d commit 505baa9
Show file tree
Hide file tree
Showing 11 changed files with 253 additions and 265 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.5.2",
"version": "2.5.3",
"main": "src/main.js",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
40 changes: 20 additions & 20 deletions src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ exports[`EcCurrencyFilter > should count every selected currency and the amount
`;

exports[`EcCurrencyFilter > should count every selected currency in numberOfSelectedFilters 1`] = `
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Price"
type="button"
>
Price
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -41,22 +41,22 @@ exports[`EcCurrencyFilter > should count every selected currency in numberOfSele
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
`;

exports[`EcCurrencyFilter > should count the amount as 1 in numberOfSelectedFilters 1`] = `
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Price"
type="button"
>
Price
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -74,7 +74,7 @@ exports[`EcCurrencyFilter > should count the amount as 1 in numberOfSelectedFilt
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
`;

exports[`EcCurrencyFilter > should disable clear amount button if the amount is empty 1`] = `
Expand Down Expand Up @@ -779,18 +779,18 @@ exports[`EcCurrencyFilter > should render correctly 1`] = `
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Price"
type="button"
>
Price
</button>
</span>
<!--v-if-->
<svg
class="ec-icon ec-icon--interactive ec-filter-popover__icon"
Expand All @@ -801,7 +801,7 @@ exports[`EcCurrencyFilter > should render correctly 1`] = `
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -1422,18 +1422,18 @@ exports[`EcCurrencyFilter > should render with custom attributes 1`] = `
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Price"
type="button"
>
Price
</button>
</span>
<!--v-if-->
<svg
class="ec-icon ec-icon--interactive ec-filter-popover__icon"
Expand All @@ -1444,7 +1444,7 @@ exports[`EcCurrencyFilter > should render with custom attributes 1`] = `
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down
60 changes: 30 additions & 30 deletions src/components/ec-date-range-filter/__snapshots__/ec-date-range-filter.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ exports[`EcDateRangeFilter > should render if no dates are passed in value prop
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<!--v-if-->
<svg
class="ec-icon ec-icon--interactive ec-filter-popover__icon"
Expand All @@ -34,7 +34,7 @@ exports[`EcDateRangeFilter > should render if no dates are passed in value prop
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -136,18 +136,18 @@ exports[`EcDateRangeFilter > should render properly when all the props are given
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -165,7 +165,7 @@ exports[`EcDateRangeFilter > should render properly when all the props are given
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -268,18 +268,18 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -297,7 +297,7 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -405,18 +405,18 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -434,7 +434,7 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -544,18 +544,18 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -573,7 +573,7 @@ exports[`EcDateRangeFilter > should render properly with an error message when t
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down Expand Up @@ -684,18 +684,18 @@ exports[`EcDateRangeFilter > should render with custom attributes 1`] = `
prevent-overflow="false"
>
<div
<button
class="ec-filter-popover__trigger"
data-test="ec-filter-popover__trigger"
type="button"
>
<button
<span
class="ec-filter-popover__label"
data-test="ec-filter-popover__label"
title="Due date"
type="button"
>
Due date
</button>
</span>
<span
class="ec-badge ec-badge--info ec-filter-popover__badge"
data-test="ec-badge"
Expand All @@ -713,7 +713,7 @@ exports[`EcDateRangeFilter > should render with custom attributes 1`] = `
xlink:href="#ec-simple-chevron-down"
/>
</svg>
</div>
</button>
<div
Expand Down
Loading

0 comments on commit 505baa9

Please sign in to comment.