PatternFly Org icons

Continuation of the icons process started in PatternFly core repo & continued in PatternFly React repo.

Overview

• PatternFly Org builds out the website's icons page, displaying a subset of all icons which are recommended for use as well as a reference table of previous icons and what we currently recommend to use in their place.

Main file structure

• icons.md contains the markdown for the icons doc page, and imports the IconsTable and IconRecommendations components which live in their own files.
• IconsTable.js builds out the main icons table on the icons page.
• IconsRecommendations.js builds out the “Updated icon recommendations” table at the bottom of the icons page.

Detailed breakdown

• IconsTable.js

  Imports 3 main variables to combine to create icons table:

  • icons: All of the react icons from @patternfly/react-icons
    • Used in buildRows function to match the current icon name with the react icon to be displayed
  • iconsData: custom json file manually updated with the subset of icons we’d like to display in the table and the data to display in each column
    • What it is:
      • An array containing an object for each table row (aka each icon) displayed in the table
      • If multiple table rows are needed, such as for AngleRightIcon (multiple usages) and BellIcon (multiple related icons grouped together), an array of multiple objects is used in place of a single object
    • How it’s used:
      • Map through iconsData here and save result as iconRows.
        • If array item is just an object, build the icon row in the table.
        • If array item is an array of objects (as with AngleRightIcon and BellIcon above), loop through each object in the array and build row for each, removing the border-bottom except for the final array item so each new table row appears grouped together in the table.
      • Filter these iconRows based on search input, save as filteredRows.
      • Sort these filteredRows if user has sorted a table column.
      • Finally, flatten the filteredRows (they’ve remained unflattened until now to ensure sorting/filtering maintains groupings of subrows together) and pass to the Table rows prop
  • iconUnicodes: the JSON mappings of icon names to unicodes exported from PF-Core
    • Used in buildRows to match the current icon name from iconsData with the corresponding unicode value
      • Note: Two Font Awesome icons weren’t generating unicodes in PF core, and so have unicodes manually assigned in iconsData (one, two).
      • This is why buildRows checks that a Unicode field doesn’t exist in iconsData first before retrieving the unicode from iconUnicodes.

• IconsRecommendations.js

  • Imports icon-migrations.js which contains an array of objects representing each line in the table. Each object contains an “iconType” field indicating if it is the “new” or “old” icon for the table.
  • buildRecommendationRows filters the array of rows from icon-migrations based on the search term entered, returns a new array of objects with the old/new/iconUsage info for each table row
  • iconRows are then built from the data for each table row, and sorted if required
  • Finally, these iconRows are passed to the Table through the rows prop