diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 235d8b73c41..00000000000 --- a/.eslintignore +++ /dev/null @@ -1,50 +0,0 @@ -# Javascript builds -node_modules -dist -__tests__ -thirdparty -tsc_out -.out -.changelog -.DS_Store -coverage -.cache -.tmp -**/Generated -**/build -css -packages/react-docs/.cache -packages/react-docs/static -packages/react-docs/public -packages/react-integration/results -packages/react-integration/demo-app-ts/public - -# package managers -yarn-error.log -lerna-debug.log - -# IDEs and editors -.idea -.project -.classpath -.c9 -*.launch -.settings -*.sublime-workspace -.history -.vscode - -# IDE - VSCode -.vscode -# For vim -*.swp - -# Deploy directory -docs - -# Copied types -DeprecatedPopperTypes.ts -DeprecatedTippyTypes.ts - -# Copied thirdparty -packages/react-core/src/helpers/Popper/thirdparty/**/* diff --git a/.eslintrc-md.json b/.eslintrc-md.json deleted file mode 100644 index 0f5929fbf83..00000000000 --- a/.eslintrc-md.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "plugins": [ - "markdown", - "react", - "patternfly-react" - ], - "parserOptions": { - "ecmaVersion": 9, - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "settings": { - "react": { - "version": "16.4.0" - } - }, - "rules": { - "eol-last": 2, - "spaced-comment": 2, - "no-unused-vars": 0, - "no-this-before-super": 2, - "patternfly-react/import-tokens-icons": "error", - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - "react/no-unknown-property": 2, - "react/jsx-no-undef": 2 - } -} \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 4343a4a8f08..00000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,132 +0,0 @@ -{ - "env": { - "browser": true, - "node": true, - "es6": true - }, - "plugins": [ - "@typescript-eslint", - "prettier", - "patternfly-react" - ], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], - "parserOptions": { - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "settings": { - "react": { - "version": "detect" - } - }, - "globals": { - "describe": "readonly", - "test": "readonly", - "jest": "readonly", - "expect": "readonly", - "require": "readonly", - "global": "writable", - "it": "readonly", - "afterEach": "readonly", - "beforeEach": "readonly" - }, - "rules": { - "@typescript-eslint/adjacent-overload-signatures": "error", - "@typescript-eslint/array-type": "error", - "@typescript-eslint/ban-types": "off", - "@typescript-eslint/consistent-type-assertions": "error", - "@typescript-eslint/consistent-type-definitions": "error", - "@typescript-eslint/explicit-member-accessibility": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "@typescript-eslint/indent": "off", - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-empty-interface": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-misused-new": "error", - "@typescript-eslint/no-namespace": "error", - "@typescript-eslint/no-unused-vars": ["error", { - "argsIgnorePattern": "^_" - }], - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-var-requires": "off", - "@typescript-eslint/prefer-for-of": "error", - "@typescript-eslint/prefer-function-type": "error", - "@typescript-eslint/prefer-namespace-keyword": "error", - "@typescript-eslint/unified-signatures": "error", - "@typescript-eslint/explicit-function-return-type": "off", - "arrow-body-style": "error", - "camelcase": ["error", { - "ignoreDestructuring": true - }], - "constructor-super": "error", - "curly": "error", - "dot-notation": "error", - "eqeqeq": [ - "error", - "smart" - ], - "guard-for-in": "error", - "max-classes-per-file": [ - "error", - 1 - ], - "max-len": "off", - "no-nested-ternary": "error", - "no-bitwise": "error", - "no-caller": "error", - "no-cond-assign": "error", - "no-console": "error", - "no-debugger": "error", - "no-empty": "error", - "no-eval": "error", - "no-new-wrappers": "error", - "no-prototype-builtins": "off", - "no-shadow": "off", - "no-throw-literal": "error", - "no-trailing-spaces": "off", - "no-undef-init": "error", - "no-unsafe-finally": "error", - "no-unused-expressions": ["error", { - "allowTernary": true, - "allowShortCircuit": true - }], - "no-unused-labels": "error", - "no-var": "error", - "object-shorthand": "error", - "one-var": [ - "error", - "never" - ], - "patternfly-react/import-tokens-icons": "error", - "patternfly-react/no-anonymous-functions": "off", - "prefer-const": "error", - "prettier/prettier": "off", - "radix": [ - "error", - "as-needed" - ], - "react/prop-types": 0, - "react/display-name": 0, - "react-hooks/exhaustive-deps": "warn", - "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}], - "spaced-comment": "error", - "use-isnan": "error", - "patternfly-react/no-layout-effect": "error" - }, - "overrides": [ - { - "files": ["**/examples/*", "**/demos/examples/**/*"], - "rules": { - "patternfly-react/no-anonymous-functions": "off" - } - } - ] -} diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 204055e53ea..1fe791a2d1e 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -2,7 +2,7 @@ name: Bug report about: Help us to improve PatternFly title: Bug - [Component] - [short description] -labels: bug, needs triage +labels: bug assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/devX_request.md b/.github/ISSUE_TEMPLATE/devX_request.md new file mode 100644 index 00000000000..d70b5129e90 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/devX_request.md @@ -0,0 +1,17 @@ +--- +name: Developer experience +about: Suggest an enhancement to the developer experience (DX). DX enhancements improve + experience for those building UIs with PatternFly, but have little to no end user + impact. +title: "[short description]" +labels: DevX +assignees: '' + +--- + +**Describe the enhancement or change** +A clear and concise description of the request. What is the expected outcome? + +**Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?** + +**Any other information?** diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 25418bcb55e..94d4b63860e 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,8 +1,9 @@ --- name: Feature request -about: Suggest a new feature for PatternFly +about: Suggest a new feature for PatternFly. Features augment or impact end user experience + and requires design input. title: "[Component] - [short description]" -labels: feature request, needs triage +labels: Feature assignees: '' --- diff --git a/.github/ISSUE_TEMPLATE/pf6-beta-bug.md b/.github/ISSUE_TEMPLATE/pf6-beta-bug.md new file mode 100644 index 00000000000..fd67041b2cc --- /dev/null +++ b/.github/ISSUE_TEMPLATE/pf6-beta-bug.md @@ -0,0 +1,17 @@ +--- +name: PF6 beta bug +about: Report a bug discovered while testing the PatternFly 6 beta +title: "[short description]" +labels: v6 Beta bug +assignees: '' + +--- + +**Please describe the issue** + +**Are there visuals for this issue? Please provide screenshots** +Include screenshots or links to Marvel or other mockups. + +**Could you point to a branch or draft PR where this issue exists? Please provide a link to the code** + +**Any other information?** diff --git a/.github/ISSUE_TEMPLATE/tech_debt_request.md b/.github/ISSUE_TEMPLATE/tech_debt_request.md new file mode 100644 index 00000000000..c68a0d50aaf --- /dev/null +++ b/.github/ISSUE_TEMPLATE/tech_debt_request.md @@ -0,0 +1,16 @@ +--- +name: Tech debt +about: Improvements to code that do not affect either user or product developers’ + experiences. +title: "[short description]" +labels: Tech debt +assignees: '' + +--- + +**Describe the enhancement or change** +A clear and concise description of the request. What is the expected outcome? + +**Is this request originating from a Red Hat product team? If so, which ones and is there any sort of deadline for this enhancement?** + +**Any other information?** diff --git a/.github/actions/setup-project/action.yml b/.github/actions/setup-project/action.yml new file mode 100644 index 00000000000..f47422f31c7 --- /dev/null +++ b/.github/actions/setup-project/action.yml @@ -0,0 +1,69 @@ +name: Set up and build project +inputs: + skip-build: + description: Skip the build step + required: false + default: 'false' + skip-build-cache: + description: Skip the build cache step + required: false + default: 'false' +runs: + using: composite + steps: + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + check-latest: true + + - name: Enable Corepack + shell: bash + run: corepack enable + + - name: Get Yarn configuration + id: yarn-config + shell: bash + run: | + echo "cache-folder=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + # TODO: This can be simplified to use the `cache` option of the `actions/setup-node` action when it supports Corepack. + # See: https://github.com/actions/setup-node/issues/531 + - uses: actions/cache@v4 + name: Setup Yarn cache + with: + # Also cache Cypress binary. + path: | + ~/.cache/Cypress + ${{ steps.yarn-config.outputs.cache-folder }} + key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn-cache- + + - name: Install dependencies + shell: bash + run: yarn install --immutable + + - uses: actions/cache@v4 + if: inputs.skip-build != 'true' && inputs.skip-build-cache != 'true' + id: cache-build + name: Cache build + with: + path: | + packages/*/dist + packages/*/next + packages/*/deprecated + packages/*/components + packages/react-styles/css + packages/react-core/layouts + packages/react-core/helpers + key: ${{ runner.os }}-build-${{ hashFiles('yarn.lock', '**/package.json', 'packages/**', '!**/node_modules', '!**/dist') }} + + - name: Run build + if: inputs.skip-build != 'true' && steps.cache-build.outputs.cache-hit != 'true' + shell: bash + run: yarn build && yarn build:umd + env: + # Disable V8 compile cache to hard crashes in Node.js. This can likely be removed once upgraded to the next LTS version (version 22). + # See: https://github.com/nodejs/node/issues/51555 + DISABLE_V8_COMPILE_CACHE: 1 diff --git a/.github/generate-workflows.js b/.github/generate-workflows.js deleted file mode 100644 index b4a9f17307b..00000000000 --- a/.github/generate-workflows.js +++ /dev/null @@ -1,53 +0,0 @@ -/* For some reason Github's composite actions are limited to a small set - * of actions AND even if you get them working, the composite actions don't - * list all the steps out in an easily debuggable way. - * - * I've written this so common parts of pr preview/release builds need not - * be repeated. - */ -const path = require('path'); -const fs = require('fs'); - -const inDir = path.join(__dirname, 'workflows-src'); -const outDir = path.join(__dirname, 'workflows'); -const partialsDir = path.join(inDir, 'partials'); -const yamlRegex = /\.ya?ml$/; - -const partials = fs.readdirSync(partialsDir).reduce((acc, f) => { - acc[f.replace(yamlRegex, '')] = fs.readFileSync(path.join(partialsDir, f), 'utf8').trim(); - return acc; -}, {}); - -function templateReplace(contents) { - Object.entries(partials).forEach(([key, val]) => { - const regexText = `([ \\t]*)%${key}%`; - const match = contents.match(new RegExp(regexText)); - if (match) { - const spacing = match[1]; - val = `${spacing}${val.replace(/\n/g, '\n' + spacing)}`; - contents = contents.replace(new RegExp(regexText, 'g'), val); - } - }); - - return contents; -} - -// Partials can have other partials -Object.entries(partials).forEach(([key, val]) => { - partials[key] = templateReplace(val); -}); - -if (!fs.existsSync(outDir)) { - fs.mkdirSync(outDir); -} - -fs.readdirSync(inDir) - .filter(f => f.match(yamlRegex)) - .forEach(f => { - let contents = fs.readFileSync(path.join(inDir, f), 'utf8'); - - contents = templateReplace(contents); - contents = `### WARNING -- this file was generated by ${process.argv[1].split(path.sep).pop()}\n${contents}`; - fs.writeFileSync(path.join(outDir, f), contents); - }); - diff --git a/.github/promote.sh b/.github/promote.sh new file mode 100755 index 00000000000..e359a08c469 --- /dev/null +++ b/.github/promote.sh @@ -0,0 +1,34 @@ +#!/bin/bash +GIT_USERNAME="patternfly-build" +GH_REPO=${GITHUB_REPOSITORY} +REPO="github.com/${GH_REPO}" +echo "Preparing release environment..." +git config user.email "patternfly-build@redhat.com" +git config user.name ${GIT_USERNAME} +echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc + +# Lerna is complicated. Commands: https://github.com/lerna/lerna/tree/master/commands +# Identify packages that have been updated since the previous tagged release +# Update their versions and changelogs according to angular commit guidelines +# https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit + +# if [[ ! -z "${PATTERNFLY_VERSION}" ]]; then +# echo "Updating to @patternfly/patternfly: ${PATTERNFLY_VERSION}" +# npm pkg set dependencies.@patternfly/patternfly=${PATTERNFLY_VERSION} --workspace @patternfly/react-docs +# npm pkg set devDependencies.@patternfly/patternfly=${PATTERNFLY_VERSION} --workspace @patternfly/react-core --workspace @patternfly/react-styles --workspace @patternfly/react-tokens --workspace @patternfly/react-icons +# fi + +# publish to npm +# yarn run lerna publish --conventional-commits --conventional-graduate --no-private --dist-tag=latest --yes + +# Promote - set up repo for alpha +# yarn run lerna version preminor --force-publish --conventional-commits --no-private --yes --preid alpha + +# Promote - To set up repo for a alpha patch release +# yarn run lerna version prepatch --force-publish --conventional-commits --no-private --yes --preid alpha +yarn run lerna version prepatch --conventional-commits --no-private --yes --no-push --preid alpha + +# dry run +# yarn run lerna version --conventional-commits --conventional-graduate --no-private --yes --no-git-tag-version --no-push + + diff --git a/.github/release.sh b/.github/release.sh index 6cbf65ca640..2fbf080efe7 100755 --- a/.github/release.sh +++ b/.github/release.sh @@ -17,7 +17,10 @@ echo "Doing a release..." LOG=$(git log --format="%s" -1 | grep -Poe "#\d+") PR_NUM=${LOG:1} -yarn run lerna publish --conventional-commits --conventional-prerelease --create-release=github --no-verify-access --dist-tag=alpha --yes 2>&1 | tee lerna-output.txt +yarn run lerna publish patch --dist-tag=prerelease-v5 --yes 2>&1 | tee lerna-output.txt + +# use lerna command below for dry run +# yarn run lerna version patch --yes --no-git-tag-version --no-push | tee lerna-output.txt if grep -i "Successfully published" lerna-output.txt; # Leave a Github comment then diff --git a/.github/renovate.json b/.github/renovate.json deleted file mode 100644 index ccbcd60f46a..00000000000 --- a/.github/renovate.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "extends": [ - "config:base" - ], - "enabledManagers": ["npm"], - "packageRules": [ - { - "packagePatterns": ["*"], - "excludePackagePatterns": [ - "@patternfly/patternfly", - "@patternfly/patternfly-a11y", - "@patternfly/documentation-framework" - ], - "enabled": false - }, - { - "datasources": ["npm"], - "packageNames": [ - "@patternfly/patternfly-a11y", - "@patternfly/documentation-framework" - ] - }, - { - "datasources": ["npm"], - "packageNames": [ - "@patternfly/patternfly" - ], - "followTag": "prerelease" - } - ] -} diff --git a/.github/split.js b/.github/split.js index 11a6610de7c..40ed8a0bd66 100644 --- a/.github/split.js +++ b/.github/split.js @@ -1,14 +1,15 @@ +/* eslint-disable no-console */ const fs = require('fs'); const path = require('path'); const BASE_DIR = path.join(__dirname, '../packages/react-integration/cypress/integration'); -const WORKER_NUM = +process.env['WORKER_NUM']; -const WORKER_COUNT = +process.env['WORKER_COUNT']; +const WORKER_NUM = +process.env.WORKER_NUM; +const WORKER_COUNT = +process.env.WORKER_COUNT; -const testFiles = fs.readdirSync(BASE_DIR) +const testFiles = fs + .readdirSync(BASE_DIR) .sort() .filter((_, i) => i % WORKER_COUNT === WORKER_NUM) - .map(f => path.join(BASE_DIR, f)); + .map((f) => path.join(BASE_DIR, f)); console.log(testFiles.join(' ')); - diff --git a/.github/stale.yml b/.github/stale.yml deleted file mode 100644 index f4e6ae06a53..00000000000 --- a/.github/stale.yml +++ /dev/null @@ -1,28 +0,0 @@ -# Configuration for probot-stale - https://github.com/probot/stale -# Number of days of inactivity before an Issue or Pull Request becomes stale -daysUntilStale: 60 - -# Number of days of inactivity before an Issue or Pull Request with the stale label is closed. -# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. -daysUntilClose: 14 - -# Issues with these labels will never be considered stale -exemptLabels: - - pinned - - security - - accessibility - - "breaking change :boom:" - -# Label to use when marking as stale -staleLabel: wontfix - -# Comment to post when marking as stale. Set to `false` to disable -markComment: > - This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. - -# Comment to post when closing a stale issue. Set to `false` to disable -closeComment: false - -# Limit the number of actions per hour, from 1-30. Default is 30 -limitPerRun: 30 diff --git a/.github/upload-preview.js b/.github/upload-preview.js index e6988fe425b..bf24050b859 100644 --- a/.github/upload-preview.js +++ b/.github/upload-preview.js @@ -1,4 +1,4 @@ -const fs = require('fs'); +/* eslint-disable no-console, camelcase */ const path = require('path'); const { Octokit } = require('@octokit/rest'); const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN }); @@ -7,27 +7,28 @@ const publishFn = surge().publish(); // From github actions const ghrepo = process.env.GITHUB_REPOSITORY || ''; - -const owner = process.env.CIRCLE_PROJECT_USERNAME || ghrepo.split('/')[0]; // patternfly -const repo = process.env.CIRCLE_PROJECT_REPONAME || ghrepo.split('/')[1]; -const prnum = process.env.CIRCLE_PR_NUMBER || process.env.GH_PR_NUM; -const prbranch = process.env.CIRCLE_BRANCH || process.env.GITHUB_REF.split('/').pop(); +const [owner, repo] = ghrepo.split('/'); +const prnum = process.env.GH_PR_NUM; +const prbranch = process.env.GITHUB_REF.split('/').pop(); const uploadFolder = process.argv[2]; if (!uploadFolder) { - console.log('Usage: upload-preview uploadFolder'); process.exit(1); } const uploadFolderName = path.basename(uploadFolder); -let uploadURL = `${repo}-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[\/|\.]/g, '-'); +let uploadURL = `${repo}-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[/|.]/g, '-'); -switch(uploadFolderName) { +switch (uploadFolderName) { case 'coverage': uploadURL += '-a11y.surge.sh'; break; case 'public': - uploadURL += '.surge.sh'; + if (!prnum && prbranch === 'main') { + uploadURL = 'react-staging.patternfly.org'; + } else { + uploadURL += '.surge.sh'; + } break; default: uploadURL += `-${uploadFolderName}`; @@ -52,15 +53,16 @@ function tryAddComment(comment, commentBody) { } if (prnum) { - octokit.issues.listComments({ - owner, - repo, - issue_number: prnum - }) - .then(res => res.data) - .then(comments => { + octokit.issues + .listComments({ + owner, + repo, + issue_number: prnum + }) + .then((res) => res.data) + .then((comments) => { let commentBody = ''; - const existingComment = comments.find(comment => comment.user.login === 'patternfly-build'); + const existingComment = comments.find((comment) => comment.user.login === 'patternfly-build'); if (existingComment) { commentBody += existingComment.body.trim(); commentBody += '\n\n'; @@ -68,25 +70,28 @@ if (prnum) { if (uploadFolderName === 'public') { commentBody += tryAddComment(`Preview: https://${uploadURL}`, commentBody); - } - else if (uploadFolderName === 'coverage') { + } else if (uploadFolderName === 'coverage') { commentBody += tryAddComment(`A11y report: https://${uploadURL}`, commentBody); } if (existingComment) { - octokit.issues.updateComment({ - owner, - repo, - comment_id: existingComment.id, - body: commentBody - }).then(() => console.log('Updated comment!')); + octokit.issues + .updateComment({ + owner, + repo, + comment_id: existingComment.id, + body: commentBody + }) + .then(() => console.log('Updated comment!')); } else { - octokit.issues.createComment({ - owner, - repo, - issue_number: prnum, - body: commentBody - }).then(() => console.log('Created comment!')); + octokit.issues + .createComment({ + owner, + repo, + issue_number: prnum, + body: commentBody + }) + .then(() => console.log('Created comment!')); } }); } diff --git a/.github/workflows-src/partials/build.yml b/.github/workflows-src/partials/build.yml deleted file mode 100644 index 3c3672e2b66..00000000000 --- a/.github/workflows-src/partials/build.yml +++ /dev/null @@ -1,8 +0,0 @@ -build: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - steps: - %checkout% - %install% - %dist% diff --git a/.github/workflows-src/partials/checkout.yml b/.github/workflows-src/partials/checkout.yml deleted file mode 100644 index 1cf27edd29d..00000000000 --- a/.github/workflows-src/partials/checkout.yml +++ /dev/null @@ -1,8 +0,0 @@ -- uses: actions/checkout@v2 -# Yes, we really want to checkout the PR -- run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi diff --git a/.github/workflows-src/partials/demo_app.yml b/.github/workflows-src/partials/demo_app.yml deleted file mode 100644 index ae66f8650e5..00000000000 --- a/.github/workflows-src/partials/demo_app.yml +++ /dev/null @@ -1,16 +0,0 @@ -demo_app: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - %checkout% - %install% - %dist% - - name: Build demo app - run: yarn build:integration - - name: Upload demo app - uses: actions/upload-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public diff --git a/.github/workflows-src/partials/dist.yml b/.github/workflows-src/partials/dist.yml deleted file mode 100644 index e93dcd89a85..00000000000 --- a/.github/workflows-src/partials/dist.yml +++ /dev/null @@ -1,16 +0,0 @@ -- uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} -- name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' diff --git a/.github/workflows-src/partials/docs.yml b/.github/workflows-src/partials/docs.yml deleted file mode 100644 index c916edb454f..00000000000 --- a/.github/workflows-src/partials/docs.yml +++ /dev/null @@ -1,28 +0,0 @@ -docs: - runs-on: ubuntu-latest - needs: build - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - GH_PR_NUM: ${{ github.event.number }} - steps: - %checkout% - %install% - %dist% - - uses: actions/cache@v2 - id: docs-cache - name: Cache webpack - with: - path: '.cache' - key: ${{ runner.os }}-v4-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: Build docs - run: yarn build:docs - - name: Upload docs - run: node .github/upload-preview.js packages/react-docs/public - if: always() - - name: a11y tests - run: yarn serve:docs & yarn test:a11y - - name: Upload a11y results - run: node .github/upload-preview.js packages/react-docs/coverage - if: always() \ No newline at end of file diff --git a/.github/workflows-src/partials/install.yml b/.github/workflows-src/partials/install.yml deleted file mode 100644 index d9a6bbff6ba..00000000000 --- a/.github/workflows-src/partials/install.yml +++ /dev/null @@ -1,15 +0,0 @@ -- uses: actions/setup-node@v1 - with: - node-version: '18' -- uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} -- run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - diff --git a/.github/workflows-src/partials/lint.yml b/.github/workflows-src/partials/lint.yml deleted file mode 100644 index 2cb58094e09..00000000000 --- a/.github/workflows-src/partials/lint.yml +++ /dev/null @@ -1,21 +0,0 @@ -lint: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - %checkout% - %install% - - uses: actions/cache@v2 - id: lint-cache - name: Load lint cache - with: - path: '.eslintcache' - key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: ESLint - run: yarn lint:ts - - name: MDLint - run: yarn lint:md - - name: '@patternfly/patternfly versions match' - run: yarn lint:versions - diff --git a/.github/workflows-src/partials/test_integration.yml b/.github/workflows-src/partials/test_integration.yml deleted file mode 100644 index 292bd347657..00000000000 --- a/.github/workflows-src/partials/test_integration.yml +++ /dev/null @@ -1,25 +0,0 @@ -test_integration: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: demo_app - strategy: - fail-fast: false - matrix: - worker_num: [0, 1, 2, 3, 4] - worker_count: [5] - steps: - %checkout% - %install% - %dist% - - name: Download demo app - uses: actions/download-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - - run: printenv - - name: Cypress tests - run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) - env: - WORKER_NUM: ${{ matrix.worker_num }} - WORKER_COUNT: ${{ matrix.worker_count }} diff --git a/.github/workflows-src/partials/test_jest.yml b/.github/workflows-src/partials/test_jest.yml deleted file mode 100644 index a04be2eedff..00000000000 --- a/.github/workflows-src/partials/test_jest.yml +++ /dev/null @@ -1,11 +0,0 @@ -test_jest: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - %checkout% - %install% - %dist% - - name: PF4 Jest Tests - run: yarn test --maxWorkers=2 diff --git a/.github/workflows-src/pr-preview.yml b/.github/workflows-src/pr-preview.yml deleted file mode 100644 index cc28536e0e2..00000000000 --- a/.github/workflows-src/pr-preview.yml +++ /dev/null @@ -1,10 +0,0 @@ -name: build-test-deploy -on: pull_request_target -jobs: - %build% - %lint% - %test_jest% - %docs% - %demo_app% - %test_integration% - diff --git a/.github/workflows-src/release.yml b/.github/workflows-src/release.yml deleted file mode 100644 index 280fc629808..00000000000 --- a/.github/workflows-src/release.yml +++ /dev/null @@ -1,30 +0,0 @@ -name: release -on: - push: - branches: - - main -jobs: - %build% - %lint% - %test_jest% - %docs% - %demo_app% - %test_integration% - deploy: - runs-on: ubuntu-latest - needs: [lint, test_jest, docs, test_integration] - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - GH_TOKEN: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - steps: - - uses: actions/checkout@v2 - with: - token: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - fetch-depth: "0" - - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* - %install% - %dist% - - name: Deploy to NPM and Github - run: .github/release.sh - diff --git a/.github/workflows/add-new-issues-to-project.yml b/.github/workflows/add-new-issues-to-project.yml index fb7b6f2f3fc..5430657d628 100644 --- a/.github/workflows/add-new-issues-to-project.yml +++ b/.github/workflows/add-new-issues-to-project.yml @@ -1,16 +1,14 @@ name: Add new issues to PatternFly Issues project - on: issues: types: - opened - jobs: add-to-project: name: Add issue to project runs-on: ubuntu-latest steps: - - uses: actions/add-to-project@v0.3.0 + - uses: actions/add-to-project@v1.0.2 with: project-url: https://github.com/orgs/patternfly/projects/7 github-token: ${{ secrets.GH_PROJECTS }} diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml new file mode 100644 index 00000000000..c013ccb662f --- /dev/null +++ b/.github/workflows/documentation.yml @@ -0,0 +1,49 @@ +name: Documentation +on: + pull_request_target: + workflow_call: + secrets: + SURGE_LOGIN: + required: true + SURGE_TOKEN: + required: true + GH_PR_TOKEN: + required: true +jobs: + deploy: + name: Build, test & deploy + runs-on: ubuntu-latest + env: + SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} + GH_PR_NUM: ${{ github.event.number }} + steps: + - name: Check out project from PR branch + if: github.event_name == 'pull_request_target' + uses: actions/checkout@v4 + with: + # Checkout the merge commit so that we can access the PR's changes. + # This is nessesary because `pull_request_target` checks out the base branch (e.g. `main`) by default. + ref: refs/pull/${{ env.GH_PR_NUM }}/head + + - name: Check out project + if: github.event_name != 'pull_request_target' + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Build documentation + run: yarn build:docs + + - name: Upload documentation + if: always() + run: node .github/upload-preview.js packages/react-docs/public + + - name: Run accessibility tests + run: yarn serve:docs & yarn test:a11y + + - name: Upload accessibility results + if: always() + run: node .github/upload-preview.js packages/react-docs/coverage diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml index 3a436d5cf22..3f5632da74f 100644 --- a/.github/workflows/extensions.yml +++ b/.github/workflows/extensions.yml @@ -1,17 +1,15 @@ name: Add relevant issues to extensions project board - on: issues: types: - labeled - jobs: add-to-extensions: if: github.event.label.name == 'extension' name: Add issue to extensions board runs-on: ubuntu-latest steps: - - uses: actions/add-to-project@v0.3.0 + - uses: actions/add-to-project@v1.0.2 with: project-url: https://github.com/orgs/patternfly/projects/12 github-token: ${{ secrets.GH_PROJECTS }} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000000..64ccb220488 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,99 @@ +name: CI +on: + pull_request: + workflow_call: +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up project + uses: ./.github/actions/setup-project + with: + skip-build: true + + - uses: actions/cache@v4 + name: Cache files proccesed by ESLint + with: + path: .eslintcache + key: ${{ runner.os }}-eslint-cache + + - name: Run linter + run: yarn lint:all + + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + unit-tests: + name: Unit tests + runs-on: ubuntu-latest + needs: build + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Run tests + run: yarn test --maxWorkers=2 + + demo-app: + name: Build demo app + runs-on: ubuntu-latest + needs: build + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Build demo app + run: yarn build:integration + + - name: Upload demo app + uses: actions/upload-artifact@v4 + with: + name: demo-app + path: packages/react-integration/demo-app-ts/dist + + integration-tests: + name: Integration tests + runs-on: ubuntu-latest + needs: demo-app + strategy: + fail-fast: false + matrix: + worker: [0, 1, 2, 3, 4] + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Download demo app + uses: actions/download-artifact@v4 + with: + name: demo-app + path: packages/react-integration/demo-app-ts/dist + + - name: Print environment variables + run: printenv + + - name: Run Cypress tests + run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) + env: + WORKER_NUM: ${{ matrix.worker }} + WORKER_COUNT: 5 diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml deleted file mode 100644 index 2f400db2655..00000000000 --- a/.github/workflows/pr-preview.yml +++ /dev/null @@ -1,308 +0,0 @@ -### WARNING -- this file was generated by generate-workflows.js -name: build-test-deploy -on: pull_request_target -jobs: - build: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - lint: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: lint-cache - name: Load lint cache - with: - path: '.eslintcache' - key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: ESLint - run: yarn lint:ts - - name: MDLint - run: yarn lint:md - - name: '@patternfly/patternfly versions match' - run: yarn lint:versions - test_jest: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: PF4 Jest Tests - run: yarn test --maxWorkers=2 - docs: - runs-on: ubuntu-latest - needs: build - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: docs-cache - name: Cache webpack - with: - path: '.cache' - key: ${{ runner.os }}-v4-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: Build docs - run: yarn build:docs - - name: Upload docs - run: node .github/upload-preview.js packages/react-docs/public - if: always() - - name: a11y tests - run: yarn serve:docs & yarn test:a11y - - name: Upload a11y results - run: node .github/upload-preview.js packages/react-docs/coverage - if: always() - demo_app: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Build demo app - run: yarn build:integration - - name: Upload demo app - uses: actions/upload-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - test_integration: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: demo_app - strategy: - fail-fast: false - matrix: - worker_num: [0, 1, 2, 3, 4] - worker_count: [5] - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Download demo app - uses: actions/download-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - - run: printenv - - name: Cypress tests - run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) - env: - WORKER_NUM: ${{ matrix.worker_num }} - WORKER_COUNT: ${{ matrix.worker_count }} - diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml new file mode 100644 index 00000000000..7d85ee4d25f --- /dev/null +++ b/.github/workflows/promote.yml @@ -0,0 +1,27 @@ +name: Promote +on: + workflow_dispatch: + inputs: + patternfly-version: + description: The version of PatternFly (`@patternfly/patternfly`) to promote to. + required: false +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Check out project + uses: actions/checkout@v4 + with: + # Pass in an administrator token to get around branch protection. + token: ${{ secrets.GH_TOKEN_REDALLEN }} + + - name: Set up and build project + uses: ./.github/actions/setup-project + with: + skip-build-cache: true + + - name: Deploy to NPM and Github + run: .github/promote.sh + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + PATTERNFLY_VERSION: ${{ github.event.inputs.patternfly-version }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b5c767bb398..9ba64a896cd 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,356 +1,41 @@ -### WARNING -- this file was generated by generate-workflows.js -name: release +name: Release on: push: branches: - v5 +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true jobs: - build: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - lint: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: lint-cache - name: Load lint cache - with: - path: '.eslintcache' - key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: ESLint - run: yarn lint:ts - - name: MDLint - run: yarn lint:md - - name: '@patternfly/patternfly versions match' - run: yarn lint:versions - test_jest: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: PF4 Jest Tests - run: yarn test --maxWorkers=2 + ci: + name: CI + uses: ./.github/workflows/main.yml + docs: - runs-on: ubuntu-latest - needs: build - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: docs-cache - name: Cache webpack - with: - path: '.cache' - key: ${{ runner.os }}-v4-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: Build docs - run: yarn build:docs - - name: Upload docs - run: node .github/upload-preview.js packages/react-docs/public - if: always() - - name: a11y tests - run: yarn serve:docs & yarn test:a11y - - name: Upload a11y results - run: node .github/upload-preview.js packages/react-docs/coverage - if: always() - demo_app: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Build demo app - run: yarn build:integration - - name: Upload demo app - uses: actions/upload-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - test_integration: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: demo_app - strategy: - fail-fast: false - matrix: - worker_num: [0, 1, 2, 3, 4] - worker_count: [5] - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Download demo app - uses: actions/download-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - - run: printenv - - name: Cypress tests - run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) - env: - WORKER_NUM: ${{ matrix.worker_num }} - WORKER_COUNT: ${{ matrix.worker_count }} + name: Documentation + uses: ./.github/workflows/documentation.yml + secrets: inherit + deploy: + name: Deploy release runs-on: ubuntu-latest - needs: [lint, test_jest, docs, test_integration] - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - GH_TOKEN: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} + needs: [ci, docs] steps: - - uses: actions/checkout@v2 - with: - token: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - fetch-depth: "0" - - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* - - uses: actions/setup-node@v1 + - name: Check out project + uses: actions/checkout@v4 with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist + # Fetch all history for all branches and tags, which is needed for the release script. + fetch-depth: 0 + # Pass in an administrator token to get around branch protection. + token: ${{ secrets.GH_TOKEN_REDALLEN }} + + - name: Set up and build project + uses: ./.github/actions/setup-project with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' + skip-build-cache: true + - name: Deploy to NPM and Github run: .github/release.sh - + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000000..3a5e987e7a4 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,16 @@ +name: Mark stale issues and PRs +on: + schedule: + - cron: 37 11 * * * +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v9 + with: + days-before-stale: 60 + days-before-close: -1 + exempt-issue-labels: accessibility,breaking change :boom:,security,pinned + stale-issue-label: stale + stale-issue-message: This issue has been automatically marked as stale because it has not had recent activity. + stale-pr-message: This PR has been automatically marked as stale because it has not had recent activity. diff --git a/.github/workflows/triage-stale-issues.yml b/.github/workflows/triage-stale-issues.yml new file mode 100644 index 00000000000..319eb3bcc03 --- /dev/null +++ b/.github/workflows/triage-stale-issues.yml @@ -0,0 +1,18 @@ +name: Move stale issues back to triage +on: + issues: + types: + - labeled +jobs: + update-status: + if: github.event.label.name == 'stale' + runs-on: ubuntu-latest + steps: + - uses: github/update-project-action@v3 + with: + github_token: ${{ secrets.GH_PROJECTS }} + organization: patternfly + project_number: 7 + content_id: ${{ github.event.issue.id }} + field: Status + value: Needs triage diff --git a/.gitignore b/.gitignore index ac4282c4b23..07168936c32 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ lerna-debug.log .vscode # For vim *.swp +.yarn diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000000..081c653b345 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +yarn exec lint-staged diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 00000000000..3186f3f0795 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/ADVANCED-USAGE-README.md b/ADVANCED-USAGE-README.md deleted file mode 100644 index 24df57f3834..00000000000 --- a/ADVANCED-USAGE-README.md +++ /dev/null @@ -1,8 +0,0 @@ -# PatternFly React -This README covers advanced usage topics for PatternFly React users. - -### Table of contents -1. [Applying Overpass Font](#Applying-Overpass-font) - -## Applying Overpass font -If you would like to use Overpass instead of the Red Hat font, simply add the class `.pf-m-overpass-font` to an element that wraps your application (ideally `` or ``) to adopt the CSS changes that would allow opting in to the Overpass font. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 634541c4167..a97a77bec58 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,6 @@ # Contributing to PatternFly React -> ### Looking for a quick guide to PatternFly 3 React Contribution? [Go Here](https://github.com/patternfly/patternfly-react/blob/patternfly-3/packages/patternfly-react/CONTRIBUTING.md) -> -> ### Looking for a quick guide to PatternFly 4 React Contribution? [Go Here](./packages/react-core/CONTRIBUTING.md) +> ### Looking for a quick guide to PatternFly React Contribution? [Go Here](./packages/react-core/CONTRIBUTING.md) ## Outline @@ -26,34 +24,31 @@ - [How do I lose maintainers status?](#how-do-i-lose-maintainers-status) - [Quick Tips for New Maintainers](#quick-tips-for-new-maintainers) -## Code of Conduct +## Code of conduct -This project is governed by the [Contributor Covenant version 1.4][1]. All contributors and participants +This project is governed by the [Contributor Covenant version 2.1][1]. All contributors and participants agree to abide by its terms. To report violations, send an email to [patternfly@redhat.com][2]. -## Issues and Project Board +## Issues and project board -We use issues to track work items, such as bug reports and feature requests. Issues can be found in the [issue tracker](https://github.com/patternfly/patternfly-react/issues) or [project board](https://github.com/patternfly/patternfly-react/projects/1). We use the project board to help visualize and manage status of an issue, and we use labels to help prioritize and identify issues. +We use issues to track work items, such as bug reports and feature requests. Issues can be found in the [issue tracker](https://github.com/patternfly/patternfly-react/issues) or [project board](https://github.com/orgs/patternfly/projects/7). We use the project board to help visualize and manage status of an issue, and we use labels to help prioritize and identify issues. -### Issue Labels +### Issue labels Our issue tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them: - `bug` - A bug is a _demonstrable problem_ that is caused by the code in the repository. Please check if the issue has already been reported before reporting a new bug. -- `duplicate` - A duplicate signifies that another issue encapsulates or restates this issue. Duplicates will be closed and referenced as such. -- `enhancement` - An enhancement is a feature request. Please provide as much detail as possible and consider whether your idea fits the scope and aims of this project. +- `DevX` - Suggest an enhancement to the developer experience (DX). DX enhancements improve experience for those building UIs with PatternFly, but have little to know end user impact. +- `Feature` - Suggest a new feature for PatternFly. Features augment or impact end user experience and requires design input. - `breaking change` - this issue warrants a major release and potentially changes APIs for downstream consumers. -- `chore` - this issue improves internal tooling or build processes only. +- `Tech debt` - Improvements to code that do not affect either user or product developers’ experiences. - `documentation` - this issue affects documentation only. - `css` - this issue affects CSS or has stylistic changes. - `good first issue` - Issues that are ideal for new contributors. -- `help wanted` - Issues we need or would love help from the community to resolve. -- `pending response` - This label indicates that the issue is awaiting reply from a contributor or a maintainer. -- `question` - Use the question label to indicate you are having a problem with something and would like feedback from the community. - `wontfix` - The issue is legitimate, but it is not something the team is currently able or willing to fix or implement. Issues with this label may be revisited in the future. - `p1`, `p2`, `p3` - These are priority labels. -### PR Labels +### PR labels Since the components in patternfly-react are based on patternfly, we want to make sure these components stay in sync with the core patternfly components as documented on [patternfly.org](http://www.patternfly.org/pattern-library/). To help make sure component contributions are consistent with the [design documentation](http://www.patternfly.org/pattern-library/) and [html/css implementation](https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/), we use the following labels during the PR review process. @@ -62,30 +57,21 @@ Since the components in patternfly-react are based on patternfly, we want to mak - `css approved` - The issue has been reviewed and approved by a member of the css team. - `ux approved` - The issue has been reviewed and approved by a member of the ux team. -The following labels also can be used to improve PatternFly React's [CHANGELOG.md](./CHANGELOG.md) when submitting PRs: - -- `bug` - this PR resolves a bug issue. Releasing will cause a patch level semantic version change. -- `enhancement` - this PR adds a new feature and closes an `enhancement` issue. Releasing will cause a minor semantic version change. -- `breaking change` - this PR warrants a major release and potentially changes APIs for downstream consumers. Releasing will cause a major semantic version change. -- `chore` - this PR improves internal tooling or build processes only. These PRs do not effect release. -- `documentation` - this PR affects documentation only. These PRs do not effect release. -- `css` - this PR affects CSS or has minimal stylistic changes. Releasing will cause a patch level semantic version change. - -### Project Board Columns +### Project board columns The project board uses the following columns to track issues: - `Backlog` - Issues that are ready to be worked and available for any contributor to take. -- `Needs CSS/Design/Research` - Issues that require any work that would be completed outside of this repo related to css, design or research. For example some component contributions will require updates to css in the core [patternfly](https://github.com/patternfly/patternfly) repo. -- `Assigned` - Issues that are ready to be worked and are already assigned. +- `Needs info` - Issues that require any work that would be completed outside of this repo related to css, design or research. For example some component contributions will require updates to css in the core [patternfly](https://github.com/patternfly/patternfly) repo. +- `Not started` - Issues that are ready to be worked and are already assigned. - `In Progress` - Issues that are actively being worked. - `PR in Review` - Issues for which a PR is open and are ready for review. Issues can be manually added to the project board from either the issue page or the project board page. -## Contribution Process +## Contribution process -### Creating Issues for Bugs +### Creating issues for bugs If you find a bug within the repo, please help us track the issue by following these steps: @@ -95,7 +81,7 @@ If you find a bug within the repo, please help us track the issue by following t - Provide details like what component is affected, steps to reproduce, and any other information that is critical to addressing the issue - Assign the label “bug” to the issue -### Creating Issues for New Components +### Creating issues for new components To create an issue for adding a new component to the repo, please observe the following process: @@ -103,14 +89,14 @@ To create an issue for adding a new component to the repo, please observe the fo 2. If the component exists in PatternFly core (meaning CSS and the pattern design exists), then create an issue with the following details: - Assign the label `enhancement` to the issue - Include the text “Component -“ in the beginning of the title if the issue captures a new component - - If the component is documented as a [PatternFly Library Pattern](http://www.patternfly.org/pattern-library/), include a link to it. + - If the component is documented as a [PatternFly library pattern](http://www.patternfly.org/pattern-library/), include a link to it. 3. If a component is not in PatternFly, but you feel it would be a good addition to the library, please do the following: - Open a new GitHub issue and tag it with the Extension label - Reach out on the patternfly-react channel on slack, the mailing list or the forum to see if the issue is approved as an extension - If it is approved, direction will be given as to which package it will go in. Generally, we are recommending most extension components go in individual packages. Several smaller common components may end up being grouped together. In the future, a generator for extension component packages will be created. - 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. -### Contributing Components +### Contributing components Components that are ready to be contributed can be found on the project board in the backlog column. They are identified with the text “Component” in the issue title. @@ -125,7 +111,7 @@ Once you’ve identified a component to contribute, component contributions shou If you submit a pull request, then please also contribute by reviewing other pull requests. Please remember that reviewing other contributions is just as important! -### Adding Styling for your Components +### Adding styling for your components Ideally, all the styles that are needed for the components in patternfly-react would be defined in the core [patternfly](https://github.com/patternfly/patternfly) repo. However, there may be cases where additional styles are needed to complete the patternfly-react component contribution. In the case where the styles are specific to the component implementation in the patternfly-react repo, then the styles would remain in the repo. In the case where the component does not exist yet in the core pattenrfly repo and styles are needed for the component in the patternfly-react repo, then the styles would only remain in the patternfly-react repo until the component is added to the core patternfly repo. Once the styles are available as part of core patternfly repo, it will be removed from the patternfly-react repo. @@ -138,13 +124,13 @@ Inside the package directory: - Add a Sass file to the `sass/patternfly-react/` directory and use the file name `_.scss` - Import the Sass file into `sass/patternfly-react/_patternfly-react.scss` using `@import "";` -### Using Generators +### Using generators To make contributing components and packages easier a generator utility has been provided. To start the generator run: -```bash +```sh yarn generate ``` @@ -152,13 +138,12 @@ Follow the prompts to generate the desired component or package. Currently the following generators are provided -- PatternFly 4 Component -- PatternFly 3 Component (only available on the `patternfly-3` branch, see [this guide](https://github.com/patternfly/patternfly-react/blob/patternfly-3/packages/patternfly-react/CONTRIBUTING.md)) +- PatternFly component - Package -## Guidelines and Requirements +## Guidelines and requirements -### React Component Requirements +### React component requirements Please ensure that all React UI components contributed meet the following guidelines: @@ -168,10 +153,10 @@ Please ensure that all React UI components contributed meet the following guidel - Provide associated examples for documentation in the examples directory for the component. - Provide a [jest snapshot test](https://facebook.github.io/jest/docs/snapshot-testing.html) to ensure your UI markup does not change unexpectedly. - Ensure the component's rendered design and documentation examples meet [PatternFly design standard](https://github.com/patternfly/patternfly-design). - **Note:** If your component does not yet have PatternFly design documentation, the PatternFly React design team will first confirm that the pattern passes the [PatternFly Decision Tree](https://github.com/patternfly/patternfly-design/blob/master/resources/decision-tree/PatternflyDecisionTree.pdf) and then start the process for generating design documentation. + **Note:** If your component does not yet have PatternFly design documentation, the PatternFly React design team will first confirm that the pattern passes the [PatternFly decision tree](https://github.com/patternfly/patternfly-design/blob/master/resources/decision-tree/PatternflyDecisionTree.pdf) and then start the process for generating design documentation. - Ensure the code is properly formatted and there are no linting errors. PatternFly React uses custom eslint configuration based on [Javascript Standard Style](https://standardjs.com/) and [Prettier](https://github.com/prettier/prettier) for code formatting. You can automatically format your code with `yarn prettier` and run the project's linter with `yarn lint`. -### Code Consistency +### Code consistency - All files and folders under your package's `src/components` should name with PascalCase except `index.js` files - If you need a constant file, it should be called `{Component_Name}Constants.js` (Component_Name with PascalCase) @@ -188,15 +173,15 @@ Please ensure that all React UI components contributed meet the following guidel See how to write documentation in the [`react-docs` README](./packages/react-docs/README.md) - When destructuring or spreading expressions , use ...props as the variable name. - **Please see the [Getting Started Readme](./GETTING-STARTED.md) for additional information in getting started with building PatterFly 4 react components.** + **Please see the [getting started README](./GETTING-STARTED.md) for additional information in getting started with building PatterFly react components.** -### Code Contribution Guidelines +### Code contribution guidelines Adhering to the following process is the best way to get your work included in the project: -1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: +1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: -```bash +```sh # Clone your fork of the repo into the current directory git clone https://github.com//patternfly-react.git # Navigate to the newly cloned directory @@ -207,20 +192,29 @@ git remote add upstream https://github.com/patternfly/patternfly-react.git git fetch upstream ``` -2. Create a branch: +2. Set up tooling -```text -$ git checkout -b my-branch upstream/main +[Install Node.js](https://nodejs.org/en/download/package-manager) version 20 (or higher), and make sure to [enable Corepack](https://nodejs.org/api/corepack.html). Then install the project dependencies and build it by running: + +```sh +yarn install +yarn build ``` -3. Generate your Component +3. Create a branch: -```bash +```sh +git checkout -b my-branch upstream/main +``` + +4. Generate your component + +```sh # Run the tool to Generate the component scaffolding yarn generate ``` -- When you select the option to generate a PatternFly 4 component, a structure resembling the following is generated +- When you select the option to generate a PatternFly component, a structure resembling the following is generated ```text packages/react-core/src/[type]/[ComponentName]/ index.js - Barrel File exporting public exports @@ -229,37 +223,37 @@ $ git checkout -b my-branch upstream/main ComponentName.md - Component Docs ``` -4. Develop your component. After development is complete, run build and ensure tests and lint standards pass. +5. Develop your component. After development is complete, run build and ensure tests and lint standards pass. -```text -$ yarn build -$ yarn test +```sh +yarn build +yarn test ``` Ensure no lint errors are introduced in `yarn-error.log` after running this command. ***Note to Windows users:*** you may need to change the path for the lint script in package.json to be `node_modules/eslint/bin/eslint` -5. Add a commit using `git commit`: +6. Add a commit using `git commit`: This project uses [`lerna`](https://lernajs.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages. -6. Rebase +7. Rebase Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit). -```text -$ git fetch upstream -$ git rebase upstream/main +```sh +git fetch upstream +git rebase upstream/main ``` -7. Push +8. Push -```text -$ git push origin my-branch +```sh +git push origin my-branch ``` -8. Create a Pull Request +9. Create a pull request [Open a pull request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `main` branch. Please be sure to include all of the following in your PR: @@ -273,7 +267,7 @@ Once your pull request has been reviewed, if all conditions above have been met Please help in ensuring all relevant issues are closed and that any subsequent issues needed have been noted with this pull request. -### Guidelines for React implementation from Core +### Guidelines for React implementation from core - PF-React components should demonstrate all states implemented in Core without adding any new states. - If a new state is introduced in PF-React, it should not be accepted by the reviewer until an issue is created explaining why this example/modification is needed in Core and PF-React. Tag a UX/UI designer. @@ -282,7 +276,7 @@ Please help in ensuring all relevant issues are closed and that any subsequent i - If an issue in Core will affect a component in PF-React, this issue should link to the main PF-React issue. - The CSS Developers and UX Designers should be tagged to review their respective PF-React issue. -## Becoming a Maintainer +## Becoming a maintainer The documentation for becoming a maintainer has been taken from [Foreman](https://theforeman.org/handbook.html#Becomingamaintainer) and adapted for the PatternFly project. @@ -333,6 +327,7 @@ The process for revoking someone's maintainer status is a discussion limited to - Do not merge commits blindly. If you do not fully understand a pull request, ask existing maintainers to take a look - Do not merge if the build is failing. Wait until tests are green to merge. -[1]: http://contributor-covenant.org/version/1/4/code-of-conduct.md +[1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct/ [2]: mailto:patternfly@redhat.com [3]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type + diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 1b12f973a3c..abd574d3573 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -38,7 +38,3 @@ PatternFly React has 3 linters you can run all at once using `yarn lint:all`. Th ### ESLint ESLint is run on .js, .jsx, .ts, and .tsx files. It uses the [@typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) parser with custom config added over the years. We write some of our own ESLint rules in `eslint-plugin-patternfly-react`. You can run this linter with `yarn lint:ts` or on specific files with `yarn lint `. - -### Version lint - -The `@patternfly` version linter is run on all `package.json` files to ensure that versions of all `@patternfly/*` packages match. This is done to prevent mismatching versions of essential PatternFly packages from accidentally being published. You can run this linter with `yarn lint:versions`. diff --git a/README.md b/README.md index 8093bd8d2fd..dd5d1c588a6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # PatternFly React [![lerna](https://img.shields.io/badge/maintained%20with-lerna-green.svg?style=for-the-badge)](https://lernajs.io/) -[![PatternFly 4 npm badge](https://img.shields.io/npm/v/@patternfly/react-core.svg?label=PF4%20Core&style=for-the-badge)](https://www.npmjs.com/package/@patternfly/react-core) +[![PatternFly npm badge](https://img.shields.io/npm/v/@patternfly/react-core.svg?label=PF%20Core&style=for-the-badge)](https://www.npmjs.com/package/@patternfly/react-core) This project provides a set of React components for the [PatternFly project](https://patternfly.org). @@ -11,9 +11,9 @@ This project provides a set of React components for the [PatternFly project](htt 1. [PatternFly React packages](#patternfly-react-packages) 2. [Setup](#Setup) 3. [Contribution guidelines](#Contribution-guidelines) -4. [License](#License) +4. [License](#License) -Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md). +Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md). ### PatternFly React packages @@ -26,27 +26,26 @@ Using PatternFly 3? Take a look at the [PatternFly 3 React component informatio |   [@patternfly/react-icons](./packages/react-icons/README.md) | Icon components | |   [@patternfly/react-styles](./packages/react-styles/README.md) | PatternFly CSS styles | |   [@patternfly/react-tokens](./packages/react-tokens/README.md) | PatternFly CSS variable tokens | -| **:yellow_heart: Extension packages** *UXD supported* | +| **:yellow_heart: Extension packages** | |   [@patternfly/react-log-viewer](https://github.com/patternfly/react-log-viewer/README.md) | Virtualized log viewer component | +|   [@patternfly/react-catalog-view-extension](https://github.com/patternfly/react-catalog-view/README.md) | Catalog view extension | +|   [@patternfly/react-topology](https://github.com/patternfly/react-topology/README.md) | Topology components | | **:open_file_folder: Supporting packages** | |   [@patternfly/react-docs](./packages/react-docs/README.md) | Gatsby documentation site for components | |   [@patternfly/react-integration](./packages/react-integration/README.md) | Cypress integration tests | -| **:family: Extension packages** *community supported* | -|   [@patternfly/react-catalog-view-extension](./packages/react-catalog-view-extension/README.md) | Catalog view extension | -|   [@patternfly/react-virtualized-extension](./packages/react-virtualized-extension/README.md) | Table and list row virtualization extension | -|   [@patternfly/react-topology](./packages/react-topology/README.md) | Topology components | | **:x: Deprecated packages** | |   [@patternfly/react-inline-edit-extension](./packages/react-inline-edit-extension/README.md) | Table inline edit extension | +|   [@patternfly/react-virtualized-extension](https://github.com/patternfly/react-virtualized-extension/README.md) | Table and list row virtualization extension | ### Setup -Before you begin, check out this [overview of PatternFly](http://patternfly.org/v4/get-started/about) to get familiar with the basic elements of the design system. +Before you begin, check out this [overview of PatternFly](http://patternfly.org/get-started/about) to get familiar with the basic elements of the design system. #### Install a package manager Install a package manager before using the PatternFly libraries. -* [Use npm](https://nodejs.org/en/download) -* [Use Yarn](https://yarnpkg.com/en/docs/getting-started) +* [Use npm](https://nodejs.org/en/download/package-manager) +* [Use Yarn](https://yarnpkg.com/getting-started/install) #### Start with PatternFly React seed @@ -82,7 +81,8 @@ If you want to start with your existing project, skip to [Install and configure Once the library is installed, use the specific setup instructions for that library to access the components it contains. These can be found in the readme for each [library](#patternfly-react-packages). ### Contribution guidelines -All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/v4/contribute/about). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions. +All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/get-started/contribute/contributing-to-patternfly). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions. ### License PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE). + diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md deleted file mode 120000 index 9a251f8b3f6..00000000000 --- a/RELEASE-NOTES.md +++ /dev/null @@ -1 +0,0 @@ -packages/react-docs/RELEASE-NOTES.md \ No newline at end of file diff --git a/UPGRADE-GUIDE.md b/UPGRADE-GUIDE.md deleted file mode 120000 index 270cde92801..00000000000 --- a/UPGRADE-GUIDE.md +++ /dev/null @@ -1 +0,0 @@ -packages/react-docs/UPGRADE-GUIDE.md \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index c03fd5c5ab3..a5caef7249f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,20 +1,4 @@ module.exports = { - presets: [ - [ - '@babel/preset-env', - { - targets: { - esmodules: true - } - } - ], - '@babel/preset-typescript', - '@babel/preset-react' - ], - plugins: [ - ['@babel/plugin-proposal-decorators', { legacy: true }], - '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-object-rest-spread' - ] + presets: ['@babel/preset-typescript', '@babel/preset-react'], + plugins: ['@babel/plugin-transform-modules-commonjs'] }; diff --git a/eslint.config-md.mjs b/eslint.config-md.mjs new file mode 100644 index 00000000000..f7dc3aab756 --- /dev/null +++ b/eslint.config-md.mjs @@ -0,0 +1,33 @@ +import markdown from 'eslint-plugin-markdown'; +import patternflyReact from 'eslint-plugin-patternfly-react'; +import react from 'eslint-plugin-react'; +import tseslint from 'typescript-eslint'; + +export default [ + ...markdown.configs.recommended, + { + plugins: { + react, + 'patternfly-react': patternflyReact + }, + languageOptions: { + parser: tseslint.parser + }, + settings: { + react: { + version: 'detect' + } + }, + rules: { + 'eol-last': 'error', + 'spaced-comment': 'error', + 'no-unused-vars': 'off', + 'no-this-before-super': 'error', + 'patternfly-react/import-tokens-icons': 'error', + 'react/jsx-uses-react': 'error', + 'react/jsx-uses-vars': 'error', + 'react/no-unknown-property': 'error', + 'react/jsx-no-undef': 'error' + } + } +]; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000000..122bfe7aefc --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,158 @@ +import { fixupPluginRules } from '@eslint/compat'; +import js from '@eslint/js'; +import patternflyReact from 'eslint-plugin-patternfly-react'; +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRecommended from 'eslint-plugin-react/configs/recommended.js'; +import testingLibrary from 'eslint-plugin-testing-library'; +import globals from 'globals'; +import tseslint from 'typescript-eslint'; + +export default [ + { + ignores: [ + '**/dist', + '**/css', + 'packages/react-core/src/helpers/Popper/thirdparty', + 'packages/react-docs/patternfly-docs/generated', + 'packages/react-docs/static', + '**/.cache', + '.history' + ] + }, + js.configs.recommended, + ...tseslint.configs.recommended, + reactRecommended, + eslintPluginPrettierRecommended, + { + plugins: { + 'patternfly-react': fixupPluginRules(patternflyReact), + 'react-hooks': fixupPluginRules(reactHooks) + }, + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + ...globals.jest + } + }, + settings: { + react: { + version: 'detect' + } + }, + rules: { + ...reactHooks.configs.recommended.rules, + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/adjacent-overload-signatures': 'error', + '@typescript-eslint/array-type': 'error', + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/consistent-type-assertions': 'error', + '@typescript-eslint/consistent-type-definitions': 'error', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/no-duplicate-enum-values': 'off', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/no-misused-new': 'error', + '@typescript-eslint/no-namespace': 'error', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_' + } + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/prefer-for-of': 'error', + '@typescript-eslint/prefer-function-type': 'error', + '@typescript-eslint/prefer-namespace-keyword': 'error', + '@typescript-eslint/unified-signatures': 'error', + '@typescript-eslint/explicit-function-return-type': 'off', + 'arrow-body-style': 'error', + camelcase: [ + 'error', + { + ignoreDestructuring: true + } + ], + 'constructor-super': 'error', + curly: 'error', + 'dot-notation': 'error', + eqeqeq: ['error', 'smart'], + 'guard-for-in': 'error', + 'max-classes-per-file': ['error', 1], + 'max-len': 'off', + 'no-nested-ternary': 'error', + 'no-bitwise': 'error', + 'no-caller': 'error', + 'no-cond-assign': 'error', + 'no-console': 'error', + 'no-debugger': 'error', + 'no-empty': 'error', + 'no-eval': 'error', + 'no-new-wrappers': 'error', + 'no-prototype-builtins': 'off', + 'no-shadow': 'off', + 'no-throw-literal': 'error', + 'no-trailing-spaces': 'off', + 'no-undef-init': 'error', + 'no-constant-binary-expression': 'off', + 'no-unsafe-finally': 'error', + 'no-unused-expressions': [ + 'error', + { + allowTernary: true, + allowShortCircuit: true + } + ], + 'no-unused-labels': 'error', + 'no-var': 'error', + 'object-shorthand': 'error', + 'one-var': ['error', 'never'], + 'patternfly-react/import-tokens-icons': 'error', + 'patternfly-react/no-anonymous-functions': 'error', + 'prefer-const': 'error', + radix: ['error', 'as-needed'], + 'react/prop-types': 0, + 'react/display-name': 0, + 'react-hooks/exhaustive-deps': 'warn', + 'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }], + 'spaced-comment': 'error', + 'use-isnan': 'error', + 'patternfly-react/no-layout-effect': 'error', + 'valid-typeof': 'off' + } + }, + { + files: ['**/examples/*', '**/demos/examples/**/*'], + rules: { + 'patternfly-react/no-anonymous-functions': 'off' + } + }, + { + files: ['**/*.test.[jt]s?(x)'], + plugins: { + 'testing-library': fixupPluginRules(testingLibrary) + }, + rules: { + ...testingLibrary.configs.react.rules, + '@typescript-eslint/no-unused-vars': 'off', + 'testing-library/no-node-access': 'off', + 'react/jsx-key': 'off', + 'react/no-children-prop': 'off', + 'no-console': 'off' + } + }, + { + files: ['packages/react-integration/demo-app-ts/**/*'], + rules: { + 'patternfly-react/no-anonymous-functions': 'off', + 'react/react-in-jsx-scope': 'off', + 'spaced-comment': 'off' + } + } +]; diff --git a/jest.config.js b/jest.config.ts similarity index 65% rename from jest.config.js rename to jest.config.ts index 4e28a21b5ff..b6a1f1535bd 100644 --- a/jest.config.js +++ b/jest.config.ts @@ -1,4 +1,10 @@ -module.exports = { +/** + * For a detailed explanation regarding each configuration property, visit: + * https://jestjs.io/docs/configuration + */ +import type { Config } from 'jest'; + +const config: Config = { collectCoverage: true, coverageReporters: ['lcov'], clearMocks: true, @@ -10,14 +16,17 @@ module.exports = { ], roots: ['/packages'], transform: { - '^.+\\.[jt]sx?$': 'babel-jest' + '^.+\\.m?[jt]sx?$': 'babel-jest', + '^.+\\.svg$': 'jest-transform-stub' }, setupFilesAfterEnv: ['/packages/testSetup.ts'], - transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'], testPathIgnorePatterns: ['/packages/react-integration/'], + transformIgnorePatterns: ['node_modules/victory-*/'], coveragePathIgnorePatterns: ['/dist/'], moduleNameMapper: { '\\.(css|less)$': '/packages/react-styles/__mocks__/styleMock.js' }, testEnvironment: 'jsdom' }; + +export default config; diff --git a/lerna.json b/lerna.json index 4df87945901..69ac0a90549 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,4 @@ { - "lerna": "3.10.5", "npmClient": "yarn", "publishConfig": { "access": "public", @@ -25,6 +24,7 @@ } }, "version": "independent", - "useWorkspaces": true, - "allowBranch": ["main", "v5"] + "allowBranch": ["main", "v4", "5.0.x", "v5"], + "packages": ["packages/*", "packages/react-integration/demo-app-ts"], + "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 9e4b472f057..9762ad44be4 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ "url": "https://github.com/patternfly/patternfly-react.git" }, "engines": { - "node": ">=18.0.0", - "yarn": ">=1.6.0" + "node": ">=20.17.0" }, + "packageManager": "yarn@4.5.1", "keywords": [ "react", "patternfly", @@ -24,72 +24,82 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "devDependencies": { - "@babel/core": "^7.20.12", - "@babel/plugin-proposal-class-properties": "^7.0.0", - "@babel/plugin-proposal-decorators": "^7.8.3", - "@babel/plugin-proposal-object-rest-spread": "^7.0.0", - "@babel/plugin-proposal-optional-chaining": "^7.9.0", - "@babel/plugin-proposal-private-methods": "^7.18.6", - "@babel/plugin-proposal-private-property-in-object": "^7.18.6", - "@babel/preset-env": "^7.0.0", - "@babel/preset-react": "^7.0.0", - "@babel/preset-typescript": "^7.9.0", - "@octokit/rest": "^19.0.5", - "@testing-library/jest-dom": "^5.16.2", - "@testing-library/react": "^13.4.0", - "@testing-library/react-hooks": "^8.0.1", - "@testing-library/user-event": "14.4.3", - "@types/jest": "27.0.2", - "@types/react": "^18", - "@types/react-dom": "^18", - "@typescript-eslint/eslint-plugin": "^5.50.0", - "@typescript-eslint/parser": "^5.50.0", - "babel-jest": "^27.2.5", - "concurrently": "^5.3.0", - "eslint": "^8.33.0", - "eslint-plugin-markdown": "^1.0.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.32.2", - "fs-extra": "^6.0.1", - "glob": "^7.1.2", - "husky": "^4.3.0", - "jest": "27.2.5", - "jest-cli": "27.2.5", - "lerna": "^6.4.1", - "lint-staged": "^10.4.2", + "@babel/core": "^7.24.7", + "@babel/plugin-transform-modules-commonjs": "^7.24.7", + "@babel/preset-react": "^7.24.7", + "@babel/preset-typescript": "^7.24.7", + "@eslint/compat": "^1.2.3", + "@eslint/js": "^9.11.1", + "@octokit/rest": "^20.1.1", + "@rollup/plugin-commonjs": "^26.0.3", + "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-replace": "^5.0.7", + "@rollup/plugin-terser": "^0.4.4", + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.0.1", + "@testing-library/user-event": "^14.5.2", + "@types/jest": "29.5.14", + "@types/node": "^20.16.9", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "babel-jest": "^29.7.0", + "concurrently": "^8.2.2", + "eslint": "^9.11.1", + "eslint-plugin-markdown": "^5.1.0", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-react": "^7.37.2", + "eslint-plugin-testing-library": "^6.5.0", + "fs-extra": "^11.2.0", + "glob": "^10.4.5", + "globals": "^15.12.0", + "husky": "^9.1.7", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jest-transform-stub": "^2.0.0", + "lerna": "^8.1.9", + "lint-staged": "^15.2.10", "mutation-observer": "^1.0.3", - "plop": "^2.0.0", - "prettier": "^2.8.3", - "react": "^18", - "react-dom": "^18", - "surge": "^0.23.1", - "ts-patch": "^1.4.2", - "typescript": "^4.7.4" + "plop": "^4.0.1", + "prettier": "^3.3.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "rimraf": "^5.0.10", + "rollup": "^4.27.3", + "rollup-plugin-scss": "^4.0.0", + "rollup-plugin-svg": "^2.0.0", + "sass": "^1.81.0", + "surge": "^0.24.6", + "ts-node": "^10.9.2", + "ts-patch": "^3.2.1", + "typescript": "^5.4.5", + "typescript-eslint": "^7.18.0" }, "scripts": { - "build": "yarn build:generate && yarn build:esm && yarn build:subpaths && yarn build:cjs", + "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:cjs && yarn build:subpaths && yarn build:single:packages", "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json", "build:esm": "tsc --build --verbose packages/tsconfig.json", - "build:integration": "lerna run build:demo-app --stream", + "build:integration": "lerna run build --scope=demo-app-ts --stream", "build:docs": "yarn workspace @patternfly/react-docs build:docs", "build:generate": "lerna run generate --parallel --stream", "build:subpaths": "lerna run subpaths --parallel --stream", "build:umd": "lerna run build:umd --parallel --stream", + "build:single:packages": "lerna run build:single:packages", "clean": "yarn clean:build && lerna run clean --parallel", "clean:build": "rimraf .cache .eslintcache coverage", + "clean:exports": "lerna run clean:exports --parallel --stream", "generate": "yarn plop", - "lint": "node --max-old-space-size=4096 node_modules/.bin/eslint --ext js,jsx,ts,tsx --cache", - "lint:all": "yarn lint:md && yarn lint:versions && yarn lint:ts", - "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache", + "lint": "eslint . --cache --cache-strategy content", + "lint:all": "yarn lint:md && yarn lint:ts", + "lint:md": "eslint \"**/*.md\" --config eslint.config-md.mjs --cache --cache-strategy content --no-warn-ignored", "lint:ts": "yarn lint packages/*/src", - "lint:versions": "node scripts/verifyPatternflyVersions.js", - "prepare": "ts-patch install -s", + "lint:tests": "yarn lint packages/*/src/components/*/__tests__/*.test.*", + "postinstall": "ts-patch install -s && husky", "serve:docs": "yarn workspace @patternfly/react-docs serve", - "serve:integration": "lerna run serve:demo-app", + "serve:integration": "lerna run preview --scope=demo-app-ts", "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"", "start:cypress": "lerna run cypress:open", - "start:demo-app": "lerna run start:demo-app --stream", - "start:demo-app:hot": "lerna run start:demo-app:hot --stream", + "start:demo-app": "lerna run dev --scope=demo-app-ts --stream", "test": "TZ=EST LC_ALL=en_US.UTF8 jest packages", "test:a11y": "lerna run test:a11y --stream", "test:integration": "yarn workspace @patternfly/react-integration test:integration", @@ -97,19 +107,14 @@ "watch": "yarn build:esm --watch", "screenshots": "yarn workspace @patternfly/react-docs screenshots" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, "lint-staged": { "*.md": "yarn lint:md --fix", - "*.{js,jsx,ts,tsx}": "yarn lint --fix", - "*.json": "yarn lint:versions --fix" + "*.{js,jsx,ts,tsx}": "yarn lint --fix" }, "workspaces": { "packages": [ - "packages/**" + "packages/*", + "packages/react-integration/demo-app-ts" ] } } diff --git a/packages/eslint-plugin-patternfly-react/CHANGELOG.md b/packages/eslint-plugin-patternfly-react/CHANGELOG.md index 3c1e0cb9259..824959a18fe 100644 --- a/packages/eslint-plugin-patternfly-react/CHANGELOG.md +++ b/packages/eslint-plugin-patternfly-react/CHANGELOG.md @@ -3,2268 +3,166 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -## 4.80.5-alpha.0 (2023-02-10) - -### Bug Fixes - -- **deps:** updated deps to fix peer conflict in eslint-plugin-pf-react ([#8656](https://github.com/patternfly/patternfly-react/issues/8656)) ([0534f6a](https://github.com/patternfly/patternfly-react/commit/0534f6a3d32df10c700dc67233e7a9c01b7a0ced)) - -## 4.80.4 (2022-10-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.80.3 (2022-09-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.80.2 (2022-09-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.80.1 (2022-09-20) - -### Bug Fixes - -- **OverflowMenu:** store resize listener reference ([#7975](https://github.com/patternfly/patternfly-react/issues/7975)) ([86b0193](https://github.com/patternfly/patternfly-react/commit/86b01936a3029886173654925eb5d11d9077fc56)) - -# 4.80.0 (2022-09-19) - -### Features - -- **Wizard - next:** supporting component unit tests ([#7731](https://github.com/patternfly/patternfly-react/issues/7731)) ([2e4ec26](https://github.com/patternfly/patternfly-react/commit/2e4ec26d428b6be0ca4254b29e03c889eb5625bb)) - -# 4.79.0 (2022-09-16) - -### Features - -- **charts:** Update Victory dependencies ([#7986](https://github.com/patternfly/patternfly-react/issues/7986)) ([bbee15f](https://github.com/patternfly/patternfly-react/commit/bbee15fd0e00288dfa72c88a79a685b5405a355e)) - -## 4.78.1 (2022-09-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.78.0 (2022-09-14) - -### Features - -- **Dropdown next:** Added the next version of the dropdown component ([#7955](https://github.com/patternfly/patternfly-react/issues/7955)) ([c092c7c](https://github.com/patternfly/patternfly-react/commit/c092c7cfaf877c5783c9ad9db0a8010b8ea023eb)) - -# 4.77.0 (2022-09-14) - -### Features - -- **SearchInput:** new expandable button for masthead variant ([#7903](https://github.com/patternfly/patternfly-react/issues/7903)) ([d2a6c47](https://github.com/patternfly/patternfly-react/commit/d2a6c471ea3440d0b751b752b44ca1e8e749c5b6)) - -## 4.76.11 (2022-09-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.10 (2022-09-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.9 (2022-09-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.8 (2022-09-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.7 (2022-09-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.6 (2022-09-12) - -### Bug Fixes - -- **Treeview:** ignore folder selection in basic example ([#7906](https://github.com/patternfly/patternfly-react/issues/7906)) ([b16b224](https://github.com/patternfly/patternfly-react/commit/b16b2240d26cabcadec3de52627fb1d96ff45aef)) - -## 4.76.5 (2022-09-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.4 (2022-09-09) - -### Bug Fixes - -- **Modal, Dropdown, TreeView:** updates to resolve strict TS errors ([#7890](https://github.com/patternfly/patternfly-react/issues/7890)) ([011215b](https://github.com/patternfly/patternfly-react/commit/011215be95dfff1408e437c0b1062835669ff041)) - -## 4.76.3 (2022-09-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.2 (2022-09-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.76.1 (2022-09-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.76.0 (2022-09-09) - -### Features - -- **Button:** new count number prop ([#7910](https://github.com/patternfly/patternfly-react/issues/7910)) ([a096b3c](https://github.com/patternfly/patternfly-react/commit/a096b3cba080b5bcd87777efe0e96e64c6da121f)) - -## 4.75.14 (2022-09-08) - -### Bug Fixes - -- **Page:** Fixed page group props regression ([#7948](https://github.com/patternfly/patternfly-react/issues/7948)) ([044444e](https://github.com/patternfly/patternfly-react/commit/044444e11fb90d53dc8f783071d3e3dc517532a0)) - -## 4.75.13 (2022-09-08) +## [5.4.4](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.3...eslint-plugin-patternfly-react@5.4.4) (2024-11-20) ### Bug Fixes -- **table:** fix bug in expandable demo ([#7945](https://github.com/patternfly/patternfly-react/issues/7945)) ([711b196](https://github.com/patternfly/patternfly-react/commit/711b19609dd8023b157a99f6988ff8618ccee35d)) +- **deps:** update dependency eslint-plugin-jsx-a11y to ^6.10.2 ([#11244](https://github.com/patternfly/patternfly-react/issues/11244)) ([2dca61d](https://github.com/patternfly/patternfly-react/commit/2dca61d0f0b8f3a07098b5d1884781ffd293890d)) +- **deps:** update dependency eslint-plugin-react to ^7.37.2 ([#11245](https://github.com/patternfly/patternfly-react/issues/11245)) ([ccd7450](https://github.com/patternfly/patternfly-react/commit/ccd7450468e12cdbe23314e2d91978e6b9e2d9e5)) -## 4.75.12 (2022-09-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.11 (2022-09-07) +## [5.4.3](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.2...eslint-plugin-patternfly-react@5.4.3) (2024-10-08) ### Bug Fixes -- **dashboardheader:** update brand image src to absolute import path for codesandbox functionality ([#7935](https://github.com/patternfly/patternfly-react/issues/7935)) ([6190a7f](https://github.com/patternfly/patternfly-react/commit/6190a7fd51a9606c9f1bf06aa0ebd46215fbd341)) - -## 4.75.10 (2022-09-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.9 (2022-09-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.8 (2022-09-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react +- **deps:** update dependency eslint-plugin-prettier to ^5.2.1 ([#11076](https://github.com/patternfly/patternfly-react/issues/11076)) ([c5259ba](https://github.com/patternfly/patternfly-react/commit/c5259ba034aa51470bb9bc3e7bf945a2577ad392)) -## 4.75.7 (2022-09-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.6 (2022-09-06) +## [5.4.2](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.1...eslint-plugin-patternfly-react@5.4.2) (2024-10-08) ### Bug Fixes -- **Page:** avoid unnecessary re-renders ([#7940](https://github.com/patternfly/patternfly-react/issues/7940)) ([3e23142](https://github.com/patternfly/patternfly-react/commit/3e23142c489ae5b77357345dbbeaa63cc175ea05)) +- **deps:** update dependency eslint-plugin-react to ^7.37.1 ([#11080](https://github.com/patternfly/patternfly-react/issues/11080)) ([ba052d7](https://github.com/patternfly/patternfly-react/commit/ba052d7a5b35b6593308d25fe4c13074c0423244)) -## 4.75.5 (2022-09-02) +## [5.4.1](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0...eslint-plugin-patternfly-react@5.4.1) (2024-09-26) ### Bug Fixes -- **MenuToggle:** Fixed props not displaying in docs ([#7919](https://github.com/patternfly/patternfly-react/issues/7919)) ([8ca73e4](https://github.com/patternfly/patternfly-react/commit/8ca73e4dae9542646aff846511033bb7ae4fb2ef)) - -## 4.75.4 (2022-09-02) +- **deps:** update dependency eslint-plugin-import to ^2.30.0 ([#11074](https://github.com/patternfly/patternfly-react/issues/11074)) ([b8a42a7](https://github.com/patternfly/patternfly-react/commit/b8a42a7a9b14e36f69e1c6993e2dc08bc280c7f1)) +- **deps:** update dependency eslint-plugin-jsx-a11y to ^6.10.0 ([#11075](https://github.com/patternfly/patternfly-react/issues/11075)) ([2d84212](https://github.com/patternfly/patternfly-react/commit/2d84212b9a6d926b66077c70debf0eebc4d5aebb)) +- **deps:** update dependency eslint-plugin-promise to ^6.6.0 ([#11078](https://github.com/patternfly/patternfly-react/issues/11078)) ([abdab91](https://github.com/patternfly/patternfly-react/commit/abdab91e16eebd2f1f19081410386546c1edb226)) -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.3 (2022-09-01) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.75.2 (2022-09-01) +# 5.4.0 (2024-08-27) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.75.1 (2022-09-01) +# [5.4.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.7...eslint-plugin-patternfly-react@5.4.0-prerelease.8) (2024-07-16) **Note:** Version bump only for package eslint-plugin-patternfly-react -# 4.75.0 (2022-09-01) +# [5.4.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.6...eslint-plugin-patternfly-react@5.4.0-prerelease.7) (2024-07-16) ### Features -- **PageSection:** add ability to specify HTML element via prop ([#7891](https://github.com/patternfly/patternfly-react/issues/7891)) ([a9e20e4](https://github.com/patternfly/patternfly-react/commit/a9e20e4b6303fb673ed9222323a1114c3e68f8d6)) - -## 4.74.8 (2022-08-31) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.74.7 (2022-08-31) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.74.6 (2022-08-30) +- **eslint-plugin-patternfly-react:** update rules for eslint v9 ([#10743](https://github.com/patternfly/patternfly-react/issues/10743)) ([c88b15d](https://github.com/patternfly/patternfly-react/commit/c88b15d80ebe47f91a6e624fb829c3ee72614fe0)) -### Bug Fixes - -- **NumberInput:** prevent errors when onChange is passed via inputProps ([#7908](https://github.com/patternfly/patternfly-react/issues/7908)) ([9cabeed](https://github.com/patternfly/patternfly-react/commit/9cabeedacf98bd80214a7f7fe1e40c3a15be4490)) - -## 4.74.5 (2022-08-29) +# [5.4.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.5...eslint-plugin-patternfly-react@5.4.0-prerelease.6) (2024-07-15) ### Bug Fixes -- **NumberInput:** manage null value ([#7898](https://github.com/patternfly/patternfly-react/issues/7898)) ([b86371d](https://github.com/patternfly/patternfly-react/commit/b86371dfe703614c12f49b68c096b28a91b9debd)) +- **deps:** update dependency eslint-plugin-react to ^7.34.4 ([#10731](https://github.com/patternfly/patternfly-react/issues/10731)) ([1f81cd7](https://github.com/patternfly/patternfly-react/commit/1f81cd766361955fc6776b8e67c5fe60ecc8a372)) -## 4.74.4 (2022-08-29) +# [5.4.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.4...eslint-plugin-patternfly-react@5.4.0-prerelease.5) (2024-07-01) ### Bug Fixes -- syntax errors on surge ([#7897](https://github.com/patternfly/patternfly-react/issues/7897)) ([a487abf](https://github.com/patternfly/patternfly-react/commit/a487abf770340555b2c5a451b5a5bfb0ea57fd45)) +- **deps:** update dependency eslint-plugin-jsx-a11y to ^6.9.0 ([#10633](https://github.com/patternfly/patternfly-react/issues/10633)) ([f808203](https://github.com/patternfly/patternfly-react/commit/f808203170d8f594ad1186195236834d204b7505)) +- **deps:** update dependency eslint-plugin-promise to ^6.4.0 ([#10680](https://github.com/patternfly/patternfly-react/issues/10680)) ([c0e5383](https://github.com/patternfly/patternfly-react/commit/c0e53837782c9479866fc5d45df1d69c09c02ce6)) +- **deps:** update dependency eslint-plugin-react to ^7.34.3 ([#10631](https://github.com/patternfly/patternfly-react/issues/10631)) ([e3c27c2](https://github.com/patternfly/patternfly-react/commit/e3c27c2c2b49679db6d974d89bc912a280566b55)) -## 4.74.3 (2022-08-25) +# [5.4.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.3...eslint-plugin-patternfly-react@5.4.0-prerelease.4) (2024-06-13) ### Bug Fixes -- react-core should export all contents of dist directory ([#7883](https://github.com/patternfly/patternfly-react/issues/7883)) ([f5088d0](https://github.com/patternfly/patternfly-react/commit/f5088d069916d7c37335503251d13b4b846f3f62)) - -## 4.74.2 (2022-08-24) +- **deps:** update dependency eslint-config-prettier to ^9.1.0 ([#10533](https://github.com/patternfly/patternfly-react/issues/10533)) ([63ab529](https://github.com/patternfly/patternfly-react/commit/63ab5294537ede6c9d3ba94ca604fbbae75273fe)) +- **deps:** update dependency eslint-config-standard to ^17.1.0 ([#10534](https://github.com/patternfly/patternfly-react/issues/10534)) ([408f025](https://github.com/patternfly/patternfly-react/commit/408f0255a92cea33b87e446e25d9d6db0a15d4e2)) +- **deps:** update dependency eslint-plugin-import to ^2.29.1 ([#10535](https://github.com/patternfly/patternfly-react/issues/10535)) ([c50fc03](https://github.com/patternfly/patternfly-react/commit/c50fc03d256f98fa9b82ad80103c0042973dede5)) +- **deps:** update dependency eslint-plugin-jest to ^27.9.0 ([#10536](https://github.com/patternfly/patternfly-react/issues/10536)) ([658e64d](https://github.com/patternfly/patternfly-react/commit/658e64dbb3f739ebb164edc9dd78be1bd53d7e43)) +- **deps:** update dependency eslint-plugin-jsx-a11y to ^6.8.0 ([#10537](https://github.com/patternfly/patternfly-react/issues/10537)) ([ffc2c21](https://github.com/patternfly/patternfly-react/commit/ffc2c2124b21a3e1d37cd31535eefd78e1c16c87)) +- **deps:** update dependency eslint-plugin-prettier to ^5.1.3 ([#10538](https://github.com/patternfly/patternfly-react/issues/10538)) ([7d6434f](https://github.com/patternfly/patternfly-react/commit/7d6434f29790fd67dafd40fbc2fc1345f8df2f07)) +- **deps:** update dependency eslint-plugin-promise to ^6.2.0 ([#10544](https://github.com/patternfly/patternfly-react/issues/10544)) ([ae480da](https://github.com/patternfly/patternfly-react/commit/ae480da47049ea5b7ba0abb998ac36c94ab558eb)) +- **deps:** update dependency eslint-plugin-react to ^7.34.2 ([#10539](https://github.com/patternfly/patternfly-react/issues/10539)) ([a8713e6](https://github.com/patternfly/patternfly-react/commit/a8713e6b13d84cc5d2e86b425505db2caca55db4)) +- **deps:** update dependency eslint-plugin-rulesdir to ^0.2.2 ([#10545](https://github.com/patternfly/patternfly-react/issues/10545)) ([ebc50c7](https://github.com/patternfly/patternfly-react/commit/ebc50c732c846b2d757b20822e9c275333114d1b)) +- **deps:** update dependency eslint-plugin-standard to ^4.1.0 ([#10546](https://github.com/patternfly/patternfly-react/issues/10546)) ([6a65793](https://github.com/patternfly/patternfly-react/commit/6a65793499530c65b6b90870840967b310000cb3)) -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.74.1 (2022-08-24) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.74.0 (2022-08-23) - -### Features - -- **WizardComposable:** Created composable spinoff of wizard w/ enhancements ([#7703](https://github.com/patternfly/patternfly-react/issues/7703)) ([76eab29](https://github.com/patternfly/patternfly-react/commit/76eab29b640e2f71cd9bd5d42f58fa8dd0eba799)) - -## 4.73.4 (2022-08-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.73.3 (2022-08-23) +# [5.4.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.2...eslint-plugin-patternfly-react@5.4.0-prerelease.3) (2024-05-31) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.73.2 (2022-08-23) +# [5.4.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.4.0-prerelease.1...eslint-plugin-patternfly-react@5.4.0-prerelease.2) (2024-05-22) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.73.1 (2022-08-22) +# 5.4.0-prerelease.1 (2024-05-10) **Note:** Version bump only for package eslint-plugin-patternfly-react -# 4.73.0 (2022-08-22) - -### Features - -- **Timestamp:** create component ([#7815](https://github.com/patternfly/patternfly-react/issues/7815)) ([98058b3](https://github.com/patternfly/patternfly-react/commit/98058b35c4b7d5e916abd7318e020e53783f73a6)) - -## 4.72.1 (2022-08-22) - -### Bug Fixes - -- **TimePicker:** clean up menuAppendTo feature ([#7865](https://github.com/patternfly/patternfly-react/issues/7865)) ([3aa73be](https://github.com/patternfly/patternfly-react/commit/3aa73beb4581c1695aa3c3886291d862bd82286e)) - -# 4.72.0 (2022-08-19) - -### Features - -- **ExpandableSection:** add truncated variant ([#7852](https://github.com/patternfly/patternfly-react/issues/7852)) ([f628cdf](https://github.com/patternfly/patternfly-react/commit/f628cdf571d71addfc04e69728be73895e261094)) - -## 4.71.13 (2022-08-19) +# 5.4.0-prerelease.0 (2024-04-18) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.12 (2022-08-19) +# 5.3.0 (2024-04-18) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.11 (2022-08-18) +# 5.3.0-prerelease.0 (2024-02-02) -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.71.10 (2022-08-18) +# 5.2.0 (2024-02-02) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.9 (2022-08-18) +## 5.2.1 (2024-02-02) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.8 (2022-08-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react +## 5.2.1-prerelease.0 (2024-02-02) -## 4.71.7 (2022-08-18) +### Reverts -**Note:** Version bump only for package eslint-plugin-patternfly-react +- Revert release attempt (#10062) ([1cd0691](https://github.com/patternfly/patternfly-react/commit/1cd0691ebc90b323682c54b43295a6afd174a120)), closes [#10062](https://github.com/patternfly/patternfly-react/issues/10062) -## 4.71.6 (2022-08-17) +# [5.2.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.1.1...eslint-plugin-patternfly-react@5.2.0-prerelease.0) (2023-10-05) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.5 (2022-08-17) - -### Bug Fixes - -- **charts:** add victory-cursor-container dependency ([#7803](https://github.com/patternfly/patternfly-react/issues/7803)) ([6f1f00d](https://github.com/patternfly/patternfly-react/commit/6f1f00d0d60d9f841a3204e9378ac93a4333c41b)) - -## 4.71.4 (2022-08-17) +## 5.1.1 (2023-10-05) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.71.3 (2022-08-16) +## 5.1.1-prerelease.1 (2023-08-29) ### Bug Fixes -- **Select:** apply aria-describedby to correct element ([#7790](https://github.com/patternfly/patternfly-react/issues/7790)) ([1795ff5](https://github.com/patternfly/patternfly-react/commit/1795ff5a939cfab5af03f11640737377b7c39441)) - -## 4.71.2 (2022-08-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.71.1 (2022-08-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.71.0 (2022-08-16) - -### Features - -- Allow for 'next' and 'deprecated' react-core subpaths ([#7824](https://github.com/patternfly/patternfly-react/issues/7824)) ([0e68bd3](https://github.com/patternfly/patternfly-react/commit/0e68bd349e9a8b4b08bb8b777358dcde41d5462f)) - -## 4.70.9 (2022-08-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.70.8 (2022-08-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.70.7 (2022-08-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.70.6 (2022-08-10) +- **deps:** update dependency eslint-config-prettier to v9 ([#9464](https://github.com/patternfly/patternfly-react/issues/9464)) ([9a43090](https://github.com/patternfly/patternfly-react/commit/9a430903fb38694db3f08e9029002b9ca246d906)) +- **deps:** update dependency eslint-plugin-prettier to v5 ([#9458](https://github.com/patternfly/patternfly-react/issues/9458)) ([6c0646b](https://github.com/patternfly/patternfly-react/commit/6c0646b2bb337e1b089321addc100c25e623f08e)) +- **deps:** update dependency eslint-plugin-prettier to v5 ([#9473](https://github.com/patternfly/patternfly-react/issues/9473)) ([507fb64](https://github.com/patternfly/patternfly-react/commit/507fb6403e43fee098b08a26ed536c0d78452d01)) ### Reverts -- Revert "feat(VisualizationSurface): replace react-measure with react-resize-detector (#7706)" (#7809) ([3c9cd8f](https://github.com/patternfly/patternfly-react/commit/3c9cd8f32d621f30aef0a4d4e0aa892b08354e7b)), closes [#7706](https://github.com/patternfly/patternfly-react/issues/7706) [#7809](https://github.com/patternfly/patternfly-react/issues/7809) - -## 4.70.5 (2022-08-05) - -### Bug Fixes - -- **MenuToggle:** update base type to include div attributes as well ([#7798](https://github.com/patternfly/patternfly-react/issues/7798)) ([330e496](https://github.com/patternfly/patternfly-react/commit/330e496a7f1fb715ab06a6f6d118f1db8705828a)) - -## 4.70.4 (2022-08-05) - -### Bug Fixes - -- **MenuToggle:** undo type change causing errors ([#7797](https://github.com/patternfly/patternfly-react/issues/7797)) ([1031ecb](https://github.com/patternfly/patternfly-react/commit/1031ecbeb5b4fa7eb28ed9c035454c7b408b8da8)) - -## 4.70.3 (2022-08-04) - -### Bug Fixes +- Revert "fix(deps): update dependency eslint-plugin-prettier to v5 (#9458)" (#9472) ([c797be9](https://github.com/patternfly/patternfly-react/commit/c797be94af1a1cc885df7a53567bb659030ed16c)), closes [#9458](https://github.com/patternfly/patternfly-react/issues/9458) [#9472](https://github.com/patternfly/patternfly-react/issues/9472) -- **charts:** remove uniqueId generation for labels and axis ticks ([#7794](https://github.com/patternfly/patternfly-react/issues/7794)) ([9c44131](https://github.com/patternfly/patternfly-react/commit/9c4413119f14e3e45a1ed12bd870120e278ebc20)) +# 5.0.0 (2023-07-27) -## 4.70.2 (2022-08-03) +# [5.1.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.0.0...eslint-plugin-patternfly-react@5.1.0-prerelease.0) (2023-07-27) **Note:** Version bump only for package eslint-plugin-patternfly-react -## 4.70.1 (2022-08-03) - -### Bug Fixes - -- **Menu:** can navigate via keyboard for checkbox variant ([#7743](https://github.com/patternfly/patternfly-react/issues/7743)) ([7cfa876](https://github.com/patternfly/patternfly-react/commit/7cfa87682c225c3e93d6c4e0925b3c34aaede633)) - -# 4.70.0 (2022-08-03) - -### Features - -- **MenuToggle:** add split button variants ([#7748](https://github.com/patternfly/patternfly-react/issues/7748)) ([7577725](https://github.com/patternfly/patternfly-react/commit/7577725305533791481ac22d9b36b87d5d3167b1)) - -## 4.69.1 (2022-08-02) +# 5.0.0 (2023-07-27) **Note:** Version bump only for package eslint-plugin-patternfly-react -# 4.69.0 (2022-08-01) - -### Features - -- **Page:** add support for vertical breakpoints, add sticky breadcrumb demo ([#7764](https://github.com/patternfly/patternfly-react/issues/7764)) ([9db582d](https://github.com/patternfly/patternfly-react/commit/9db582d63a3499fa78ea8fab3ce31b7877cd479d)) - -# 4.68.0 (2022-08-01) - -### Features - -- **DescriptionList:** add Display and Card variants ([#7713](https://github.com/patternfly/patternfly-react/issues/7713)) ([8c6e6d8](https://github.com/patternfly/patternfly-react/commit/8c6e6d83cdbe989d306c64f945aac206eac3ff91)) - -## 4.67.1 (2022-08-01) +# 5.0.0-prerelease.2 (2023-06-13) ### Bug Fixes -- **Menu/Nav:** flyout variants work with VO navigation ([#7772](https://github.com/patternfly/patternfly-react/issues/7772)) ([6ad76cc](https://github.com/patternfly/patternfly-react/commit/6ad76cc1b466e8e93773f58002acf5ca54ad6e36)) - -# 4.67.0 (2022-07-29) - -### Features - -- **Tabs:** add horizontal overflow option ([#7742](https://github.com/patternfly/patternfly-react/issues/7742)) ([2745cd1](https://github.com/patternfly/patternfly-react/commit/2745cd199669b0c0a5cdbd5c3d4e7453c6e1c435)) - -## 4.66.9 (2022-07-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.8 (2022-07-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.7 (2022-07-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.6 (2022-07-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.5 (2022-07-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.4 (2022-07-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.3 (2022-07-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.2 (2022-07-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.66.1 (2022-07-26) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.66.0 (2022-07-26) - -### Features - -- **Dropdown:** added secondary styling to split action button ([#7746](https://github.com/patternfly/patternfly-react/issues/7746)) ([e701c32](https://github.com/patternfly/patternfly-react/commit/e701c32bb36097770ecb2c3e17e15df0b720488f)) - -## 4.65.2 (2022-07-26) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.65.1 (2022-07-26) +- **docs:** update use of deprecated tag and clean up changelogs ([#9259](https://github.com/patternfly/patternfly-react/issues/9259)) ([8de83dc](https://github.com/patternfly/patternfly-react/commit/8de83dc3b2fb88094fd3c21bda2ed6e371986cba)) -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.65.0 (2022-07-26) - -### Features - -- **topology:** Pipelines support for badges/icons variable task node width ([#7697](https://github.com/patternfly/patternfly-react/issues/7697)) ([a499273](https://github.com/patternfly/patternfly-react/commit/a49927315cd61e84a007d05b49e5d7254b977fcb)) - -## 4.64.11 (2022-07-25) +# 5.0.0-prerelease.1 (2023-06-06) ### Bug Fixes -- **Select:** remove variant check from update logic ([#7741](https://github.com/patternfly/patternfly-react/issues/7741)) ([2204cb6](https://github.com/patternfly/patternfly-react/commit/2204cb62e30b4a37b82731f1380e79a3085828ef)) - -## 4.64.10 (2022-07-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.9 (2022-07-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react +- **release:** dryrun publishing prereleases ([#9242](https://github.com/patternfly/patternfly-react/issues/9242)) ([e4c35f1](https://github.com/patternfly/patternfly-react/commit/e4c35f14cd57be132179e51ae2bb223600a35f0e)) -## 4.64.8 (2022-07-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.7 (2022-07-20) +## 4.80.5-alpha.1 (2023-05-04) ### Bug Fixes -- **Switch:** aria labelledby to update with change ([#7557](https://github.com/patternfly/patternfly-react/issues/7557)) ([9647a0c](https://github.com/patternfly/patternfly-react/commit/9647a0c7f7eb2174f006774b4406408bd065fddc)) - -## 4.64.6 (2022-07-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.5 (2022-07-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.4 (2022-07-15) - -### Bug Fixes +- **deps:** update dependency eslint-config-standard to v17 ([#9042](https://github.com/patternfly/patternfly-react/issues/9042)) ([89ce7f1](https://github.com/patternfly/patternfly-react/commit/89ce7f1499977fd70f441e0b449456e081421bee)) +- **deps:** update dependency eslint-config-standard-jsx to v11 ([#9043](https://github.com/patternfly/patternfly-react/issues/9043)) ([11df5e3](https://github.com/patternfly/patternfly-react/commit/11df5e357ac58c75524c75458e72333b7379aac7)) +- **deps:** update dependency eslint-config-standard-react to v13 ([#9044](https://github.com/patternfly/patternfly-react/issues/9044)) ([9d37fc7](https://github.com/patternfly/patternfly-react/commit/9d37fc735dbc0ee3b6705cf957748cdd8cf217aa)) +- **deps:** update dependency eslint-plugin-jest to v27 ([#9045](https://github.com/patternfly/patternfly-react/issues/9045)) ([a72f9aa](https://github.com/patternfly/patternfly-react/commit/a72f9aabcca56d6adbfef4e54c32a1579bd62cc8)) +- **deps:** update dependency eslint-plugin-node to v11 ([#9046](https://github.com/patternfly/patternfly-react/issues/9046)) ([2c52a92](https://github.com/patternfly/patternfly-react/commit/2c52a92e7d9112e283fdaaf4f55038d67d96116d)) +- **deps:** update dependency eslint-plugin-prettier to v4 ([#9047](https://github.com/patternfly/patternfly-react/issues/9047)) ([bbad5ee](https://github.com/patternfly/patternfly-react/commit/bbad5eefcd80a6f9c19d35b6f6cb348db8fd4800)) +- **deps:** update dependency eslint-plugin-promise to v6 ([#9049](https://github.com/patternfly/patternfly-react/issues/9049)) ([479024b](https://github.com/patternfly/patternfly-react/commit/479024b101713ed8acbc5bc97f46a0d6ac40ea07)) +- **deps:** update dependency eslint-plugin-rulesdir to ^0.2.0 ([#9039](https://github.com/patternfly/patternfly-react/issues/9039)) ([d29d01e](https://github.com/patternfly/patternfly-react/commit/d29d01eb0b1640d3fe6e560948ad7e49bdc172a0)) +- **deps:** update dependency eslint-plugin-standard to v4 ([#9050](https://github.com/patternfly/patternfly-react/issues/9050)) ([da9acf1](https://github.com/patternfly/patternfly-react/commit/da9acf1d34d874c456f85164ed5e20c1941345ef)) -- **LogViewer:** render correctly when there is '\n' in the string array ([#7681](https://github.com/patternfly/patternfly-react/issues/7681)) ([12222c7](https://github.com/patternfly/patternfly-react/commit/12222c76d47396d8df5134c607a9ff689d6d93c9)) - -## 4.64.3 (2022-07-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.2 (2022-07-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.64.1 (2022-07-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.64.0 (2022-07-14) - -### Features - -- **Topology:** Add Topology pipeline support ([#7609](https://github.com/patternfly/patternfly-react/issues/7609)) ([4fb563f](https://github.com/patternfly/patternfly-react/commit/4fb563fb8651c0386f7cc59fd9c736af6fb683ec)) - -## 4.63.15 (2022-07-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.14 (2022-07-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.13 (2022-07-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.12 (2022-07-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.11 (2022-07-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.10 (2022-07-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.9 (2022-07-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.8 (2022-07-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.7 (2022-07-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.6 (2022-07-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.5 (2022-07-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.4 (2022-07-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.3 (2022-07-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.2 (2022-06-30) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.63.1 (2022-06-29) - -### Bug Fixes - -- **Select:** update logic should only apply to typeahead ([#7632](https://github.com/patternfly/patternfly-react/issues/7632)) ([0b9148e](https://github.com/patternfly/patternfly-react/commit/0b9148e67030236e61423895c6632b20dac4617f)) - -# 4.63.0 (2022-06-27) - -### Features - -- **wizard:** add support for additional information panel (drawer) ([#7323](https://github.com/patternfly/patternfly-react/issues/7323)) ([6702504](https://github.com/patternfly/patternfly-react/commit/67025047d7bb644497f4477b77dbbdebe8ce97da)) - -## 4.62.3 (2022-06-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.62.2 (2022-06-23) - -### Bug Fixes - -- **ProgressStepper:** added onTriggerEnter prop to Popover ([#7532](https://github.com/patternfly/patternfly-react/issues/7532)) ([1208390](https://github.com/patternfly/patternfly-react/commit/12083908a7043c017a5b7a97f84623add10bfe75)) - -## 4.62.1 (2022-06-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.62.0 (2022-06-22) - -### Features - -- **Table:** add nested sticky header support ([#7595](https://github.com/patternfly/patternfly-react/issues/7595)) ([3888a0b](https://github.com/patternfly/patternfly-react/commit/3888a0bdf5e4e964d2d8d936c5d81f7813d8ec0c)) - -## 4.61.17 (2022-06-22) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.16 (2022-06-22) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.15 (2022-06-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.14 (2022-06-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.13 (2022-06-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.12 (2022-06-17) - -### Bug Fixes - -- **Table:** account for added columns with expandable ([#7529](https://github.com/patternfly/patternfly-react/issues/7529)) ([dcde7c9](https://github.com/patternfly/patternfly-react/commit/dcde7c95eb7200b706da4d41a46f3f57b5129e40)) - -## 4.61.11 (2022-06-17) - -### Bug Fixes - -- **Table:** update expandable examples to set column widths ([#7513](https://github.com/patternfly/patternfly-react/issues/7513)) ([c2e1e61](https://github.com/patternfly/patternfly-react/commit/c2e1e618a6924bdbb2b1e8e7ad94553615196fb2)) - -## 4.61.10 (2022-06-16) - -### Bug Fixes - -- **Topology:** Fix for group position when it has no children ([#7573](https://github.com/patternfly/patternfly-react/issues/7573)) ([04e435e](https://github.com/patternfly/patternfly-react/commit/04e435ebc87ad7d1c687db95ee8ef8beffae514d)) - -## 4.61.9 (2022-06-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.8 (2022-06-16) - -### Bug Fixes - -- **Table:** filterable table demo icon text spacing fix ([#7477](https://github.com/patternfly/patternfly-react/issues/7477)) ([e35387f](https://github.com/patternfly/patternfly-react/commit/e35387f42b355000ff66a79e1031eb6e9a7bb8c3)) - -## 4.61.7 (2022-06-16) - -### Bug Fixes - -- **console:** add SUSE instruction for virt-viewer ([#7445](https://github.com/patternfly/patternfly-react/issues/7445)) ([2ac5adb](https://github.com/patternfly/patternfly-react/commit/2ac5adb581d673e0687f438baeb7859125bd30d4)), closes [#7519](https://github.com/patternfly/patternfly-react/issues/7519) - -## 4.61.6 (2022-06-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.5 (2022-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.4 (2022-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.3 (2022-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.2 (2022-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.61.1 (2022-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.61.0 (2022-06-14) - -### Features - -- **Form:** add functionality for form group roles ([#7516](https://github.com/patternfly/patternfly-react/issues/7516)) ([4ff2f54](https://github.com/patternfly/patternfly-react/commit/4ff2f54ce21363e9c40c47517f20b8fc5e0cb401)) - -## 4.60.17 (2022-06-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.16 (2022-06-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.15 (2022-06-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.14 (2022-06-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.13 (2022-06-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.12 (2022-06-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.11 (2022-06-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.10 (2022-06-09) - -### Bug Fixes - -- **Select:** retain focus on correct checkbox after view more ([#7505](https://github.com/patternfly/patternfly-react/issues/7505)) ([c9de16b](https://github.com/patternfly/patternfly-react/commit/c9de16b00a3573f74847b3953c7b408cf000fb85)) - -## 4.60.9 (2022-06-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.8 (2022-06-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.7 (2022-06-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.6 (2022-06-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.5 (2022-06-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.4 (2022-06-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.3 (2022-06-02) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.2 (2022-06-01) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.60.1 (2022-06-01) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.60.0 (2022-06-01) - -### Features - -- **table:** full screen demo for sticky first column ([#7451](https://github.com/patternfly/patternfly-react/issues/7451)) ([f610dd4](https://github.com/patternfly/patternfly-react/commit/f610dd4726b16d73a166f7a57da0fa3588b8201d)) - -## 4.59.2 (2022-05-31) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.59.1 (2022-05-31) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.59.0 (2022-05-31) - -### Features - -- **table:** add fullscreen demo for error state ([#7443](https://github.com/patternfly/patternfly-react/issues/7443)) ([eeab219](https://github.com/patternfly/patternfly-react/commit/eeab2197765589262ee7c328e57dbf1606da6d7f)) - -## 4.58.2 (2022-05-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.58.1 (2022-05-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.58.0 (2022-05-26) - -### Features - -- **Popper:** add mouse events for popper content ([#7399](https://github.com/patternfly/patternfly-react/issues/7399)) ([47f8d12](https://github.com/patternfly/patternfly-react/commit/47f8d12e348397336287c7e7efc79665bce61ae2)) - -# 4.57.0 (2022-05-26) - -### Features - -- **table:** add fullscreen empty state demo ([#7371](https://github.com/patternfly/patternfly-react/issues/7371)) ([54f3052](https://github.com/patternfly/patternfly-react/commit/54f30520d9d808ffe15c962b37af91cef4c21dcb)) - -## 4.56.4 (2022-05-26) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.56.3 (2022-05-26) - -### Bug Fixes - -- **Select:** popper menu flips correctly ([#7434](https://github.com/patternfly/patternfly-react/issues/7434)) ([cc1eb21](https://github.com/patternfly/patternfly-react/commit/cc1eb2152246d03600a9fbbf678fd8b39f703347)) - -## 4.56.2 (2022-05-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.56.1 (2022-05-24) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.56.0 (2022-05-24) - -### Features - -- **table:** add fullscreen loading state demo ([#7370](https://github.com/patternfly/patternfly-react/issues/7370)) ([285b5b7](https://github.com/patternfly/patternfly-react/commit/285b5b76cb6bb64d5fd4bd66cfb26f709457b3bc)) - -## 4.55.1 (2022-05-23) - -### Bug Fixes - -- **Select:** allow enter to create when there is a single option ([#7444](https://github.com/patternfly/patternfly-react/issues/7444)) ([e1ae6a9](https://github.com/patternfly/patternfly-react/commit/e1ae6a9aa7dee0f8107905ec1d47463fce950ff3)) - -# 4.55.0 (2022-05-19) - -### Features - -- **table:** update sortable demo to align with core ([#7292](https://github.com/patternfly/patternfly-react/issues/7292)) ([6891764](https://github.com/patternfly/patternfly-react/commit/6891764f2507c775005878f6e74cc5c8e44a6c68)) - -# 4.54.0 (2022-05-19) - -### Features - -- **Menu:** Added support for checkbox menu ([#7368](https://github.com/patternfly/patternfly-react/issues/7368)) ([8c2d1dc](https://github.com/patternfly/patternfly-react/commit/8c2d1dc23dbe5c28a8c1ecf79eb34ea911da386f)) - -## 4.53.5 (2022-05-18) - -### Bug Fixes - -- **Slider:** add support for aria-labelledby ad aria-describedby ([#7408](https://github.com/patternfly/patternfly-react/issues/7408)) ([7c8617a](https://github.com/patternfly/patternfly-react/commit/7c8617a1268a03061d51454b298c79ae5f7a59b0)) - -## 4.53.4 (2022-05-18) - -### Bug Fixes - -- **Table:** Removed duplicate import from md file ([#7442](https://github.com/patternfly/patternfly-react/issues/7442)) ([00438a7](https://github.com/patternfly/patternfly-react/commit/00438a73c7b2548c4f0ad00ed09f9c60f99978d9)) - -## 4.53.3 (2022-05-16) - -### Bug Fixes - -- **Chip:** add custom maxWidth prop ([#7387](https://github.com/patternfly/patternfly-react/issues/7387)) ([7cfb1a2](https://github.com/patternfly/patternfly-react/commit/7cfb1a202c2f1405c454b2e10716d9a500d4508f)) - -## 4.53.2 (2022-05-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.53.1 (2022-05-12) - -### Bug Fixes - -- **Tabs:** make close handler optional ([#7405](https://github.com/patternfly/patternfly-react/issues/7405)) ([a84bb2a](https://github.com/patternfly/patternfly-react/commit/a84bb2aadefd7f811745b9512a26eda85241361d)) - -# 4.53.0 (2022-05-12) - -### Features - -- **table:** expandable table demo ([#7277](https://github.com/patternfly/patternfly-react/issues/7277)) ([c081a61](https://github.com/patternfly/patternfly-react/commit/c081a61f11ceeb92688798106962e3604c243606)) - -## 4.52.6 (2022-05-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.52.5 (2022-05-11) - -### Bug Fixes - -- **charts:** support customizing tooltip border for dark theme ([#7393](https://github.com/patternfly/patternfly-react/issues/7393)) ([7168a1d](https://github.com/patternfly/patternfly-react/commit/7168a1dc7f3a1302d719a32bcd32dcdb9ad8fb86)) - -## 4.52.4 (2022-05-11) - -### Bug Fixes - -- **topology:** fix variables ([#7364](https://github.com/patternfly/patternfly-react/issues/7364)) ([2dec22e](https://github.com/patternfly/patternfly-react/commit/2dec22eec0f2fb8a634108e6995f747f61fa7d93)) - -## 4.52.3 (2022-05-10) - -### Bug Fixes - -- **Card:** indicate card selectivity and status if using a screen reader ([#7144](https://github.com/patternfly/patternfly-react/issues/7144)) ([56fab43](https://github.com/patternfly/patternfly-react/commit/56fab43f801390d995ae9d0c3bdec3aa0f0d2cfb)) - -## 4.52.2 (2022-05-10) - -### Reverts - -- Revert "docs(Dropdown): expose menuAppendTo in Dropdown prop docs (#7173)" (#7395) ([9e80f18](https://github.com/patternfly/patternfly-react/commit/9e80f1812773e269782cdb26928778e558ec5354)), closes [#7173](https://github.com/patternfly/patternfly-react/issues/7173) [#7395](https://github.com/patternfly/patternfly-react/issues/7395) - -## 4.52.1 (2022-05-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.52.0 (2022-05-10) - -### Features - -- **Tabs:** allow dynamic close/add ([#7297](https://github.com/patternfly/patternfly-react/issues/7297)) ([51dd66c](https://github.com/patternfly/patternfly-react/commit/51dd66c59d25f96686c57de9fffe590f1c8cbe83)) - -# 4.51.0 (2022-05-09) - -### Features - -- **charts:** added PF dark theme support ([#7310](https://github.com/patternfly/patternfly-react/issues/7310)) ([549c041](https://github.com/patternfly/patternfly-react/commit/549c041525b22d910b71a1c4f64e2cb0ba11ca8f)) - -## 4.50.6 (2022-05-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.50.5 (2022-05-09) - -### Bug Fixes - -- **Popper:** update Popper modifiers when child DOM changes ([#7385](https://github.com/patternfly/patternfly-react/issues/7385)) ([28d0b74](https://github.com/patternfly/patternfly-react/commit/28d0b74107ae76acae535c37ea73cec3a4cf49d5)) - -## 4.50.4 (2022-05-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.50.3 (2022-05-06) - -### Bug Fixes - -- **LogViewer:** clear ANSI cache when resetting the log window ([#7355](https://github.com/patternfly/patternfly-react/issues/7355)) ([b3354b5](https://github.com/patternfly/patternfly-react/commit/b3354b5000c5d7397c479888140b0381367cbd2c)) - -## 4.50.2 (2022-05-06) - -### Bug Fixes - -- **Page:** add tabindex to components with hasOverflowScroll ([#7274](https://github.com/patternfly/patternfly-react/issues/7274)) ([6be2fa8](https://github.com/patternfly/patternfly-react/commit/6be2fa870aba78b833c7346ffe029f96cfc1c37d)) - -## 4.50.1 (2022-05-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.50.0 (2022-05-06) - -### Features - -- **tokens:** Variables now include a fallback value for charts ([#7374](https://github.com/patternfly/patternfly-react/issues/7374)) ([6832688](https://github.com/patternfly/patternfly-react/commit/6832688d904159eee64510656dc4df6ed1ecb841)) - -# 4.49.0 (2022-05-05) - -### Features - -- **charts:** Deprecate themeVariant prop for light / dark themes ([#7372](https://github.com/patternfly/patternfly-react/issues/7372)) ([362902a](https://github.com/patternfly/patternfly-react/commit/362902a72eb2b18e634423c86dea1bef89bf00e9)) - -# 4.48.0 (2022-05-05) - -### Features - -- **drawer:** convert examples to TS ([#7329](https://github.com/patternfly/patternfly-react/issues/7329)) ([e3c6dfa](https://github.com/patternfly/patternfly-react/commit/e3c6dfa735a01c2be5a62eed8e37ad7a29b113de)) - -## 4.47.13 (2022-05-05) - -### Bug Fixes - -- **Wixard:** Fixed id not being applied to wizard step ([#7349](https://github.com/patternfly/patternfly-react/issues/7349)) ([de6b557](https://github.com/patternfly/patternfly-react/commit/de6b557331460dd387faa1ac4c5c033757412340)) - -## 4.47.12 (2022-05-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.11 (2022-05-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.10 (2022-05-05) - -### Bug Fixes - -- **charts:** Add style for tooltip cursor ([#7361](https://github.com/patternfly/patternfly-react/issues/7361)) ([1b3f67c](https://github.com/patternfly/patternfly-react/commit/1b3f67c3712a194bef672fe888f6a446f4bd8bc6)) - -## 4.47.9 (2022-05-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.8 (2022-05-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.7 (2022-05-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.6 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.5 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.4 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.3 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.2 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.47.1 (2022-05-03) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.47.0 (2022-05-02) - -### Features - -- **divider:** add support for switching orientation at various breakpoints ([#7285](https://github.com/patternfly/patternfly-react/issues/7285)) ([6e47917](https://github.com/patternfly/patternfly-react/commit/6e47917a59fdbd0f9f647998d79d024a691a49e2)) - -# 4.46.0 (2022-04-28) - -### Features - -- **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) - -## 4.45.6 (2022-04-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.45.5 (2022-04-26) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.45.4 (2022-04-25) - -### Bug Fixes - -- **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) - -## 4.45.3 (2022-04-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.45.2 (2022-04-21) - -### Bug Fixes - -- **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) - -## 4.45.1 (2022-04-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.45.0 (2022-04-19) - -### Features - -- **HelperText:** add react demos ([#7250](https://github.com/patternfly/patternfly-react/issues/7250)) ([bf68976](https://github.com/patternfly/patternfly-react/commit/bf68976bebd683c935f587795a868c32ea8c5616)) - -## 4.44.1 (2022-04-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.44.0 (2022-04-18) - -### Features - -- **Tabs:** Add nested, unindented demo ([#7194](https://github.com/patternfly/patternfly-react/issues/7194)) ([81bd759](https://github.com/patternfly/patternfly-react/commit/81bd759189379bc558871acc791a1a34dcc2ed1a)) - -# 4.43.0 (2022-04-18) - -### Features - -- **Progress stepper:** Updated to use render prop for popover ([#7190](https://github.com/patternfly/patternfly-react/issues/7190)) ([5eb8243](https://github.com/patternfly/patternfly-react/commit/5eb8243d63d1168d9b425a5322c08e04659ed843)) - -## 4.42.2 (2022-04-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.42.1 (2022-04-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.42.0 (2022-04-14) - -### Features - -- **MenuToggle:** Add full width modifier ([#7232](https://github.com/patternfly/patternfly-react/issues/7232)) ([789a8a3](https://github.com/patternfly/patternfly-react/commit/789a8a3f1cb1f1d90565f8d0e6c0dbe984c0c66b)) - -## 4.41.37 (2022-04-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.36 (2022-04-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.35 (2022-04-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.34 (2022-04-13) - -### Bug Fixes - -- **ContextSelector:** fix listener handling when using popper ([#7165](https://github.com/patternfly/patternfly-react/issues/7165)) ([af89d6a](https://github.com/patternfly/patternfly-react/commit/af89d6a334d0052205473d313ea5be0e64f3847c)) - -## 4.41.33 (2022-04-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.32 (2022-04-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.31 (2022-04-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.30 (2022-04-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.29 (2022-04-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.28 (2022-04-12) - -### Bug Fixes - -- **demo-app:** reorder css imports to load in dark theme correctly ([#7224](https://github.com/patternfly/patternfly-react/issues/7224)) ([1341c93](https://github.com/patternfly/patternfly-react/commit/1341c9396a25f6850bf4e961e40c9ddd182d9d3b)) - -## 4.41.27 (2022-04-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.26 (2022-04-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.25 (2022-04-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.24 (2022-04-11) - -### Bug Fixes - -- **Select:** prevent footer clicks from toggling ([#7193](https://github.com/patternfly/patternfly-react/issues/7193)) ([2cd10c2](https://github.com/patternfly/patternfly-react/commit/2cd10c2a0a11dcd14f85116369fd47dffcb12295)) - -## 4.41.23 (2022-04-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.22 (2022-04-11) - -### Bug Fixes - -- **react-styles:** support esm import and export ([#7084](https://github.com/patternfly/patternfly-react/issues/7084)) ([b66ea14](https://github.com/patternfly/patternfly-react/commit/b66ea14fa0949b0626184455a4df46312b87171a)) - -## 4.41.21 (2022-04-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.20 (2022-04-08) - -### Bug Fixes - -- **NumberInput:** Custom increment/decrement and thresholds ([#7159](https://github.com/patternfly/patternfly-react/issues/7159)) ([28853de](https://github.com/patternfly/patternfly-react/commit/28853de1d02a4d46d81100da895d5e73a3ec05cf)) - -## 4.41.19 (2022-04-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.18 (2022-04-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.17 (2022-04-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.16 (2022-04-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.15 (2022-04-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.14 (2022-03-30) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.13 (2022-03-29) - -### Bug Fixes - -- **components:** fix newline interpolation of text input values ([#6935](https://github.com/patternfly/patternfly-react/issues/6935)) ([c667ef0](https://github.com/patternfly/patternfly-react/commit/c667ef048cbf246e920a0111d4e900f1079cc6bc)), closes [#5324](https://github.com/patternfly/patternfly-react/issues/5324) - -## 4.41.12 (2022-03-29) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.11 (2022-03-29) - -### Bug Fixes - -- **Drawer:** Updated resizable drawer to make it more accessible ([#7118](https://github.com/patternfly/patternfly-react/issues/7118)) ([0363ae6](https://github.com/patternfly/patternfly-react/commit/0363ae6638aab17e55f26bae5017bcd7f83f8ed5)) - -## 4.41.10 (2022-03-29) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.9 (2022-03-28) - -### Bug Fixes - -- **Select:** view more fixes ([#7107](https://github.com/patternfly/patternfly-react/issues/7107)) ([94f24f6](https://github.com/patternfly/patternfly-react/commit/94f24f65b043a2d3f3ae8fe7247aaf55b05987a7)) - -## 4.41.8 (2022-03-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.7 (2022-03-28) - -### Bug Fixes - -- **CalendarMonth:** resolve regression for selecting a date ([#7130](https://github.com/patternfly/patternfly-react/issues/7130)) ([5397e89](https://github.com/patternfly/patternfly-react/commit/5397e895ba52434b98b4206ac47535ed36d1bf00)) - -## 4.41.6 (2022-03-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.5 (2022-03-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.4 (2022-03-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.3 (2022-03-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.2 (2022-03-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.41.1 (2022-03-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.41.0 (2022-03-23) - -### Features - -- **Select:** add flag to not reset on select, add event to toggle callback ([#7093](https://github.com/patternfly/patternfly-react/issues/7093)) ([ec2afb1](https://github.com/patternfly/patternfly-react/commit/ec2afb1ea414f63a2fadc56bbaa968a0caad5fd6)) - -## 4.40.2 (2022-03-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.40.1 (2022-03-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.40.0 (2022-03-23) - -### Features - -- **CalendarMonth:** make date prop optional ([#7077](https://github.com/patternfly/patternfly-react/issues/7077)) ([e388854](https://github.com/patternfly/patternfly-react/commit/e388854e26b57d7cada63832b7f52e9c7bdad9a0)) - -## 4.39.2 (2022-03-22) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.39.1 (2022-03-21) - -### Bug Fixes - -- **Tooltip:** horizontal scroll bar causing misaligned tooltip ([#7062](https://github.com/patternfly/patternfly-react/issues/7062)) ([9540d0c](https://github.com/patternfly/patternfly-react/commit/9540d0c5ab256a19143381755e33b661a13d2a00)) - -# 4.39.0 (2022-03-21) - -### Features - -- **TextInput, TextArea, FormSelect:** add isIconSprite prop ([#7052](https://github.com/patternfly/patternfly-react/issues/7052)) ([94e1a85](https://github.com/patternfly/patternfly-react/commit/94e1a855840ca74d4d934a863531359a4f84c265)) - -## 4.38.5 (2022-03-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.38.4 (2022-03-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.38.3 (2022-03-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.38.2 (2022-03-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.38.1 (2022-03-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.38.0 (2022-03-15) - -### Features - -- **CodeEditor:** 6226 size to fit height ([#7033](https://github.com/patternfly/patternfly-react/issues/7033)) ([f18abd3](https://github.com/patternfly/patternfly-react/commit/f18abd3020e04ee6602fd168d503f43cc0de649e)) - -## 4.37.22 (2022-03-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.21 (2022-03-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.20 (2022-03-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.19 (2022-03-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.18 (2022-03-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.17 (2022-03-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.16 (2022-03-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.15 (2022-03-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.14 (2022-03-04) - -### Bug Fixes - -- **NotificationDrawer:** Drawer receives focus after opening ([#6963](https://github.com/patternfly/patternfly-react/issues/6963)) ([f5b1c97](https://github.com/patternfly/patternfly-react/commit/f5b1c97f1c3ef6155d39d16da401fb9937b539e9)) - -## 4.37.13 (2022-03-04) - -### Bug Fixes - -- **Toolbar:** update test ([#6995](https://github.com/patternfly/patternfly-react/issues/6995)) ([4ddaeaa](https://github.com/patternfly/patternfly-react/commit/4ddaeaad5cd550b1bd88195a7a0eb9643cdb70f4)) - -## 4.37.12 (2022-03-02) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.11 (2022-03-02) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.10 (2022-03-02) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.9 (2022-03-01) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.8 (2022-02-24) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.7 (2022-02-22) - -### Bug Fixes - -- update release version number ([#6964](https://github.com/patternfly/patternfly-react/issues/6964)) ([6eefe79](https://github.com/patternfly/patternfly-react/commit/6eefe79b9eaaf871ecf93e3fdfd0e49c7326b221)) - -## 4.37.6 (2022-02-22) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.5 (2022-02-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.4 (2022-02-17) - -### Bug Fixes - -- **Select:** Do not filter out view more button on filter ([#6848](https://github.com/patternfly/patternfly-react/issues/6848)) ([6c7ac8a](https://github.com/patternfly/patternfly-react/commit/6c7ac8a5e287670d7469ecc0ef137bc33583e739)) - -## 4.37.3 (2022-02-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.2 (2022-02-16) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.37.1 (2022-02-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.37.0 (2022-02-15) - -### Features - -- **table:** ability to add expand/collapse all to th ([#6914](https://github.com/patternfly/patternfly-react/issues/6914)) ([ee510ee](https://github.com/patternfly/patternfly-react/commit/ee510ee8c8d3a069b75c73873ebd32b0b9a4d9c7)) - -## 4.36.2 (2022-02-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.36.1 (2022-02-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.36.0 (2022-02-14) - -### Features - -- **Page:** Added center alignment for page sections ([#6893](https://github.com/patternfly/patternfly-react/issues/6893)) ([440918f](https://github.com/patternfly/patternfly-react/commit/440918fc1bd9795cd916a04fe32677ae5f69ef68)) - -# 4.35.0 (2022-02-11) - -### Features - -- **Menu:** allow drilldown menu functions ([#6872](https://github.com/patternfly/patternfly-react/issues/6872)) ([b345b07](https://github.com/patternfly/patternfly-react/commit/b345b07de7c1576e984a06f4c573641b04956f5c)) - -## 4.34.3 (2022-02-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.34.2 (2022-02-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.34.1 (2022-02-11) - -### Bug Fixes - -- **Select:** Fixed so that view more btn click does not close the menu in React 16 ([#6922](https://github.com/patternfly/patternfly-react/issues/6922)) ([89da91d](https://github.com/patternfly/patternfly-react/commit/89da91dfd3a9e7af8ee26f8b6b5ac01c5b2487d4)) - -# 4.34.0 (2022-02-10) - -### Features - -- **ToolTip:** Diagonal tooltip placement ([#6887](https://github.com/patternfly/patternfly-react/issues/6887)) ([897fd7d](https://github.com/patternfly/patternfly-react/commit/897fd7d248888e7324d36f574231985e8523a700)) - -## 4.33.3 (2022-02-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.33.2 (2022-02-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.33.1 (2022-02-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.33.0 (2022-02-08) - -### Features - -- **MenuToggle:** add full height variation ([#6869](https://github.com/patternfly/patternfly-react/issues/6869)) ([415e02f](https://github.com/patternfly/patternfly-react/commit/415e02f5e5617367db717cd5120df04ec1a208eb)) - -# 4.32.0 (2022-02-08) - -### Features - -- **Table:** add striping ([#6886](https://github.com/patternfly/patternfly-react/issues/6886)) ([47abda7](https://github.com/patternfly/patternfly-react/commit/47abda7831e21c58051b90982f02cb48f7a22a22)) - -## 4.31.21 (2022-02-07) - -### Bug Fixes - -- **TimePicker:** apply includeSeconds when making options ([#6865](https://github.com/patternfly/patternfly-react/issues/6865)) ([5b6d6c9](https://github.com/patternfly/patternfly-react/commit/5b6d6c9979046c111b00456622758f542627ac11)) - -## 4.31.20 (2022-02-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.19 (2022-02-07) - -### Bug Fixes - -- **Select:** remove logic from default inputAutoComplete ([#6873](https://github.com/patternfly/patternfly-react/issues/6873)) ([b3b61c1](https://github.com/patternfly/patternfly-react/commit/b3b61c175f23cdc9dad8c71054301d1090795ede)) - -## 4.31.18 (2022-02-04) - -### Bug Fixes - -- **TimePicker:** remove automatically validation from onChange event ([#6884](https://github.com/patternfly/patternfly-react/issues/6884)) ([e7088e4](https://github.com/patternfly/patternfly-react/commit/e7088e4e7a9348fa412d2815af1b0820ee7754ef)) - -## 4.31.17 (2022-02-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.16 (2022-02-02) - -### Bug Fixes - -- **numberinput:** import input group component instead ([#6850](https://github.com/patternfly/patternfly-react/issues/6850)) ([2a94545](https://github.com/patternfly/patternfly-react/commit/2a94545ead3be3ea3c987b1273e18b943315c36e)) - -## 4.31.15 (2022-01-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.14 (2022-01-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.13 (2022-01-26) - -### Reverts - -- Revert "Improve IAction type (#6108)" (#6862) ([94aea84](https://github.com/patternfly/patternfly-react/commit/94aea84036e26f4cc472b7d445ee49b088eb6a47)), closes [#6108](https://github.com/patternfly/patternfly-react/issues/6108) [#6862](https://github.com/patternfly/patternfly-react/issues/6862) - -## 4.31.12 (2022-01-26) - -### Bug Fixes - -- **OverflowMenu:** ignore menu being covered in intg. tests ([#6852](https://github.com/patternfly/patternfly-react/issues/6852)) ([066e2bb](https://github.com/patternfly/patternfly-react/commit/066e2bb994f4eca5538fb9287e5d10ddf4a30cac)) - -## 4.31.11 (2022-01-26) - -### Reverts - -- Revert "feat(Tabs): enforce restricted type for children (#6767)" (#6857) ([eca9a70](https://github.com/patternfly/patternfly-react/commit/eca9a708e8d53416e60a790ea876aa0b2e398212)), closes [#6767](https://github.com/patternfly/patternfly-react/issues/6767) [#6857](https://github.com/patternfly/patternfly-react/issues/6857) - -## 4.31.10 (2022-01-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.9 (2022-01-25) - -### Bug Fixes - -- **Select:** Footer keyboard bugs ([#6844](https://github.com/patternfly/patternfly-react/issues/6844)) ([7f06125](https://github.com/patternfly/patternfly-react/commit/7f06125cfb52884708107da82ca3800207c9846f)) - -## 4.31.8 (2022-01-24) - -### Bug Fixes - -- **table:** fixed action example ([#6800](https://github.com/patternfly/patternfly-react/issues/6800)) ([eaaedc2](https://github.com/patternfly/patternfly-react/commit/eaaedc28cf54cca1a47aaa5c4f5f76a11d32864d)) - -## 4.31.7 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.6 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.5 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.4 (2022-01-20) - -### Bug Fixes - -- **DatePicker:** update empty state validation and add onblur event ([#6822](https://github.com/patternfly/patternfly-react/issues/6822)) ([258e818](https://github.com/patternfly/patternfly-react/commit/258e81861adc0488ae42f349aff78f06f2874fa7)) - -## 4.31.3 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.31.2 (2022-01-20) - -### Bug Fixes - -- **Select:** Fixed dot next to the spinner in grouped view more variant ([#6831](https://github.com/patternfly/patternfly-react/issues/6831)) ([ccc81b4](https://github.com/patternfly/patternfly-react/commit/ccc81b4c8c30506f28e61e73dcbc106da50ca692)) - -## 4.31.1 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.31.0 (2022-01-20) - -### Features - -- **Truncate:** added Truncate component ([#6713](https://github.com/patternfly/patternfly-react/issues/6713)) ([c803b5d](https://github.com/patternfly/patternfly-react/commit/c803b5df3761f689172d79bbc71bc38623b0bf5a)) - -## 4.30.6 (2022-01-20) - -### Bug Fixes - -- **TextInputGroup:** address various issues ([#6774](https://github.com/patternfly/patternfly-react/issues/6774)) ([010058a](https://github.com/patternfly/patternfly-react/commit/010058acc7115fb76a35fe06634083ada62cece0)) - -## 4.30.5 (2022-01-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.30.4 (2022-01-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.30.3 (2022-01-19) - -### Bug Fixes - -- **examples:** amend row index in tree table examples ([#6830](https://github.com/patternfly/patternfly-react/issues/6830)) ([e676fb1](https://github.com/patternfly/patternfly-react/commit/e676fb1171618e957a4564af31c15ca6e3800507)), closes [#6719](https://github.com/patternfly/patternfly-react/issues/6719) - -## 4.30.2 (2022-01-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.30.1 (2022-01-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.30.0 (2022-01-19) - -### Features - -- **NumberInput:** call onMinus/onPlus on arrow-up/down pressed ([#6764](https://github.com/patternfly/patternfly-react/issues/6764)) ([545a7f8](https://github.com/patternfly/patternfly-react/commit/545a7f8791dbf2937416509a01b197cc1daf80db)) - -# 4.29.0 (2022-01-19) - -### Features - -- **TimePicker:** Allow for seconds via new prop; includeSeconds ([#6769](https://github.com/patternfly/patternfly-react/issues/6769)) ([417b51a](https://github.com/patternfly/patternfly-react/commit/417b51a6b8bd997042e16a0e821fb63281e53d30)) - -## 4.28.5 (2022-01-18) - -### Bug Fixes - -- **Tabs:** enable tabs scroll button for small window ([#6784](https://github.com/patternfly/patternfly-react/issues/6784)) ([a29b430](https://github.com/patternfly/patternfly-react/commit/a29b43094ae3d5ce7f4b26e4041cd595e675ee58)) - -## 4.28.4 (2022-01-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.28.3 (2022-01-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.28.2 (2022-01-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.28.1 (2022-01-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.28.0 (2022-01-17) - -### Features - -- **Tabs:** enforce restricted type for children ([#6767](https://github.com/patternfly/patternfly-react/issues/6767)) ([0d224df](https://github.com/patternfly/patternfly-react/commit/0d224dfb71b1a89c5783bd9ea290ece2f325ad21)) - -## 4.27.1 (2022-01-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.27.0 (2022-01-14) - -### Features - -- **DescriptionList:** add option to fill columns first ([#6736](https://github.com/patternfly/patternfly-react/issues/6736)) ([c955c29](https://github.com/patternfly/patternfly-react/commit/c955c2917dbc4b85ce58fac4f93845c429186e1b)) - -## 4.26.2 (2022-01-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.26.1 (2022-01-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.26.0 (2022-01-12) - -### Features - -- **expandable-section:** added indented variation ([#6763](https://github.com/patternfly/patternfly-react/issues/6763)) ([703b922](https://github.com/patternfly/patternfly-react/commit/703b9224e43bedd5b37ec41d8f26f2939836d610)) - -## 4.25.1 (2022-01-11) - -### Bug Fixes - -- **Select:** update typeahead Select children when any option attribute changes ([#6747](https://github.com/patternfly/patternfly-react/issues/6747)) ([1e03f3c](https://github.com/patternfly/patternfly-react/commit/1e03f3c6d0a7c507e33398c98863e40bb2233a62)) - -# 4.25.0 (2022-01-11) - -### Features - -- **ToggleGroup:** support disabling all items under the parent ([#6700](https://github.com/patternfly/patternfly-react/issues/6700)) ([a60c8f3](https://github.com/patternfly/patternfly-react/commit/a60c8f3485546c797750451714a70b7e84a4ba0f)) - -## 4.24.1 (2022-01-11) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.24.0 (2022-01-11) - -### Features - -- **Table:** update clickable area for checks/radios ([#6754](https://github.com/patternfly/patternfly-react/issues/6754)) ([c4f3c2d](https://github.com/patternfly/patternfly-react/commit/c4f3c2d7f515e3d6ad73d8b52238ca426281469a)) - -## 4.23.2 (2022-01-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.23.1 (2022-01-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.23.0 (2022-01-10) - -### Features - -- **Dropdown:** add plain-text variant support ([#6721](https://github.com/patternfly/patternfly-react/issues/6721)) ([e5000e3](https://github.com/patternfly/patternfly-react/commit/e5000e36194e36b9c6ae49efdb0a513125efcb70)) - -## 4.22.11 (2022-01-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.10 (2022-01-10) - -### Bug Fixes - -- **Tabs:** allow href navigation from tabs ([#6755](https://github.com/patternfly/patternfly-react/issues/6755)) ([290d89a](https://github.com/patternfly/patternfly-react/commit/290d89aed2dd4517db9859cc80ef2745cb8a779b)) - -## 4.22.9 (2022-01-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.8 (2022-01-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.7 (2022-01-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.6 (2022-01-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.5 (2022-01-07) - -### Bug Fixes - -- **jumplinks:** Updated JumpLinks demo to allow for horizontal display ([#6731](https://github.com/patternfly/patternfly-react/issues/6731)) ([f37b934](https://github.com/patternfly/patternfly-react/commit/f37b9342e678da247056c73767d5d40ff5435bda)) - -## 4.22.4 (2022-01-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.3 (2022-01-06) - -### Bug Fixes - -- **TopologyControlBar:** Update screen reader className to latest ([#6739](https://github.com/patternfly/patternfly-react/issues/6739)) ([ed9da57](https://github.com/patternfly/patternfly-react/commit/ed9da575fddf9fe7af8a891972f7a66520785411)) - -## 4.22.2 (2022-01-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.22.1 (2022-01-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.22.0 (2022-01-05) - -### Features - -- **Table:** allow a generic to be passed for cell props ([#6691](https://github.com/patternfly/patternfly-react/issues/6691)) ([e22c7be](https://github.com/patternfly/patternfly-react/commit/e22c7bebf630b7cd71e4dc434c593b69fa2fb2c8)) - -## 4.21.3 (2022-01-04) - -### Bug Fixes - -- **docs:** fix broken theme-patternfly-org link ([#6726](https://github.com/patternfly/patternfly-react/issues/6726)) ([4ba15e9](https://github.com/patternfly/patternfly-react/commit/4ba15e9d9611afbb80d995e4d63f5478c4212a9e)) - -## 4.21.2 (2022-01-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.21.1 (2022-01-04) - -### Bug Fixes - -- **OverflowMenu:** pass HTMLDivElements props to group and control divs ([#6674](https://github.com/patternfly/patternfly-react/issues/6674)) ([e6d0d64](https://github.com/patternfly/patternfly-react/commit/e6d0d6406a07de04f4b232ca9a21247c0e9746c0)) - -# 4.21.0 (2021-12-22) - -### Features - -- **Toolbar:** support customizing text in ToolbarChipGroupContent ([#6694](https://github.com/patternfly/patternfly-react/issues/6694)) ([24266ad](https://github.com/patternfly/patternfly-react/commit/24266adf569c027574abd1503b5e46974220349a)) - -## 4.20.5 (2021-12-16) - -### Bug Fixes - -- **LogViewer:** fix the issue that scrollbar could compress the content of the logs ([#6702](https://github.com/patternfly/patternfly-react/issues/6702)) ([11aab1f](https://github.com/patternfly/patternfly-react/commit/11aab1f71a1aa9959cf14b887ab55b845a794a00)) - -## 4.20.4 (2021-12-14) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.20.3 (2021-12-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.20.2 (2021-12-13) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.20.1 (2021-12-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.20.0 (2021-12-09) - -### Features - -- **Popover:** add composable header and alert variants ([#6664](https://github.com/patternfly/patternfly-react/issues/6664)) ([9028e8b](https://github.com/patternfly/patternfly-react/commit/9028e8ba5d674bde6a7e29532f7926e200dd632a)) - -## 4.19.1 (2021-12-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.19.0 (2021-12-08) - -### Features - -- **DualListSelector:** add composable tree example ([#6652](https://github.com/patternfly/patternfly-react/issues/6652)) ([5fe977b](https://github.com/patternfly/patternfly-react/commit/5fe977becb5dea615724abf846f315e50931c188)) - -## 4.18.1 (2021-12-07) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.18.0 (2021-12-06) - -### Features - -- **Card:** Add disabled card and clean up props ([#6659](https://github.com/patternfly/patternfly-react/issues/6659)) ([86f225a](https://github.com/patternfly/patternfly-react/commit/86f225ab2e02d617e2d380c4a7f7593037c50e84)) - -# 4.17.0 (2021-12-06) - -### Features - -- **MenuToggle:** add plain with text variant ([#6627](https://github.com/patternfly/patternfly-react/issues/6627)) ([1f4ca5e](https://github.com/patternfly/patternfly-react/commit/1f4ca5e36d7077da3ff3e6918874048c784216e0)) - -# 4.16.0 (2021-12-06) - -### Features - -- **Dropdown:** add toggle variants ([#6651](https://github.com/patternfly/patternfly-react/issues/6651)) ([6414309](https://github.com/patternfly/patternfly-react/commit/64143094aec86aed86adb320e059d987af4f5f24)) - -## 4.15.1 (2021-12-06) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.15.0 (2021-12-03) - -### Features - -- **Select:** add ability to persist filtered children state ([#6670](https://github.com/patternfly/patternfly-react/issues/6670)) ([f618577](https://github.com/patternfly/patternfly-react/commit/f618577582e389409978bd1d6512ca0cf5d855cf)) - -## 4.14.17 (2021-12-03) - -### Bug Fixes - -- **Slider:** fixed examples with custom steps and input ([#6662](https://github.com/patternfly/patternfly-react/issues/6662)) ([b4cab38](https://github.com/patternfly/patternfly-react/commit/b4cab38a2492564bf91e3711ce322951bcc6a051)) - -## 4.14.16 (2021-12-02) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.15 (2021-12-02) - -### Bug Fixes - -- **Tile:** fix selecting tile in tile demo ([#6653](https://github.com/patternfly/patternfly-react/issues/6653)) ([e12e44d](https://github.com/patternfly/patternfly-react/commit/e12e44d4b623de305b7df04174144a9496d282a7)) - -## 4.14.14 (2021-12-01) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.13 (2021-11-30) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.12 (2021-11-30) - -### Bug Fixes - -- **action-list:** added support for classname ([#6647](https://github.com/patternfly/patternfly-react/issues/6647)) ([dd3d2ce](https://github.com/patternfly/patternfly-react/commit/dd3d2ce32b4d3e7562faf465abdc508e17f097d9)) - -## 4.14.11 (2021-11-30) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.10 (2021-11-23) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.9 (2021-11-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.8 (2021-11-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.7 (2021-11-18) - -### Bug Fixes - -- **pagination:** updated toggleTemplate prop description to include ofWord prop ([#6622](https://github.com/patternfly/patternfly-react/issues/6622)) ([26733a6](https://github.com/patternfly/patternfly-react/commit/26733a6a256ad0e873afbc268a712027470fdeaa)) - -## 4.14.6 (2021-11-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.5 (2021-11-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.4 (2021-11-15) - -### Bug Fixes - -- **FileUpload:** Downgrade react-dropzone back to 9.0.0 to avoid a breaking type change, fix behavior regressions ([#6610](https://github.com/patternfly/patternfly-react/issues/6610)) ([574bf4f](https://github.com/patternfly/patternfly-react/commit/574bf4ff3ccf7f67ce750bc48067eaf826e99990)) - -## 4.14.3 (2021-11-15) - -### Bug Fixes - -- **Menu:** allow maxMenuHeight with Scrollabe ([#6608](https://github.com/patternfly/patternfly-react/issues/6608)) ([8c1f12c](https://github.com/patternfly/patternfly-react/commit/8c1f12c2b0e86bbc5ba1071db3ebf29fee7421a0)) - -## 4.14.2 (2021-11-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.14.1 (2021-11-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.14.0 (2021-11-12) - -### Features - -- **card:** added hoverable/selectable/selected-raised variant ([#6565](https://github.com/patternfly/patternfly-react/issues/6565)) ([8c60568](https://github.com/patternfly/patternfly-react/commit/8c60568ba4fa18398fed636710e222ce506de82c)) - -## 4.13.2 (2021-11-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.13.1 (2021-11-12) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.13.0 (2021-11-11) - -### Features - -- **ComposableTable:** add sticky columns and nested headers ([#6538](https://github.com/patternfly/patternfly-react/issues/6538)) ([f11245b](https://github.com/patternfly/patternfly-react/commit/f11245bfccc8c6c02a9d5545a69ed533743cc552)) - -# 4.12.0 (2021-11-11) - -### Features - -- **contextselector:** added support for context selector items as links ([#6554](https://github.com/patternfly/patternfly-react/issues/6554)) ([c465388](https://github.com/patternfly/patternfly-react/commit/c4653881eee0cd8ec8e3a7125bbef0bded9f2de0)) - -# 4.11.0 (2021-11-11) - -### Features - -- **Navigation:** Added exemple with third level ([#6564](https://github.com/patternfly/patternfly-react/issues/6564)) ([c30da53](https://github.com/patternfly/patternfly-react/commit/c30da532855118f705c8cfc87c545bb1eea11ebb)) - -# 4.10.0 (2021-11-11) - -### Features - -- enhance type correctness of CodeEditor ([#6579](https://github.com/patternfly/patternfly-react/issues/6579)) ([e1ad65c](https://github.com/patternfly/patternfly-react/commit/e1ad65c225968d5a9c74019d19e4a3c5e2666926)) - -## 4.9.4 (2021-11-10) - -### Bug Fixes - -- **jumplinks:** fixed to always set clicked item as active ([#6542](https://github.com/patternfly/patternfly-react/issues/6542)) ([845c98f](https://github.com/patternfly/patternfly-react/commit/845c98f5f3df8aa9b6acc190707c5f1d7bf3ca38)) - -## 4.9.3 (2021-11-10) - -### Bug Fixes - -- **Menu:** stop passing disableHover to DrilldownMenu DOM ([#6571](https://github.com/patternfly/patternfly-react/issues/6571)) ([63dcf25](https://github.com/patternfly/patternfly-react/commit/63dcf256723848ff3789828fc0a5f86d5009fc87)) - -## 4.9.2 (2021-11-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.9.1 (2021-11-10) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.9.0 (2021-11-09) - -### Features - -- **Table:** set default sort direction ([#6544](https://github.com/patternfly/patternfly-react/issues/6544)) ([9ee4942](https://github.com/patternfly/patternfly-react/commit/9ee49428c8e1041721f2a09f8176a5aba3335049)) - -## 4.8.4 (2021-11-09) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.8.3 (2021-11-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.8.2 (2021-11-08) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.8.1 (2021-11-08) - -### Bug Fixes - -- **acccessconsoles:** use object type Select options values in order to not mix displayed text with option keys ([#6496](https://github.com/patternfly/patternfly-react/issues/6496)) ([975c8e1](https://github.com/patternfly/patternfly-react/commit/975c8e14d7ea8c53eb4048ea6ef73e804b3ad2be)) - -# 4.8.0 (2021-11-04) - -### Features - -- **log-viewer:** support ANSI color ([#6519](https://github.com/patternfly/patternfly-react/issues/6519)) ([936a699](https://github.com/patternfly/patternfly-react/commit/936a699b0514a492d3c40be08932fb7bab275cce)) - -## 4.7.11 (2021-11-01) - -### Bug Fixes - -- **AboutModal:** allow to disable FocusTrap ([#6509](https://github.com/patternfly/patternfly-react/issues/6509)) ([72536e1](https://github.com/patternfly/patternfly-react/commit/72536e1f73641ff3f19f865f08dbb41ad0ee7b9f)) - -## 4.7.10 (2021-10-29) - -### Bug Fixes - -- **Banner:** forward props ([#6511](https://github.com/patternfly/patternfly-react/issues/6511)) ([e36c890](https://github.com/patternfly/patternfly-react/commit/e36c89077afa82340994c0e3c0fc929e601e01bc)) - -## 4.7.9 (2021-10-28) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.7.8 (2021-10-27) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.7.7 (2021-10-27) - -### Bug Fixes - -- change transformer cjs package to private ([#6515](https://github.com/patternfly/patternfly-react/issues/6515)) ([efcb357](https://github.com/patternfly/patternfly-react/commit/efcb3573b71541328ce2b16caa80ce33b2a62131)) - -## 4.7.6 (2021-10-26) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.7.5 (2021-10-26) - -### Bug Fixes - -- **tokens:** added check for no matching var to avoid infinite loop ([#6502](https://github.com/patternfly/patternfly-react/issues/6502)) ([99605c2](https://github.com/patternfly/patternfly-react/commit/99605c213f12490d0abe75910e05c3e6da26a1f3)) - -## 4.7.4 (2021-10-26) - -### Bug Fixes - -- add transformer package ([#6507](https://github.com/patternfly/patternfly-react/issues/6507)) ([daffd28](https://github.com/patternfly/patternfly-react/commit/daffd2864388abe63e625f962a8b38c2b7056209)) - -## 4.7.3 (2021-10-26) - -### Bug Fixes - -- **transformer:** publish transformer in patternfly org ([#6506](https://github.com/patternfly/patternfly-react/issues/6506)) ([b739af3](https://github.com/patternfly/patternfly-react/commit/b739af318400b41d4e9a53bdff6232ecc176916e)) - -## 4.7.2 (2021-10-26) - -### Bug Fixes - -- **readme:** update react-core readme ([#6505](https://github.com/patternfly/patternfly-react/issues/6505)) ([d4f9a11](https://github.com/patternfly/patternfly-react/commit/d4f9a114584eea7ab67873f199e80b348886e14b)) - -## 4.7.1 (2021-10-26) - -### Bug Fixes - -- **DualListSelector:** account for duplicate folders ([#6499](https://github.com/patternfly/patternfly-react/issues/6499)) ([e531e68](https://github.com/patternfly/patternfly-react/commit/e531e68e7adc58459b3630f5c915ed69e3021012)) - -# 4.7.0 (2021-10-26) - -### Features - -- **toolbar:** add sticky top modifier to toolbar ([#6447](https://github.com/patternfly/patternfly-react/issues/6447)) ([fe7605a](https://github.com/patternfly/patternfly-react/commit/fe7605a67428b43ec00b3cb2117270296576737c)) - -## 4.6.1 (2021-10-26) - -### Bug Fixes - -- **types:** SelectOptionProp made optional ([#6503](https://github.com/patternfly/patternfly-react/issues/6503)) ([716ac80](https://github.com/patternfly/patternfly-react/commit/716ac80e2414507d589ee3002fc0cea0068ae59c)) - -# 4.6.0 (2021-10-26) - -### Features - -- **TextInputGroup:** add text input group ([#6482](https://github.com/patternfly/patternfly-react/issues/6482)) ([a02fd4f](https://github.com/patternfly/patternfly-react/commit/a02fd4fe3345245b2252ee5a261f5b1460490642)), closes [patternfly/patternfly-react#6409](https://github.com/patternfly/patternfly-react/issues/6409) - -## 4.5.4 (2021-10-26) - -### Bug Fixes - -- **KebabToggle:** adds event to onToggle definition ([#6490](https://github.com/patternfly/patternfly-react/issues/6490)) ([0441575](https://github.com/patternfly/patternfly-react/commit/04415757917062aa13c06b34bd94ef38c2334088)) - -## 4.5.3 (2021-10-26) - -### Bug Fixes - -- **Modal:** test clean up ([#6489](https://github.com/patternfly/patternfly-react/issues/6489)) ([c8eaa7c](https://github.com/patternfly/patternfly-react/commit/c8eaa7c838fbedb98ea0f38e4f535488040a72e2)) - -## 4.5.2 (2021-10-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.5.1 (2021-10-25) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.5.0 (2021-10-25) - -### Features - -- **Tabs:** Added support for tab content body with padding, added tabs open and tab secondary tabs demos ([#6484](https://github.com/patternfly/patternfly-react/issues/6484)) ([0ccbe9d](https://github.com/patternfly/patternfly-react/commit/0ccbe9d1e6e0dac0730466c92a90fe2cd9f6560d)) - -## 4.4.1 (2021-10-21) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# 4.4.0 (2021-10-21) - -### Features - -- **label:** added compact label, updated horizontal grid card demo ([#6448](https://github.com/patternfly/patternfly-react/issues/6448)) ([89e0431](https://github.com/patternfly/patternfly-react/commit/89e04317924282140606d45f2292aa3f658b4b6c)) - -## 4.3.1 (2021-10-21) - -### Bug Fixes - -- **DescriptionListGroup:** forward props to DOM ([#6466](https://github.com/patternfly/patternfly-react/issues/6466)) ([b78e2aa](https://github.com/patternfly/patternfly-react/commit/b78e2aa9c0360ce8418f6e7b55274ea1a50de518)) - -# 4.3.0 (2021-10-20) - -### Features - -- **Progress:** allow node titles ([#6470](https://github.com/patternfly/patternfly-react/issues/6470)) ([46d5252](https://github.com/patternfly/patternfly-react/commit/46d52523ad5111bb11729c2750abe9aeb35d9326)) - -# 4.2.0 (2021-10-20) - -### Features - -- **DualListSelector:** add disabled flag ([#6442](https://github.com/patternfly/patternfly-react/issues/6442)) ([85e1314](https://github.com/patternfly/patternfly-react/commit/85e131435be12c2df79336e9fa56987ed3717417)) - -## 4.1.10 (2021-10-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## 4.1.9 (2021-10-20) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [4.1.8](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.7...eslint-plugin-patternfly-react@4.1.8) (2021-08-19) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [4.1.7](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.6...eslint-plugin-patternfly-react@4.1.7) (2021-06-30) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [4.1.6](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.5...eslint-plugin-patternfly-react@4.1.6) (2021-06-30) - -### Bug Fixes - -- **ci:** change master branch to main ([4ac4129](https://github.com/patternfly/patternfly-react/commit/4ac4129e8da9a37367ea7612019f8d7af1ed8836)) - -## [4.1.5](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.4...eslint-plugin-patternfly-react@4.1.5) (2020-11-20) - -### Bug Fixes - -- **eslint:** fix @patternfly/react-icons/createIcon differently ([#5163](https://github.com/patternfly/patternfly-react/issues/5163)) ([271464d](https://github.com/patternfly/patternfly-react/commit/271464d3293704b29a24e5a4f140deb2b3985cda)) - -## [4.1.4](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.3...eslint-plugin-patternfly-react@4.1.4) (2020-09-22) - -### Bug Fixes - -- **eslint-plugin:** upgrade react-hooks ([#4857](https://github.com/patternfly/patternfly-react/issues/4857)) ([8c89cc1](https://github.com/patternfly/patternfly-react/commit/8c89cc130bf195fb892946a5a8f6730a7af1c3a2)) - -## [4.1.3](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.2...eslint-plugin-patternfly-react@4.1.3) (2020-08-24) - -### Bug Fixes - -- **docs:** use ids and h3s ([#4720](https://github.com/patternfly/patternfly-react/issues/4720)) ([a3f684f](https://github.com/patternfly/patternfly-react/commit/a3f684fa23cfce3d8e79b86206773292790cec5c)) - -## [4.1.2](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.1...eslint-plugin-patternfly-react@4.1.2) (2020-07-17) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [4.1.1](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@4.1.0...eslint-plugin-patternfly-react@4.1.1) (2020-06-15) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -# [4.1.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.4.1...eslint-plugin-patternfly-react@4.1.0) (2020-05-15) - -### Features - -- **master:** merge v4 ([#4255](https://github.com/patternfly/patternfly-react/issues/4255)) ([567c0b8](https://github.com/patternfly/patternfly-react/commit/567c0b88b10d2cd629ce380745a24dacdf9dd3d1)), closes [#3868](https://github.com/patternfly/patternfly-react/issues/3868) [#3915](https://github.com/patternfly/patternfly-react/issues/3915) [#3921](https://github.com/patternfly/patternfly-react/issues/3921) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3843](https://github.com/patternfly/patternfly-react/issues/3843) [#3884](https://github.com/patternfly/patternfly-react/issues/3884) [#3609](https://github.com/patternfly/patternfly-react/issues/3609) [#3880](https://github.com/patternfly/patternfly-react/issues/3880) [#3865](https://github.com/patternfly/patternfly-react/issues/3865) [#3894](https://github.com/patternfly/patternfly-react/issues/3894) [#3897](https://github.com/patternfly/patternfly-react/issues/3897) [#3892](https://github.com/patternfly/patternfly-react/issues/3892) [#3891](https://github.com/patternfly/patternfly-react/issues/3891) [#3908](https://github.com/patternfly/patternfly-react/issues/3908) [#3910](https://github.com/patternfly/patternfly-react/issues/3910) [#3861](https://github.com/patternfly/patternfly-react/issues/3861) [#3877](https://github.com/patternfly/patternfly-react/issues/3877) [#3916](https://github.com/patternfly/patternfly-react/issues/3916) [#3886](https://github.com/patternfly/patternfly-react/issues/3886) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3927](https://github.com/patternfly/patternfly-react/issues/3927) [#3933](https://github.com/patternfly/patternfly-react/issues/3933) [#3221](https://github.com/patternfly/patternfly-react/issues/3221) [#3873](https://github.com/patternfly/patternfly-react/issues/3873) [#3928](https://github.com/patternfly/patternfly-react/issues/3928) [#3929](https://github.com/patternfly/patternfly-react/issues/3929) [#2582](https://github.com/patternfly/patternfly-react/issues/2582) [#3296](https://github.com/patternfly/patternfly-react/issues/3296) [#3924](https://github.com/patternfly/patternfly-react/issues/3924) [#1529](https://github.com/patternfly/patternfly-react/issues/1529) [#3903](https://github.com/patternfly/patternfly-react/issues/3903) [#3904](https://github.com/patternfly/patternfly-react/issues/3904) [#3974](https://github.com/patternfly/patternfly-react/issues/3974) [#3970](https://github.com/patternfly/patternfly-react/issues/3970) [#3920](https://github.com/patternfly/patternfly-react/issues/3920) [#3945](https://github.com/patternfly/patternfly-react/issues/3945) [#3978](https://github.com/patternfly/patternfly-react/issues/3978) [#3962](https://github.com/patternfly/patternfly-react/issues/3962) [#3975](https://github.com/patternfly/patternfly-react/issues/3975) [#3906](https://github.com/patternfly/patternfly-react/issues/3906) [#3870](https://github.com/patternfly/patternfly-react/issues/3870) [#3958](https://github.com/patternfly/patternfly-react/issues/3958) [#3922](https://github.com/patternfly/patternfly-react/issues/3922) [#3985](https://github.com/patternfly/patternfly-react/issues/3985) [#3991](https://github.com/patternfly/patternfly-react/issues/3991) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3843](https://github.com/patternfly/patternfly-react/issues/3843) [#3884](https://github.com/patternfly/patternfly-react/issues/3884) [#3609](https://github.com/patternfly/patternfly-react/issues/3609) [#3880](https://github.com/patternfly/patternfly-react/issues/3880) [#3865](https://github.com/patternfly/patternfly-react/issues/3865) [#3894](https://github.com/patternfly/patternfly-react/issues/3894) [#3897](https://github.com/patternfly/patternfly-react/issues/3897) [#3892](https://github.com/patternfly/patternfly-react/issues/3892) [#3891](https://github.com/patternfly/patternfly-react/issues/3891) [#3908](https://github.com/patternfly/patternfly-react/issues/3908) [#3910](https://github.com/patternfly/patternfly-react/issues/3910) [#3861](https://github.com/patternfly/patternfly-react/issues/3861) [#3877](https://github.com/patternfly/patternfly-react/issues/3877) [#3916](https://github.com/patternfly/patternfly-react/issues/3916) [#3844](https://github.com/patternfly/patternfly-react/issues/3844) [#3919](https://github.com/patternfly/patternfly-react/issues/3919) [#3923](https://github.com/patternfly/patternfly-react/issues/3923) [#3838](https://github.com/patternfly/patternfly-react/issues/3838) [#3895](https://github.com/patternfly/patternfly-react/issues/3895) [#3896](https://github.com/patternfly/patternfly-react/issues/3896) [#3771](https://github.com/patternfly/patternfly-react/issues/3771) [#3940](https://github.com/patternfly/patternfly-react/issues/3940) [#3941](https://github.com/patternfly/patternfly-react/issues/3941) [#3441](https://github.com/patternfly/patternfly-react/issues/3441) [#3950](https://github.com/patternfly/patternfly-react/issues/3950) [#3642](https://github.com/patternfly/patternfly-react/issues/3642) [#3964](https://github.com/patternfly/patternfly-react/issues/3964) [#3968](https://github.com/patternfly/patternfly-react/issues/3968) [#3967](https://github.com/patternfly/patternfly-react/issues/3967) [#3971](https://github.com/patternfly/patternfly-react/issues/3971) [#3942](https://github.com/patternfly/patternfly-react/issues/3942) [#3898](https://github.com/patternfly/patternfly-react/issues/3898) [#3898](https://github.com/patternfly/patternfly-react/issues/3898) [#3976](https://github.com/patternfly/patternfly-react/issues/3976) [#3889](https://github.com/patternfly/patternfly-react/issues/3889) [#3641](https://github.com/patternfly/patternfly-react/issues/3641) [#3982](https://github.com/patternfly/patternfly-react/issues/3982) [#3979](https://github.com/patternfly/patternfly-react/issues/3979) [#3989](https://github.com/patternfly/patternfly-react/issues/3989) [#4017](https://github.com/patternfly/patternfly-react/issues/4017) [#4022](https://github.com/patternfly/patternfly-react/issues/4022) [#4014](https://github.com/patternfly/patternfly-react/issues/4014) [#4048](https://github.com/patternfly/patternfly-react/issues/4048) [#4050](https://github.com/patternfly/patternfly-react/issues/4050) [#4051](https://github.com/patternfly/patternfly-react/issues/4051) [#4058](https://github.com/patternfly/patternfly-react/issues/4058) [#4030](https://github.com/patternfly/patternfly-react/issues/4030) [#4031](https://github.com/patternfly/patternfly-react/issues/4031) [#3996](https://github.com/patternfly/patternfly-react/issues/3996) [#4001](https://github.com/patternfly/patternfly-react/issues/4001) [#4004](https://github.com/patternfly/patternfly-react/issues/4004) [#4066](https://github.com/patternfly/patternfly-react/issues/4066) [#4021](https://github.com/patternfly/patternfly-react/issues/4021) [#4061](https://github.com/patternfly/patternfly-react/issues/4061) [#4026](https://github.com/patternfly/patternfly-react/issues/4026) [#4069](https://github.com/patternfly/patternfly-react/issues/4069) [#4073](https://github.com/patternfly/patternfly-react/issues/4073) [#4036](https://github.com/patternfly/patternfly-react/issues/4036) [#4019](https://github.com/patternfly/patternfly-react/issues/4019) [#4081](https://github.com/patternfly/patternfly-react/issues/4081) [#4033](https://github.com/patternfly/patternfly-react/issues/4033) [#4065](https://github.com/patternfly/patternfly-react/issues/4065) [#4078](https://github.com/patternfly/patternfly-react/issues/4078) [#4032](https://github.com/patternfly/patternfly-react/issues/4032) [#4029](https://github.com/patternfly/patternfly-react/issues/4029) [#4064](https://github.com/patternfly/patternfly-react/issues/4064) [#4063](https://github.com/patternfly/patternfly-react/issues/4063) [#2593](https://github.com/patternfly/patternfly-react/issues/2593) [#4076](https://github.com/patternfly/patternfly-react/issues/4076) [#4099](https://github.com/patternfly/patternfly-react/issues/4099) [#4038](https://github.com/patternfly/patternfly-react/issues/4038) [#4116](https://github.com/patternfly/patternfly-react/issues/4116) [#3960](https://github.com/patternfly/patternfly-react/issues/3960) [#4121](https://github.com/patternfly/patternfly-react/issues/4121) [#4123](https://github.com/patternfly/patternfly-react/issues/4123) [#4025](https://github.com/patternfly/patternfly-react/issues/4025) [#4126](https://github.com/patternfly/patternfly-react/issues/4126) [#4122](https://github.com/patternfly/patternfly-react/issues/4122) [#4086](https://github.com/patternfly/patternfly-react/issues/4086) [#4127](https://github.com/patternfly/patternfly-react/issues/4127) [#4129](https://github.com/patternfly/patternfly-react/issues/4129) [#4111](https://github.com/patternfly/patternfly-react/issues/4111) [#4136](https://github.com/patternfly/patternfly-react/issues/4136) [#4138](https://github.com/patternfly/patternfly-react/issues/4138) [#4141](https://github.com/patternfly/patternfly-react/issues/4141) [#4145](https://github.com/patternfly/patternfly-react/issues/4145) [#4034](https://github.com/patternfly/patternfly-react/issues/4034) [#4144](https://github.com/patternfly/patternfly-react/issues/4144) [#4152](https://github.com/patternfly/patternfly-react/issues/4152) [#4158](https://github.com/patternfly/patternfly-react/issues/4158) [#4157](https://github.com/patternfly/patternfly-react/issues/4157) [#4156](https://github.com/patternfly/patternfly-react/issues/4156) [#4147](https://github.com/patternfly/patternfly-react/issues/4147) [#4159](https://github.com/patternfly/patternfly-react/issues/4159) [#4170](https://github.com/patternfly/patternfly-react/issues/4170) [#4142](https://github.com/patternfly/patternfly-react/issues/4142) [#4175](https://github.com/patternfly/patternfly-react/issues/4175) [#4176](https://github.com/patternfly/patternfly-react/issues/4176) [#4187](https://github.com/patternfly/patternfly-react/issues/4187) [#4188](https://github.com/patternfly/patternfly-react/issues/4188) [#4140](https://github.com/patternfly/patternfly-react/issues/4140) [#4193](https://github.com/patternfly/patternfly-react/issues/4193) [#4154](https://github.com/patternfly/patternfly-react/issues/4154) [#4192](https://github.com/patternfly/patternfly-react/issues/4192) [#4190](https://github.com/patternfly/patternfly-react/issues/4190) [#4199](https://github.com/patternfly/patternfly-react/issues/4199) [#4133](https://github.com/patternfly/patternfly-react/issues/4133) [#4165](https://github.com/patternfly/patternfly-react/issues/4165) [#4208](https://github.com/patternfly/patternfly-react/issues/4208) [#4212](https://github.com/patternfly/patternfly-react/issues/4212) [#4130](https://github.com/patternfly/patternfly-react/issues/4130) [#4219](https://github.com/patternfly/patternfly-react/issues/4219) [#4166](https://github.com/patternfly/patternfly-react/issues/4166) [#4202](https://github.com/patternfly/patternfly-react/issues/4202) [#4216](https://github.com/patternfly/patternfly-react/issues/4216) [#4225](https://github.com/patternfly/patternfly-react/issues/4225) [#4221](https://github.com/patternfly/patternfly-react/issues/4221) [#4146](https://github.com/patternfly/patternfly-react/issues/4146) [#3951](https://github.com/patternfly/patternfly-react/issues/3951) [#3681](https://github.com/patternfly/patternfly-react/issues/3681) [#4243](https://github.com/patternfly/patternfly-react/issues/4243) [#4220](https://github.com/patternfly/patternfly-react/issues/4220) [#4153](https://github.com/patternfly/patternfly-react/issues/4153) [#4209](https://github.com/patternfly/patternfly-react/issues/4209) [#4249](https://github.com/patternfly/patternfly-react/issues/4249) [#4239](https://github.com/patternfly/patternfly-react/issues/4239) [#4247](https://github.com/patternfly/patternfly-react/issues/4247) [#4246](https://github.com/patternfly/patternfly-react/issues/4246) [#3684](https://github.com/patternfly/patternfly-react/issues/3684) [#4223](https://github.com/patternfly/patternfly-react/issues/4223) [#4195](https://github.com/patternfly/patternfly-react/issues/4195) [#4254](https://github.com/patternfly/patternfly-react/issues/4254) - -## [0.4.2](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.4.1...eslint-plugin-patternfly-react@0.4.2) (2020-05-05) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [0.4.1](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.4.0...eslint-plugin-patternfly-react@0.4.1) (2020-03-02) - -### Bug Fixes - -- **eslint:** fix eslint recommendations ([#3858](https://github.com/patternfly/patternfly-react/issues/3858)) ([09cd0b8](https://github.com/patternfly/patternfly-react/commit/09cd0b8ca1495a1c4f9c870259b250ad3450e6ec)) - -# [0.4.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.3.0...eslint-plugin-patternfly-react@0.4.0) (2020-02-03) - -### Features - -- **eslint:** add react-hooks to eslint-plugin-patternfly-react ([#3636](https://github.com/patternfly/patternfly-react/issues/3636)) ([fb62dc1](https://github.com/patternfly/patternfly-react/commit/fb62dc11fea53222334d8708f0ff41db8eadaafa)) - -# [0.3.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.2.3...eslint-plugin-patternfly-react@0.3.0) (2019-10-16) - -### Features - -- **eslint:** add eslint-plugin-react-hooks ([#3083](https://github.com/patternfly/patternfly-react/issues/3083)) ([c47f143](https://github.com/patternfly/patternfly-react/commit/c47f143)) - -## 0.2.3 (2019-04-15) - -### Bug Fixes - -- Update React with changes from core ([#1703](https://github.com/patternfly/patternfly-react/issues/1703)) ([a219cae](https://github.com/patternfly/patternfly-react/commit/a219cae)), closes [#1680](https://github.com/patternfly/patternfly-react/issues/1680) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) - -## 0.2.2 (2019-03-04) - -**Note:** Version bump only for package eslint-plugin-patternfly-react - -## [0.2.1](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@0.2.0...eslint-plugin-patternfly-react@0.2.1) (2019-01-18) - -**Note:** Version bump only for package eslint-plugin-patternfly-react +## 4.80.5-alpha.0 (2023-02-10) diff --git a/packages/eslint-plugin-patternfly-react/README.md b/packages/eslint-plugin-patternfly-react/README.md index f60a9ae6b58..347fa5ad0ed 100644 --- a/packages/eslint-plugin-patternfly-react/README.md +++ b/packages/eslint-plugin-patternfly-react/README.md @@ -4,13 +4,13 @@ This package provides PatternFly React all ESLint rules bundled together for use ### Installing -``` +```sh yarn add -D eslint-plugin-patternfly-react ``` or -``` +```sh npm install eslint-plugin-patternfly-react --save-dev ``` diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js index cf07f26733d..e0df907dcc2 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js @@ -15,10 +15,11 @@ module.exports = { ] }, create(context) { + const sourceCode = context.sourceCode ?? context.getSourceCode(); const [importMap = {}] = context.options; return { ImportDeclaration(node) { - const defaultImport = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier'); + const defaultImport = node.specifiers.find((spec) => spec.type === 'ImportDefaultSpecifier'); if (!defaultImport) { return; } @@ -33,9 +34,11 @@ module.exports = { received: receivedName }, fix(fixer) { - const [varDecl] = context.getDeclaredVariables(node); + const [varDecl] = sourceCode.getDeclaredVariables + ? sourceCode.getDeclaredVariables(node, fixer) + : context.getDeclaredVariables(); return [ - ...varDecl.references.map(ref => fixer.replaceText(ref.identifier, expectedName)), + ...varDecl.references.map((ref) => fixer.replaceText(ref.identifier, expectedName)), fixer.replaceText(defaultImport, expectedName) ]; } diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js index b15e733481f..911876d2ac3 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js @@ -12,7 +12,7 @@ function makeImport(specifier, moduleName) { res += '/dist/esm'; if (moduleName.includes('icon')) { res += '/icons/'; - res += specifier.imported.name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`).replace(/^-/, ''); + res += specifier.imported.name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).replace(/^-/, ''); } else { res += `/${specifier.imported.name}`; } @@ -42,7 +42,7 @@ module.exports = { ImportDeclaration(node) { if (/@patternfly\/react-(tokens|icons)(\/dist\/(js|esm))?/.test(node.source.value)) { const esmSpecifiers = node.specifiers.filter( - specifier => + (specifier) => specifier.type === 'ImportSpecifier' && !( node.source.value.startsWith('@patternfly/react-icons') && @@ -56,7 +56,7 @@ module.exports = { fix(fixer) { return fixer.replaceText( node, - esmSpecifiers.map(spec => makeImport(spec, node.source.value)).join('\n') + esmSpecifiers.map((spec) => makeImport(spec, node.source.value)).join('\n') ); } }); diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js b/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js index cd782a46a39..404922593c6 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js @@ -16,6 +16,7 @@ module.exports = { ] }, create(context) { + const sourceCode = context.sourceCode ?? context.getSourceCode(); return { ExportNamedDeclaration(node) { if (!node.declaration) { @@ -39,12 +40,11 @@ module.exports = { typeAnnotation.typeAnnotation.typeName.left.name === 'React' && ['FunctionComponent', 'FC', 'SFC'].includes(typeAnnotation.typeAnnotation.typeName.right.name) ) { - const displayNameNode = context - .getSourceCode() - .ast.body.filter(n => n.type === 'ExpressionStatement') - .filter(n => n.expression.left) + const displayNameNode = sourceCode.ast.body + .filter((n) => n.type === 'ExpressionStatement') + .filter((n) => n.expression.left) .find( - n => n.expression.left.object.name === displayName && n.expression.left.property.name === 'displayName' + (n) => n.expression.left.object.name === displayName && n.expression.left.property.name === 'displayName' ); if (!displayNameNode) { context.report({ @@ -64,7 +64,7 @@ module.exports = { declaration.superClass.property.name === 'Component' ) { const classBody = declaration.body.body; - const displayNameNode = classBody.find(n => n.type === 'ClassProperty' && n.key.name === 'displayName'); + const displayNameNode = classBody.find((n) => n.type === 'ClassProperty' && n.key.name === 'displayName'); if (!displayNameNode) { context.report({ node, diff --git a/packages/eslint-plugin-patternfly-react/package.json b/packages/eslint-plugin-patternfly-react/package.json index 5ebb59b53dc..81a8281c36f 100644 --- a/packages/eslint-plugin-patternfly-react/package.json +++ b/packages/eslint-plugin-patternfly-react/package.json @@ -1,7 +1,6 @@ { "name": "eslint-plugin-patternfly-react", - "version": "4.80.5-alpha.0", - "private": false, + "version": "5.4.4", "main": "./lib/index.js", "license": "MIT", "publishConfig": { @@ -22,24 +21,23 @@ }, "homepage": "https://github.com/patternfly/patternfly-react/blob/main/packages/eslint-plugin/README.md", "dependencies": { - "@babel/eslint-parser": "^7.19.1", + "@babel/eslint-parser": "^7.24.7", "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^8.6.0", - "eslint-config-standard": "^11.0.0", - "eslint-config-standard-jsx": "^5.0.0", - "eslint-config-standard-react": "^6.0.0", - "eslint-plugin-import": "^2.13.0", - "eslint-plugin-jest": "^21.15.0", - "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-node": "^6.0.1", - "eslint-plugin-prettier": "^2.6.0", - "eslint-plugin-promise": "^3.7.0", - "eslint-plugin-react": "^7.7.0", - "eslint-plugin-react-hooks": "^4.1.2", - "eslint-plugin-rulesdir": "^0.1.0", - "eslint-plugin-standard": "^3.0.1" + "eslint-config-prettier": "^9.1.0", + "eslint-config-standard": "^17.1.0", + "eslint-config-standard-jsx": "^11.0.0", + "eslint-config-standard-react": "^13.0.0", + "eslint-plugin-import": "^2.30.0", + "eslint-plugin-jest": "^27.9.0", + "eslint-plugin-jsx-a11y": "^6.10.2", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-promise": "^6.6.0", + "eslint-plugin-react": "^7.37.2", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-rulesdir": "^0.2.2", + "eslint-plugin-standard": "^4.1.0" }, "peerDependencies": { - "eslint": ">=5" + "eslint": ">=5.16.0" } } diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md index 97879893c7e..a64d0ac299d 100644 --- a/packages/react-charts/CHANGELOG.md +++ b/packages/react-charts/CHANGELOG.md @@ -3,4179 +3,484 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. -# [7.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.9...@patternfly/react-charts@7.0.0-alpha.10) (2023-03-02) - -**Note:** Version bump only for package @patternfly/react-charts - -# 7.0.0-alpha.9 (2023-03-01) - -**Note:** Version bump only for package @patternfly/react-charts - -# 7.0.0-alpha.8 (2023-02-27) - -**Note:** Version bump only for package @patternfly/react-charts - -# [7.0.0-alpha.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.6...@patternfly/react-charts@7.0.0-alpha.7) (2023-02-15) +## [7.4.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.8...@patternfly/react-charts@7.4.9) (2025-01-24) **Note:** Version bump only for package @patternfly/react-charts -# 7.0.0-alpha.6 (2023-02-10) +## [7.4.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.7...@patternfly/react-charts@7.4.8) (2025-01-07) ### Bug Fixes -- **charts:** fix broken tooltip examples due to Tooltip outputting a new div tag in the SVG ([#8592](https://github.com/patternfly/patternfly-react/issues/8592)) ([a7d2e12](https://github.com/patternfly/patternfly-react/commit/a7d2e12769c1208eedb88e5574d7ae7dd34e434c)) - -# [7.0.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.4...@patternfly/react-charts@7.0.0-alpha.5) (2023-02-09) - -### Features - -- **charts:** remove deprecated theme variant code ([#8590](https://github.com/patternfly/patternfly-react/issues/8590)) ([12e1c47](https://github.com/patternfly/patternfly-react/commit/12e1c472f1260d161f178e170782de8a7fc63b80)) - -# [7.0.0-alpha.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.3...@patternfly/react-charts@7.0.0-alpha.4) (2023-02-08) - -### Features - -- **charts:** update Victory dependencies for v5 ([#8606](https://github.com/patternfly/patternfly-react/issues/8606)) ([19a5e93](https://github.com/patternfly/patternfly-react/commit/19a5e939c417a4ad31b4e2a5fae24b1d7698a025)) - -# 7.0.0-alpha.3 (2023-02-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.18 (2023-01-23) +- **charts:** fix Victory 37.3.4 issues ([#11355](https://github.com/patternfly/patternfly-react/issues/11355)) ([a50c281](https://github.com/patternfly/patternfly-react/commit/a50c28145dfe02362ecfe168282ff9ca07cda722)) -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.17 (2023-01-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.16 (2023-01-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.15 (2022-12-08) +## [7.4.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.6...@patternfly/react-charts@7.4.7) (2024-11-19) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.14 (2022-12-07) +## [7.4.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.5...@patternfly/react-charts@7.4.6) (2024-11-07) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.13 (2022-12-01) +## [7.4.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.4...@patternfly/react-charts@7.4.5) (2024-10-17) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.12 (2022-11-16) +## [7.4.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.3...@patternfly/react-charts@7.4.4) (2024-10-07) -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.11 (2022-10-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.94.10 (2022-10-26) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **deps:** update dependency tslib to ^2.7.0 ([#11082](https://github.com/patternfly/patternfly-react/issues/11082)) ([7dfd76f](https://github.com/patternfly/patternfly-react/commit/7dfd76f01ec8fefae2537f406cd658edcd25cc91)) -## [6.94.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.94.8...@patternfly/react-charts@6.94.9) (2022-10-17) +## [7.4.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.2...@patternfly/react-charts@7.4.3) (2024-09-26) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.8 (2022-10-14) - -**Note:** Version bump only for package @patternfly/react-charts +## [7.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.1...@patternfly/react-charts@7.4.2) (2024-09-19) -## 6.94.7 (2022-10-05) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **charts:** defaultProps deprecation warning ([#11019](https://github.com/patternfly/patternfly-react/issues/11019)) ([#11028](https://github.com/patternfly/patternfly-react/issues/11028)) ([9b9a7ba](https://github.com/patternfly/patternfly-react/commit/9b9a7ba16aeb23d19421a0b2cc1742a0cefe428b)) -# [7.0.0-alpha.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.94.7...@patternfly/react-charts@7.0.0-alpha.1) (2023-01-10) +## [7.4.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0...@patternfly/react-charts@7.4.1) (2024-09-13) ### Bug Fixes -- **core-version:** bump to use core 5.0.0-alpha.3 ([#8469](https://github.com/patternfly/patternfly-react/issues/8469)) ([70844f9](https://github.com/patternfly/patternfly-react/commit/70844f9afc2d4dcef1bc8d7a7026f5413b3beebd)) +- **charts:** victoryCreateContainer breakage (v5) ([#10905](https://github.com/patternfly/patternfly-react/issues/10905)) ([ee81f6e](https://github.com/patternfly/patternfly-react/commit/ee81f6e4b73be70ef258167af00017346f07df62)) -## 6.94.15 (2022-12-08) +# 7.4.0 (2024-08-27) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.14 (2022-12-07) +# [7.4.0-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.16...@patternfly/react-charts@7.4.0-prerelease.17) (2024-07-16) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.13 (2022-12-01) +# [7.4.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.15...@patternfly/react-charts@7.4.0-prerelease.16) (2024-07-15) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.12 (2022-11-16) +# [7.4.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.14...@patternfly/react-charts@7.4.0-prerelease.15) (2024-07-11) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.11 (2022-10-27) +# [7.4.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.13...@patternfly/react-charts@7.4.0-prerelease.14) (2024-07-02) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.10 (2022-10-26) +# [7.4.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.12...@patternfly/react-charts@7.4.0-prerelease.13) (2024-07-01) **Note:** Version bump only for package @patternfly/react-charts -## [6.94.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.94.8...@patternfly/react-charts@6.94.9) (2022-10-17) - -**Note:** Version bump only for package @patternfly/react-charts +# [7.4.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.11...@patternfly/react-charts@7.4.0-prerelease.12) (2024-06-13) -## 6.94.8 (2022-10-14) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **deps:** update dependency hoist-non-react-statics to ^3.3.2 ([#10559](https://github.com/patternfly/patternfly-react/issues/10559)) ([5433a2d](https://github.com/patternfly/patternfly-react/commit/5433a2d92f718bd0ca561d14765073e9c6c32be0)) +- **deps:** update dependency tslib to ^2.6.3 ([#10562](https://github.com/patternfly/patternfly-react/issues/10562)) ([d702534](https://github.com/patternfly/patternfly-react/commit/d702534ce520316060be56eb0f1c4d8396bd57ed)) -## 6.94.7 (2022-10-05) +# [7.4.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.10...@patternfly/react-charts@7.4.0-prerelease.11) (2024-05-31) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.6 (2022-09-29) +# [7.4.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.9...@patternfly/react-charts@7.4.0-prerelease.10) (2024-05-31) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.5 (2022-09-23) +# [7.4.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.8...@patternfly/react-charts@7.4.0-prerelease.9) (2024-05-20) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.4 (2022-09-22) - -### Bug Fixes - -- **charts:** Interactive legend highlighting not working as expected ([#8035](https://github.com/patternfly/patternfly-react/issues/8035)) ([f51a776](https://github.com/patternfly/patternfly-react/commit/f51a776588e2304c64dc2bd2a2b4d1b0d0e7e452)) - -## 6.94.3 (2022-09-20) +# [7.4.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.7...@patternfly/react-charts@7.4.0-prerelease.8) (2024-05-15) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.2 (2022-09-20) +# [7.4.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.6...@patternfly/react-charts@7.4.0-prerelease.7) (2024-05-15) **Note:** Version bump only for package @patternfly/react-charts -## 6.94.1 (2022-09-20) +# [7.4.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.5...@patternfly/react-charts@7.4.0-prerelease.6) (2024-05-14) ### Bug Fixes -- **OverflowMenu:** store resize listener reference ([#7975](https://github.com/patternfly/patternfly-react/issues/7975)) ([86b0193](https://github.com/patternfly/patternfly-react/commit/86b01936a3029886173654925eb5d11d9077fc56)) - -# 6.94.0 (2022-09-19) - -### Features - -- **Wizard - next:** supporting component unit tests ([#7731](https://github.com/patternfly/patternfly-react/issues/7731)) ([2e4ec26](https://github.com/patternfly/patternfly-react/commit/2e4ec26d428b6be0ca4254b29e03c889eb5625bb)) - -# 6.93.0 (2022-09-16) +- **charts:** tooltip whitespace is not preserved for Safari ([#10355](https://github.com/patternfly/patternfly-react/issues/10355)) ([13a5093](https://github.com/patternfly/patternfly-react/commit/13a50935281c748ad22dfdc4ca0e2f6123b38dce)) -### Features - -- **charts:** Update Victory dependencies ([#7986](https://github.com/patternfly/patternfly-react/issues/7986)) ([bbee15f](https://github.com/patternfly/patternfly-react/commit/bbee15fd0e00288dfa72c88a79a685b5405a355e)) - -## 6.92.1 (2022-09-15) +# [7.4.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.4...@patternfly/react-charts@7.4.0-prerelease.5) (2024-05-14) **Note:** Version bump only for package @patternfly/react-charts -# 6.92.0 (2022-09-14) - -### Features - -- **Dropdown next:** Added the next version of the dropdown component ([#7955](https://github.com/patternfly/patternfly-react/issues/7955)) ([c092c7c](https://github.com/patternfly/patternfly-react/commit/c092c7cfaf877c5783c9ad9db0a8010b8ea023eb)) - -# 6.91.0 (2022-09-14) +# [7.4.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.3...@patternfly/react-charts@7.4.0-prerelease.4) (2024-05-10) ### Features -- **SearchInput:** new expandable button for masthead variant ([#7903](https://github.com/patternfly/patternfly-react/issues/7903)) ([d2a6c47](https://github.com/patternfly/patternfly-react/commit/d2a6c471ea3440d0b751b752b44ca1e8e749c5b6)) +- **charts:** skeletons ([#10311](https://github.com/patternfly/patternfly-react/issues/10311)) ([029351e](https://github.com/patternfly/patternfly-react/commit/029351e0fa402c80a6199e2bd4b28e8c06f17562)) -## 6.90.11 (2022-09-13) +# 7.4.0-prerelease.3 (2024-04-30) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.10 (2022-09-13) +# [7.4.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.4.0-prerelease.1...@patternfly/react-charts@7.4.0-prerelease.2) (2024-04-22) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.9 (2022-09-13) +# 7.4.0-prerelease.1 (2024-04-19) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.8 (2022-09-12) +# 7.4.0-prerelease.0 (2024-04-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.7 (2022-09-12) +# 7.3.0 (2024-04-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.6 (2022-09-12) - -### Bug Fixes - -- **Treeview:** ignore folder selection in basic example ([#7906](https://github.com/patternfly/patternfly-react/issues/7906)) ([b16b224](https://github.com/patternfly/patternfly-react/commit/b16b2240d26cabcadec3de52627fb1d96ff45aef)) - -## 6.90.5 (2022-09-09) +# 7.3.0-prerelease.6 (2024-03-26) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.4 (2022-09-09) - -### Bug Fixes - -- **Modal, Dropdown, TreeView:** updates to resolve strict TS errors ([#7890](https://github.com/patternfly/patternfly-react/issues/7890)) ([011215b](https://github.com/patternfly/patternfly-react/commit/011215be95dfff1408e437c0b1062835669ff041)) - -## 6.90.3 (2022-09-09) +# 7.3.0-prerelease.5 (2024-03-22) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.2 (2022-09-09) +# [7.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.3.0-prerelease.3...@patternfly/react-charts@7.3.0-prerelease.4) (2024-03-05) **Note:** Version bump only for package @patternfly/react-charts -## 6.90.1 (2022-09-09) +# 7.3.0-prerelease.3 (2024-02-28) **Note:** Version bump only for package @patternfly/react-charts -# 6.90.0 (2022-09-09) - -### Features - -- **Button:** new count number prop ([#7910](https://github.com/patternfly/patternfly-react/issues/7910)) ([a096b3c](https://github.com/patternfly/patternfly-react/commit/a096b3cba080b5bcd87777efe0e96e64c6da121f)) - -## 6.89.14 (2022-09-08) - -### Bug Fixes - -- **Page:** Fixed page group props regression ([#7948](https://github.com/patternfly/patternfly-react/issues/7948)) ([044444e](https://github.com/patternfly/patternfly-react/commit/044444e11fb90d53dc8f783071d3e3dc517532a0)) - -## 6.89.13 (2022-09-08) - -### Bug Fixes - -- **table:** fix bug in expandable demo ([#7945](https://github.com/patternfly/patternfly-react/issues/7945)) ([711b196](https://github.com/patternfly/patternfly-react/commit/711b19609dd8023b157a99f6988ff8618ccee35d)) - -## 6.89.12 (2022-09-07) +# 7.3.0-prerelease.2 (2024-02-28) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.11 (2022-09-07) +# 7.3.0-prerelease.1 (2024-02-14) ### Bug Fixes -- **dashboardheader:** update brand image src to absolute import path for codesandbox functionality ([#7935](https://github.com/patternfly/patternfly-react/issues/7935)) ([6190a7f](https://github.com/patternfly/patternfly-react/commit/6190a7fd51a9606c9f1bf06aa0ebd46215fbd341)) - -## 6.89.10 (2022-09-07) +- **charts:** adjust for Victory types changes ([#10082](https://github.com/patternfly/patternfly-react/issues/10082)) ([714eaca](https://github.com/patternfly/patternfly-react/commit/714eaca02f99f709a6aadc1d9dd58d25940f7403)) -**Note:** Version bump only for package @patternfly/react-charts +# 7.3.0-prerelease.0 (2024-02-02) -## 6.89.9 (2022-09-07) +# 5.2.0 (2024-02-02) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.8 (2022-09-07) +# 7.2.0 (2024-02-02) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.7 (2022-09-07) +# 7.2.0-prerelease.10 (2024-01-15) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.6 (2022-09-06) - -### Bug Fixes - -- **Page:** avoid unnecessary re-renders ([#7940](https://github.com/patternfly/patternfly-react/issues/7940)) ([3e23142](https://github.com/patternfly/patternfly-react/commit/3e23142c489ae5b77357345dbbeaa63cc175ea05)) - -## 6.89.5 (2022-09-02) - -### Bug Fixes - -- **MenuToggle:** Fixed props not displaying in docs ([#7919](https://github.com/patternfly/patternfly-react/issues/7919)) ([8ca73e4](https://github.com/patternfly/patternfly-react/commit/8ca73e4dae9542646aff846511033bb7ae4fb2ef)) - -## 6.89.4 (2022-09-02) +# 7.2.0-prerelease.9 (2024-01-11) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.3 (2022-09-01) +# 7.2.0-prerelease.8 (2023-12-11) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.2 (2022-09-01) +# 7.2.0-prerelease.7 (2023-11-10) **Note:** Version bump only for package @patternfly/react-charts -## 6.89.1 (2022-09-01) +# 7.2.0-prerelease.6 (2023-11-03) **Note:** Version bump only for package @patternfly/react-charts -# 6.89.0 (2022-09-01) - -### Features - -- **PageSection:** add ability to specify HTML element via prop ([#7891](https://github.com/patternfly/patternfly-react/issues/7891)) ([a9e20e4](https://github.com/patternfly/patternfly-react/commit/a9e20e4b6303fb673ed9222323a1114c3e68f8d6)) - -## 6.88.8 (2022-08-31) +# 7.2.0-prerelease.5 (2023-10-26) **Note:** Version bump only for package @patternfly/react-charts -## 6.88.7 (2022-08-31) +# 7.2.0-prerelease.4 (2023-10-10) **Note:** Version bump only for package @patternfly/react-charts -## 6.88.6 (2022-08-30) - -### Bug Fixes - -- **NumberInput:** prevent errors when onChange is passed via inputProps ([#7908](https://github.com/patternfly/patternfly-react/issues/7908)) ([9cabeed](https://github.com/patternfly/patternfly-react/commit/9cabeedacf98bd80214a7f7fe1e40c3a15be4490)) - -## 6.88.5 (2022-08-29) - -### Bug Fixes - -- **NumberInput:** manage null value ([#7898](https://github.com/patternfly/patternfly-react/issues/7898)) ([b86371d](https://github.com/patternfly/patternfly-react/commit/b86371dfe703614c12f49b68c096b28a91b9debd)) - -## 6.88.4 (2022-08-29) - -### Bug Fixes - -- syntax errors on surge ([#7897](https://github.com/patternfly/patternfly-react/issues/7897)) ([a487abf](https://github.com/patternfly/patternfly-react/commit/a487abf770340555b2c5a451b5a5bfb0ea57fd45)) - -## 6.88.3 (2022-08-25) - -### Bug Fixes - -- react-core should export all contents of dist directory ([#7883](https://github.com/patternfly/patternfly-react/issues/7883)) ([f5088d0](https://github.com/patternfly/patternfly-react/commit/f5088d069916d7c37335503251d13b4b846f3f62)) - -## 6.88.2 (2022-08-24) +# [7.2.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.2.0-prerelease.2...@patternfly/react-charts@7.2.0-prerelease.3) (2023-10-10) **Note:** Version bump only for package @patternfly/react-charts -## 6.88.1 (2022-08-24) +# 7.2.0-prerelease.2 (2023-10-09) **Note:** Version bump only for package @patternfly/react-charts -# 6.88.0 (2022-08-23) - -### Features - -- **WizardComposable:** Created composable spinoff of wizard w/ enhancements ([#7703](https://github.com/patternfly/patternfly-react/issues/7703)) ([76eab29](https://github.com/patternfly/patternfly-react/commit/76eab29b640e2f71cd9bd5d42f58fa8dd0eba799)) +# [7.2.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.2.0-prerelease.0...@patternfly/react-charts@7.2.0-prerelease.1) (2023-10-09) -## 6.87.4 (2022-08-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.87.3 (2022-08-23) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **charts:** legendAllowWrap function generates an null error ([#9719](https://github.com/patternfly/patternfly-react/issues/9719)) ([5b4cbf4](https://github.com/patternfly/patternfly-react/commit/5b4cbf41bf11785ffe66dc263c7c26e61d25cacd)) -## 6.87.2 (2022-08-23) +# [7.2.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1...@patternfly/react-charts@7.2.0-prerelease.0) (2023-10-05) **Note:** Version bump only for package @patternfly/react-charts -## 6.87.1 (2022-08-22) +## [7.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.10...@patternfly/react-charts@7.1.1) (2023-10-05) **Note:** Version bump only for package @patternfly/react-charts -# 6.87.0 (2022-08-22) - -### Features - -- **Timestamp:** create component ([#7815](https://github.com/patternfly/patternfly-react/issues/7815)) ([98058b3](https://github.com/patternfly/patternfly-react/commit/98058b35c4b7d5e916abd7318e020e53783f73a6)) - -## 6.86.1 (2022-08-22) +## 7.1.1-prerelease.10 (2023-10-03) ### Bug Fixes -- **TimePicker:** clean up menuAppendTo feature ([#7865](https://github.com/patternfly/patternfly-react/issues/7865)) ([3aa73be](https://github.com/patternfly/patternfly-react/commit/3aa73beb4581c1695aa3c3886291d862bd82286e)) +- whitespace changes to trigger prereleases ([#9702](https://github.com/patternfly/patternfly-react/issues/9702)) ([741c248](https://github.com/patternfly/patternfly-react/commit/741c24825b503e116c77cf304aa3e4e3a9ff7841)) -# 6.86.0 (2022-08-19) +## [7.1.1-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.8...@patternfly/react-charts@7.1.1-prerelease.9) (2023-09-22) ### Features -- **ExpandableSection:** add truncated variant ([#7852](https://github.com/patternfly/patternfly-react/issues/7852)) ([f628cdf](https://github.com/patternfly/patternfly-react/commit/f628cdf571d71addfc04e69728be73895e261094)) - -## 6.85.13 (2022-08-19) - -**Note:** Version bump only for package @patternfly/react-charts +- **charts:** add RTL legend support ([#9570](https://github.com/patternfly/patternfly-react/issues/9570)) ([99d8d97](https://github.com/patternfly/patternfly-react/commit/99d8d975eeb2d562357cdcaa37502748d5794564)) -## 6.85.12 (2022-08-19) +## 7.1.1-prerelease.8 (2023-09-21) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.11 (2022-08-18) +## [7.1.1-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.6...@patternfly/react-charts@7.1.1-prerelease.7) (2023-09-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.10 (2022-08-18) +## 7.1.1-prerelease.6 (2023-09-13) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.9 (2022-08-18) +## [7.1.1-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.4...@patternfly/react-charts@7.1.1-prerelease.5) (2023-09-07) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.8 (2022-08-18) +## [7.1.1-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.3...@patternfly/react-charts@7.1.1-prerelease.4) (2023-09-06) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.7 (2022-08-18) +## 7.1.1-prerelease.3 (2023-09-05) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.6 (2022-08-17) +## 7.1.1-prerelease.2 (2023-08-31) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.5 (2022-08-17) +## 7.1.1-prerelease.1 (2023-08-29) ### Bug Fixes -- **charts:** add victory-cursor-container dependency ([#7803](https://github.com/patternfly/patternfly-react/issues/7803)) ([6f1f00d](https://github.com/patternfly/patternfly-react/commit/6f1f00d0d60d9f841a3204e9378ac93a4333c41b)) +- **Charts, Table:** Fixed lit erros in chasrt and table ([#9507](https://github.com/patternfly/patternfly-react/issues/9507)) ([f68e4ba](https://github.com/patternfly/patternfly-react/commit/f68e4ba2ca557be928940a7297819b9b9037c41d)) +- **ChartScatter:** consider bubbleProperty if it is set ([#9282](https://github.com/patternfly/patternfly-react/issues/9282)) ([6020af4](https://github.com/patternfly/patternfly-react/commit/6020af4a90dfecff42d4de9ee71650fb9db4c45a)), closes [/github.com/FormidableLabs/victory/blob/bbc1e2a39448d7fb6724f916afacf5f6eab7d1b3/packages/victory-scatter/src/helper-methods.tsx#L35-L43](https://github.com//github.com/FormidableLabs/victory/blob/bbc1e2a39448d7fb6724f916afacf5f6eab7d1b3/packages/victory-scatter/src/helper-methods.tsx/issues/L35-L43) -## 6.85.4 (2022-08-17) +# 5.0.0 (2023-07-27) -**Note:** Version bump only for package @patternfly/react-charts - -## 6.85.3 (2022-08-16) - -### Bug Fixes - -- **Select:** apply aria-describedby to correct element ([#7790](https://github.com/patternfly/patternfly-react/issues/7790)) ([1795ff5](https://github.com/patternfly/patternfly-react/commit/1795ff5a939cfab5af03f11640737377b7c39441)) - -## 6.85.2 (2022-08-16) +# [7.1.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0...@patternfly/react-charts@7.1.0-prerelease.0) (2023-07-27) **Note:** Version bump only for package @patternfly/react-charts -## 6.85.1 (2022-08-16) +# 7.0.0 (2023-07-27) **Note:** Version bump only for package @patternfly/react-charts -# 6.85.0 (2022-08-16) - -### Features - -- Allow for 'next' and 'deprecated' react-core subpaths ([#7824](https://github.com/patternfly/patternfly-react/issues/7824)) ([0e68bd3](https://github.com/patternfly/patternfly-react/commit/0e68bd349e9a8b4b08bb8b777358dcde41d5462f)) - -## 6.84.9 (2022-08-15) +# 7.0.0-prerelease.12 (2023-07-20) **Note:** Version bump only for package @patternfly/react-charts -## 6.84.8 (2022-08-11) +# [7.0.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.10...@patternfly/react-charts@7.0.0-prerelease.11) (2023-07-14) **Note:** Version bump only for package @patternfly/react-charts -## 6.84.7 (2022-08-10) +# 7.0.0-prerelease.10 (2023-07-13) **Note:** Version bump only for package @patternfly/react-charts -## 6.84.6 (2022-08-10) - -### Reverts - -- Revert "feat(VisualizationSurface): replace react-measure with react-resize-detector (#7706)" (#7809) ([3c9cd8f](https://github.com/patternfly/patternfly-react/commit/3c9cd8f32d621f30aef0a4d4e0aa892b08354e7b)), closes [#7706](https://github.com/patternfly/patternfly-react/issues/7706) [#7809](https://github.com/patternfly/patternfly-react/issues/7809) - -## 6.84.5 (2022-08-05) - -### Bug Fixes - -- **MenuToggle:** update base type to include div attributes as well ([#7798](https://github.com/patternfly/patternfly-react/issues/7798)) ([330e496](https://github.com/patternfly/patternfly-react/commit/330e496a7f1fb715ab06a6f6d118f1db8705828a)) - -## 6.84.4 (2022-08-05) - -### Bug Fixes - -- **MenuToggle:** undo type change causing errors ([#7797](https://github.com/patternfly/patternfly-react/issues/7797)) ([1031ecb](https://github.com/patternfly/patternfly-react/commit/1031ecbeb5b4fa7eb28ed9c035454c7b408b8da8)) - -## 6.84.3 (2022-08-04) +# 7.0.0-prerelease.9 (2023-07-06) ### Bug Fixes -- **charts:** remove uniqueId generation for labels and axis ticks ([#7794](https://github.com/patternfly/patternfly-react/issues/7794)) ([9c44131](https://github.com/patternfly/patternfly-react/commit/9c4413119f14e3e45a1ed12bd870120e278ebc20)) +- **charts:** export getThemeColors ([#9338](https://github.com/patternfly/patternfly-react/issues/9338)) ([4d1f72d](https://github.com/patternfly/patternfly-react/commit/4d1f72d7668b75b3381953f615af075daf40b420)) -## 6.84.2 (2022-08-03) +# 7.0.0-prerelease.8 (2023-07-06) **Note:** Version bump only for package @patternfly/react-charts -## 6.84.1 (2022-08-03) +# [7.0.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.6...@patternfly/react-charts@7.0.0-prerelease.7) (2023-06-30) ### Bug Fixes -- **Menu:** can navigate via keyboard for checkbox variant ([#7743](https://github.com/patternfly/patternfly-react/issues/7743)) ([7cfa876](https://github.com/patternfly/patternfly-react/commit/7cfa87682c225c3e93d6c4e0925b3c34aaede633)) - -# 6.84.0 (2022-08-03) - -### Features - -- **MenuToggle:** add split button variants ([#7748](https://github.com/patternfly/patternfly-react/issues/7748)) ([7577725](https://github.com/patternfly/patternfly-react/commit/7577725305533791481ac22d9b36b87d5d3167b1)) +- **charts:** Update chart legend tooltip spacing ([#9323](https://github.com/patternfly/patternfly-react/issues/9323)) ([77e260c](https://github.com/patternfly/patternfly-react/commit/77e260c8d51b0765dea1dadbcef691bd7a51ef20)) -## 6.83.1 (2022-08-02) +# 7.0.0-prerelease.6 (2023-06-21) **Note:** Version bump only for package @patternfly/react-charts -# 6.83.0 (2022-08-01) - -### Features - -- **Page:** add support for vertical breakpoints, add sticky breadcrumb demo ([#7764](https://github.com/patternfly/patternfly-react/issues/7764)) ([9db582d](https://github.com/patternfly/patternfly-react/commit/9db582d63a3499fa78ea8fab3ce31b7877cd479d)) - -# 6.82.0 (2022-08-01) +# [7.0.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.4...@patternfly/react-charts@7.0.0-prerelease.5) (2023-06-15) ### Features -- **DescriptionList:** add Display and Card variants ([#7713](https://github.com/patternfly/patternfly-react/issues/7713)) ([8c6e6d8](https://github.com/patternfly/patternfly-react/commit/8c6e6d83cdbe989d306c64f945aac206eac3ff91)) +- **charts:** Update Victory packages to latest version ([#9276](https://github.com/patternfly/patternfly-react/issues/9276)) ([515b36f](https://github.com/patternfly/patternfly-react/commit/515b36fd4f3b1f82c6daf7625ecf0189c7f0470d)) -## 6.81.1 (2022-08-01) +# [7.0.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.3...@patternfly/react-charts@7.0.0-prerelease.4) (2023-06-15) ### Bug Fixes -- **Menu/Nav:** flyout variants work with VO navigation ([#7772](https://github.com/patternfly/patternfly-react/issues/7772)) ([6ad76cc](https://github.com/patternfly/patternfly-react/commit/6ad76cc1b466e8e93773f58002acf5ca54ad6e36)) - -# 6.81.0 (2022-07-29) - -### Features - -- **Tabs:** add horizontal overflow option ([#7742](https://github.com/patternfly/patternfly-react/issues/7742)) ([2745cd1](https://github.com/patternfly/patternfly-react/commit/2745cd199669b0c0a5cdbd5c3d4e7453c6e1c435)) - -## 6.80.9 (2022-07-28) +- **release:** ensure component package.json file has correct data ([#9272](https://github.com/patternfly/patternfly-react/issues/9272)) ([6053a6f](https://github.com/patternfly/patternfly-react/commit/6053a6f9acc0b1a9856423db59523558c5abd629)) -**Note:** Version bump only for package @patternfly/react-charts +# 7.0.0-prerelease.3 (2023-06-13) -## 6.80.8 (2022-07-28) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **docs:** update use of deprecated tag and clean up changelogs ([#9259](https://github.com/patternfly/patternfly-react/issues/9259)) ([8de83dc](https://github.com/patternfly/patternfly-react/commit/8de83dc3b2fb88094fd3c21bda2ed6e371986cba)) -## 6.80.7 (2022-07-28) +# [7.0.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-prerelease.1...@patternfly/react-charts@7.0.0-prerelease.2) (2023-06-06) **Note:** Version bump only for package @patternfly/react-charts -## 6.80.6 (2022-07-28) - -**Note:** Version bump only for package @patternfly/react-charts +# 7.0.0-prerelease.1 (2023-06-06) -## 6.80.5 (2022-07-27) +### Bug Fixes -**Note:** Version bump only for package @patternfly/react-charts +- **release:** dryrun publishing prereleases ([#9242](https://github.com/patternfly/patternfly-react/issues/9242)) ([e4c35f1](https://github.com/patternfly/patternfly-react/commit/e4c35f14cd57be132179e51ae2bb223600a35f0e)) -## 6.80.4 (2022-07-27) +# [7.0.0-alpha.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.34...@patternfly/react-charts@7.0.0-alpha.35) (2023-06-02) **Note:** Version bump only for package @patternfly/react-charts -## 6.80.3 (2022-07-27) +# 7.0.0-alpha.34 (2023-06-01) **Note:** Version bump only for package @patternfly/react-charts -## 6.80.2 (2022-07-27) +# 7.0.0-alpha.33 (2023-05-31) **Note:** Version bump only for package @patternfly/react-charts -## 6.80.1 (2022-07-26) +# 7.0.0-alpha.32 (2023-05-23) **Note:** Version bump only for package @patternfly/react-charts -# 6.80.0 (2022-07-26) - -### Features - -- **Dropdown:** added secondary styling to split action button ([#7746](https://github.com/patternfly/patternfly-react/issues/7746)) ([e701c32](https://github.com/patternfly/patternfly-react/commit/e701c32bb36097770ecb2c3e17e15df0b720488f)) - -## 6.79.2 (2022-07-26) +# [7.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.30...@patternfly/react-charts@7.0.0-alpha.31) (2023-05-19) **Note:** Version bump only for package @patternfly/react-charts -## 6.79.1 (2022-07-26) +# [7.0.0-alpha.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.29...@patternfly/react-charts@7.0.0-alpha.30) (2023-05-18) **Note:** Version bump only for package @patternfly/react-charts -# 6.79.0 (2022-07-26) - -### Features - -- **topology:** Pipelines support for badges/icons variable task node width ([#7697](https://github.com/patternfly/patternfly-react/issues/7697)) ([a499273](https://github.com/patternfly/patternfly-react/commit/a49927315cd61e84a007d05b49e5d7254b977fcb)) - -## 6.78.11 (2022-07-25) - -### Bug Fixes - -- **Select:** remove variant check from update logic ([#7741](https://github.com/patternfly/patternfly-react/issues/7741)) ([2204cb6](https://github.com/patternfly/patternfly-react/commit/2204cb62e30b4a37b82731f1380e79a3085828ef)) - -## 6.78.10 (2022-07-25) +# 7.0.0-alpha.29 (2023-05-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.78.9 (2022-07-21) +# 7.0.0-alpha.28 (2023-05-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.78.8 (2022-07-21) +# 7.0.0-alpha.27 (2023-05-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.78.7 (2022-07-20) +# 7.0.0-alpha.26 (2023-05-17) ### Bug Fixes -- **Switch:** aria labelledby to update with change ([#7557](https://github.com/patternfly/patternfly-react/issues/7557)) ([9647a0c](https://github.com/patternfly/patternfly-react/commit/9647a0c7f7eb2174f006774b4406408bd065fddc)) +- **beta:** promote components + features out of beta for v5 ([#8912](https://github.com/patternfly/patternfly-react/issues/8912)) ([34c1688](https://github.com/patternfly/patternfly-react/commit/34c16885539531434832205544f96d3ffddabb79)) -## 6.78.6 (2022-07-20) +# 7.0.0-alpha.25 (2023-05-16) **Note:** Version bump only for package @patternfly/react-charts -## 6.78.5 (2022-07-19) +# 7.0.0-alpha.24 (2023-05-08) **Note:** Version bump only for package @patternfly/react-charts -## 6.78.4 (2022-07-15) +# [7.0.0-alpha.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.22...@patternfly/react-charts@7.0.0-alpha.23) (2023-05-05) ### Bug Fixes -- **LogViewer:** render correctly when there is '\n' in the string array ([#7681](https://github.com/patternfly/patternfly-react/issues/7681)) ([12222c7](https://github.com/patternfly/patternfly-react/commit/12222c76d47396d8df5134c607a9ff689d6d93c9)) - -## 6.78.3 (2022-07-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.78.2 (2022-07-15) - -**Note:** Version bump only for package @patternfly/react-charts +- **deps:** updated Core for v5 versioning ([#9075](https://github.com/patternfly/patternfly-react/issues/9075)) ([3879fc7](https://github.com/patternfly/patternfly-react/commit/3879fc757aefeed80b0694365aa20d5ca856a797)) -## 6.78.1 (2022-07-15) +# 7.0.0-alpha.22 (2023-05-05) **Note:** Version bump only for package @patternfly/react-charts -# 6.78.0 (2022-07-14) +# 7.0.0-alpha.21 (2023-05-03) ### Features -- **Topology:** Add Topology pipeline support ([#7609](https://github.com/patternfly/patternfly-react/issues/7609)) ([4fb563f](https://github.com/patternfly/patternfly-react/commit/4fb563fb8651c0386f7cc59fd9c736af6fb683ec)) +- **charts:** Victory package update ([#9021](https://github.com/patternfly/patternfly-react/issues/9021)) ([805fb87](https://github.com/patternfly/patternfly-react/commit/805fb87698f427f66d167d303f87c033ac7c6c25)) -## 6.77.15 (2022-07-12) +# 7.0.0-alpha.20 (2023-04-25) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.14 (2022-07-11) +# 7.0.0-alpha.19 (2023-04-13) -**Note:** Version bump only for package @patternfly/react-charts +### Bug Fixes -## 6.77.13 (2022-07-11) +- general clean up ([#8944](https://github.com/patternfly/patternfly-react/issues/8944)) ([7a6ea59](https://github.com/patternfly/patternfly-react/commit/7a6ea59c7b029cd5ffe22117fa81706c28feadfe)) -**Note:** Version bump only for package @patternfly/react-charts +# 7.0.0-alpha.18 (2023-04-13) -## 6.77.12 (2022-07-08) +### Features -**Note:** Version bump only for package @patternfly/react-charts +- **infrastructure:** Added ability import components directly to support fed modules tree-shaking of shared packages. ([#8832](https://github.com/patternfly/patternfly-react/issues/8832)) ([16c15bf](https://github.com/patternfly/patternfly-react/commit/16c15bf09c1df7cc581336a7a3047dc8b11f8be0)) -## 6.77.11 (2022-07-08) +# 7.0.0-alpha.17 (2023-04-12) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.10 (2022-07-08) +# 7.0.0-alpha.16 (2023-04-05) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.9 (2022-07-07) +# 7.0.0-alpha.15 (2023-04-05) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.8 (2022-07-07) +# 7.0.0-alpha.14 (2023-04-03) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.7 (2022-07-07) +# 7.0.0-alpha.13 (2023-03-27) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.6 (2022-07-06) +# 7.0.0-alpha.12 (2023-03-18) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.5 (2022-07-06) +# 7.0.0-alpha.11 (2023-03-17) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.4 (2022-07-05) +# [7.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.9...@patternfly/react-charts@7.0.0-alpha.10) (2023-03-02) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.3 (2022-07-05) +# 7.0.0-alpha.9 (2023-03-01) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.2 (2022-06-30) +# 7.0.0-alpha.8 (2023-02-27) **Note:** Version bump only for package @patternfly/react-charts -## 6.77.1 (2022-06-29) - -### Bug Fixes - -- **Select:** update logic should only apply to typeahead ([#7632](https://github.com/patternfly/patternfly-react/issues/7632)) ([0b9148e](https://github.com/patternfly/patternfly-react/commit/0b9148e67030236e61423895c6632b20dac4617f)) - -# 6.77.0 (2022-06-27) - -### Features - -- **wizard:** add support for additional information panel (drawer) ([#7323](https://github.com/patternfly/patternfly-react/issues/7323)) ([6702504](https://github.com/patternfly/patternfly-react/commit/67025047d7bb644497f4477b77dbbdebe8ce97da)) - -## 6.76.3 (2022-06-23) +# [7.0.0-alpha.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.6...@patternfly/react-charts@7.0.0-alpha.7) (2023-02-15) **Note:** Version bump only for package @patternfly/react-charts -## 6.76.2 (2022-06-23) +# 7.0.0-alpha.6 (2023-02-10) ### Bug Fixes -- **ProgressStepper:** added onTriggerEnter prop to Popover ([#7532](https://github.com/patternfly/patternfly-react/issues/7532)) ([1208390](https://github.com/patternfly/patternfly-react/commit/12083908a7043c017a5b7a97f84623add10bfe75)) - -## 6.76.1 (2022-06-23) - -**Note:** Version bump only for package @patternfly/react-charts +- **charts:** fix broken tooltip examples due to Tooltip outputting a new div tag in the SVG ([#8592](https://github.com/patternfly/patternfly-react/issues/8592)) ([a7d2e12](https://github.com/patternfly/patternfly-react/commit/a7d2e12769c1208eedb88e5574d7ae7dd34e434c)) -# 6.76.0 (2022-06-22) +# [7.0.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.4...@patternfly/react-charts@7.0.0-alpha.5) (2023-02-09) ### Features -- **Table:** add nested sticky header support ([#7595](https://github.com/patternfly/patternfly-react/issues/7595)) ([3888a0b](https://github.com/patternfly/patternfly-react/commit/3888a0bdf5e4e964d2d8d936c5d81f7813d8ec0c)) - -## 6.75.17 (2022-06-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.16 (2022-06-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.15 (2022-06-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.14 (2022-06-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.13 (2022-06-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.12 (2022-06-17) - -### Bug Fixes - -- **Table:** account for added columns with expandable ([#7529](https://github.com/patternfly/patternfly-react/issues/7529)) ([dcde7c9](https://github.com/patternfly/patternfly-react/commit/dcde7c95eb7200b706da4d41a46f3f57b5129e40)) - -## 6.75.11 (2022-06-17) - -### Bug Fixes - -- **Table:** update expandable examples to set column widths ([#7513](https://github.com/patternfly/patternfly-react/issues/7513)) ([c2e1e61](https://github.com/patternfly/patternfly-react/commit/c2e1e618a6924bdbb2b1e8e7ad94553615196fb2)) +- **charts:** remove deprecated theme variant code ([#8590](https://github.com/patternfly/patternfly-react/issues/8590)) ([12e1c47](https://github.com/patternfly/patternfly-react/commit/12e1c472f1260d161f178e170782de8a7fc63b80)) -## 6.75.10 (2022-06-16) +# [7.0.0-alpha.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.0.0-alpha.3...@patternfly/react-charts@7.0.0-alpha.4) (2023-02-08) -### Bug Fixes +### Features -- **Topology:** Fix for group position when it has no children ([#7573](https://github.com/patternfly/patternfly-react/issues/7573)) ([04e435e](https://github.com/patternfly/patternfly-react/commit/04e435ebc87ad7d1c687db95ee8ef8beffae514d)) +- **charts:** update Victory dependencies for v5 ([#8606](https://github.com/patternfly/patternfly-react/issues/8606)) ([19a5e93](https://github.com/patternfly/patternfly-react/commit/19a5e939c417a4ad31b4e2a5fae24b1d7698a025)) -## 6.75.9 (2022-06-16) +# 7.0.0-alpha.3 (2023-02-08) **Note:** Version bump only for package @patternfly/react-charts - -## 6.75.8 (2022-06-16) - -### Bug Fixes - -- **Table:** filterable table demo icon text spacing fix ([#7477](https://github.com/patternfly/patternfly-react/issues/7477)) ([e35387f](https://github.com/patternfly/patternfly-react/commit/e35387f42b355000ff66a79e1031eb6e9a7bb8c3)) - -## 6.75.7 (2022-06-16) - -### Bug Fixes - -- **console:** add SUSE instruction for virt-viewer ([#7445](https://github.com/patternfly/patternfly-react/issues/7445)) ([2ac5adb](https://github.com/patternfly/patternfly-react/commit/2ac5adb581d673e0687f438baeb7859125bd30d4)), closes [#7519](https://github.com/patternfly/patternfly-react/issues/7519) - -## 6.75.6 (2022-06-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.5 (2022-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.4 (2022-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.3 (2022-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.2 (2022-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.75.1 (2022-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.75.0 (2022-06-14) - -### Features - -- **Form:** add functionality for form group roles ([#7516](https://github.com/patternfly/patternfly-react/issues/7516)) ([4ff2f54](https://github.com/patternfly/patternfly-react/commit/4ff2f54ce21363e9c40c47517f20b8fc5e0cb401)) - -## 6.74.17 (2022-06-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.16 (2022-06-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.15 (2022-06-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.14 (2022-06-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.13 (2022-06-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.12 (2022-06-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.11 (2022-06-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.10 (2022-06-09) - -### Bug Fixes - -- **Select:** retain focus on correct checkbox after view more ([#7505](https://github.com/patternfly/patternfly-react/issues/7505)) ([c9de16b](https://github.com/patternfly/patternfly-react/commit/c9de16b00a3573f74847b3953c7b408cf000fb85)) - -## 6.74.9 (2022-06-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.8 (2022-06-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.7 (2022-06-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.6 (2022-06-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.5 (2022-06-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.4 (2022-06-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.3 (2022-06-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.2 (2022-06-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.74.1 (2022-06-01) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.74.0 (2022-06-01) - -### Features - -- **table:** full screen demo for sticky first column ([#7451](https://github.com/patternfly/patternfly-react/issues/7451)) ([f610dd4](https://github.com/patternfly/patternfly-react/commit/f610dd4726b16d73a166f7a57da0fa3588b8201d)) - -## 6.73.2 (2022-05-31) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.73.1 (2022-05-31) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.73.0 (2022-05-31) - -### Features - -- **table:** add fullscreen demo for error state ([#7443](https://github.com/patternfly/patternfly-react/issues/7443)) ([eeab219](https://github.com/patternfly/patternfly-react/commit/eeab2197765589262ee7c328e57dbf1606da6d7f)) - -## 6.72.2 (2022-05-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.72.1 (2022-05-27) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.72.0 (2022-05-26) - -### Features - -- **Popper:** add mouse events for popper content ([#7399](https://github.com/patternfly/patternfly-react/issues/7399)) ([47f8d12](https://github.com/patternfly/patternfly-react/commit/47f8d12e348397336287c7e7efc79665bce61ae2)) - -# 6.71.0 (2022-05-26) - -### Features - -- **table:** add fullscreen empty state demo ([#7371](https://github.com/patternfly/patternfly-react/issues/7371)) ([54f3052](https://github.com/patternfly/patternfly-react/commit/54f30520d9d808ffe15c962b37af91cef4c21dcb)) - -## 6.70.4 (2022-05-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.70.3 (2022-05-26) - -### Bug Fixes - -- **Select:** popper menu flips correctly ([#7434](https://github.com/patternfly/patternfly-react/issues/7434)) ([cc1eb21](https://github.com/patternfly/patternfly-react/commit/cc1eb2152246d03600a9fbbf678fd8b39f703347)) - -## 6.70.2 (2022-05-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.70.1 (2022-05-24) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.70.0 (2022-05-24) - -### Features - -- **table:** add fullscreen loading state demo ([#7370](https://github.com/patternfly/patternfly-react/issues/7370)) ([285b5b7](https://github.com/patternfly/patternfly-react/commit/285b5b76cb6bb64d5fd4bd66cfb26f709457b3bc)) - -## 6.69.1 (2022-05-23) - -### Bug Fixes - -- **Select:** allow enter to create when there is a single option ([#7444](https://github.com/patternfly/patternfly-react/issues/7444)) ([e1ae6a9](https://github.com/patternfly/patternfly-react/commit/e1ae6a9aa7dee0f8107905ec1d47463fce950ff3)) - -# 6.69.0 (2022-05-19) - -### Features - -- **table:** update sortable demo to align with core ([#7292](https://github.com/patternfly/patternfly-react/issues/7292)) ([6891764](https://github.com/patternfly/patternfly-react/commit/6891764f2507c775005878f6e74cc5c8e44a6c68)) - -# 6.68.0 (2022-05-19) - -### Features - -- **Menu:** Added support for checkbox menu ([#7368](https://github.com/patternfly/patternfly-react/issues/7368)) ([8c2d1dc](https://github.com/patternfly/patternfly-react/commit/8c2d1dc23dbe5c28a8c1ecf79eb34ea911da386f)) - -## 6.67.5 (2022-05-18) - -### Bug Fixes - -- **Slider:** add support for aria-labelledby ad aria-describedby ([#7408](https://github.com/patternfly/patternfly-react/issues/7408)) ([7c8617a](https://github.com/patternfly/patternfly-react/commit/7c8617a1268a03061d51454b298c79ae5f7a59b0)) - -## 6.67.4 (2022-05-18) - -### Bug Fixes - -- **Table:** Removed duplicate import from md file ([#7442](https://github.com/patternfly/patternfly-react/issues/7442)) ([00438a7](https://github.com/patternfly/patternfly-react/commit/00438a73c7b2548c4f0ad00ed09f9c60f99978d9)) - -## 6.67.3 (2022-05-16) - -### Bug Fixes - -- **Chip:** add custom maxWidth prop ([#7387](https://github.com/patternfly/patternfly-react/issues/7387)) ([7cfb1a2](https://github.com/patternfly/patternfly-react/commit/7cfb1a202c2f1405c454b2e10716d9a500d4508f)) - -## 6.67.2 (2022-05-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.67.1 (2022-05-12) - -### Bug Fixes - -- **Tabs:** make close handler optional ([#7405](https://github.com/patternfly/patternfly-react/issues/7405)) ([a84bb2a](https://github.com/patternfly/patternfly-react/commit/a84bb2aadefd7f811745b9512a26eda85241361d)) - -# 6.67.0 (2022-05-12) - -### Features - -- **table:** expandable table demo ([#7277](https://github.com/patternfly/patternfly-react/issues/7277)) ([c081a61](https://github.com/patternfly/patternfly-react/commit/c081a61f11ceeb92688798106962e3604c243606)) - -## 6.66.6 (2022-05-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.66.5 (2022-05-11) - -### Bug Fixes - -- **charts:** support customizing tooltip border for dark theme ([#7393](https://github.com/patternfly/patternfly-react/issues/7393)) ([7168a1d](https://github.com/patternfly/patternfly-react/commit/7168a1dc7f3a1302d719a32bcd32dcdb9ad8fb86)) - -## 6.66.4 (2022-05-11) - -### Bug Fixes - -- **topology:** fix variables ([#7364](https://github.com/patternfly/patternfly-react/issues/7364)) ([2dec22e](https://github.com/patternfly/patternfly-react/commit/2dec22eec0f2fb8a634108e6995f747f61fa7d93)) - -## 6.66.3 (2022-05-10) - -### Bug Fixes - -- **Card:** indicate card selectivity and status if using a screen reader ([#7144](https://github.com/patternfly/patternfly-react/issues/7144)) ([56fab43](https://github.com/patternfly/patternfly-react/commit/56fab43f801390d995ae9d0c3bdec3aa0f0d2cfb)) - -## 6.66.2 (2022-05-10) - -### Reverts - -- Revert "docs(Dropdown): expose menuAppendTo in Dropdown prop docs (#7173)" (#7395) ([9e80f18](https://github.com/patternfly/patternfly-react/commit/9e80f1812773e269782cdb26928778e558ec5354)), closes [#7173](https://github.com/patternfly/patternfly-react/issues/7173) [#7395](https://github.com/patternfly/patternfly-react/issues/7395) - -## 6.66.1 (2022-05-10) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.66.0 (2022-05-10) - -### Features - -- **Tabs:** allow dynamic close/add ([#7297](https://github.com/patternfly/patternfly-react/issues/7297)) ([51dd66c](https://github.com/patternfly/patternfly-react/commit/51dd66c59d25f96686c57de9fffe590f1c8cbe83)) - -# 6.65.0 (2022-05-09) - -### Features - -- **charts:** added PF dark theme support ([#7310](https://github.com/patternfly/patternfly-react/issues/7310)) ([549c041](https://github.com/patternfly/patternfly-react/commit/549c041525b22d910b71a1c4f64e2cb0ba11ca8f)) - -## 6.64.6 (2022-05-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.64.5 (2022-05-09) - -### Bug Fixes - -- **Popper:** update Popper modifiers when child DOM changes ([#7385](https://github.com/patternfly/patternfly-react/issues/7385)) ([28d0b74](https://github.com/patternfly/patternfly-react/commit/28d0b74107ae76acae535c37ea73cec3a4cf49d5)) - -## 6.64.4 (2022-05-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.64.3 (2022-05-06) - -### Bug Fixes - -- **LogViewer:** clear ANSI cache when resetting the log window ([#7355](https://github.com/patternfly/patternfly-react/issues/7355)) ([b3354b5](https://github.com/patternfly/patternfly-react/commit/b3354b5000c5d7397c479888140b0381367cbd2c)) - -## 6.64.2 (2022-05-06) - -### Bug Fixes - -- **Page:** add tabindex to components with hasOverflowScroll ([#7274](https://github.com/patternfly/patternfly-react/issues/7274)) ([6be2fa8](https://github.com/patternfly/patternfly-react/commit/6be2fa870aba78b833c7346ffe029f96cfc1c37d)) - -## 6.64.1 (2022-05-06) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.64.0 (2022-05-06) - -### Features - -- **tokens:** Variables now include a fallback value for charts ([#7374](https://github.com/patternfly/patternfly-react/issues/7374)) ([6832688](https://github.com/patternfly/patternfly-react/commit/6832688d904159eee64510656dc4df6ed1ecb841)) - -# 6.63.0 (2022-05-05) - -### Features - -- **charts:** Deprecate themeVariant prop for light / dark themes ([#7372](https://github.com/patternfly/patternfly-react/issues/7372)) ([362902a](https://github.com/patternfly/patternfly-react/commit/362902a72eb2b18e634423c86dea1bef89bf00e9)) - -# 6.62.0 (2022-05-05) - -### Features - -- **drawer:** convert examples to TS ([#7329](https://github.com/patternfly/patternfly-react/issues/7329)) ([e3c6dfa](https://github.com/patternfly/patternfly-react/commit/e3c6dfa735a01c2be5a62eed8e37ad7a29b113de)) - -## 6.61.13 (2022-05-05) - -### Bug Fixes - -- **Wixard:** Fixed id not being applied to wizard step ([#7349](https://github.com/patternfly/patternfly-react/issues/7349)) ([de6b557](https://github.com/patternfly/patternfly-react/commit/de6b557331460dd387faa1ac4c5c033757412340)) - -## 6.61.12 (2022-05-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.11 (2022-05-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.10 (2022-05-05) - -### Bug Fixes - -- **charts:** Add style for tooltip cursor ([#7361](https://github.com/patternfly/patternfly-react/issues/7361)) ([1b3f67c](https://github.com/patternfly/patternfly-react/commit/1b3f67c3712a194bef672fe888f6a446f4bd8bc6)) - -## 6.61.9 (2022-05-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.8 (2022-05-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.7 (2022-05-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.6 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.5 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.4 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.3 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.2 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.61.1 (2022-05-03) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.61.0 (2022-05-02) - -### Features - -- **divider:** add support for switching orientation at various breakpoints ([#7285](https://github.com/patternfly/patternfly-react/issues/7285)) ([6e47917](https://github.com/patternfly/patternfly-react/commit/6e47917a59fdbd0f9f647998d79d024a691a49e2)) - -# 6.60.0 (2022-04-28) - -### Features - -- **CodeBlock:** add class to code component ([#7281](https://github.com/patternfly/patternfly-react/issues/7281)) ([844e162](https://github.com/patternfly/patternfly-react/commit/844e1621bc695c97f911f5cc64998c5d36911a4d)) - -## 6.59.6 (2022-04-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.59.5 (2022-04-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.59.4 (2022-04-25) - -### Bug Fixes - -- **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806)) - -## 6.59.3 (2022-04-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.59.2 (2022-04-21) - -### Bug Fixes - -- **DataListCheck:** revert checked prop ([#7284](https://github.com/patternfly/patternfly-react/issues/7284)) ([d9889fc](https://github.com/patternfly/patternfly-react/commit/d9889fc86f224533f81457f384954e6a299c5677)) - -## 6.59.1 (2022-04-20) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.59.0 (2022-04-19) - -### Features - -- **HelperText:** add react demos ([#7250](https://github.com/patternfly/patternfly-react/issues/7250)) ([bf68976](https://github.com/patternfly/patternfly-react/commit/bf68976bebd683c935f587795a868c32ea8c5616)) - -## 6.58.1 (2022-04-19) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.58.0 (2022-04-18) - -### Features - -- **Tabs:** Add nested, unindented demo ([#7194](https://github.com/patternfly/patternfly-react/issues/7194)) ([81bd759](https://github.com/patternfly/patternfly-react/commit/81bd759189379bc558871acc791a1a34dcc2ed1a)) - -# 6.57.0 (2022-04-18) - -### Features - -- **Progress stepper:** Updated to use render prop for popover ([#7190](https://github.com/patternfly/patternfly-react/issues/7190)) ([5eb8243](https://github.com/patternfly/patternfly-react/commit/5eb8243d63d1168d9b425a5322c08e04659ed843)) - -## 6.56.2 (2022-04-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.56.1 (2022-04-18) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.56.0 (2022-04-14) - -### Features - -- **MenuToggle:** Add full width modifier ([#7232](https://github.com/patternfly/patternfly-react/issues/7232)) ([789a8a3](https://github.com/patternfly/patternfly-react/commit/789a8a3f1cb1f1d90565f8d0e6c0dbe984c0c66b)) - -## 6.55.37 (2022-04-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.36 (2022-04-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.35 (2022-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.34 (2022-04-13) - -### Bug Fixes - -- **ContextSelector:** fix listener handling when using popper ([#7165](https://github.com/patternfly/patternfly-react/issues/7165)) ([af89d6a](https://github.com/patternfly/patternfly-react/commit/af89d6a334d0052205473d313ea5be0e64f3847c)) - -## 6.55.33 (2022-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.32 (2022-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.31 (2022-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.30 (2022-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.29 (2022-04-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.28 (2022-04-12) - -### Bug Fixes - -- **demo-app:** reorder css imports to load in dark theme correctly ([#7224](https://github.com/patternfly/patternfly-react/issues/7224)) ([1341c93](https://github.com/patternfly/patternfly-react/commit/1341c9396a25f6850bf4e961e40c9ddd182d9d3b)) - -## 6.55.27 (2022-04-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.26 (2022-04-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.25 (2022-04-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.24 (2022-04-11) - -### Bug Fixes - -- **Select:** prevent footer clicks from toggling ([#7193](https://github.com/patternfly/patternfly-react/issues/7193)) ([2cd10c2](https://github.com/patternfly/patternfly-react/commit/2cd10c2a0a11dcd14f85116369fd47dffcb12295)) - -## 6.55.23 (2022-04-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.22 (2022-04-11) - -### Bug Fixes - -- **react-styles:** support esm import and export ([#7084](https://github.com/patternfly/patternfly-react/issues/7084)) ([b66ea14](https://github.com/patternfly/patternfly-react/commit/b66ea14fa0949b0626184455a4df46312b87171a)) - -## 6.55.21 (2022-04-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.20 (2022-04-08) - -### Bug Fixes - -- **NumberInput:** Custom increment/decrement and thresholds ([#7159](https://github.com/patternfly/patternfly-react/issues/7159)) ([28853de](https://github.com/patternfly/patternfly-react/commit/28853de1d02a4d46d81100da895d5e73a3ec05cf)) - -## 6.55.19 (2022-04-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.18 (2022-04-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.17 (2022-04-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.16 (2022-04-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.15 (2022-04-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.14 (2022-03-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.13 (2022-03-29) - -### Bug Fixes - -- **components:** fix newline interpolation of text input values ([#6935](https://github.com/patternfly/patternfly-react/issues/6935)) ([c667ef0](https://github.com/patternfly/patternfly-react/commit/c667ef048cbf246e920a0111d4e900f1079cc6bc)), closes [#5324](https://github.com/patternfly/patternfly-react/issues/5324) - -## 6.55.12 (2022-03-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.11 (2022-03-29) - -### Bug Fixes - -- **Drawer:** Updated resizable drawer to make it more accessible ([#7118](https://github.com/patternfly/patternfly-react/issues/7118)) ([0363ae6](https://github.com/patternfly/patternfly-react/commit/0363ae6638aab17e55f26bae5017bcd7f83f8ed5)) - -## 6.55.10 (2022-03-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.9 (2022-03-28) - -### Bug Fixes - -- **Select:** view more fixes ([#7107](https://github.com/patternfly/patternfly-react/issues/7107)) ([94f24f6](https://github.com/patternfly/patternfly-react/commit/94f24f65b043a2d3f3ae8fe7247aaf55b05987a7)) - -## 6.55.8 (2022-03-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.7 (2022-03-28) - -### Bug Fixes - -- **CalendarMonth:** resolve regression for selecting a date ([#7130](https://github.com/patternfly/patternfly-react/issues/7130)) ([5397e89](https://github.com/patternfly/patternfly-react/commit/5397e895ba52434b98b4206ac47535ed36d1bf00)) - -## 6.55.6 (2022-03-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.5 (2022-03-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.4 (2022-03-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.3 (2022-03-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.2 (2022-03-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.55.1 (2022-03-23) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.55.0 (2022-03-23) - -### Features - -- **Select:** add flag to not reset on select, add event to toggle callback ([#7093](https://github.com/patternfly/patternfly-react/issues/7093)) ([ec2afb1](https://github.com/patternfly/patternfly-react/commit/ec2afb1ea414f63a2fadc56bbaa968a0caad5fd6)) - -## 6.54.2 (2022-03-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.54.1 (2022-03-23) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.54.0 (2022-03-23) - -### Features - -- **CalendarMonth:** make date prop optional ([#7077](https://github.com/patternfly/patternfly-react/issues/7077)) ([e388854](https://github.com/patternfly/patternfly-react/commit/e388854e26b57d7cada63832b7f52e9c7bdad9a0)) - -## 6.53.2 (2022-03-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.53.1 (2022-03-21) - -### Bug Fixes - -- **Tooltip:** horizontal scroll bar causing misaligned tooltip ([#7062](https://github.com/patternfly/patternfly-react/issues/7062)) ([9540d0c](https://github.com/patternfly/patternfly-react/commit/9540d0c5ab256a19143381755e33b661a13d2a00)) - -# 6.53.0 (2022-03-21) - -### Features - -- **TextInput, TextArea, FormSelect:** add isIconSprite prop ([#7052](https://github.com/patternfly/patternfly-react/issues/7052)) ([94e1a85](https://github.com/patternfly/patternfly-react/commit/94e1a855840ca74d4d934a863531359a4f84c265)) - -## 6.52.5 (2022-03-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.52.4 (2022-03-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.52.3 (2022-03-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.52.2 (2022-03-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.52.1 (2022-03-16) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.52.0 (2022-03-15) - -### Features - -- **CodeEditor:** 6226 size to fit height ([#7033](https://github.com/patternfly/patternfly-react/issues/7033)) ([f18abd3](https://github.com/patternfly/patternfly-react/commit/f18abd3020e04ee6602fd168d503f43cc0de649e)) - -## 6.51.22 (2022-03-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.21 (2022-03-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.20 (2022-03-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.19 (2022-03-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.18 (2022-03-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.17 (2022-03-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.16 (2022-03-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.15 (2022-03-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.14 (2022-03-04) - -### Bug Fixes - -- **NotificationDrawer:** Drawer receives focus after opening ([#6963](https://github.com/patternfly/patternfly-react/issues/6963)) ([f5b1c97](https://github.com/patternfly/patternfly-react/commit/f5b1c97f1c3ef6155d39d16da401fb9937b539e9)) - -## 6.51.13 (2022-03-04) - -### Bug Fixes - -- **Toolbar:** update test ([#6995](https://github.com/patternfly/patternfly-react/issues/6995)) ([4ddaeaa](https://github.com/patternfly/patternfly-react/commit/4ddaeaad5cd550b1bd88195a7a0eb9643cdb70f4)) - -## 6.51.12 (2022-03-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.11 (2022-03-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.10 (2022-03-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.9 (2022-03-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.8 (2022-02-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.7 (2022-02-22) - -### Bug Fixes - -- update release version number ([#6964](https://github.com/patternfly/patternfly-react/issues/6964)) ([6eefe79](https://github.com/patternfly/patternfly-react/commit/6eefe79b9eaaf871ecf93e3fdfd0e49c7326b221)) - -## 6.51.6 (2022-02-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.5 (2022-02-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.4 (2022-02-17) - -### Bug Fixes - -- **Select:** Do not filter out view more button on filter ([#6848](https://github.com/patternfly/patternfly-react/issues/6848)) ([6c7ac8a](https://github.com/patternfly/patternfly-react/commit/6c7ac8a5e287670d7469ecc0ef137bc33583e739)) - -## 6.51.3 (2022-02-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.2 (2022-02-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.51.1 (2022-02-15) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.51.0 (2022-02-15) - -### Features - -- **table:** ability to add expand/collapse all to th ([#6914](https://github.com/patternfly/patternfly-react/issues/6914)) ([ee510ee](https://github.com/patternfly/patternfly-react/commit/ee510ee8c8d3a069b75c73873ebd32b0b9a4d9c7)) - -## 6.50.2 (2022-02-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.50.1 (2022-02-14) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.50.0 (2022-02-14) - -### Features - -- **Page:** Added center alignment for page sections ([#6893](https://github.com/patternfly/patternfly-react/issues/6893)) ([440918f](https://github.com/patternfly/patternfly-react/commit/440918fc1bd9795cd916a04fe32677ae5f69ef68)) - -# 6.49.0 (2022-02-11) - -### Features - -- **Menu:** allow drilldown menu functions ([#6872](https://github.com/patternfly/patternfly-react/issues/6872)) ([b345b07](https://github.com/patternfly/patternfly-react/commit/b345b07de7c1576e984a06f4c573641b04956f5c)) - -## 6.48.3 (2022-02-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.48.2 (2022-02-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.48.1 (2022-02-11) - -### Bug Fixes - -- **Select:** Fixed so that view more btn click does not close the menu in React 16 ([#6922](https://github.com/patternfly/patternfly-react/issues/6922)) ([89da91d](https://github.com/patternfly/patternfly-react/commit/89da91dfd3a9e7af8ee26f8b6b5ac01c5b2487d4)) - -# 6.48.0 (2022-02-10) - -### Features - -- **ToolTip:** Diagonal tooltip placement ([#6887](https://github.com/patternfly/patternfly-react/issues/6887)) ([897fd7d](https://github.com/patternfly/patternfly-react/commit/897fd7d248888e7324d36f574231985e8523a700)) - -## 6.47.3 (2022-02-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.47.2 (2022-02-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.47.1 (2022-02-09) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.47.0 (2022-02-08) - -### Features - -- **MenuToggle:** add full height variation ([#6869](https://github.com/patternfly/patternfly-react/issues/6869)) ([415e02f](https://github.com/patternfly/patternfly-react/commit/415e02f5e5617367db717cd5120df04ec1a208eb)) - -# 6.46.0 (2022-02-08) - -### Features - -- **Table:** add striping ([#6886](https://github.com/patternfly/patternfly-react/issues/6886)) ([47abda7](https://github.com/patternfly/patternfly-react/commit/47abda7831e21c58051b90982f02cb48f7a22a22)) - -## 6.45.21 (2022-02-07) - -### Bug Fixes - -- **TimePicker:** apply includeSeconds when making options ([#6865](https://github.com/patternfly/patternfly-react/issues/6865)) ([5b6d6c9](https://github.com/patternfly/patternfly-react/commit/5b6d6c9979046c111b00456622758f542627ac11)) - -## 6.45.20 (2022-02-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.19 (2022-02-07) - -### Bug Fixes - -- **Select:** remove logic from default inputAutoComplete ([#6873](https://github.com/patternfly/patternfly-react/issues/6873)) ([b3b61c1](https://github.com/patternfly/patternfly-react/commit/b3b61c175f23cdc9dad8c71054301d1090795ede)) - -## 6.45.18 (2022-02-04) - -### Bug Fixes - -- **TimePicker:** remove automatically validation from onChange event ([#6884](https://github.com/patternfly/patternfly-react/issues/6884)) ([e7088e4](https://github.com/patternfly/patternfly-react/commit/e7088e4e7a9348fa412d2815af1b0820ee7754ef)) - -## 6.45.17 (2022-02-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.16 (2022-02-02) - -### Bug Fixes - -- **numberinput:** import input group component instead ([#6850](https://github.com/patternfly/patternfly-react/issues/6850)) ([2a94545](https://github.com/patternfly/patternfly-react/commit/2a94545ead3be3ea3c987b1273e18b943315c36e)) - -## 6.45.15 (2022-01-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.14 (2022-01-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.13 (2022-01-26) - -### Reverts - -- Revert "Improve IAction type (#6108)" (#6862) ([94aea84](https://github.com/patternfly/patternfly-react/commit/94aea84036e26f4cc472b7d445ee49b088eb6a47)), closes [#6108](https://github.com/patternfly/patternfly-react/issues/6108) [#6862](https://github.com/patternfly/patternfly-react/issues/6862) - -## 6.45.12 (2022-01-26) - -### Bug Fixes - -- **OverflowMenu:** ignore menu being covered in intg. tests ([#6852](https://github.com/patternfly/patternfly-react/issues/6852)) ([066e2bb](https://github.com/patternfly/patternfly-react/commit/066e2bb994f4eca5538fb9287e5d10ddf4a30cac)) - -## 6.45.11 (2022-01-26) - -### Reverts - -- Revert "feat(Tabs): enforce restricted type for children (#6767)" (#6857) ([eca9a70](https://github.com/patternfly/patternfly-react/commit/eca9a708e8d53416e60a790ea876aa0b2e398212)), closes [#6767](https://github.com/patternfly/patternfly-react/issues/6767) [#6857](https://github.com/patternfly/patternfly-react/issues/6857) - -## 6.45.10 (2022-01-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.9 (2022-01-25) - -### Bug Fixes - -- **Select:** Footer keyboard bugs ([#6844](https://github.com/patternfly/patternfly-react/issues/6844)) ([7f06125](https://github.com/patternfly/patternfly-react/commit/7f06125cfb52884708107da82ca3800207c9846f)) - -## 6.45.8 (2022-01-24) - -### Bug Fixes - -- **table:** fixed action example ([#6800](https://github.com/patternfly/patternfly-react/issues/6800)) ([eaaedc2](https://github.com/patternfly/patternfly-react/commit/eaaedc28cf54cca1a47aaa5c4f5f76a11d32864d)) - -## 6.45.7 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.6 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.5 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.4 (2022-01-20) - -### Bug Fixes - -- **DatePicker:** update empty state validation and add onblur event ([#6822](https://github.com/patternfly/patternfly-react/issues/6822)) ([258e818](https://github.com/patternfly/patternfly-react/commit/258e81861adc0488ae42f349aff78f06f2874fa7)) - -## 6.45.3 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.45.2 (2022-01-20) - -### Bug Fixes - -- **Select:** Fixed dot next to the spinner in grouped view more variant ([#6831](https://github.com/patternfly/patternfly-react/issues/6831)) ([ccc81b4](https://github.com/patternfly/patternfly-react/commit/ccc81b4c8c30506f28e61e73dcbc106da50ca692)) - -## 6.45.1 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.45.0 (2022-01-20) - -### Features - -- **Truncate:** added Truncate component ([#6713](https://github.com/patternfly/patternfly-react/issues/6713)) ([c803b5d](https://github.com/patternfly/patternfly-react/commit/c803b5df3761f689172d79bbc71bc38623b0bf5a)) - -## 6.44.6 (2022-01-20) - -### Bug Fixes - -- **TextInputGroup:** address various issues ([#6774](https://github.com/patternfly/patternfly-react/issues/6774)) ([010058a](https://github.com/patternfly/patternfly-react/commit/010058acc7115fb76a35fe06634083ada62cece0)) - -## 6.44.5 (2022-01-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.44.4 (2022-01-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.44.3 (2022-01-19) - -### Bug Fixes - -- **examples:** amend row index in tree table examples ([#6830](https://github.com/patternfly/patternfly-react/issues/6830)) ([e676fb1](https://github.com/patternfly/patternfly-react/commit/e676fb1171618e957a4564af31c15ca6e3800507)), closes [#6719](https://github.com/patternfly/patternfly-react/issues/6719) - -## 6.44.2 (2022-01-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.44.1 (2022-01-19) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.44.0 (2022-01-19) - -### Features - -- **NumberInput:** call onMinus/onPlus on arrow-up/down pressed ([#6764](https://github.com/patternfly/patternfly-react/issues/6764)) ([545a7f8](https://github.com/patternfly/patternfly-react/commit/545a7f8791dbf2937416509a01b197cc1daf80db)) - -# 6.43.0 (2022-01-19) - -### Features - -- **TimePicker:** Allow for seconds via new prop; includeSeconds ([#6769](https://github.com/patternfly/patternfly-react/issues/6769)) ([417b51a](https://github.com/patternfly/patternfly-react/commit/417b51a6b8bd997042e16a0e821fb63281e53d30)) - -## 6.42.5 (2022-01-18) - -### Bug Fixes - -- **Tabs:** enable tabs scroll button for small window ([#6784](https://github.com/patternfly/patternfly-react/issues/6784)) ([a29b430](https://github.com/patternfly/patternfly-react/commit/a29b43094ae3d5ce7f4b26e4041cd595e675ee58)) - -## 6.42.4 (2022-01-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.42.3 (2022-01-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.42.2 (2022-01-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.42.1 (2022-01-18) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.42.0 (2022-01-17) - -### Features - -- **Tabs:** enforce restricted type for children ([#6767](https://github.com/patternfly/patternfly-react/issues/6767)) ([0d224df](https://github.com/patternfly/patternfly-react/commit/0d224dfb71b1a89c5783bd9ea290ece2f325ad21)) - -## 6.41.1 (2022-01-17) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.41.0 (2022-01-14) - -### Features - -- **DescriptionList:** add option to fill columns first ([#6736](https://github.com/patternfly/patternfly-react/issues/6736)) ([c955c29](https://github.com/patternfly/patternfly-react/commit/c955c2917dbc4b85ce58fac4f93845c429186e1b)) - -## 6.40.2 (2022-01-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.40.1 (2022-01-14) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.40.0 (2022-01-12) - -### Features - -- **expandable-section:** added indented variation ([#6763](https://github.com/patternfly/patternfly-react/issues/6763)) ([703b922](https://github.com/patternfly/patternfly-react/commit/703b9224e43bedd5b37ec41d8f26f2939836d610)) - -## 6.39.1 (2022-01-11) - -### Bug Fixes - -- **Select:** update typeahead Select children when any option attribute changes ([#6747](https://github.com/patternfly/patternfly-react/issues/6747)) ([1e03f3c](https://github.com/patternfly/patternfly-react/commit/1e03f3c6d0a7c507e33398c98863e40bb2233a62)) - -# 6.39.0 (2022-01-11) - -### Features - -- **ToggleGroup:** support disabling all items under the parent ([#6700](https://github.com/patternfly/patternfly-react/issues/6700)) ([a60c8f3](https://github.com/patternfly/patternfly-react/commit/a60c8f3485546c797750451714a70b7e84a4ba0f)) - -## 6.38.1 (2022-01-11) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.38.0 (2022-01-11) - -### Features - -- **Table:** update clickable area for checks/radios ([#6754](https://github.com/patternfly/patternfly-react/issues/6754)) ([c4f3c2d](https://github.com/patternfly/patternfly-react/commit/c4f3c2d7f515e3d6ad73d8b52238ca426281469a)) - -## 6.37.2 (2022-01-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.37.1 (2022-01-10) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.37.0 (2022-01-10) - -### Features - -- **Dropdown:** add plain-text variant support ([#6721](https://github.com/patternfly/patternfly-react/issues/6721)) ([e5000e3](https://github.com/patternfly/patternfly-react/commit/e5000e36194e36b9c6ae49efdb0a513125efcb70)) - -## 6.36.11 (2022-01-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.10 (2022-01-10) - -### Bug Fixes - -- **Tabs:** allow href navigation from tabs ([#6755](https://github.com/patternfly/patternfly-react/issues/6755)) ([290d89a](https://github.com/patternfly/patternfly-react/commit/290d89aed2dd4517db9859cc80ef2745cb8a779b)) - -## 6.36.9 (2022-01-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.8 (2022-01-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.7 (2022-01-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.6 (2022-01-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.5 (2022-01-07) - -### Bug Fixes - -- **jumplinks:** Updated JumpLinks demo to allow for horizontal display ([#6731](https://github.com/patternfly/patternfly-react/issues/6731)) ([f37b934](https://github.com/patternfly/patternfly-react/commit/f37b9342e678da247056c73767d5d40ff5435bda)) - -## 6.36.4 (2022-01-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.3 (2022-01-06) - -### Bug Fixes - -- **TopologyControlBar:** Update screen reader className to latest ([#6739](https://github.com/patternfly/patternfly-react/issues/6739)) ([ed9da57](https://github.com/patternfly/patternfly-react/commit/ed9da575fddf9fe7af8a891972f7a66520785411)) - -## 6.36.2 (2022-01-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.36.1 (2022-01-06) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.36.0 (2022-01-05) - -### Features - -- **Table:** allow a generic to be passed for cell props ([#6691](https://github.com/patternfly/patternfly-react/issues/6691)) ([e22c7be](https://github.com/patternfly/patternfly-react/commit/e22c7bebf630b7cd71e4dc434c593b69fa2fb2c8)) - -## 6.35.3 (2022-01-04) - -### Bug Fixes - -- **docs:** fix broken theme-patternfly-org link ([#6726](https://github.com/patternfly/patternfly-react/issues/6726)) ([4ba15e9](https://github.com/patternfly/patternfly-react/commit/4ba15e9d9611afbb80d995e4d63f5478c4212a9e)) - -## 6.35.2 (2022-01-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.35.1 (2022-01-04) - -### Bug Fixes - -- **OverflowMenu:** pass HTMLDivElements props to group and control divs ([#6674](https://github.com/patternfly/patternfly-react/issues/6674)) ([e6d0d64](https://github.com/patternfly/patternfly-react/commit/e6d0d6406a07de04f4b232ca9a21247c0e9746c0)) - -# 6.35.0 (2021-12-22) - -### Features - -- **Toolbar:** support customizing text in ToolbarChipGroupContent ([#6694](https://github.com/patternfly/patternfly-react/issues/6694)) ([24266ad](https://github.com/patternfly/patternfly-react/commit/24266adf569c027574abd1503b5e46974220349a)) - -## 6.34.5 (2021-12-16) - -### Bug Fixes - -- **LogViewer:** fix the issue that scrollbar could compress the content of the logs ([#6702](https://github.com/patternfly/patternfly-react/issues/6702)) ([11aab1f](https://github.com/patternfly/patternfly-react/commit/11aab1f71a1aa9959cf14b887ab55b845a794a00)) - -## 6.34.4 (2021-12-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.34.3 (2021-12-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.34.2 (2021-12-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.34.1 (2021-12-09) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.34.0 (2021-12-09) - -### Features - -- **Popover:** add composable header and alert variants ([#6664](https://github.com/patternfly/patternfly-react/issues/6664)) ([9028e8b](https://github.com/patternfly/patternfly-react/commit/9028e8ba5d674bde6a7e29532f7926e200dd632a)) - -## 6.33.1 (2021-12-08) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.33.0 (2021-12-08) - -### Features - -- **DualListSelector:** add composable tree example ([#6652](https://github.com/patternfly/patternfly-react/issues/6652)) ([5fe977b](https://github.com/patternfly/patternfly-react/commit/5fe977becb5dea615724abf846f315e50931c188)) - -## 6.32.1 (2021-12-07) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.32.0 (2021-12-06) - -### Features - -- **Card:** Add disabled card and clean up props ([#6659](https://github.com/patternfly/patternfly-react/issues/6659)) ([86f225a](https://github.com/patternfly/patternfly-react/commit/86f225ab2e02d617e2d380c4a7f7593037c50e84)) - -# 6.31.0 (2021-12-06) - -### Features - -- **MenuToggle:** add plain with text variant ([#6627](https://github.com/patternfly/patternfly-react/issues/6627)) ([1f4ca5e](https://github.com/patternfly/patternfly-react/commit/1f4ca5e36d7077da3ff3e6918874048c784216e0)) - -# 6.30.0 (2021-12-06) - -### Features - -- **Dropdown:** add toggle variants ([#6651](https://github.com/patternfly/patternfly-react/issues/6651)) ([6414309](https://github.com/patternfly/patternfly-react/commit/64143094aec86aed86adb320e059d987af4f5f24)) - -## 6.29.1 (2021-12-06) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.29.0 (2021-12-03) - -### Features - -- **Select:** add ability to persist filtered children state ([#6670](https://github.com/patternfly/patternfly-react/issues/6670)) ([f618577](https://github.com/patternfly/patternfly-react/commit/f618577582e389409978bd1d6512ca0cf5d855cf)) - -## 6.28.17 (2021-12-03) - -### Bug Fixes - -- **Slider:** fixed examples with custom steps and input ([#6662](https://github.com/patternfly/patternfly-react/issues/6662)) ([b4cab38](https://github.com/patternfly/patternfly-react/commit/b4cab38a2492564bf91e3711ce322951bcc6a051)) - -## 6.28.16 (2021-12-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.15 (2021-12-02) - -### Bug Fixes - -- **Tile:** fix selecting tile in tile demo ([#6653](https://github.com/patternfly/patternfly-react/issues/6653)) ([e12e44d](https://github.com/patternfly/patternfly-react/commit/e12e44d4b623de305b7df04174144a9496d282a7)) - -## 6.28.14 (2021-12-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.13 (2021-11-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.12 (2021-11-30) - -### Bug Fixes - -- **action-list:** added support for classname ([#6647](https://github.com/patternfly/patternfly-react/issues/6647)) ([dd3d2ce](https://github.com/patternfly/patternfly-react/commit/dd3d2ce32b4d3e7562faf465abdc508e17f097d9)) - -## 6.28.11 (2021-11-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.10 (2021-11-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.9 (2021-11-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.8 (2021-11-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.7 (2021-11-18) - -### Bug Fixes - -- **pagination:** updated toggleTemplate prop description to include ofWord prop ([#6622](https://github.com/patternfly/patternfly-react/issues/6622)) ([26733a6](https://github.com/patternfly/patternfly-react/commit/26733a6a256ad0e873afbc268a712027470fdeaa)) - -## 6.28.6 (2021-11-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.5 (2021-11-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.4 (2021-11-15) - -### Bug Fixes - -- **FileUpload:** Downgrade react-dropzone back to 9.0.0 to avoid a breaking type change, fix behavior regressions ([#6610](https://github.com/patternfly/patternfly-react/issues/6610)) ([574bf4f](https://github.com/patternfly/patternfly-react/commit/574bf4ff3ccf7f67ce750bc48067eaf826e99990)) - -## 6.28.3 (2021-11-15) - -### Bug Fixes - -- **Menu:** allow maxMenuHeight with Scrollabe ([#6608](https://github.com/patternfly/patternfly-react/issues/6608)) ([8c1f12c](https://github.com/patternfly/patternfly-react/commit/8c1f12c2b0e86bbc5ba1071db3ebf29fee7421a0)) - -## 6.28.2 (2021-11-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.28.1 (2021-11-15) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.28.0 (2021-11-12) - -### Features - -- **card:** added hoverable/selectable/selected-raised variant ([#6565](https://github.com/patternfly/patternfly-react/issues/6565)) ([8c60568](https://github.com/patternfly/patternfly-react/commit/8c60568ba4fa18398fed636710e222ce506de82c)) - -## 6.27.2 (2021-11-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.27.1 (2021-11-12) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.27.0 (2021-11-11) - -### Features - -- **ComposableTable:** add sticky columns and nested headers ([#6538](https://github.com/patternfly/patternfly-react/issues/6538)) ([f11245b](https://github.com/patternfly/patternfly-react/commit/f11245bfccc8c6c02a9d5545a69ed533743cc552)) - -# 6.26.0 (2021-11-11) - -### Features - -- **contextselector:** added support for context selector items as links ([#6554](https://github.com/patternfly/patternfly-react/issues/6554)) ([c465388](https://github.com/patternfly/patternfly-react/commit/c4653881eee0cd8ec8e3a7125bbef0bded9f2de0)) - -# 6.25.0 (2021-11-11) - -### Features - -- **Navigation:** Added exemple with third level ([#6564](https://github.com/patternfly/patternfly-react/issues/6564)) ([c30da53](https://github.com/patternfly/patternfly-react/commit/c30da532855118f705c8cfc87c545bb1eea11ebb)) - -# 6.24.0 (2021-11-11) - -### Features - -- enhance type correctness of CodeEditor ([#6579](https://github.com/patternfly/patternfly-react/issues/6579)) ([e1ad65c](https://github.com/patternfly/patternfly-react/commit/e1ad65c225968d5a9c74019d19e4a3c5e2666926)) - -## 6.23.4 (2021-11-10) - -### Bug Fixes - -- **jumplinks:** fixed to always set clicked item as active ([#6542](https://github.com/patternfly/patternfly-react/issues/6542)) ([845c98f](https://github.com/patternfly/patternfly-react/commit/845c98f5f3df8aa9b6acc190707c5f1d7bf3ca38)) - -## 6.23.3 (2021-11-10) - -### Bug Fixes - -- **Menu:** stop passing disableHover to DrilldownMenu DOM ([#6571](https://github.com/patternfly/patternfly-react/issues/6571)) ([63dcf25](https://github.com/patternfly/patternfly-react/commit/63dcf256723848ff3789828fc0a5f86d5009fc87)) - -## 6.23.2 (2021-11-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.23.1 (2021-11-10) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.23.0 (2021-11-09) - -### Features - -- **Table:** set default sort direction ([#6544](https://github.com/patternfly/patternfly-react/issues/6544)) ([9ee4942](https://github.com/patternfly/patternfly-react/commit/9ee49428c8e1041721f2a09f8176a5aba3335049)) - -## 6.22.4 (2021-11-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.22.3 (2021-11-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.22.2 (2021-11-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.22.1 (2021-11-08) - -### Bug Fixes - -- **acccessconsoles:** use object type Select options values in order to not mix displayed text with option keys ([#6496](https://github.com/patternfly/patternfly-react/issues/6496)) ([975c8e1](https://github.com/patternfly/patternfly-react/commit/975c8e14d7ea8c53eb4048ea6ef73e804b3ad2be)) - -# 6.22.0 (2021-11-04) - -### Features - -- **log-viewer:** support ANSI color ([#6519](https://github.com/patternfly/patternfly-react/issues/6519)) ([936a699](https://github.com/patternfly/patternfly-react/commit/936a699b0514a492d3c40be08932fb7bab275cce)) - -## 6.21.11 (2021-11-01) - -### Bug Fixes - -- **AboutModal:** allow to disable FocusTrap ([#6509](https://github.com/patternfly/patternfly-react/issues/6509)) ([72536e1](https://github.com/patternfly/patternfly-react/commit/72536e1f73641ff3f19f865f08dbb41ad0ee7b9f)) - -## 6.21.10 (2021-10-29) - -### Bug Fixes - -- **Banner:** forward props ([#6511](https://github.com/patternfly/patternfly-react/issues/6511)) ([e36c890](https://github.com/patternfly/patternfly-react/commit/e36c89077afa82340994c0e3c0fc929e601e01bc)) - -## 6.21.9 (2021-10-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.21.8 (2021-10-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.21.7 (2021-10-27) - -### Bug Fixes - -- change transformer cjs package to private ([#6515](https://github.com/patternfly/patternfly-react/issues/6515)) ([efcb357](https://github.com/patternfly/patternfly-react/commit/efcb3573b71541328ce2b16caa80ce33b2a62131)) - -## 6.21.6 (2021-10-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.21.5 (2021-10-26) - -### Bug Fixes - -- **tokens:** added check for no matching var to avoid infinite loop ([#6502](https://github.com/patternfly/patternfly-react/issues/6502)) ([99605c2](https://github.com/patternfly/patternfly-react/commit/99605c213f12490d0abe75910e05c3e6da26a1f3)) - -## 6.21.4 (2021-10-26) - -### Bug Fixes - -- add transformer package ([#6507](https://github.com/patternfly/patternfly-react/issues/6507)) ([daffd28](https://github.com/patternfly/patternfly-react/commit/daffd2864388abe63e625f962a8b38c2b7056209)) - -## 6.21.3 (2021-10-26) - -### Bug Fixes - -- **transformer:** publish transformer in patternfly org ([#6506](https://github.com/patternfly/patternfly-react/issues/6506)) ([b739af3](https://github.com/patternfly/patternfly-react/commit/b739af318400b41d4e9a53bdff6232ecc176916e)) - -## 6.21.2 (2021-10-26) - -### Bug Fixes - -- **readme:** update react-core readme ([#6505](https://github.com/patternfly/patternfly-react/issues/6505)) ([d4f9a11](https://github.com/patternfly/patternfly-react/commit/d4f9a114584eea7ab67873f199e80b348886e14b)) - -## 6.21.1 (2021-10-26) - -### Bug Fixes - -- **DualListSelector:** account for duplicate folders ([#6499](https://github.com/patternfly/patternfly-react/issues/6499)) ([e531e68](https://github.com/patternfly/patternfly-react/commit/e531e68e7adc58459b3630f5c915ed69e3021012)) - -# 6.21.0 (2021-10-26) - -### Features - -- **toolbar:** add sticky top modifier to toolbar ([#6447](https://github.com/patternfly/patternfly-react/issues/6447)) ([fe7605a](https://github.com/patternfly/patternfly-react/commit/fe7605a67428b43ec00b3cb2117270296576737c)) - -## 6.20.1 (2021-10-26) - -### Bug Fixes - -- **types:** SelectOptionProp made optional ([#6503](https://github.com/patternfly/patternfly-react/issues/6503)) ([716ac80](https://github.com/patternfly/patternfly-react/commit/716ac80e2414507d589ee3002fc0cea0068ae59c)) - -# 6.20.0 (2021-10-26) - -### Features - -- **TextInputGroup:** add text input group ([#6482](https://github.com/patternfly/patternfly-react/issues/6482)) ([a02fd4f](https://github.com/patternfly/patternfly-react/commit/a02fd4fe3345245b2252ee5a261f5b1460490642)), closes [patternfly/patternfly-react#6409](https://github.com/patternfly/patternfly-react/issues/6409) - -## 6.19.4 (2021-10-26) - -### Bug Fixes - -- **KebabToggle:** adds event to onToggle definition ([#6490](https://github.com/patternfly/patternfly-react/issues/6490)) ([0441575](https://github.com/patternfly/patternfly-react/commit/04415757917062aa13c06b34bd94ef38c2334088)) - -## 6.19.3 (2021-10-26) - -### Bug Fixes - -- **Modal:** test clean up ([#6489](https://github.com/patternfly/patternfly-react/issues/6489)) ([c8eaa7c](https://github.com/patternfly/patternfly-react/commit/c8eaa7c838fbedb98ea0f38e4f535488040a72e2)) - -## 6.19.2 (2021-10-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.19.1 (2021-10-25) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.19.0 (2021-10-25) - -### Features - -- **Tabs:** Added support for tab content body with padding, added tabs open and tab secondary tabs demos ([#6484](https://github.com/patternfly/patternfly-react/issues/6484)) ([0ccbe9d](https://github.com/patternfly/patternfly-react/commit/0ccbe9d1e6e0dac0730466c92a90fe2cd9f6560d)) - -## 6.18.1 (2021-10-21) - -**Note:** Version bump only for package @patternfly/react-charts - -# 6.18.0 (2021-10-21) - -### Features - -- **label:** added compact label, updated horizontal grid card demo ([#6448](https://github.com/patternfly/patternfly-react/issues/6448)) ([89e0431](https://github.com/patternfly/patternfly-react/commit/89e04317924282140606d45f2292aa3f658b4b6c)) - -## 6.17.1 (2021-10-21) - -### Bug Fixes - -- **DescriptionListGroup:** forward props to DOM ([#6466](https://github.com/patternfly/patternfly-react/issues/6466)) ([b78e2aa](https://github.com/patternfly/patternfly-react/commit/b78e2aa9c0360ce8418f6e7b55274ea1a50de518)) - -# 6.17.0 (2021-10-20) - -### Features - -- **Progress:** allow node titles ([#6470](https://github.com/patternfly/patternfly-react/issues/6470)) ([46d5252](https://github.com/patternfly/patternfly-react/commit/46d52523ad5111bb11729c2750abe9aeb35d9326)) - -# 6.16.0 (2021-10-20) - -### Features - -- **DualListSelector:** add disabled flag ([#6442](https://github.com/patternfly/patternfly-react/issues/6442)) ([85e1314](https://github.com/patternfly/patternfly-react/commit/85e131435be12c2df79336e9fa56987ed3717417)) - -## 6.15.35 (2021-10-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## 6.15.34 (2021-10-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.32...@patternfly/react-charts@6.15.33) (2021-10-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.31...@patternfly/react-charts@6.15.32) (2021-10-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.30...@patternfly/react-charts@6.15.31) (2021-10-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.29...@patternfly/react-charts@6.15.30) (2021-10-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.28...@patternfly/react-charts@6.15.29) (2021-10-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.27...@patternfly/react-charts@6.15.28) (2021-10-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.26...@patternfly/react-charts@6.15.27) (2021-10-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.25...@patternfly/react-charts@6.15.26) (2021-10-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.24...@patternfly/react-charts@6.15.25) (2021-09-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.23...@patternfly/react-charts@6.15.24) (2021-09-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.22...@patternfly/react-charts@6.15.23) (2021-09-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.21...@patternfly/react-charts@6.15.22) (2021-09-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.20...@patternfly/react-charts@6.15.21) (2021-08-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.19...@patternfly/react-charts@6.15.20) (2021-08-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.18...@patternfly/react-charts@6.15.19) (2021-08-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.17...@patternfly/react-charts@6.15.18) (2021-08-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.16...@patternfly/react-charts@6.15.17) (2021-08-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.15...@patternfly/react-charts@6.15.16) (2021-08-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.14...@patternfly/react-charts@6.15.15) (2021-08-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.13...@patternfly/react-charts@6.15.14) (2021-08-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.12...@patternfly/react-charts@6.15.13) (2021-07-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.11...@patternfly/react-charts@6.15.12) (2021-07-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.10...@patternfly/react-charts@6.15.11) (2021-07-29) - -### Bug Fixes - -- **charts:** donut chart shows gap ([#6084](https://github.com/patternfly/patternfly-react/issues/6084)) ([cbdfdcd](https://github.com/patternfly/patternfly-react/commit/cbdfdcde74fad13e305a7d6a4272bf02faf32cee)) - -## [6.15.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.9...@patternfly/react-charts@6.15.10) (2021-07-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.8...@patternfly/react-charts@6.15.9) (2021-07-19) - -### Bug Fixes - -- **charts:** Victory tooltip performance update ([#6049](https://github.com/patternfly/patternfly-react/issues/6049)) ([829d4f4](https://github.com/patternfly/patternfly-react/commit/829d4f4cb441968e9ddfe17b0fed9acf2c3b1428)) - -## [6.15.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.7...@patternfly/react-charts@6.15.8) (2021-07-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.6...@patternfly/react-charts@6.15.7) (2021-07-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.5...@patternfly/react-charts@6.15.6) (2021-07-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.4...@patternfly/react-charts@6.15.5) (2021-07-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.3...@patternfly/react-charts@6.15.4) (2021-06-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.2...@patternfly/react-charts@6.15.3) (2021-06-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.1...@patternfly/react-charts@6.15.2) (2021-06-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.15.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.15.0...@patternfly/react-charts@6.15.1) (2021-06-10) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.15.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.29...@patternfly/react-charts@6.15.0) (2021-06-09) - -### Features - -- **charts:** Add left and right triangle legend symbols ([#5869](https://github.com/patternfly/patternfly-react/issues/5869)) ([89e45d3](https://github.com/patternfly/patternfly-react/commit/89e45d36c557d6a795ea83f9b63c0733835c0348)) - -## [6.14.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.28...@patternfly/react-charts@6.14.29) (2021-06-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.27...@patternfly/react-charts@6.14.28) (2021-06-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.26...@patternfly/react-charts@6.14.27) (2021-05-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.25...@patternfly/react-charts@6.14.26) (2021-05-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.24...@patternfly/react-charts@6.14.25) (2021-05-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.23...@patternfly/react-charts@6.14.24) (2021-05-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.22...@patternfly/react-charts@6.14.23) (2021-05-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.21...@patternfly/react-charts@6.14.22) (2021-05-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.20...@patternfly/react-charts@6.14.21) (2021-05-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.19...@patternfly/react-charts@6.14.20) (2021-05-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.18...@patternfly/react-charts@6.14.19) (2021-05-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.17...@patternfly/react-charts@6.14.18) (2021-05-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.16...@patternfly/react-charts@6.14.17) (2021-04-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.15...@patternfly/react-charts@6.14.16) (2021-04-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.14...@patternfly/react-charts@6.14.15) (2021-04-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.13...@patternfly/react-charts@6.14.14) (2021-04-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.12...@patternfly/react-charts@6.14.13) (2021-04-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.11...@patternfly/react-charts@6.14.12) (2021-04-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.10...@patternfly/react-charts@6.14.11) (2021-03-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.9...@patternfly/react-charts@6.14.10) (2021-03-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.8...@patternfly/react-charts@6.14.9) (2021-03-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.7...@patternfly/react-charts@6.14.8) (2021-03-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.6...@patternfly/react-charts@6.14.7) (2021-03-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.5...@patternfly/react-charts@6.14.6) (2021-03-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.4...@patternfly/react-charts@6.14.5) (2021-03-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.3...@patternfly/react-charts@6.14.4) (2021-03-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.2...@patternfly/react-charts@6.14.3) (2021-03-04) - -### Bug Fixes - -- **searchinput:** add searchInputMenuBody class ([#5518](https://github.com/patternfly/patternfly-react/issues/5518)) ([99f0512](https://github.com/patternfly/patternfly-react/commit/99f05123d28a7be887efd1921733fc2dc0bddd6d)) - -## [6.14.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.1...@patternfly/react-charts@6.14.2) (2021-02-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.14.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.14.0...@patternfly/react-charts@6.14.1) (2021-02-16) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.14.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.14...@patternfly/react-charts@6.14.0) (2021-02-12) - -### Features - -- **Slider:** Added touch support ([#5453](https://github.com/patternfly/patternfly-react/issues/5453)) ([32ce723](https://github.com/patternfly/patternfly-react/commit/32ce7238d8743f6d4a5f7b128b1293e855d012ca)) - -## [6.13.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.13...@patternfly/react-charts@6.13.14) (2021-02-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.12...@patternfly/react-charts@6.13.13) (2021-02-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.11...@patternfly/react-charts@6.13.12) (2021-02-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.10...@patternfly/react-charts@6.13.11) (2021-02-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.9...@patternfly/react-charts@6.13.10) (2021-02-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.8...@patternfly/react-charts@6.13.9) (2021-02-01) - -### Bug Fixes - -- **charts:** Bar chart remains muted with interactive legend ([#5378](https://github.com/patternfly/patternfly-react/issues/5378)) ([b83995c](https://github.com/patternfly/patternfly-react/commit/b83995c1cb47ea3641f4f65de63361764ff23a17)) - -## [6.13.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.7...@patternfly/react-charts@6.13.8) (2021-01-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.6...@patternfly/react-charts@6.13.7) (2021-01-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.5...@patternfly/react-charts@6.13.6) (2021-01-22) - -### Bug Fixes - -- **Drawer:** initial width doesn't respect min/max widths ([#5313](https://github.com/patternfly/patternfly-react/issues/5313)) ([4f199c4](https://github.com/patternfly/patternfly-react/commit/4f199c4db5c3cb493d2947d871f687cc5527517c)) - -## [6.13.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.4...@patternfly/react-charts@6.13.5) (2021-01-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.3...@patternfly/react-charts@6.13.4) (2021-01-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.2...@patternfly/react-charts@6.13.3) (2021-01-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.1...@patternfly/react-charts@6.13.2) (2021-01-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.13.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.13.0...@patternfly/react-charts@6.13.1) (2021-01-07) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.13.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.15...@patternfly/react-charts@6.13.0) (2021-01-06) - -### Features - -- **packages:** use react 17 ([#5111](https://github.com/patternfly/patternfly-react/issues/5111)) ([7fbafcc](https://github.com/patternfly/patternfly-react/commit/7fbafcc947c95d2bda2f4fad8f7737cf7dd3fca6)) - -## [6.12.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.14...@patternfly/react-charts@6.12.15) (2021-01-04) - -### Bug Fixes - -- **charts:** ChartLegendTooltip shown with no data ([#5296](https://github.com/patternfly/patternfly-react/issues/5296)) ([bf05071](https://github.com/patternfly/patternfly-react/commit/bf0507184f6beb3e0d96db4f62f7303cba6cb4d4)) - -## [6.12.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.13...@patternfly/react-charts@6.12.14) (2021-01-04) - -### Bug Fixes - -- **charts:** Incorrect colorScale prop type ([#5303](https://github.com/patternfly/patternfly-react/issues/5303)) ([8c930fb](https://github.com/patternfly/patternfly-react/commit/8c930fb0a87fdd779618e83c7276a83dd3b45262)) -- **charts:** theme font must use token value ([#5301](https://github.com/patternfly/patternfly-react/issues/5301)) ([876c17d](https://github.com/patternfly/patternfly-react/commit/876c17dad92a2ce2e33e30e0de517738091d97e9)) - -## [6.12.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.12...@patternfly/react-charts@6.12.13) (2020-12-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.11...@patternfly/react-charts@6.12.12) (2020-12-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.10...@patternfly/react-charts@6.12.11) (2020-12-11) - -### Bug Fixes - -- **charts:** tooltip pointerLength error ([#5245](https://github.com/patternfly/patternfly-react/issues/5245)) ([5cdcabb](https://github.com/patternfly/patternfly-react/commit/5cdcabb42bac9d19cf485b9868e297420f44e9f5)) - -## [6.12.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.9...@patternfly/react-charts@6.12.10) (2020-12-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.8...@patternfly/react-charts@6.12.9) (2020-12-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.7...@patternfly/react-charts@6.12.8) (2020-12-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.6...@patternfly/react-charts@6.12.7) (2020-12-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.5...@patternfly/react-charts@6.12.6) (2020-12-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.4...@patternfly/react-charts@6.12.5) (2020-11-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.3...@patternfly/react-charts@6.12.4) (2020-11-23) - -### Bug Fixes - -- **charts:** replace victory with victory-zoom-container ([#5179](https://github.com/patternfly/patternfly-react/issues/5179)) ([bef64a5](https://github.com/patternfly/patternfly-react/commit/bef64a5e8f8ba060061df611d028dec5f8e9adf2)) - -## [6.12.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.2...@patternfly/react-charts@6.12.3) (2020-11-23) - -### Bug Fixes - -- **react-charts:** bump victory and move victory dep to demo app ([#5178](https://github.com/patternfly/patternfly-react/issues/5178)) ([45ec687](https://github.com/patternfly/patternfly-react/commit/45ec687506af9c0cb512feb25aa33ca2b73a7ff4)) - -## [6.12.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.1...@patternfly/react-charts@6.12.2) (2020-11-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.12.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.12.0...@patternfly/react-charts@6.12.1) (2020-11-17) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.12.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.9...@patternfly/react-charts@6.12.0) (2020-11-13) - -### Features - -- **packages:** bump Victory package ([#5116](https://github.com/patternfly/patternfly-react/issues/5116)) ([a4645a2](https://github.com/patternfly/patternfly-react/commit/a4645a2fa14b2742e8957b1ae579f4350e3ddbd4)) - -## [6.11.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.8...@patternfly/react-charts@6.11.9) (2020-10-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.7...@patternfly/react-charts@6.11.8) (2020-10-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.6...@patternfly/react-charts@6.11.7) (2020-10-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.5...@patternfly/react-charts@6.11.6) (2020-10-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.4...@patternfly/react-charts@6.11.5) (2020-10-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.3...@patternfly/react-charts@6.11.4) (2020-10-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.2...@patternfly/react-charts@6.11.3) (2020-10-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.1...@patternfly/react-charts@6.11.2) (2020-10-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.11.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.11.0...@patternfly/react-charts@6.11.1) (2020-10-12) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.11.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.5...@patternfly/react-charts@6.11.0) (2020-10-09) - -### Features - -- **charts:** bumped Victory pkgs from 35.0.8 to 35.2.0 ([#4992](https://github.com/patternfly/patternfly-react/issues/4992)) ([6eed4b1](https://github.com/patternfly/patternfly-react/commit/6eed4b11ef9ed495d18a46ec8082db2b40217e8d)) - -## [6.10.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.4...@patternfly/react-charts@6.10.5) (2020-10-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.10.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.3...@patternfly/react-charts@6.10.4) (2020-10-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.10.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.2...@patternfly/react-charts@6.10.3) (2020-10-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.10.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.1...@patternfly/react-charts@6.10.2) (2020-09-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.10.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.10.0...@patternfly/react-charts@6.10.1) (2020-09-23) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.10.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.9...@patternfly/react-charts@6.10.0) (2020-09-22) - -### Features - -- **workspace:** use new doc theme ([#4840](https://github.com/patternfly/patternfly-react/issues/4840)) ([7bf451d](https://github.com/patternfly/patternfly-react/commit/7bf451d468538cc0b301fb68f0c1a8108600c24f)) - -## [6.9.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.8...@patternfly/react-charts@6.9.9) (2020-09-21) - -### Bug Fixes - -- **charts,table:** replace or use exact lodash imports ([#4830](https://github.com/patternfly/patternfly-react/issues/4830)) ([63a8259](https://github.com/patternfly/patternfly-react/commit/63a8259c49f0eddbc699febb5f72cc5a2defb9eb)) - -## [6.9.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.7...@patternfly/react-charts@6.9.8) (2020-09-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.6...@patternfly/react-charts@6.9.7) (2020-09-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.5...@patternfly/react-charts@6.9.6) (2020-08-24) - -### Bug Fixes - -- **docs:** use ids and h3s ([#4720](https://github.com/patternfly/patternfly-react/issues/4720)) ([a3f684f](https://github.com/patternfly/patternfly-react/commit/a3f684fa23cfce3d8e79b86206773292790cec5c)) - -## [6.9.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.4...@patternfly/react-charts@6.9.5) (2020-08-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.3...@patternfly/react-charts@6.9.4) (2020-08-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.2...@patternfly/react-charts@6.9.3) (2020-08-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.1...@patternfly/react-charts@6.9.2) (2020-08-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.9.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.9.0...@patternfly/react-charts@6.9.1) (2020-08-06) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.9.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.8.1...@patternfly/react-charts@6.9.0) (2020-08-04) - -### Features - -- **NotificationDrawer:** Add notification drawer demo ([#4640](https://github.com/patternfly/patternfly-react/issues/4640)) ([3b9231d](https://github.com/patternfly/patternfly-react/commit/3b9231dab2fd92eb40e38d3a38ffb83562e1dbc2)) - -## [6.8.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.8.0...@patternfly/react-charts@6.8.1) (2020-08-04) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.8.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.7.1...@patternfly/react-charts@6.8.0) (2020-08-03) - -### Features - -- **NotificationBadge:** add needs attention state and count ([#4516](https://github.com/patternfly/patternfly-react/issues/4516)) ([63c7cbf](https://github.com/patternfly/patternfly-react/commit/63c7cbf0beed5497ca7addf7fc6663229f37ab81)) - -## [6.7.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.7.0...@patternfly/react-charts@6.7.1) (2020-08-03) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.7.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.6.3...@patternfly/react-charts@6.7.0) (2020-07-30) - -### Features - -- **charts:** update Victory packages to support OUIA props ([#4633](https://github.com/patternfly/patternfly-react/issues/4633)) ([8674066](https://github.com/patternfly/patternfly-react/commit/8674066337651f5acdf6018fa4e5cd72d37290c0)) - -## [6.6.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.6.2...@patternfly/react-charts@6.6.3) (2020-07-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.6.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.6.1...@patternfly/react-charts@6.6.2) (2020-07-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.6.0...@patternfly/react-charts@6.6.1) (2020-07-17) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.6.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.8...@patternfly/react-charts@6.6.0) (2020-07-16) - -### Features - -- **FormGroup, FormSelect, TextInput, TextArea:** Add warning state ([#4554](https://github.com/patternfly/patternfly-react/issues/4554)) ([4e7f69a](https://github.com/patternfly/patternfly-react/commit/4e7f69a35abd247db99bd946a2c9bc931c335564)) - -## [6.5.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.7...@patternfly/react-charts@6.5.8) (2020-07-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.6...@patternfly/react-charts@6.5.7) (2020-07-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.5...@patternfly/react-charts@6.5.6) (2020-07-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.4...@patternfly/react-charts@6.5.5) (2020-07-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.3...@patternfly/react-charts@6.5.4) (2020-06-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.2...@patternfly/react-charts@6.5.3) (2020-06-23) - -### Bug Fixes - -- **charts:** Victory package update ([#4438](https://github.com/patternfly/patternfly-react/issues/4438)) ([06d4fcb](https://github.com/patternfly/patternfly-react/commit/06d4fcb1d7857a2e9e80ec1d20a21705665c6703)) - -## [6.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.1...@patternfly/react-charts@6.5.2) (2020-06-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.5.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.5.0...@patternfly/react-charts@6.5.1) (2020-06-19) - -### Bug Fixes - -- **charts:** set fixed line height for various text legend labels ([#4419](https://github.com/patternfly/patternfly-react/issues/4419)) ([8df0e5b](https://github.com/patternfly/patternfly-react/commit/8df0e5bca8d104d55c751561d020f2f778fd4e3a)) - -# [6.5.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.8...@patternfly/react-charts@6.5.0) (2020-06-19) - -### Features - -- **Divider:** Add support for insets to the Divider ([#4410](https://github.com/patternfly/patternfly-react/issues/4410)) ([32916b8](https://github.com/patternfly/patternfly-react/commit/32916b89fcf631eb498ae0b64faffec756242127)) - -## [6.4.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.7...@patternfly/react-charts@6.4.8) (2020-06-18) - -### Bug Fixes - -- **charts:** tooltip legend to use Victory's activePoints ([#4409](https://github.com/patternfly/patternfly-react/issues/4409)) ([eaecced](https://github.com/patternfly/patternfly-react/commit/eaeccedb8438bd662c9e4f407e8d0ee9e1d78dcf)) - -## [6.4.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.6...@patternfly/react-charts@6.4.7) (2020-06-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.5...@patternfly/react-charts@6.4.6) (2020-06-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.4...@patternfly/react-charts@6.4.5) (2020-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.3...@patternfly/react-charts@6.4.4) (2020-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.2...@patternfly/react-charts@6.4.3) (2020-06-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.1...@patternfly/react-charts@6.4.2) (2020-06-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.4.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.4.0...@patternfly/react-charts@6.4.1) (2020-06-11) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.4.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.12...@patternfly/react-charts@6.4.0) (2020-06-11) - -### Features - -- **charts:** Added support for a legend tooltip ([#4371](https://github.com/patternfly/patternfly-react/issues/4371)) ([f9ec3b0](https://github.com/patternfly/patternfly-react/commit/f9ec3b007a6b9e658dcdf624d29fa3cb714db3d1)) - -## [6.3.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.11...@patternfly/react-charts@6.3.12) (2020-06-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.10...@patternfly/react-charts@6.3.11) (2020-06-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.9...@patternfly/react-charts@6.3.10) (2020-06-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.8...@patternfly/react-charts@6.3.9) (2020-06-05) - -### Bug Fixes - -- **docs:** add upgrade guide ([#4298](https://github.com/patternfly/patternfly-react/issues/4298)) ([4ee8805](https://github.com/patternfly/patternfly-react/commit/4ee8805ab9b232ebbe280313d4ae3e53bd78fb70)) - -## [6.3.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.7...@patternfly/react-charts@6.3.8) (2020-06-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.6...@patternfly/react-charts@6.3.7) (2020-06-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.5...@patternfly/react-charts@6.3.6) (2020-06-01) - -### Bug Fixes - -- **breakpoints:** make API consistent and appear in docs ([#4310](https://github.com/patternfly/patternfly-react/issues/4310)) ([ac1afa6](https://github.com/patternfly/patternfly-react/commit/ac1afa60067346c658fcb160534d9ddaf7dafbc6)) - -## [6.3.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.4...@patternfly/react-charts@6.3.5) (2020-05-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.3...@patternfly/react-charts@6.3.4) (2020-05-29) - -### Bug Fixes - -- **charts:** Donut chart unique key warning ([#4303](https://github.com/patternfly/patternfly-react/issues/4303)) ([7f86e20](https://github.com/patternfly/patternfly-react/commit/7f86e20e04a5be9e985852cf200ff9664bf7e1a9)) -- **charts:** Update types to match latest Victory pkgs ([#4304](https://github.com/patternfly/patternfly-react/issues/4304)) ([5dfc645](https://github.com/patternfly/patternfly-react/commit/5dfc645ece1bc253e349f725241681692fd944b4)) - -## [6.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.2...@patternfly/react-charts@6.3.3) (2020-05-21) - -### Bug Fixes - -- **charts:** Use Victory's createContainer instead of allowZoom prop ([#4278](https://github.com/patternfly/patternfly-react/issues/4278)) ([8c353d9](https://github.com/patternfly/patternfly-react/commit/8c353d9a5a4322984d5e564d5737e53e796928f6)) - -## [6.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.1...@patternfly/react-charts@6.3.2) (2020-05-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [6.3.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@6.3.0...@patternfly/react-charts@6.3.1) (2020-05-21) - -**Note:** Version bump only for package @patternfly/react-charts - -# [6.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.21...@patternfly/react-charts@6.3.0) (2020-05-15) - -### Features - -- **master:** merge v4 ([#4255](https://github.com/patternfly/patternfly-react/issues/4255)) ([567c0b8](https://github.com/patternfly/patternfly-react/commit/567c0b88b10d2cd629ce380745a24dacdf9dd3d1)), closes [#3868](https://github.com/patternfly/patternfly-react/issues/3868) [#3915](https://github.com/patternfly/patternfly-react/issues/3915) [#3921](https://github.com/patternfly/patternfly-react/issues/3921) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3843](https://github.com/patternfly/patternfly-react/issues/3843) [#3884](https://github.com/patternfly/patternfly-react/issues/3884) [#3609](https://github.com/patternfly/patternfly-react/issues/3609) [#3880](https://github.com/patternfly/patternfly-react/issues/3880) [#3865](https://github.com/patternfly/patternfly-react/issues/3865) [#3894](https://github.com/patternfly/patternfly-react/issues/3894) [#3897](https://github.com/patternfly/patternfly-react/issues/3897) [#3892](https://github.com/patternfly/patternfly-react/issues/3892) [#3891](https://github.com/patternfly/patternfly-react/issues/3891) [#3908](https://github.com/patternfly/patternfly-react/issues/3908) [#3910](https://github.com/patternfly/patternfly-react/issues/3910) [#3861](https://github.com/patternfly/patternfly-react/issues/3861) [#3877](https://github.com/patternfly/patternfly-react/issues/3877) [#3916](https://github.com/patternfly/patternfly-react/issues/3916) [#3886](https://github.com/patternfly/patternfly-react/issues/3886) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3927](https://github.com/patternfly/patternfly-react/issues/3927) [#3933](https://github.com/patternfly/patternfly-react/issues/3933) [#3221](https://github.com/patternfly/patternfly-react/issues/3221) [#3873](https://github.com/patternfly/patternfly-react/issues/3873) [#3928](https://github.com/patternfly/patternfly-react/issues/3928) [#3929](https://github.com/patternfly/patternfly-react/issues/3929) [#2582](https://github.com/patternfly/patternfly-react/issues/2582) [#3296](https://github.com/patternfly/patternfly-react/issues/3296) [#3924](https://github.com/patternfly/patternfly-react/issues/3924) [#1529](https://github.com/patternfly/patternfly-react/issues/1529) [#3903](https://github.com/patternfly/patternfly-react/issues/3903) [#3904](https://github.com/patternfly/patternfly-react/issues/3904) [#3974](https://github.com/patternfly/patternfly-react/issues/3974) [#3970](https://github.com/patternfly/patternfly-react/issues/3970) [#3920](https://github.com/patternfly/patternfly-react/issues/3920) [#3945](https://github.com/patternfly/patternfly-react/issues/3945) [#3978](https://github.com/patternfly/patternfly-react/issues/3978) [#3962](https://github.com/patternfly/patternfly-react/issues/3962) [#3975](https://github.com/patternfly/patternfly-react/issues/3975) [#3906](https://github.com/patternfly/patternfly-react/issues/3906) [#3870](https://github.com/patternfly/patternfly-react/issues/3870) [#3958](https://github.com/patternfly/patternfly-react/issues/3958) [#3922](https://github.com/patternfly/patternfly-react/issues/3922) [#3985](https://github.com/patternfly/patternfly-react/issues/3985) [#3991](https://github.com/patternfly/patternfly-react/issues/3991) [#3872](https://github.com/patternfly/patternfly-react/issues/3872) [#3821](https://github.com/patternfly/patternfly-react/issues/3821) [#3807](https://github.com/patternfly/patternfly-react/issues/3807) [#3879](https://github.com/patternfly/patternfly-react/issues/3879) [#3871](https://github.com/patternfly/patternfly-react/issues/3871) [#3881](https://github.com/patternfly/patternfly-react/issues/3881) [#3826](https://github.com/patternfly/patternfly-react/issues/3826) [#3490](https://github.com/patternfly/patternfly-react/issues/3490) [#3882](https://github.com/patternfly/patternfly-react/issues/3882) [#3843](https://github.com/patternfly/patternfly-react/issues/3843) [#3884](https://github.com/patternfly/patternfly-react/issues/3884) [#3609](https://github.com/patternfly/patternfly-react/issues/3609) [#3880](https://github.com/patternfly/patternfly-react/issues/3880) [#3865](https://github.com/patternfly/patternfly-react/issues/3865) [#3894](https://github.com/patternfly/patternfly-react/issues/3894) [#3897](https://github.com/patternfly/patternfly-react/issues/3897) [#3892](https://github.com/patternfly/patternfly-react/issues/3892) [#3891](https://github.com/patternfly/patternfly-react/issues/3891) [#3908](https://github.com/patternfly/patternfly-react/issues/3908) [#3910](https://github.com/patternfly/patternfly-react/issues/3910) [#3861](https://github.com/patternfly/patternfly-react/issues/3861) [#3877](https://github.com/patternfly/patternfly-react/issues/3877) [#3916](https://github.com/patternfly/patternfly-react/issues/3916) [#3844](https://github.com/patternfly/patternfly-react/issues/3844) [#3919](https://github.com/patternfly/patternfly-react/issues/3919) [#3923](https://github.com/patternfly/patternfly-react/issues/3923) [#3838](https://github.com/patternfly/patternfly-react/issues/3838) [#3895](https://github.com/patternfly/patternfly-react/issues/3895) [#3896](https://github.com/patternfly/patternfly-react/issues/3896) [#3771](https://github.com/patternfly/patternfly-react/issues/3771) [#3940](https://github.com/patternfly/patternfly-react/issues/3940) [#3941](https://github.com/patternfly/patternfly-react/issues/3941) [#3441](https://github.com/patternfly/patternfly-react/issues/3441) [#3950](https://github.com/patternfly/patternfly-react/issues/3950) [#3642](https://github.com/patternfly/patternfly-react/issues/3642) [#3964](https://github.com/patternfly/patternfly-react/issues/3964) [#3968](https://github.com/patternfly/patternfly-react/issues/3968) [#3967](https://github.com/patternfly/patternfly-react/issues/3967) [#3971](https://github.com/patternfly/patternfly-react/issues/3971) [#3942](https://github.com/patternfly/patternfly-react/issues/3942) [#3898](https://github.com/patternfly/patternfly-react/issues/3898) [#3898](https://github.com/patternfly/patternfly-react/issues/3898) [#3976](https://github.com/patternfly/patternfly-react/issues/3976) [#3889](https://github.com/patternfly/patternfly-react/issues/3889) [#3641](https://github.com/patternfly/patternfly-react/issues/3641) [#3982](https://github.com/patternfly/patternfly-react/issues/3982) [#3979](https://github.com/patternfly/patternfly-react/issues/3979) [#3989](https://github.com/patternfly/patternfly-react/issues/3989) [#4017](https://github.com/patternfly/patternfly-react/issues/4017) [#4022](https://github.com/patternfly/patternfly-react/issues/4022) [#4014](https://github.com/patternfly/patternfly-react/issues/4014) [#4048](https://github.com/patternfly/patternfly-react/issues/4048) [#4050](https://github.com/patternfly/patternfly-react/issues/4050) [#4051](https://github.com/patternfly/patternfly-react/issues/4051) [#4058](https://github.com/patternfly/patternfly-react/issues/4058) [#4030](https://github.com/patternfly/patternfly-react/issues/4030) [#4031](https://github.com/patternfly/patternfly-react/issues/4031) [#3996](https://github.com/patternfly/patternfly-react/issues/3996) [#4001](https://github.com/patternfly/patternfly-react/issues/4001) [#4004](https://github.com/patternfly/patternfly-react/issues/4004) [#4066](https://github.com/patternfly/patternfly-react/issues/4066) [#4021](https://github.com/patternfly/patternfly-react/issues/4021) [#4061](https://github.com/patternfly/patternfly-react/issues/4061) [#4026](https://github.com/patternfly/patternfly-react/issues/4026) [#4069](https://github.com/patternfly/patternfly-react/issues/4069) [#4073](https://github.com/patternfly/patternfly-react/issues/4073) [#4036](https://github.com/patternfly/patternfly-react/issues/4036) [#4019](https://github.com/patternfly/patternfly-react/issues/4019) [#4081](https://github.com/patternfly/patternfly-react/issues/4081) [#4033](https://github.com/patternfly/patternfly-react/issues/4033) [#4065](https://github.com/patternfly/patternfly-react/issues/4065) [#4078](https://github.com/patternfly/patternfly-react/issues/4078) [#4032](https://github.com/patternfly/patternfly-react/issues/4032) [#4029](https://github.com/patternfly/patternfly-react/issues/4029) [#4064](https://github.com/patternfly/patternfly-react/issues/4064) [#4063](https://github.com/patternfly/patternfly-react/issues/4063) [#2593](https://github.com/patternfly/patternfly-react/issues/2593) [#4076](https://github.com/patternfly/patternfly-react/issues/4076) [#4099](https://github.com/patternfly/patternfly-react/issues/4099) [#4038](https://github.com/patternfly/patternfly-react/issues/4038) [#4116](https://github.com/patternfly/patternfly-react/issues/4116) [#3960](https://github.com/patternfly/patternfly-react/issues/3960) [#4121](https://github.com/patternfly/patternfly-react/issues/4121) [#4123](https://github.com/patternfly/patternfly-react/issues/4123) [#4025](https://github.com/patternfly/patternfly-react/issues/4025) [#4126](https://github.com/patternfly/patternfly-react/issues/4126) [#4122](https://github.com/patternfly/patternfly-react/issues/4122) [#4086](https://github.com/patternfly/patternfly-react/issues/4086) [#4127](https://github.com/patternfly/patternfly-react/issues/4127) [#4129](https://github.com/patternfly/patternfly-react/issues/4129) [#4111](https://github.com/patternfly/patternfly-react/issues/4111) [#4136](https://github.com/patternfly/patternfly-react/issues/4136) [#4138](https://github.com/patternfly/patternfly-react/issues/4138) [#4141](https://github.com/patternfly/patternfly-react/issues/4141) [#4145](https://github.com/patternfly/patternfly-react/issues/4145) [#4034](https://github.com/patternfly/patternfly-react/issues/4034) [#4144](https://github.com/patternfly/patternfly-react/issues/4144) [#4152](https://github.com/patternfly/patternfly-react/issues/4152) [#4158](https://github.com/patternfly/patternfly-react/issues/4158) [#4157](https://github.com/patternfly/patternfly-react/issues/4157) [#4156](https://github.com/patternfly/patternfly-react/issues/4156) [#4147](https://github.com/patternfly/patternfly-react/issues/4147) [#4159](https://github.com/patternfly/patternfly-react/issues/4159) [#4170](https://github.com/patternfly/patternfly-react/issues/4170) [#4142](https://github.com/patternfly/patternfly-react/issues/4142) [#4175](https://github.com/patternfly/patternfly-react/issues/4175) [#4176](https://github.com/patternfly/patternfly-react/issues/4176) [#4187](https://github.com/patternfly/patternfly-react/issues/4187) [#4188](https://github.com/patternfly/patternfly-react/issues/4188) [#4140](https://github.com/patternfly/patternfly-react/issues/4140) [#4193](https://github.com/patternfly/patternfly-react/issues/4193) [#4154](https://github.com/patternfly/patternfly-react/issues/4154) [#4192](https://github.com/patternfly/patternfly-react/issues/4192) [#4190](https://github.com/patternfly/patternfly-react/issues/4190) [#4199](https://github.com/patternfly/patternfly-react/issues/4199) [#4133](https://github.com/patternfly/patternfly-react/issues/4133) [#4165](https://github.com/patternfly/patternfly-react/issues/4165) [#4208](https://github.com/patternfly/patternfly-react/issues/4208) [#4212](https://github.com/patternfly/patternfly-react/issues/4212) [#4130](https://github.com/patternfly/patternfly-react/issues/4130) [#4219](https://github.com/patternfly/patternfly-react/issues/4219) [#4166](https://github.com/patternfly/patternfly-react/issues/4166) [#4202](https://github.com/patternfly/patternfly-react/issues/4202) [#4216](https://github.com/patternfly/patternfly-react/issues/4216) [#4225](https://github.com/patternfly/patternfly-react/issues/4225) [#4221](https://github.com/patternfly/patternfly-react/issues/4221) [#4146](https://github.com/patternfly/patternfly-react/issues/4146) [#3951](https://github.com/patternfly/patternfly-react/issues/3951) [#3681](https://github.com/patternfly/patternfly-react/issues/3681) [#4243](https://github.com/patternfly/patternfly-react/issues/4243) [#4220](https://github.com/patternfly/patternfly-react/issues/4220) [#4153](https://github.com/patternfly/patternfly-react/issues/4153) [#4209](https://github.com/patternfly/patternfly-react/issues/4209) [#4249](https://github.com/patternfly/patternfly-react/issues/4249) [#4239](https://github.com/patternfly/patternfly-react/issues/4239) [#4247](https://github.com/patternfly/patternfly-react/issues/4247) [#4246](https://github.com/patternfly/patternfly-react/issues/4246) [#3684](https://github.com/patternfly/patternfly-react/issues/3684) [#4223](https://github.com/patternfly/patternfly-react/issues/4223) [#4195](https://github.com/patternfly/patternfly-react/issues/4195) [#4254](https://github.com/patternfly/patternfly-react/issues/4254) -- **packages:** bump core to 4.10.21 ([#4257](https://github.com/patternfly/patternfly-react/issues/4257)) ([2e2676c](https://github.com/patternfly/patternfly-react/commit/2e2676ce6bc34f5e20231ca066d26ea4c3ac95e4)) - -## [5.3.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.20...@patternfly/react-charts@5.3.21) (2020-05-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.19...@patternfly/react-charts@5.3.20) (2020-05-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.18...@patternfly/react-charts@5.3.19) (2020-04-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.17...@patternfly/react-charts@5.3.18) (2020-04-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.16...@patternfly/react-charts@5.3.17) (2020-03-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.15...@patternfly/react-charts@5.3.16) (2020-03-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.14...@patternfly/react-charts@5.3.15) (2020-03-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.13...@patternfly/react-charts@5.3.14) (2020-03-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.12...@patternfly/react-charts@5.3.13) (2020-03-17) - -### Bug Fixes - -- **core,table:** forward ref types ([#3919](https://github.com/patternfly/patternfly-react/issues/3919)) ([2210ec2](https://github.com/patternfly/patternfly-react/commit/2210ec2c142a385f85de8b0bac9c61a61521186d)) - -## [5.3.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.11...@patternfly/react-charts@5.3.12) (2020-03-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.10...@patternfly/react-charts@5.3.11) (2020-03-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.7...@patternfly/react-charts@5.3.10) (2020-03-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.6...@patternfly/react-charts@5.3.7) (2020-03-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.5...@patternfly/react-charts@5.3.6) (2020-02-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.4...@patternfly/react-charts@5.3.5) (2020-02-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.3...@patternfly/react-charts@5.3.4) (2020-02-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.2...@patternfly/react-charts@5.3.3) (2020-02-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.1...@patternfly/react-charts@5.3.2) (2020-02-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.3.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.3.0...@patternfly/react-charts@5.3.1) (2020-02-14) - -**Note:** Version bump only for package @patternfly/react-charts - -# [5.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.29...@patternfly/react-charts@5.3.0) (2020-02-14) - -### Features - -- **inline-edit:** add row level inline editing feature to Table ([#3581](https://github.com/patternfly/patternfly-react/issues/3581)) ([498d49f](https://github.com/patternfly/patternfly-react/commit/498d49fcc5cc9188197ddc7cd6468907fdd8224d)) - -## [5.2.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.28...@patternfly/react-charts@5.2.29) (2020-02-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.27...@patternfly/react-charts@5.2.28) (2020-02-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.26...@patternfly/react-charts@5.2.27) (2020-02-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.25...@patternfly/react-charts@5.2.26) (2020-02-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.24...@patternfly/react-charts@5.2.25) (2020-02-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.23...@patternfly/react-charts@5.2.24) (2020-02-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.22...@patternfly/react-charts@5.2.23) (2020-02-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.21...@patternfly/react-charts@5.2.22) (2020-01-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.20...@patternfly/react-charts@5.2.21) (2020-01-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.19...@patternfly/react-charts@5.2.20) (2020-01-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.18...@patternfly/react-charts@5.2.19) (2020-01-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.17...@patternfly/react-charts@5.2.18) (2020-01-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.16...@patternfly/react-charts@5.2.17) (2020-01-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.15...@patternfly/react-charts@5.2.16) (2020-01-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.14...@patternfly/react-charts@5.2.15) (2020-01-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.13...@patternfly/react-charts@5.2.14) (2020-01-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.12...@patternfly/react-charts@5.2.13) (2020-01-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.11...@patternfly/react-charts@5.2.12) (2020-01-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.10...@patternfly/react-charts@5.2.11) (2020-01-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.9...@patternfly/react-charts@5.2.10) (2020-01-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.8...@patternfly/react-charts@5.2.9) (2019-12-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.7...@patternfly/react-charts@5.2.8) (2019-12-17) - -### Bug Fixes - -- **charts:** broken Katacoda links ([#3408](https://github.com/patternfly/patternfly-react/issues/3408)) ([e6e72cd](https://github.com/patternfly/patternfly-react/commit/e6e72cd3584536e16dcda6a1c420d9e95e58f551)) - -## [5.2.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.6...@patternfly/react-charts@5.2.7) (2019-12-17) - -### Bug Fixes - -- **charts:** update default threshold stroke width and dash array props ([#3414](https://github.com/patternfly/patternfly-react/issues/3414)) ([43ef5be](https://github.com/patternfly/patternfly-react/commit/43ef5becd5d46b60c6546b19354f684c93372b17)) - -## [5.2.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.5...@patternfly/react-charts@5.2.6) (2019-12-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.4...@patternfly/react-charts@5.2.5) (2019-12-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.3...@patternfly/react-charts@5.2.4) (2019-12-05) - -### Bug Fixes - -- **charts:** Update interpolation examples to use monotoneX ([#3372](https://github.com/patternfly/patternfly-react/issues/3372)) ([ff96204](https://github.com/patternfly/patternfly-react/commit/ff96204f760b0d60af35c1d3d3353f1248f9a6e9)) - -## [5.2.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.2...@patternfly/react-charts@5.2.3) (2019-11-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.1...@patternfly/react-charts@5.2.2) (2019-11-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.2.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.2.0...@patternfly/react-charts@5.2.1) (2019-11-19) - -**Note:** Version bump only for package @patternfly/react-charts - -# [5.2.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.9...@patternfly/react-charts@5.2.0) (2019-11-19) - -### Features - -- **charts:** update interactive legend example ([#3253](https://github.com/patternfly/patternfly-react/issues/3253)) ([018ff0c](https://github.com/patternfly/patternfly-react/commit/018ff0c9e97f611ab7f5495d81f15f233b1118c4)) - -## [5.1.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.8...@patternfly/react-charts@5.1.9) (2019-11-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.7...@patternfly/react-charts@5.1.8) (2019-11-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.6...@patternfly/react-charts@5.1.7) (2019-11-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.5...@patternfly/react-charts@5.1.6) (2019-11-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.4...@patternfly/react-charts@5.1.5) (2019-11-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.3...@patternfly/react-charts@5.1.4) (2019-10-31) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.2...@patternfly/react-charts@5.1.3) (2019-10-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.1...@patternfly/react-charts@5.1.2) (2019-10-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.1.0...@patternfly/react-charts@5.1.1) (2019-10-22) - -**Note:** Version bump only for package @patternfly/react-charts - -# [5.1.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.27...@patternfly/react-charts@5.1.0) (2019-10-18) - -### Features - -- **docs:** use gatsby-theme-patternfly-org ([#3146](https://github.com/patternfly/patternfly-react/issues/3146)) ([93c843b](https://github.com/patternfly/patternfly-react/commit/93c843b)) - -## [5.0.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.26...@patternfly/react-charts@5.0.27) (2019-10-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.25...@patternfly/react-charts@5.0.26) (2019-10-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.24...@patternfly/react-charts@5.0.25) (2019-10-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.23...@patternfly/react-charts@5.0.24) (2019-10-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.22...@patternfly/react-charts@5.0.23) (2019-10-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.21...@patternfly/react-charts@5.0.22) (2019-10-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.20...@patternfly/react-charts@5.0.21) (2019-10-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.19...@patternfly/react-charts@5.0.20) (2019-10-09) - -### Bug Fixes - -- **charts:** update ChartThreshold to use pf-core variable ([#3085](https://github.com/patternfly/patternfly-react/issues/3085)) ([3f77276](https://github.com/patternfly/patternfly-react/commit/3f77276)) - -## [5.0.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.18...@patternfly/react-charts@5.0.19) (2019-10-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.17...@patternfly/react-charts@5.0.18) (2019-10-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.16...@patternfly/react-charts@5.0.17) (2019-10-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.15...@patternfly/react-charts@5.0.16) (2019-10-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.14...@patternfly/react-charts@5.0.15) (2019-10-02) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.13...@patternfly/react-charts@5.0.14) (2019-10-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.12...@patternfly/react-charts@5.0.13) (2019-10-01) - -### Bug Fixes - -- **charts:** modify how containers are cloned for Tippy tooltips ([#3048](https://github.com/patternfly/patternfly-react/issues/3048)) ([68f4311](https://github.com/patternfly/patternfly-react/commit/68f4311)) - -## [5.0.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.11...@patternfly/react-charts@5.0.12) (2019-09-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.10...@patternfly/react-charts@5.0.11) (2019-09-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.9...@patternfly/react-charts@5.0.10) (2019-09-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.8...@patternfly/react-charts@5.0.9) (2019-09-23) - -### Bug Fixes - -- **charts:** add ariaDesc and ariaTitle to stack chart ([#2975](https://github.com/patternfly/patternfly-react/issues/2975)) ([339b43d](https://github.com/patternfly/patternfly-react/commit/339b43d)) - -## [5.0.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.7...@patternfly/react-charts@5.0.8) (2019-09-23) - -### Bug Fixes - -- **charts:** replace empty tags with React.Fragment ([#2988](https://github.com/patternfly/patternfly-react/issues/2988)) ([5870729](https://github.com/patternfly/patternfly-react/commit/5870729)) - -## [5.0.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.6...@patternfly/react-charts@5.0.7) (2019-09-23) - -### Bug Fixes - -- **charts:** missing key prop warning for ChartPie based components ([#2943](https://github.com/patternfly/patternfly-react/issues/2943)) ([219b00b](https://github.com/patternfly/patternfly-react/commit/219b00b)) - -## [5.0.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.5...@patternfly/react-charts@5.0.6) (2019-09-23) - -### Bug Fixes - -- **charts:** add missing style and responsive props to ChartVoronoiContainer ([#2977](https://github.com/patternfly/patternfly-react/issues/2977)) ([0b10cd2](https://github.com/patternfly/patternfly-react/commit/0b10cd2)) - -## [5.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.4...@patternfly/react-charts@5.0.5) (2019-09-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.3...@patternfly/react-charts@5.0.4) (2019-09-20) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.2...@patternfly/react-charts@5.0.3) (2019-09-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.1...@patternfly/react-charts@5.0.2) (2019-09-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [5.0.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@5.0.0...@patternfly/react-charts@5.0.1) (2019-09-17) - -**Note:** Version bump only for package @patternfly/react-charts - -# [5.0.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.14...@patternfly/react-charts@5.0.0) (2019-09-16) - -- Update Victory to 30.0.0 (#2883) ([b16c335](https://github.com/patternfly/patternfly-react/commit/b16c335)), closes [#2883](https://github.com/patternfly/patternfly-react/issues/2883) - -### BREAKING CHANGES - -- upgrade to Victory 30.0.0 - -## [4.9.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.13...@patternfly/react-charts@4.9.14) (2019-09-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.12...@patternfly/react-charts@4.9.13) (2019-09-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.11...@patternfly/react-charts@4.9.12) (2019-09-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.10...@patternfly/react-charts@4.9.11) (2019-09-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.9...@patternfly/react-charts@4.9.10) (2019-09-10) - -### Bug Fixes - -- **charts:** added new symbol for dash / threshold ([#2884](https://github.com/patternfly/patternfly-react/issues/2884)) ([3ab27f0](https://github.com/patternfly/patternfly-react/commit/3ab27f0)) - -## [4.9.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.8...@patternfly/react-charts@4.9.9) (2019-09-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.7...@patternfly/react-charts@4.9.8) (2019-09-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.6...@patternfly/react-charts@4.9.7) (2019-09-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.5...@patternfly/react-charts@4.9.6) (2019-09-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.4...@patternfly/react-charts@4.9.5) (2019-09-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.3...@patternfly/react-charts@4.9.4) (2019-09-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.2...@patternfly/react-charts@4.9.3) (2019-09-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.1...@patternfly/react-charts@4.9.2) (2019-08-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.9.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.9.0...@patternfly/react-charts@4.9.1) (2019-08-30) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.9.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.7...@patternfly/react-charts@4.9.0) (2019-08-30) - -### Features - -- **chart-stack:** add monthly example ([#2625](https://github.com/patternfly/patternfly-react/issues/2625)) ([0a29e99](https://github.com/patternfly/patternfly-react/commit/0a29e99)) - -## [4.8.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.6...@patternfly/react-charts@4.8.7) (2019-08-29) - -### Bug Fixes - -- **charts:** themeColor doc incorrectly recommends the wrong color. ([#2794](https://github.com/patternfly/patternfly-react/issues/2794)) ([9f2b38f](https://github.com/patternfly/patternfly-react/commit/9f2b38f)) - -## [4.8.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.5...@patternfly/react-charts@4.8.6) (2019-08-27) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.8.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.4...@patternfly/react-charts@4.8.5) (2019-08-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.8.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.3...@patternfly/react-charts@4.8.4) (2019-08-26) - -### Bug Fixes - -- **charts:** adjust legend position for axis label ([#2763](https://github.com/patternfly/patternfly-react/issues/2763)) ([6a93c7c](https://github.com/patternfly/patternfly-react/commit/6a93c7c)) - -## [4.8.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.2...@patternfly/react-charts@4.8.3) (2019-08-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.8.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.1...@patternfly/react-charts@4.8.2) (2019-08-23) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.8.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.8.0...@patternfly/react-charts@4.8.1) (2019-08-20) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.8.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.11...@patternfly/react-charts@4.8.0) (2019-08-19) - -### Features - -- **charts:** add bullet chart ([#2708](https://github.com/patternfly/patternfly-react/issues/2708)) ([c871fff](https://github.com/patternfly/patternfly-react/commit/c871fff)) - -## [4.7.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.10...@patternfly/react-charts@4.7.11) (2019-08-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.9...@patternfly/react-charts@4.7.10) (2019-08-19) - -### Bug Fixes - -- **charts:** clean up tests and doc ([#2707](https://github.com/patternfly/patternfly-react/issues/2707)) ([7e8350b](https://github.com/patternfly/patternfly-react/commit/7e8350b)) - -## [4.7.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.8...@patternfly/react-charts@4.7.9) (2019-08-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.7...@patternfly/react-charts@4.7.8) (2019-08-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.6...@patternfly/react-charts@4.7.7) (2019-08-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.5...@patternfly/react-charts@4.7.6) (2019-08-12) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.4...@patternfly/react-charts@4.7.5) (2019-08-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.3...@patternfly/react-charts@4.7.4) (2019-08-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.7.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.2...@patternfly/react-charts@4.7.3) (2019-08-02) - -### Bug Fixes - -- **Chart Themes:** Fix missing fill and stroke colors for area and line charts ([#2626](https://github.com/patternfly/patternfly-react/issues/2626)) ([9d3138c](https://github.com/patternfly/patternfly-react/commit/9d3138c)), closes [#2624](https://github.com/patternfly/patternfly-react/issues/2624) - -## [4.7.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.1...@patternfly/react-charts@4.7.2) (2019-07-25) - -### Bug Fixes - -- **chart:** ensure dynamic chart size is never less than zero ([#2590](https://github.com/patternfly/patternfly-react/issues/2590)) ([9e9b48e](https://github.com/patternfly/patternfly-react/commit/9e9b48e)) - -## [4.7.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.7.0...@patternfly/react-charts@4.7.1) (2019-07-24) - -### Bug Fixes - -- **charts:** use vars to enable Red Hat fonts ([#2584](https://github.com/patternfly/patternfly-react/issues/2584)) ([d555f2a](https://github.com/patternfly/patternfly-react/commit/d555f2a)) - -# [4.7.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.5...@patternfly/react-charts@4.7.0) (2019-07-22) - -### Features - -- **charts:** added new mutil-color theme for ordered charts ([#2552](https://github.com/patternfly/patternfly-react/issues/2552)) ([8ab3844](https://github.com/patternfly/patternfly-react/commit/8ab3844)) - -## [4.6.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.4...@patternfly/react-charts@4.6.5) (2019-07-22) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.6.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.3...@patternfly/react-charts@4.6.4) (2019-07-18) - -### Bug Fixes - -- **charts:** add individual padding vars for donut charts ([#2529](https://github.com/patternfly/patternfly-react/issues/2529)) ([771eee8](https://github.com/patternfly/patternfly-react/commit/771eee8)) - -## [4.6.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.2...@patternfly/react-charts@4.6.3) (2019-07-17) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.6.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.1...@patternfly/react-charts@4.6.2) (2019-07-16) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.6.0...@patternfly/react-charts@4.6.1) (2019-07-15) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.6.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.5.2...@patternfly/react-charts@4.6.0) (2019-07-12) - -### Features - -- **charts:** added ariaLabelDesc and ariaLabelTitle props ([#2500](https://github.com/patternfly/patternfly-react/issues/2500)) ([0e5ac2b](https://github.com/patternfly/patternfly-react/commit/0e5ac2b)) - -## [4.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.5.1...@patternfly/react-charts@4.5.2) (2019-07-11) - -### Bug Fixes - -- **charts:** adjust pf-core vars & add tooltip examples ([#2497](https://github.com/patternfly/patternfly-react/issues/2497)) ([e19eb37](https://github.com/patternfly/patternfly-react/commit/e19eb37)) - -## [4.5.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.5.0...@patternfly/react-charts@4.5.1) (2019-07-10) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.5.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.17...@patternfly/react-charts@4.5.0) (2019-07-10) - -### Features - -- **charts:** adds bottom-left legend position ([#2442](https://github.com/patternfly/patternfly-react/issues/2442)) ([1f52911](https://github.com/patternfly/patternfly-react/commit/1f52911)) - -## [4.4.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.16...@patternfly/react-charts@4.4.17) (2019-07-10) - -### Bug Fixes - -- **ChartDonut:** Replaced prop `titleComponent` if function `getSubTitle` by `subTitleComponent`. ([#2488](https://github.com/patternfly/patternfly-react/issues/2488)) ([18190a4](https://github.com/patternfly/patternfly-react/commit/18190a4)), closes [#2486](https://github.com/patternfly/patternfly-react/issues/2486) - -## [4.4.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.15...@patternfly/react-charts@4.4.16) (2019-07-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.14...@patternfly/react-charts@4.4.15) (2019-07-09) - -### Bug Fixes - -- **charts:** update pf-core vars ([#2480](https://github.com/patternfly/patternfly-react/issues/2480)) ([6c36ec7](https://github.com/patternfly/patternfly-react/commit/6c36ec7)) - -## [4.4.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.13...@patternfly/react-charts@4.4.14) (2019-07-08) - -### Bug Fixes - -- **build:** make pf3/pf4 build on windows ([#2471](https://github.com/patternfly/patternfly-react/issues/2471)) ([5bbc4a2](https://github.com/patternfly/patternfly-react/commit/5bbc4a2)) - -## [4.4.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.12...@patternfly/react-charts@4.4.13) (2019-07-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.11...@patternfly/react-charts@4.4.12) (2019-07-06) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.10...@patternfly/react-charts@4.4.11) (2019-07-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.9...@patternfly/react-charts@4.4.10) (2019-07-05) - -### Bug Fixes - -- **charts:** remove invalid pf-core var ([#2463](https://github.com/patternfly/patternfly-react/issues/2463)) ([1d37eda](https://github.com/patternfly/patternfly-react/commit/1d37eda)) - -## [4.4.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.8...@patternfly/react-charts@4.4.9) (2019-07-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.7...@patternfly/react-charts@4.4.8) (2019-07-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.6...@patternfly/react-charts@4.4.7) (2019-07-02) - -### Bug Fixes - -- **Chart:** Fix runtime errors related to theme padding ([#2430](https://github.com/patternfly/patternfly-react/issues/2430)) ([a4d9f75](https://github.com/patternfly/patternfly-react/commit/a4d9f75)), closes [#2429](https://github.com/patternfly/patternfly-react/issues/2429) - -## [4.4.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.5...@patternfly/react-charts@4.4.6) (2019-06-28) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.4...@patternfly/react-charts@4.4.5) (2019-06-27) - -### Bug Fixes - -- **charts:** adds sparkline example and interpolation to area examples ([#2373](https://github.com/patternfly/patternfly-react/issues/2373)) ([ac68f3f](https://github.com/patternfly/patternfly-react/commit/ac68f3f)) - -## [4.4.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.3...@patternfly/react-charts@4.4.4) (2019-06-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.2...@patternfly/react-charts@4.4.3) (2019-06-25) - -### Bug Fixes - -- **charts:** ensure thresholds are sorted ([#2341](https://github.com/patternfly/patternfly-react/issues/2341)) ([f44d4c5](https://github.com/patternfly/patternfly-react/commit/f44d4c5)) - -## [4.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.1...@patternfly/react-charts@4.4.2) (2019-06-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.4.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.0...@patternfly/react-charts@4.4.1) (2019-06-20) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.4.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.7...@patternfly/react-charts@4.4.0) (2019-06-20) - -### Features - -- **charts:** add invert prop for reversing thresholds ([#2294](https://github.com/patternfly/patternfly-react/issues/2294)) ([7617e6a](https://github.com/patternfly/patternfly-react/commit/7617e6a)) - -## [4.3.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.6...@patternfly/react-charts@4.3.7) (2019-06-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.3.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.5...@patternfly/react-charts@4.3.6) (2019-06-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.3.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.4...@patternfly/react-charts@4.3.5) (2019-06-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.3.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.2...@patternfly/react-charts@4.3.4) (2019-06-18) - -### Bug Fixes - -- **ChartDonutThreshold:** Don't show static threshold donut tooltips by default. ([#2270](https://github.com/patternfly/patternfly-react/issues/2270)) ([7d9bd16](https://github.com/patternfly/patternfly-react/commit/7d9bd16)) - -## [4.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.2...@patternfly/react-charts@4.3.3) (2019-06-18) - -### Bug Fixes - -- **ChartDonutThreshold:** Don't show static threshold donut tooltips by default. ([#2270](https://github.com/patternfly/patternfly-react/issues/2270)) ([7d9bd16](https://github.com/patternfly/patternfly-react/commit/7d9bd16)) - -## [4.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.1...@patternfly/react-charts@4.3.2) (2019-06-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.3.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.0...@patternfly/react-charts@4.3.1) (2019-06-14) - -**Note:** Version bump only for package @patternfly/react-charts - -# [4.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.2.0...@patternfly/react-charts@4.3.0) (2019-06-13) - -### Features - -- **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48)) - -# 4.2.0 (2019-06-13) - -### Bug Fixes - -- **charts:** labels should use the overpass font ([#2232](https://github.com/patternfly/patternfly-react/issues/2232)) ([7b4e100](https://github.com/patternfly/patternfly-react/commit/7b4e100)) - -### Features - -- **react-core:** allow dynamic rendering of anchor components ([#2117](https://github.com/patternfly/patternfly-react/issues/2117)) ([c1c3be9](https://github.com/patternfly/patternfly-react/commit/c1c3be9)) - -## [4.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.4...@patternfly/react-charts@4.1.5) (2019-06-11) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.3...@patternfly/react-charts@4.1.4) (2019-06-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## [4.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.2...@patternfly/react-charts@4.1.3) (2019-06-10) - -**Note:** Version bump only for package @patternfly/react-charts - -## 4.1.2 (2019-06-10) - -### Bug Fixes - -- **charts:** align label vertically and add donutHeight/Width defaults ([#2193](https://github.com/patternfly/patternfly-react/issues/2193)) ([59aadfc](https://github.com/patternfly/patternfly-react/commit/59aadfc)) - -## [4.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.0...@patternfly/react-charts@4.1.1) (2019-06-05) - -**Note:** Version bump only for package @patternfly/react-charts - -# 4.1.0 (2019-06-05) - -### Features - -- **background image:** Convert background image to typescript ([#2070](https://github.com/patternfly/patternfly-react/issues/2070)) ([d4ae6db](https://github.com/patternfly/patternfly-react/commit/d4ae6db)) -- **VictoryZoomContainer:** Give examples of Victory Zoom component to allow zo… ([#1879](https://github.com/patternfly/patternfly-react/issues/1879)) ([235c174](https://github.com/patternfly/patternfly-react/commit/235c174)), closes [#1715](https://github.com/patternfly/patternfly-react/issues/1715) - -## [4.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.0.1...@patternfly/react-charts@4.0.2) (2019-06-04) - -### Bug Fixes - -- **charts:** Chart & ChartStack to use ReactNode as children type ([#2155](https://github.com/patternfly/patternfly-react/issues/2155)) ([0b0a828](https://github.com/patternfly/patternfly-react/commit/0b0a828)) - -## [4.0.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.0.0...@patternfly/react-charts@4.0.1) (2019-06-04) - -### Bug Fixes - -- **charts:** remove ChartThemeDefinition export from index.ts ([#2149](https://github.com/patternfly/patternfly-react/issues/2149)) ([9929698](https://github.com/patternfly/patternfly-react/commit/9929698)) - -# [4.0.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.7...@patternfly/react-charts@4.0.0) (2019-06-04) - -### chore - -- **charts:** major bump react-charts ([#2143](https://github.com/patternfly/patternfly-react/issues/2143)) ([90b334e](https://github.com/patternfly/patternfly-react/commit/90b334e)) - -### BREAKING CHANGES - -- **charts:** - Changed default Chart padding property to show axis - -* Refactored ChartTheme colors and utils for donut utilization theme -* ChartLegend now defaults to be responsive - -## [3.6.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.6...@patternfly/react-charts@3.6.7) (2019-06-03) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.6.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.5...@patternfly/react-charts@3.6.6) (2019-06-03) - -### Performance Improvements - -- **charts:** breaking change bump ([#2141](https://github.com/patternfly/patternfly-react/issues/2141)) ([10296da](https://github.com/patternfly/patternfly-react/commit/10296da)) - -## [3.6.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.4...@patternfly/react-charts@3.6.5) (2019-06-03) - -### Bug Fixes - -- **Charts:** Fix themes for bar chart default colors ([#2112](https://github.com/patternfly/patternfly-react/issues/2112)) ([7b290ab](https://github.com/patternfly/patternfly-react/commit/7b290ab)), closes [#2111](https://github.com/patternfly/patternfly-react/issues/2111) - -## [3.6.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.3...@patternfly/react-charts@3.6.4) (2019-05-30) - -### Bug Fixes - -- **charts:** Add defaults for component props ([#2103](https://github.com/patternfly/patternfly-react/issues/2103)) ([ca98322](https://github.com/patternfly/patternfly-react/commit/ca98322)) - -## [3.6.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.2...@patternfly/react-charts@3.6.3) (2019-05-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.6.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.1...@patternfly/react-charts@3.6.2) (2019-05-29) - -### Bug Fixes - -- **docs:** use frontmatter for what props to show in docs ([#2072](https://github.com/patternfly/patternfly-react/issues/2072)) ([20e6b12](https://github.com/patternfly/patternfly-react/commit/20e6b12)) - -## [3.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.6.0...@patternfly/react-charts@3.6.1) (2019-05-29) - -**Note:** Version bump only for package @patternfly/react-charts - -# [3.6.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.5.2...@patternfly/react-charts@3.6.0) (2019-05-28) - -### Features - -- **charts:** add typescript support to react-charts ([#2081](https://github.com/patternfly/patternfly-react/issues/2081)) ([42c2845](https://github.com/patternfly/patternfly-react/commit/42c2845)) - -## [3.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.5.1...@patternfly/react-charts@3.5.2) (2019-05-24) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.5.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.5.0...@patternfly/react-charts@3.5.1) (2019-05-23) - -### Bug Fixes - -- **Charts:** Fix type definitions for chart themes ([#2062](https://github.com/patternfly/patternfly-react/issues/2062)) ([63ff308](https://github.com/patternfly/patternfly-react/commit/63ff308)), closes [#2061](https://github.com/patternfly/patternfly-react/issues/2061) - -# 3.5.0 (2019-05-21) - -### Features - -- **ts:** convert aboutmodal to TS ([#1968](https://github.com/patternfly/patternfly-react/issues/1968)) ([7dd9526](https://github.com/patternfly/patternfly-react/commit/7dd9526)) - -## [3.4.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.4.5...@patternfly/react-charts@3.4.6) (2019-05-09) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.4.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.4.4...@patternfly/react-charts@3.4.5) (2019-05-07) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.4.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.4.3...@patternfly/react-charts@3.4.4) (2019-05-07) - -### Bug Fixes - -- **types:** Update @types/victory package to latest ([#1899](https://github.com/patternfly/patternfly-react/issues/1899)) ([d3e2ec7](https://github.com/patternfly/patternfly-react/commit/d3e2ec7)), closes [#1898](https://github.com/patternfly/patternfly-react/issues/1898) - -## 3.4.3 (2019-05-06) - -### Bug Fixes - -- **charts:** Fix chart font stack to use PatternFly core sans-serif font stack ([#1865](https://github.com/patternfly/patternfly-react/issues/1865)) ([f2b4cc7](https://github.com/patternfly/patternfly-react/commit/f2b4cc7)), closes [#1864](https://github.com/patternfly/patternfly-react/issues/1864) -- **DualList:** Hide dropdown when no menu items are provided ([#1909](https://github.com/patternfly/patternfly-react/issues/1909)) ([8ed397e](https://github.com/patternfly/patternfly-react/commit/8ed397e)) - -## [3.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.4.1...@patternfly/react-charts@3.4.2) (2019-04-30) - -**Note:** Version bump only for package @patternfly/react-charts - -## 3.4.1 (2019-04-29) - -### Bug Fixes - -- **version:** bump patternfly version to 2.6.5 ([#1874](https://github.com/patternfly/patternfly-react/issues/1874)) ([e3c8d7c](https://github.com/patternfly/patternfly-react/commit/e3c8d7c)) - -# [3.4.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.3.0...@patternfly/react-charts@3.4.0) (2019-04-25) - -### Features - -- **build:** incremental build ([#1817](https://github.com/patternfly/patternfly-react/issues/1817)) ([6bd3d7e](https://github.com/patternfly/patternfly-react/commit/6bd3d7e)) - -# 3.3.0 (2019-04-24) - -### Features - -- **clipboard:** remove textarea from clipboard copy ([#1840](https://github.com/patternfly/patternfly-react/issues/1840)) ([8bb26a2](https://github.com/patternfly/patternfly-react/commit/8bb26a2)) - -# 3.2.0 (2019-04-23) - -### Features - -- **card:** adds card is-hoverable modifier prop ([#1812](https://github.com/patternfly/patternfly-react/issues/1812)) ([a398042](https://github.com/patternfly/patternfly-react/commit/a398042)) - -## 3.1.2 (2019-04-18) - -**Note:** Version bump only for package @patternfly/react-charts - -## [3.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.1.0...@patternfly/react-charts@3.1.1) (2019-04-16) - -**Note:** Version bump only for package @patternfly/react-charts - -# [3.1.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.0.2...@patternfly/react-charts@3.1.0) (2019-04-16) - -### Features - -- **mdx:** use mdx for docs ([#1753](https://github.com/patternfly/patternfly-react/issues/1753)) ([a03ecd0](https://github.com/patternfly/patternfly-react/commit/a03ecd0)) - -## [3.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@3.0.1...@patternfly/react-charts@3.0.2) (2019-04-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 3.0.1 (2019-04-15) - -### Bug Fixes - -- Update React with changes from core ([#1703](https://github.com/patternfly/patternfly-react/issues/1703)) ([a219cae](https://github.com/patternfly/patternfly-react/commit/a219cae)), closes [#1680](https://github.com/patternfly/patternfly-react/issues/1680) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) - -# [3.0.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.4.0...@patternfly/react-charts@3.0.0) (2019-04-15) - -### BREAKING CHANGES - -- Update React with changes from core ([#1703](https://github.com/patternfly/patternfly-react/issues/1703)) ([a219cae](https://github.com/patternfly/patternfly-react/commit/a219cae)), closes [#1680](https://github.com/patternfly/patternfly-react/issues/1680) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) [#1684](https://github.com/patternfly/patternfly-react/issues/1684) - -### Features - -- **gatsby:** Refactor Gatsby ([#1656](https://github.com/patternfly/patternfly-react/issues/1656)) ([bc32a25](https://github.com/patternfly/patternfly-react/commit/bc32a25)) - -## [2.3.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.3.0...@patternfly/react-charts@2.3.1) (2019-04-01) - -### Bug Fixes - -- **misc:** small bug fixes ([#1660](https://github.com/patternfly/patternfly-react/issues/1660)) ([14e4cd3](https://github.com/patternfly/patternfly-react/commit/14e4cd3)) - -# 2.3.0 (2019-03-29) - -### Features - -- **Icons:** Paper plane alt icon ([#1643](https://github.com/patternfly/patternfly-react/issues/1643)) ([cd149e0](https://github.com/patternfly/patternfly-react/commit/cd149e0)) - -## 2.2.2 (2019-03-21) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.2.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.2.0...@patternfly/react-charts@2.2.1) (2019-03-18) - -**Note:** Version bump only for package @patternfly/react-charts - -# [2.2.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.12...@patternfly/react-charts@2.2.0) (2019-03-18) - -### Features - -- **core:** clean tsconfigs, add defaultProps to TS-docs ([#1570](https://github.com/patternfly/patternfly-react/issues/1570)) ([9df0f15](https://github.com/patternfly/patternfly-react/commit/9df0f15)) - -## [2.1.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.11...@patternfly/react-charts@2.1.12) (2019-03-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.1.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.10...@patternfly/react-charts@2.1.11) (2019-03-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## 2.1.10 (2019-03-14) - -**Note:** Version bump only for package @patternfly/react-charts - -## 2.1.9 (2019-03-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## 2.1.8 (2019-03-11) - -### Bug Fixes - -- **tsconfig:** avatar tsx change ([#1535](https://github.com/patternfly/patternfly-react/issues/1535)) ([8107f5c](https://github.com/patternfly/patternfly-react/commit/8107f5c)) - -## [2.1.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.6...@patternfly/react-charts@2.1.7) (2019-03-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## 2.1.6 (2019-03-08) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.4...@patternfly/react-charts@2.1.5) (2019-03-05) - -**Note:** Version bump only for package @patternfly/react-charts - -## 2.1.4 (2019-03-04) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.2...@patternfly/react-charts@2.1.3) (2019-02-26) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.1.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.1...@patternfly/react-charts@2.1.2) (2019-02-25) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.1.0...@patternfly/react-charts@2.1.1) (2019-02-25) - -**Note:** Version bump only for package @patternfly/react-charts - -# 2.1.0 (2019-02-25) - -### Features - -- **charts:** Add ChartAxis ([#1309](https://github.com/patternfly/patternfly-react/issues/1309)) ([cd6788b](https://github.com/patternfly/patternfly-react/commit/cd6788b)) - -## [2.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.0.4...@patternfly/react-charts@2.0.5) (2019-02-20) - -### Bug Fixes - -- **lint:** fix linting glob and auto-fixable linter errors ([#1256](https://github.com/patternfly/patternfly-react/issues/1256)) ([#1409](https://github.com/patternfly/patternfly-react/issues/1409)) ([0b637fe](https://github.com/patternfly/patternfly-react/commit/0b637fe)) - -## [2.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.0.3...@patternfly/react-charts@2.0.4) (2019-02-19) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.0.2...@patternfly/react-charts@2.0.3) (2019-02-15) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.0.1...@patternfly/react-charts@2.0.2) (2019-02-13) - -**Note:** Version bump only for package @patternfly/react-charts - -## [2.0.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@2.0.0...@patternfly/react-charts@2.0.1) (2019-02-12) - -**Note:** Version bump only for package @patternfly/react-charts - -# [2.0.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.4.3...@patternfly/react-charts@2.0.0) (2019-02-08) - -### Code Refactoring - -- **AboutModal:** Upgrade core to 1.0.175 and Refactor AboutModal ([#1307](https://github.com/patternfly/patternfly-react/issues/1307)) ([1f85756](https://github.com/patternfly/patternfly-react/commit/1f85756)), closes [#1267](https://github.com/patternfly/patternfly-react/issues/1267) - -### BREAKING CHANGES - -- **AboutModal:** removed heroImg and heroImageSrc and heroImageAlt props - -## [1.4.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.4.2...@patternfly/react-charts@1.4.3) (2019-02-01) - -**Note:** Version bump only for package @patternfly/react-charts - -## [1.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.4.1...@patternfly/react-charts@1.4.2) (2019-01-29) - -**Note:** Version bump only for package @patternfly/react-charts - -## [1.4.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.4.0...@patternfly/react-charts@1.4.1) (2019-01-21) - -### Bug Fixes - -- **readme:** update readme for react-charts ([#1225](https://github.com/patternfly/patternfly-react/issues/1225)) ([7799263](https://github.com/patternfly/patternfly-react/commit/7799263)) - -# [1.4.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.3.0...@patternfly/react-charts@1.4.0) (2019-01-17) - -### Features - -- **Alert:** Add optional Close button to Alert via onClose prop ([#1200](https://github.com/patternfly/patternfly-react/issues/1200)) ([9d59dcb](https://github.com/patternfly/patternfly-react/commit/9d59dcb)), closes [#1036](https://github.com/patternfly/patternfly-react/issues/1036) - -# [1.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.7...@patternfly/react-charts@1.3.0) (2019-01-16) - -### Features - -- **Table:** introduce new component Table based on pf4 designs ([#821](https://github.com/patternfly/patternfly-react/issues/821)) ([7b38cbc](https://github.com/patternfly/patternfly-react/commit/7b38cbc)) - - - -## [1.2.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.6...@patternfly/react-charts@1.2.7) (2019-01-11) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.2.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.5...@patternfly/react-charts@1.2.6) (2019-01-10) - -### Bug Fixes - -- **prerelease:** attempt to add prerelease channel to react-charts ([#1160](https://github.com/patternfly/patternfly-react/issues/1160)) ([0e3e807](https://github.com/patternfly/patternfly-react/commit/0e3e807)) - - - -## [1.2.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.4...@patternfly/react-charts@1.2.5) (2019-01-10) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.2.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.3...@patternfly/react-charts@1.2.4) (2018-12-20) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.2.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.2...@patternfly/react-charts@1.2.3) (2018-12-19) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.2.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.1...@patternfly/react-charts@1.2.2) (2018-12-07) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.2.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.2.0...@patternfly/react-charts@1.2.1) (2018-11-28) - -**Note:** Version bump only for package @patternfly/react-charts - - - -# [1.2.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.1.0...@patternfly/react-charts@1.2.0) (2018-11-27) - -### Features - -- **Popover:** Add PF4 Popover ([#754](https://github.com/patternfly/patternfly-react/issues/754)) ([17cf0c0](https://github.com/patternfly/patternfly-react/commit/17cf0c0)) - - - -# [1.1.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.0.5...@patternfly/react-charts@1.1.0) (2018-11-20) - -### Features - -- **PF4 Page:** Allow passing of custom ref for condensed header ([#941](https://github.com/patternfly/patternfly-react/issues/941)) ([889ec1a](https://github.com/patternfly/patternfly-react/commit/889ec1a)) - - - -## [1.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.0.4...@patternfly/react-charts@1.0.5) (2018-11-16) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.0.3...@patternfly/react-charts@1.0.4) (2018-11-14) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## [1.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.0.2...@patternfly/react-charts@1.0.3) (2018-11-12) - -### Bug Fixes - -- **charts:** address typescript issues ([#902](https://github.com/patternfly/patternfly-react/issues/902)) ([83cb283](https://github.com/patternfly/patternfly-react/commit/83cb283)) - - - -## [1.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@1.0.1...@patternfly/react-charts@1.0.2) (2018-11-07) - -**Note:** Version bump only for package @patternfly/react-charts - - - -## 1.0.1 (2018-11-07) - -**Note:** Version bump only for package @patternfly/react-charts - -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/packages/react-charts/README.md b/packages/react-charts/README.md index ae3e0afe2fb..b249e79b697 100644 --- a/packages/react-charts/README.md +++ b/packages/react-charts/README.md @@ -1,31 +1,16 @@ # @patternfly/react-charts -This package provides PatternFly charting components for [PatternFly 4][patternfly-4]. - -### Prerequisite - -#### Node Environment - -This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react. - -For example, to develop with Node 8, use the following: - -``` -nvm install 8 -nvm use 8 -``` - -This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/). +This package provides PatternFly charting components for [PatternFly][patternfly]. ### Installing -``` +```sh yarn add @patternfly/react-charts ``` or -``` +```sh npm install @patternfly/react-charts --save ``` @@ -60,28 +45,12 @@ You can also find how each component is meant to be used from a design perspecti Note: All commands below assume you are on the root directory in this repository. -### Install - -Run to install all the dependencies - -```sh -yarn && yarn bootstrap && yarn build && yarn build:docs -``` - -### Running - -To start the site locally. - -```sh -yarn build && yarn start:pf4 -``` - -### Building +### Install & run locally -To build the site. +Run to install all the dependencies, build and run the site locally. ```sh -yarn build:docs +yarn install && yarn start ``` # Contributing Components @@ -105,4 +74,4 @@ yarn test packages/react-charts ``` [patternfly-4]: https://github.com/patternfly/patternfly -[docs]: https://patternfly-react.surge.sh/ +[docs]: https://react-staging.patternfly.org/ diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index d6ccfdab3c3..33d3b56752f 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "7.0.0-alpha.10", + "version": "7.4.9", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -11,8 +11,7 @@ "*.scss" ], "publishConfig": { - "access": "public", - "tag": "alpha" + "access": "public" }, "repository": { "type": "git", @@ -29,41 +28,39 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^5.0.0-alpha.4", - "@patternfly/react-tokens": "^5.0.0-alpha.4", - "hoist-non-react-statics": "^3.3.0", - "lodash": "^4.17.19", - "tslib": "^2.0.0", - "victory-area": "^36.6.8", - "victory-axis": "^36.6.8", - "victory-bar": "^36.6.8", - "victory-chart": "^36.6.8", - "victory-core": "^36.6.8", - "victory-create-container": "^36.6.8", - "victory-cursor-container": "^36.6.8", - "victory-group": "^36.6.8", - "victory-legend": "^36.6.8", - "victory-line": "^36.6.8", - "victory-pie": "^36.6.8", - "victory-scatter": "^36.6.8", - "victory-stack": "^36.6.8", - "victory-tooltip": "^36.6.8", - "victory-voronoi-container": "^36.6.8", - "victory-zoom-container": "^36.6.8" + "@patternfly/react-styles": "workspace:^", + "@patternfly/react-tokens": "workspace:^", + "hoist-non-react-statics": "^3.3.2", + "lodash": "^4.17.21", + "tslib": "^2.7.0", + "victory-area": "^37.3.6", + "victory-axis": "^37.3.6", + "victory-bar": "^37.3.6", + "victory-box-plot": "^37.3.6", + "victory-chart": "^37.3.6", + "victory-core": "^37.3.6", + "victory-create-container": "^37.3.6", + "victory-cursor-container": "^37.3.6", + "victory-group": "^37.3.6", + "victory-legend": "^37.3.6", + "victory-line": "^37.3.6", + "victory-pie": "^37.3.6", + "victory-scatter": "^37.3.6", + "victory-stack": "^37.3.6", + "victory-tooltip": "^37.3.6", + "victory-voronoi-container": "^37.3.6", + "victory-zoom-container": "^37.3.6" }, "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" }, "scripts": { - "clean": "rimraf dist" + "clean": "rimraf dist", + "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json" }, "devDependencies": { - "@types/lodash": "^4.14.157", - "css": "^2.2.3", - "fs-extra": "^6.0.1", - "glob": "^7.1.2", - "rimraf": "^2.6.2", - "typescript": "^4.7.4" + "@types/lodash": "^4.17.13", + "fs-extra": "^11.2.0" } } diff --git a/packages/react-charts/single-packages.config.json b/packages/react-charts/single-packages.config.json new file mode 100644 index 00000000000..4a9651bb17d --- /dev/null +++ b/packages/react-charts/single-packages.config.json @@ -0,0 +1,4 @@ +{ + "packageName": "@patternfly/react-charts", + "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"] +} diff --git a/packages/react-charts/src/components/Chart/Chart.test.tsx b/packages/react-charts/src/components/Chart/Chart.test.tsx index 88432f4384d..160c3bfb7c7 100644 --- a/packages/react-charts/src/components/Chart/Chart.test.tsx +++ b/packages/react-charts/src/components/Chart/Chart.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; import { Chart } from './Chart'; -import { ChartGroup } from '../ChartGroup'; -import { ChartLine } from '../ChartLine'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; +import { ChartLine } from '../ChartLine/ChartLine'; Object.values([true, false]).forEach(() => { test('Chart', () => { diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx index 8897c9b4714..72a9c97ee1a 100644 --- a/packages/react-charts/src/components/Chart/Chart.tsx +++ b/packages/react-charts/src/components/Chart/Chart.tsx @@ -20,21 +20,20 @@ import { VictoryStyleObject } from 'victory-core'; import { AxesType, VictoryChart, VictoryChartProps } from 'victory-chart'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLegend, ChartLegendOrientation, ChartLegendPosition } from '../ChartLegend'; -import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; -import { - getChartTheme, - getClassName, - getComputedLegend, - getLabelTextSize, - getPaddingForSide, - getPatternDefs, - getDefaultData, - getLegendItemsExtraHeight, - useDefaultPatternProps, -} from "../ChartUtils"; -import { useEffect } from "react"; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getClassName } from '../ChartUtils/chart-helpers'; +import { getLabelTextSize } from '../ChartUtils/chart-label'; +import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getPatternDefs, mergePatternData, useDefaultPatternProps } from '../ChartUtils/chart-patterns'; +import { getChartTheme } from '../ChartUtils/chart-theme-types'; +import { useEffect } from 'react'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartPoint } from '../ChartPoint/ChartPoint'; +import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; /** * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart, @@ -212,7 +211,6 @@ export interface ChartProps extends VictoryChartProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -289,6 +287,10 @@ export interface ChartProps extends VictoryChartProps { * cases, the legend may not be visible until enough padding is applied. */ legendPosition?: 'bottom' | 'bottom-left' | 'right'; + /** + * @beta Text direction of the legend labels. + */ + legendDirection?: 'ltr' | 'rtl'; /** * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain @@ -342,7 +344,6 @@ export interface ChartProps extends VictoryChartProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -473,10 +474,11 @@ export const Chart: React.FunctionComponent = ({ children, colorScale, hasPatterns, - legendAllowWrap = false, + legendAllowWrap, legendComponent = , legendData, - legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition, + legendPosition = ChartCommonStyles.legend.position, + legendDirection = 'ltr', name, padding, patternScale, @@ -486,7 +488,7 @@ export const Chart: React.FunctionComponent = ({ // destructure last theme = getChartTheme(themeColor, showAxis), containerComponent = , - legendOrientation = theme.legend.orientation as ChartLegendOrientation, + legendOrientation = theme.legend.orientation as any, height = theme.chart.height, width = theme.chart.width, ...rest @@ -525,14 +527,35 @@ export const Chart: React.FunctionComponent = ({ theme, ...containerComponent.props, className: getClassName({ className: containerComponent.props.className }), // Override VictoryContainer class name - ...(labelComponent && { labelComponent }) // Override label component props + ...(labelComponent && { labelComponent }), // Override label component props + ...(themeColor === ChartThemeColor.skeleton && { labelComponent: }) // Omit cursor and tooltips }); + let legendXOffset = 0; + if (legendDirection === 'rtl') { + legendXOffset = getLegendMaxTextWidth(legendData, theme); + } + const legend = React.cloneElement(legendComponent, { data: legendData, ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }), orientation: legendOrientation, theme, + themeColor, + ...(legendDirection === 'rtl' && { + dataComponent: legendComponent.props.dataComponent ? ( + React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) + ) : ( + + ) + }), + ...(legendDirection === 'rtl' && { + labelComponent: legendComponent.props.labelComponent ? ( + React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 }) + ) : ( + + ) + }), ...legendComponent.props }); @@ -548,15 +571,15 @@ export const Chart: React.FunctionComponent = ({ // Adjust for axis label React.Children.toArray(children).map((child: any) => { - if (child.type.role === 'axis' && child.props.label && !child.props.dependentAxis) { + if (child.type.role === 'axis' && child.props.label && child.props.fixAxisLabelHeight) { xAxisLabelHeight = getLabelTextSize({ text: child.props.label, theme }).height + 10; legendTitleHeight = 0; } }); - if (legendPosition === ChartLegendPosition.bottom) { + if (legendPosition === 'bottom') { dy += xAxisLabelHeight + legendTitleHeight; - } else if (legendPosition === ChartLegendPosition.bottomLeft) { + } else if (legendPosition === 'bottom-left') { dy += xAxisLabelHeight + legendTitleHeight; dx = -10; } @@ -577,6 +600,7 @@ export const Chart: React.FunctionComponent = ({ padding: defaultPadding, position: legendPosition, theme, + themeColor, width, ...(defaultPatternScale && { patternScale: defaultPatternScale }) }); @@ -595,9 +619,10 @@ export const Chart: React.FunctionComponent = ({ name: `${name}-${(child as any).type.displayName}-${index}` }), theme, + themeColor, ...childProps, ...((child as any).type.displayName === 'ChartPie' && { - data: getDefaultData(childProps.data, defaultPatternScale) + data: mergePatternData(childProps.data, defaultPatternScale) }) // Override child props }); } @@ -607,7 +632,7 @@ export const Chart: React.FunctionComponent = ({ // Callback to compliment legendAllowWrap const computedLegend = getLegend(); useEffect(() => { - if (typeof legendAllowWrap === 'function') { + if (computedLegend?.props && typeof legendAllowWrap === 'function') { const extraHeight = getLegendItemsExtraHeight({ legendData: computedLegend.props.data, legendOrientation: computedLegend.props.orientation, diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap index 23880999f6d..025a80e8f54 100644 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -3,13 +3,13 @@ exports[`Chart 1`] = `
@@ -19,7 +19,7 @@ exports[`Chart 1`] = ` @@ -63,7 +63,7 @@ exports[`Chart 1`] = ` @@ -94,7 +94,7 @@ exports[`Chart 1`] = ` @@ -125,7 +125,7 @@ exports[`Chart 1`] = ` @@ -156,7 +156,7 @@ exports[`Chart 1`] = ` @@ -188,7 +188,7 @@ exports[`Chart 1`] = ` @@ -232,7 +232,7 @@ exports[`Chart 1`] = ` @@ -263,7 +263,7 @@ exports[`Chart 1`] = ` @@ -294,7 +294,7 @@ exports[`Chart 1`] = ` @@ -325,7 +325,7 @@ exports[`Chart 1`] = ` @@ -353,11 +353,11 @@ exports[`Chart 1`] = `
@@ -369,13 +369,13 @@ exports[`Chart 1`] = ` exports[`Chart 2`] = `
@@ -385,7 +385,7 @@ exports[`Chart 2`] = ` @@ -429,7 +429,7 @@ exports[`Chart 2`] = ` @@ -460,7 +460,7 @@ exports[`Chart 2`] = ` @@ -491,7 +491,7 @@ exports[`Chart 2`] = ` @@ -522,7 +522,7 @@ exports[`Chart 2`] = ` @@ -554,7 +554,7 @@ exports[`Chart 2`] = ` @@ -598,7 +598,7 @@ exports[`Chart 2`] = ` @@ -629,7 +629,7 @@ exports[`Chart 2`] = ` @@ -660,7 +660,7 @@ exports[`Chart 2`] = ` @@ -691,7 +691,7 @@ exports[`Chart 2`] = ` @@ -719,11 +719,11 @@ exports[`Chart 2`] = `
@@ -735,13 +735,13 @@ exports[`Chart 2`] = ` exports[`renders axis and component children 1`] = `
@@ -767,7 +767,7 @@ exports[`renders axis and component children 1`] = ` d="M50,138.88888888888886L83.33333333333334,127.77777777777779L116.66666666666667,94.44444444444443L150,116.66666666666669" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" /> @@ -849,7 +849,7 @@ exports[`renders axis and component children 1`] = ` @@ -893,7 +893,7 @@ exports[`renders axis and component children 1`] = ` @@ -924,7 +924,7 @@ exports[`renders axis and component children 1`] = ` @@ -955,7 +955,7 @@ exports[`renders axis and component children 1`] = ` @@ -986,7 +986,7 @@ exports[`renders axis and component children 1`] = ` @@ -1017,7 +1017,7 @@ exports[`renders axis and component children 1`] = ` @@ -1048,7 +1048,7 @@ exports[`renders axis and component children 1`] = ` @@ -1080,7 +1080,7 @@ exports[`renders axis and component children 1`] = ` @@ -1124,7 +1124,7 @@ exports[`renders axis and component children 1`] = ` @@ -1155,7 +1155,7 @@ exports[`renders axis and component children 1`] = ` @@ -1186,7 +1186,7 @@ exports[`renders axis and component children 1`] = ` @@ -1214,11 +1214,11 @@ exports[`renders axis and component children 1`] = `
diff --git a/packages/react-charts/src/components/Chart/index.ts b/packages/react-charts/src/components/Chart/index.ts deleted file mode 100644 index c9f6de63fe9..00000000000 --- a/packages/react-charts/src/components/Chart/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Chart'; diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx index 972e37ba4ca..ee1cc9fc1a6 100644 --- a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx +++ b/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; +import { ChartArea } from '../ChartArea/ChartArea'; Object.values([true, false]).forEach(() => { test('ChartArea', () => { diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/components/ChartArea/ChartArea.tsx index be7e9b92e62..b093f358cff 100644 --- a/packages/react-charts/src/components/ChartArea/ChartArea.tsx +++ b/packages/react-charts/src/components/ChartArea/ChartArea.tsx @@ -20,14 +20,9 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryArea, VictoryAreaProps, VictoryAreaTTargetType } from 'victory-area'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; - -export enum ChartAreaSortOrder { - ascending = 'ascending', - descending = 'descending' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartArea renders a dataset as a single area path. Since ChartArea renders only a single element to represent a diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap index 99bfc6ba5a7..e30a3268260 100644 --- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap +++ b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartArea 1`] = `
@@ -31,19 +31,19 @@ exports[`ChartArea 1`] = `
@@ -55,13 +55,13 @@ exports[`ChartArea 1`] = ` exports[`ChartArea 2`] = `
@@ -83,19 +83,19 @@ exports[`ChartArea 2`] = `
@@ -107,13 +107,13 @@ exports[`ChartArea 2`] = ` exports[`renders component data 1`] = `
@@ -138,16 +138,16 @@ exports[`renders component data 1`] = ` d="M50,192.85714285714286L166.66666666666666,135.71428571428572L283.3333333333333,67.14285714285712L400,50L400,250L283.3333333333333,250L166.66666666666666,250L50,250Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md index 8dfcb7752b2..cba89769979 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/components/ChartArea/examples/ChartArea.md @@ -20,10 +20,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build an area chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/area-chart) - ## Examples ### Basic with right aligned legend ```js @@ -131,7 +127,7 @@ class BottomAlignedLegend extends React.Component { themeColor={ChartThemeColor.cyan} width={650} > - + { test('ChartAxis', () => { diff --git a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx index c3c9b20abd8..8fa73d3996f 100644 --- a/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx +++ b/packages/react-charts/src/components/ChartAxis/ChartAxis.tsx @@ -15,10 +15,11 @@ import { LabelProps } from 'victory-core'; import { VictoryAxis, VictoryAxisProps, VictoryAxisTTargetType } from 'victory-axis'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getAxisTheme, getTheme } from '../ChartUtils'; -import { ChartLabel } from '../ChartLabel'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme'; +import { getAxisTheme } from '../ChartUtils/chart-theme-types'; /** * ChartAxis renders a single axis which can be used on its own or composed with Chart. @@ -156,6 +157,10 @@ export interface ChartAxisProps extends VictoryAxisProps { * @propType object[] */ externalEventMutations?: EventCallbackInterface[]; + /** + * When true, this prop adjusts the height between the axis label and bottom positioned legend + */ + fixAxisLabelHeight?: boolean; /** * When true, this prop reduces the number of tick labels to fit the length of the axis. * Labels are removed at approximately even intervals from the original array of labels. @@ -450,6 +455,8 @@ export const ChartAxis: React.FunctionComponent = ({ theme = getTheme(themeColor), ...rest }: ChartAxisProps) => { + const componentTheme = getComponentTheme(themeColor); + // Clone so users can override container props const container = React.cloneElement(containerComponent, { theme, @@ -461,7 +468,8 @@ export const ChartAxis: React.FunctionComponent = ({ ...(name && { id: () => `${name}-${(axisLabelComponent as any).type.displayName}` }), - ...axisLabelComponent.props + ...axisLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); const getTickLabelComponent = () => @@ -469,7 +477,8 @@ export const ChartAxis: React.FunctionComponent = ({ ...(name && { id: (props: any) => `${name}-${(tickLabelComponent as any).type.displayName}-${props.index}` }), - ...tickLabelComponent.props + ...tickLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Note: containerComponent is required for theme diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap index eea999422bb..e003aac6c09 100644 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -3,20 +3,20 @@ exports[`ChartAxis 1`] = `
@@ -60,7 +60,7 @@ exports[`ChartAxis 1`] = ` @@ -91,7 +91,7 @@ exports[`ChartAxis 1`] = ` @@ -122,7 +122,7 @@ exports[`ChartAxis 1`] = ` @@ -153,7 +153,7 @@ exports[`ChartAxis 1`] = ` @@ -184,7 +184,7 @@ exports[`ChartAxis 1`] = ` @@ -211,11 +211,11 @@ exports[`ChartAxis 1`] = `
@@ -227,20 +227,20 @@ exports[`ChartAxis 1`] = ` exports[`ChartAxis 2`] = `
@@ -284,7 +284,7 @@ exports[`ChartAxis 2`] = ` @@ -315,7 +315,7 @@ exports[`ChartAxis 2`] = ` @@ -346,7 +346,7 @@ exports[`ChartAxis 2`] = ` @@ -377,7 +377,7 @@ exports[`ChartAxis 2`] = ` @@ -408,7 +408,7 @@ exports[`ChartAxis 2`] = ` @@ -435,11 +435,11 @@ exports[`ChartAxis 2`] = `
@@ -451,13 +451,13 @@ exports[`ChartAxis 2`] = ` exports[`renders component data 1`] = `
@@ -483,7 +483,7 @@ exports[`renders component data 1`] = ` d="M80,150L128.33333333333331,137.5L176.66666666666666,100L224.99999999999997,125" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; width: 6px; opacity: 1; stroke-width: 2;" /> @@ -565,7 +565,7 @@ exports[`renders component data 1`] = ` @@ -609,7 +609,7 @@ exports[`renders component data 1`] = ` @@ -640,7 +640,7 @@ exports[`renders component data 1`] = ` @@ -672,7 +672,7 @@ exports[`renders component data 1`] = ` @@ -716,7 +716,7 @@ exports[`renders component data 1`] = ` @@ -747,7 +747,7 @@ exports[`renders component data 1`] = ` @@ -775,11 +775,11 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartAxis/index.ts b/packages/react-charts/src/components/ChartAxis/index.ts deleted file mode 100644 index b2a015bdef6..00000000000 --- a/packages/react-charts/src/components/ChartAxis/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartAxis'; diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx index afed8ec5832..99b54355d0c 100644 --- a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx +++ b/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Chart } from '../Chart'; +import { Chart } from '../Chart/Chart'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartBar } from './ChartBar'; -import { ChartGroup } from '../ChartGroup'; Object.values([true, false]).forEach(() => { test('ChartBar', () => { diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/components/ChartBar/ChartBar.tsx index 2ca054fce46..6285b0d4052 100644 --- a/packages/react-charts/src/components/ChartBar/ChartBar.tsx +++ b/packages/react-charts/src/components/ChartBar/ChartBar.tsx @@ -20,9 +20,9 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryBar, VictoryBarAlignmentType, VictoryBarProps, VictoryBarTTargetType } from 'victory-bar'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartBar renders a dataset as series of bars. ChartBar can be composed with Chart to create bar charts. @@ -482,4 +482,4 @@ export const ChartBar: React.FunctionComponent = ({ ChartBar.displayName = 'ChartBar'; // Note: VictoryBar.getDomain & VictoryBar.role must be hoisted -hoistNonReactStatics(ChartBar, VictoryBar); +hoistNonReactStatics(ChartBar, VictoryBar, { getBaseProps: true }); diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap index 822bd6ee4fa..6a96a19a7b9 100644 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartBar 1`] = `
@@ -29,7 +29,7 @@ A 0 0 0 0 1, 55, 250 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-v5-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" />
@@ -95,13 +95,13 @@ A 0 0 0 0 1, 405, 250 exports[`ChartBar 2`] = `
@@ -121,7 +121,7 @@ A 0 0 0 0 1, 55, 250 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-v5-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" />
@@ -187,13 +187,13 @@ A 0 0 0 0 1, 405, 250 exports[`renders component data 1`] = `
@@ -214,7 +214,7 @@ A 0 0 0 0 1, 68.5, 150 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); stroke: var(--pf-v5-chart-bar--data--stroke, none); width: 6px; padding: 8px; stroke-width: 0;" /> @@ -461,7 +461,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -505,7 +505,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -536,7 +536,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -567,7 +567,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -599,7 +599,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -643,7 +643,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -674,7 +674,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -705,7 +705,7 @@ A 0 0 0 0 1, 246.5, 150 @@ -733,11 +733,11 @@ A 0 0 0 0 1, 246.5, 150
diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md index d4a8e6caaff..30aba90733d 100644 --- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md +++ b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md @@ -6,23 +6,23 @@ propComponents: [ 'ChartAxis', 'ChartBar', 'ChartGroup', + 'ChartLabel', 'ChartVoronoiContainer' ] hideDarkMode: true --- -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; import { VictoryZoomContainer } from 'victory-zoom-container'; +import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; +import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100'; +import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a bar chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/bar-chart) - ## Examples ### Basic with right aligned legend ```js @@ -209,6 +209,175 @@ import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts
``` +### Alerts timeline + +A gnatt-like chart using `y` and `y0` data properties for alert start/end dates + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; +import global_danger_color_100 from '@patternfly/react-tokens/dist/esm/global_danger_color_100'; +import global_info_color_100 from '@patternfly/react-tokens/dist/esm/global_info_color_100'; +import global_warning_color_100 from '@patternfly/react-tokens/dist/esm/global_warning_color_100'; + + +class Timeline extends React.Component { + render() { + // Start = y0, end = y + const alerts = [ + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-09T02:30:00"), severity: 'danger' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'danger' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' }, + { y0: new Date("2024-08-07T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'danger' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'danger' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'danger' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'info' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'info' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'info' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'info' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-09T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-07T02:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-07T04:30:00"), y: new Date("2024-08-08T05:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-10T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-11T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + ], + [ + { y0: new Date("2024-08-06T01:30:00"), y: new Date("2024-08-08T02:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-08T07:30:00"), y: new Date("2024-08-09T09:30:00"), severity: 'warn' }, + { y0: new Date("2024-08-10T05:30:00"), y: new Date("2024-08-11T20:00:00"), severity: 'warn' }, + { y0: new Date("2024-08-12T10:00:00"), y: new Date("2024-08-13T10:30:00"), severity: 'warn' } + ], + ]; + + const formatDate = (date, isTime) => { + const dateString = date?.toLocaleDateString("en-US", { month: 'short', day: 'numeric' }); + const timeString = date?.toLocaleTimeString("en-US", { hour12: false }); + return isTime ? `${dateString} ${timeString}` : dateString; + }; + + const getChart = (alert, index) => { + const data = []; + + alert?.map(datum => { + data.push({ + ...datum, + x: alerts.length - index, + fill: datum.severity === "danger" + ? global_danger_color_100.var + : datum.severity === "warn" + ? global_warning_color_100.var + : global_info_color_100.var, + }); + }); + + if (data?.length === 0) { + return null; + } + return ( + datum.fill, + stroke: ({ datum }) => datum.fill, + } + }} + /> + ); + }; + + return ( +
+ } /> + } + labels={({ datum }) => `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}`} + /> + } + domainPadding={{ x: [20, 20], y: [20, 20] }} + legendData={[ + { name: "Danger", symbol: { fill: global_danger_color_100.var } }, + { name: "Info", symbol: { fill: global_info_color_100.var } }, + { name: "Warning", symbol: { fill: global_warning_color_100.var } } + ]} + legendPosition="bottom-left" + height={400} + name="chart5" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 100, + right: 50, // Adjusted to accommodate tooltip + top: 50 + }} + width={450} + > + new Date(t).toLocaleDateString("en-US", { month: 'short', day: 'numeric' })} + tickValues={[new Date("2024-08-06T00:00:00"), new Date("2024-08-08T00:00:00"), new Date("2024-08-10T00:00:00"), new Date("2024-08-12T00:00:00")]} + /> + + } + label="Incidents" + padding={{ top: 20, bottom: 60 }} + style={{ + axis: { + stroke: "transparent", + }, + ticks: { + stroke: "transparent" + }, + tickLabels: { + fill: "transparent" + } + }} + /> + + {alerts.map((alert, index) => getChart(alert, index))} + + +
+ ); + } +} +``` + ## Documentation ### Tips - See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) diff --git a/packages/react-charts/src/components/ChartBar/index.ts b/packages/react-charts/src/components/ChartBar/index.ts deleted file mode 100644 index d3d6f86e27d..00000000000 --- a/packages/react-charts/src/components/ChartBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartBar'; diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.test.tsx b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.test.tsx new file mode 100644 index 00000000000..9a478999000 --- /dev/null +++ b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.test.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { Chart } from '../Chart/Chart'; +import { ChartBoxPlot } from './ChartBoxPlot'; + +Object.values([true, false]).forEach(() => { + test('ChartBar', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); +}); + +test('renders component data', () => { + const { asFragment } = render( + + + + ); + expect(asFragment()).toMatchSnapshot(); +}); diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx new file mode 100644 index 00000000000..a5b396b2098 --- /dev/null +++ b/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx @@ -0,0 +1,700 @@ +import * as React from 'react'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import { + AnimatePropTypeInterface, + CategoryPropType, + D3Scale, + DataGetterPropType, + DomainPropType, + DomainPaddingPropType, + EventCallbackInterface, + EventPropTypeInterface, + OriginType, + PaddingProps, + RangePropType, + ScalePropType, + SortOrderPropType, + StringOrNumberOrCallback, + StringOrNumberOrList, + VictoryStyleInterface, + OrientationTypes +} from 'victory-core'; +import { + VictoryBoxPlot, + VictoryBoxPlotLabelOrientationInterface, + VictoryBoxPlotLabelType, + VictoryBoxPlotProps +} from 'victory-box-plot'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; + +/** + * ChartBoxPlot renders a box plot to describe the distribution of a set of data. Data for ChartBoxPlot may be given + * with summary statistics pre-calculated (min, median, max, q1, q3), or as an array of raw data. ChartBoxPlot can be + * composed with Chart to create box plot charts. + * + * See https://github.com/FormidableLabs/victory/blob/main/packages/victory-bar/src/index.d.ts + * + * @beta + */ +export interface ChartBoxPlotProps extends VictoryBoxPlotProps { + /** + * The animate prop specifies props for VictoryAnimation to use. + * The animate prop should also be used to specify enter and exit + * transition configurations with the `onExit` and `onEnter` namespaces respectively. + * + * @propType boolean | object + * @example {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} + */ + animate?: boolean | AnimatePropTypeInterface; + /** + * The boxWidth prop specifies how wide each box should be. If the whiskerWidth prop is not set, this prop will also + * determine the width of the whisker crosshair. + */ + boxWidth?: number; + /** + * The categories prop specifies how categorical data for a chart should be ordered. + * This prop should be given as an array of string values, or an object with + * these arrays of values specified for x and y. If this prop is not set, + * categorical data will be plotted in the order it was given in the data array + * + * @propType string[] | { x: string[], y: string[] } + * @example ["dogs", "cats", "mice"] + */ + categories?: CategoryPropType; + /** + * The containerComponent prop takes an entire component which will be used to + * create a container element for standalone charts. + * The new element created from the passed containerComponent wil be provided with + * these props from ChartBoxPlot: height, width, children + * (the chart itself) and style. Props that are not provided by the + * child chart component include title and desc, both of which + * are intended to add accessibility to Victory components. The more descriptive these props + * are, the more accessible your data will be for people using screen readers. + * Any of these props may be overridden by passing in props to the supplied component, + * or modified or ignored within the custom component itself. If a dataComponent is + * not provided, ChartBoxPlot will use the default ChartContainer component. + * + * @example + */ + containerComponent?: React.ReactElement; + /** + * The data prop for ChartBoxPlot may be given in a variety of formats: + * + * @example + * As an array of standard data objects with values specified for x and y When given in this format, repeated values + * for x will be used for calculating summary statistics + * + * data={[ + * { x: 1, y: 2 }, + * { x: 1, y: 3 }, + * { x: 1, y: 5 }, + * { x: 2, y: 1 }, + * { x: 2, y: 4 }, + * { x: 2, y: 5 }, + * ... + * ]} + * + * @example As an array of data objects where y is given as an array of values When given in this format, array values + * are used for calculating summary statistics. + * + * data={[ + * { x: 1, y: [1, 2, 3, 5] }, + * { x: 2, y: [3, 2, 8, 10] }, + * { x: 3, y: [2, 8, 6, 5] }, + * { x: 4, y: [1, 3, 2, 9] } + * ]} + * + * @example As an array of data objects with pre-calculated summary statistics(min, median, max, q1, q3) When given in + * this format, ChartBoxPlot will not perform statistical analysis. Pre-calculating summary statistics for large + * datasets will improve performance. + * + * data={[ + * { x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 }, + * { x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 }, + * { x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 }, + * ]} + * + * Use the x, y, min, max, median, q1, and q3 data accessor props to specify custom data formats. + */ + data?: any[]; + /** + * The domain prop describes the range of values your chart will cover. This prop can be + * given as a array of the minimum and maximum expected values for your bar chart, + * or as an object that specifies separate arrays for x and y. + * If this prop is not provided, a domain will be calculated from data, or other + * available information. + * + * @propType number[] | { x: number[], y: number[] } + * @example [low, high], { x: [low, high], y: [low, high] } + * + * [-1, 1], {x: [0, 100], y: [0, 1]} + */ + domain?: DomainPropType; + /** + * The domainPadding prop specifies a number of pixels of padding to add to the + * beginning and end of a domain. This prop is useful for explicitly spacing ticks farther + * from the origin to prevent crowding. This prop should be given as an object with + * numbers specified for x and y. + * + * @propType number | number[] | { x: number[], y: number[] } + * @example [left, right], { x: [left, right], y: [bottom, top] } + * + * {x: [10, -10], y: 5} + */ + domainPadding?: DomainPaddingPropType; + /** + * Similar to data accessor props `x` and `y`, this prop may be used to functionally + * assign eventKeys to data + * + * @propType number | string | Function + */ + eventKey?: StringOrNumberOrCallback; + /** + * The event prop take an array of event objects. Event objects are composed of + * a target, an eventKey, and eventHandlers. Targets may be any valid style namespace + * for a given component, so "data" and "labels" are all valid targets for ChartBoxPlot events. + * The eventKey may optionally be used to select a single element by index rather than an entire + * set. The eventHandlers object should be given as an object whose keys are standard + * event names (i.e. onClick) and whose values are event callbacks. The return value + * of an event handler is used to modify elemnts. The return value should be given + * as an object or an array of objects with optional target and eventKey keys, + * and a mutation key whose value is a function. The target and eventKey keys + * will default to those corresponding to the element the event handler was attached to. + * The mutation function will be called with the calculated props for the individual selected + * element (i.e. a single bar), and the object returned from the mutation function + * will override the props of the selected element via object assignment. + * + * @propType object[] + * @example + * + * events={[ + * { + * target: "data", + * eventKey: "thisOne", + * eventHandlers: { + * onClick: () => { + * return [ + * { + * eventKey: "theOtherOne", + * mutation: (props) => { + * return {style: merge({}, props.style, {fill: "orange"})}; + * } + * }, { + * eventKey: "theOtherOne", + * target: "labels", + * mutation: () => { + * return {text: "hey"}; + * } + * } + * ]; + * } + * } + * } + * ]} + */ + events?: EventPropTypeInterface[]; + /** + * ChartBoxPlot uses the standard externalEventMutations prop. + * + * @propType object[] + */ + externalEventMutations?: EventCallbackInterface[]; + /** + * The groupComponent prop takes an entire component which will be used to + * create group elements for use within container elements. This prop defaults + * to a tag on web, and a react-native-svg tag on mobile + */ + groupComponent?: React.ReactElement; + /** + * The height props specifies the height the svg viewBox of the chart container. + * This value should be given as a number of pixels + */ + height?: number; + /** + * The horizontal prop determines whether the bars will be laid vertically or + * horizontally. The bars will be vertical if this prop is false or unspecified, + * or horizontal if the prop is set to true. + */ + horizontal?: boolean; + /** + * The labelOrientation prop determines where labels are placed relative to their corresponding data. If this prop is + * not set, it will be set to "top" for horizontal charts, and "right" for vertical charts. + */ + labelOrientation?: OrientationTypes | VictoryBoxPlotLabelOrientationInterface; + /** + * When the boolean labels prop is set to true, the values for min, max, median, q1, and q3 will be displayed for + * each box. For more granular label control, use the individual minLabels, maxLabels, medianLabels, q1Labels, and + * q3Labels props. + */ + labels?: boolean; + /** + * Use the max data accessor prop to define the max value of a box plot. + * + * @propType string | array[string] | function + * @example Specify which property in an array of data objects should be used as the max value + * + * max="max_value" + * + * @example Use a function to translate each element in a data array into a max value + * + * max={() => 10} + * + * @example Specify which property in an array of nested data objects should be used as a max value + * + * max="bonds.max", max={["bonds", "max"]} + */ + max?: StringOrNumberOrCallback | string[]; + /** + * The maxComponent prop takes a component instance which will be responsible for rendering an element to represent + * the maximum value of the box plot. The new element created from the passed maxComponent will be provided with the + * following props calculated by ChartBoxPlot: datum, index, scale, style, events, majorWhisker and minorWhisker. + * The majorWhisker and minorWhisker props are given as objects with values for x1, y1, x2 and y2 that describes the + * lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the + * supplied component, or modified or ignored within the custom component itself. If a maxComponent is not provided, + * ChartBoxPlot will use its default Whisker component. + */ + maxComponent?: React.ReactElement; + /** + * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum + * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain + * prop is set in addition to maximumDomain, domain will be used. + * + * Note: The x value supplied to the maxDomain prop refers to the independent variable, and the y value refers to the + * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to + * the y axis. + * + * @example + * + * maxDomain={0} + * maxDomain={{ y: 0 }} + */ + maxDomain?: number | { x?: number; y?: number }; + /** + * The maxLabelComponent prop takes a component instance which will be used to render the label corresponding to the + * maximum value for each box. The new element created from the passed maxLabelComponent will be supplied with the + * following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of + * these props may be overridden by passing in props to the supplied component, or modified or ignored within the + * custom component itself. If maxLabelComponent is omitted, a new ChartLabel will be created with props described + * above. + */ + maxLabelComponent?: React.ReactElement; + /** + * The maxLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, + * an array or as a function of the props corresponding to that label. When given as a boolean value, the max value + * of each datum will be used for the label. + * + * @example + * + * maxLabels={["first", "second", "third"]} + * maxLabels={({ datum }) => Math.round(datum.max)} + */ + maxLabels?: VictoryBoxPlotLabelType; + /** + * Use the median data accessor prop to define the median value of a box plot. + * + * @propType string | array[string] | function + * @example Specify which property in an array of data objects should be used as the median value + * + * median="median_value" + * + * @example Use a function to translate each element in a data array into a median value + * + * median={() => 10} + * + * @example Specify which property in an array of nested data objects should be used as a median value + * + * median="bonds.median", median={["bonds", "median"]} + */ + median?: StringOrNumberOrCallback | string[]; + /** + * The medianComponent prop takes a component instance which will be responsible for rendering an element to represent + * the median value of the box plot. The new element created from the passed medianComponent will be provided with the + * following props calculated by ChartBoxPlot: datum, index, scale, style, events, x1, y1, x2 and y2 Any of these + * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom + * component itself. If a medianComponent is not provided, ChartBoxPlot will use its default Line component. + */ + medianComponent?: React.ReactElement; + /** + * The medianLabelComponent prop takes a component instance which will be used to render the label corresponding to + * the median value for each box. The new element created from the passed medianLabelComponent will be supplied with + * the following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any + * of these props may be overridden by passing in props to the supplied component, or modified or ignored within the + * custom component itself. If medianLabelComponent is omitted, a new ChartLabel will be created with props + * described above. + */ + medianLabelComponent?: React.ReactElement; + /** + * The medianLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, + * an array or as a function of the props corresponding to that label. When given as a boolean value, the median value + * of each datum will be used for the label. + * + * @propType string | function | boolean + * @example + * + * medianLabels={["first", "second", "third"]} + * medianLabels={({ datum }) => Math.round(datum.median)} + */ + medianLabels?: VictoryBoxPlotLabelType; + /** + * Use the min data accessor prop to define the min value of a box plot. + * + * @propType string | array[string] | function + * @example Specify which property in an array of data objects should be used as the min value + * + * min="min_value" + * + * @example Use a function to translate each element in a data array into a min value + * + * min={() => 10} + * + * @example Specify which property in an array of nested data objects should be used as a min value + * + * min="bonds.min", min={["bonds", "min"]} + */ + min?: StringOrNumberOrCallback | string[]; + /** + * The minComponent prop takes a component instance which will be responsible for rendering an element to represent + * the minimum value of the box plot. The new element created from the passed minComponent will be provided with the + * following props calculated by ChartBoxPlot: datum, index, scale, style, events, majorWhisker and minorWhisker. + * The majorWhisker and minorWhisker props are given as objects with values for x1, y1, x2 and y2 that describes the + * lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the + * supplied component, or modified or ignored within the custom component itself. If a minComponent is not provided, + * ChartBoxPlot will use its default Whisker component. + */ + minComponent?: React.ReactElement; + /** + * The minDomain prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum + * domain of a chart is static, while the maximum value depends on data or other variable information. If the domain + * prop is set in addition to minimumDomain, domain will be used. + * + * Note: The x value supplied to the minDomain prop refers to the independent variable, and the y value refers to the + * dependent variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to + * the y axis. + * + * @example + * + * minDomain={0} + * minDomain={{ y: 0 }} + */ + minDomain?: number | { x?: number; y?: number }; + /** + * The minLabelComponent prop takes a component instance which will be used to render the label corresponding to the + * minimum value for each box. The new element created from the passed minLabelComponent will be supplied with the + * following props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of + * these props may be overridden by passing in props to the supplied component, or modified or ignored within the + * custom component itself. If minLabelComponent is omitted, a new ChartLabel will be created with props described + * above. + */ + minLabelComponent?: React.ReactElement; + /** + * The minLabels prop defines the labels that will appear above each point. This prop should be given as a boolean, an + * array or as a function of the props corresponding to that label. When given as a boolean value, the min value of + * each datum will be used for the label. + * + * @propType string | function | boolean + * @example + * + * minLabels={["first", "second", "third"]} + * minLabels={({ datum }) => Math.round(datum.min)} + */ + minLabels?: VictoryBoxPlotLabelType; + /** + * The name prop is used to reference a component instance when defining shared events. + */ + name?: string; + /** + * Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts. + * + * Note: It will not typically be necessary to set an origin prop manually + * + * @propType { x: number, y: number } + */ + origin?: OriginType; + /** + * The padding props specifies the amount of padding in number of pixels between + * the edge of the chart and any rendered child components. This prop can be given + * as a number or as an object with padding specified for top, bottom, left + * and right. + * + * @propType number | { top: number, bottom: number, left: number, right: number } + */ + padding?: PaddingProps; + /** + * Victory components can pass a boolean polar prop to specify whether a label is part of a polar chart. + * + * Note: This prop should not be set manually. + * + * @private + * @hide + */ + polar?: boolean; + /** + * Use the q1 data accessor prop to define the q1 value of a box plot. + * + * @propType string | array[string] | function + * @example Specify which property in an array of data objects should be used as the q1 value + * + * q1="q1_value" + * + * @example Use a function to translate each element in a data array into a q1 value + * + * q1={() => 10} + * + * @example Specify which property in an array of nested data objects should be used as a q1 value + * + * q1="bonds.q1", q1={["bonds", "q1"]} + */ + q1?: StringOrNumberOrCallback | string[]; + /** + * The q1Component prop takes a component instance which will be responsible for rendering an element to represent the + * q1 value of the box plot. The new element created from the passed q1Component will be provided with the following + * props calculated by ChartBoxPlot: datum, index, scale, style, events, x, y, width and height Any of these props + * may be overridden by passing in props to the supplied component, or modified or ignored within the custom component + * itself. If a q1Component is not provided, ChartBoxPlot will use its default Box component. + */ + q1Component?: React.ReactElement; + /** + * The q1LabelComponent prop takes a component instance which will be used to render the label corresponding to the q1 + * value for each box. The new element created from the passed q1LabelComponent will be supplied with the following + * props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of these + * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom + * component itself. If q1LabelComponent is omitted, a new ChartLabel will be created with props described above. + */ + q1LabelComponent?: React.ReactElement; + /** + * The q1Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an + * array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of + * each datum will be used for the label. + * + * @propType string | function | boolean + * @example + * + * q1Labels={["first", "second", "third"]} + * q1Labels={({ datum }) => Math.round(datum.q1)} + */ + q1Labels?: VictoryBoxPlotLabelType; + /** + * Use the q3 data accessor prop to define the q3 value of a box plot. + * + * @propType string | array[string] | function + * @example Specify which property in an array of data objects should be used as the q3 value + * + * q3="q3_value" + * + * @example Use a function to translate each element in a data array into a q3 value + * + * q3={() => 10} + * + * @example Specify which property in an array of nested data objects should be used as a q3 value + * + * q3="bonds.q3", q3={["bonds", "q3"]} + */ + q3?: StringOrNumberOrCallback | string[]; + /** + * The q3Component prop takes a component instance which will be responsible for rendering an element to represent the + * q3 value of the box plot. The new element created from the passed q3Component will be provided with the following + * props calculated by ChartBoxPlot: datum, index, scale, style, events, x, y, width and height Any of these props + * may be overridden by passing in props to the supplied component, or modified or ignored within the custom component + * itself. If a q3Component is not provided, ChartBoxPlot will use its default Box component. + */ + q3Component?: React.ReactElement; + /** + * The q3LabelComponent prop takes a component instance which will be used to render the label corresponding to the q3 + * value for each box. The new element created from the passed q3LabelComponent will be supplied with the following + * props: x, y, datum, index, scale, verticalAnchor, textAnchor, angle, transform, style and events. Any of these + * props may be overridden by passing in props to the supplied component, or modified or ignored within the custom + * component itself. If q3LabelComponent is omitted, a new ChartLabel will be created with props described above. + */ + q3LabelComponent?: React.ReactElement; + /** + * The q3Labels prop defines the labels that will appear above each point. This prop should be given as a boolean, an + * array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of + * each datum will be used for the label. + * + * @propType string | function | boolean + * @example + * + * q3Labels={["first", "second", "third"]} + * q3Labels={({ datum }) => Math.round(datum.q3)} + */ + q3Labels?: VictoryBoxPlotLabelType; + /** + * The range prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this + * corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this + * corresponds to a range of angles and radii. When this value is not given it will be calculated from the width, + * height, and padding, or from the startAngle and endAngle in the case of polar charts. All components in a given + * chart must share the same range, so setting this prop on children nested within Chart or + * ChartGroup will have no effect. This prop is usually not set manually. + * + * @propType number[] | { x: number[], y: number[] } + * @example [low, high] | { x: [low, high], y: [low, high] } + * + * Cartesian: range={{ x: [50, 250], y: [50, 250] }} + * Polar: range={{ x: [0, 360], y: [0, 250] }} + */ + range?: RangePropType; + /** + * The samples prop specifies how many individual points to plot when plotting + * y as a function of x. Samples is ignored if x props are provided instead. + */ + samples?: number; + /** + * The scale prop determines which scales your chart should use. This prop can be + * given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), + * as a d3 scale function, or as an object with scales specified for x and y + * + * @propType string | { x: string, y: string } + * @example d3Scale.time(), {x: "linear", y: "log"} + */ + scale?: + | ScalePropType + | D3Scale + | { + x?: ScalePropType | D3Scale; + y?: ScalePropType | D3Scale; + }; + /** + * The sharedEvents prop is used internally to coordinate events between components. + * + * Note: This prop should not be set manually. + * + * @private + * @hide + */ + sharedEvents?: { events: any[]; getEventState: Function }; + /** + * By default domainPadding is coerced to existing quadrants. This means that if a given domain only includes positive + * values, no amount of padding applied by domainPadding will result in a domain with negative values. This is the + * desired behavior in most cases. For users that need to apply padding without regard to quadrant, the + * singleQuadrantDomainPadding prop may be used. This prop may be given as a boolean or an object with boolean values + * specified for "x" and/or "y". When this prop is false (or false for a given dimension), padding will be applied + * without regard to quadrant. If this prop is not specified, domainPadding will be coerced to existing quadrants. + * + * Note: The x value supplied to the singleQuadrantDomainPadding prop refers to the independent variable, and the y + * value refers to the dependent variable. This may cause confusion in horizontal charts, as the independent variable + * will corresponds to the y axis. + * + * @example + * + * singleQuadrantDomainPadding={false} + * singleQuadrantDomainPadding={{ x: false }} + */ + singleQuadrantDomainPadding?: boolean | { x?: boolean; y?: boolean }; + /** + * Use the sortKey prop to indicate how data should be sorted. This prop + * is given directly to the lodash sortBy function to be executed on the + * final dataset. + * + * @propType number | string | Function | string[] + */ + sortKey?: DataGetterPropType; + /** + * The sortOrder prop specifies whether sorted data should be returned in 'ascending' or 'descending' order. + * + * @propType string + */ + sortOrder?: SortOrderPropType; + /** + * The standalone prop determines whether the component will render a standalone svg + * or a tag that will be included in an external svg. Set standalone to false to + * compose ChartBoxPlot with other components within an enclosing tag. + */ + standalone?: boolean; + /** + * The style prop specifies styles for your ChartBoxPlot. Any valid inline style properties + * will be applied. Height, width, and padding should be specified via the height, + * width, and padding props, as they are used to calculate the alignment of + * components within chart. + * + * @propType { parent: object, data: object, labels: object } + * @example {data: {fill: "red"}, labels: {fontSize: 12}} + */ + style?: VictoryStyleInterface; + /** + * The theme prop takes a style object with nested data, labels, and parent objects. + * You can create this object yourself, or you can use a theme provided by + * When using ChartBoxPlot as a solo component, implement the theme directly on + * ChartBoxPlot. If you are wrapping ChartBoxPlot in ChartChart or ChartGroup, + * please call the theme on the outermost wrapper component instead. + * + * @propType object + */ + theme?: ChartThemeDefinition; + /** + * Specifies the theme color. Valid values are 'blue', 'green', 'multi', etc. + * + * Note: Not compatible with theme prop + * + * @example themeColor={ChartThemeColor.blue} + */ + themeColor?: string; + /** + * The whiskerWidth prop specifies how wide each whisker crosshair should be. If the whiskerWidth prop is not set, the + * width of the whisker crosshair will match the width of the box. + */ + whiskerWidth?: number; + /** + * The width props specifies the width of the svg viewBox of the chart container + * This value should be given as a number of pixels + */ + width?: number; + /** + * The x prop specifies how to access the X value of each data point. + * If given as a function, it will be run on each data point, and returned value will be used. + * If given as an integer, it will be used as an array index for array-type data points. + * If given as a string, it will be used as a property key for object-type data points. + * If given as an array of strings, or a string containing dots or brackets, + * it will be used as a nested object property path (for details see Lodash docs for _.get). + * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). + * + * @propType number | string | Function | string[] + * @example 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d) + */ + x?: DataGetterPropType; + /** + * The y prop specifies how to access the Y value of each data point. + * If given as a function, it will be run on each data point, and returned value will be used. + * If given as an integer, it will be used as an array index for array-type data points. + * If given as a string, it will be used as a property key for object-type data points. + * If given as an array of strings, or a string containing dots or brackets, + * it will be used as a nested object property path (for details see Lodash docs for _.get). + * If `null` or `undefined`, the data value will be used as is (identity function/pass-through). + * + * @propType number | string | Function | string[] + * @example 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d) + */ + y?: DataGetterPropType; + /** + * Use y0 data accessor prop to determine how the component defines the baseline y0 data. + * This prop is useful for defining custom baselines for components like ChartBoxPlot. + * This prop may be given in a variety of formats. + * + * @propType number | string | Function | string[] + * @example 'last_quarter_profit', () => 10, 1, 'employees.salary', ["employees", "salary"] + */ + y0?: DataGetterPropType; +} + +export const ChartBoxPlot: React.FunctionComponent = ({ + containerComponent = , + themeColor, + + // destructure last + theme = getTheme(themeColor), + ...rest +}: ChartBoxPlotProps) => { + // Clone so users can override container props + const container = React.cloneElement(containerComponent, { + theme, + ...containerComponent.props + }); + + // Note: containerComponent is required for theme + return ; +}; +ChartBoxPlot.displayName = 'ChartBoxPlot'; + +// Note: VictoryBar.getDomain & VictoryBar.role must be hoisted +hoistNonReactStatics(ChartBoxPlot, VictoryBoxPlot); diff --git a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap new file mode 100644 index 00000000000..b3fb8e6b047 --- /dev/null +++ b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap @@ -0,0 +1,996 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBar 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartBar 2`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2015 + + + + + + + + 2016 + + + + + + + + 2017 + + + + + + + + 2018 + + + + + + + + + + + 2 + + + + + + + + 4 + + + + + + + + 6 + + + + + + + + 8 + + + + + + + + 10 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md new file mode 100644 index 00000000000..7c5db00e338 --- /dev/null +++ b/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md @@ -0,0 +1,351 @@ +--- +id: Box plot chart +section: charts +propComponents: [ + 'Chart', + 'ChartAxis', + 'ChartBoxPlot', + 'ChartCursorFlyout', + 'ChartCursorTooltip', + 'ChartVoronoiContainer' +] +hideDarkMode: true +beta: true +--- + +import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { VictoryZoomContainer } from 'victory-zoom-container'; +import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; + +## Introduction +Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! + +PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. + + +## Examples +### Basic with right aligned legend +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts'; + +
+ + + + + +
+``` + +### Labels with bottom aligned legend + +This demonstrates how to display labels. + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts'; + +
+ + + + + +
+``` + +### Embedded legend + +This demonstrates how to embed a legend within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor. + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts'; +import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; + +class EmbeddedLegend extends React.Component { + render() { + // Note: Container order is important + const CursorVoronoiContainer = createContainer("voronoi", "cursor"); + const legendData = [ + { + childName: 'limit', + name: 'Limit', + symbol: { fill: chart_color_orange_300.var, type: 'threshold' } + }, + { childName: 'cats', name: 'Cats' }, + // Force extra space below for line wrapping + { + childName: 'cats', + name: '', + symbol: { fill: 'none' } + }, + { + childName: 'cats', + name: '', + symbol: { fill: 'none' } + }, + ]; + const labelFormatter = (datum) => { + // With box plot data, datum.y will also be an array + if (datum && (datum._min || datum._median || datum._max || datum._q1 || datum._q3)) { + return `Min: ${datum._min}, Max: ${datum._max}\nMedian: ${datum._median}\nQ1: ${datum._q1}, Q3: ${datum._q3}`; + } + const yVal = Array.isArray(datum.y) ? datum.y[0] : datum.y; + return yVal !== null ? yVal : 'no data'; + } + return ( +
+ labelFormatter(datum)} + labelComponent={ datum.x} />} + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + domain={{y: [0, 13]}} + domainPadding={{ x: [30, 25] }} + legendData={legendData} + legendPosition="bottom" + height={350} + name="chart5" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50 + }} + themeColor={ChartThemeColor.green} + width={600} + > + + + + + +
+ ); + } +} +``` + +### Embedded HTML + +This demonstrates how to embed HTML within a tooltip. Combining cursor and voronoi containers is required to display tooltips with a vertical cursor. + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts'; + +class EmbeddedHtml extends React.Component { + constructor(props) { + super(props); + this.baseStyles = { + color: '#f0f0f0', + fontFamily: 'RedHatText, Overpass, overpass, helvetica, arial, sans-serif', + fontSize: '14px' + }; + this.leftColumn = { + paddingLeft: '10px', + width: '50%' + } + this.rightColumn = { + paddingRight: '20px', + textAlign: 'right', + width: '50%' + } + } + + render() { + // Note: Container order is important + const CursorVoronoiContainer = createContainer("voronoi", "cursor"); + const legendData = [{ name: 'Cats' }]; + + // Custom HTML component to create a legend layout + const HtmlLegendContent = ({datum, text, title, x, y, ...rest}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{title(datum)}
Max{datum._max}
Median{datum._median}
Min{datum._min}
Q1{datum._q1}
Q3{datum._q3}
+ + + ); + + return ( +
+ `${datum.y}`} + labelComponent={ + datum.x} />} + /> + } + mouseFollowTooltips + voronoiDimension="x" + voronoiPadding={50} + /> + } + domain={{y: [0, 12]}} + domainPadding={{ x: [30, 25] }} + legendData={legendData} + legendPosition="bottom" + height={300} + name="chart4" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 50, + top: 50, + }} + maxDomain={{y: 9}} + themeColor={ChartThemeColor.orange} + width={600} + > + + + + +
+ ); + } +} +``` + +## Documentation +### Tips +- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) +- For single data points or zero values, you may want to set the `domain` prop +- The `theme` and `themeColor` props should be applied at the most top level component + +### Note +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here: + +- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) +- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis) +- For `ChartBoxPlot` props, see [VictoryBoxPlot](https://formidable.com/open-source/victory/docs/victory-box-plot) +- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container) diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx index c39a26daf91..c7986881558 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; +import { ChartAxis } from '../ChartAxis/ChartAxis'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartBullet } from './ChartBullet'; -import { ChartAxis } from '../ChartAxis'; -import { ChartLabel } from '../ChartLabel'; Object.values([true, false]).forEach(() => { test('ChartBulletQualitativeRange', () => { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx index 743d2fb91c6..ca5cc77c9e4 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx @@ -10,9 +10,14 @@ import { getPrimarySegmentedMeasureWidth, getQualitativeRangeBarWidth } from './utils/chart-bullet-size'; -import { getBulletDomain } from './utils/chart-bullet-domain'; -import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme'; -import { ChartAxis } from '../ChartAxis'; +import { ChartAxis } from '../ChartAxis/ChartAxis'; +import { ChartBulletTitle } from './ChartBulletTitle'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; +import { ChartBulletStyles } from '../ChartTheme/ChartStyles'; +import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend'; import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure'; import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure'; import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure'; @@ -20,13 +25,12 @@ import { ChartBulletGroupTitle } from './ChartBulletGroupTitle'; import { ChartBulletPrimaryDotMeasure } from './ChartBulletPrimaryDotMeasure'; import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmentedMeasure'; import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange'; -import { ChartBulletTitle } from './ChartBulletTitle'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLegend, ChartLegendOrientation, ChartLegendPosition } from '../ChartLegend'; -import { ChartBulletStyles, ChartThemeDefinition } from '../ChartTheme'; -import { ChartTooltip } from '../ChartTooltip'; -import { getComputedLegend, getLegendItemsExtraHeight, getPaddingForSide } from "../ChartUtils"; -import { useEffect } from "react"; +import { getBulletDomain } from './utils/chart-bullet-domain'; +import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { useEffect } from 'react'; +import { ChartPoint } from '../ChartPoint/ChartPoint'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; /** * ChartBullet renders a dataset as a bullet chart. @@ -250,6 +254,10 @@ export interface ChartBulletProps { * cases, the legend may not be visible until enough padding is applied. */ legendPosition?: 'bottom' | 'bottom-left' | 'right'; + /** + * @beta Text direction of the legend labels. + */ + legendDirection?: 'ltr' | 'rtl'; /** * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain @@ -506,7 +514,8 @@ export const ChartBullet: React.FunctionComponent = ({ legendAllowWrap = false, legendComponent = , legendItemsPerRow, - legendPosition = 'bottom' as ChartLegendPosition, + legendPosition = 'bottom', + legendDirection = 'ltr', maxDomain, minDomain, name, @@ -560,7 +569,7 @@ export const ChartBullet: React.FunctionComponent = ({ qualitativeRangeComponent, qualitativeRangeData }), - legendOrientation = theme.legend.orientation as ChartLegendOrientation, + legendOrientation = theme.legend.orientation as any, height = horizontal ? theme.chart.height : theme.chart.width, width = horizontal ? theme.chart.width : theme.chart.height, bulletSize = theme.chart.height @@ -585,6 +594,7 @@ export const ChartBullet: React.FunctionComponent = ({ standalone: false, subTitle: groupSubTitle, title: groupTitle, + themeColor, width, ...groupTitleComponent.props }); @@ -599,6 +609,7 @@ export const ChartBullet: React.FunctionComponent = ({ standalone: false, subTitle, theme, + themeColor, title, titlePosition, width, @@ -608,7 +619,12 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative error measure const comparativeErrorMeasure = React.cloneElement(comparativeErrorMeasureComponent, { allowTooltip, - barWidth: getComparativeMeasureErrorWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureErrorWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), constrainToVisibleArea, data: comparativeErrorMeasureData, domain, @@ -618,6 +634,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: comparativeErrorMeasureDataY, ...comparativeErrorMeasureComponent.props @@ -626,7 +643,12 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative warning measure const comparativeWarningMeasure = React.cloneElement(comparativeWarningMeasureComponent, { allowTooltip, - barWidth: getComparativeMeasureWarningWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureWarningWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), constrainToVisibleArea, data: comparativeWarningMeasureData, domain, @@ -636,6 +658,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: comparativeWarningMeasureDataY, ...comparativeWarningMeasureComponent.props @@ -643,17 +666,32 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative zero measure const comparativeZeroMeasure = React.cloneElement(comparativeZeroMeasureComponent, { - barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: [{ y: 0 }], domain, height: chartSize.height, horizontal, padding, standalone: false, + themeColor, width: chartSize.width, ...comparativeZeroMeasureComponent.props }); + let legendXOffset = 0; + if (legendDirection === 'rtl') { + legendXOffset = getLegendMaxTextWidth( + [ + ...(primaryDotMeasureLegendData ? primaryDotMeasureLegendData : []), + ...(primarySegmentedMeasureLegendData ? primarySegmentedMeasureLegendData : []), + ...(comparativeWarningMeasureLegendData ? comparativeWarningMeasureLegendData : []), + ...(comparativeErrorMeasureLegendData ? comparativeErrorMeasureLegendData : []), + ...(qualitativeRangeLegendData ? qualitativeRangeLegendData : []) + ], + theme + ); + } + // Legend const legend = React.cloneElement(legendComponent, { data: [ @@ -668,6 +706,24 @@ export const ChartBullet: React.FunctionComponent = ({ orientation: legendOrientation, position: legendPosition, theme, + themeColor, + ...(legendDirection === 'rtl' && { + dataComponent: legendComponent.props.dataComponent ? ( + React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) + ) : ( + + ) + }), + ...(legendDirection === 'rtl' && { + labelComponent: legendComponent.props.labelComponent ? ( + React.cloneElement(legendComponent.props.labelComponent, { + direction: 'rtl', + dx: legendXOffset - 30 + }) + ) : ( + + ) + }), ...legendComponent.props }); @@ -683,7 +739,7 @@ export const ChartBullet: React.FunctionComponent = ({ labelComponent: allowTooltip ? : undefined, labels, padding, - size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, width: chartSize.width }), + size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), standalone: false, themeColor, width: chartSize.width, @@ -695,7 +751,12 @@ export const ChartBullet: React.FunctionComponent = ({ const primarySegmentedMeasure = React.cloneElement(primarySegmentedMeasureComponent, { allowTooltip, constrainToVisibleArea, - barWidth: getPrimarySegmentedMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getPrimarySegmentedMeasureWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), data: primarySegmentedMeasureData, domain, height: chartSize.height, @@ -715,7 +776,7 @@ export const ChartBullet: React.FunctionComponent = ({ const qualitativeRange = React.cloneElement(qualitativeRangeComponent, { allowTooltip, constrainToVisibleArea, - barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: qualitativeRangeData, domain, height: chartSize.height, @@ -725,6 +786,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: qualitativeRangeDataY, y0: qualitativeRangeDataY0, @@ -759,7 +821,7 @@ export const ChartBullet: React.FunctionComponent = ({ let dy = 0; // Adjust for padding - if (legendPosition === ChartLegendPosition.bottom) { + if (legendPosition === 'bottom') { if (horizontal) { dy = defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25; } else if (title) { @@ -767,7 +829,7 @@ export const ChartBullet: React.FunctionComponent = ({ } else { dy = -defaultPadding.bottom; } - } else if (legendPosition === ChartLegendPosition.bottomLeft) { + } else if (legendPosition === 'bottom-left') { if (horizontal) { dy = defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - defaultPadding.bottom) - 25; } else if (title) { @@ -831,6 +893,7 @@ export const ChartBullet: React.FunctionComponent = ({ offsetY: horizontal ? 80 - defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - 25) : 0, padding, standalone: false, + themeColor, tickCount: ChartBulletStyles.axisTickCount, tickValues: getTickValues((domain as any).y[0], (domain as any).y[1]), width: chartSize.width, diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx index 557dc59aff7..9e90749308b 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import hoistNonReactStatics from 'hoist-non-react-statics'; import { DataGetterPropType, DomainPropType, NumberOrCallback, PaddingProps } from 'victory-core'; import { VictoryBar } from 'victory-bar'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getBulletComparativeErrorMeasureTheme } from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getBulletComparativeErrorMeasureTheme } from '../ChartUtils/chart-theme-types'; import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure'; /** @@ -201,6 +201,7 @@ export const ChartBulletComparativeErrorMeasure: React.FunctionComponent = ({ +export const ChartBulletComparativeWarningMeasure: React.FunctionComponent< + ChartBulletComparativeWarningMeasureProps +> = ({ allowTooltip = true, ariaDesc, ariaTitle, @@ -201,6 +203,7 @@ export const ChartBulletComparativeWarningMeasure: React.FunctionComponent { test('ChartBulletGroupTitle', () => { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx index 416cf59b176..82d622c5b7b 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletGroupTitle.tsx @@ -1,15 +1,13 @@ import * as React from 'react'; import { PaddingProps, Line, StringOrNumberOrCallback } from 'victory-core'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLabel } from '../ChartLabel'; -import { ChartBulletStyles, ChartThemeDefinition } from '../ChartTheme'; -import { - getBulletGroupTitleTheme, - getLabelTextSize, - getBulletLabelX, - getBulletLabelY, - getPaddingForSide -} from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartBulletStyles } from '../ChartTheme/ChartStyles'; +import { getLabelTextSize, getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getBulletGroupTitleTheme } from '../ChartUtils/chart-theme-types'; +import { getComponentTheme } from '../ChartUtils/chart-theme'; /** * ChartBulletGroupTitle renders a group title. @@ -168,6 +166,7 @@ export const ChartBulletGroupTitle: React.FunctionComponent { + const componentTheme = getComponentTheme(themeColor); const titleProps = titleComponent ? titleComponent.props : {}; const showBoth = title && subTitle; return React.cloneElement(titleComponent, { @@ -186,7 +185,8 @@ export const ChartBulletGroupTitle: React.FunctionComponent { test('ChartBulletTitle', () => { diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx index bb6ff09eb31..d2d6f595a68 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx +++ b/packages/react-charts/src/components/ChartBullet/ChartBulletTitle.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; import { PaddingProps, StringOrNumberOrCallback } from 'victory-core'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLabel } from '../ChartLabel'; -import { ChartLegendPosition } from '../ChartLegend'; -import { ChartBulletStyles, ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; -import { getBulletTheme, getBulletLabelX, getBulletLabelY, getPaddingForSide } from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartCommonStyles, ChartBulletStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getBulletLabelX, getBulletLabelY } from '../ChartUtils/chart-label'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getBulletTheme } from '../ChartUtils/chart-theme-types'; +import { getComponentTheme } from '../ChartUtils/chart-theme'; /** * ChartBulletTitle renders the bullet chart title. @@ -128,7 +131,7 @@ export const ChartBulletTitle: React.FunctionComponent = ariaTitle, capHeight = 1.1, horizontal = true, - legendPosition = 'bottom' as ChartLegendPosition, + legendPosition = 'bottom', name, padding, standalone = true, @@ -157,6 +160,7 @@ export const ChartBulletTitle: React.FunctionComponent = // Returns title const getTitle = () => { + const componentTheme = getComponentTheme(themeColor); const showBoth = title && subTitle; let labelPosition: 'bottom' | 'left' | 'top-left' = horizontal ? 'left' : 'bottom'; @@ -213,7 +217,8 @@ export const ChartBulletTitle: React.FunctionComponent = dy, labelPosition }), - ...titleComponent.props + ...titleComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap index c0c7ba665a8..72f9baa2753 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartBulletQualitativeRange 1`] = `
@@ -19,7 +19,7 @@ exports[`ChartBulletQualitativeRange 1`] = ` @@ -72,11 +72,11 @@ exports[`ChartBulletQualitativeRange 1`] = `
@@ -88,13 +88,13 @@ exports[`ChartBulletQualitativeRange 1`] = ` exports[`ChartBulletQualitativeRange 2`] = `
@@ -104,7 +104,7 @@ exports[`ChartBulletQualitativeRange 2`] = ` @@ -157,11 +157,11 @@ exports[`ChartBulletQualitativeRange 2`] = `
@@ -173,15 +173,15 @@ exports[`ChartBulletQualitativeRange 2`] = ` exports[`renders component data 1`] = `
@@ -201,7 +201,7 @@ exports[`renders component data 1`] = ` @@ -245,7 +245,7 @@ exports[`renders component data 1`] = ` @@ -276,7 +276,7 @@ exports[`renders component data 1`] = ` @@ -307,7 +307,7 @@ exports[`renders component data 1`] = ` @@ -338,7 +338,7 @@ exports[`renders component data 1`] = ` @@ -380,7 +380,7 @@ A 0 0 0 0 1, 312.5, 85 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-bullet--qualitative-range--ColorScale--200, #d2d2d2); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-bullet--qualitative-range--ColorScale--200, #d2d2d2); stroke: var(--pf-v5-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" /> @@ -454,11 +454,11 @@ A 0 0 0 0 1, 358, 85
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap index 0e67106da82..7549728272f 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletComparativeErrorMeasure 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletComparativeErrorMeasure 1`] = ` exports[`ChartBulletComparativeErrorMeasure 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletComparativeErrorMeasure 2`] = ` exports[`renders component data 1`] = `
@@ -83,16 +83,16 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-bullet--comparative-measure--error--Fill--Color, #c9190b); stroke: var(--pf-chart-bullet--comparative-measure--error--stroke--Color, #c9190b); padding: 8px; stroke-width: 2;" + style="fill: var(--pf-v5-chart-bullet--comparative-measure--error--Fill--Color, #c9190b); stroke: var(--pf-v5-chart-bullet--comparative-measure--error--stroke--Color, #c9190b); padding: 8px; stroke-width: 2;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap index 21f5fb554af..31b46dfb26b 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletComparativeMeasure 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletComparativeMeasure 1`] = ` exports[`ChartBulletComparativeMeasure 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletComparativeMeasure 2`] = ` exports[`renders component data 1`] = `
@@ -83,16 +83,16 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-bullet--comparative-measure--Fill--Color, #4f5255); stroke: var(--pf-chart-bullet--comparative-measure--stroke--Color, #4f5255); padding: 8px; stroke-width: 1;" + style="fill: var(--pf-v5-chart-bullet--comparative-measure--Fill--Color, #4f5255); stroke: var(--pf-v5-chart-bullet--comparative-measure--stroke--Color, #4f5255); padding: 8px; stroke-width: 1;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap index 0b0d2180ee4..26276d0dd33 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletComparativeZeroMeasure 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletComparativeZeroMeasure 1`] = ` exports[`ChartBulletComparativeZeroMeasure 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletComparativeZeroMeasure 2`] = ` exports[`renders component data 1`] = `
@@ -83,16 +83,16 @@ A 0 0 0 0 1, 225, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-bullet--comparative-measure--warning--Fill--Color, #ec7a08); stroke: var(--pf-chart-bullet--comparative-measure--warning--stroke--Color, #ec7a08); padding: 8px; stroke-width: 2;" + style="fill: var(--pf-v5-chart-bullet--comparative-measure--warning--Fill--Color, #ec7a08); stroke: var(--pf-v5-chart-bullet--comparative-measure--warning--stroke--Color, #ec7a08); padding: 8px; stroke-width: 2;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap index a5a7adf8f20..2537c1000e6 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletGroupTitle 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletGroupTitle 1`] = ` exports[`ChartBulletGroupTitle 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletGroupTitle 2`] = ` exports[`renders component data 1`] = `
@@ -77,7 +77,7 @@ exports[`renders component data 1`] = ` @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` @@ -94,20 +94,20 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap index b9938b3a710..85966a207a2 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletPrimaryDotMeasure 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletPrimaryDotMeasure 1`] = ` exports[`ChartBulletPrimaryDotMeasure 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletPrimaryDotMeasure 2`] = ` exports[`renders component data 1`] = `
@@ -75,7 +75,7 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -97,16 +97,16 @@ exports[`renders component data 1`] = ` a 6, 6 0 1,0 -12,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap index 2ba34bac80c..160021ab972 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletPrimarySegmentedMeasure 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletPrimarySegmentedMeasure 1`] = ` exports[`ChartBulletPrimarySegmentedMeasure 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletPrimarySegmentedMeasure 2`] = ` exports[`renders component data 1`] = `
@@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 94.3 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--300, #002f5d); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--300, #002f5d); stroke: var(--pf-v5-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap index a1f4fa655a5..78fe7d2f310 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletQualitativeRange 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletQualitativeRange 1`] = ` exports[`ChartBulletQualitativeRange 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletQualitativeRange 2`] = ` exports[`renders component data 1`] = `
@@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 104.8 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-bullet--qualitative-range--ColorScale--300, #b8bbbe); stroke: var(--pf-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" + style="fill: var(--pf-v5-chart-bullet--qualitative-range--ColorScale--300, #b8bbbe); stroke: var(--pf-v5-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;" />
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap index 180c4f83e7f..f1de7ba34cc 100644 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartBulletTitle 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartBulletTitle 1`] = ` exports[`ChartBulletTitle 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartBulletTitle 2`] = ` exports[`renders component data 1`] = `
@@ -77,7 +77,7 @@ exports[`renders component data 1`] = ` @@ -86,7 +86,7 @@ exports[`renders component data 1`] = ` @@ -95,11 +95,11 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md index cbba0f0628a..9f0f19c718b 100644 --- a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md @@ -17,10 +17,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a bullet chart using a Katacoda tutorial starting with a simple chart, adding qualitative ranges, primary comparative measures, a comparative warning measure, tooltips, labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/bullet-chart) - ## Examples ### Basic ```js @@ -197,7 +193,7 @@ This is a green bullet chart with error measure and custom axis ticks with 3 leg ```js import React from 'react'; -import { ChartAxis, ChartBullet } from '@patternfly/react-charts'; +import { ChartAxis, ChartBullet, ChartThemeColor } from '@patternfly/react-charts';
; @@ -16,7 +16,10 @@ interface ChartBulletDomainInterface { qualitativeRangeData?: any[]; } -// Returns the bullet chart's min and max domain for comparative / primary measures and qualitative range data +/** + * Returns the bullet chart's min and max domain for comparative / primary measures and qualitative range data + * @private + */ export const getBulletDomain = ({ comparativeErrorMeasureComponent, comparativeErrorMeasureData, diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts index d6b008023fb..65a14cbd217 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-size.ts @@ -1,5 +1,5 @@ -import { ChartThemeDefinition } from '../../ChartTheme'; -import { ChartBulletStyles } from '../../ChartTheme'; +import { ChartThemeDefinition } from '../../ChartTheme/ChartTheme'; +import { ChartBulletStyles } from '../../ChartTheme/ChartStyles'; import { getBulletComparativeErrorMeasureTheme, getBulletComparativeMeasureTheme, @@ -7,7 +7,7 @@ import { getBulletPrimaryDotMeasureTheme, getBulletPrimarySegmentedMeasureTheme, getBulletQualitativeRangeTheme -} from '../../ChartUtils'; +} from '../../ChartUtils/chart-theme-types'; interface ChartBulletScaleInterface { defaultSize: number; // The default chart size from the theme @@ -18,6 +18,10 @@ interface ChartBulletScaleInterface { width: number; // The chart width -- not SVG width } +/** + * Scale dimensions + * @private + */ const scaleDimensions = ({ defaultSize, height, @@ -36,11 +40,17 @@ const scaleDimensions = ({ return value - (defaultSize - width) * scale; }; -// Scale bar width per the given size properties -export const scaleBarWidth = (props: ChartBulletScaleInterface) => Math.max(scaleDimensions(props), 0); - -// Scale size per the given size properties -export const scaleSize = ({ value, ...rest }: ChartBulletScaleInterface) => +/** + * Scale bar width per the given size properties + * @private + */ +const scaleBarWidth = (props: ChartBulletScaleInterface) => Math.max(scaleDimensions(props), 0); + +/** + * Scale size per the given size properties + * @private + */ +const scaleSize = ({ value, ...rest }: ChartBulletScaleInterface) => Math.round( scaleDimensions({ scale: 1 / value, @@ -57,6 +67,10 @@ interface ChartBulletSizeInterface { width: number; // The chart width -- not SVG width } +/** + * Scale size per the given size properties + * @private + */ export const getComparativeMeasureErrorWidth = ({ height, horizontal, @@ -74,6 +88,10 @@ export const getComparativeMeasureErrorWidth = ({ width }); +/** + * Returns comparative measure width + * @private + */ export const getComparativeMeasureWidth = ({ height, horizontal, @@ -91,6 +109,10 @@ export const getComparativeMeasureWidth = ({ width }); +/** + * Returns comparative measure warning width + * @private + */ export const getComparativeMeasureWarningWidth = ({ height, horizontal, @@ -108,6 +130,10 @@ export const getComparativeMeasureWarningWidth = ({ width }); +/** + * Returns primary dot measure size + * @private + */ export const getPrimaryDotMeasureSize = ({ height, horizontal, @@ -125,6 +151,10 @@ export const getPrimaryDotMeasureSize = ({ width }); +/** + * Returns primary segmented measure width + * @private + */ export const getPrimarySegmentedMeasureWidth = ({ height, horizontal, @@ -143,6 +173,10 @@ export const getPrimarySegmentedMeasureWidth = ({ width }); +/** + * Returns qualitative range bar width + * @private + */ export const getQualitativeRangeBarWidth = ({ height, horizontal, diff --git a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts index a8091881103..2cfb13f9950 100644 --- a/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts +++ b/packages/react-charts/src/components/ChartBullet/utils/chart-bullet-theme.ts @@ -5,8 +5,10 @@ import { getPrimarySegmentedMeasureData, getQualitativeRangeData } from './chart-bullet-data'; -import { ChartThemeDefinition } from '../../ChartTheme'; -import { getBulletTheme } from '../../ChartUtils'; +import { ChartThemeDefinition } from '../../ChartTheme/ChartTheme'; +import { getBulletTheme } from '../../ChartUtils/chart-theme-types'; +import { ChartThemeColor } from '../../ChartTheme/ChartThemeColor'; +import { SkeletonColorTheme } from '../../ChartTheme/themes/colors/skeleton-theme'; interface ChartBulletThemeInterface { comparativeErrorMeasureData?: any[]; @@ -23,6 +25,10 @@ interface ChartBulletThemeInterface { themeColor?: string; } +/** + * Returns legend color scale + * @private + */ const getLegendColorScale = (computedData: any, legendData: any) => { const colorScale: string[] = []; legendData.forEach((data: any, index: number) => { @@ -35,6 +41,10 @@ const getLegendColorScale = (computedData: any, legendData: any) => { return colorScale; }; +/** + * Returns color scale + * @private + */ export const getColorScale = ({ comparativeErrorMeasureData, comparativeErrorMeasureLegendData, @@ -91,7 +101,10 @@ export const getColorScale = ({ return colorScale; }; -// Get bullet chart theme with legend color scale +/** + * Returns bullet chart theme with legend color scale + * @private + */ export const getBulletThemeWithLegendColorScale = ({ comparativeErrorMeasureData, comparativeErrorMeasureLegendData, @@ -123,5 +136,8 @@ export const getBulletThemeWithLegendColorScale = ({ const theme = getBulletTheme(themeColor); theme.legend.colorScale = [...colorScale]; + if (themeColor === ChartThemeColor.skeleton) { + theme.legend.colorScale = SkeletonColorTheme.legend.colorScale; + } return theme; }; diff --git a/packages/react-charts/src/components/ChartBullet/utils/index.ts b/packages/react-charts/src/components/ChartBullet/utils/index.ts deleted file mode 100644 index 2faa24d3548..00000000000 --- a/packages/react-charts/src/components/ChartBullet/utils/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './chart-bullet-data'; -export * from './chart-bullet-domain'; -export * from './chart-bullet-size'; -export * from './chart-bullet-theme'; diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx index 4fbca6ca019..6cf8caa96ac 100644 --- a/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx +++ b/packages/react-charts/src/components/ChartContainer/ChartContainer.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartContainer } from './ChartContainer'; -import { ChartLegend } from '../ChartLegend'; -import { ChartLabel } from '../ChartLabel'; Object.values([true, false]).forEach(() => { test('ChartContainer', () => { diff --git a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx index c039db8f692..76cef39c763 100644 --- a/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx +++ b/packages/react-charts/src/components/ChartContainer/ChartContainer.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import hoistNonReactStatics from 'hoist-non-react-statics'; import { OriginType, VictoryContainer, VictoryContainerProps } from 'victory-core'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getClassName, getTheme } from '../ChartUtils'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; +import { getClassName } from '../ChartUtils/chart-helpers'; /** * ChartContainer provides a top-level element for other Victory based components to render within. By default, diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap index c832c95a571..27ef9e12a3a 100644 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap @@ -3,19 +3,19 @@ exports[`ChartContainer 1`] = `
@@ -26,19 +26,19 @@ exports[`ChartContainer 1`] = ` exports[`ChartContainer 2`] = `
@@ -49,44 +49,44 @@ exports[`ChartContainer 2`] = ` exports[`renders container via ChartLegend 1`] = `
@@ -110,12 +110,12 @@ exports[`renders container via ChartLegend 1`] = ` dx="0" id="test" x="30.8" - y="39.875" + y="22.97" > @@ -126,15 +126,15 @@ exports[`renders container via ChartLegend 1`] = ` direction="inherit" dx="0" id="test" - x="99.58125" - y="39.875" + x="70.39999999999999" + y="22.97" > Dogs @@ -142,10 +142,10 @@ exports[`renders container via ChartLegend 1`] = `
diff --git a/packages/react-charts/src/components/ChartContainer/index.ts b/packages/react-charts/src/components/ChartContainer/index.ts deleted file mode 100644 index d5acc9b1911..00000000000 --- a/packages/react-charts/src/components/ChartContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartContainer'; diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx index 4edeb5735a5..d85e03bda7d 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; -import { ChartGroup } from '../ChartGroup'; +import { ChartArea } from '../ChartArea/ChartArea'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartCursorContainer } from './ChartCursorContainer'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx index db15941e002..020215b07f3 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -9,9 +9,10 @@ import { VictoryCursorContainer, VictoryCursorContainerProps } from 'victory-cursor-container'; -import { ChartLabel } from '../ChartLabel'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getClassName, getTheme } from '../ChartUtils'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme'; +import { getClassName } from '../ChartUtils/chart-helpers'; /** * ChartCursorContainer adds a cursor to a chart to inspect coordinates. The cursor moves with the mouse along the @@ -22,7 +23,7 @@ import { getClassName, getTheme } from '../ChartUtils'; */ export interface ChartCursorContainerProps extends VictoryCursorContainerProps { /** - * he children prop specifies the child or children that will be rendered within the container. It will be set by + * The children prop specifies the child or children that will be rendered within the container. It will be set by * whatever Victory component is rendering the container. * * Note: This prop should not be set manually. @@ -209,10 +210,12 @@ export const ChartCursorContainer: React.FunctionComponent, // Note that Victory provides its own label component here ...rest }: ChartCursorContainerProps) => { + const componentTheme = getComponentTheme(themeColor); const chartClassName = getClassName({ className }); const chartCursorLabelComponent = React.cloneElement(cursorLabelComponent, { theme, - ...cursorLabelComponent.props + ...cursorLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Clone so users can override cursor container props @@ -236,7 +239,6 @@ export const ChartCursorContainer: React.FunctionComponent
@@ -26,19 +26,19 @@ exports[`ChartVoronoiContainer 1`] = ` exports[`ChartVoronoiContainer 2`] = `
@@ -49,13 +49,13 @@ exports[`ChartVoronoiContainer 2`] = ` exports[`renders container via ChartGroup 1`] = `
@@ -80,7 +80,7 @@ exports[`renders container via ChartGroup 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartCursorContainer/index.ts b/packages/react-charts/src/components/ChartCursorContainer/index.ts deleted file mode 100644 index 4771ace315f..00000000000 --- a/packages/react-charts/src/components/ChartCursorContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartCursorContainer'; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx index 793d60d474b..0e182fab261 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; -import { ChartGroup } from '../ChartGroup'; +import { ChartArea } from '../ChartArea/ChartArea'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartCursorFlyout } from './ChartCursorFlyout'; import { ChartCursorTooltip } from './ChartCursorTooltip'; -import { createContainer } from '../ChartUtils'; +import { createContainer } from '../ChartUtils/chart-container'; Object.values([true, false]).forEach(() => { test('ChartTooltip', () => { diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx index 1a0e58277f4..d2a135c0812 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; -import { Helpers, CommonProps, Path } from 'victory-core'; +import { Helpers, OrientationTypes, Path, VictoryCommonPrimitiveProps } from 'victory-core'; import isPlainObject from 'lodash/isPlainObject'; const getVerticalPath = (props: any) => { @@ -92,8 +91,32 @@ const evaluateProps = (props: any) => { return Object.assign({}, props, { id, style }); }; -const ChartCursorFlyout = (props: any) => { - props = evaluateProps(props); +interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps { + center?: { + x: number; + y: number; + }; + cornerRadius?: number; + datum?: object; + dx?: number; + dy?: number; + height?: number; + orientation?: OrientationTypes; + pathComponent?: React.ReactElement; + pointerLength?: number; + pointerWidth?: number; + width?: number; + x?: number; + y?: number; +} + +const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { + props = evaluateProps({ + pathComponent: , + role: 'presentation', + shapeRendering: 'auto', + ...props + }); return React.cloneElement(props.pathComponent, { ...props.events, @@ -107,27 +130,4 @@ const ChartCursorFlyout = (props: any) => { }); }; -ChartCursorFlyout.propTypes = { - ...CommonProps.primitiveProps, - center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - cornerRadius: PropTypes.number, - datum: PropTypes.object, - dx: PropTypes.number, - dy: PropTypes.number, - height: PropTypes.number, - orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - pathComponent: PropTypes.element, - pointerLength: PropTypes.number, - pointerWidth: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number -}; - -ChartCursorFlyout.defaultProps = { - pathComponent: , - role: 'presentation', - shapeRendering: 'auto' -}; - export { ChartCursorFlyout }; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx index fa0d1d0cbce..840690fa7cc 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; -import { ChartGroup } from '../ChartGroup'; +import { ChartArea } from '../ChartArea/ChartArea'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; +import { createContainer } from '../ChartUtils/chart-container'; import { ChartCursorTooltip } from './ChartCursorTooltip'; -import { createContainer } from '../ChartUtils'; Object.values([true, false]).forEach(() => { test('ChartCursorTooltip', () => { diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx index 641af2cde21..83e600ad0a5 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx @@ -9,9 +9,10 @@ import { VictoryStyleObject } from 'victory-core'; import { VictoryTooltip } from 'victory-tooltip'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { ChartTooltip, ChartTooltipProps } from '../ChartTooltip'; -import { getTheme, getCursorTooltipCenterOffset, getCursorTooltipPoniterOrientation } from '../ChartUtils'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartTooltip, ChartTooltipProps } from '../ChartTooltip/ChartTooltip'; +import { getCursorTooltipCenterOffset, getCursorTooltipPoniterOrientation } from '../ChartUtils/chart-tooltip'; +import { getTheme } from '../ChartUtils/chart-theme'; import { ChartCursorFlyout } from './ChartCursorFlyout'; /** @@ -31,7 +32,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -225,7 +226,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. @@ -286,9 +287,9 @@ export const ChartCursorTooltip: React.FunctionComponent { - let _pointerLength = Helpers.evaluateProp(pointerLength); + let _pointerLength = Helpers.evaluateProp(pointerLength, undefined); if (showPointer && _pointerLength === 0) { - _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; } return React.cloneElement(flyoutComponent, { pointerLength: _pointerLength, diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap index 3b466cb949b..9b7a03d3b4f 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -7,13 +7,13 @@ exports[`ChartTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = `
@@ -38,7 +38,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap index 3e87833a1d0..dd7741a359e 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -7,13 +7,13 @@ exports[`ChartCursorTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = `
@@ -38,7 +38,7 @@ exports[`allows tooltip via container component 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartCursorTooltip/index.ts b/packages/react-charts/src/components/ChartCursorTooltip/index.ts deleted file mode 100644 index 2bbe3324791..00000000000 --- a/packages/react-charts/src/components/ChartCursorTooltip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ChartCursorFlyout'; -export * from './ChartCursorTooltip'; diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx index e02b893a11b..348602dc41d 100644 --- a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx +++ b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx @@ -18,11 +18,15 @@ import { } from 'victory-core'; import { SliceProps, VictoryPie, VictorySliceLabelPositionType } from 'victory-pie'; import { getDonutTheme } from '../ChartUtils/chart-theme-types'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLabel } from '../ChartLabel'; -import { ChartPie, ChartPieLegendPosition, ChartPieProps } from '../ChartPie'; -import { ChartCommonStyles, ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme'; -import { getPieLabelX, getPieLabelY, getPaddingForSide } from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartPie, ChartPieProps } from '../ChartPie/ChartPie'; +import { ChartDonutStyles } from '../ChartTheme/ChartStyles'; +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getPieLabelX, getPieLabelY } from '../ChartUtils/chart-label'; +import { getComponentTheme } from '../ChartUtils/chart-theme'; interface ChartDonutSubTitleInterface { dy?: number; @@ -35,23 +39,6 @@ interface ChartDonutTitleInterface { titles?: string | string[]; } -export enum ChartDonutLabelPosition { - centroid = 'centroid', - endAngle = 'endAngle', - startAngle = 'startAngle' -} - -export enum ChartDonutSortOrder { - ascending = 'ascending', - descending = 'descending' -} - -export enum ChartDonutSubTitlePosition { - bottom = 'bottom', - center = 'center', - right = 'right' -} - /** * ChartDonut renders a dataset as a donut chart. * @@ -244,7 +231,6 @@ export interface ChartDonutProps extends ChartPieProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -360,6 +346,10 @@ export interface ChartDonutProps extends ChartPieProps { * cases, the legend may not be visible until enough padding is applied. */ legendPosition?: 'bottom' | 'right'; + /** + * @beta Text direction of the legend labels. + */ + legendDirection?: 'ltr' | 'rtl'; /** * The name prop is typically used to reference a component instance when defining shared events. However, this * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory @@ -389,7 +379,6 @@ export interface ChartDonutProps extends ChartPieProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -588,7 +577,8 @@ export const ChartDonut: React.FunctionComponent = ({ capHeight = 1.1, containerComponent = , innerRadius, - legendPosition = ChartCommonStyles.legend.position as ChartPieLegendPosition, + legendPosition = ChartCommonStyles.legend.position, + legendDirection = 'ltr', name, padAngle, padding, @@ -607,6 +597,8 @@ export const ChartDonut: React.FunctionComponent = ({ width = theme.pie.width, ...rest }: ChartDonutProps) => { + const componentTheme = getComponentTheme(themeColor); + const defaultPadding = { bottom: getPaddingForSide('bottom', padding, theme.pie.padding), left: getPaddingForSide('left', padding, theme.pie.padding), @@ -614,14 +606,14 @@ export const ChartDonut: React.FunctionComponent = ({ top: getPaddingForSide('top', padding, theme.pie.padding) }; const chartRadius = radius - ? radius + ? Helpers.evaluateProp(radius, undefined) : Helpers.getRadius({ height, width, padding: defaultPadding }); - const chartInnerRadius = innerRadius ? innerRadius : chartRadius - 9; // Todo: Add pf-core variable - const centerSubTitle = subTitle && subTitlePosition === ChartDonutSubTitlePosition.center; + const chartInnerRadius = innerRadius ? Helpers.evaluateProp(innerRadius, undefined) : chartRadius - 9; // Todo: Add pf-core variable + const centerSubTitle = subTitle && subTitlePosition === 'center'; // Returns title and subtitle const getAllTitles = () => { @@ -670,7 +662,8 @@ export const ChartDonut: React.FunctionComponent = ({ padding: defaultPadding, width }), - ...subTitleProps + ...subTitleProps, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; @@ -703,7 +696,8 @@ export const ChartDonut: React.FunctionComponent = ({ padding: defaultPadding, width }), - ...titleProps + ...titleProps, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; @@ -714,12 +708,14 @@ export const ChartDonut: React.FunctionComponent = ({ innerRadius={chartInnerRadius > 0 ? chartInnerRadius : 0} key="pf-chart-donut-pie" legendPosition={legendPosition} + legendDirection={legendDirection} name={name} padAngle={padAngle !== undefined ? padAngle : getPadAngle} padding={padding} radius={chartRadius > 0 ? chartRadius : 0} standalone={false} theme={theme} + themeColor={themeColor} width={width} {...rest} /> diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap index 503b036d1aa..a6c3e0b3488 100644 --- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartDonut 1`] = `
@@ -18,45 +18,45 @@ exports[`ChartDonut 1`] = ` d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -68,13 +68,13 @@ exports[`ChartDonut 1`] = ` exports[`ChartDonut 2`] = `
@@ -83,45 +83,45 @@ exports[`ChartDonut 2`] = ` d="M1.1182570896040502,-94.99341819874444A95,95,0,0,1,60.203957590455154,-73.48798194566699L54.41842631991018,-66.59305426892888A86,86,0,0,0,1.1182570896040516,-85.99272935011163Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -133,13 +133,13 @@ exports[`ChartDonut 2`] = ` exports[`renders component data 1`] = `
@@ -148,31 +148,31 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" />
diff --git a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md index 92b05851d3c..b8a74f4541d 100644 --- a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md +++ b/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md @@ -14,10 +14,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a donut chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/donut-chart) - ## Examples ### Basic ```js diff --git a/packages/react-charts/src/components/ChartDonut/index.ts b/packages/react-charts/src/components/ChartDonut/index.ts deleted file mode 100644 index a04745387b0..00000000000 --- a/packages/react-charts/src/components/ChartDonut/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartDonut'; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx index 1a01d413c78..0f890ca31c6 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx +++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx @@ -18,38 +18,12 @@ import { } from 'victory-core'; import { SliceProps, VictoryPie } from 'victory-pie'; import hoistNonReactStatics from 'hoist-non-react-statics'; -import { ChartContainer } from '../ChartContainer'; -import { ChartDonut, ChartDonutProps } from '../ChartDonut'; -import { ChartDonutStyles, ChartThemeDefinition } from '../ChartTheme'; -import { getDonutThresholdDynamicTheme, getDonutThresholdStaticTheme, getPaddingForSide } from '../ChartUtils'; - -export enum ChartDonutThresholdDonutOrientation { - left = 'left', - right = 'right', - top = 'top' -} - -export enum ChartDonutThresholdLabelOrientation { - horizontal = 'horizontal', - vertical = 'vertical' -} - -export enum ChartDonutThresholdLabelPosition { - centroid = 'centroid', - endAngle = 'endAngle', - startAngle = 'startAngle' -} - -export enum ChartDonutThresholdSortOrder { - ascending = 'ascending', - descending = 'descending' -} - -export enum ChartDonutThresholdSubTitlePosition { - bottom = 'bottom', - center = 'center', - right = 'right' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartDonut, ChartDonutProps } from '../ChartDonut/ChartDonut'; +import { ChartDonutStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getDonutThresholdDynamicTheme, getDonutThresholdStaticTheme } from '../ChartUtils/chart-theme-types'; /** * ChartDonutThreshold renders a dataset as a donut threshold chart. @@ -255,7 +229,6 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -333,7 +306,6 @@ export interface ChartDonutThresholdProps extends ChartDonutProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -472,7 +444,7 @@ export const ChartDonutThreshold: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx index 57f21d6f5a1..cbd540dc94b 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx +++ b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx @@ -18,37 +18,11 @@ import { VictoryStyleInterface } from 'victory-core'; import { SliceProps, VictoryPie, VictorySliceLabelPositionType } from 'victory-pie'; -import { ChartContainer } from '../ChartContainer'; -import { ChartDonut, ChartDonutProps } from '../ChartDonut'; -import { ChartCommonStyles, ChartThemeDefinition, ChartDonutUtilizationStyles } from '../ChartTheme'; -import { getDonutUtilizationTheme } from '../ChartUtils'; - -export enum ChartDonutUtilizationLabelPosition { - centroid = 'centroid', - endAngle = 'endAngle', - startAngle = 'startAngle' -} - -export enum ChartDonutUtilizationLegendOrientation { - horizontal = 'horizontal', - vertical = 'vertical' -} - -export enum ChartDonutUtilizationLegendPosition { - bottom = 'bottom', - right = 'right' -} - -export enum ChartDonutUtilizationSortOrder { - ascending = 'ascending', - descending = 'descending' -} - -export enum ChartDonutUtilizationSubTitlePosition { - bottom = 'bottom', - center = 'center', - right = 'right' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartDonut, ChartDonutProps } from '../ChartDonut/ChartDonut'; +import { ChartCommonStyles, ChartDonutUtilizationStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getDonutUtilizationTheme } from '../ChartUtils/chart-theme-types'; /** * ChartDonutUtilization renders a dataset as a donut utilization chart. @@ -255,7 +229,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -364,6 +337,10 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * cases, the legend may not be visible until enough padding is applied. */ legendPosition?: 'bottom' | 'right'; + /** + * @beta Text direction of the legend labels. + */ + legendDirection?: 'ltr' | 'rtl'; /** * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label. * If this prop is not set, the label radius will default to the radius of the pie + label padding. @@ -419,7 +396,6 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -616,7 +592,8 @@ export const ChartDonutUtilization: React.FunctionComponent diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap index f9b11bc2546..2369419c8d9 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartDonutThreshold 1`] = `
@@ -18,17 +18,17 @@ exports[`ChartDonutThreshold 1`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -40,13 +40,13 @@ exports[`ChartDonutThreshold 1`] = ` exports[`ChartDonutThreshold 2`] = `
@@ -55,17 +55,17 @@ exports[`ChartDonutThreshold 2`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -77,13 +77,13 @@ exports[`ChartDonutThreshold 2`] = ` exports[`renders component data 1`] = `
@@ -92,38 +92,38 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,46.26447237139683,-65.26560040477877L40.97399932998254,-57.983888959835994A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-donut--threshold--first--Color, #f0f0f0); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" />
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index 2c33fb6b6d4..a808e58c477 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartDonutUtilization 1`] = `
@@ -18,24 +18,24 @@ exports[`ChartDonutUtilization 1`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -47,13 +47,13 @@ exports[`ChartDonutUtilization 1`] = ` exports[`ChartDonutUtilization 2`] = `
@@ -62,24 +62,24 @@ exports[`ChartDonutUtilization 2`] = ` d="M5.8170722959499274e-15,-95L5.2659812363336185e-15,-86Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -91,13 +91,13 @@ exports[`ChartDonutUtilization 2`] = ` exports[`renders component data 1`] = `
@@ -106,24 +106,24 @@ exports[`renders component data 1`] = ` d="M0.9334130156923648,-79.99455444055012A80,80,0,0,1,65.26560040477878,46.26447237139683L57.983888959835994,40.97399932998254A71,71,0,0,0,0.9334130156923663,-70.99386410206263Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" />
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md index 3374e4d5d2d..512e3b26458 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md +++ b/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md @@ -15,10 +15,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a donut utilization chart using a Katacoda tutorial starting with a simple chart, adding thresholds, tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/donut-utilization-chart) - ## Donut utilization examples ### Basic ```js diff --git a/packages/react-charts/src/components/ChartDonutUtilization/index.ts b/packages/react-charts/src/components/ChartDonutUtilization/index.ts deleted file mode 100644 index b69ee70fba9..00000000000 --- a/packages/react-charts/src/components/ChartDonutUtilization/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ChartDonutThreshold'; -export * from './ChartDonutUtilization'; diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx b/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx index 94b3107f887..7b800771eba 100644 --- a/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx +++ b/packages/react-charts/src/components/ChartGroup/ChartGroup.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; +import { ChartArea } from '../ChartArea/ChartArea'; import { ChartGroup } from './ChartGroup'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx index 7db47e805a7..6bb01abb496 100644 --- a/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx +++ b/packages/react-charts/src/components/ChartGroup/ChartGroup.tsx @@ -19,20 +19,11 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryGroup, VictoryGroupProps, VictoryGroupTTargetType } from 'victory-group'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { - getClassName, - useDefaultPatternProps, - getPatternDefs, - getTheme, - renderChildrenWithPatterns -} from '../ChartUtils'; - -export enum ChartGroupSortOrder { - ascending = 'ascending', - descending = 'descending' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getClassName } from '../ChartUtils/chart-helpers'; +import { useDefaultPatternProps, getPatternDefs, renderChildrenWithPatterns } from '../ChartUtils/chart-patterns'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartGroup is a wrapper component that renders a given set of children with some shared props. ChartGroup reconciles @@ -217,7 +208,6 @@ export interface ChartGroupProps extends VictoryGroupProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -319,7 +309,6 @@ export interface ChartGroupProps extends VictoryGroupProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -510,7 +499,8 @@ export const ChartGroup: React.FunctionComponent = ({ {renderChildrenWithPatterns({ children, - patternScale: defaultPatternScale + patternScale: defaultPatternScale, + themeColor })} {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })} diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap index d3e0f4c236a..8a770210264 100644 --- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap +++ b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartGroup 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartGroup 1`] = ` exports[`ChartGroup 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartGroup 2`] = ` exports[`renders container children 1`] = `
@@ -88,7 +88,7 @@ exports[`renders container children 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartGroup/index.ts b/packages/react-charts/src/components/ChartGroup/index.ts deleted file mode 100644 index 1131d05e0ed..00000000000 --- a/packages/react-charts/src/components/ChartGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartGroup'; diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx index 88ebd2ff6c6..00359976b9c 100644 --- a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx +++ b/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx @@ -10,19 +10,7 @@ import { VictoryLabel, VictoryLabelProps } from 'victory-core'; -import { ChartCommonStyles } from '../ChartTheme'; - -export enum ChartLabelDirection { - rtl = 'rtl', - ltr = 'ltr', - inherit = 'inherit' -} - -export enum ChartLabelPlacement { - parallel = 'parallel', - perpendicular = 'perpendicular', - vertical = 'vertical' -} +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; /** * ChartLabel renders the label components that are used across all Victory based components. diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap index 50f4f3a56d4..7a34fe6401b 100644 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLabel/index.ts b/packages/react-charts/src/components/ChartLabel/index.ts deleted file mode 100644 index 9972e4726c3..00000000000 --- a/packages/react-charts/src/components/ChartLabel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartLabel'; diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx index 73d0e28de4b..fa40554fc4f 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; import { ChartLegend } from './ChartLegend'; -import { ChartLabel } from '../ChartLabel'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; Object.values([true, false]).forEach(() => { test('ChartLegend', () => { diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx index 368452a2dbd..c2af1359289 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx @@ -17,27 +17,11 @@ import { VictoryLegendOrientationType, VictoryLegendTTargetType } from 'victory-legend'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLabel } from '../ChartLabel'; -import { ChartPoint } from '../ChartPoint'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; - -export enum ChartLegendOrientation { - horizontal = 'horizontal', - vertical = 'vertical' -} - -export enum ChartLegendPosition { - bottom = 'bottom', - bottomLeft = 'bottom-left', - right = 'right' -} - -export enum ChartLegendRowGutter { - bottom = 'bottom', - top = 'top' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartPoint } from '../ChartPoint/ChartPoint'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme'; /** * ChartLegend renders a chart legend component. @@ -207,7 +191,6 @@ export interface ChartLegendProps extends VictoryLegendProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -334,6 +317,8 @@ export const ChartLegend: React.FunctionComponent = ({ theme = getTheme(themeColor), ...rest }: ChartLegendProps) => { + const componentTheme = getComponentTheme(themeColor); + // Merge pattern IDs with `style.data.fill` property const getDefaultStyle = () => { if (!patternScale) { @@ -367,14 +352,16 @@ export const ChartLegend: React.FunctionComponent = ({ const getLabelComponent = () => React.cloneElement(labelComponent, { ...(name && { id: (props: any) => `${name}-${(labelComponent as any).type.displayName}-${props.index}` }), - ...labelComponent.props + ...labelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); const getTitleComponent = () => React.cloneElement(titleComponent, { // Victory doesn't appear to call the id function here, but it's valid for label components ...(name && { id: () => `${name}-${(titleComponent as any).type.displayName}` }), - ...titleComponent.props + ...titleComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Note: containerComponent is required for theme diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap index 8045db70af2..8dbb3c5402d 100644 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -3,23 +3,23 @@ exports[`ChartLegend 1`] = `
@@ -31,17 +31,17 @@ exports[`ChartLegend 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" /> @@ -64,26 +64,26 @@ exports[`ChartLegend 1`] = ` direction="inherit" dx="0" id="test2" - x="116.73125" + x="70.39999999999999" y="18.97" > Series 2
@@ -95,23 +95,23 @@ exports[`ChartLegend 1`] = ` exports[`ChartLegend 2`] = `
@@ -123,17 +123,17 @@ exports[`ChartLegend 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" /> @@ -156,26 +156,26 @@ exports[`ChartLegend 2`] = ` direction="inherit" dx="0" id="test2" - x="116.73125" + x="70.39999999999999" y="18.97" > Series 2
@@ -187,45 +187,45 @@ exports[`ChartLegend 2`] = ` exports[`renders component data 1`] = `
@@ -249,12 +249,12 @@ exports[`renders component data 1`] = ` dx="0" id="test4" x="30.8" - y="39.875" + y="22.97" > @@ -265,26 +265,26 @@ exports[`renders component data 1`] = ` direction="inherit" dx="0" id="test4" - x="99.58125" - y="39.875" + x="70.39999999999999" + y="22.97" > Dogs
diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md index d0b2bb4c1e8..e98fdc29276 100644 --- a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md +++ b/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md @@ -616,13 +616,13 @@ class TooltipPieChart extends React.Component { super(props); // Custom legend label component - // Note: Tooltip wraps children with a div tag, so we add a reference to ChartLabel instead + // Note: Tooltip wraps children with a div tag, so we use a reference to ChartLabel instead this.LegendLabel = ({datum, ...rest}) => { const ref = React.createRef(); return ( - + ); } diff --git a/packages/react-charts/src/components/ChartLegend/index.ts b/packages/react-charts/src/components/ChartLegend/index.ts deleted file mode 100644 index 4af3de066d9..00000000000 --- a/packages/react-charts/src/components/ChartLegend/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartLegend'; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx index 3ef50fb37ec..46928fe7a51 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.test.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Chart } from '../Chart'; -import { ChartAxis } from '../ChartAxis'; -import { ChartGroup } from '../ChartGroup'; -import { ChartLine } from '../ChartLine'; -import { ChartThemeColor } from '../ChartTheme'; -import { createContainer } from '../ChartUtils'; +import { Chart } from '../Chart/Chart'; +import { ChartAxis } from '../ChartAxis/ChartAxis'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; +import { ChartLine } from '../ChartLine/ChartLine'; +import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; +import { createContainer } from '../ChartUtils/chart-container'; import { ChartLegendTooltip } from './ChartLegendTooltip'; -import { ChartLabel } from '../ChartLabel'; -import { ChartLegend } from '../ChartLegend'; Object.values([true, false]).forEach(() => { test('ChartLegendTooltip', () => { diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx index 51260b7c7c9..167a7e4244a 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -9,17 +9,18 @@ import { VictoryStyleObject } from 'victory-core'; import { VictoryTooltip } from 'victory-tooltip'; -import { ChartCursorTooltip, ChartCursorTooltipProps } from '../ChartCursorTooltip'; +import { ChartCursorTooltip, ChartCursorTooltipProps } from '../ChartCursorTooltip/ChartCursorTooltip'; import { ChartLegendTooltipContent } from './ChartLegendTooltipContent'; -import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme'; -import { ChartTooltip } from '../ChartTooltip'; +import { ChartLegendTooltipStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; import { getLegendTooltipDataProps, getLegendTooltipSize, getLegendTooltipVisibleData, - getLegendTooltipVisibleText, - getTheme -} from '../ChartUtils'; + getLegendTooltipVisibleText +} from '../ChartUtils/chart-tooltip'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * The ChartLegendTooltip is based on ChartCursorTooltip, which is intended to be used with a voronoi cursor @@ -27,7 +28,7 @@ import { * * See https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/index.d.ts */ -export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { +export interface ChartLegendTooltipProps extends Omit { /** * The active prop specifies whether the tooltip component should be displayed. */ @@ -48,7 +49,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -234,7 +235,6 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -275,7 +275,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. @@ -295,11 +295,11 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { themeColor?: string; /** * The title prop specifies a title to render with the legend. - * This prop should be given as a string, or an array of strings for multi-line titles. * - * Example: title={(datum) => datum.x} + * @propType number | string | Function | string[] + * @example title={(datum) => datum.x} */ - title?: string | string[] | Function; + title?: string[] | StringOrNumberOrCallback; /** * This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from * parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the @@ -328,8 +328,8 @@ interface FlyoutProps { export const ChartLegendTooltip: React.FunctionComponent = ({ activePoints, - datum, center = { x: 0, y: 0 }, + datum, flyoutHeight, flyoutWidth, height, @@ -346,7 +346,7 @@ export const ChartLegendTooltip: React.FunctionComponent { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const legendTooltipProps = () => ({ legendData: getLegendTooltipVisibleData({ activePoints, legendData, text, theme }), legendProps: getLegendTooltipDataProps( @@ -401,6 +401,7 @@ export const ChartLegendTooltip: React.FunctionComponent { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const legendProps = getLegendTooltipDataProps(legendComponent.props); const visibleLegendData = getLegendTooltipVisibleData({ activePoints, @@ -230,7 +230,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent center.x + _flyoutWidth + pointerLength) { return center.x + ChartLegendTooltipStyles.flyout.padding / 2; } else if (center.x < _flyoutWidth + pointerLength) { @@ -246,7 +246,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent height - _flyoutHeight / 2) { @@ -266,12 +266,14 @@ export const ChartLegendTooltipContent: React.FunctionComponent React.cloneElement(labelComponent, { + datum, dx: maxLegendDimensions.width - minLegendDimensions.width, legendData: visibleLegendData, ...labelComponent.props @@ -288,13 +290,13 @@ export const ChartLegendTooltipContent: React.FunctionComponent React.cloneElement(legendComponent, { data: getLegendTooltipVisibleData({ @@ -310,8 +312,9 @@ export const ChartLegendTooltipContent: React.FunctionComponent { test('ChartLegendTooltipLabel', () => { diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx index 2668968ee14..5fb9c4bd58b 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltipLabel.tsx @@ -11,15 +11,15 @@ import { VictoryLabel, VictoryLabelProps } from 'victory-core'; -import { ChartLabel } from '../ChartLabel'; -import { ChartLegendTooltipStyles } from '../ChartTheme'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartLegendTooltipStyles } from '../ChartTheme/ChartStyles'; /** * ChartLegendLabel renders a legend tooltip label * * See https://github.com/FormidableLabs/victory/tree/main/packages/victory-core/src/victory-label */ -export interface ChartLegendLabelProps extends VictoryLabelProps { +export interface ChartLegendTooltipLabelProps extends VictoryLabelProps { /** * The active prop specifies whether the label is active or not. The active prop is set by defaultEvents in components * like ChartTooltip and VictorySelectionContainer. The active prop is used when evaluating functional styles and @@ -64,7 +64,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps { * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, * and determine child text */ - datum?: {}; + datum?: any; /** * The desc prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more * descriptive this title is, the more useful it will be for people using screen readers. @@ -232,7 +232,7 @@ export interface ChartLegendLabelProps extends VictoryLabelProps { y?: number; } -export const ChartLegendTooltipLabel: React.FunctionComponent = ({ +export const ChartLegendTooltipLabel: React.FunctionComponent = ({ dx = 0, index = 0, legendData, @@ -246,7 +246,7 @@ export const ChartLegendTooltipLabel: React.FunctionComponent { +}: ChartLegendTooltipLabelProps) => { const getStyle = (styles: any) => { const applyDefaultStyle = (customStyle: React.CSSProperties) => defaults( @@ -273,7 +273,7 @@ export const ChartLegendTooltipLabel: React.FunctionComponent { - const _x = x + Helpers.evaluateProp(dx); + const _x = x + (Helpers.evaluateProp(dx, undefined) as number); return React.cloneElement(valueLabelComponent, { style: getStyle(style), diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap index a0e7c4e100f..100fe174c23 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -7,19 +7,19 @@ exports[`ChartLegendTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = `
Average number of pets @@ -29,7 +29,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -73,7 +73,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -104,7 +104,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -135,7 +135,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -167,7 +167,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -221,7 +221,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -262,7 +262,7 @@ exports[`allows tooltip via container component 1`] = ` @@ -300,12 +300,12 @@ exports[`allows tooltip via container component 1`] = ` Cats @@ -478,15 +478,15 @@ exports[`allows tooltip via container component 1`] = ` direction="inherit" dx="0" id="test" - x="183.58125" + x="216.4" y="250.97" > Dogs @@ -495,15 +495,15 @@ exports[`allows tooltip via container component 1`] = ` direction="inherit" dx="0" id="test" - x="256.015625" + x="256" y="250.97" > Birds @@ -512,15 +512,15 @@ exports[`allows tooltip via container component 1`] = ` direction="inherit" dx="0" id="test" - x="327.57500000000005" + x="295.6" y="250.97" > Mice @@ -528,11 +528,11 @@ exports[`allows tooltip via container component 1`] = `
diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap index 46ad06378e6..647be6337d2 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -16,7 +16,7 @@ exports[`renders component text 1`] = ` @@ -33,7 +33,7 @@ exports[`renders component text 1`] = ` diff --git a/packages/react-charts/src/components/ChartLegendTooltip/index.ts b/packages/react-charts/src/components/ChartLegendTooltip/index.ts deleted file mode 100644 index c50031b7eb9..00000000000 --- a/packages/react-charts/src/components/ChartLegendTooltip/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ChartLegendTooltip'; -export * from './ChartLegendTooltipContent'; -export * from './ChartLegendTooltipLabel'; diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx index bec331c202e..2ac5f0cc718 100644 --- a/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx +++ b/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Chart } from '../Chart'; -import { ChartGroup } from '../ChartGroup'; +import { Chart } from '../Chart/Chart'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartLine } from './ChartLine'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.tsx b/packages/react-charts/src/components/ChartLine/ChartLine.tsx index d7cfd01e19f..993e682ea48 100644 --- a/packages/react-charts/src/components/ChartLine/ChartLine.tsx +++ b/packages/react-charts/src/components/ChartLine/ChartLine.tsx @@ -20,14 +20,9 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryLine, VictoryLineProps, VictoryLineTTargetType } from 'victory-line'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; - -export enum ChartLineSortOrder { - ascending = 'ascending', - descending = 'descending' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartLine renders a dataset as a single line path. Since ChartLine renders only a single element to represent a diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index cf8daf4b5e4..5a0e7a114c3 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartLine 1`] = `
@@ -31,19 +31,19 @@ exports[`ChartLine 1`] = `
@@ -55,13 +55,13 @@ exports[`ChartLine 1`] = ` exports[`ChartLine 2`] = `
@@ -83,19 +83,19 @@ exports[`ChartLine 2`] = `
@@ -107,13 +107,13 @@ exports[`ChartLine 2`] = ` exports[`renders component data 1`] = `
@@ -139,7 +139,7 @@ exports[`renders component data 1`] = ` d="M50,138.88888888888886L83.33333333333334,127.77777777777779L116.66666666666667,94.44444444444443L150,116.66666666666669" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 3px; opacity: 1; stroke-width: 2;" + style="fill: none; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; width: 3px; opacity: 1; stroke-width: 2;" /> @@ -221,7 +221,7 @@ exports[`renders component data 1`] = ` @@ -265,7 +265,7 @@ exports[`renders component data 1`] = ` @@ -296,7 +296,7 @@ exports[`renders component data 1`] = ` @@ -327,7 +327,7 @@ exports[`renders component data 1`] = ` @@ -358,7 +358,7 @@ exports[`renders component data 1`] = ` @@ -389,7 +389,7 @@ exports[`renders component data 1`] = ` @@ -420,7 +420,7 @@ exports[`renders component data 1`] = ` @@ -452,7 +452,7 @@ exports[`renders component data 1`] = ` @@ -496,7 +496,7 @@ exports[`renders component data 1`] = ` @@ -527,7 +527,7 @@ exports[`renders component data 1`] = ` @@ -558,7 +558,7 @@ exports[`renders component data 1`] = ` @@ -586,11 +586,11 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md index 49affefbc92..ac2155d2cb2 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/components/ChartLine/examples/ChartLine.md @@ -20,10 +20,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a line chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/line-chart) - ## Examples ### Basic with right aligned legend ```js diff --git a/packages/react-charts/src/components/ChartLine/index.ts b/packages/react-charts/src/components/ChartLine/index.ts deleted file mode 100644 index fe8b0c733b8..00000000000 --- a/packages/react-charts/src/components/ChartLine/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartLine'; diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx index ccecf32f2c9..194e0b00730 100644 --- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx +++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx @@ -23,35 +23,18 @@ import { VictorySliceLabelPositionType, VictorySliceTTargetType } from 'victory-pie'; -import { ChartContainer } from '../ChartContainer'; -import { ChartLegend, ChartLegendOrientation } from '../ChartLegend'; -import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; -import { ChartTooltip } from '../ChartTooltip'; -import { - getComputedLegend, - useDefaultPatternProps, - getPaddingForSide, - getPatternDefs, - getTheme, - getLegendItemsExtraHeight -} from "../ChartUtils"; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; +import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend'; +import { getPaddingForSide } from '../ChartUtils/chart-padding'; +import { getPatternDefs, useDefaultPatternProps } from '../ChartUtils/chart-patterns'; +import { getTheme } from '../ChartUtils/chart-theme'; import { useEffect } from 'react'; - -export enum ChartPieLabelPosition { - centroid = 'centroid', - endAngle = 'endAngle', - startAngle = 'startAngle' -} - -export enum ChartPieLegendPosition { - bottom = 'bottom', - right = 'right' -} - -export enum ChartPieSortOrder { - ascending = 'ascending', - descending = 'descending' -} +import { ChartPoint } from '../ChartPoint/ChartPoint'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; /** * ChartPie renders a dataset as a pie chart. @@ -235,7 +218,6 @@ export interface ChartPieProps extends VictoryPieProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -353,6 +335,10 @@ export interface ChartPieProps extends VictoryPieProps { * cases, the legend may not be visible until enough padding is applied. */ legendPosition?: 'bottom' | 'right'; + /** + * @beta Text direction of the legend labels. + */ + legendDirection?: 'ltr' | 'rtl'; /** * The name prop is typically used to reference a component instance when defining shared events. However, this * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory @@ -391,7 +377,6 @@ export interface ChartPieProps extends VictoryPieProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** @@ -518,25 +503,22 @@ export const ChartPie: React.FunctionComponent = ({ legendAllowWrap = false, legendComponent = , legendData, - legendPosition = ChartCommonStyles.legend.position as ChartPieLegendPosition, + legendPosition = ChartCommonStyles.legend.position, + legendDirection = 'ltr', name, patternScale, patternUnshiftIndex, - padding, radius, standalone = true, style, themeColor, - // destructure last theme = getTheme(themeColor), labelComponent = allowTooltip ? ( - ) : ( - undefined - ), - legendOrientation = theme.legend.orientation as ChartLegendOrientation, + ) : undefined, + legendOrientation = theme.legend.orientation as any, height = theme.pie.height, width = theme.pie.width, ...rest @@ -599,6 +581,11 @@ export const ChartPie: React.FunctionComponent = ({ /> ); + let legendXOffset = 0; + if (legendDirection === 'rtl') { + legendXOffset = getLegendMaxTextWidth(legendData, theme); + } + const legend = React.cloneElement(legendComponent, { colorScale, data: legendData, @@ -606,6 +593,21 @@ export const ChartPie: React.FunctionComponent = ({ key: 'pf-chart-pie-legend', orientation: legendOrientation, theme, + themeColor, + ...(legendDirection === 'rtl' && { + dataComponent: legendComponent.props.dataComponent ? ( + React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) + ) : ( + + ) + }), + ...(legendDirection === 'rtl' && { + labelComponent: legendComponent.props.labelComponent ? ( + React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 }) + ) : ( + + ) + }), ...legendComponent.props }); @@ -650,7 +652,7 @@ export const ChartPie: React.FunctionComponent = ({ // Callback to compliment legendAllowWrap const computedLegend = getLegend(); useEffect(() => { - if (typeof legendAllowWrap === 'function') { + if (computedLegend?.props && typeof legendAllowWrap === 'function') { const extraHeight = getLegendItemsExtraHeight({ legendData: computedLegend.props.data, legendOrientation: computedLegend.props.orientation, diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap index 5cd8292b363..6a9d5f17df3 100644 --- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartPie 1`] = `
@@ -18,45 +18,45 @@ exports[`ChartPie 1`] = ` d="M5.8170722959499274e-15,-95A95,95,0,0,1,61.06482292022124,-72.7742220963029L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -68,13 +68,13 @@ exports[`ChartPie 1`] = ` exports[`ChartPie 2`] = `
@@ -83,45 +83,45 @@ exports[`ChartPie 2`] = ` d="M5.8170722959499274e-15,-95A95,95,0,0,1,61.06482292022124,-72.7742220963029L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(115, 115)" />
@@ -133,13 +133,13 @@ exports[`ChartPie 2`] = ` exports[`renders component data 1`] = `
@@ -148,31 +148,31 @@ exports[`renders component data 1`] = ` d="M4.898587196589413e-15,-80A80,80,0,0,1,64.7213595499958,47.022820183397855L0,0Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); padding: 8px; stroke: var(--pf-v5-chart-pie--data--stroke--Color, transparent); stroke-width: 1;" transform="translate(100, 100)" />
diff --git a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/react-charts/src/components/ChartPie/examples/ChartPie.md index b01c22794a0..0848b8b1d4f 100644 --- a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md +++ b/packages/react-charts/src/components/ChartPie/examples/ChartPie.md @@ -6,16 +6,15 @@ hideDarkMode: true --- import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_100'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a pie chart using a Katacoda tutorial starting with a simple chart, adding tooltips, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/pie-chart) - ## Examples ### Basic with right aligned legend ```js @@ -45,59 +44,66 @@ import { ChartPie } from '@patternfly/react-charts';
``` -### Orange with right aligned legend +### Multi-color (ordered) with bottom aligned legend ```js import React from 'react'; import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; -
+
`${datum.x}: ${datum.y}`} legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} - legendOrientation="vertical" - legendPosition="right" - name="chart2" + legendPosition="bottom" + name="chart3" padding={{ - bottom: 20, + bottom: 65, left: 20, - right: 140, // Adjusted to accommodate legend + right: 20, top: 20 }} - themeColor={ChartThemeColor.orange} - width={350} + themeColor={ChartThemeColor.multiOrdered} + width={300} />
``` -### Multi-color (ordered) with bottom aligned legend +### Custom color scale + +This demonstrates how to apply a custom color scale. + ```js import React from 'react'; import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_100'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; -
+
`${datum.x}: ${datum.y}`} - legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} - legendPosition="bottom" - name="chart3" + data={[{ x: 'Sky', y: 38 }, { x: 'Shady side of pyramid', y: 7 }, { x: 'Sunny side of pyramid', y: 17 }, { x: 'Sky', y: 38 }]} + height={230} + labels={({ datum }) => `${datum.x}`} + legendData={[{ name: 'Sky' }, { name: 'Shady side of pyramid' }, { name: 'Sunny side of pyramid' }]} + legendOrientation="vertical" + legendPosition="right" + name="chart2" padding={{ - bottom: 65, + bottom: 20, left: 20, - right: 20, + right: 240, // Adjusted to accommodate legend top: 20 }} - themeColor={ChartThemeColor.multiOrdered} - width={300} + themeColor={ChartThemeColor.orange} + width={450} />
``` diff --git a/packages/react-charts/src/components/ChartPie/index.ts b/packages/react-charts/src/components/ChartPie/index.ts deleted file mode 100644 index 75d7ee64430..00000000000 --- a/packages/react-charts/src/components/ChartPie/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartPie'; diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx b/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx index 78892fac815..7ffa84bef7a 100644 --- a/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx +++ b/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartLegend } from '../ChartLegend'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartLegend } from '../ChartLegend/ChartLegend'; import { ChartPoint } from './ChartPoint'; -import { ChartLabel } from '../ChartLabel'; Object.values([true, false]).forEach(() => { test('ChartPoint', () => { diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx b/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx index 14f6010b8c3..8768f990c66 100644 --- a/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx +++ b/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx @@ -133,7 +133,7 @@ const getPath = (props: ChartPointProps) => { threshold: PathHelpers.threshold }; const symbol = Helpers.evaluateProp(props.symbol, props); - const key: keyof PathHelpersInterface = symbol; + const key = symbol as keyof PathHelpersInterface; const symbolFunction = typeof pathFunctions[key] === 'function' ? pathFunctions[key] : pathFunctions.square; return symbolFunction(x, y, size); }; diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap index de3f9189969..76ed4bb3c9f 100644 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -3,23 +3,23 @@ exports[`ChartPoint 1`] = `
@@ -31,17 +31,17 @@ exports[`ChartPoint 1`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" /> @@ -64,26 +64,26 @@ exports[`ChartPoint 1`] = ` direction="inherit" dx="0" id="test" - x="116.73125" + x="70.39999999999999" y="18.97" > Series 2
@@ -95,23 +95,23 @@ exports[`ChartPoint 1`] = ` exports[`ChartPoint 2`] = `
@@ -123,17 +123,17 @@ exports[`ChartPoint 2`] = ` z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" /> @@ -156,26 +156,26 @@ exports[`ChartPoint 2`] = ` direction="inherit" dx="0" id="test" - x="116.73125" + x="70.39999999999999" y="18.97" > Series 2
@@ -187,55 +187,55 @@ exports[`ChartPoint 2`] = ` exports[`renders component data 1`] = `
@@ -259,12 +259,12 @@ exports[`renders component data 1`] = ` dx="0" id="test4" x="30.8" - y="39.875" + y="22.97" > @@ -275,26 +275,26 @@ exports[`renders component data 1`] = ` direction="inherit" dx="0" id="test4" - x="99.58125" - y="39.875" + x="70.39999999999999" + y="22.97" > Dogs
diff --git a/packages/react-charts/src/components/ChartPoint/index.ts b/packages/react-charts/src/components/ChartPoint/index.ts deleted file mode 100644 index 614eba5b7ee..00000000000 --- a/packages/react-charts/src/components/ChartPoint/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartPoint'; diff --git a/packages/react-charts/src/components/ChartPoint/path-helpers.ts b/packages/react-charts/src/components/ChartPoint/path-helpers.ts index f1a3aec6fac..d2f6fb0d727 100644 --- a/packages/react-charts/src/components/ChartPoint/path-helpers.ts +++ b/packages/react-charts/src/components/ChartPoint/path-helpers.ts @@ -104,7 +104,7 @@ export const PathHelpers: PathHelpersInterface = { star: (x: number, y: number, size: number) => { const baseSize = 1.35 * size; const angle = Math.PI / 5; - const starCoords = [...Array(10).keys()].map(index => { + const starCoords = [...Array(10).keys()].map((index) => { const length = index % 2 === 0 ? baseSize : baseSize / 2; return `${length * Math.sin(angle * (index + 1)) + x}, ${length * Math.cos(angle * (index + 1)) + y}`; diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx index 30729a967e0..0727ccb175c 100644 --- a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx +++ b/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx @@ -20,14 +20,10 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryScatter, VictoryScatterProps, VictoryScatterTTargetType } from 'victory-scatter'; -import { ChartContainer } from '../ChartContainer'; -import { ChartScatterStyles, ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; - -export enum ChartScatterSortOrder { - ascending = 'ascending', - descending = 'descending' -} +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartScatterStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartScatter renders a dataset as a series of points. ChartScatter can be composed with Chart to create scatter plots. @@ -450,7 +446,6 @@ export const ChartScatter: React.FunctionComponent = ({ // destructure last theme = getTheme(themeColor), - size = ({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size), ...rest }: ChartScatterProps) => { // Clone so users can override container props @@ -459,8 +454,14 @@ export const ChartScatter: React.FunctionComponent = ({ ...containerComponent.props }); + // bubbleProperty is only considered if the size prop is undefined, therefore set + // default size function only if bubbleProperty is not set. + if (typeof rest.size === 'undefined' && typeof rest.bubbleProperty === 'undefined') { + rest.size = ({ active }) => (active ? ChartScatterStyles.activeSize : ChartScatterStyles.size); + } + // Note: containerComponent is required for theme - return ; + return ; }; ChartScatter.displayName = 'ChartScatter'; diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap index 3c8fb23f8cf..d360ad38dbf 100644 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartScatter 1`] = `
@@ -21,7 +21,7 @@ exports[`ChartScatter 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v5-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" />
@@ -492,13 +492,13 @@ exports[`ChartScatter 1`] = ` exports[`ChartScatter 2`] = `
@@ -510,7 +510,7 @@ exports[`ChartScatter 2`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="fill: var(--pf-v5-chart-scatter--data--Fill, #151515); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" />
@@ -981,13 +981,13 @@ exports[`ChartScatter 2`] = ` exports[`renders component data 1`] = `
@@ -1000,7 +1000,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1038,7 +1038,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--200, #8bc1f7); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v5-chart-theme--blue--ColorScale--200, #8bc1f7); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1076,7 +1076,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--300, #002f5d); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v5-chart-theme--blue--ColorScale--300, #002f5d); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1114,7 +1114,7 @@ exports[`renders component data 1`] = ` a 3, 3 0 1,0 -6,0" role="presentation" shape-rendering="auto" - style="width: 3px; fill: var(--pf-chart-theme--blue--ColorScale--400, #519de9); opacity: 1; stroke: var(--pf-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" + style="width: 3px; fill: var(--pf-v5-chart-theme--blue--ColorScale--400, #519de9); opacity: 1; stroke: var(--pf-v5-chart-scatter--data--stroke--Color, transparent); stroke-width: 0;" /> @@ -1151,7 +1151,7 @@ exports[`renders component data 1`] = ` @@ -1195,7 +1195,7 @@ exports[`renders component data 1`] = ` @@ -1226,7 +1226,7 @@ exports[`renders component data 1`] = ` @@ -1257,7 +1257,7 @@ exports[`renders component data 1`] = ` @@ -1288,7 +1288,7 @@ exports[`renders component data 1`] = ` @@ -1319,7 +1319,7 @@ exports[`renders component data 1`] = ` @@ -1350,7 +1350,7 @@ exports[`renders component data 1`] = ` @@ -1382,7 +1382,7 @@ exports[`renders component data 1`] = ` @@ -1426,7 +1426,7 @@ exports[`renders component data 1`] = ` @@ -1457,7 +1457,7 @@ exports[`renders component data 1`] = ` @@ -1488,7 +1488,7 @@ exports[`renders component data 1`] = ` @@ -1519,7 +1519,7 @@ exports[`renders component data 1`] = ` @@ -1550,7 +1550,7 @@ exports[`renders component data 1`] = ` @@ -1581,7 +1581,7 @@ exports[`renders component data 1`] = ` @@ -1609,11 +1609,11 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartScatter/index.ts b/packages/react-charts/src/components/ChartScatter/index.ts deleted file mode 100644 index 153d1211750..00000000000 --- a/packages/react-charts/src/components/ChartScatter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartScatter'; diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx index 041e16164bc..4f546e8900b 100644 --- a/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx +++ b/packages/react-charts/src/components/ChartStack/ChartStack.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Chart } from '../Chart'; -import { ChartBar } from '../ChartBar'; +import { Chart } from '../Chart/Chart'; +import { ChartBar } from '../ChartBar/ChartBar'; import { ChartStack } from './ChartStack'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartStack/ChartStack.tsx b/packages/react-charts/src/components/ChartStack/ChartStack.tsx index ebc4a0f7488..c22c9dec967 100644 --- a/packages/react-charts/src/components/ChartStack/ChartStack.tsx +++ b/packages/react-charts/src/components/ChartStack/ChartStack.tsx @@ -17,9 +17,11 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryStack, VictoryStackProps, VictoryStackTTargetType } from 'victory-stack'; -import { ChartContainer } from '../ChartContainer'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getClassName, useDefaultPatternProps, getTheme, renderChildrenWithPatterns } from '../ChartUtils'; +import { ChartContainer } from '../ChartContainer/ChartContainer'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getClassName } from '../ChartUtils/chart-helpers'; +import { useDefaultPatternProps, renderChildrenWithPatterns } from '../ChartUtils/chart-patterns'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartStack is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper @@ -195,7 +197,6 @@ export interface ChartStackProps extends VictoryStackProps { * * @example hasPatterns={ true } * @example hasPatterns={[ true, true, false ]} - * @beta */ hasPatterns?: boolean | boolean[]; /** @@ -290,7 +291,6 @@ export interface ChartStackProps extends VictoryStackProps { * Note: Not all components are supported; for example, ChartLine, ChartBullet, ChartThreshold, etc. * * @example patternScale={[ 'url("#pattern1")', 'url("#pattern2")', null ]} - * @beta */ patternScale?: string[]; /** diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap index e1fe898dbf4..3a22121cccc 100644 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap @@ -3,22 +3,22 @@ exports[`ChartStack 1`] = `
@@ -30,22 +30,22 @@ exports[`ChartStack 1`] = ` exports[`ChartStack 2`] = `
@@ -57,13 +57,13 @@ exports[`ChartStack 2`] = ` exports[`renders component data 1`] = `
@@ -84,7 +84,7 @@ A 0 0 0 0 1, 85, 125.86206896551724 index="0" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--400, #519de9); stroke: var(--pf-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--400, #519de9); stroke: var(--pf-v5-chart-bar--data--stroke, none); stroke-width: 1; padding: 8px;" /> @@ -331,7 +331,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -375,7 +375,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -406,7 +406,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -437,7 +437,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -469,7 +469,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -513,7 +513,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -544,7 +544,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -575,7 +575,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -606,7 +606,7 @@ A 0 0 0 0 1, 229.99999999999997, 150 @@ -634,11 +634,11 @@ A 0 0 0 0 1, 229.99999999999997, 150
diff --git a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md index 3b5931f8940..80adc5c2c10 100644 --- a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md +++ b/packages/react-charts/src/components/ChartStack/examples/ChartStack.md @@ -30,10 +30,6 @@ Note: PatternFly React charts live in its own package at [@patternfly/react-char PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a stack chart using a Katacoda tutorial starting with a simple chart, adding multiple datasets, tooltips, axis labels, a legend, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/stack-chart) - ## Examples ### Basic with right aligned legend ```js diff --git a/packages/react-charts/src/components/ChartStack/index.ts b/packages/react-charts/src/components/ChartStack/index.ts deleted file mode 100644 index 4ee6254caec..00000000000 --- a/packages/react-charts/src/components/ChartStack/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartStack'; diff --git a/packages/react-charts/src/components/ChartTheme/ChartStyles.ts b/packages/react-charts/src/components/ChartTheme/ChartStyles.ts index 76911dbeabe..186d1b1d6e8 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartStyles.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartStyles.ts @@ -1,5 +1,6 @@ import { CommonStyles } from './styles/common-styles'; import { BulletStyles } from './styles/bullet-styles'; +import { BoxPlotTooltipStyles } from './styles/box-plot-tooltip-styles'; import { DonutStyles } from './styles/donut-styles'; import { DonutUtilizationStyles } from './styles/donut-utilization-styles'; import { LegendTooltipStyles } from './styles/legend-tooltip-styles'; @@ -17,6 +18,12 @@ export const ChartCommonStyles = CommonStyles; */ export const ChartBulletStyles = BulletStyles; +/** + * Legend tooltip styles + * @private + */ +export const ChartBoxPlotTooltipStyles = BoxPlotTooltipStyles; + /** * Donut styles * @private diff --git a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts index fcd2b214015..ad61b6d420f 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts @@ -1,6 +1,44 @@ import { VictoryThemeDefinition } from 'victory-core'; -// Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps +/** + * Chart component theme definition + * @private + * @beta + */ +export interface ChartComponentThemeDefinitionInterface { + axis?: VictoryThemeDefinition; + bullet?: VictoryThemeDefinition; + bulletComparativeErrorMeasure?: VictoryThemeDefinition; + bulletComparativeMeasure?: VictoryThemeDefinition; + bulletComparativeWarningMeasure: VictoryThemeDefinition; + bulletGroupTitle?: VictoryThemeDefinition; + bulletPrimaryDotMeasure?: VictoryThemeDefinition; + bulletPrimaryNegativeMeasure?: VictoryThemeDefinition; + bulletPrimarySegmentedMeasure?: VictoryThemeDefinition; + bulletQualitativeRange?: VictoryThemeDefinition; + donut?: VictoryThemeDefinition; + donutThresholdDynamic?: VictoryThemeDefinition; + donutThresholdStatic?: VictoryThemeDefinition; + donutUtilization?: VictoryThemeDefinition; + label?: { + backgroundStyle?: { + fill?: string; + }; + style?: { + fill?: string; + stroke?: string; + }; + }; + threshold?: VictoryThemeDefinition; +} + +/** + * Chart theme definition + * + * Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps + * + * @public + */ export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {} /** @@ -8,3 +46,10 @@ export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {} * @public */ export type ChartThemeDefinition = ChartThemeDefinitionInterface; + +/** + * Chart component theme definition + * @private + * @beta + */ +export type ChartComponentThemeDefinition = ChartComponentThemeDefinitionInterface; diff --git a/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts b/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts index 176c4e067e3..e501941a174 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartThemeColor.ts @@ -10,6 +10,7 @@ interface ChartThemeColorInterface { multiUnordered: string; orange: string; purple: string; + skeleton: string; } /** @@ -49,5 +50,6 @@ export const ChartThemeColor: ChartThemeColorInterface = { multiOrdered: 'multi-ordered', multiUnordered: 'multi-unordered', orange: 'orange', - purple: 'purple' + purple: 'purple', + skeleton: 'skeleton' }; diff --git a/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts b/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts index 39c1e863e1a..0ce2ec9a558 100644 --- a/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts +++ b/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts @@ -1,5 +1,6 @@ +import { ChartComponentThemeDefinition, ChartThemeDefinition } from './ChartTheme'; import { AxisTheme } from './themes/components/axis-theme'; -import { BaseTheme } from './themes/base-theme'; +import { BaseComponentTheme, BaseTheme } from './themes/base-theme'; import { BulletTheme, BulletComparativeErrorMeasureTheme, @@ -12,14 +13,14 @@ import { BulletQualitativeRangeTheme } from './themes/components/bullet-theme'; import { DonutTheme } from './themes/components/donut-theme'; -import { ThresholdTheme } from './themes/components/threshold-theme'; import { DonutThresholdDynamicTheme, DonutThresholdStaticTheme } from './themes/components/donut-threshold-theme'; import { DonutUtilizationDynamicTheme, DonutUtilizationStaticTheme } from './themes/components/donut-utilization-theme'; -import { ChartThemeDefinition } from './ChartTheme'; +import { ThresholdTheme } from './themes/components/threshold-theme'; /** * Axis theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartAxisTheme: ChartThemeDefinition = AxisTheme; @@ -29,92 +30,114 @@ export const ChartAxisTheme: ChartThemeDefinition = AxisTheme; */ export const ChartBaseTheme: ChartThemeDefinition = BaseTheme; +/** + * Base component theme + * @private + * @beta + */ +export const ChartBaseComponentTheme: ChartComponentThemeDefinition = BaseComponentTheme; + /** * Bullet comparative error measure theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletComparativeErrorMeasureTheme: ChartThemeDefinition = BulletComparativeErrorMeasureTheme; /** * Bullet comparative measure theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletComparativeMeasureTheme: ChartThemeDefinition = BulletComparativeMeasureTheme; /** * Bullet comparative measure warning theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletComparativeWarningMeasureTheme: ChartThemeDefinition = BulletComparativeWarningMeasureTheme; /** * Bullet group title theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletGroupTitleTheme: ChartThemeDefinition = BulletGroupTitleTheme; /** * Bullet primary dot measure theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletPrimaryDotMeasureTheme: ChartThemeDefinition = BulletPrimaryDotMeasureTheme; /** * Bullet primary negative measure theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletPrimaryNegativeMeasureTheme: ChartThemeDefinition = BulletPrimaryNegativeMeasureTheme; /** * Bullet primary segmented measure theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletPrimarySegmentedMeasureTheme: ChartThemeDefinition = BulletPrimarySegmentedMeasureTheme; /** * Bullet qualitative range theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletQualitativeRangeTheme: ChartThemeDefinition = BulletQualitativeRangeTheme; /** * Bullet theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartBulletTheme: ChartThemeDefinition = BulletTheme; /** * Donut utilization dynamic theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartDonutUtilizationDynamicTheme: ChartThemeDefinition = DonutUtilizationDynamicTheme; /** * Donut utilization static theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartDonutUtilizationStaticTheme: ChartThemeDefinition = DonutUtilizationStaticTheme; /** * Donut theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartDonutTheme: ChartThemeDefinition = DonutTheme; /** * Donut threshold dynamic theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartDonutThresholdDynamicTheme: ChartThemeDefinition = DonutThresholdDynamicTheme; /** - * ChartDonutThresholdStatic theme + * Donut threshold static theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartDonutThresholdStaticTheme: ChartThemeDefinition = DonutThresholdStaticTheme; /** - * Donut threshold static theme + * Threshold static theme * @private + * @deprecated See ChartBaseComponentTheme */ export const ChartThresholdTheme: ChartThemeDefinition = ThresholdTheme; diff --git a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md index 013e81f46d1..9ac648d7b20 100644 --- a/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md +++ b/packages/react-charts/src/components/ChartTheme/examples/ChartTheme.md @@ -144,8 +144,7 @@ This demonstrates how to apply theme colors for unordered charts like area, line ```js import React from 'react'; -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; -// import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts';
{ +export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => { const { COLOR_SCALE } = props; return { @@ -30,7 +57,15 @@ export const ColorTheme = (props: ColorThemeInterface) => { } }, boxplot: { - colorScale: COLOR_SCALE + colorScale: COLOR_SCALE, + style: { + q1: { + fill: COLOR_SCALE[0] + }, + q3: { + fill: COLOR_SCALE[0] + } + } }, candlestick: { colorScale: COLOR_SCALE @@ -69,3 +104,146 @@ export const ColorTheme = (props: ColorThemeInterface) => { } }; }; + +/** + * Component color theme + * @private + * @beta + */ +export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + axis: { + axis: { + style: { + grid: { + stroke: chart_axis_grid_stroke_Color.var + }, + ticks: { + stroke: chart_axis_tick_stroke_Color.var + } + } + } + }, + bullet: { + // TBD... + }, + bulletComparativeErrorMeasure: { + bar: { + style: { + data: { + fill: chart_bullet_comparative_measure_error_Fill_Color.var, + stroke: chart_bullet_comparative_measure_error_stroke_Color.var + } + } + } + }, + bulletComparativeMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + fill: chart_bullet_comparative_measure_Fill_Color.var, + stroke: chart_bullet_comparative_measure_stroke_Color.var + } + } + } + }, + bulletComparativeWarningMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + fill: chart_bullet_comparative_measure_warning_Fill_Color.var, + stroke: chart_bullet_comparative_measure_warning_stroke_Color.var + } + } + } + }, + bulletGroupTitle: { + line: { + style: { + data: { + fill: chart_bullet_group_title_divider_Fill_Color.var, + stroke: chart_bullet_group_title_divider_stroke_Color.var + } + } + } + }, + bulletPrimaryDotMeasure: { + // TBD... + }, + bulletPrimarySegmentedMeasure: { + // TBD... + }, + bulletQualitativeRange: { + group: { + colorScale: [ + chart_bullet_qualitative_range_ColorScale_100.var, + chart_bullet_qualitative_range_ColorScale_200.var, + chart_bullet_qualitative_range_ColorScale_300.var, + chart_bullet_qualitative_range_ColorScale_400.var, + chart_bullet_qualitative_range_ColorScale_500.var + ] + } + }, + bulletPrimaryNegativeMeasure: { + group: { + colorScale: [ + chart_bullet_negative_measure_ColorScale_100.var, + chart_bullet_negative_measure_ColorScale_200.var, + chart_bullet_negative_measure_ColorScale_300.var, + chart_bullet_negative_measure_ColorScale_400.var, + chart_bullet_negative_measure_ColorScale_500.var + ] + } + }, + donut: { + // TBD... + }, + donutThresholdDynamic: { + legend: { + // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale + colorScale: [COLOR_SCALE[0], chart_donut_threshold_second_Color.var, chart_donut_threshold_third_Color.var] + }, + // Merge the threshold colors in case users want to show the unused data + pie: { + colorScale: [ + COLOR_SCALE[0], + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + } + }, + donutThresholdStatic: { + pie: { + colorScale: [ + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + } + }, + donutUtilization: { + legend: { + colorScale: [ + COLOR_SCALE[0], + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + }, + pie: { + colorScale: [COLOR_SCALE[0], chart_donut_threshold_first_Color.var] + } + }, + label: { + // TBD... + }, + threshold: { + // TBD... + } + }; +}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts index 5263fc4b02d..7f5d45e8f78 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts @@ -4,7 +4,7 @@ import chart_theme_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_300'; import chart_theme_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_400'; import chart_theme_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const BlueColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Blue color component theme + * @private + * @beta + */ +export const BlueColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts index d08e05c7112..cd3fadde53e 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts @@ -4,7 +4,7 @@ import chart_theme_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_300'; import chart_theme_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_400'; import chart_theme_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const CyanColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Cyan color component theme + * @private + * @beta + */ +export const CyanColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts index 86e87745a95..64ff8b833c9 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts @@ -4,7 +4,7 @@ import chart_theme_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_300'; import chart_theme_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_400'; import chart_theme_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const GoldColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Gold color component theme + * @private + * @beta + */ +export const GoldColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts index ffe32a26632..b84cb9d9a49 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts @@ -4,7 +4,7 @@ import chart_theme_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_300'; import chart_theme_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_400'; import chart_theme_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const GrayColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Gray component theme + * @private + * @beta + */ +export const GrayColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts index 1220467981e..21fe9d393c2 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts @@ -4,7 +4,7 @@ import chart_theme_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/ import chart_theme_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_300'; import chart_theme_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_400'; import chart_theme_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const GreenColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Green color component theme + * @private + * @beta + */ +export const GreenColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts index 2ce1ad1e5ab..dc383575975 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts @@ -24,7 +24,7 @@ import chart_theme_multi_color_ordered_ColorScale_2200 from '@patternfly/react-t import chart_theme_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2300'; import chart_theme_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2400'; import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -63,3 +63,12 @@ const COLOR_SCALE = [ export const MultiColorOrderedTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Multi-color ordered component theme + * @private + * @beta + */ +export const MultiColorOrderedComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts index eeff0952a38..dd524d32ab4 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts @@ -34,7 +34,7 @@ import chart_theme_multi_color_unordered_ColorScale_3200 from '@patternfly/react import chart_theme_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3300'; import chart_theme_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3400'; import chart_theme_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // The color order below improves the color contrast in unordered charts; area & line // See https://github.com/patternfly/patternfly-next/issues/1551 @@ -83,3 +83,12 @@ const COLOR_SCALE = [ export const MultiColorUnorderedTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Multi-color unordered component theme + * @private + * @beta + */ +export const MultiColorUnorderedComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts index ca81d6608db..cb29dcbba91 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts @@ -4,7 +4,7 @@ import chart_theme_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; import chart_theme_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_400'; import chart_theme_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const OrangeColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Orange color component theme + * @private + * @beta + */ +export const OrangeColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts index 1982c9c6c51..21ffef53f35 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts @@ -4,7 +4,7 @@ import chart_theme_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm import chart_theme_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_300'; import chart_theme_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_400'; import chart_theme_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const PurpleColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Purple color component theme + * @private + * @beta + */ +export const PurpleColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/skeleton-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/skeleton-theme.ts new file mode 100644 index 00000000000..9b58ce91fbf --- /dev/null +++ b/packages/react-charts/src/components/ChartTheme/themes/colors/skeleton-theme.ts @@ -0,0 +1,35 @@ +/* eslint-disable camelcase */ +import { ColorTheme, ColorComponentTheme } from '../skeleton-theme'; +import chart_bullet_qualitative_range_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_100'; +import chart_bullet_qualitative_range_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_200'; +import chart_bullet_qualitative_range_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_300'; +import chart_bullet_qualitative_range_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_400'; +import chart_bullet_qualitative_range_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_500'; + +// Color scale +// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit +const COLOR_SCALE = [ + chart_bullet_qualitative_range_ColorScale_100.var, + chart_bullet_qualitative_range_ColorScale_200.var, + chart_bullet_qualitative_range_ColorScale_300.var, + chart_bullet_qualitative_range_ColorScale_400.var, + chart_bullet_qualitative_range_ColorScale_500.var +]; + +/** + * Skeleton color theme + * @private + * @beta + */ +export const SkeletonColorTheme = ColorTheme({ + COLOR_SCALE +}); + +/** + * Skeleton color theme + * @private + * @beta + */ +export const SkeletonColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts index 4e34d1d1273..73ae707e5db 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts @@ -5,6 +5,7 @@ import chart_axis_tick_stroke_Color from '@patternfly/react-tokens/dist/esm/char /** * Axis theme * @private + * @deprecated See BaseComponentTheme */ export const AxisTheme = { axis: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts index ec4b73c59eb..fe27d15fda4 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts @@ -30,6 +30,7 @@ import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart /** * Bullet theme * @private + * @deprecated See BaseComponentTheme */ export const BulletTheme = { chart: { @@ -40,6 +41,7 @@ export const BulletTheme = { /** * Bullet comparative error measure theme * @private + * @deprecated See BaseComponentTheme */ export const BulletComparativeErrorMeasureTheme = { bar: { @@ -57,6 +59,7 @@ export const BulletComparativeErrorMeasureTheme = { /** * Bullet comparative measure theme * @private + * @deprecated See BaseComponentTheme */ export const BulletComparativeMeasureTheme = { bar: { @@ -74,6 +77,7 @@ export const BulletComparativeMeasureTheme = { /** * Bullet comparative measure warning theme * @private + * @deprecated See BaseComponentTheme */ export const BulletComparativeWarningMeasureTheme = { bar: { @@ -91,6 +95,7 @@ export const BulletComparativeWarningMeasureTheme = { /** * Bullet group title theme * @private + * @deprecated See BaseComponentTheme */ export const BulletGroupTitleTheme = { chart: { @@ -115,6 +120,7 @@ export const BulletGroupTitleTheme = { /** * Bullet primary dot measure theme * @private + * @deprecated See BaseComponentTheme */ export const BulletPrimaryDotMeasureTheme = { group: { @@ -125,6 +131,7 @@ export const BulletPrimaryDotMeasureTheme = { /** * Bullet primary negative measure theme * @private + * @deprecated See BaseComponentTheme */ export const BulletPrimaryNegativeMeasureTheme = { group: { @@ -142,6 +149,7 @@ export const BulletPrimaryNegativeMeasureTheme = { /** * Bullet primary segmented measure theme * @private + * @deprecated See BaseComponentTheme */ export const BulletPrimarySegmentedMeasureTheme = { group: { @@ -152,6 +160,7 @@ export const BulletPrimarySegmentedMeasureTheme = { /** * Bullet qualitative range theme * @private + * @deprecated See BaseComponentTheme */ export const BulletQualitativeRangeTheme = { group: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts index 50409084ee4..e2182a0de8c 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts @@ -7,6 +7,7 @@ import chart_donut_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut /** * Donut theme * @private + * @deprecated See BaseComponentTheme */ export const DonutTheme = { pie: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts index 35ff8458818..3ad71154a24 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts @@ -13,6 +13,7 @@ import chart_donut_threshold_static_pie_Width from '@patternfly/react-tokens/dis /** * Donut threshold dynamic theme * @private + * @deprecated See BaseComponentTheme */ export const DonutThresholdDynamicTheme = { legend: { @@ -28,6 +29,7 @@ export const DonutThresholdDynamicTheme = { /** * Donut threshold static theme * @private + * @deprecated See BaseComponentTheme */ export const DonutThresholdStaticTheme = { pie: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts index c8f5dd2208c..48cc0f67894 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts @@ -11,6 +11,7 @@ import chart_donut_utilization_static_pie_Padding from '@patternfly/react-tokens /** * Donut utilization dynamic theme * @private + * @deprecated See BaseComponentTheme */ export const DonutUtilizationDynamicTheme = { pie: { @@ -24,6 +25,7 @@ export const DonutUtilizationDynamicTheme = { /** * Donut utilization static theme * @private + * @deprecated See BaseComponentTheme */ export const DonutUtilizationStaticTheme = { legend: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts index ac16660a0d6..ef43eae8442 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts +++ b/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts @@ -5,6 +5,7 @@ import chart_threshold_stroke_Width from '@patternfly/react-tokens/dist/esm/char /** * Threshold theme * @private + * @deprecated See BaseComponentTheme */ export const ThresholdTheme = { line: { diff --git a/packages/react-charts/src/components/ChartTheme/themes/skeleton-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/skeleton-theme.ts new file mode 100644 index 00000000000..21863aed04f --- /dev/null +++ b/packages/react-charts/src/components/ChartTheme/themes/skeleton-theme.ts @@ -0,0 +1,307 @@ +import { ChartComponentThemeDefinition, ChartThemeDefinition } from '../ChartTheme'; + +interface ColorThemeInterface { + COLOR_SCALE: string[]; +} + +// Labels +const LABEL_PROPS = { + fill: 'transparent', + stroke: 'transparent' +}; + +const LABEL_CENTERED_PROPS = { + ...LABEL_PROPS +}; + +/** + * Victory color theme + * @private + */ +export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + area: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + axis: { + colorScale: COLOR_SCALE, + style: { + axis: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + axisLabel: { + ...LABEL_CENTERED_PROPS, + fill: COLOR_SCALE[0], + stroke: 'transparent' + }, + grid: { + fill: 'transparent', + stroke: 'transparent' + }, + ticks: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + tickLabels: { + ...LABEL_PROPS, + fill: 'transparent' + } + } + }, + bar: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + }, + labels: LABEL_PROPS + } + }, + boxplot: { + colorScale: COLOR_SCALE, + style: { + max: { + stroke: COLOR_SCALE[0] + }, + maxLabels: LABEL_PROPS, + median: { + stroke: COLOR_SCALE[0] + }, + medianLabels: LABEL_PROPS, + min: { + stroke: COLOR_SCALE[0] + }, + minLabels: LABEL_PROPS, + q1: { + fill: COLOR_SCALE[0] + }, + q1Labels: LABEL_PROPS, + q3: { + fill: COLOR_SCALE[0] + }, + q3Labels: LABEL_PROPS + } + }, + candlestick: { + colorScale: COLOR_SCALE, + style: { + data: { + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + chart: { + colorScale: COLOR_SCALE + }, + errorbar: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + group: { + colorScale: COLOR_SCALE + }, + legend: { + colorScale: COLOR_SCALE, + style: { + labels: LABEL_PROPS, + title: { + ...LABEL_PROPS + } + } + }, + line: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + pie: { + colorScale: COLOR_SCALE, + style: { + data: { + stroke: 'transparent' + }, + labels: { + ...LABEL_PROPS + } + } + }, + scatter: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: 'transparent' + }, + labels: LABEL_CENTERED_PROPS + } + }, + stack: { + colorScale: COLOR_SCALE + }, + tooltip: { + flyoutStyle: { + fill: 'transparent', // background + stroke: 'transparent' // border + }, + style: { + fill: 'transparent' // text + } + }, + voronoi: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + }, + labels: { + ...LABEL_CENTERED_PROPS, + fill: 'transparent' // text + }, + // Note: These properties override tooltip + flyout: { + fill: 'transparent', // background + stroke: 'transparent' // border + } + } + } + }; +}; + +/** + * Component color theme + * @private + * @beta + */ +export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + axis: { + axis: { + style: { + grid: { + stroke: COLOR_SCALE[0] + }, + ticks: { + stroke: COLOR_SCALE[0] + } + } + } + }, + bullet: { + // TBD... + }, + bulletComparativeErrorMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletComparativeMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletComparativeWarningMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletGroupTitle: { + line: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletPrimaryDotMeasure: { + // TBD... + }, + bulletPrimaryNegativeMeasure: { + group: { + colorScale: COLOR_SCALE + } + }, + bulletPrimarySegmentedMeasure: { + // TBD... + }, + bulletQualitativeRange: { + group: { + colorScale: COLOR_SCALE + } + }, + donut: { + // TBD... + }, + donutThresholdDynamic: { + legend: { + colorScale: COLOR_SCALE + }, + pie: { + colorScale: COLOR_SCALE + } + }, + donutThresholdStatic: { + pie: { + colorScale: COLOR_SCALE + } + }, + donutUtilization: { + legend: { + colorScale: COLOR_SCALE + }, + pie: { + colorScale: COLOR_SCALE + } + }, + label: { + backgroundStyle: { + fill: COLOR_SCALE[0] + }, + style: LABEL_CENTERED_PROPS + }, + threshold: { + // TBD... + } + }; +}; diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx index bcd09f0bfe7..d1f90945439 100644 --- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx +++ b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Chart } from '../Chart'; -import { ChartGroup } from '../ChartGroup'; +import { Chart } from '../Chart/Chart'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartThreshold } from './ChartThreshold'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx index 7b0f7b17e1f..9d6566d8a3d 100644 --- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx +++ b/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx @@ -21,9 +21,9 @@ import { VictoryStyleInterface } from 'victory-core'; import { VictoryLine, VictoryLineProps, VictoryLineTTargetType } from 'victory-line'; -import { ChartLine } from '../ChartLine'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getThresholdTheme } from '../ChartUtils'; +import { ChartLine } from '../ChartLine/ChartLine'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getThresholdTheme } from '../ChartUtils/chart-theme-types'; /** * CharThreshold renders a dataset as a threshold chart. @@ -456,7 +456,7 @@ export const ChartThreshold: React.FunctionComponent = ({ strokeWidth: getStrokeWidth() }; } - return ; + return ; }; ChartThreshold.displayName = 'ChartThreshold'; diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap index eeaec84833e..8093508a006 100644 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -3,13 +3,13 @@ exports[`ChartThreshold 1`] = `
@@ -31,19 +31,19 @@ exports[`ChartThreshold 1`] = `
@@ -55,13 +55,13 @@ exports[`ChartThreshold 1`] = ` exports[`ChartThreshold 2`] = `
@@ -83,19 +83,19 @@ exports[`ChartThreshold 2`] = `
@@ -107,13 +107,13 @@ exports[`ChartThreshold 2`] = ` exports[`renders component data 1`] = `
@@ -139,7 +139,7 @@ exports[`renders component data 1`] = ` d="M50,83.33333333333334L90,83.33333333333334L90,50L150,50" role="presentation" shape-rendering="auto" - style="fill: none; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 13px; stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" + style="fill: none; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); pointer-events: stroke; width: 13px; stroke-dasharray: 4,2; stroke-width: 1.5; opacity: 1;" /> @@ -149,7 +149,7 @@ exports[`renders component data 1`] = ` @@ -193,7 +193,7 @@ exports[`renders component data 1`] = ` @@ -224,7 +224,7 @@ exports[`renders component data 1`] = ` @@ -255,7 +255,7 @@ exports[`renders component data 1`] = ` @@ -286,7 +286,7 @@ exports[`renders component data 1`] = ` @@ -318,7 +318,7 @@ exports[`renders component data 1`] = ` @@ -362,7 +362,7 @@ exports[`renders component data 1`] = ` @@ -393,7 +393,7 @@ exports[`renders component data 1`] = ` @@ -424,7 +424,7 @@ exports[`renders component data 1`] = ` @@ -455,7 +455,7 @@ exports[`renders component data 1`] = ` @@ -486,7 +486,7 @@ exports[`renders component data 1`] = ` @@ -514,11 +514,11 @@ exports[`renders component data 1`] = `
diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md index 128ee54a7c5..efe5fb1a30a 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md @@ -116,6 +116,7 @@ class MultiColorChart extends React.Component { top: 50 }} maxDomain={{ y: 9 }} + name="chart1" themeColor={ChartThemeColor.multiUnordered} width={width} > diff --git a/packages/react-charts/src/components/ChartThreshold/index.ts b/packages/react-charts/src/components/ChartThreshold/index.ts deleted file mode 100644 index 908ff59e0d9..00000000000 --- a/packages/react-charts/src/components/ChartThreshold/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartThreshold'; diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx index f5dd1195add..26a9fdc80ef 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx +++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; -import { ChartGroup } from '../ChartGroup'; -import { ChartVoronoiContainer } from '../ChartVoronoiContainer'; +import { ChartArea } from '../ChartArea/ChartArea'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; +import { ChartVoronoiContainer } from '../ChartVoronoiContainer/ChartVoronoiContainer'; import { ChartTooltip } from './ChartTooltip'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx index be83dc64189..05a890bea57 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx +++ b/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx @@ -9,9 +9,9 @@ import { VictoryStyleObject } from 'victory-core'; import { VictoryTooltip, VictoryTooltipProps } from 'victory-tooltip'; -import { ChartLabel } from '../ChartLabel'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { getTheme } from '../ChartUtils'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartTooltip renders a tooltip component with a set of default events. When ChartTooltip is used as a label component @@ -36,7 +36,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -225,7 +225,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap index 80498bf429d..9b7a03d3b4f 100644 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -7,23 +7,23 @@ exports[`ChartTooltip 2`] = ``; exports[`allows tooltip via container component 1`] = `
diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md index 1e9f7576735..72ea5e75617 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md @@ -32,7 +32,10 @@ import { createContainer, getCustomTheme } from '@patternfly/react-charts'; + + ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! @@ -47,7 +50,6 @@ This demonstrates how to use a voronoi container to display tooltips. ```js import React from 'react'; import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; -// import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
( - - {} + + + + { + + } + + {legendData[index].name} @@ -348,20 +362,21 @@ class EmbeddedHtml extends React.Component { ); return ( -
+
`${datum.y}`} + labels={({ datum }) => `${datum.y !== null ? datum.y : 'no data'}`} labelComponent={ width > center.x + flyoutWidth + 10 ? offset : -offset}} - flyout={} + // The offset and flyout component are not necessary here, but included for completeness + // centerOffset={{x: ({ center, flyoutWidth, width, offset = flyoutWidth / 2 + 10 }) => width > center.x + flyoutWidth + 10 ? offset : -offset}} + // flyoutComponent={} flyoutHeight={110} - flyoutWidth={125} + flyoutWidth={({ datum }) => datum.y === null ? 160 : 125 } labelComponent={ datum.x} />} /> } @@ -392,7 +407,8 @@ class EmbeddedHtml extends React.Component { { name: 'Cats', x: '2015', y: 3 }, { name: 'Cats', x: '2016', y: 4 }, { name: 'Cats', x: '2017', y: 8 }, - { name: 'Cats', x: '2018', y: 6 } + { name: 'Cats', x: '2018', y: 6 }, + { name: 'Cats', x: '2019', y: null } ]} interpolation="monotoneX" /> @@ -594,9 +610,34 @@ import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip }
``` +### Fixed tooltip +This demonstrates how to adjust the tooltip position and label radius +```js +import React from 'react'; +import { ChartDonut, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts'; + +
+ } + labelRadius={46} + labels={({ datum }) => `${datum.x}: ${datum.y}%`} + name="chart5" + subTitle="Pets" + title="100" + themeColor={ChartThemeColor.cyan} + width={150} + /> +
+``` + ### Legend -This demonstrates an approach for applying tooltips to a legend using a custom label component. +This demonstrates an approach for applying tooltips to a legend using a custom legend label component. ```js import React from 'react'; @@ -769,6 +810,16 @@ This demonstrates an alternate way of applying tooltips using CSS overflow inste import React from 'react'; import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455 +const sheet = (() => { + var style = document.createElement("style"); + document.head.appendChild(style); + return style.sheet; +})(); + +sheet.insertRule(".ws-react-charts-tooltip-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length); +sheet.insertRule(".ws-react-charts-tooltip-overflow svg { overflow: visible; }", sheet.cssRules.length); +
{ - const container: any = victoryCreateContainer(behaviorA, behaviorB); + const Container: any = victoryCreateContainer(behaviorA, behaviorB); const isCursor = behaviorA === 'cursor' || behaviorB === 'cursor'; const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi'; - if (isCursor) { - container.defaultProps.cursorLabelComponent = ; - container.defaultProps.cursorComponent = ( - - ); - } - if (isVoronoi) { - container.defaultProps.labelComponent = ; - } - return container; + const containerWrapper = (props: any) => { + const containerProps = { + ...(isCursor && { + cursorLabelComponent: , + cursorComponent: ( + + ) + }), + ...(isVoronoi && { labelComponent: }), + ...props + }; + return ; + }; + containerWrapper.defaultEvents = Container.defaultEvents; + containerWrapper.displayName = Container.displayName; + containerWrapper.role = Container.role; + + return containerWrapper; }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-domain.ts b/packages/react-charts/src/components/ChartUtils/chart-domain.ts index 7712ac66edd..d180d3e3c8d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-domain.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-domain.ts @@ -105,7 +105,7 @@ export const getDomain = ({ data, maxDomain, minDomain, x, y }: DomainInterface) */ export const getDomains = ({ maxDomain, minDomain, sources }: SourcesInterface): ChartDomain => { const domains: ChartDomain[] = []; - sources.forEach(source => { + sources.forEach((source) => { const { data: compData = source.data } = source.component ? source.component.props : undefined; const domain = getDomain({ data: compData, diff --git a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts b/packages/react-charts/src/components/ChartUtils/chart-helpers.ts index 66a9fb95300..a2fb26ea9fa 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-helpers.ts @@ -21,9 +21,10 @@ export const getClassName = ({ className }: ChartClassNameInterface) => { if (className) { cleanClassName = className .replace(/VictoryContainer/g, '') + .replace(/pf-v5-c-chart/g, '') .replace(/pf-c-chart/g, '') .replace(/\s+/g, ' ') .trim(); } - return cleanClassName && cleanClassName.length ? `pf-c-chart ${cleanClassName}` : 'pf-c-chart'; + return cleanClassName && cleanClassName.length ? `pf-v5-c-chart ${cleanClassName}` : 'pf-v5-c-chart'; }; diff --git a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts index fbddf42cbe0..fba78a17d3d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts @@ -29,7 +29,7 @@ const getChildNames = ({ chartNames, omitIndex }: ChartInteractiveLegendExtInter chartNames.forEach((chartName: any, index: number) => { if (index !== omitIndex) { if (Array.isArray(chartName)) { - chartName.forEach(name => result.push(name)); + chartName.forEach((name) => result.push(name)); } else { result.push(chartName); } diff --git a/packages/react-charts/src/components/ChartUtils/chart-label.ts b/packages/react-charts/src/components/ChartUtils/chart-label.ts index 415a0a9663e..3c94a2c702e 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-label.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-label.ts @@ -1,6 +1,7 @@ import { Helpers, TextSize } from 'victory-core'; import { getPieOrigin } from './chart-origin'; -import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; interface ChartBulletLabelInterface { dx?: number; // Horizontal shift from the x coordinate diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts index 28b3bfe9c47..1ffd36c19fb 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-legend.ts @@ -1,10 +1,13 @@ import defaults from 'lodash/defaults'; -import { Helpers, PaddingProps, TextSize } from 'victory-core'; +import { Helpers, TextSize } from 'victory-core'; import { VictoryLegend } from 'victory-legend'; -import { ChartLegendOrientation, ChartLegendPosition, ChartLegendProps } from '../ChartLegend'; -import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme'; +import { ChartLegendProps } from '../ChartLegend/ChartLegend'; +import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getLabelTextSize } from '../ChartUtils/chart-label'; import { getPieOrigin } from './chart-origin'; import * as React from 'react'; +import { ElementPadding } from 'victory-core/src/victory-util/helpers'; interface ChartLegendInterface { allowWrap?: boolean; // Allow legend items to wrap to the next line @@ -15,10 +18,11 @@ interface ChartLegendInterface { height: number; // Overall height of SVG legendComponent: React.ReactElement; // The base legend component to render orientation?: 'horizontal' | 'vertical'; // Orientation of legend - padding: PaddingProps; // Chart padding + padding: ElementPadding; // Chart padding patternScale?: string[]; // Legend symbol patterns position: 'bottom' | 'bottom-left' | 'right'; // The legend position theme: ChartThemeDefinition; // The theme that will be applied to the chart + themeColor?: string; // The theme color that will be applied to the chart width: number; // Overall width of SVG } @@ -38,7 +42,7 @@ interface ChartLegendPositionInterface { legendOrientation: 'horizontal' | 'vertical'; // Orientation of legend legendPosition: 'bottom' | 'bottom-left' | 'right'; // Position of legend legendProps: any; // The legend props used to determine width - padding?: PaddingProps; // Chart padding + padding?: ElementPadding; // Chart padding theme: ChartThemeDefinition; // The theme that will be applied to the chart width?: number; // Overall width of SVG } @@ -48,6 +52,22 @@ interface ChartLegendTextMaxSizeInterface { theme: ChartThemeDefinition; // The theme that will be applied to the chart } +/** + * Returns the max text length in a legend data set to calculate the x offset for right aligned legends. + * @private + */ + +export const getLegendMaxTextWidth = (legendData: any[], theme: ChartThemeDefinition) => { + let legendXOffset = 0; + legendData.map((data: any) => { + const labelWidth = getLabelTextSize({ text: data.name, theme }).width; + if (labelWidth > legendXOffset) { + legendXOffset = labelWidth; + } + }); + return legendXOffset; +}; + /** * Returns a legend which has been positioned per the given chart properties * @private @@ -62,12 +82,13 @@ export const getComputedLegend = ({ legendComponent, padding, patternScale, - position = ChartCommonStyles.legend.position as ChartLegendPosition, + position = ChartCommonStyles.legend.position, theme, + themeColor, width, // destructure last - orientation = theme.legend.orientation as ChartLegendOrientation + orientation = theme.legend.orientation as any }: ChartLegendInterface) => { // Get the number of legend items per row const legendItemsProps = legendComponent.props ? legendComponent.props : {}; @@ -124,6 +145,7 @@ export const getComputedLegend = ({ patternScale, standalone: false, theme, + themeColor, x: legendX > 0 ? legendX : 0, y: legendY > 0 ? legendY : 0 }); @@ -155,7 +177,7 @@ export const getLegendDimensions = ({ * Returns true if the legend is smaller than its container * @private */ -export const doesLegendFit = ({ +const doesLegendFit = ({ dx = 0, height, legendPosition, @@ -166,7 +188,7 @@ export const doesLegendFit = ({ theme, width }: ChartLegendPositionInterface) => { - const { left, right } = Helpers.getPadding({ padding }); + const { left, right } = Helpers.getPadding(padding); const chartSize = { height, // Fixed size width: width - left - right @@ -197,7 +219,7 @@ export const doesLegendFit = ({ * Returns the number of legend items per row * @private */ -export const getLegendItemsPerRow = ({ +const getLegendItemsPerRow = ({ dx, height, legendPosition, @@ -268,14 +290,14 @@ export const getLegendItemsExtraHeight = ({ * Returns x coordinate for legend * @private */ -export const getLegendX = ({ chartType, ...rest }: ChartLegendPositionInterface) => +const getLegendX = ({ chartType, ...rest }: ChartLegendPositionInterface) => chartType === 'pie' ? getPieLegendX(rest) : getChartLegendX(rest); /** * Returns y coordinate for legend * @private */ -export const getLegendY = ({ chartType, ...rest }: ChartLegendPositionInterface) => { +const getLegendY = ({ chartType, ...rest }: ChartLegendPositionInterface) => { switch (chartType) { case 'pie': return getPieLegendY(rest); @@ -290,7 +312,7 @@ export const getLegendY = ({ chartType, ...rest }: ChartLegendPositionInterface) * Returns y coordinate for bullet legends * @private */ -export const getBulletLegendY = ({ +const getBulletLegendY = ({ dy = 0, height, legendPosition, @@ -301,7 +323,7 @@ export const getBulletLegendY = ({ theme, width }: ChartLegendPositionInterface) => { - const { left, right } = Helpers.getPadding({ padding }); + const { left, right } = Helpers.getPadding(padding); const chartSize = { height, // Fixed size width: width - left - right @@ -331,7 +353,7 @@ export const getBulletLegendY = ({ * Returns x coordinate for chart legends * @private */ -export const getChartLegendX = ({ +const getChartLegendX = ({ dx = 0, height, legendData, @@ -342,7 +364,7 @@ export const getChartLegendX = ({ theme, width }: ChartLegendPositionInterface) => { - const { top, bottom, left, right } = Helpers.getPadding({ padding }); + const { top, bottom, left, right } = Helpers.getPadding(padding); const chartSize = { height: Math.abs(height - (bottom + top)), width: Math.abs(width - (left + right)) @@ -370,7 +392,7 @@ export const getChartLegendX = ({ * Returns y coordinate for chart legends * @private */ -export const getChartLegendY = ({ +const getChartLegendY = ({ dy = 0, height, legendPosition, @@ -381,7 +403,7 @@ export const getChartLegendY = ({ theme, width }: ChartLegendPositionInterface) => { - const { top, bottom, left, right } = Helpers.getPadding({ padding }); + const { top, bottom, left, right } = Helpers.getPadding(padding); const chartSize = { height: Math.abs(height - (bottom + top)), width: Math.abs(width - (left + right)) @@ -412,7 +434,7 @@ export const getChartLegendY = ({ * Returns x coordinate for pie legends * @private */ -export const getPieLegendX = ({ +const getPieLegendX = ({ dx = 0, height, legendData, @@ -446,7 +468,7 @@ export const getPieLegendX = ({ * Returns y coordinate for pie legends * @private */ -export const getPieLegendY = ({ +const getPieLegendY = ({ dy = 0, height, legendPosition, @@ -483,14 +505,15 @@ export const getPieLegendY = ({ * Returns an approximation of longest text width based on legend styles * @private */ -export const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInterface) => { +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const getMaxLegendTextSize = ({ legendData, theme }: ChartLegendTextMaxSizeInterface) => { const style: any = theme && theme.legend && theme.legend.style ? theme.legend.style.labels : undefined; if (!(legendData && legendData.length)) { return 0; } let result = ''; - legendData.forEach(data => { + legendData.forEach((data) => { if (data.name && data.name.length > result.length) { result = data.name; } diff --git a/packages/react-charts/src/components/ChartUtils/chart-origin.ts b/packages/react-charts/src/components/ChartUtils/chart-origin.ts index 7908afb2e25..d76c0fddde5 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-origin.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-origin.ts @@ -12,7 +12,7 @@ interface ChartPieOriginInterface { * @private */ export const getPieOrigin = ({ height, padding, width }: ChartPieOriginInterface) => { - const { top, bottom, left, right } = Helpers.getPadding({ padding }); + const { top, bottom, left, right } = Helpers.getPadding(padding); const radius = Helpers.getRadius({ height, width, padding }); const offsetX = (width - radius * 2 - left - right) / 2; const offsetY = (height - radius * 2 - top - bottom) / 2; diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx index 408c58a6514..4eb229483b1 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx +++ b/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import uniqueId from 'lodash/uniqueId'; -// @beta interface PatternPropsInterface { children?: any; colorScale?: any; @@ -11,6 +10,7 @@ interface PatternPropsInterface { patternId?: string; patternScale?: string[]; patternUnshiftIndex?: number; + themeColor?: string; themeColorScale?: string[]; } @@ -218,13 +218,13 @@ const patterns: any = [ * Helper function to return a pattern ID * @private */ -export const getPatternId = () => uniqueId('pf-pattern'); +const getPatternId = () => uniqueId('pf-pattern'); /** * Helper function to return pattern defs ID * @private */ -export const getPatternDefsId = (prefix: string, index: number) => { +const getPatternDefsId = (prefix: string, index: number) => { const id = `${prefix}:${index}`; return id; }; @@ -251,9 +251,13 @@ export const getPatternDefs = ({ {colorScale.map((color: string, index: number) => { - const { d, fill, stroke = color, strokeWidth, ...rest } = defaultPatterns[ - (index + offset) % defaultPatterns.length - ]; + const { + d, + fill, + stroke = color, + strokeWidth, + ...rest + } = defaultPatterns[(index + offset) % defaultPatterns.length]; const id = getPatternDefsId(patternId, index); return ( @@ -271,26 +275,38 @@ export const getPatternDefs = ({ * Helper function to return pattern IDs to use as color scale * @private */ -export const getPatternScale = (colorScale: string[], patternId: string) => +const getPatternScale = (colorScale: string[], patternId: string) => colorScale.map((val: any, index: number) => `url(#${getPatternDefsId(patternId, index)})`); /** * Helper function to return default color scale * @private */ -export const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) => { +const getDefaultColorScale = (colorScale: string[], themeColorScale: string[]) => { const result: string[] = []; const colors = colorScale ? colorScale : themeColorScale; - colors.forEach(val => result.push(val)); + colors.forEach((val) => result.push(val)); return result; }; +/** + * Helper function to return default pattern scale + * @private + */ +const getDefaultPatternScale = ({ colorScale, patternId, patternScale }: PatternPropsInterface) => { + if (patternScale) { + return patternScale; + } + const defaultPatternScale = getPatternScale(colorScale, patternId); + return defaultPatternScale && defaultPatternScale.length > 0 ? defaultPatternScale : undefined; +}; + /** * Merge pattern IDs with `data.fill` property, used by interactive pie chart legend * @private */ -export const getDefaultData = (data: any, patternScale: string[]) => { +export const mergePatternData = (data: any, patternScale: string[]) => { if (!patternScale) { return data; } @@ -303,18 +319,6 @@ export const getDefaultData = (data: any, patternScale: string[]) => { }); }; -/** - * Helper function to return default pattern scale - * @private - */ -export const getDefaultPatternScale = ({ colorScale, patternId, patternScale }: PatternPropsInterface) => { - if (patternScale) { - return patternScale; - } - const defaultPatternScale = getPatternScale(colorScale, patternId); - return defaultPatternScale && defaultPatternScale.length > 0 ? defaultPatternScale : undefined; -}; - /** * Helper function to return default pattern props * @private @@ -356,7 +360,7 @@ export const useDefaultPatternProps = ({ * Helper function to render children with patterns * @private */ -export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPropsInterface) => +export const renderChildrenWithPatterns = ({ children, patternScale, themeColor }: PatternPropsInterface) => React.Children.toArray(children).map((child, index) => { if (React.isValidElement(child)) { const { ...childProps } = child.props; @@ -372,6 +376,7 @@ export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPr } const _child = React.cloneElement(child, { ...(patternScale && { patternScale }), + ...(themeColor && { themeColor }), ...childProps, style // Override child props }); diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts b/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts index 45a9c07ac57..17fbae280b3 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts @@ -1,93 +1,106 @@ -import cloneDeep from 'lodash/cloneDeep'; -import { - ChartAxisTheme, - ChartBulletComparativeErrorMeasureTheme, - ChartBulletComparativeMeasureTheme, - ChartBulletComparativeWarningMeasureTheme, - ChartBulletGroupTitleTheme, - ChartBulletPrimaryDotMeasureTheme, - ChartBulletPrimaryNegativeMeasureTheme, - ChartBulletPrimarySegmentedMeasureTheme, - ChartBulletTheme, - ChartBulletQualitativeRangeTheme, - ChartDonutTheme, - ChartDonutUtilizationDynamicTheme, - ChartDonutUtilizationStaticTheme, - ChartDonutThresholdDynamicTheme, - ChartDonutThresholdStaticTheme, - ChartThresholdTheme, - ChartThemeDefinition -} from '../ChartTheme'; -import { getTheme, getCustomTheme } from './chart-theme'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getComponentTheme, getTheme } from './chart-theme'; +import merge from 'lodash/merge'; /** * Returns axis theme * @private */ -export const getAxisTheme = (themeColor: string): ChartThemeDefinition => getCustomTheme(themeColor, ChartAxisTheme); +export const getAxisTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.axis); +}; /** * Returns bullet chart theme * @private */ -export const getBulletTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletTheme); +export const getBulletTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bullet); +}; /** * Returns comparative error measure theme for bullet chart * @private */ -export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeErrorMeasureTheme); +export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeErrorMeasure); +}; /** * Returns comparative measure theme for bullet chart * @private */ -export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeMeasureTheme); +export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeMeasure); +}; /** * Returns comparative warning measure theme for bullet chart * @private */ -export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeWarningMeasureTheme); +export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeWarningMeasure); +}; /** * Returns group title theme for bullet chart * @private */ -export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletGroupTitleTheme); +export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletGroupTitle); +}; /** * Returns primary dot measure theme for bullet chart * @private */ -export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimaryDotMeasureTheme); +export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimaryDotMeasure); +}; /** * Returns primary negative measure theme for bullet chart * @private */ -export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimaryNegativeMeasureTheme); +export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimaryNegativeMeasure); +}; /** * Returns primary segmented measure theme for bullet chart * @private */ -export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimarySegmentedMeasureTheme); +export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimarySegmentedMeasure); +}; /** * Returns qualitative range theme for bullet chart * @private */ -export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletQualitativeRangeTheme); +export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletQualitativeRange); +}; /** * Returns theme for Chart component @@ -98,13 +111,13 @@ export const getChartTheme = (themeColor: string, showAxis: boolean): ChartTheme if (!showAxis) { theme.axis.padding = 0; - theme.axis.style.axis.fill = 'none'; - theme.axis.style.axis.stroke = 'none'; - theme.axis.style.grid.fill = 'none'; - theme.axis.style.grid.stroke = 'none'; - theme.axis.style.ticks.fill = 'none'; - theme.axis.style.ticks.stroke = 'none'; - theme.axis.style.tickLabels.fill = 'none'; + theme.axis.style.axis.fill = 'transparent'; + theme.axis.style.axis.stroke = 'transparent'; + theme.axis.style.grid.fill = 'transparent'; + theme.axis.style.grid.stroke = 'transparent'; + theme.axis.style.ticks.fill = 'transparent'; + theme.axis.style.ticks.stroke = 'transparent'; + theme.axis.style.tickLabels.fill = 'transparent'; } return theme; }; @@ -113,21 +126,20 @@ export const getChartTheme = (themeColor: string, showAxis: boolean): ChartTheme * Returns donut theme * @private */ -export const getDonutTheme = (themeColor: string): ChartThemeDefinition => getCustomTheme(themeColor, ChartDonutTheme); +export const getDonutTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donut); +}; /** * Returns dynamic donut threshold theme * @private */ export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, ChartDonutThresholdDynamicTheme); - - // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale - theme.legend.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdDynamicTheme.legend.colorScale]; - - // Merge the threshold colors in case users want to show the unused data - theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdStaticTheme.pie.colorScale]; - return theme; + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donutThresholdDynamic); }; /** @@ -135,11 +147,15 @@ export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDef * @private */ export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolean): ChartThemeDefinition => { - const staticTheme = cloneDeep(ChartDonutThresholdStaticTheme); - if (invert && staticTheme.pie.colorScale instanceof Array) { - staticTheme.pie.colorScale = staticTheme.pie.colorScale.reverse(); + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + const theme = merge(baseTheme, componentTheme.donutThresholdStatic); + + if (invert && baseTheme.pie.colorScale instanceof Array) { + const colorScale = [...componentTheme.donutThresholdStatic.pie.colorScale]; + theme.pie.colorScale = merge(baseTheme.pie.colorScale, colorScale.reverse()); } - return getCustomTheme(themeColor, staticTheme); + return theme; }; /** @@ -147,17 +163,17 @@ export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolea * @private */ export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, ChartDonutUtilizationDynamicTheme); - - // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale - theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutUtilizationStaticTheme.pie.colorScale]; - theme.legend.colorScale = [theme.legend.colorScale[0], ...ChartDonutUtilizationStaticTheme.legend.colorScale]; - return theme; + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donutUtilization); }; /** * Returns threshold theme * @private */ -export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartThresholdTheme); +export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.threshold); +}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme.ts b/packages/react-charts/src/components/ChartUtils/chart-theme.ts index 6d601794275..fda782d2ef0 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-theme.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-theme.ts @@ -1,15 +1,24 @@ +import cloneDeep from 'lodash/cloneDeep'; import merge from 'lodash/merge'; -import { BlueColorTheme } from '../ChartTheme/themes/colors/blue-theme'; -import { CyanColorTheme } from '../ChartTheme/themes/colors/cyan-theme'; -import { GoldColorTheme } from '../ChartTheme/themes/colors/gold-theme'; -import { GrayColorTheme } from '../ChartTheme/themes/colors/gray-theme'; -import { GreenColorTheme } from '../ChartTheme/themes/colors/green-theme'; -import { MultiColorOrderedTheme } from '../ChartTheme/themes/colors/multi-ordered-theme'; -import { MultiColorUnorderedTheme } from '../ChartTheme/themes/colors/multi-unordered-theme'; -import { OrangeColorTheme } from '../ChartTheme/themes/colors/orange-theme'; -import { PurpleColorTheme } from '../ChartTheme/themes/colors/purple-theme'; -import { ChartBaseTheme, ChartThemeDefinition } from '../ChartTheme'; import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; +import { ChartThemeDefinition, ChartComponentThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartBaseTheme, ChartBaseComponentTheme } from '../ChartTheme/ChartThemeTypes'; +import { BlueColorTheme, BlueColorComponentTheme } from '../ChartTheme/themes/colors/blue-theme'; +import { CyanColorTheme, CyanColorComponentTheme } from '../ChartTheme/themes/colors/cyan-theme'; +import { GoldColorTheme, GoldColorComponentTheme } from '../ChartTheme/themes/colors/gold-theme'; +import { GrayColorTheme, GrayColorComponentTheme } from '../ChartTheme/themes/colors/gray-theme'; +import { GreenColorTheme, GreenColorComponentTheme } from '../ChartTheme/themes/colors/green-theme'; +import { SkeletonColorTheme, SkeletonColorComponentTheme } from '../ChartTheme/themes/colors/skeleton-theme'; +import { + MultiColorOrderedTheme, + MultiColorOrderedComponentTheme +} from '../ChartTheme/themes/colors/multi-ordered-theme'; +import { + MultiColorUnorderedTheme, + MultiColorUnorderedComponentTheme +} from '../ChartTheme/themes/colors/multi-unordered-theme'; +import { OrangeColorTheme, OrangeColorComponentTheme } from '../ChartTheme/themes/colors/orange-theme'; +import { PurpleColorTheme, PurpleColorComponentTheme } from '../ChartTheme/themes/colors/purple-theme'; /** * Apply custom properties to base and color themes @@ -26,18 +35,25 @@ export const getCustomTheme = (themeColor: string, customTheme: ChartThemeDefini * @public */ export const getTheme = (themeColor: string): ChartThemeDefinition => { - // Deep clone - const baseTheme = { - ...JSON.parse(JSON.stringify(ChartBaseTheme)) - }; + const baseTheme = cloneDeep(ChartBaseTheme); return merge(baseTheme, getThemeColors(themeColor)); }; /** - * Returns theme colors + * Returns base component theme for given color * @private + * @beta + */ +export const getComponentTheme = (themeColor: string): ChartComponentThemeDefinition => { + const theme = cloneDeep(ChartBaseComponentTheme); + return merge(theme, getThemeComponentColors(themeColor)); +}; + +/** + * Returns theme colors + * @public */ -const getThemeColors = (themeColor: string) => { +export const getThemeColors = (themeColor: string) => { switch (themeColor) { case ChartThemeColor.blue: return BlueColorTheme; @@ -58,7 +74,42 @@ const getThemeColors = (themeColor: string) => { return OrangeColorTheme; case ChartThemeColor.purple: return PurpleColorTheme; + case ChartThemeColor.skeleton: + return SkeletonColorTheme; default: return BlueColorTheme; } }; + +/** + * Returns theme component colors + * @private + * @beta + */ +export const getThemeComponentColors = (themeColor: string) => { + switch (themeColor) { + case ChartThemeColor.blue: + return BlueColorComponentTheme; + case ChartThemeColor.cyan: + return CyanColorComponentTheme; + case ChartThemeColor.gold: + return GoldColorComponentTheme; + case ChartThemeColor.gray: + return GrayColorComponentTheme; + case ChartThemeColor.green: + return GreenColorComponentTheme; + case ChartThemeColor.multi: + case ChartThemeColor.multiOrdered: + return MultiColorOrderedComponentTheme; + case ChartThemeColor.multiUnordered: + return MultiColorUnorderedComponentTheme; + case ChartThemeColor.orange: + return OrangeColorComponentTheme; + case ChartThemeColor.purple: + return PurpleColorComponentTheme; + case ChartThemeColor.skeleton: + return SkeletonColorComponentTheme; + default: + return BlueColorComponentTheme; + } +}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts index f98957979d1..79d937d5d0d 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts @@ -1,8 +1,9 @@ /* eslint-disable camelcase */ import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; import { Helpers, OrientationTypes, StringOrNumberOrCallback } from 'victory-core'; -import { ChartLegendProps } from '../ChartLegend'; -import { ChartLegendTooltipStyles, ChartThemeDefinition } from '../ChartTheme'; +import { ChartLegendProps } from '../ChartLegend/ChartLegend'; +import { ChartLegendTooltipStyles } from '../ChartTheme/ChartStyles'; +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { getLegendDimensions } from './chart-legend'; import merge from 'lodash/merge'; @@ -22,6 +23,7 @@ interface ChartLegendTooltipFlyoutInterface { legendData: any; legendOrientation?: 'horizontal' | 'vertical'; legendProps?: any; + minSpacing?: number; text?: StringOrNumberOrCallback | string[] | number[]; theme: ChartThemeDefinition; } @@ -53,7 +55,7 @@ export const getCursorTooltipCenterOffset = ({ offsetCursorDimensionY = false, theme }: ChartCursorTooltipCenterOffsetInterface) => { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const offsetX = ({ center, flyoutWidth, width }: any) => { const offset = flyoutWidth / 2 + pointerLength; return width > center.x + flyoutWidth + pointerLength ? offset : -offset; @@ -78,7 +80,7 @@ export const getCursorTooltipPoniterOrientation = ({ horizontal = true, theme }: ChartCursorTooltipPoniterOrientationInterface): ((props: any) => OrientationTypes) => { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const orientationX = ({ center, flyoutWidth, width }: any): OrientationTypes => width > center.x + flyoutWidth + pointerLength ? 'left' : 'right'; const orientationY = ({ center, flyoutHeight, height }: any): OrientationTypes => @@ -90,7 +92,7 @@ export const getCursorTooltipPoniterOrientation = ({ * Returns props associated with legend data * @private */ -export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => +export const getLegendTooltipDataProps = (props: ChartLegendProps) => merge( { borderPadding: 0, @@ -110,7 +112,7 @@ export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => } } }, - { ...defaultProps } + { ...props } ); /** @@ -121,21 +123,26 @@ export const getLegendTooltipSize = ({ legendData, legendOrientation = 'vertical', legendProps, + minSpacing = 2, // Adjust min spacing, see https://issues.redhat.com/browse/COST-5648 text = '', theme }: ChartLegendTooltipFlyoutInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; // Find max char lengths let maxDataLength = 0; let maxTextLength = 0; - _text.map((name: string, index: number) => { - if (name) { - if (name.length > maxTextLength) { - maxTextLength = name.length; + _text.map((item, index) => { + if (typeof item === 'number') { + return; + } + + if (item) { + if (item.length > maxTextLength) { + maxTextLength = item.length; } - const hasData = legendData && legendData[index] && legendData[index].name; + const hasData = legendData && legendData[index] && legendData[index].name !== undefined; if (hasData) { if (legendData[index].name.length > maxDataLength) { maxDataLength = legendData[index].name.length; @@ -145,15 +152,12 @@ export const getLegendTooltipSize = ({ }); // Set length to ensure minimum spacing between label and value - let maxLength = maxDataLength + maxTextLength; - if (maxDataLength < 20) { - maxLength += 2; - } + const maxLength = maxDataLength + maxTextLength + minSpacing; // Get spacing to help align legend labels and text values const spacer = 'x'; const getSpacing = (legendLabel: string, textLabel: string) => { - let spacing = ''; + let spacing = '\u00A0'; if (maxLength === 0) { return spacing; } @@ -174,8 +178,12 @@ export const getLegendTooltipSize = ({ // {name: "Dogs 1"} // {name: "Birds 4"} // {name: "Mice 3"} - const data = _text.map((label: string, index: number) => { - const hasData = legendData && legendData[index] && legendData[index].name; + const data = _text.map((label, index) => { + if (typeof label === 'number') { + return; + } + + const hasData = legendData && legendData[index] && legendData[index].name !== undefined; const spacing = hasData ? getSpacing(legendData[index].name, label) : ''; return { @@ -184,7 +192,7 @@ export const getLegendTooltipSize = ({ }); // Replace whitespace with spacer char for consistency in width - const formattedData = data.map(val => ({ + const formattedData = data.map((val) => ({ name: val.name.replace(/ /g, spacer) })); @@ -197,7 +205,7 @@ export const getLegendTooltipSize = ({ }); // This should only use text. The row gutter changes when displaying all "no data" messages const heightDimensions = getLegendDimensions({ - legendData: _text.map((name: string) => ({ name })), + legendData: _text.map((name) => ({ name })), legendOrientation, legendProps, theme @@ -222,7 +230,7 @@ export const getLegendTooltipVisibleData = ({ textAsLegendData = false, theme }: ChartLegendTooltipVisibleDataInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; const result = []; @@ -231,7 +239,7 @@ export const getLegendTooltipVisibleData = ({ let index = -1; for (let i = 0; i < legendData.length; i++) { const data = legendData[i]; - const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; + const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : ''; if ( !activePoint || (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) @@ -267,13 +275,13 @@ export const getLegendTooltipVisibleText = ({ legendData, text }: ChartLegendTooltipVisibleTextInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; const result = []; if (legendData) { let index = -1; for (const data of legendData) { - const activePoint = activePoints ? activePoints.find(item => item.childName === data.childName) : ''; + const activePoint = activePoints ? activePoints.find((item) => item.childName === data.childName) : ''; if ( !activePoint || (data.symbol && data.symbol.type === 'eyeSlash' && data.symbol.fill === chart_color_black_500.var) @@ -285,5 +293,5 @@ export const getLegendTooltipVisibleText = ({ } } } - return result; + return result as string[] | number[]; }; diff --git a/packages/react-charts/src/components/ChartUtils/index.ts b/packages/react-charts/src/components/ChartUtils/index.ts deleted file mode 100644 index 8262d9b6498..00000000000 --- a/packages/react-charts/src/components/ChartUtils/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export * from './chart-container'; -export * from './chart-domain'; -export * from './chart-helpers'; -export * from './chart-interactive-legend'; -export * from './chart-label'; -export * from './chart-legend'; -export * from './chart-origin'; -export * from './chart-padding'; -export * from './chart-patterns'; -export * from './chart-theme'; -export * from './chart-theme-types'; -export * from './chart-tooltip'; diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx index 482bfaf5594..0938c334dee 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { ChartArea } from '../ChartArea'; -import { ChartGroup } from '../ChartGroup'; +import { ChartArea } from '../ChartArea/ChartArea'; +import { ChartGroup } from '../ChartGroup/ChartGroup'; import { ChartVoronoiContainer } from './ChartVoronoiContainer'; Object.values([true, false]).forEach(() => { diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index 2ed20e968f9..1c8f1040ba6 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -2,14 +2,10 @@ import * as React from 'react'; import hoistNonReactStatics from 'hoist-non-react-statics'; import { OriginType } from 'victory-core'; import { VictoryVoronoiContainer, VictoryVoronoiContainerProps } from 'victory-voronoi-container'; -import { ChartThemeDefinition } from '../ChartTheme'; -import { ChartTooltip } from '../ChartTooltip'; -import { getClassName, getTheme } from '../ChartUtils'; - -export enum ChartVoronoiDimension { - x = 'x', - y = 'y' -} +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartTooltip } from '../ChartTooltip/ChartTooltip'; +import { getClassName } from '../ChartUtils/chart-helpers'; +import { getTheme } from '../ChartUtils/chart-theme'; /** * ChartVoronoiContainer adds the ability to associate a mouse position with the data point(s) closest to it. When this @@ -37,7 +33,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps */ activateLabels?: boolean; /** - * he children prop specifies the child or children that will be rendered within the container. It will be set by + * The children prop specifies the child or children that will be rendered within the container. It will be set by * whatever Victory component is rendering the container. * * Note: This prop should not be set manually. @@ -253,7 +249,6 @@ export const ChartVoronoiContainer: React.FunctionComponent
@@ -26,19 +26,19 @@ exports[`ChartVoronoiContainer 1`] = ` exports[`ChartVoronoiContainer 2`] = `
@@ -49,13 +49,13 @@ exports[`ChartVoronoiContainer 2`] = ` exports[`renders container via ChartGroup 1`] = `
@@ -80,7 +80,7 @@ exports[`renders container via ChartGroup 1`] = ` d="M50,121.42857142857142L75,92.85714285714286L100,58.57142857142856L125,50L125,150L100,150L75,150L50,150Z" role="presentation" shape-rendering="auto" - style="fill: var(--pf-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-chart-theme--blue--ColorScale--100, #06c);" + style="fill: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c); width: 6px; fill-opacity: 0.3; stroke-width: 2; stroke: var(--pf-v5-chart-theme--blue--ColorScale--100, #06c);" />
diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/index.ts b/packages/react-charts/src/components/ChartVoronoiContainer/index.ts deleted file mode 100644 index 12edda1b315..00000000000 --- a/packages/react-charts/src/components/ChartVoronoiContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ChartVoronoiContainer'; diff --git a/packages/react-charts/src/components/Patterns/examples/patterms.md b/packages/react-charts/src/components/Patterns/examples/patterns.md similarity index 99% rename from packages/react-charts/src/components/Patterns/examples/patterms.md rename to packages/react-charts/src/components/Patterns/examples/patterns.md index 5269eb57ff6..3a34b8168b5 100644 --- a/packages/react-charts/src/components/Patterns/examples/patterms.md +++ b/packages/react-charts/src/components/Patterns/examples/patterns.md @@ -18,7 +18,6 @@ propComponents: [ 'ChartVoronoiContainer' ] hideDarkMode: true -beta: true --- import { diff --git a/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md b/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md index adfe14c99bc..11e5ab5ca33 100644 --- a/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md +++ b/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md @@ -154,6 +154,7 @@ class MultiColorChart extends React.Component { this.containerRef = React.createRef(); this.observer = () => {}; this.state = { + extraHeight: 0, width: 0 }; this.handleResize = () => { @@ -161,6 +162,24 @@ class MultiColorChart extends React.Component { this.setState({ width: this.containerRef.current.clientWidth }); } }; + this.handleLegendAllowWrap = (extraHeight) => { + if (extraHeight !== this.state.extraHeight) { + this.setState({ extraHeight }); + } + } + this.getHeight = (baseHeight) => { + const { extraHeight } = this.state; + return baseHeight + extraHeight; + }; + this.getPadding = () => { + const { extraHeight } = this.state; + return { + bottom: 100 + extraHeight, // Adjusted to accomodate legend + left: 50, + right: 50, + top: 50, + }; + }; } componentDidMount() { @@ -174,11 +193,11 @@ class MultiColorChart extends React.Component { render() { const { width } = this.state; - const itemsPerRow = width > 650 ? 4 : 2; + const height = this.getHeight(250); return (
-
+
} + legendAllowWrap={this.handleLegendAllowWrap} legendPosition="bottom-left" legendComponent={ } - height={250} + height={height} name="chart2" - padding={{ - bottom: 100, // Adjusted to accomodate legend - left: 50, - right: 50, - top: 50 - }} + padding={this.getPadding()} maxDomain={{ y: 9 }} themeColor={ChartThemeColor.multiUnordered} width={width} diff --git a/packages/react-charts/src/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/components/Skeletons/examples/skeletons.md new file mode 100644 index 00000000000..60ef46c54ec --- /dev/null +++ b/packages/react-charts/src/components/Skeletons/examples/skeletons.md @@ -0,0 +1,811 @@ +--- +id: Skeletons +section: charts +propComponents: [ + 'Chart', + 'ChartArea', + 'ChartAxis', + 'ChartBar', + 'ChartBoxPlot', + 'ChartBullet', + 'ChartDonut', + 'ChartDonutThreshold', + 'ChartDonutUtilization', + 'ChartLegend', + 'ChartLine', + 'ChartGroup', + 'ChartPie', + 'ChartScatter', + 'ChartStack', + 'ChartThreshold', + 'ChartVoronoiContainer' +] +hideDarkMode: true +beta: true +--- + +import { Chart, ChartArea, ChartAxis, ChartBar, ChartBoxPlot, ChartBullet, ChartDonut, ChartDonutThreshold, ChartDonutUtilization, ChartLegend, ChartLine, ChartGroup, ChartPie, ChartScatter, ChartStack, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { getResizeObserver } from '@patternfly/react-core'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; + +## Introduction +Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! + +PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. + +## Examples +### Area chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + +export const ChartAreaSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]} + legendOrientation="vertical" + legendPosition="right" + height={200} + maxDomain={{y: 9}} + name="chart1" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={800} + > + + + + + + + + +
+ + ); +} +``` + +### Bar chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + +export const ChartBarSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + domain={{y: [0,9]}} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart2" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Box plot chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartBoxPlot, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartBoxPlotSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ + + + + +
+ + ); +} +``` + +### Bullet chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartBullet, ChartLegend, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartBulletSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + legendComponent={} + maxDomain={{y: 100}} + name="chart4" + padding={{ + bottom: 50, + left: 150, // Adjusted to accommodate labels + right: 50, + top: 50 + }} + primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]} + primarySegmentedMeasureLegendData={[{ name: 'Measure' }, { name: 'Measure' }]} + qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]} + qualitativeRangeLegendData={[{ name: 'Range' }, { name: 'Range' }]} + subTitle="Details" + title="Text label" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + /> +
+ + ); +} +``` + +### Donut chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartDonutSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.x}: ${datum.y}%`} + name="chart5" + subTitle="Pets" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + title="100" + /> +
+ + ); +} +``` + +### Donut utilization chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ datum.x ? `${datum.x}: ${datum.y}%` : null} + legendData={[{ name: `Storage capacity: 75%` }, { name: 'Unused' }]} + legendOrientation="vertical" + name="chart6" + padding={{ + bottom: 20, + left: 20, + right: 225, // Adjusted to accommodate legend + top: 20 + }} + subTitle="of 100 GBps" + title="35%" + thresholds={[{ value: 60 }, { value: 90 }]} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={435} + /> +
+ + ); +} +``` + +### Donut utilization threshold +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ datum.x ? datum.x : null} + name="chart7" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + > + datum.x ? `${datum.x}: ${datum.y}%` : null} + subTitle="of 100 GBps" + title="45%" + /> + +
+ + ); +} +``` + +### Line chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + +export const ChartLineSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + maxDomain={{y: 10}} + minDomain={{y: 0}} + name="chart8" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Pie chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartPie, ChartThemeColor } from '@patternfly/react-charts'; + +export const ChartPieSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.x}: ${datum.y}`} + legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} + legendOrientation="vertical" + legendPosition="right" + name="chart9" + padding={{ + bottom: 20, + left: 20, + right: 140, // Adjusted to accommodate legend + top: 20 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={350} + /> +
+ + ); +} +``` + +### Scatter chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + +export const ChartScatterSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + constrainToVisibleArea + /> + } + height={275} + maxDomain={{y: 8}} + minDomain={{y: 0}} + name="chart10" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={450} + > + + + + + + +
+ + ); +} +``` + +### Stack chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + +export const ChartStackSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart11" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Threshold chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartLegend, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; + +export const ChartThresholdSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + constrainToVisibleArea + /> + } + legendPosition="bottom-left" + legendComponent={ + + } + height={250} + padding={{ + bottom: 100, // Adjusted to accomodate legend + left: 50, + right: 50, + top: 50 + }} + maxDomain={{ y: 9 }} + name="chart12" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={800} + > + + + + + + + + +
+ + ); +} +``` + +## Documentation +### Tips +- It's best for skeletons not to include interactions such as tooltips, cursors, interactive legends, etc. +- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) +- For single data points or zero values, you may want to set the `domain` prop +- `ChartLegend` may be used as a standalone component, instead of using `legendData` +- The `theme` and `themeColor` props should be applied at the most top level component +- Use `ChartGroup` to apply theme color scales and other properties to multiple components + +### Note +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here: + +- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) +- For `ChartArea` props, see [VictoryArea](https://formidable.com/open-source/victory/docs/victory-area) +- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis) +- For `ChartBar` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) +- For `ChartBoxPlot` props, see [VictoryBoxPlot](https://formidable.com/open-source/victory/docs/victory-box-plot) +- For `ChartBullet` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) +- For `ChartDonut` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartDonutThreshold` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartDonutUtilization` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartLine` props, see [Victoryline](https://formidable.com/open-source/victory/docs/victory-line) +- For `ChartGroup` props, see [VictoryGroup](https://formidable.com/open-source/victory/docs/victory-group) +- For `ChartPie` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartScatter` props, see [VictoryScatter](https://formidable.com/open-source/victory/docs/victory-scatter) +- For `ChartStack` props, see [VictoryStack](https://formidable.com/open-source/victory/docs/victory-stack) +- For `ChartThreshold` props, see [VictoryLine](https://formidable.com/open-source/victory/docs/victory-line) +- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container) diff --git a/packages/react-charts/src/components/Sparkline/examples/sparkline.md b/packages/react-charts/src/components/Sparkline/examples/sparkline.md index ccfea51d658..5f97254c8c4 100644 --- a/packages/react-charts/src/components/Sparkline/examples/sparkline.md +++ b/packages/react-charts/src/components/Sparkline/examples/sparkline.md @@ -12,17 +12,16 @@ hideDarkMode: true --- import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; + + ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. -Learn to build a sparkline chart using a Katacoda tutorial starting with a simple chart, adding tooltips, and concluding by changing the theme color. You'll learn how to use React chart components together to build a consistent user experience. - -[Start course](https://katacoda.com/patternfly/courses/react-charts/sparkline-chart) - ## Examples ### Basic ```js @@ -65,6 +64,16 @@ This demonstrates an alternate way of applying tooltips using CSS overflow import React from 'react'; import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +// Workaround for documentation-framework issue https://github.com/patternfly/patternfly-react/issues/11455 +const sheet = (() => { + var style = document.createElement("style"); + document.head.appendChild(style); + return style.sheet; +})(); + +sheet.insertRule(".ws-react-charts-sparkline-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length); +sheet.insertRule(".ws-react-charts-sparkline-overflow svg { overflow: visible; }", sheet.cssRules.length); +
=1.6.0. The latest version can be installed [here](https://yarnpkg.com/). -### Installing +[!NOTE] For TypeScript type definitions, this package uses the `monaco-editor` package as a peer dependency. So, if you need types and don't already have the `monaco-editor` package installed, you will need to do so: -``` -yarn add @patternfly/react-code-editor +```sh +yarn add --dev monaco-editor ``` or -``` -npm install @patternfly/react-code-editor --save +```sh +npm install --dev monaco-editor ``` ### Usage @@ -43,26 +40,18 @@ import '@patternfly/react-core/dist/styles/base.css'; import { CodeEditor } from '@patternfly/react-code-editor'; ``` -Install peer deps -```json -"monaco-editor": "^0.21.3", -"monaco-editor-webpack-plugin": "^2.1.0", -"react": "^16.8 || ^17 || ^18", -"react-dom": "^16.8 || ^17 || ^18", -"react-monaco-editor": "^0.51.0" -``` - -To properly install the library `monaco-editor-webpack-plugin` be sure to follow the [plugin instructions](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) - #### With create-react-app Projects + If you created your project with `create-react-app` you'll have some extra work to do, or you wont have syntax highlighting. Using the webpack plugin requires updating your webpack config, which `create-react-app` abstracts away. You can `npm eject` your project, but you may not want to do that. To keep your app set up in the `create-react-app` style but to get access to your webpack config you can use `react-app-rewired`. First, install `react-app-rewired` as a development dependency: + ```sh $ npm install -D react-app-rewired ``` Next, replace all of the `react-script` references in your `package.json` `scripts` section with `react-app-required`: + ```json "scripts": { "start": "react-app-rewired start", @@ -72,32 +61,33 @@ Next, replace all of the `react-script` references in your `package.json` `scrip } ``` -Next, create a `config-overries.js` file at the root of your project and add the following: +You can now start your app with `npm start` and syntax highlighting should work. -```javascript -const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); +#### To use monaco-editor as an npm package and avoid using CDN + +The `@monaco-editor/react` package is built on the `monaco-editor` package, which will fetch some additional files using CDN by default. To avoid this, include `monaco-editor` as a dependency and insert the following into your code: -module.exports = function override(config, env) { - config.plugins.push(new MonacoWebpackPlugin({ - languages: ['json', 'yaml', 'shell'] - })); - return config; -} ``` +import * as monaco from 'monaco-editor'; +import { loader } from '@monaco-editor/react'; -Note: You should change the `languages` array based on your needs. +loader.config({ monaco }); +``` -You can now start your app with `npm start` and syntax highlighting should work. +This may require the additonal `webpack` plugins such as `monaco-editor-webpack-plugin`. To properly install the library `monaco-editor-webpack-plugin` be sure to follow the [plugin instructions](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) #### Enable YAML Syntax Highlighting -The Monaco editor doesn't ship with full YAML support. You can configure your code editor with `Languages.yaml` but there will be no highlighting, even i you have the webpack plugin working correctly. To enable YAML support you need to do the following: + +The Monaco editor doesn't ship with full YAML support. You can configure your code editor with `Languages.yaml` but there will be no highlighting. To enable YAML support you need to do the following: First, install `monaco-yaml`: + ```shell $ npm install --save monaco-yaml ``` Next, at the entrypoint of your app enable it: + ```javascript import { setDiagnosticsOptions } from 'monaco-yaml'; @@ -107,8 +97,16 @@ setDiagnosticsOptions({ completion: true, validate: true, format: true, - schemas: [], + schemas: [] }); ``` +Finally, to allow the `monaco-yaml` autocomplete to function properly with `@monaco-editor/react`, you should configure your YAML schema in a `beforeMount` call with the `monaco-yaml` `configureMonacoYaml` function. This `beforeMount` function should be passed to `CodeEditor` via the `editorProps` property like so: + +``` +editorProps: { + beforeMount: yourBeforeMountHandler +} +``` + The `monaco-yaml` plugin has a lot of options so check out their docs to see what else you may want to add. diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index 5762b79c31b..cf0e8d87af5 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.0.0-alpha.30", + "version": "5.4.18", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -8,8 +8,7 @@ "patternfly:src": "src/", "sideEffects": false, "publishConfig": { - "access": "public", - "tag": "alpha" + "access": "public" }, "repository": { "type": "git", @@ -30,19 +29,18 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-alpha.30", - "@patternfly/react-icons": "^5.0.0-alpha.4", - "@patternfly/react-styles": "^5.0.0-alpha.4", + "@monaco-editor/react": "^4.6.0", + "@patternfly/react-core": "workspace:^", + "@patternfly/react-icons": "workspace:^", + "@patternfly/react-styles": "workspace:^", "react-dropzone": "14.2.3", - "tslib": "^2.0.0" + "tslib": "^2.7.0" }, "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18", - "react-monaco-editor": "^0.51.0" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" }, "devDependencies": { - "rimraf": "^2.6.2", - "typescript": "^4.7.4" + "monaco-editor": "^0.52.0" } } diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index a23847dbefb..1e6093e1d1d 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -1,22 +1,22 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor'; +import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload'; +import { Button, ButtonVariant } from '@patternfly/react-core/dist/esm/components/Button'; import { - Button, - ButtonVariant, EmptyState, + EmptyStateActions, EmptyStateBody, + EmptyStateFooter, + EmptyStateHeader, EmptyStateIcon, - EmptyStateSecondaryActions, - EmptyStateVariant, - getResizeObserver, - Popover, - PopoverProps, - Title, - TooltipPosition -} from '@patternfly/react-core'; -import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor'; -import { editor } from 'monaco-editor/esm/vs/editor/editor.api'; + EmptyStateVariant +} from '@patternfly/react-core/dist/esm/components/EmptyState'; +import { Popover, PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover'; +import { TooltipPosition } from '@patternfly/react-core/dist/esm/components/Tooltip'; +import { getResizeObserver } from '@patternfly/react-core/dist/esm/helpers/resizeObserver'; +import Editor, { EditorProps, Monaco } from '@monaco-editor/react'; +import type { editor } from 'monaco-editor'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; @@ -26,6 +26,9 @@ import Dropzone, { FileRejection } from 'react-dropzone'; import { CodeEditorContext } from './CodeEditorUtils'; import { CodeEditorControl } from './CodeEditorControl'; +export type ChangeHandler = (value: string, event: editor.IModelContentChangedEvent) => void; +export type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void; + export interface Shortcut { description: string; keys: string[]; @@ -132,6 +135,8 @@ export interface CodeEditorProps extends Omit, ' downloadButtonToolTipText?: string; /** Name of the file if user downloads code to local file. */ downloadFileName?: string; + /** Additional props to pass to the monaco editor. */ + editorProps?: EditorProps; /** Content to display in space of the code editor when there is no code to display. */ emptyState?: React.ReactNode; /** Override default empty state body text. */ @@ -229,7 +234,7 @@ interface CodeEditorState { copied: boolean; } -export class CodeEditor extends React.Component { +class CodeEditor extends React.Component { static displayName = 'CodeEditor'; private editor: editor.IStandaloneCodeEditor | null = null; private wrapperRef = React.createRef(); @@ -382,7 +387,7 @@ export class CodeEditor extends React.Component { // eslint-disable-next-line no-bitwise editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Tab, () => this.wrapperRef.current.focus()); - Array.from(document.getElementsByClassName('monaco-editor')).forEach(editorElement => + Array.from(document.getElementsByClassName('monaco-editor')).forEach((editorElement) => editorElement.removeAttribute('role') ); this.props.onEditorDidMount(editor, monaco); @@ -418,7 +423,7 @@ export class CodeEditor extends React.Component { + .then((data) => { this.handleFileReadFinished(); this.toggleEmptyState(); this.handleFileChange(data, fileHandle.name); @@ -494,7 +499,9 @@ export class CodeEditor extends React.Component - - - {emptyStateTitle} - + + } + headingLevel="h4" + /> {emptyStateBody} - - - - + {!isReadOnly && ( + + + + + + + + + )} ) : ( - - - - {emptyStateTitle} - - + + } + headingLevel="h4" + /> + {!isReadOnly && ( + + + + + + )} )); @@ -594,7 +615,7 @@ export class CodeEditor extends React.Component{headerMainContent}
} {!!shortcutsPopoverProps.bodyContent && ( -
+
); @@ -634,9 +657,11 @@ export class CodeEditor extends React.Component event.preventDefault() // Prevents clicking TextArea from opening file dialog + onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog })} - className={`pf-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`} + className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${ + isLoading && fileUploadStyles.modifiers.loading + }`} > {editorHeader}
@@ -657,3 +682,5 @@ export class CodeEditor extends React.Component { - beforeAll(() => { - window.HTMLCanvasElement.prototype.getContext = () => ({} as any); - }); +jest.mock('@monaco-editor/react', () => jest.fn(() =>
)); - test('matches snapshot without props', () => { - const { asFragment } = render(); - expect(asFragment()).toMatchSnapshot(); - }); +test('Matches snapshot without props', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Matches snapshot with control buttons enabled', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => { + render(); + expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor); +}); + +test('Renders custom class when className is passed', () => { + render(); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass('custom'); +}); + +test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => { + render(); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass( + styles.modifiers.readOnly + ); +}); + +test(`Renders with ${fileUploadStyles.fileUpload} when isUploadEnabled = true`, () => { + render(); + expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass( + fileUploadStyles.fileUpload + ); +}); + +test(`Renders with empty state when code = undefined`, () => { + render(empty
} />); + expect(screen.getByText('empty')).toBeInTheDocument(); +}); + +test(`Renders with empty state when isUploadEnabled = true and code = undefined`, () => { + render(empty
} isUploadEnabled />); + expect(screen.getByText('empty')).toBeInTheDocument(); +}); + +test(`Renders with language label when isLanguageLabelVisible`, () => { + render(); + expect(screen.getByText('JAVA')).toBeInTheDocument(); +}); + +test(`Renders with custom controls when customControls is passed`, () => { + render(control
} />); + expect(screen.getByText('control')).toBeInTheDocument(); +}); + +test(`Renders with custom header content when headerMainContent is passed`, () => { + render(); + expect(screen.getByText('header content')).toBeInTheDocument(); +}); - test('matches snapshot with all props', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); +test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => { + render( + + ); + expect(screen.getByText('shortcuts-button')).toBeInTheDocument(); + act(() => { + screen.getByText('shortcuts-button').click(); }); + expect(screen.getByText('shortcuts')).toBeInTheDocument(); }); diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx new file mode 100644 index 00000000000..847cf6cda33 --- /dev/null +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { CodeEditorControl } from '../CodeEditorControl'; + +test('Matches snapshot', () => { + const { asFragment } = render(icon
} onClick={jest.fn()} />); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Renders with custom class when className is passed', () => { + render(icon
} onClick={jest.fn()} />); + expect(screen.getByText('icon').parentElement).toHaveClass('custom'); +}); + +test('Renders with accessible name when aria-label is passed', () => { + render(icon
} onClick={jest.fn()} />); + expect(screen.getByLabelText('aria-test')); +}); diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index 3edfa6df0dd..2dfcbd78dd7 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -1,20 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CodeEditor matches snapshot with all props 1`] = ` +exports[`Matches snapshot with control buttons enabled 1`] = `