diff --git a/.babelrc b/.babelrc deleted file mode 100644 index ec6da7006b9..00000000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["./packages/patternfly-3/.babelrc.js"] -} diff --git a/.github/stale.yml b/.github/stale.yml index 3e722a14319..1f7f5a80ed6 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -1,23 +1,16 @@ # Configuration for probot-stale - https://github.com/probot/stale - # Number of days of inactivity before an Issue or Pull Request becomes stale -daysUntilStale: 90 +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: 7 +daysUntilClose: 14 -# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +# Issues with these labels will never be considered stale exemptLabels: - pinned - security - - "[Status] Maybe Later" - -# Set to true to ignore issues in a project (defaults to false) -exemptProjects: false - -# Set to true to ignore issues in a milestone (defaults to false) -exemptMilestones: false + - accessibility # Label to use when marking as stale staleLabel: wontfix @@ -25,31 +18,7 @@ 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. Thank you - for your contributions. - -# Comment to post when removing the stale label. -# unmarkComment: > -# Your comment here. - -# Comment to post when closing a stale Issue or Pull Request. -# closeComment: > -# Your comment here. + recent activity. It will be closed if no further activity occurs. # Limit the number of actions per hour, from 1-30. Default is 30 limitPerRun: 30 - -# Limit to only `issues` or `pulls` -only: pulls - -# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls': -# pulls: -# daysUntilStale: 30 -# markComment: > -# This pull request has been automatically marked as stale because it has not had -# recent activity. It will be closed if no further activity occurs. Thank you -# for your contributions. - -# issues: -# exemptLabels: -# - confirmed \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 536f707158c..b8a1b836cde 100644 --- a/.travis.yml +++ b/.travis.yml @@ -32,6 +32,8 @@ cache: - packages/patternfly-4/react-tokens/dist - packages/patternfly-4/react-inline-edit-extension/dist - packages/patternfly-4/react-integration/demo-app-ts/build + - packages/patternfly-4/react-virtualized-extension/dist + - packages/patternfly-4/react-topology/dist - packages/patternfly-4/react-docs/public # To cache PF4 docs - .cache # For incremental builds git: diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000000..429a1720c05 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,4 @@ +module.exports = { + extends: './packages/patternfly-4/.babelrc', + presets: [['@babel/env', {'modules': 'commonjs'}], '@babel/react'], +} \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index cd352076dda..2b770f22737 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,53 +1,46 @@ module.exports = { collectCoverage: true, clearMocks: true, - coverageReporters: [ - "lcov" - ], + coverageReporters: ['lcov'], modulePathIgnorePatterns: [ - "/packages/*.*/dist/*.*", - "/packages/*.*/public/*.*", - "/packages/*.*/.cache/*.*" + '/packages/*.*/dist/*.*', + '/packages/*.*/public/*.*', + '/packages/*.*/.cache/*.*' ], coveragePathIgnorePatterns: [ - "/packages/*.*/dist/*.*", - "/packages/*.*/examples/*.*", - "/packages/*.docs.*", - "/packages/react-docs/*.*" + '/packages/*.*/dist/*.*', + '/packages/*.*/examples/*.*', + '/packages/*.docs.*', + '/packages/react-docs/*.*' ], modulePaths: [ - "/**/node_modules/", - "/packages/", - "/packages/patternfly-3/", - "/packages/patternfly-4/" - ], - roots: [ - "/packages" - ], - setupFiles: [ - "./test.env.js" + '/**/node_modules/', + '/packages/', + '/packages/patternfly-3/', + '/packages/patternfly-4/' ], + roots: ['/packages'], + setupFiles: ['./test.env.js'], snapshotSerializers: [ "enzyme-to-json/serializer", "/packages/patternfly-4/react-core/scripts/snapshot-serializer" ], transform: { - "^.+\\.(ts|tsx)?$": "ts-jest", - "^.+\\.jsx?$": "babel-jest", - "\\.(css)$": "/packages/patternfly-4/react-styles/jest-transform.js" + '^.+\\.(ts|tsx?)$': 'ts-jest', + '^.+\\.jsx?$': 'babel-jest', + '\\.(css)$': '/packages/patternfly-4/react-styles/jest-transform.js' }, testPathIgnorePatterns: [ - "/scripts/generators/", - "/packages/patternfly-4/react-integration/" - ], - transformIgnorePatterns: [ - "node_modules/(?!@patternfly|@novnc|tippy.js)" + '/scripts/generators/', + '/packages/patternfly-4/react-integration/', + '/node_modules/(?!lodash-es/.*)' ], + transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|tippy.js|lodash-es)'], // https://github.com/kulshekhar/ts-jest/blob/master/docs/user/config/index.md - preset: "ts-jest/presets/js-with-babel", + preset: 'ts-jest/presets/js-with-babel', globals: { - "ts-jest": { - tsConfig: "packages/patternfly-4/react-core/tsconfig.jest.json" + 'ts-jest': { + tsConfig: 'packages/patternfly-4/react-core/tsconfig.jest.json' } } }; diff --git a/package.json b/package.json index bca7d01f9c2..475780604be 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,13 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "@babel/plugin-proposal-class-properties": "^7.0.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.0.0", + "@babel/preset-env": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@storybook/addon-actions": "^v3.4.11", "@storybook/addon-info": "^v3.4.11", "@storybook/addon-knobs": "^v3.4.11", @@ -33,17 +40,7 @@ "@storybook/addons": "^3.3.0", "@storybook/react": "^v3.4.11", "@storybook/storybook-deployer": "^2.1.0", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-eslint": "^9.0.0", - "babel-jest": "^23.6.0", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-export-extensions": "^6.22.0", - "babel-plugin-transform-imports": "^1.5.0", - "babel-plugin-transform-object-assign": "^6.22.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-preset-env": "^1.6.1", - "babel-preset-react": "^6.24.1", + "babel-plugin-typescript-to-proptypes": "^0.17.1", "change-case": "^3.0.2", "codecov": "^3.2.0", "commitizen": "^3.0.7", diff --git a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md index ea538d1eebe..8aff961ff5c 100644 --- a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.19.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react-extensions + + + + + # 2.19.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json index 0f8c520631a..a1419ba23b6 100644 --- a/packages/patternfly-3/patternfly-react-extensions/package.json +++ b/packages/patternfly-3/patternfly-react-extensions/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react-extensions", - "version": "2.19.0", + "version": "2.19.1", "private": false, "description": "This library provides an extended set of React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", @@ -42,7 +42,7 @@ "classnames": "^2.2.5", "css-element-queries": "^1.0.1", "patternfly": "^3.58.0", - "patternfly-react": "^2.36.0", + "patternfly-react": "^2.36.1", "react-bootstrap": "^0.32.1", "react-click-outside": "^3.0.1", "react-diff-view": "^1.8.1", @@ -51,6 +51,17 @@ "unidiff": "^1.0.1" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "rimraf": "^2.6.2", "shx": "^0.3.2" }, diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md index 53f612ca02b..dbdb650c84c 100644 --- a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.0.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react-wooden-tree + + + + + # 2.0.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/package.json b/packages/patternfly-3/patternfly-react-wooden-tree/package.json index f4db1ceb26a..9a6227dcfa5 100644 --- a/packages/patternfly-3/patternfly-react-wooden-tree/package.json +++ b/packages/patternfly-3/patternfly-react-wooden-tree/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react-wooden-tree", - "version": "2.0.0", + "version": "2.0.1", "description": "Reexport react-wooden-tree with Patternfly design.", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -33,6 +33,19 @@ "dependencies": { "react-wooden-tree": "^2.0.1" }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1" + }, "peerDependencies": { "prop-types": "^15.6.1", "react": "^16.3.2", diff --git a/packages/patternfly-3/patternfly-react/CHANGELOG.md b/packages/patternfly-3/patternfly-react/CHANGELOG.md index c480e4b7744..b1fdbbc9617 100644 --- a/packages/patternfly-3/patternfly-react/CHANGELOG.md +++ b/packages/patternfly-3/patternfly-react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 2.36.1 (2019-06-10) + +**Note:** Version bump only for package patternfly-react + + + + + # 2.36.0 (2019-06-05) diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json index a566382c20e..0dbebff8747 100644 --- a/packages/patternfly-3/patternfly-react/package.json +++ b/packages/patternfly-3/patternfly-react/package.json @@ -1,6 +1,6 @@ { "name": "patternfly-react", - "version": "2.36.0", + "version": "2.36.1", "private": false, "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", @@ -68,6 +68,17 @@ "clean": "rimraf dist" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "clean-css-cli": "^4.2.1", "react-axe": "^3.0.2", "rimraf": "^2.6.2", diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js index b1144b2adfe..1aa2c55d1c4 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js @@ -2,25 +2,6 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import CardTitle from './CardTitle'; -import CardBody from './CardBody'; -import CardHeading from './CardHeading'; -import CardFooter from './CardFooter'; -import CardLink from './CardLink'; -import CardGrid from './CardGrid'; -import CardDropdownButton from './CardDropdownButton'; -import CardHeightMatching from './CardHeightMatching'; -import { - UtilizationCard, - UtilizationCardDetails, - UtilizationCardDetailsCount, - UtilizationCardDetailsDesc, - UtilizationCardDetailsLine1, - UtilizationCardDetailsLine2 -} from './UtilizationTrendCard'; - -import { AggregateStatusCount, AggregateStatusNotifications, AggregateStatusNotification } from './AggregateStatusCard'; - /** * Card Component for PatternFly React */ @@ -69,22 +50,4 @@ Card.defaultProps = { cardRef: null }; -Card.Title = CardTitle; -Card.Body = CardBody; -Card.Heading = CardHeading; -Card.Footer = CardFooter; -Card.Link = CardLink; -Card.Grid = CardGrid; -Card.DropdownButton = CardDropdownButton; -Card.HeightMatching = CardHeightMatching; -Card.UtilizationCard = UtilizationCard; -Card.UtilizationCardDetails = UtilizationCardDetails; -Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount; -Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc; -Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1; -Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2; -Card.AggregateStatusCount = AggregateStatusCount; -Card.AggregateStatusNotifications = AggregateStatusNotifications; -Card.AggregateStatusNotification = AggregateStatusNotification; - export default Card; diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js index 8e1787d2d3a..0b589f4e73c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js @@ -1,7 +1,7 @@ import classNames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import { Card } from '../index'; +import Card from '../Card'; const UtilizationCard = ({ children, className, ...props }) => { const classes = classNames('card-pf-utilization', className); diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js index 64d2530f843..5252339c44c 100644 --- a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js +++ b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js @@ -17,6 +17,24 @@ import { UtilizationCardDetailsLine2 } from './UtilizationTrendCard'; +Card.Title = CardTitle; +Card.Body = CardBody; +Card.Heading = CardHeading; +Card.Footer = CardFooter; +Card.Link = CardLink; +Card.Grid = CardGrid; +Card.DropdownButton = CardDropdownButton; +Card.HeightMatching = CardHeightMatching; +Card.UtilizationCard = UtilizationCard; +Card.UtilizationCardDetails = UtilizationCardDetails; +Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount; +Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc; +Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1; +Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2; +Card.AggregateStatusCount = AggregateStatusCount; +Card.AggregateStatusNotifications = AggregateStatusNotifications; +Card.AggregateStatusNotification = AggregateStatusNotification; + export { Card, CardTitle, diff --git a/packages/patternfly-3/react-console/CHANGELOG.md b/packages/patternfly-3/react-console/CHANGELOG.md index 266b1ae15b1..701e3a9f6b1 100644 --- a/packages/patternfly-3/react-console/CHANGELOG.md +++ b/packages/patternfly-3/react-console/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.11.1 (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-console + + + + + # 1.11.0 (2019-06-05) diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json index fdb4d362a1c..1f16b3402c5 100644 --- a/packages/patternfly-3/react-console/package.json +++ b/packages/patternfly-3/react-console/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-console", - "version": "1.11.0", + "version": "1.11.1", "private": false, "description": "This library provides a set of Console React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", @@ -46,8 +46,19 @@ "xterm": "^3.3.0" }, "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-eslint": "^9.0.0", + "babel-jest": "^23.6.0", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-export-extensions": "^6.22.0", + "babel-plugin-transform-imports": "^1.5.0", + "babel-plugin-transform-object-assign": "^6.22.0", + "babel-plugin-transform-object-rest-spread": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", "patternfly": "^3.58.0", - "patternfly-react": "^2.36.0", + "patternfly-react": "^2.36.1", "rimraf": "^2.6.2", "shx": "^0.3.2" }, diff --git a/packages/patternfly-4/.babelrc b/packages/patternfly-4/.babelrc new file mode 100644 index 00000000000..38cc0d3fe51 --- /dev/null +++ b/packages/patternfly-4/.babelrc @@ -0,0 +1,11 @@ +{ + "presets": ["@babel/react"], + "ignore": ["**/__snapshots__", "**/*.d.ts"], + "plugins": [ + "@babel/plugin-transform-typescript", + "babel-plugin-typescript-to-proptypes", + "@babel/plugin-proposal-export-default-from", + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread", + ] +} diff --git a/packages/patternfly-4/.babelrc.js b/packages/patternfly-4/.babelrc.js deleted file mode 100644 index 0804442c329..00000000000 --- a/packages/patternfly-4/.babelrc.js +++ /dev/null @@ -1,38 +0,0 @@ -const babelENV = process.env.BABEL_ENV || 'development'; -const modules = babelENV !== 'production:esm' ? 'commonjs' : false; - -module.exports = { - presets: [['env', { modules }], 'react'], - plugins: [ - 'transform-class-properties', - 'transform-export-extensions', - 'transform-object-rest-spread', - 'transform-object-assign', - babelENV !== 'development' && [ - 'transform-imports', - { - '@patternfly/react-icons': { - kebabCase: true, - preventFullImport: true, - transform: importName => { - if (importName.toLowerCase() === 'icon') { - throw new Error('Icon import is not allowed'); - } - const importPath = `icons/${importName}`; - if (!modules) { - return `@patternfly/react-icons/dist/esm/${importPath}`; - } - return `@patternfly/react-icons/dist/js/${importPath}`; - } - } - } - ] - ].filter(Boolean), - ignore: (() => { - const ignore = ['src/**/__snapshots__']; - if (babelENV.includes('production')) { - ignore.push('test.js', '__mocks__'); - } - return ignore; - })() -}; diff --git a/packages/patternfly-4/react-charts/.babelrc b/packages/patternfly-4/react-charts/.babelrc new file mode 100644 index 00000000000..25c4221a16d --- /dev/null +++ b/packages/patternfly-4/react-charts/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-charts/.babelrc.js b/packages/patternfly-4/react-charts/.babelrc.js deleted file mode 100644 index a59fe297daa..00000000000 --- a/packages/patternfly-4/react-charts/.babelrc.js +++ /dev/null @@ -1,5 +0,0 @@ -const coreConfig = require('../react-core/.babelrc.js'); - -module.exports = { - ...coreConfig -} diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md index 02e57a52717..dbfd1fb1926 100644 --- a/packages/patternfly-4/react-charts/CHANGELOG.md +++ b/packages/patternfly-4/react-charts/CHANGELOG.md @@ -3,6 +3,41 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [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 diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json index 3029c840b83..3442af6a225 100644 --- a/packages/patternfly-4/react-charts/package.json +++ b/packages/patternfly-4/react-charts/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-charts", - "version": "4.1.1", + "version": "4.1.5", "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", @@ -29,7 +29,7 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^3.3.0" + "@patternfly/react-styles": "^3.3.3" }, "peerDependencies": { "prop-types": "^15.6.1", @@ -37,10 +37,10 @@ }, "scripts": { "build": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js", - "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm && yarn build:babel:umd'", - "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q", - "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q", - "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q", + "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "build:types": "tsc -p tsconfig.gen-dts.json", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps", @@ -60,17 +60,14 @@ "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", - "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/patternfly": "2.12.5", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-tokens": "^2.5.5", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", - "babel-plugin-transform-imports": "^1.5.0", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx index fde2c785622..5e3f7343830 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx @@ -122,8 +122,14 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut + * height. + * + * The innerRadius may also need to be set when changing the donut size. */ donutHeight?: number; /** @@ -138,8 +144,13 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width. + * + * The innerRadius may also need to be set when changing the donut size. */ donutWidth?: number; /** @@ -211,7 +222,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same height in order to maintain the aspect ratio. */ height?: number; /** @@ -344,7 +358,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same width in order to maintain the aspect ratio. */ width?: number; /** @@ -383,11 +400,12 @@ export const ChartDonutThreshold: React.FunctionComponent { // Returns computed data representing pie chart slices @@ -410,42 +428,48 @@ export const ChartDonutThreshold: React.FunctionComponent { + const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width); switch (orientation) { case 'left': - return Math.round((theme.pie.width - dynamicTheme.pie.width) / 2); + return Math.round((donutWidth - dynamicWidth) / 2); case 'right': - return -Math.round((theme.pie.width - dynamicTheme.pie.width) / 2); + return -Math.round((donutWidth - dynamicWidth) / 2); default: return 0; } }; // Returns the vertical shift for the dynamic utilization donut cart - const getDynamicDonutDy = (dynamicTheme: ChartThemeDefinition) => - Math.round((theme.pie.height - dynamicTheme.pie.height) / 2); + const getDynamicDonutDy = (dynamicTheme: ChartThemeDefinition) => { + const dynamicHeight = donutHeight - (theme.pie.height - dynamicTheme.pie.height); + return Math.round((donutHeight - dynamicHeight) / 2); + } // Render dynamic utilization donut cart const renderChildren = () => React.Children.toArray(children).map(child => { - const datum = getData([{ ...child.props.data }]); - const orientation = child.props.donutOrientation || donutOrientation; - const dynamicTheme = - child.props.theme || - getDonutThresholdDynamicTheme(child.props.themeColor || themeColor, - child.props.themeVariant || themeVariant); - return React.cloneElement(child, { - donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation), - donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme), - donutHeight: child.props.donutHeight || dynamicTheme.pie.height, - donutOrientation: orientation, - donutWidth: child.props.donutWidth || dynamicTheme.pie.width, - endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100), - height: child.props.height || height, - showStatic: child.props.showStatic || false, - standalone: false, - theme: dynamicTheme, - width: child.props.width || width - }); + if (child.props) { + const datum = getData([{ ...child.props.data }]); + const orientation = child.props.donutOrientation || donutOrientation; + const dynamicTheme = + child.props.theme || + getDonutThresholdDynamicTheme(child.props.themeColor || themeColor, + child.props.themeVariant || themeVariant); + return React.cloneElement(child, { + donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation), + donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme), + donutHeight: child.props.donutHeight || donutHeight - (theme.pie.height - dynamicTheme.pie.height), + donutOrientation: orientation, + donutWidth: child.props.donutWidth || donutWidth - (theme.pie.width - dynamicTheme.pie.width), + endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100), + height: child.props.height || height, + showStatic: child.props.showStatic || false, + standalone: false, + theme: dynamicTheme, + width: child.props.width || width + }); + } + return child; }); // Static threshold dount chart diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx index 425be3bd16e..42874621cc6 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx @@ -60,6 +60,13 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})} */ animate?: AnimatePropTypeInterface; + /** + * The capHeight prop defines a text metric for the font being used: the expected height of capital letters. + * This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of + * line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a + * unitless number, it is assumed to be ems. + */ + capHeight?: StringOrNumberOrCallback; /** * 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 @@ -134,8 +141,14 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut + * height. + * + * The innerRadius may also need to be set when changing the donut size. */ donutHeight?: number; /** @@ -150,8 +163,13 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the - * innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate + * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width. + * + * The innerRadius may also need to be set when changing the donut size. */ donutWidth?: number; /** @@ -223,7 +241,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same height in order to maintain the aspect ratio. */ height?: number; /** @@ -250,7 +271,9 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { */ labelPosition?: 'startAngle' | 'endAngle' | 'centroid'; /** - * The legend component to render with chart. This overrides other legend props. + * The legend component to render with chart. + * + * Note: Default legend properties may be applied */ legendComponent?: React.ReactElement; /** @@ -261,8 +284,6 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * Each data point may be any format you wish (depending on the `x` and `y` accessor props), * but by default, an object with x and y properties is expected. * - * Note: Not compatible with legendComponent prop. - * * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]} */ legendData?: any[]; @@ -274,9 +295,6 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * and text-wrapping is not currently supported, so "vertical" * orientation is both the default setting and recommended for * displaying many series of data. - * - * Note: May need to set legendHeight and legendWidth in order to position properly. - * Not compatible with legendComponent prop. */ legendOrientation?: 'horizontal' | 'vertical'; /** @@ -402,7 +420,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps { * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of * pixels will depend on the size of the container the chart is rendered into. * - * Note: innerRadius may need to be set when using this property. + * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size) + * in order to accommodate the extra legend. + * + * Typically, the parent container is set to the same width in order to maintain the aspect ratio. */ width?: number; /** @@ -449,11 +470,12 @@ export const ChartDonutUtilization: React.FunctionComponent { // Returns computed data representing pie chart slices @@ -490,9 +512,31 @@ export const ChartDonutUtilization: React.FunctionComponent { if (legendComponent) { - return legendComponent; - } - if (legendData) { + const props = legendComponent.props; + return React.cloneElement(legendComponent, { + data: props.data ? props.data : legendData, + orientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + standalone: false, + theme: props.theme ? props.theme : theme, + x: props.x ? props.x : getLegendX({ + chartOrientation: donutOrientation, + legendOrientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + legendWidth: getLegendDimensions().width, + theme, + width + }), + y: props.y ? props.y : getLegendY({ + chartDy: donutDy, + chartHeight: donutHeight, + chartOrientation: donutOrientation, + chartType: 'pie', + height, + legendData: props.data ? props.data : legendData, + legendHeight: getLegendDimensions().height, + theme + }) + }); + } else if (legendData) { return ( @@ -522,6 +566,25 @@ export const ChartDonutUtilization: React.FunctionComponent { + if (legendComponent) { + const props = legendComponent.props; + return (VictoryLegend as any).getDimensions({ + data: props.data ? props.data : legendData, + orientation: props.legendOrientation ? props.legendOrientation : legendOrientation, + theme: props.theme ? props.theme : theme, + }); + } else if (legendData) { + return (VictoryLegend as any).getDimensions({ + data: legendData, + orientation: legendOrientation, + theme + }); + } + return {}; + } + // Returns theme based on threshold and current value const getThresholdTheme = () => { const newTheme = { ...theme }; @@ -543,18 +606,10 @@ export const ChartDonutUtilization: React.FunctionComponent `; diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap index 31cd7c1e016..846aca8d1e8 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -1015,8 +1015,8 @@ exports[`renders component data 1`] = ` } textAnchor="middle" verticalAnchor="middle" - x={115} - y={115} + x={100} + y={100} /> `; diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md index 83c9a08756d..d0eff3dd7eb 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md @@ -58,7 +58,7 @@ class UtilizationChart extends React.Component { const { spacer, used } = this.state; return (
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -108,7 +108,7 @@ class UtilizationChart extends React.Component { const { spacer, used } = this.state; return (
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -133,9 +133,10 @@ import React from 'react'; import { ChartDonutUtilization } from '@patternfly/react-charts';
-
+
datum.x ? `${datum.x} - ${datum.y}%` : null} @@ -157,7 +158,7 @@ import React from 'react'; import { ChartDonutUtilization } from '@patternfly/react-charts';
-
+
-
+
datum.x ? datum.x : null} - width={475} > -
+
datum.x ? datum.x : null} @@ -245,7 +245,7 @@ class ThresholdChart extends React.Component { } ``` -## Green donut utilization chart with static thresholds and right-aligned legend +## Green donut utilization chart with static thresholds and right-aligned (custom) legend ```js import React from 'react'; import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts'; @@ -273,7 +273,7 @@ class ThresholdChart extends React.Component { const { used } = this.state; return (
-
+
datum.x ? datum.x : null} @@ -282,7 +282,11 @@ class ThresholdChart extends React.Component { datum.x ? `${datum.x} - ${datum.y}%` : null} - legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]} + legendComponent={ + + } subTitle="of 100 GBps" title={`${used}%`} themeColor={ChartThemeColor.green} @@ -303,13 +307,13 @@ import React from 'react'; import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
-
+
datum.x ? datum.x : null} - width={275} + width={230} > -
+
``` + +## Small donut utilization chart +```js +import React from 'react'; +import { ChartDonutUtilization } from '@patternfly/react-charts'; + +
+
+ datum.x ? `${datum.x} - ${datum.y}%` : null} + subTitle="of 100 GBps" + title="75%" + width={150} + /> +
+
+``` + +## Small donut utilization chart with right-aligned legend +```js +import React from 'react'; +import { ChartDonutUtilization } from '@patternfly/react-charts'; + +class UtilizationChart extends React.Component { + constructor(props) { + super(props); + this.state = { + spacer: '', + used: 0 + }; + } + + componentDidMount() { + this.interval = setInterval(() => { + const { used } = this.state; + const val = (used + 10) % 100; + this.setState({ + spacer: val < 10 ? ' ' : '', + used: val + }); + }, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + const { spacer, used } = this.state; + return ( +
+
+ datum.x ? `${datum.x} - ${datum.y}%` : null} + legendData={[{ name: `GBps capacity - ${spacer}${used}%` }, { name: 'Unused' }]} + subTitle="of 100 GBps" + title={`${used}%`} + thresholds={[{ value: 60 }, { value: 90 }]} + width={350} + /> +
+
+ ); + } +} +``` + +## Small donut utilization chart with static thresholds +```js +import React from 'react'; +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; + +
+
+ datum.x ? datum.x : null} + width={175} + > + datum.x ? `${datum.x} - ${datum.y}%` : null} + subTitle="of 100 GBps" + title="45%" + /> + +
+
+``` + +## Small donut utilization chart with static thresholds and right-aligned legend +```js +import React from 'react'; +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; + +class ThresholdChart extends React.Component { + constructor(props) { + super(props); + this.state = { + used: 0 + }; + } + + componentDidMount() { + this.interval = setInterval(() => { + const { used } = this.state; + this.setState({ used: (used + 10) % 100 }); + }, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + const { used } = this.state; + return ( +
+
+ datum.x ? datum.x : null} + width={425} + > + datum.x ? `${datum.x} - ${datum.y}%` : null} + legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]} + subTitle="of 100 GBps" + title={`${used}%`} + thresholds={[{ value: 60 }, { value: 90 }]} + /> + +
+
+ ); + } +} +``` diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss index 13de880e58a..8e37a9a8f27 100644 --- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss +++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss @@ -1,18 +1,33 @@ .ws-preview { & > * { - .donut-threshold-chart-horz { + .donut-threshold-chart { height: 230px; - width: 492px; + width: 230px; + } + + .donut-threshold-chart-sm { + height: 175px; + width: 175px; } - .donut-threshold-chart-horz-sm { + .donut-threshold-chart-legend-bottom { + height: 325px; + width: 230px; + } + + .donut-threshold-chart-legend-left { height: 230px; width: 475px; } - .donut-threshold-chart-vert { - height: 325px; - width: 275px; + .donut-threshold-chart-legend-right { + height: 230px; + width: 492px; + } + + .donut-threshold-chart-legend-right-sm { + height: 175px; + width: 425px; } .donut-utilization-chart { @@ -20,19 +35,29 @@ width: 230px; } - .donut-utilization-chart-horz { - height: 230px; - width: 435px; + .donut-utilization-chart-sm { + height: 150px; + width: 150px; + } + + .donut-utilization-chart-legend-bottom { + height: 275px; + width: 300px; } - .donut-utilization-chart-horz-sm { + .donut-utilization-chart-legend-left { height: 230px; width: 425px; } - .donut-utilization-chart-vert { - height: 275px; - width: 300px; + .donut-utilization-chart-legend-right { + height: 230px; + width: 435px; + } + + .donut-utilization-chart-legend-right-sm { + height: 150px; + width: 350px; } } } diff --git a/packages/patternfly-4/react-core/.babelrc b/packages/patternfly-4/react-core/.babelrc new file mode 100644 index 00000000000..25c4221a16d --- /dev/null +++ b/packages/patternfly-4/react-core/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "../.babelrc" +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/.babelrc.js b/packages/patternfly-4/react-core/.babelrc.js deleted file mode 100644 index ee1e6c7192e..00000000000 --- a/packages/patternfly-4/react-core/.babelrc.js +++ /dev/null @@ -1,20 +0,0 @@ -const babelENV = process.env.BABEL_ENV || 'development'; -const modules = babelENV !== 'production:esm' ? 'commonjs' : false; - -module.exports = { - presets: [['@babel/env', { modules }], '@babel/react'], - ignore: (() => { - const ignore = ['**/__snapshots__', '**/*.d.ts']; - if (babelENV.includes('production')) { - ignore.push('test.js', '__mocks__'); - } - return ignore; - })(), - plugins: [ - '@babel/plugin-transform-typescript', - 'babel-plugin-typescript-to-proptypes', - '@babel/plugin-proposal-export-default-from', - '@babel/proposal-class-properties', - '@babel/proposal-object-rest-spread', - ] -}; diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md index 099c8896239..d8b74182567 100644 --- a/packages/patternfly-4/react-core/CHANGELOG.md +++ b/packages/patternfly-4/react-core/CHANGELOG.md @@ -3,6 +3,63 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [3.39.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.1...@patternfly/react-core@3.39.0) (2019-06-11) + + +### Features + +* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc)) + + + + + +## [3.38.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.0...@patternfly/react-core@3.38.1) (2019-06-11) + +**Note:** Version bump only for package @patternfly/react-core + + + + + +# [3.38.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.1...@patternfly/react-core@3.38.0) (2019-06-10) + + +### Features + +* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771)) + + + + + +## [3.37.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.0...@patternfly/react-core@3.37.1) (2019-06-10) + +**Note:** Version bump only for package @patternfly/react-core + + + + + +# [3.37.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.1...@patternfly/react-core@3.37.0) (2019-06-07) + + +### Features + +* **PF4: Pagination:** When empty array sent to pagination no per page should be visible ([#2175](https://github.com/patternfly/patternfly-react/issues/2175)) ([cb97dfd](https://github.com/patternfly/patternfly-react/commit/cb97dfd)) + + + + + +## [3.36.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.0...@patternfly/react-core@3.36.1) (2019-06-06) + +**Note:** Version bump only for package @patternfly/react-core + + + + + # [3.36.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.35.0...@patternfly/react-core@3.36.0) (2019-06-05) diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json index 4eb2373ffde..3f71ab48212 100644 --- a/packages/patternfly-4/react-core/package.json +++ b/packages/patternfly-4/react-core/package.json @@ -1,13 +1,14 @@ { "name": "@patternfly/react-core", - "version": "3.36.0", + "version": "3.39.0", "description": "This library provides a set of common React components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/js/index.d.ts", "patternfly:src": "src/", "sideEffects": [ - "*.css" + "*.css", + "*.scss" ], "publishConfig": { "access": "public", @@ -30,9 +31,9 @@ "scripts": { "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./scripts/copyTS.js && node ./scripts/copyStyles.js", "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'", - "build:babel:cjs": "babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q", - "build:babel:esm": "babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q", - "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q", + "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env", + "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm", + "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd", "build:types": "tsc -p tsconfig.gen-dts.json", "clean": "rimraf dist", "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose", @@ -40,9 +41,9 @@ "typecheck": "tsc -p tsconfig.typecheck.json" }, "dependencies": { - "@patternfly/react-icons": "^3.9.3", - "@patternfly/react-styles": "^3.3.0", - "@patternfly/react-tokens": "^2.5.3", + "@patternfly/react-icons": "^3.9.5", + "@patternfly/react-styles": "^3.3.3", + "@patternfly/react-tokens": "^2.5.5", "@tippy.js/react": "^1.1.1", "emotion": "^9.2.9", "exenv": "^1.2.2", @@ -53,13 +54,11 @@ "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", - "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-object-rest-spread": "^7.0.0", - "@babel/plugin-transform-object-assign": "^7.0.0", "@babel/plugin-transform-typescript": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", - "@patternfly/patternfly": "2.8.2", + "@patternfly/patternfly": "2.12.5", "@types/enzyme": "3.9.0", "@types/exenv": "^1.2.0", "@types/jest": "^24.0.11", @@ -67,7 +66,6 @@ "@types/react": "~16.8.0", "@types/react-dom": "~16.8.0", "babel-plugin-transform-es2015-modules-umd": "^6.24.1", - "babel-plugin-transform-imports": "^1.5.0", "babel-plugin-typescript-to-proptypes": "^0.17.1", "css": "^2.2.3", "enzyme": "3.9.0", diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx index aacbe730a2b..497b6cd2062 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx +++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx @@ -5,7 +5,7 @@ import { AboutModalBoxHero } from './AboutModalBoxHero'; import { AboutModalBoxBrand } from './AboutModalBoxBrand'; import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton'; import { AboutModalBox } from './AboutModalBox'; -import Backdrop from '../Backdrop/Backdrop'; +import { Backdrop } from '../Backdrop/Backdrop'; import Bullseye from '../../layouts/Bullseye/Bullseye'; export interface AboutModalContainerProps extends React.HTMLProps { diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap index 6f52e4feea7..3da487c4c62 100644 --- a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`About Modal Container Test isOpen 1`] = ` - + - + `; exports[`About Modal Container Test simple 1`] = `""`; diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js index 26061c99524..37f3dc566de 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js @@ -2,18 +2,36 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Accordion/accordion'; +import AccordionToggle from './AccordionToggle'; + +export const accordionContext = React.createContext({ headingLevel: 'h3' }); + +export const HeadingLevelTypes = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6' +}; const Accordion = ({ children, className, 'aria-label': ariaLabel, ...props }) => (
- {children} + + {children} +
); +Accordion.contextType = accordionContext; + Accordion.propTypes = { /** Content rendered inside the Accordion */ children: PropTypes.node, /** Additional classes added to the Accordion */ className: PropTypes.string, + /** Allows user to specify heading level */ + headingLevel: PropTypes.oneOf(Object.values(HeadingLevelTypes)), /** Adds accessible text to the Accordion */ 'aria-label': PropTypes.string, /** Additional props are spread to the container
*/ @@ -23,6 +41,7 @@ Accordion.propTypes = { Accordion.defaultProps = { children: null, className: '', + headingLevel: HeadingLevelTypes.h3, 'aria-label': '' }; diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js index 663e9711529..046c8ecd05b 100644 --- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js +++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js @@ -3,21 +3,38 @@ import PropTypes from 'prop-types'; import { css } from '@patternfly/react-styles'; import { AngleRightIcon } from '@patternfly/react-icons'; import styles from '@patternfly/react-styles/css/components/Accordion/accordion'; +import { accordionContext, HeadingLevelTypes } from './Accordion'; + +// export const HeadingLevelTypes = { +// h1: 'h1', +// h2: 'h2', +// h3: 'h3', +// h4: 'h4', +// h5: 'h5', +// h6: 'h6' +// }; const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => ( + // const HeadingLevel = HeadingLevelTypes[headingLevel]; +
-

- -

+ + {({ headingLevel }) => ( + + + + )} + ; +
); @@ -30,6 +47,8 @@ AccordionToggle.propTypes = { isExpanded: PropTypes.bool, /** Identify the Accordion toggle number */ id: PropTypes.string.isRequired, + /** Allows user to specify heading level */ + headingLevel: PropTypes.oneOf(Object.values(HeadingLevelTypes)), /** Additional props are spread to the container
*/ '': PropTypes.any // eslint-disable-line react/require-default-props }; @@ -37,6 +56,7 @@ AccordionToggle.propTypes = { AccordionToggle.defaultProps = { className: '', children: null, + headingLevel: 'h3', isExpanded: false }; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts deleted file mode 100644 index 9b873b3e085..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ApplicationLauncherProps extends HTMLProps { - dropdownItems: ReactNode[]; - isOpen?: boolean; - onSelect(event: React.SyntheticEvent): void; - onToggle?(event: React.SyntheticEvent): void; -} - -declare const ApplicationLauncher: FunctionComponent; - -export default ApplicationLauncher; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js deleted file mode 100644 index 84e1595c113..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Children, cloneElement } from 'react'; -import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; -import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; -import ApplicationLauncherMenu from './ApplicationLauncherMenu'; -import Toggle from './Toggle'; -import { ThIcon } from '@patternfly/react-icons'; -import { DropdownContext } from '../Dropdown/dropdownConstants'; -import GenerateId from '../../helpers/GenerateId/GenerateId'; - -export const propTypes = { - /** Additional element css classes */ - className: PropTypes.string, - /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */ - dropdownItems: PropTypes.array, - /** open bool */ - isOpen: PropTypes.bool, - /** Function callback called when user selects item */ - onSelect: PropTypes.func, - /** Callback called when application launcher toggle is clicked */ - onToggle: PropTypes.func, - /** Adds accessible text to the button. Required for plain buttons */ - 'aria-label': PropTypes.string -}; - -export const defaultProps = { - className: '', - dropdownItems: [], - isOpen: false, - onSelect: Function.prototype, - onToggle: Function.prototype, - 'aria-label': 'Actions' -}; - -class ApplicationLauncher extends React.Component { - onEnter = () => { - this.openedOnEnter = true; - }; - - componentDidUpdate() { - if (!this.props.isOpen) this.openedOnEnter = false; - } - - render() { - const { 'aria-label': ariaLabel, dropdownItems, className, isOpen, onSelect, onToggle } = this.props; - return ( - - {randomId => ( -
{ - this.parentRef = ref; - }} - > - {Children.map( - - - , - oneToggle => - cloneElement(oneToggle, { - parentRef: this.parentRef, - id: randomId, - isOpen, - isPlain: true, - 'aria-haspopup': true, - onEnter: this.onEnter - }) - )} - {isOpen && ( - onSelect && onSelect(event)}> - - {dropdownItems} - - - )} -
- )} - - ); - } -} - -ApplicationLauncher.propTypes = propTypes; -ApplicationLauncher.defaultProps = defaultProps; - -export default ApplicationLauncher; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md index 205b23f870a..28cff0d2ec5 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md @@ -2,6 +2,7 @@ title: 'Application launcher' cssPrefix: 'pf-c-app-launcher' propComponents: ['ApplicationLauncher'] +typescript: true --- import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js index 7208f104f39..96f4f47b7ea 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import ApplicationLauncher from './ApplicationLauncher'; -import DropdownItem from '../Dropdown/DropdownItem'; +import { ApplicationLauncher } from './ApplicationLauncher'; +import { DropdownItem } from '../Dropdown/DropdownItem'; import { DropdownPosition, DropdownDirection } from '../Dropdown/dropdownConstants'; import DropdownSeparator from '../Dropdown/Separator'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx new file mode 100644 index 00000000000..b551f3f9159 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; +import { css } from '@patternfly/react-styles'; +import { ApplicationLauncherMenu } from './ApplicationLauncherMenu'; +import { ApplicationLauncherToggle } from './ApplicationLauncherToggle'; +import { ThIcon } from '@patternfly/react-icons'; +import { DropdownContext } from '../Dropdown/dropdownConstants'; +import GenerateId from '../../helpers/GenerateId/GenerateId'; + +export interface ApplicationLauncherProps extends React.HTMLProps { + /** Additional element css classes */ + className: string; + /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */ + dropdownItems: React.ReactNode[]; + /** open bool */ + isOpen: boolean; + /** Function callback called when user selects item */ + onSelect: (event: any) => void; + /** Callback called when application launcher toggle is clicked */ + onToggle?: (value: boolean) => void; + /** Adds accessible text to the button. Required for plain buttons */ + 'aria-label': string; +} + +export class ApplicationLauncher extends React.Component { + static defaultProps = { + className: '', + dropdownItems: [] as React.ReactNode[], + isOpen: false, + onSelect: (_event: any): any => undefined, + onToggle: (_value: boolean): any => undefined, + 'aria-label': 'Actions' + }; + + parentRef = React.createRef(); + openedOnEnter: boolean = false; + + onEnter = () => { + this.openedOnEnter = true; + }; + + componentDidUpdate() { + if (!this.props.isOpen){ this.openedOnEnter = false}; + } + + render() { + const { 'aria-label': ariaLabel, dropdownItems, className, isOpen, onSelect, onToggle } = this.props; + return ( + + {randomId => ( +
+ {React.Children.map( + + + , + oneToggle => + React.cloneElement(oneToggle, { + parentRef: this.parentRef, + id: randomId, + isOpen, + isPlain: true, + 'aria-haspopup': true, + onEnter: this.onEnter + }) + )} + {isOpen && ( + + + {dropdownItems} + + + )} +
+ )} + + ); + } +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx similarity index 53% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx index 5faa51d7443..9637e094f49 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.tsx @@ -1,61 +1,55 @@ -import React from 'react'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher'; import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; import { ApplicationLauncherPosition } from './applicationLauncherConstants'; import { DropdownArrowContext } from '../Dropdown/dropdownConstants'; -import ReactDOM from 'react-dom'; import { keyHandler } from '../../helpers/util'; import { KEY_CODES, KEYHANDLER_DIRECTION } from '../../helpers/constants'; -const propTypes = { - /** Anything which can be rendered as dropdown items */ - children: PropTypes.node, - /** Classess applied to root element of dropdown menu */ - className: PropTypes.string, - /** internal index of the item */ - index: PropTypes.number, - /** Flag to indicate if menu is opened */ - isOpen: PropTypes.bool, - /** Flag to indicate if menu should be opened on enter */ - openedOnEnter: PropTypes.bool, - /** Indicates where menu will be alligned horizontally */ - position: PropTypes.oneOf(Object.values(ApplicationLauncherPosition)), - /** Additional props are spread to the container component */ - '': PropTypes.any // eslint-disable-line react/require-default-props -}; +export interface ApplicationLauncherMenuProps extends React.HTMLProps { + /** Anything which can be rendered as dropdown items */ + children?: React.ReactNode; + /** Classess applied to root element of dropdown menu */ + className?: string; + /** internal index of the item */ + index?: number; + /** Flag to indicate if menu is opened */ + isOpen?: boolean; + /** Flag to indicate if menu should be opened on enter */ + openedOnEnter?: boolean; + /** Indicates where menu will be alligned horizontally */ + position?: typeof ApplicationLauncherPosition | keyof typeof ApplicationLauncherPosition; +} -const defaultProps = { - children: null, - className: '', - index: null, - isOpen: true, - openedOnEnter: false, - position: ApplicationLauncherPosition.left -}; +export class ApplicationLauncherMenu extends React.Component { + refsCollection: any[] = []; + ref = React.createRef(); -class ApplicationLauncherMenu extends React.Component { - refsCollection = []; + static defaultProps = { + children: null as React.ReactNode, + className: '', + index: null as number, + isOpen: true, + openedOnEnter: false, + position: ApplicationLauncherPosition.left + }; - childKeyHandler = (index, position, custom = false) => { - keyHandler(index, position, this.refsCollection, this.props.children, custom); + childKeyHandler = (index: number, position: any, custom = false) => { + keyHandler(index, position, this.refsCollection, this.props.children as any[], custom); }; - onKeyDown = event => { + onKeyDown = (event: any) => { // Detected key press on this item, notify the menu parent so that the appropriate // item can be focused - if (event.key === KEY_CODES.TAB) return; + if (event.key === KEY_CODES.TAB) {return}; event.preventDefault(); if (event.keyCode === KEY_CODES.ARROW_UP) { - keyHandler(this.props.index, KEYHANDLER_DIRECTION.UP, this.refsCollection, this.props.children); + keyHandler(this.props.index, KEYHANDLER_DIRECTION.UP, this.refsCollection, this.props.children as any[]); } else if (event.keyCode === KEY_CODES.ARROW_DOWN) { - keyHandler(this.props.index, KEYHANDLER_DIRECTION.DOWN, this.refsCollection, this.props.children); + keyHandler(this.props.index, KEYHANDLER_DIRECTION.DOWN, this.refsCollection, this.props.children as any[]); } else if (event.key === KEY_CODES.ENTER) { - if (!this.ref.current.getAttribute) { - ReactDOM.findDOMNode(this.ref.current).click(); // eslint-disable-line react/no-find-dom-node - } else { - this.ref.current.click && this.ref.current.click(); - } + this.ref.current.click(); } }; @@ -65,7 +59,7 @@ class ApplicationLauncherMenu extends React.Component { } } - sendRef = (index, node, isDisabled) => { + sendRef = (index: number, node: any, isDisabled: boolean) => { if (!node.getAttribute) { this.refsCollection[index] = ReactDOM.findDOMNode(node); // eslint-disable-line react/no-find-dom-node } else if (isDisabled || node.getAttribute('role') === 'separator') { @@ -77,7 +71,7 @@ class ApplicationLauncherMenu extends React.Component { extendChildren() { return React.Children.map(this.props.children, (child, index) => - React.cloneElement(child, { + React.cloneElement(child as any, { index, isAppLauncher: true }) @@ -100,9 +94,4 @@ class ApplicationLauncherMenu extends React.Component { ); } -} - -ApplicationLauncherMenu.propTypes = propTypes; -ApplicationLauncherMenu.defaultProps = defaultProps; - -export default ApplicationLauncherMenu; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx similarity index 50% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx index 1b1c24003f9..5fbcf2997e9 100644 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherToggle.tsx @@ -1,53 +1,53 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Button/button'; import { css } from '@patternfly/react-styles'; import { KEY_CODES } from '../../helpers/constants'; -const propTypes = { - /** HTML ID of toggle */ - id: PropTypes.string.isRequired, - /** Type to put on the button */ - type: PropTypes.string, - /** Anything which can be rendered as toggle */ - children: PropTypes.node, - /** Classes applied to root element of toggle */ - className: PropTypes.string, - /** Flag to indicate if menu is opened */ - isOpen: PropTypes.bool, - /** Callback called when toggle is clicked */ - onToggle: PropTypes.func, - /** Callback for toggle open on keyboard entry */ - onEnter: PropTypes.func, - /** Element which wraps toggle */ - parentRef: PropTypes.any, - /** Forces focus state */ - isFocused: PropTypes.bool, - /** Forces hover state */ - isHovered: PropTypes.bool, - /** Forces active state */ - isActive: PropTypes.bool, - /** Display the toggle with no border or background */ - isPlain: PropTypes.bool, - /** Additional props are spread to the container ); } -} - -ApplicationLauncherToggle.propTypes = propTypes; -ApplicationLauncherToggle.defaultProps = defaultProps; - -export default ApplicationLauncherToggle; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts deleted file mode 100644 index d9d4dc49c7c..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const ApplicationLauncherPosition: { - right: 'right'; - left: 'left'; -}; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js rename to packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.tsx diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts deleted file mode 100644 index eb80d448cc0..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ApplicationLauncher } from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js deleted file mode 100644 index eb80d448cc0..00000000000 --- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as ApplicationLauncher } from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts new file mode 100644 index 00000000000..3554cd7dddd --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts @@ -0,0 +1 @@ +export * from './ApplicationLauncher'; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts deleted file mode 100644 index d618ac52dba..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface BackdropProps extends HTMLProps { - children?: ReactNode; - className?: string; -} - -declare const Backdrop: FunctionComponent; - -export default Backdrop; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js deleted file mode 100644 index 066f421ce34..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@patternfly/react-styles'; -import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; - -const propTypes = { - /** content rendered inside the backdrop */ - children: PropTypes.node, - /** additional classes added to the button */ - className: PropTypes.string -}; - -const defaultProps = { - children: null, - className: '' -}; - -const Backdrop = ({ className, children, ...props }) => ( -
- {children} -
-); - -Backdrop.propTypes = propTypes; -Backdrop.defaultProps = defaultProps; - -export default Backdrop; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx similarity index 82% rename from packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js rename to packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx index 99d675aca51..cfd8d97ec70 100644 --- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js +++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import Backdrop from './Backdrop'; +import { Backdrop } from './Backdrop'; test('Backdrop Test', () => { const view = shallow(Backdrop); diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx new file mode 100644 index 00000000000..ae7b7c8d7ce --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop'; + +export interface BackdropProps extends React.HTMLProps { + /** content rendered inside the backdrop */ + children?: React.ReactNode; + /** additional classes added to the button */ + className?: string; +} + +export const Backdrop: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: BackdropProps) => ( +
+ {children} +
+) \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap b/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap rename to packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts deleted file mode 100644 index c76cf6cade7..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Backdrop, BackdropProps } from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.js b/packages/patternfly-4/react-core/src/components/Backdrop/index.js deleted file mode 100644 index 70cf60d910c..00000000000 --- a/packages/patternfly-4/react-core/src/components/Backdrop/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Backdrop } from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts new file mode 100644 index 00000000000..b4c58db120a --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts @@ -0,0 +1 @@ +export * from './Backdrop'; diff --git a/packages/patternfly-4/react-core/src/components/Card/Card.md b/packages/patternfly-4/react-core/src/components/Card/Card.md index 0f9df1e0d64..c96ec63f988 100644 --- a/packages/patternfly-4/react-core/src/components/Card/Card.md +++ b/packages/patternfly-4/react-core/src/components/Card/Card.md @@ -5,7 +5,8 @@ typescript: true propComponents: ['Card', 'CardHeader', 'CardBody', 'CardFooter'] --- -import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; +import { Card, CardActions, CardHead, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core'; +import pfLogo from './examples/pfLogo.svg'; ## Simple card ```js @@ -21,6 +22,263 @@ SimpleCard = () => ( ); ``` +## Card with image and actions +```js +import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; +import pfLogo from './examples/pfLogo.svg'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + + Header + Body + Footer + + ); + } +} +``` + +## Card header in card head +```js + import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + This is a really really really really really really really really really really long header + + Body + Footer + + ); + } +} +``` + +## Only actions in card head (no header/footer) +```js + import React from 'react'; +import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; + +class KebabDropdown extends React.Component { + constructor(props) { + super(props); + this.state = { + isOpen: false, + check1: false + }; + this.onToggle = isOpen => { + this.setState({ + isOpen + }); + }; + this.onSelect = event => { + this.setState({ + isOpen: !this.state.isOpen + }); + }; + this.onClick = (checked, event) => { + const target = event.target; + const value = target.type === 'checkbox' ? target.checked : target.value; + const name = target.name; + this.setState({ [name]: value }); + }; + } + + render() { + const { isOpen } = this.state; + const dropdownItems = [ + Link, + + Action + , + + Disabled Link + , + + Disabled Action + , + , + Separated Link, + + Separated Action + + ]; + return ( + + + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + position={'right'} + /> + + + + This is the card body, there is only actions in the card head. + + ); + } +} +``` + +## Only image in the card head +```js +import React from 'react'; +import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core'; + +ImageCard = () => ( + + + + + Header + Body + Footer + +); +``` + ## Card with no footer ```js import React from 'react'; diff --git a/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx new file mode 100644 index 00000000000..7a036a97273 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Card/card'; + + +export interface CardActionsProps extends React.HTMLProps { + /** Content rendered inside the Card Action */ + children?: React.ReactNode; + /** Additional classes added to the Action */ + className?: string; +} + +export const CardActions: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: CardActionsProps) => ( +
+ {children} +
+); \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx new file mode 100644 index 00000000000..5cabf77531c --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { css } from '@patternfly/react-styles'; +import styles from '@patternfly/react-styles/css/components/Card/card'; + +export interface CardHeadProps extends React.HTMLProps { + /** Content rendered inside the Card Head */ + children?: React.ReactNode; + /** Additional classes added to the Head */ + className?: string; +} + +export const CardHead: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}: CardHeadProps) => ( +
+ {children} +
+); \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg new file mode 100644 index 00000000000..c02f48300d0 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg @@ -0,0 +1,13 @@ + + + + + + + \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg new file mode 100644 index 00000000000..efca381b551 --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/patternfly-4/react-core/src/components/Card/index.ts b/packages/patternfly-4/react-core/src/components/Card/index.ts index 4da33a48e8f..7794f4b0dac 100644 --- a/packages/patternfly-4/react-core/src/components/Card/index.ts +++ b/packages/patternfly-4/react-core/src/components/Card/index.ts @@ -1,4 +1,6 @@ export * from './Card'; +export * from './CardActions'; export * from './CardBody'; export * from './CardFooter'; export * from './CardHeader'; +export * from './CardHead'; diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts index 0e7ab679cfd..dea648c0a12 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts @@ -10,8 +10,8 @@ export interface DropdownProps extends HTMLProps { isAction?: boolean; isGrouped?: boolean; onSelect?(event: React.SyntheticEvent): void; - position?: OneOf; - direction?: OneOf; + position?: DropdownPosition | 'right' | 'left'; + direction?: DropdownDirection | 'up' | 'down'; toggle?: ReactNode; } diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts index 009ef1350e9..78131ea10d2 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts @@ -1,6 +1,27 @@ -import { HTMLProps, ReactType } from 'react'; +import * as React from 'react'; -export interface DropdownItemProps extends HTMLProps { - component?: ReactType | string; - isDisabled?: Boolean; -} +export interface DropdownItemProps extends React.HTMLProps { + /** Anything which can be rendered as dropdown item */ + children?: React.ReactNode; + /** Classes applied to root element of dropdown item */ + className?: string; + /** Indicates which component will be used as dropdown item */ + component?: React.ReactType | string; + /** Flag if this is for the app launcher */ + isAppLauncher?: boolean; + /** Role for the item */ + role?: string; + /** Render dropdown item as disabled option */ + isDisabled?: boolean; + /** Forces display of the hover state of the element */ + isHovered?: boolean; + /** Default hyperlink location */ + href?: string; + index?: number; + context?: { + keyHandler?: (index: number, direction: string) => void, + sendRef?: (index: number, ref: any, isDisabled: boolean) => void + }; + /** Callback for click event */ + onClick?: () => void; +} \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts index a5b28878890..f780651ca46 100644 --- a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts +++ b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts @@ -1,9 +1,21 @@ -export const DropdownPosition: { - right: 'right'; - left: 'left'; -}; - -export const DropdownDirection: { - up: 'up'; - down: 'down'; -}; +import * as React from 'react'; +import { any } from 'glamor'; + +export enum DropdownPosition { + right = 'right', + left = 'left' +} + +export enum DropdownDirection { + up = 'up', + down = 'down' +} + +export const DropdownContext: React.Context< + (event: any) => void +> + +export const DropdownArrowContext: React.Context<{ + keyHandler: (index: number, position: any, custom: boolean) => void, + sendRef: (index: number, node: any, isDisabled: boolean) => void +}> diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx index 32f61a280e4..c8a3de99645 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx @@ -8,7 +8,7 @@ const FocusTrap: any = require('focus-trap-react'); import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye'; import { css } from '@patternfly/react-styles'; -import Backdrop from '../Backdrop/Backdrop'; +import { Backdrop } from '../Backdrop/Backdrop'; import { ModalBoxBody } from './ModalBoxBody'; import { ModalBoxHeader } from './ModalBoxHeader'; import { ModalBoxCloseButton } from './ModalBoxCloseButton'; diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap index 6c5194b15f3..415e4c3f592 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Modal Content Test isOpen 1`] = ` - + - + `; exports[`Modal Content Test only body 1`] = ` - + - + `; exports[`Modal Content Test with footer 1`] = ` - + - + `; exports[`Modal Content Test with onclose 1`] = ` - + - + `; exports[`Modal Content test without footer 1`] = ` - + - + `; diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js index de9b1479614..b58f345aea0 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js @@ -14,6 +14,7 @@ const OptionsToggle = ({ widgetId, onToggle, isOpen, + showToggle, toggleTemplate: ToggleTemplate }) => (
@@ -24,18 +25,20 @@ const OptionsToggle = ({ )} - + {showToggle && ( + + )}
); @@ -48,6 +51,7 @@ OptionsToggle.propTypes = { widgetId: PropTypes.string, onToggle: PropTypes.func, isOpen: PropTypes.bool, + showToggle: PropTypes.bool, toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func]) }; @@ -60,6 +64,7 @@ OptionsToggle.defaultProps = { widgetId: '', onToggle: () => undefined, isOpen: false, + showToggle: true, toggleTemplate: '' }; diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js index a316c2a0839..bf8f7fae9f8 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js @@ -28,6 +28,11 @@ describe('component render', () => { expect(wrapper).toMatchSnapshot(); }); + test('empty per page options', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); + }); + test('no items', () => { const wrapper = mount(); expect(wrapper).toMatchSnapshot(); diff --git a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js index 3e3e6928b83..35e96350037 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js +++ b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js @@ -123,6 +123,7 @@ class PaginationOptionsMenu extends Component { toggle={ 0} itemsTitle={itemsTitle} onToggle={this.onToggle} isOpen={this.state.isOpen} diff --git a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap index a30f459bf9a..5f8401b67da 100644 --- a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap @@ -202,6 +202,7 @@ exports[`component render custom pagination toggle 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}" widgetId="pagination-options-menu" /> @@ -213,7 +214,7 @@ exports[`component render custom pagination toggle 1`] = ` @@ -622,6 +624,7 @@ exports[`component render custom perPageOptions 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -643,6 +646,7 @@ exports[`component render custom perPageOptions 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -1141,6 +1145,7 @@ exports[`component render custom start end 1`] = ` lastIndex={15} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -1152,7 +1157,7 @@ exports[`component render custom start end 1`] = ` @@ -1458,6 +1464,377 @@ exports[`component render custom start end 1`] = ` `; +exports[`component render empty per page options 1`] = ` + +
+
+ 40 items +
+ +
+ + + } + > +
+ +
+ + + + 1 + - + 10 + + + of + + 40 + + + items + + +
+ +
+ +
+ + + + +
+ +`; + exports[`component render last page 1`] = ` @@ -1681,6 +2059,7 @@ exports[`component render last page 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -2179,6 +2558,7 @@ exports[`component render limited number of pages 1`] = ` lastIndex={20} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -2200,6 +2580,7 @@ exports[`component render limited number of pages 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -2698,6 +3079,7 @@ exports[`component render no items 1`] = ` lastIndex={0} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -2709,7 +3091,7 @@ exports[`component render no items 1`] = ` @@ -3212,6 +3595,7 @@ exports[`component render should render correctly bottom 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -3233,6 +3617,7 @@ exports[`component render should render correctly bottom 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -3731,6 +4116,7 @@ exports[`component render should render correctly top 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -3752,6 +4138,7 @@ exports[`component render should render correctly top 1`] = ` onEnter={[Function]} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" > @@ -4241,6 +4628,7 @@ exports[`component render titles 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -4252,7 +4640,7 @@ exports[`component render titles 1`] = ` @@ -4760,6 +5149,7 @@ exports[`component render up drop direction 1`] = ` lastIndex={10} onToggle={[Function]} optionsToggle="Select" + showToggle={true} toggleTemplate={[Function]} widgetId="pagination-options-menu" /> @@ -4771,7 +5161,7 @@ exports[`component render up drop direction 1`] = ` diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts deleted file mode 100644 index 7ae80fe116c..00000000000 --- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { FormEvent, FunctionComponent, HTMLProps } from 'react'; -import { Omit } from '../../helpers/typeUtils'; - -export interface TextAreaProps extends Omit, 'onChange'> { - isRequired?: boolean; - isValid?: boolean; - onChange?(value: string, event: FormEvent): void; -} - -declare const TextArea: FunctionComponent; - -export default TextArea; diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js deleted file mode 100644 index af778cde576..00000000000 --- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import styles from '@patternfly/react-styles/css/components/FormControl/form-control'; -import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** Additional classes added to the TextArea. */ - className: PropTypes.string, - /** Flag to show if the TextArea is required. */ - isRequired: PropTypes.bool, - /** Flag to show if the TextArea is valid or invalid. */ - isValid: PropTypes.bool, - /** Value of the TextArea. */ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** A callback for when the TextArea value changes. */ - onChange: PropTypes.func, - /** Custom flag to show that the TextArea requires an associated id or aria-label. */ - 'aria-label': props => { - if (!props.id && !props['aria-label']) { - return new Error('TextArea requires either an id or aria-label to be specified'); - } - return null; - }, - /** Additional props are spread to the container