209 modify filter card css when expanded

[chlebowa]

Closes #209

Added boxshadow property to and brightened background color in expanded filter card. Selector uses the aria-expanded property rather than class names because it works in all BS versions and initiates transition immediately on click rather than after the card has been expanded.

[github-actions[bot]]

Code Coverage Summary

Filename                        Stmts    Miss  Cover    Missing
----------------------------  -------  ------  -------  ------------------------------------------------------------------------------------------------------------------------------------------------------
R/calls_combine_by.R                7       0  100.00%
R/choices_labeled.R                49      14  71.43%   25, 36, 41, 51-56, 68, 72-76
R/count_labels.R                   97       0  100.00%
R/filter_panel_api.R               29       1  96.55%   132
R/FilteredData-utils.R             68      25  63.24%   21-24, 27-30, 52-57, 153, 175-184
R/FilteredData.R                  562     227  59.61%   110, 184, 326, 398, 501-510, 533, 554-595, 613-616, 632, 673-706, 721-723, 727-733, 762-790, 813-815, 819-821, 824-838, 842-852, 855-898, 939, 962-984
R/FilteredDataset-utils.R          23       1  95.65%   125
R/FilteredDataset.R               170      61  64.12%   52, 152, 191, 216-273, 312-314
R/FilteredDatasetDataframe.R      121       8  93.39%   87, 148, 158, 234-238
R/FilteredDatasetDefault.R         18       4  77.78%   103-116
R/FilteredDatasetMAE.R            134      37  72.39%   56, 117-122, 161-166, 170-171, 189-211
R/FilterPanelAPI.R                 10       0  100.00%
R/FilterState-utils.R             101       2  98.02%   264, 294
R/FilterState.R                   361      61  83.10%   89, 212, 230-234, 241-242, 256-257, 263-264, 311, 313, 315, 367, 411, 639, 682-705, 715-734, 769-775, 784-790
R/FilterStateChoices.R            341     108  68.33%   310-313, 325, 367, 389-396, 400-417, 445, 458-469, 481-489, 493-522, 543-546, 549-552, 563-586, 597, 602, 613
R/FilterStateDate.R               212     129  39.15%   227, 279-436
R/FilterStateDatettime.R          309     199  35.60%   266, 318-549
R/FilterStateEmpty.R               53      31  41.51%   89, 99-104, 117, 129-169
R/FilterStateExpr.R                75      62  17.33%   149-272
R/FilterStateLogical.R            196     144  26.53%   136, 158, 218, 222-406
R/FilterStateRange.R              408     105  74.26%   262, 384, 510-514, 517-527, 530, 542-548, 559-571, 575-585, 589-591, 605-632, 647, 650, 664-681, 716-721, 731-733
R/FilterStates-utils.R             70       9  87.14%   108, 127, 188-194, 216, 245
R/FilterStates.R                  364      30  91.76%   78-82, 191, 314-323, 411-414, 457, 542-546, 591, 712-715
R/FilterStatesDF.R                  5       0  100.00%
R/FilterStatesMAE.R                10       1  90.00%   40
R/FilterStatesMatrix.R              3       0  100.00%
R/FilterStatesSE.R                211     157  25.59%   36, 71-73, 83-85, 109-116, 124-131, 154-302
R/include_css_js.R                  5       5  0.00%    12-16
R/teal_slice.R                    107       4  96.26%   134, 188-189, 200
R/teal_slices.R                    84       5  94.05%   144-149
R/test_utils.R                     21       0  100.00%
R/utils.R                          18       0  100.00%
R/variable_types.R                 15       8  46.67%   44-51
R/zzz.R                            16      16  0.00%    3-46
TOTAL                            4273    1454  65.97%

Diff against main

Filename      Stmts    Miss  Cover
----------  -------  ------  --------
TOTAL             0       0  +100.00%

Results for commit: c7416af90c28f11f09461f88ea3ab348e0229f82

Minimum allowed coverage is 80%

:recycle: This comment has been updated with latest results

[github-actions[bot]]

Unit Tests Summary

  1 files   29 suites   22s :stopwatch: 359 tests 359 :white_check_mark: 0 :zzz: 0 :x: 824 runs  824 :white_check_mark: 0 :zzz: 0 :x:

Results for commit c7416af9.

:recycle: This comment has been updated with latest results.

[donyunardi]

Looking good. I like transition setup that you did. The white background on the filter card also makes it popup. However, not a big fan with boxshadow, but this is personal preference so let's hear another opinion.

Just as an alternative, I removed the boxshadow and preserve the hover color on filter-header when a filter card is selected.

https://github.com/insightsengineering/teal.slice/assets/8597300/5e9503a1-dd50-46a3-bc70-3ed8bc60eb89

WDYT?

[chlebowa]

Your cards have no hover behavior.

[lcd2yyz]

I don't know if there are (better) styling options than boxshadow, but at least I find it helpful to draw one's eyes to the card in its entirety, including the label/value along with the selection UIs, making the visualization "wholesome".

With respect to @donyunardi 's preserved color-change in the card title - I kind of expected the color change to follow my hover, so it did feel a bit weird seeing two card titles highlighted (one expanded and one collapsed) at the same time. But also a personally preference.

So without other options to compare it to, I would say I like the new styling @chlebowa added a bit more.

[donyunardi]

Another idea, how about changing the header color when the filter card is selected and persist it until the card is collapsed?

https://github.com/insightsengineering/teal.slice/assets/8597300/066c4c07-5ede-4737-9c29-375c0af8dd87

[chlebowa]

@donyunardi so you want to replace boxshadow on the filter card with background-color on the header, correct?

Note that two cards may be unfolded at the same time if they correspond to different datasets. With no hover style there is no distinction between them.