Skip to content

chore(React19): Allow support for React 19 #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thatblindgeye merged 2 commits into from
May 19, 2025
Merged

chore(React19): Allow support for React 19 #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62d8591
chore(React19): Allow support for React 19
rebeccaalpert May 5, 2025
794acce
Apply Katie's feedback from other PR
rebeccaalpert May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
"react-hooks/exhaustive-deps": "warn",
"react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }],
"spaced-comment": "error",
"use-isnan": "error"
"use-isnan": "error",
"react/react-in-jsx-scope": "off"
}
}
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ coverage
.tmp
.eslintcache
.cache_*
generated

# package managers
yarn-error.log
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-flow": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "14.4.3",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/dom": "9.0.0",
"@testing-library/dom": "^10.4.0",
Copy link
Member Author

@rebeccaalpert rebeccaalpert May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These support 19

"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "14.6.1",
"jest-environment-jsdom": "^29.2.2",
"jest-transform-stub": "^2.0.0",
"serve": "^14.1.2"
Expand Down
6 changes: 3 additions & 3 deletions packages/module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@
"@patternfly/react-styles": "^6.1.0"
},
"peerDependencies": {
"react": "^17 || ^18",
"react-dom": "^17 || ^18"
"react": "^17 || ^18 || ^19",
"react-dom": "^17 || ^18 || ^19"
},
"devDependencies": {
"@patternfly/patternfly": "^6.1.0",
"@patternfly/documentation-framework": "6.5.14",
"@patternfly/documentation-framework": "6.8.2",
"@patternfly/react-table": "^6.1.0",
"@patternfly/react-code-editor": "^6.1.0",
"@octokit/rest": "^18.0.0",
Expand Down
42 changes: 20 additions & 22 deletions packages/module/patternfly-docs/content/examples/CatalogTile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ import './catalogTile.css';
Note: Catalog tile lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)!

## Examples

### Basic featured tile

```js
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo6 from './pfLogo6.svg';
Expand All @@ -43,12 +44,12 @@ import '../../../../dist/css/react-catalog-view-extension.css';
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
/>;
```

### Basic with footer

```js
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
Expand All @@ -72,15 +73,15 @@ import pfLogo6 from './pfLogo6.svg';
}
footer={
<span>
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Enabled
<OutlinedCheckCircleIcon style={{ color: 'var(--pf-v6-global--success-color--100)' }} /> Enabled
</span>
}
/>
/>;
```

### Link variant

```js
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo6 from './pfLogo6.svg';
Expand All @@ -102,12 +103,12 @@ import pfLogo6 from './pfLogo6.svg';
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
/>;
```

### With multiple icon badges

```js
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
Expand All @@ -122,7 +123,7 @@ import pfLogo6 from './pfLogo6.svg';
<CogIcon />
</CatalogTileBadge>,
<CatalogTileBadge title="USDA Approved">
<OutlinedCheckCircleIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} />
<OutlinedCheckCircleIcon style={{ color: 'var(--pf-v6-global--success-color--100)' }} />
</CatalogTileBadge>
]}
title="Patternfly-React"
Expand All @@ -132,35 +133,33 @@ import pfLogo6 from './pfLogo6.svg';
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
/>;
```

### With text badge

```js
import React from 'react';
import { CatalogTile } from '@patternfly/react-catalog-view-extension';
import pfLogo6 from './pfLogo6.svg';

<CatalogTile
id="text-badge"
iconImg={pfLogo6}
iconAlt="PatternFly logo"
badges={[
'Community'
]}
badges={['Community']}
title="Patternfly-React"
vendor="provided by Red Hat"
description={
'This is a very, very long description that should be truncated after three lines. ' +
'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +
'This has changed from PatternFly 3.'
}
/>
/>;
```

### With children instead of description

```js
import React from 'react';
import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import pfLogo6 from './pfLogo6.svg';
Expand All @@ -178,10 +177,9 @@ import pfLogo6 from './pfLogo6.svg';
title="Patternfly-React"
vendor="provided by Red Hat"
>
This is a very, very long stetch of child text that should be not be truncated
and illustrates how Flyers can add longer content to PatternFly 4 catalog tiles
using the children prop. Cards usually truncate descriptions at three lines.
Cards with a footer are truncated after one line. This has changed from PatternFly 3.
Children can be of any length.
</CatalogTile>
This is a very, very long stetch of child text that should be not be truncated and illustrates how Flyers can add
longer content to PatternFly 4 catalog tiles using the children prop. Cards usually truncate descriptions at three
lines. Cards with a footer are truncated after one line. This has changed from PatternFly 3. Children can be of any
length.
</CatalogTile>;
```
Loading