Skip to content

[Excel Style Filter] Some styling discrepancies #16677

@yradoeva

Description

@yradoeva

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:

  1. Open Ignite UI Angular demo repo
  2. Open the Grid Column Moving example (or any other with an Excel style filter option)

Result vs. Design:

Image Image Image

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

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions