-
Notifications
You must be signed in to change notification settings - Fork 160
Closed
Description
The styling of the Sort and Move buttons and Filter actions in the Excel Style Filter dialog is different from the Design UI kit. Excel Style Filter dialog is missing its border. In M and S size a gap between the icon buttons at the top is missing.
Steps to reproduce:
- Open Ignite UI Angular demo repo
- Open the Grid Column Moving example (or any other with an Excel style filter option)
Result vs. Design:
Expected:
Large, Medium, Small size:
- the dialog should have 1px solid light grays.400 / dark grays.100 border
- background-fill of the dialog should be white/dark grays.50 (light/dark mode)
- elevation/shadow of the dialog should be 3/2 (light/dark mode)
- "Sort" and "Move" words should start with a capital letter
- Buttons from the Sort/Move Button groups should be in All Caps; text color should be white in dark mode
- Icon color of the buttons in sort/Move Button groups should be light grays.600 / white 80% (light/dark mode)
- Filters' labels (Pin Column, Hide Column etc.) text style should be Body 2; text color of the enabled ones should be white 90% in dark mode
- Filters' icons (Pin Column, Hide Column etc.) should be in M size 16x16px, with light grays.600 / white 60% color for the enabled ones
Medium and Small size:
- there should be a 4px gap between the icon buttons (Select Column, Pin Column, Hide Column) at the top of the dialog
Reference: Design UI kit