From d1851993c6f7a0f4afbecd4601b59b0c1389745f Mon Sep 17 00:00:00 2001 From: Jessie Date: Wed, 3 May 2023 15:03:51 -0400 Subject: [PATCH 1/8] Remove references to pf3 --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b2206ba..e64c13a 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ # React catalog view -This package contains catalog components based on the ones in PF3's patternfly-react-extensions package. +This package contains components based on Patternfly from https://github.com/patternfly/patternfly-react -This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea. - -Development for this extension was previously being done under the [patternfly-react repo](https://github.com/patternfly/patternfly-react/tree/caf893d71966a0eabcde909a29d9a872367d9897/packages/react-catalog-view-extension). +Development for this extension was previously being done under the patternfly-react repo. ### Installing From e060bf2bd76066a84070e79e2a5f6f431218e5dc Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 13 Jun 2023 16:11:36 -0400 Subject: [PATCH 2/8] chore(deps): Bump PatternFly deps --- .gitignore | 1 + packages/module/package.json | 12 +- .../content/examples/CatalogTile.md | 4 +- .../content/examples/FilterSidePanel.md | 2 +- .../content/examples/PropertiesSidePanel.md | 2 +- .../content/examples/catalogTile.css | 2 +- .../content/examples/filterSidePanel.css | 4 +- .../catalog-tile/catalog-view-tile/react.js | 4 +- .../catalog-tile/catalog-view/react.js | 4 +- .../catalog-view-filter-side-panel/react.js | 2 +- .../react.js | 2 +- .../extensions/catalog-view-tile/react.js | 4 +- .../catalog-view/catalog-item-header/react.js | 4 + .../catalog-view/catalog-tile/react.js | 12 +- .../catalog-view/filter-side-panel/react.js | 6 +- .../properties-side-panel/react.js | 6 +- .../catalog-view/vertical-tabs/react.js | 4 + packages/module/release.config.js | 13 +- .../_catalog-item.scss | 2 +- .../_catalog-tile.scss | 6 +- .../_filter-side-panel.scss | 2 +- .../_variables.scss | 4 +- .../components/CatalogTile/CatalogTile.tsx | 19 ++- .../CatalogTile/CatalogTileBadge.tsx | 2 +- yarn.lock | 136 +++++++++--------- 25 files changed, 147 insertions(+), 112 deletions(-) diff --git a/.gitignore b/.gitignore index e61a201..ff76253 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ coverage .cache .tmp .eslintcache +.cache_* # package managers yarn-error.log diff --git a/packages/module/package.json b/packages/module/package.json index 1514f17..3119f89 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -40,18 +40,18 @@ "patternfly" ], "dependencies": { - "@patternfly/react-core": "^5.0.0-alpha.72", - "@patternfly/react-styles": "^5.0.0-alpha.7" + "@patternfly/react-core": "5.0.0-prerelease.7", + "@patternfly/react-styles": "5.0.0-prerelease.2" }, "peerDependencies": { "react": "^16.8 || ^17 || ^18", "react-dom": "^16.8 || ^17 || ^18" }, "devDependencies": { - "@patternfly/patternfly": "^5.0.0-alpha.43", - "@patternfly/documentation-framework": "^2.0.0-alpha.29", - "@patternfly/react-table": "^5.0.0-alpha.80", - "@patternfly/react-code-editor": "^5.0.0-alpha.79", + "@patternfly/patternfly": "5.0.0-prerelease.6", + "@patternfly/documentation-framework": "2.0.0-alpha.57", + "@patternfly/react-table": "5.0.0-prerelease.7", + "@patternfly/react-code-editor": "5.0.0-prerelease.7", "rimraf": "^2.6.2", "sass": "^1.42.1", "shx": "^0.3.2", diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md index 39c2be8..53906fd 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogTile.md +++ b/packages/module/patternfly-docs/content/examples/CatalogTile.md @@ -72,7 +72,7 @@ import pfLogo2 from './pfLogo2.svg'; } footer={ - Enabled + Enabled } /> @@ -122,7 +122,7 @@ import pfLogo2 from './pfLogo2.svg'; , - + ]} title="Patternfly-React" diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md index 85388c0..05897ab 100644 --- a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md @@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component { return ( - {`${count} stars`} + {`${count} stars`} {stars} ); diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md index 6e50369..5f5ebb7 100644 --- a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md +++ b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md @@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon'; label="Certified Level" value={ - Certified + Certified } /> diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css index 63e5cd9..1e420b5 100644 --- a/packages/module/patternfly-docs/content/examples/catalogTile.css +++ b/packages/module/patternfly-docs/content/examples/catalogTile.css @@ -24,7 +24,7 @@ color: #004080; text-decoration: underline; } -.ws-react-e-catalog-tile .pf-c-card__actions { +.ws-react-e-catalog-tile .pf-v5-c-card__actions { padding-left: 5px; } .ws-react-e-catalog-tile .catalog-tile-pf-icon { diff --git a/packages/module/patternfly-docs/content/examples/filterSidePanel.css b/packages/module/patternfly-docs/content/examples/filterSidePanel.css index cd5da78..7c27d51 100644 --- a/packages/module/patternfly-docs/content/examples/filterSidePanel.css +++ b/packages/module/patternfly-docs/content/examples/filterSidePanel.css @@ -23,7 +23,7 @@ margin-bottom: 0; } -.filter-panel-pf-category-items .pf-c-button.pf-m-link { +.filter-panel-pf-category-items .pf-v5-c-button.pf-m-link { padding: 0; } @@ -37,7 +37,7 @@ margin-top: 0; } -.filter-panel-pf-category-item .pf-c-check__input { +.filter-panel-pf-category-item .pf-v5-c-check__input { margin-left: 0px; } diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js index 59c4351..55a8d86 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js @@ -135,7 +135,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -143,7 +143,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js index ae170a0..33a42e5 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js @@ -135,7 +135,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -143,7 +143,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js index b6ba808..43f276e 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-filter-side-panel/react.js @@ -165,7 +165,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Basic': props => - {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> + {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js index 9c27f2b..d5bac8c 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-properties-side-panel/react.js @@ -72,7 +72,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Properties side panel with property items': props => - (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> + (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js index ba5703a..113b28f 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view-tile/react.js @@ -134,7 +134,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -142,7 +142,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js index 886951c..04eaf9a 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-item-header/react.js @@ -7,6 +7,10 @@ const pageData = { "id": "Catalog item header", "section": "extensions", "subsection": "Catalog view", + "deprecated": false, + "beta": false, + "demo": false, + "newImplementationLink": false, "source": "react", "tabName": null, "slug": "/extensions/catalog-view/catalog-item-header/react", diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js index b6fee63..3fca6b6 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js @@ -9,6 +9,10 @@ const pageData = { "id": "Catalog tile", "section": "extensions", "subsection": "Catalog view", + "deprecated": false, + "beta": false, + "demo": false, + "newImplementationLink": false, "source": "react", "tabName": null, "slug": "/extensions/catalog-view/catalog-tile/react", @@ -89,11 +93,11 @@ const pageData = { "name": "id", "type": "any", "description": "Id", - "defaultValue": "null" + "defaultValue": "getUniqueId('pf-catalog-tile-')" }, { "name": "onClick", - "type": "(event: React.SyntheticEvent) => void", + "type": "(event: React.FormEvent | React.MouseEvent) => void", "description": "Callback for a click on the tile", "defaultValue": "null" }, @@ -137,7 +141,7 @@ pageData.examples = { , 'Basic with footer': props => - (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> + (\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after one line. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n footer={\n \n Enabled\n \n }\n />\n)","title":"Basic with footer","lang":"js"}}> , 'Link variant': props => @@ -145,7 +149,7 @@ pageData.examples = { , 'With multiple icon badges': props => - (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> + (\n \n \n ,\n \n \n \n ]}\n title=\"Patternfly-React\"\n vendor=\"provided by Red Hat\"\n description={\n 'This is a very, very long description that should be truncated after three lines. ' +\n '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. ' +\n 'This has changed from PatternFly 3.'\n }\n />\n)","title":"With multiple icon badges","lang":"js"}}> , 'With text badge': props => diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js index 4ed7185..7859b3c 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/filter-side-panel/react.js @@ -13,6 +13,10 @@ const pageData = { "id": "Filter side panel", "section": "extensions", "subsection": "Catalog view", + "deprecated": false, + "beta": false, + "demo": false, + "newImplementationLink": false, "source": "react", "tabName": null, "slug": "/extensions/catalog-view/filter-side-panel/react", @@ -167,7 +171,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Basic': props => - {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> + {\n const showAllCategories = { ...this.state.showAllCategories };\n showAllCategories[id] = !showAllCategories[id];\n this.setState({ showAllCategories });\n };\n \n this.onFilterChange = (id, value) => {\n const activeFilters = { ...this.state.activeFilters };\n activeFilters[id] = value;\n this.setState({ activeFilters });\n };\n \n this.getStars = count => {\n const stars = [];\n \n for (let i = 0; i < count; i++) {\n stars.push();\n }\n \n return (\n \n {`${count} stars`}\n {stars}\n \n );\n };\n }\n \n render() {\n const { activeFilters, showAllCategories } = this.state;\n const maxShowCount = 5;\n const leeway = 2;\n return (\n
\n \n \n \n \n this.onShowAllToggle('type')}\n >\n this.onFilterChange('typeSUV', e.target.checked)}\n >\n SUV\n \n this.onFilterChange('typeSedan', e.target.checked)}\n >\n Sedan\n \n this.onFilterChange('typePickup', e.target.checked)}\n >\n Pickup Truck\n \n this.onFilterChange('typeSports', e.target.checked)}\n >\n Sports Car\n \n \n this.onShowAllToggle('manufacturer')}\n >\n this.onFilterChange('makeChevy', e.target.checked)}\n >\n Chevrolet\n \n this.onFilterChange('makeFord', e.target.checked)}\n >\n Ford\n \n this.onFilterChange('makeDodge', e.target.checked)}\n >\n Dodge\n \n this.onFilterChange('makeVolkswagen', e.target.checked)}\n >\n Volkswagen\n \n this.onFilterChange('makeHyundai', e.target.checked)}\n >\n Hyundai\n \n this.onFilterChange('makeHonda', e.target.checked)}\n >\n Honda\n \n this.onFilterChange('makeToyota', e.target.checked)}\n >\n Toyota\n \n this.onFilterChange('makeMercedes', e.target.checked)}\n >\n Mercedes\n \n this.onFilterChange('makeBMW', e.target.checked)}\n >\n BMW\n \n this.onFilterChange('makeInfiniti', e.target.checked)}\n >\n Infiniti\n \n this.onFilterChange('makeLexus', e.target.checked)}\n >\n Lexus\n \n this.onFilterChange('makeAcura', e.target.checked)}\n >\n Acura\n \n \n this.onShowAllToggle('payment')}\n >\n }\n checked={activeFilters.paymentPaypal}\n onClick={e => this.onFilterChange('paymentPaypal', e.target.checked)}\n >\n PayPal\n \n }\n checked={activeFilters.paymentDiscover}\n onClick={e => this.onFilterChange('paymentDiscover', e.target.checked)}\n >\n Discover\n \n }\n checked={activeFilters.paymentVisa}\n onClick={e => this.onFilterChange('paymentVisa', e.target.checked)}\n >\n Visa\n \n }\n checked={activeFilters.paymentMastercard}\n onClick={e => this.onFilterChange('paymentMastercard', e.target.checked)}\n >\n Mastercard\n \n }\n checked={activeFilters.paymentAmex}\n onClick={e => this.onFilterChange('paymentAmex', e.target.checked)}\n >\n American Express\n \n }\n checked={activeFilters.paymentDinersClub}\n onClick={e => this.onFilterChange('paymentDinersClub', e.target.checked)}\n >\n {\"Diner's Club\"}\n \n \n this.onShowAllToggle('mileage')}\n >\n this.onFilterChange('mileage50', e.target.checked)}\n >\n 50+\n \n this.onFilterChange('mileage40', e.target.checked)}\n >\n 40-50\n \n this.onFilterChange('mileage30', e.target.checked)}\n >\n 30-40\n \n this.onFilterChange('mileage20', e.target.checked)}\n >\n 20-30\n \n this.onFilterChange('mileage10', e.target.checked)}\n >\n {'< 20'}\n \n \n this.onShowAllToggle('rating')}\n >\n this.onFilterChange('rating5', e.target.checked)}\n />\n this.onFilterChange('rating4', e.target.checked)}\n />\n this.onFilterChange('rating3', e.target.checked)}\n />\n this.onFilterChange('rating2', e.target.checked)}\n />\n this.onFilterChange('rating1', e.target.checked)}\n />\n \n \n
\n );\n }\n}","title":"Basic","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js index c6b235d..0013820 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/properties-side-panel/react.js @@ -9,6 +9,10 @@ const pageData = { "id": "Properties side panel", "section": "extensions", "subsection": "Catalog view", + "deprecated": false, + "beta": false, + "demo": false, + "newImplementationLink": false, "source": "react", "tabName": null, "slug": "/extensions/catalog-view/properties-side-panel/react", @@ -74,7 +78,7 @@ pageData.relativeImports = { }; pageData.examples = { 'Properties side panel with property items': props => - (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> + (\n
\n \n \n \n Certified\n \n }\n />\n \n \n \n https://quay.io/repository/redhat/prometheus-operator\n \n }\n />\n \n 0.22.2 \n \n }\n />\n \n Aug 23, 1:58pm\n \n }\n />\n Red Hat} />\n \n
\n)","title":"Properties side panel with property items","lang":"js"}}> }; diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js index d7e9693..efe5ad1 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/vertical-tabs/react.js @@ -6,6 +6,10 @@ const pageData = { "id": "Vertical tabs", "section": "extensions", "subsection": "Catalog view", + "deprecated": false, + "beta": false, + "demo": false, + "newImplementationLink": false, "source": "react", "tabName": null, "slug": "/extensions/catalog-view/vertical-tabs/react", diff --git a/packages/module/release.config.js b/packages/module/release.config.js index 27909ea..096e336 100644 --- a/packages/module/release.config.js +++ b/packages/module/release.config.js @@ -1,10 +1,19 @@ module.exports = { - branches: [{ name: 'v4', channel: 'prerelease' }, { name: 'main', channel: 'alpha', prerelease: 'alpha' }], + branches: [ + { name: 'v4', channel: 'prerelease' }, + { name: 'main', channel: 'alpha', prerelease: 'alpha' } + ], analyzeCommits: { preset: 'angular' }, plugins: [ - '@semantic-release/commit-analyzer', + [ + '@semantic-release/commit-analyzer', + { + preset: 'angular', + releaseRules: [{ type: 'chore', scope: 'deps', release: 'patch' }] + } + ], '@semantic-release/release-notes-generator', '@semantic-release/github', '@semantic-release/npm' diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss index 45800b2..7b816e0 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-item.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-item.scss @@ -20,6 +20,6 @@ } .catalog-item-header-pf-subtitle { - color: var(--pf-global--Color--200); + color: var(--pf-v5-global--Color--200); margin-bottom: 0; } diff --git a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss index 6e26552..8f790a9 100644 --- a/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss +++ b/packages/module/sass/react-catalog-view-extension/_catalog-tile.scss @@ -1,6 +1,6 @@ .catalog-tile-pf { &.featured { - border-top: 2px solid var(--pf-global--active-color--100); + border-top: 2px solid var(--pf-v5-global--active-color--100); } &:active, @@ -11,7 +11,7 @@ text-decoration: none; } - .pf-c-card__actions { + .pf-v5-c-card__actions { padding-left: 5px; } } @@ -27,7 +27,7 @@ } .catalog-tile-pf-subtitle { - color: var(--pf-global--Color--200); + color: var(--pf-v5-global--Color--200); font-size: 13px; font-weight: initial; diff --git a/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss b/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss index 9c9e3ef..0ef53f8 100644 --- a/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss +++ b/packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss @@ -30,7 +30,7 @@ margin-top: 0; } - .pf-c-check__label { + .pf-v5-c-check__label { min-height: 23px; } diff --git a/packages/module/sass/react-catalog-view-extension/_variables.scss b/packages/module/sass/react-catalog-view-extension/_variables.scss index a4b23a1..a104fff 100644 --- a/packages/module/sass/react-catalog-view-extension/_variables.scss +++ b/packages/module/sass/react-catalog-view-extension/_variables.scss @@ -1,5 +1,5 @@ -$vertical-tab-pf-color: var(--pf-global--Color--100) !default; -$vertical-tab-pf-active-color: var(--pf-global--active-color--100) !default; +$vertical-tab-pf-color: var(--pf-v5-global--Color--100) !default; +$vertical-tab-pf-active-color: var(--pf-v5-global--active-color--100) !default; :root { --vertical-tab-pf-color: #{$vertical-tab-pf-color}; diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx index 3f3262e..bf667a4 100644 --- a/packages/module/src/components/CatalogTile/CatalogTile.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTile.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Card, CardHeader, CardTitle, CardBody, CardFooter } from '@patternfly/react-core'; import { css } from '@patternfly/react-styles'; +import { getUniqueId } from '@patternfly/react-core'; export interface CatalogTileProps extends Omit, 'title'> { /** Id */ @@ -10,7 +11,7 @@ export interface CatalogTileProps extends Omit, 'ti /** Flag if the tile is 'featured' */ featured: boolean; /** Callback for a click on the tile */ - onClick?: (event: React.SyntheticEvent) => void; + onClick?: (event: React.FormEvent | React.MouseEvent) => void; /** href for the tile if used as a link */ href: string; /** URL of an image for the item's icon */ @@ -38,7 +39,7 @@ export interface CatalogTileProps extends Omit, 'ti export class CatalogTile extends React.Component { static displayName = 'CatalogTile'; static defaultProps = { - id: null as any, + id: getUniqueId('pf-catalog-tile'), className: '', featured: false, onClick: null as (event: React.SyntheticEvent) => void, @@ -54,7 +55,7 @@ export class CatalogTile extends React.Component { children: null as React.ReactNode }; - private handleClick = (e: React.SyntheticEvent) => { + private handleClick = (e: React.FormEvent | React.MouseEvent) => { const { onClick, href } = this.props; if (!href) { @@ -103,16 +104,20 @@ export class CatalogTile extends React.Component { return ( this.handleClick(e)} - isSelectable + isClickable={!!onClick} {...props} > {(badges.length > 0 || iconImg || iconClass || icon) && ( - 0 && this.renderBadges(badges)}}> + 0 && this.renderBadges(badges) }} + selectableActions={ + onClick && { selectableActionId: id + '-input', onClickAction: (e) => this.handleClick(e), selectableActionAriaLabelledby: id } + } + > {iconImg && {iconAlt}} {!iconImg && (iconClass || icon) && {icon}} diff --git a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx index c486ed0..87963ec 100644 --- a/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTileBadge.tsx @@ -28,7 +28,7 @@ export const CatalogTileBadge: React.FunctionComponent = {children} - {title} + {title} diff --git a/yarn.lock b/yarn.lock index 43c9adf..64c0cdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1644,10 +1644,10 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^2.0.0-alpha.29": - version "2.0.0-alpha.29" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-2.0.0-alpha.29.tgz#0d9bab040b579139bee049c3e336f459150f8284" - integrity sha512-crswro9T613tfwO8O/7jspqJxzqN2syT59BEHDMKB75z2aTXSa1aY+v1cAKebf254wnBUsaudhwfQ1hHrV/8Ww== +"@patternfly/documentation-framework@2.0.0-alpha.57": + version "2.0.0-alpha.57" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-2.0.0-alpha.57.tgz#e1963d1f16fafa8eca2af2adff1f31f7db2cc3cc" + integrity sha512-pZObpD8lgKBaH3RdPXhjtiiKooRo2IXnkjWsM+Sbx+DSZjLgg0nHBCMJDPsJJrtRPti+zw7j1uUTdZ9qWu2jFg== dependencies: "@babel/core" "7.18.2" "@babel/plugin-proposal-class-properties" "7.17.12" @@ -1733,77 +1733,77 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@^5.0.0-alpha.43": - version "5.0.0-alpha.43" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-alpha.43.tgz#667ffc4004a7738f202fdac85c65be6dd199e6a0" - integrity sha512-O3tOXGTxNbR8AOAiJUIth/0MAiKniTvM2L//lDisRXst0fP43I7/p0Ba3hU3ECAfMf4MsIe9tt5ZhO5Hz9lpZg== +"@patternfly/patternfly@5.0.0-prerelease.6": + version "5.0.0-prerelease.6" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-prerelease.6.tgz#accb23fed7f263d372f7a034dc9e75d07c219d34" + integrity sha512-lT7eWR6JQFZkQniFmVm2N1ssS7J1vLjAoHeCTrA7CxncMk4Tq+GpezLvf3iWVH9D5UqDHdtvSElUQysUyc2D/Q== -"@patternfly/react-code-editor@^5.0.0-alpha.79": - version "5.0.0-alpha.81" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-5.0.0-alpha.81.tgz#7c8c52cb36e3cc4ef0d21f800f05ccef8745d6d1" - integrity sha512-Pg4a4UWih756I38EopskPTEl+5R+68p1PzqN8ATO6x/BhHRdv1FH90cXTACFa8IDWSVCjVBqi0+oGSrrvuChwA== +"@patternfly/react-code-editor@5.0.0-prerelease.7": + version "5.0.0-prerelease.7" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-5.0.0-prerelease.7.tgz#877ffea44c9495c3b417ed1f7e854a3d555aa186" + integrity sha512-7AFnJYJCy4oOfBxCHFomWsJxef3lUHsVIpc1GPhCQC/8Oie2DX1bJADCezDE37kQaR5M3rOfdhri3I5f9UTk9Q== dependencies: - "@patternfly/react-core" "^5.0.0-alpha.80" - "@patternfly/react-icons" "^5.0.0-alpha.12" - "@patternfly/react-styles" "^5.0.0-alpha.8" + "@patternfly/react-core" "^5.0.0-prerelease.7" + "@patternfly/react-icons" "^5.0.0-prerelease.3" + "@patternfly/react-styles" "^5.0.0-prerelease.2" react-dropzone "14.2.3" tslib "^2.5.0" -"@patternfly/react-core@^5.0.0-alpha.72": - version "5.0.0-alpha.79" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-alpha.79.tgz#4e01fc3255afaef23fed987c88622aa71f87f6ac" - integrity sha512-my/wCrRbS877s7cLNTLnggjNFLfROyWAworBudh2l+GtXuUq6he0MW82NKGSkT/VlMrMxrTjIaqpxoqEMdBRgw== +"@patternfly/react-core@5.0.0-prerelease.7": + version "5.0.0-prerelease.7" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-prerelease.7.tgz#93c9fb1316bf34dd5f65426abcf4086cf7a806b4" + integrity sha512-gCFKI7T2vTtogjMtyrYzHfPpC7KWNOcaa3nw5NKx3VVIcCEmf+Hp5XmIX8eDlElmIAQltRD/Q6vEtgXNh4QgcA== dependencies: - "@patternfly/react-icons" "^5.0.0-alpha.11" - "@patternfly/react-styles" "^5.0.0-alpha.8" - "@patternfly/react-tokens" "^5.0.0-alpha.7" - focus-trap "7.4.0" + "@patternfly/react-icons" "^5.0.0-prerelease.3" + "@patternfly/react-styles" "^5.0.0-prerelease.2" + "@patternfly/react-tokens" "^5.0.0-prerelease.2" + focus-trap "7.4.3" react-dropzone "^14.2.3" tslib "^2.5.0" -"@patternfly/react-core@^5.0.0-alpha.80": - version "5.0.0-alpha.80" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-alpha.80.tgz#83ce5ebf5bdf4abe93aee7d87702a7ec9d8e71ea" - integrity sha512-0vPEKWRdw6qUdPq0Y2GvbPeOP647HjWu8jLNzsMHTOt6SPN3CotL0GEUduI0LOXgIqIpeSs/N86g4rQQgseMwA== +"@patternfly/react-core@^5.0.0-prerelease.7": + version "5.0.0-prerelease.9" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-prerelease.9.tgz#334ec47ec110b64b431dd5e43e44549e428ceb8c" + integrity sha512-uy0pEvvufp9Z6cLcEP3BEIbZUF2YE1eRChpb9RWv4jBrxVfKi8PbodUU+dF4Od0LSFCDqQ97NkdMD8QDSq8t5Q== dependencies: - "@patternfly/react-icons" "^5.0.0-alpha.12" - "@patternfly/react-styles" "^5.0.0-alpha.8" - "@patternfly/react-tokens" "^5.0.0-alpha.7" - focus-trap "7.4.0" + "@patternfly/react-icons" "^5.0.0-prerelease.4" + "@patternfly/react-styles" "^5.0.0-prerelease.3" + "@patternfly/react-tokens" "^5.0.0-prerelease.3" + focus-trap "7.4.3" react-dropzone "^14.2.3" tslib "^2.5.0" -"@patternfly/react-icons@^5.0.0-alpha.11": - version "5.0.0-alpha.11" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0-alpha.11.tgz#3e50a1ea7893c7ab83234b8926462e02b56c75fc" - integrity sha512-Wsa6pCcBqQqXqON0x0QjeuZnBrb+fg/GVE949QJc4u0hbN2E0UJOt1q5Ja+SwLkqI8pvizzmLM32D4omOj56SQ== - -"@patternfly/react-icons@^5.0.0-alpha.12": - version "5.0.0-alpha.12" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0-alpha.12.tgz#1854452ae5b711780c796f47b782016f8862b672" - integrity sha512-VwCGlB+JtpsjHJtqCcfy+CpaE+rAY2si7cd4ufJouybkoBPve/6wuTPA3K3eGtgn5cAIr18IF1Pkfkp2lR18sg== - -"@patternfly/react-styles@^5.0.0-alpha.7", "@patternfly/react-styles@^5.0.0-alpha.8": - version "5.0.0-alpha.8" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0-alpha.8.tgz#7e98abd2406deb26fd16869004559289810ba666" - integrity sha512-V/jhoKp6pz3c+2N1Yi/Ez/EJIHKEHe4SSCzF5ocGpOfaYlQpDGdttKIF0GSWksXlShYZJ5heKfARuESK9XjqRA== - -"@patternfly/react-table@^5.0.0-alpha.80": - version "5.0.0-alpha.82" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0-alpha.82.tgz#c73e8d160543f2750fa6c618253f26850c97312e" - integrity sha512-pBFAvtTzdCpHyVAZ6e2wW5ackJyVWNAKZKULe4ZgoxxNMachhL2H+EthmN/rVNXT891AxgG2RU2JOkbFqiDlfg== - dependencies: - "@patternfly/react-core" "^5.0.0-alpha.80" - "@patternfly/react-icons" "^5.0.0-alpha.12" - "@patternfly/react-styles" "^5.0.0-alpha.8" - "@patternfly/react-tokens" "^5.0.0-alpha.7" +"@patternfly/react-icons@^5.0.0-prerelease.3", "@patternfly/react-icons@^5.0.0-prerelease.4": + version "5.0.0-prerelease.4" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0-prerelease.4.tgz#cd079f2bf3fabce749194c2c19a328d6daf38ad8" + integrity sha512-/rziVF8ZOJ6YZT3zXijLVSuXwubzJL/DZnJTy/y4OrnK6kfLcduDj393D4SeLS3e0TKDiHxdyjy1N/vBh6SOQw== + +"@patternfly/react-styles@5.0.0-prerelease.2": + version "5.0.0-prerelease.2" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0-prerelease.2.tgz#56604bf052e41a43e0b433b1e69d016e1ea3a277" + integrity sha512-IP/E6fHQn6qHKD+B8LDc6GyNNcSv57JsRTDvoG8rL6Ju9V4DGnEfV4M5xxUHbJ3GRWa5XSiA1ErsM4ntP100CQ== + +"@patternfly/react-styles@^5.0.0-prerelease.2", "@patternfly/react-styles@^5.0.0-prerelease.3": + version "5.0.0-prerelease.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0-prerelease.3.tgz#0424e86e47878afb73c7ef88737d3223e710251b" + integrity sha512-kP55nd+FMXjw2l4FaB/W9lNlmo7jg8DVxPsqdEaexwdWmXJT81vix/6jRKR7ui3Bagdx/KWJRuHiBPiOekUoIw== + +"@patternfly/react-table@5.0.0-prerelease.7": + version "5.0.0-prerelease.7" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0-prerelease.7.tgz#7ed2f596ce01d367bf347011b8affeeb708aefee" + integrity sha512-cHKiuXFXu7ZMPgCRK1GfUysK9KALGEXQ4LVgUT3udS6KH+LkBAbupqTZyBfDjpyzhbo9rZ3gJ1Xjxfi7+G5oZg== + dependencies: + "@patternfly/react-core" "^5.0.0-prerelease.7" + "@patternfly/react-icons" "^5.0.0-prerelease.3" + "@patternfly/react-styles" "^5.0.0-prerelease.2" + "@patternfly/react-tokens" "^5.0.0-prerelease.2" lodash "^4.17.19" tslib "^2.5.0" -"@patternfly/react-tokens@^5.0.0-alpha.7": - version "5.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0-alpha.7.tgz#c81d47f05bd699ebbe79f21ff8ad66717e2d3b4c" - integrity sha512-w22cIlzzD7U40Ut8VDqjU1RyOmdwn9Z10qiUSZCzEJY/D5Vwo9bDXbHX23bBUr2rCJUkAwWNaAhWquHFBiSK4w== +"@patternfly/react-tokens@^5.0.0-prerelease.2", "@patternfly/react-tokens@^5.0.0-prerelease.3": + version "5.0.0-prerelease.3" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0-prerelease.3.tgz#a601805f0e43c627b6cfc8f3fb4f6ab1f4ef49da" + integrity sha512-xu6q7BxF0XWaQ3gdTOYFtAUKHuuy/oF7LBHqOvujNEtH1J9Lfp1o/Qd7GdKU552fSiofVCPj9dUs1l3PUWskBA== "@polka/url@^1.0.0-next.20": version "1.0.0-next.21" @@ -5372,12 +5372,12 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" -focus-trap@7.4.0: - version "7.4.0" - resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.4.0.tgz#20f760a497f593b01d2e446168009c1f12ab0385" - integrity sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg== +focus-trap@7.4.3: + version "7.4.3" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.4.3.tgz#a3dae73d44df359eb92bbf37b18e173e813b16c5" + integrity sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg== dependencies: - tabbable "^6.1.1" + tabbable "^6.1.2" follow-redirects@1.5.10: version "1.5.10" @@ -10035,10 +10035,10 @@ symbol-tree@^3.2.4: resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tabbable@^6.1.1: - version "6.1.1" - resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0" - integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== +tabbable@^6.1.2: + version "6.1.2" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703" + integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ== tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" From 3d25484307ea84d64a2b571bfcd48ebc473faeca Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 13 Jun 2023 16:41:35 -0400 Subject: [PATCH 3/8] fix(CatalogTile): Always render header when an onClick is passed --- .../catalog-view/catalog-tile/react.js | 2 +- .../CatalogTile/CatalogTile.test.tsx | 3 +- .../components/CatalogTile/CatalogTile.tsx | 2 +- .../__snapshots__/CatalogTile.test.tsx.snap | 147 +++++++++--------- .../PropertiesSidePanel.test.tsx.snap | 30 ++-- 5 files changed, 94 insertions(+), 90 deletions(-) diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js index 3fca6b6..65b4ef2 100644 --- a/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js +++ b/packages/module/patternfly-docs/generated/extensions/catalog-view/catalog-tile/react.js @@ -93,7 +93,7 @@ const pageData = { "name": "id", "type": "any", "description": "Id", - "defaultValue": "getUniqueId('pf-catalog-tile-')" + "defaultValue": "getUniqueId('pf-catalog-tile')" }, { "name": "onClick", diff --git a/packages/module/src/components/CatalogTile/CatalogTile.test.tsx b/packages/module/src/components/CatalogTile/CatalogTile.test.tsx index 6906fd8..6080958 100644 --- a/packages/module/src/components/CatalogTile/CatalogTile.test.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTile.test.tsx @@ -120,6 +120,7 @@ test('CatalogTile onClick behaves properly', async () => { /> ); - await user.click(screen.getByText('Patternfly')); + // await user.click(screen.getByText('Patternfly')); + await user.click(screen.getByRole('radio')); expect(onClickMock).toHaveBeenCalled(); }); diff --git a/packages/module/src/components/CatalogTile/CatalogTile.tsx b/packages/module/src/components/CatalogTile/CatalogTile.tsx index bf667a4..9d27b55 100644 --- a/packages/module/src/components/CatalogTile/CatalogTile.tsx +++ b/packages/module/src/components/CatalogTile/CatalogTile.tsx @@ -111,7 +111,7 @@ export class CatalogTile extends React.Component { isClickable={!!onClick} {...props} > - {(badges.length > 0 || iconImg || iconClass || icon) && ( + {(badges.length > 0 || iconImg || iconClass || icon || onClick) && ( 0 && this.renderBadges(badges) }} selectableActions={ diff --git a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap index 60fc90d..b4ce300 100644 --- a/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap +++ b/packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap @@ -3,19 +3,18 @@ exports[`CatalogTile href renders properly 1`] = `