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..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 @@ -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.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 3f3262e..9d27b55 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)}}> + {(badges.length > 0 || iconImg || iconClass || icon || onClick) && ( + 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/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`] = `