Uploaded image for project: 'Cost Management'
  1. Cost Management
  2. COST-5611

Replace legacy filter pattern with PatternFly's Search

XMLWordPrintable

    • Icon: Story Story
    • Resolution: Done
    • Icon: Normal Normal
    • 2024-Oct-25
    • None
    • UI

      During a design review of Cost Management with PatternFly v6 rc1, it was noted that our legacy filter inputs don't look correct. Rounded corners appear between the filter input and search icon, along with extra spacing.

      PatternFly v6

      The UI currently implements an older pattern which groups PatternFly TextInput and Button components together. When there is no type-ahead support, this pattern is used as a filter input with a search icon on the right. In preparation for the PatternFly v6 release, this legacy pattern should be replaced with PatternFly's Search component.

      Legacy filter

      PatternFly Search

      Note that this does not effect type-ahead filters, since the search icon already appears on the left. Only filter inputs which, don't support type-ahead, shall be updated.

        1. TextInput.png
          TextInput.png
          286 kB
        2. Search.png
          Search.png
          301 kB
        3. pf-v6.png
          pf-v6.png
          254 kB

              dlabrecq@redhat.com Daniel Labrecque
              dlabrecq@redhat.com Daniel Labrecque
              Daniel Chorvatovic Daniel Chorvatovic
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

                Created:
                Updated:
                Resolved: