Fixed primefaces#16576 - Column Filter missing primary color #16588
Conversation
+ CX Function add support for flatting functions for styleClass (Similar to ngStyle doing it) + Added new theming for p-column filter active button color + Added p-datatable-column-filter-button-active class again
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 2 Skipped Deployments
|
EnricoMessall
changed the title
+ Undo changes to cx function + Used custom styleClass transformer on styleClass inputs instead to provide safe translation always
|
This PR #16588 doesn't fix Issue #16576. I download the PR branch and tested the fix. The video and annotated screenshot listed below shows that this PR doesn't fix Issue #16576: "When a table column is filtered using the p-columnFilter component there is no indication of filtering in the corresponding table column header". stillNotFixed.mov
|
|
@rosenthalj You sure? In v18 the primary indicator is no longer blue, its a darker gray/black then normal stuff which can be configured with tokens. For me it looks like your icons are changed to a darker cooler what is the wanted behaviour. I've used the token "{primary.active.color}" which was blue in v17. |
# Conflicts: # src/app/components/avatar/avatar.ts # src/app/components/avatargroup/avatargroup.ts # src/app/components/blockui/blockui.ts # src/app/components/card/card.ts # src/app/components/checkbox/checkbox.ts # src/app/components/chip/chip.ts # src/app/components/confirmdialog/confirmdialog.ts # src/app/components/dataview/dataview.ts # src/app/components/divider/divider.ts # src/app/components/dock/dock.ts # src/app/components/drawer/drawer.ts # src/app/components/fileupload/fileupload.ts # src/app/components/inplace/inplace.ts # src/app/components/inputgroup/inputgroup.ts # src/app/components/inputgroupaddon/inputgroupaddon.ts # src/app/components/inputicon/inputicon.ts # src/app/components/inputmask/inputmask.ts # src/app/components/inputswitch/inputswitch.ts # src/app/components/knob/knob.ts # src/app/components/listbox/listbox.ts # src/app/components/megamenu/megamenu.ts # src/app/components/message/message.ts # src/app/components/messages/messages.ts # src/app/components/organizationchart/organizationchart.ts # src/app/components/overlaypanel/overlaypanel.ts # src/app/components/paginator/paginator.ts # src/app/components/popover/popover.ts # src/app/components/progressbar/progressbar.ts # src/app/components/progressspinner/progressspinner.ts # src/app/components/radiobutton/radiobutton.ts # src/app/components/scrollpanel/scrollpanel.ts # src/app/components/selectbutton/selectbutton.ts # src/app/components/skeleton/skeleton.ts # src/app/components/slider/slider.ts # src/app/components/splitbutton/splitbutton.ts # src/app/components/splitter/splitter.ts # src/app/components/steps/steps.ts # src/app/components/table/table.ts # src/app/components/terminal/terminal.ts # src/app/components/timeline/timeline.ts # src/app/components/toast/toast.ts # src/app/components/togglebutton/togglebutton.ts # src/app/components/toggleswitch/toggleswitch.ts # src/app/components/virtualscroller/virtualscroller.ts
|
I have downloaded your PR branch with the most recent updates and there is no change, Issue #16576. I could create a video again, but it would be exactly the same as the video that I provided in my previous comment to to this PR. Have you tested your changes with the PrimeNG table filter-advanced demo? You can follow the steps in the original Issue #16576:
|
|
@rosenthalj Look at the video i send, i couldnt upload it here because its too big for github. Its also showing this MR, you can see how the active button is applied to the filter but the color is new in PrimeNG v18 and is also black but with another level of darkness. You can also see that i change the overall primary color token and then also the selected filter color changes to the adjusted primary color. |
@EnricoMessall can you try saving your video at a lower resolution or provide screenshots? I can not verify the results of your PR. Somehow/Somewhere something is obviously wrong or inconsistent? |
@EnricoMessall another idea is to split your video into two videos and upload them separately |
|
@rosenthalj Look into the primeng discord. I've messaged you there with the video. |
|
Your video on PrimeNG Discord is nice and I now understand what you are trying to convey. I confirmed that after your changes, the p-datatable-column-filter-button-active class is now being added to the filter button. This is similar to v17. PrimeNG v17 uses the p-column-filter-menu-button-active class for the filter button. It appears that PrimeNG v18 is changing a lot of CSS class names. Unfortunately, even with your changes, the PrimeNG Table Filter Advance Demo is still not working properly. As a result, any software upgraded from 17.x to 18.x will still not have any visual indication when the table has been filtered unless the developer realizes its now their responsibility to fix table filter visual indicators. Note on your video: You were eventually able to change the filter button color by using the browser's "inspection" functionality. In v17 both the filter button color and the filter button background colors are changed to indicate a column has been filtered. |
|
I believe the current proposed changes for this PR enables hooks that enables developers to implement their own custom CSS as a workaround to fix Issue #16576. The PR is not ideal but is better than the current implemented code. |
|
Hi @EnricoMessall, Thanks a lot for your contribution, but this PR has conflicts. Could you please update your PR? Then, I'll review it asap. Thanks again! |
mertsincan
added
the
Resolution: Needs Revision
# Conflicts: # packages/primeng/src/accordion/accordion.ts # packages/primeng/src/autocomplete/autocomplete.ts # packages/primeng/src/avatar/avatar.ts # packages/primeng/src/avatargroup/avatargroup.ts # packages/primeng/src/blockui/blockui.ts # packages/primeng/src/breadcrumb/breadcrumb.ts # packages/primeng/src/button/button.ts # packages/primeng/src/calendar/calendar.ts # packages/primeng/src/carousel/carousel.ts # packages/primeng/src/checkbox/checkbox.ts # packages/primeng/src/confirmdialog/confirmdialog.ts # packages/primeng/src/confirmpopup/confirmpopup.ts # packages/primeng/src/contextmenu/contextmenu.ts # packages/primeng/src/dataview/dataview.ts # packages/primeng/src/datepicker/datepicker.ts # packages/primeng/src/dialog/dialog.ts # packages/primeng/src/divider/divider.ts # packages/primeng/src/dock/dock.ts # packages/primeng/src/drawer/drawer.ts # packages/primeng/src/dropdown/dropdown.ts # packages/primeng/src/editor/editor.ts # packages/primeng/src/fileupload/fileupload.ts # packages/primeng/src/image/image.ts # packages/primeng/src/inplace/inplace.ts # packages/primeng/src/inputgroup/inputgroup.ts # packages/primeng/src/inputicon/inputicon.ts # packages/primeng/src/inputmask/inputmask.ts # packages/primeng/src/inputotp/inputotp.ts # packages/primeng/src/inputswitch/inputswitch.ts # packages/primeng/src/knob/knob.ts # packages/primeng/src/listbox/listbox.ts # packages/primeng/src/megamenu/megamenu.ts # packages/primeng/src/menu/menu.ts # packages/primeng/src/menubar/menubar.ts # packages/primeng/src/message/message.ts # packages/primeng/src/messages/messages.ts # packages/primeng/src/multiselect/multiselect.ts # packages/primeng/src/orderlist/orderlist.ts # packages/primeng/src/organizationchart/organizationchart.ts # packages/primeng/src/overlaybadge/overlaybadge.ts # packages/primeng/src/overlaypanel/overlaypanel.ts # packages/primeng/src/paginator/paginator.ts # packages/primeng/src/panel/panel.ts # packages/primeng/src/panelmenu/panelmenu.ts # packages/primeng/src/picklist/picklist.ts # packages/primeng/src/popover/popover.ts # packages/primeng/src/progressbar/progressbar.ts # packages/primeng/src/progressspinner/progressspinner.ts # packages/primeng/src/radiobutton/radiobutton.ts # packages/primeng/src/scrollpanel/scrollpanel.ts # packages/primeng/src/select/select.ts # packages/primeng/src/selectbutton/selectbutton.ts # packages/primeng/src/skeleton/skeleton.ts # packages/primeng/src/slider/slider.ts # packages/primeng/src/splitbutton/splitbutton.ts # packages/primeng/src/splitter/splitter.ts # packages/primeng/src/steps/steps.ts # packages/primeng/src/table/table.ts # packages/primeng/src/tabmenu/tabmenu.ts # packages/primeng/src/tabview/tabview.ts # packages/primeng/src/terminal/terminal.ts # packages/primeng/src/tieredmenu/tieredmenu.ts # packages/primeng/src/timeline/timeline.ts # packages/primeng/src/toast/toast.ts # packages/primeng/src/togglebutton/togglebutton.ts # packages/primeng/src/toggleswitch/toggleswitch.ts # packages/primeng/src/tree/tree.ts # packages/primeng/src/treetable/treetable.ts # packages/themes/src/presets/aura/datatable/index.ts # packages/themes/src/presets/lara/datatable/index.ts # packages/themes/src/presets/nora/datatable/index.ts
|
Hi @mertsincan i've fixed Merge Conflicts. I would please you to not take that long with merging it due to the size of changes, i acutally dont want to resolve all conflicts in every file a fourth time :D |
fix: #16576
The cx function adjustment is important so parts using [styleClass] can work with cx having a function as return value. With that the cx functions flattens the function result as the ngStyle does and directly provides styleClass with the required string. Making styleClass do that directly would require a rework of all styleClass components so that was the best option from my point of view.