feat(icon-generator): rebase

mattnolting · mattnolting · commit 34a9654d9b2d · 2025-03-18T22:48:15.000-04:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -159,7 +159,7 @@ Please ensure that all React UI components contributed meet the following guidel
 ### Code consistency
 
 - All files and folders under your package's `src/components` should name with PascalCase except `index.js` files
-- If you need a constant file, it should be called `{Component_Name}constants.js` (Component_Name with PascalCase)
+- If you need a constant file, it should be called `{Component_Name}Constants.js` (Component_Name with PascalCase)
 - Each component should treat as a standalone package and live under its own folder. If you think your component can be made completely independent from other components, create it as a new package. This reduces the dependency tree and improves performance downstream. It also makes exported bundles lighter.
 - Single file per component with **default export**
 - Avoid using the bindMethods syntax for attaching methods to a class. Instead use class properties for example `testMethod = () => { return 'test'}`
@@ -329,5 +329,4 @@ The process for revoking someone's maintainer status is a discussion limited to
 
 [1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct/
 [2]: mailto:patternfly@redhat.com
-[3]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type
-
+[3]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type
diff --git a/packages/react-core/src/components/Icon/Icon.tsx b/packages/react-core/src/components/Icon/Icon.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 import { css } from '@patternfly/react-styles';
 import { Spinner } from '../Spinner';
diff --git a/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx b/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { kebabCase } from 'case-anything';
 import { Icon, IconSize } from '../Icon';
diff --git a/packages/react-core/src/components/Icon/examples/BodyIconSizes.tsx b/packages/react-core/src/components/Icon/examples/BodyIconSizes.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const BodyIconSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Icon size="bodySm">
       <PlusCircleIcon />
     </Icon>{' '}
@@ -13,5 +13,5 @@ export const BodyIconSizes: React.FunctionComponent = () => (
     <Icon size="bodyLg">
       <PlusCircleIcon />
     </Icon>
-  </React.Fragment>
+  </Fragment>
 );
diff --git a/packages/react-core/src/components/Icon/examples/HeadingIconSizes.tsx b/packages/react-core/src/components/Icon/examples/HeadingIconSizes.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const HeadingIconSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Icon size="headingSm">
       <PlusCircleIcon />
     </Icon>{' '}
@@ -22,5 +22,5 @@ export const HeadingIconSizes: React.FunctionComponent = () => (
     <Icon size="heading_3xl">
       <PlusCircleIcon />
     </Icon>
-  </React.Fragment>
+  </Fragment>
 );
diff --git a/packages/react-core/src/components/Icon/examples/Icon.md b/packages/react-core/src/components/Icon/examples/Icon.md
@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-icon
 propComponents: ['Icon']
 ---
 
+import { Fragment, useState } from 'react';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -74,9 +75,3 @@ Passing the `isInProgress` property will swap the icon to a progress icon. By de
 
 ```ts file="IconCustomProgress.tsx"
 ```
-
-### Custom in progress icon
-
-```
-{console.log('here')}
-```
diff --git a/packages/react-core/src/components/Icon/examples/IconBasic.tsx b/packages/react-core/src/components/Icon/examples/IconBasic.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 export const IconBasic: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Icon>
       <LongArrowAltDownIcon />
     </Icon>{' '}
@@ -19,5 +19,5 @@ export const IconBasic: React.FunctionComponent = () => (
     <Icon>
       <CogIcon />
     </Icon>
-  </React.Fragment>
+  </Fragment>
 );
diff --git a/packages/react-core/src/components/Icon/examples/IconContentSizes.tsx b/packages/react-core/src/components/Icon/examples/IconContentSizes.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const IconContentSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
     </Icon>{' '}
@@ -16,5 +16,5 @@ export const IconContentSizes: React.FunctionComponent = () => (
     <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>
-  </React.Fragment>
+  </Fragment>
 );
diff --git a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
-    <React.Fragment>
+    <Fragment>
       <div style={{ marginBottom: '12px' }}>
         <Checkbox
           label="Toggle in progress state"
@@ -19,6 +19,6 @@ export const IconProgress: React.FunctionComponent = () => {
       <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
         <CheckCircleIcon />
       </Icon>
-    </React.Fragment>
+    </Fragment>
   );
 };
diff --git a/packages/react-core/src/components/Icon/examples/IconInline.tsx b/packages/react-core/src/components/Icon/examples/IconInline.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Icon, Content } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const IconInline: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Content>
       <h1>
         Heading
@@ -56,5 +56,5 @@ export const IconInline: React.FunctionComponent = () => (
       </Icon>
       extra large
     </Content>
-  </React.Fragment>
+  </Fragment>
 );
diff --git a/packages/react-core/src/components/Icon/examples/IconProgress.tsx b/packages/react-core/src/components/Icon/examples/IconProgress.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Icon, Checkbox } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
-  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  const [isInProgress, setIsInProgress] = useState<boolean>(false);
   return (
-    <React.Fragment>
+    <Fragment>
       <div style={{ marginBottom: '12px' }}>
         <Checkbox
           label="Toggle in progress state"
@@ -19,6 +19,6 @@ export const IconProgress: React.FunctionComponent = () => {
       <Icon isInProgress={isInProgress}>
         <CheckCircleIcon />
       </Icon>
-    </React.Fragment>
+    </Fragment>
   );
 };
diff --git a/packages/react-core/src/helpers/constants.ts b/packages/react-core/src/helpers/constants.ts
@@ -10,9 +10,13 @@ import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global
 import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_xl';
 import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_height_2xl';
 
-export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-export const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };
+export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
 
 export enum ValidatedOptions {
   success = 'success',
@@ -47,3 +51,11 @@ export const globalHeightBreakpoints = {
   xl: parseInt(globalHeightBreakpointXl.value) * 16,
   '2xl': parseInt(globalHeightBreakpoint2xl.value) * 16
 };
+
+export const statusIcons = {
+  success: CheckCircleIcon,
+  danger: ExclamationCircleIcon,
+  warning: ExclamationTriangleIcon,
+  info: InfoCircleIcon,
+  custom: BellIcon
+};

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as React from 'react';`
`2`	`1`	`import styles from '@patternfly/react-styles/css/components/Icon/icon';`
`3`	`2`	`import { css } from '@patternfly/react-styles';`
`4`	`3`	`import { Spinner } from '../Spinner';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as React from 'react';`
`2`	`1`	`import { render, screen } from '@testing-library/react';`
`3`	`2`	`import { kebabCase } from 'case-anything';`
`4`	`3`	`import { Icon, IconSize } from '../Icon';`