patternfly · mattnolting · Mar 4, 2025 · Dec 10, 2024 · Dec 13, 2024 · Jan 28, 2025
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ coverage
 .tmp
 .eslintcache
 package-lock.json
+.env
 
 # package managers
 yarn-error.log
@@ -32,3 +33,8 @@ lerna-debug.log
 # For vim
 *.swp
 .yarn
+.env
+
+packages/ext-alias/
+packages/figma-property-inspector/
+packages/react-core/plugins/
diff --git a/figma.config.json b/figma.config.json
@@ -0,0 +1,20 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "label": "PF-React",
+    "importPaths": {
+      "packages/react-core/src/*": "@patternfly/react-core"
+    },
+    "paths": {
+      "./next": ["packages/react-core/src/next"],
+      "./deprecated": ["packages/react-core/src/deprecated"]
+    },
+    "include": ["packages/react-core/src/components/**/*"],
+    "exclude": [
+      "packages/react-core/src/components/**/__tests__/*",
+      "packages/react-core/src/components/**/_tests_/*",
+      "packages/react-core/src/components/**/examples/*",
+      "packages/react-core/src/components/assets/*"
+    ]
+  }
+}
diff --git a/iconsData.json b/iconsData.json
diff --git a/packages/react-core/codeConnect/IconWrapper.figma.tsx b/packages/react-core/codeConnect/IconWrapper.figma.tsx
@@ -0,0 +1,284 @@
+import React from "react";
+import { IconWrapper } from "./IconWrapper";
+import figma from "@figma/code-connect";
+
+// Import all icons from an index file
+import * as Icons from './icons';
+
+/**
+ * -- This file connects the IconWrapper component to Figma --
+ * Uses instance swapper to allow selecting different icons
+ */
+
+figma.connect(
+  IconWrapper,
+  "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=198-1573",
+  {
+    props: {
+      icon: figma.instance("🖼️ Icon", {
+        // START_ICON_INSTANCES
+        'up-right-and-down-left-from-center-solid': <Icons.UpRightAndDownLeftFromCenterSolidIcon />,
+        'question-circle(far)': <Icons.QuestionCircle(far)Icon />,
+        'not-started': <Icons.NotStartedIcon />,
+        'angle-double-left': <Icons.AngleDoubleLeftIcon />,
+        'trend-up': <Icons.TrendUpIcon />,
+        'down-left-and-up-right-to-center-solid': <Icons.DownLeftAndUpRightToCenterSolidIcon />,
+        'stop': <Icons.StopIcon />,
+        'undo': <Icons.UndoIcon />,
+        'caret-down': <Icons.CaretDownIcon />,
+        'save': <Icons.SaveIcon />,
+        'disconnected': <Icons.DisconnectedIcon />,
+        'arrow-right': <Icons.ArrowRightIcon />,
+        'angle-right': <Icons.AngleRightIcon />,
+        'check-circle': <Icons.CheckCircleIcon />,
+        'ellipsis-v': <Icons.EllipsisVIcon />,
+        'github': <Icons.GithubIcon />,
+        'exclamation-triangle': <Icons.ExclamationTriangleIcon />,
+        'cubes': <Icons.CubesIcon />,
+        'search': <Icons.SearchIcon />,
+        'linkedin': <Icons.LinkedinIcon />,
+        'plus-circle': <Icons.PlusCircleIcon />,
+        'check-circle': <Icons.CheckCircleIcon />,
+        'wrench': <Icons.WrenchIcon />,
+        'twitter': <Icons.TwitterIcon />,
+        'bars': <Icons.BarsIcon />,
+        'balance-scale': <Icons.BalanceScaleIcon />,
+        'thumbtack': <Icons.ThumbtackIcon />,
+        'wrench': <Icons.WrenchIcon />,
+        'cloud-tenant': <Icons.CloudTenantIcon />,
+        'panel-open': <Icons.PanelOpenIcon />,
+        'dropbox': <Icons.DropboxIcon />,
+        'data-processor': <Icons.DataProcessorIcon />,
+        'resources-almost-empty': <Icons.ResourcesAlmostEmptyIcon />,
+        'drupal': <Icons.DrupalIcon />,
+        'middleware': <Icons.MiddlewareIcon />,
+        'cluster': <Icons.ClusterIcon />,
+        'th-large': <Icons.ThLargeIcon />,
+        'new-process': <Icons.NewProcessIcon />,
+        'long-arrow-alt-up': <Icons.LongArrowAltUpIcon />,
+        'pencil-alt': <Icons.PencilAltIcon />,
+        'connected': <Icons.ConnectedIcon />,
+        'openstack': <Icons.OpenstackIcon />,
+        'pause-circle': <Icons.PauseCircleIcon />,
+        'share-square': <Icons.ShareSquareIcon />,
+        'check': <Icons.CheckIcon />,
+        'database': <Icons.DatabaseIcon />,
+        'sort-amount-down-alt': <Icons.SortAmountDownAltIcon />,
+        'panel-close': <Icons.PanelCloseIcon />,
+        'satellite': <Icons.SatelliteIcon />,
+        'clipboard-check': <Icons.ClipboardCheckIcon />,
+        'severity-moderate': <Icons.SeverityModerateIcon />,
+        'folder': <Icons.FolderIcon />,
+        'sort-amount-down': <Icons.SortAmountDownIcon />,
+        'calendar': <Icons.CalendarIcon />,
+        'eye': <Icons.EyeIcon />,
+        'enhancement': <Icons.EnhancementIcon />,
+        'expand-arrows-alt': <Icons.ExpandArrowsAltIcon />,
+        'pause': <Icons.PauseIcon />,
+        'resource-pool': <Icons.ResourcePoolIcon />,
+        'cloud-security': <Icons.CloudSecurityIcon />,
+        'network-range': <Icons.NetworkRangeIcon />,
+        'resources-full': <Icons.ResourcesFullIcon />,
+        'times': <Icons.TimesIcon />,
+        'question-circle': <Icons.QuestionCircleIcon />,
+        'window-restore': <Icons.WindowRestoreIcon />,
+        'severity-minor': <Icons.SeverityMinorIcon />,
+        'task': <Icons.TaskIcon />,
+        'arrow-circle-down': <Icons.ArrowCircleDownIcon />,
+        'play': <Icons.PlayIcon />,
+        'template': <Icons.TemplateIcon />,
+        'arrow-circle-up': <Icons.ArrowCircleUpIcon />,
+        'monitoring': <Icons.MonitoringIcon />,
+        'tenant': <Icons.TenantIcon />,
+        'regions': <Icons.RegionsIcon />,
+        'ban': <Icons.BanIcon />,
+        'search-minus': <Icons.SearchMinusIcon />,
+        'unknown': <Icons.UnknownIcon />,
+        'data-source': <Icons.DataSourceIcon />,
+        'bundle': <Icons.BundleIcon />,
+        'stack-overflow': <Icons.StackOverflowIcon />,
+        'network': <Icons.NetworkIcon />,
+        'download': <Icons.DownloadIcon />,
+        'storage-domain': <Icons.StorageDomainIcon />,
+        'severity-unidentified': <Icons.SeverityUnidentifiedIcon />,
+        'severity-none': <Icons.SeverityNoneIcon />,
+        'user': <Icons.UserIcon />,
+        'map-marker': <Icons.MapMarkerIcon />,
+        'cube': <Icons.CubeIcon />,
+        'volume': <Icons.VolumeIcon />,
+        'server-group': <Icons.ServerGroupIcon />,
+        'windows': <Icons.WindowsIcon />,
+        'flavor': <Icons.FlavorIcon />,
+        'ansible': <Icons.AnsibleIcon />,
+        'times-circle': <Icons.TimesCircleIcon />,
+        'memory': <Icons.MemoryIcon />,
+        'star': <Icons.StarIcon />,
+        'copy': <Icons.CopyIcon />,
+        'arrows-alt-v': <Icons.ArrowsAltVIcon />,
+        'table': <Icons.TableIcon />,
+        'folder-open': <Icons.FolderOpenIcon />,
+        'lock': <Icons.LockIcon />,
+        'vcenter': <Icons.VcenterIcon />,
+        'flag': <Icons.FlagIcon />,
+        'list': <Icons.ListIcon />,
+        'multicluster': <Icons.MulticlusterIcon />,
+        'plus-circle': <Icons.PlusCircleIcon />,
+        'degraded': <Icons.DegradedIcon />,
+        'cubes': <Icons.CubesIcon />,
+        'pending': <Icons.PendingIcon />,
+        'service-catalog': <Icons.ServiceCatalogIcon />,
+        'treeview': <Icons.TreeviewIcon />,
+        'tag': <Icons.TagIcon />,
+        'tachometer-alt': <Icons.TachometerAltIcon />,
+        'comments': <Icons.CommentsIcon />,
+        'enterprise': <Icons.EnterpriseIcon />,
+        'resources-almost-full': <Icons.ResourcesAlmostFullIcon />,
+        'topology': <Icons.TopologyIcon />,
+        'image': <Icons.ImageIcon />,
+        'desktop': <Icons.DesktopIcon />,
+        'lock-open': <Icons.LockOpenIcon />,
+        'data-sink': <Icons.DataSinkIcon />,
+        'service': <Icons.ServiceIcon />,
+        'repository': <Icons.RepositoryIcon />,
+        'builder-image': <Icons.BuilderImageIcon />,
+        'private': <Icons.PrivateIcon />,
+        'domain': <Icons.DomainIcon />,
+        'attention-bell': <Icons.AttentionBellIcon />,
+        'in-progress': <Icons.InProgressIcon />,
+        'key': <Icons.KeyIcon />,
+        'th': <Icons.ThIcon />,
+        'services': <Icons.ServicesIcon />,
+        'running': <Icons.RunningIcon />,
+        'trend-down': <Icons.TrendDownIcon />,
+        'user': <Icons.UserIcon />,
+        'lock': <Icons.LockIcon />,
+        'route': <Icons.RouteIcon />,
+        'virtual-machine': <Icons.VirtualMachineIcon />,
+        'linux': <Icons.LinuxIcon />,
+        'registry': <Icons.RegistryIcon />,
+        'power-off': <Icons.PowerOffIcon />,
+        'bug': <Icons.BugIcon />,
+        'open-drawer-right': <Icons.OpenDrawerRightIcon />,
+        'optimize': <Icons.OptimizeIcon />,
+        'long-arrow-alt-down': <Icons.LongArrowAltDownIcon />,
+        'minus': <Icons.MinusIcon />,
+        'security': <Icons.SecurityIcon />,
+        'port': <Icons.PortIcon />,
+        'bell': <Icons.BellIcon />,
+        'eye-slash': <Icons.EyeSlashIcon />,
+        'replicator': <Icons.ReplicatorIcon />,
+        'infrastructure': <Icons.InfrastructureIcon />,
+        'hdd': <Icons.HddIcon />,
+        'check': <Icons.CheckIcon />,
+        'angle-left': <Icons.AngleLeftIcon />,
+        'angle-down': <Icons.AngleDownIcon />,
+        'compress': <Icons.CompressIcon />,
+        'integration': <Icons.IntegrationIcon />,
+        'facebook': <Icons.FacebookIcon />,
+        'asleep': <Icons.AsleepIcon />,
+        'exclamation-circle': <Icons.ExclamationCircleIcon />,
+        'trash': <Icons.TrashIcon />,
+        'expand': <Icons.ExpandIcon />,
+        'sync-alt': <Icons.SyncAltIcon />,
+        'compress-arrows-alt': <Icons.CompressArrowsAltIcon />,
+        'export': <Icons.ExportIcon />,
+        'flag': <Icons.FlagIcon />,
+        'upload': <Icons.UploadIcon />,
+        'blueprint': <Icons.BlueprintIcon />,
+        'import': <Icons.ImportIcon />,
+        'google': <Icons.GoogleIcon />,
+        'resources-empty': <Icons.ResourcesEmptyIcon />,
+        'severity-critical': <Icons.SeverityCriticalIcon />,
+        'openshift': <Icons.OpenshiftIcon />,
+        'bitbucket': <Icons.BitbucketIcon />,
+        'severity-important': <Icons.SeverityImportantIcon />,
+        'cogs': <Icons.CogsIcon />,
+        'gitlab': <Icons.GitlabIcon />,
+        'columns': <Icons.ColumnsIcon />,
+        'microchip': <Icons.MicrochipIcon />,
+        'patternfly': <Icons.PatternflyIcon />,
+        'search-plus': <Icons.SearchPlusIcon />,
+        'angle-double-right': <Icons.AngleDoubleRightIcon />,
+        'build': <Icons.BuildIcon />,
+        'check-circle-2xl': <Icons.CheckCircle2xlIcon />,
+        'js': <Icons.JsIcon />,
+        'external-link-alt': <Icons.ExternalLinkAltIcon />,
+        'plus': <Icons.PlusIcon />,
+        'migration': <Icons.MigrationIcon />,
+        'space-shuttle-2xl': <Icons.SpaceShuttle2xlIcon />,
+        'thumbs-up-regular': <Icons.ThumbsUpRegularIcon />,
+        'thumbs-down-regular': <Icons.ThumbsDownRegularIcon />,
+        'message': <Icons.MessageIcon />,
+        'thumbs-up': <Icons.ThumbsUpIcon />,
+        'microphone': <Icons.MicrophoneIcon />,
+        'volume-high': <Icons.VolumeHighIcon />,
+        'paperclip': <Icons.PaperclipIcon />,
+        'thumbs-down': <Icons.ThumbsDownIcon />,
+        'robot': <Icons.RobotIcon />,
+        'hard-drive': <Icons.HardDriveIcon />,
+        'paper-plane': <Icons.PaperPlaneIcon />,
+        'info-circle': <Icons.InfoCircleIcon />,
+        'share-square-outline': <Icons.ShareSquareOutlineIcon />,
+        'home': <Icons.HomeIcon />,
+        'code-branch': <Icons.CodeBranchIcon />,
+        'route': <Icons.RouteIcon />,
+        'fingerprint': <Icons.FingerprintIcon />,
+        'zone': <Icons.ZoneIcon />,
+        'off': <Icons.OffIcon />,
+        'exclamation-triangle': <Icons.ExclamationTriangleIcon />,
+        'exclamation-circle': <Icons.ExclamationCircleIcon />,
+        'minus-circle': <Icons.MinusCircleIcon />,
+        'arrow-right': <Icons.ArrowRightIcon />,
+        'print': <Icons.PrintIcon />,
+        'clock': <Icons.ClockIcon />,
+        'cog': <Icons.CogIcon />,
+        'grip-horizontal': <Icons.GripHorizontalIcon />,
+        'grip-vertical': <Icons.GripVerticalIcon />,
+        'angle-up': <Icons.AngleUpIcon />,
+        'filter': <Icons.FilterIcon />,
+        'catalog': <Icons.CatalogIcon />,
+        'add-circle-o': <Icons.AddCircleOIcon />,
+        'process-automation': <Icons.ProcessAutomationIcon />,
+        'automation': <Icons.AutomationIcon />,
+        'history': <Icons.HistoryIcon />,
+        'pause-circle': <Icons.PauseCircleIcon />,
+        'redo': <Icons.RedoIcon />,
+        'file': <Icons.FileIcon />,
+        'search': <Icons.SearchIcon />,
+        'code': <Icons.CodeIcon />,
+        'user': <Icons.UserIcon />,
+        'cogs': <Icons.CogsIcon />,
+        'sliders': <Icons.SlidersIcon />,
+        'bell': <Icons.BellIcon />,
+        'info-circle': <Icons.InfoCircleIcon />
+        // END_ICON_INSTANCES
+      }),
+      iconSize: figma.enum("Icon Size", {
+        "Standalone - Small": "standalone---small",
+        "Standalone - Medium": "standalone---medium",
+        "Standalone - Large": "standalone---large",
+        "Standalone - XL": "standalone---xl",
+        "Standalone -2XL": "standalone--2xl",
+        "Standalone - 3XL": "standalone---3xl",
+        "Body - Small": "body---small",
+        "Body - Default": "body---default",
+        "Body - Large": "body---large",
+        "Heading - H1": "heading---h1",
+        "Heading - H2": "heading---h2",
+        "Heading - H3": "heading---h3",
+        "Heading - H4": "heading---h4",
+        "Heading - H5": "heading---h5",
+        "Heading - H6": "heading---h6",
+        "Font size - XS": "font-size---xs",
+        "Font size - Sm": "font-size---sm",
+        "Font size - Med": "font-size---med",
+        "Font size - Lg": "font-size---lg",
+        "Font size - XL": "font-size---xl",
+        "Font size - 2XL": "font-size---2xl",
+        "Font size - 3xl": "font-size---3xl",
+        "Font size - 4xl": "font-size---4xl",
+      }),
+    },
+    example: (props) => <IconWrapper {...props} />,
+  },
+);