Skip to content

Commit

Permalink
Added the checked item count to the filter header name (#806)
Browse files Browse the repository at this point in the history 
* added the checked item count to filter header name

Need to add tests for this. Will create a ticket.

* update snapshots

* add colors to count

Revert "remove package-lock.json"

This reverts commit 23c2be6.

added color to count and box comp for styling

* remove unnecessary fontSize style

* restored package-json from use key filters commit

* Update snapshots

* resolve pr comments

* remove unecessary space and condition
  • Loading branch information
@Carla-Moz
Carla-Moz authored Dec 4, 2024
1 parent 3af866d commit b931636
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 115 deletions.
63 changes: 39 additions & 24 deletions src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,24 +260,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Platform (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Platform
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down Expand Up @@ -307,24 +312,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Status (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Status
<div
aria-label="3 items selected"
class="MuiBox-root css-18uhbjh"
>
(
3
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand All @@ -344,24 +354,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Confidence (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Confidence
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down
63 changes: 39 additions & 24 deletions src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -994,24 +994,29 @@ exports[`Results Table Should match snapshot 1`] = `
<button
aria-haspopup="true"
aria-label="Platform (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Platform
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down Expand Up @@ -1041,24 +1046,29 @@ exports[`Results Table Should match snapshot 1`] = `
<button
aria-haspopup="true"
aria-label="Status (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Status
<div
aria-label="3 items selected"
class="MuiBox-root css-18uhbjh"
>
(
3
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand All @@ -1078,24 +1088,29 @@ exports[`Results Table Should match snapshot 1`] = `
<button
aria-haspopup="true"
aria-label="Confidence (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Confidence
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down
63 changes: 39 additions & 24 deletions src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -923,24 +923,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Platform (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Platform
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down Expand Up @@ -970,24 +975,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Status (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Status
<div
aria-label="3 items selected"
class="MuiBox-root css-18uhbjh"
>
(
3
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand All @@ -1007,24 +1017,29 @@ exports[`Results View The table should match snapshot and other elements should
<button
aria-haspopup="true"
aria-label="Confidence (Click to filter values)"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Confidence
<div
aria-label="4 items selected"
class="MuiBox-root css-18uhbjh"
>
(
4
)
</div>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
data-testid="FilterListIcon"
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
data-testid="KeyboardArrowDownIcon"
focusable="false"
role="img"
viewBox="0 0 24 24"
>
<path
d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
/>
<title>
No active filters
</title>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
Expand Down
Loading

0 comments on commit b931636

Please sign in to comment.