diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml index ed75b7ed813..8386cc2a3ad 100644 --- a/.github/workflows/promote.yml +++ b/.github/workflows/promote.yml @@ -23,6 +23,6 @@ jobs: - name: Install deps run: yarn install --frozen-lockfile - name: Build dist - run: yarn build && yarn build:umd && yarn clean:exports + run: yarn build && yarn build:umd - name: Deploy to NPM and Github run: .github/promote.sh diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f11d49b8b1e..623a06777cd 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -26,9 +26,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -70,9 +70,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -110,9 +110,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -159,9 +159,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -219,9 +219,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -275,9 +275,9 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' @@ -319,7 +319,7 @@ jobs: - uses: actions/checkout@v2 with: token: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - fetch-depth: "0" + fetch-depth: '0' - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* - uses: actions/setup-node@v1 with: @@ -329,14 +329,14 @@ jobs: name: Cache npm deps with: path: | - node_modules - **/node_modules - ~/.cache/Cypress + node_modules + **/node_modules + ~/.cache/Cypress key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - run: yarn install --frozen-lockfile if: steps.yarn-cache.outputs.cache-hit != 'true' - name: Build dist - run: yarn build && yarn build:umd && yarn clean:exports + run: yarn build && yarn build:umd if: steps.dist.outputs.cache-hit != 'true' - name: Deploy to NPM and Github run: .github/release.sh diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index b75f3d53c07..9cd19ef58bb 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -33,23 +33,23 @@ "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.21", "tslib": "^2.5.0", - "victory-area": "^36.8.1", - "victory-axis": "^36.8.1", - "victory-bar": "^36.8.1", - "victory-box-plot": "^36.8.1", - "victory-chart": "^36.8.1", - "victory-core": "^36.8.1", - "victory-create-container": "^36.8.1", - "victory-cursor-container": "^36.8.1", - "victory-group": "^36.8.1", - "victory-legend": "^36.8.1", - "victory-line": "^36.8.1", - "victory-pie": "^36.8.1", - "victory-scatter": "^36.8.1", - "victory-stack": "^36.8.1", - "victory-tooltip": "^36.8.1", - "victory-voronoi-container": "^36.8.1", - "victory-zoom-container": "^36.8.1" + "victory-area": "^36.9.1", + "victory-axis": "^36.9.1", + "victory-bar": "^36.9.1", + "victory-box-plot": "^36.9.1", + "victory-chart": "^36.9.1", + "victory-core": "^36.9.1", + "victory-create-container": "^36.9.1", + "victory-cursor-container": "^36.9.1", + "victory-group": "^36.9.1", + "victory-legend": "^36.9.1", + "victory-line": "^36.9.1", + "victory-pie": "^36.9.1", + "victory-scatter": "^36.9.1", + "victory-stack": "^36.9.1", + "victory-tooltip": "^36.9.1", + "victory-voronoi-container": "^36.9.1", + "victory-zoom-container": "^36.9.1" }, "peerDependencies": { "react": "^17 || ^18", diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap index 8008576ac03..5be9054966c 100644 --- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap +++ b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap @@ -31,7 +31,7 @@ exports[`ChartArea 1`] = ` { @@ -92,7 +91,26 @@ const evaluateProps = (props: any) => { return Object.assign({}, props, { id, style }); }; -const ChartCursorFlyout = (props: any) => { +interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps { + center?: { + x: number; + y: number; + }; + cornerRadius?: number; + datum?: object; + dx?: number; + dy?: number; + height?: number; + orientation?: OrientationTypes; + pathComponent?: React.ReactElement; + pointerLength?: number; + pointerWidth?: number; + width?: number; + x?: number; + y?: number; +} + +const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { props = evaluateProps(props); return React.cloneElement(props.pathComponent, { @@ -107,23 +125,6 @@ const ChartCursorFlyout = (props: any) => { }); }; -ChartCursorFlyout.propTypes = { - ...CommonProps.primitiveProps, - center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - cornerRadius: PropTypes.number, - datum: PropTypes.object, - dx: PropTypes.number, - dy: PropTypes.number, - height: PropTypes.number, - orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - pathComponent: PropTypes.element, - pointerLength: PropTypes.number, - pointerWidth: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number -}; - ChartCursorFlyout.defaultProps = { pathComponent: , role: 'presentation', diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx index 85d617a406b..5d16764429c 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx +++ b/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx @@ -32,7 +32,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -226,7 +226,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. diff --git a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx index f8549654eb0..19ca376359c 100644 --- a/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx +++ b/packages/react-charts/src/components/ChartLegendTooltip/ChartLegendTooltip.tsx @@ -49,7 +49,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -275,7 +275,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. @@ -295,11 +295,8 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { themeColor?: string; /** * The title prop specifies a title to render with the legend. - * This prop should be given as a string, or an array of strings for multi-line titles. - * - * Example: title={(datum) => datum.x} */ - title?: string | string[] | Function; + title?: string; /** * This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from * parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap index f2ecdfdd881..a4e06c3dc2c 100644 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -31,7 +31,7 @@ exports[`ChartLine 1`] = ` , ' downloadButtonToolTipText?: string; /** Name of the file if user downloads code to local file. */ downloadFileName?: string; + /** Additional props to pass to the monaco editor. */ + editorProps?: EditorProps; /** Content to display in space of the code editor when there is no code to display. */ emptyState?: React.ReactNode; /** Override default empty state body text. */ @@ -499,7 +501,8 @@ class CodeEditor extends React.Component { shortcutsPopoverProps: shortcutsPopoverPropsProp, showEditor, options: optionsProp, - overrideServices + overrideServices, + editorProps } = this.props; const shortcutsPopoverProps: PopoverProps = { ...CodeEditor.defaultProps.shortcutsPopoverProps, @@ -644,6 +647,7 @@ class CodeEditor extends React.Component { onChange={this.onChange} onMount={this.editorDidMount} theme={isDarkTheme ? 'vs-dark' : 'vs-light'} + {...editorProps} /> ); diff --git a/packages/react-core/package.json b/packages/react-core/package.json index c31b0de1a4c..22b523e681b 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "5.2.0", + "@patternfly/patternfly": "5.2.1", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index 1fc674de587..fba1faad964 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx @@ -10,7 +10,7 @@ import { ClipboardCopyToggle } from './ClipboardCopyToggle'; import { ClipboardCopyExpanded } from './ClipboardCopyExpanded'; import { getOUIAProps, OUIAProps } from '../../helpers'; -export const clipboardCopyFunc = (event: React.ClipboardEvent, text?: string) => { +export const clipboardCopyFunc = (event: React.ClipboardEvent, text?: React.ReactNode) => { navigator.clipboard.writeText(text.toString()); }; @@ -27,7 +27,7 @@ export interface ClipboardCopyState { textWhenExpanded: string; } -export interface ClipboardCopyProps extends Omit, 'onChange' | 'children'>, OUIAProps { +export interface ClipboardCopyProps extends Omit, 'onChange'>, OUIAProps { /** Additional classes added to the clipboard copy container. */ className?: string; /** Tooltip message to display when hover the copy button */ @@ -71,12 +71,12 @@ export interface ClipboardCopyProps extends Omit /** Delay in ms before the tooltip appears. */ entryDelay?: number; /** A function that is triggered on clicking the copy button. */ - onCopy?: (event: React.ClipboardEvent, text?: string) => void; + onCopy?: (event: React.ClipboardEvent, text?: React.ReactNode) => void; /** A function that is triggered on changing the text. */ onChange?: (event: React.FormEvent, text?: string) => void; /** The text which is copied. */ - children: string; - /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */ + children: React.ReactNode; + /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */ additionalActions?: React.ReactNode; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx index 0c805495078..8a82c3e0001 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx @@ -6,6 +6,7 @@ import { PickOptional } from '../../helpers/typeUtils'; export interface ClipboardCopyExpandedProps extends Omit { className?: string; + children: React.ReactNode; onChange?: (e: React.FormEvent, text: string) => void; isReadOnly?: boolean; isCode?: boolean; diff --git a/packages/react-core/src/demos/index.ts b/packages/react-core/src/demos/index.ts deleted file mode 100644 index e10143716db..00000000000 --- a/packages/react-core/src/demos/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './DashboardHeader'; -export * from './DashboardWrapper'; diff --git a/packages/react-core/src/index.ts b/packages/react-core/src/index.ts index e3a0874b4c1..ee4d9c1c752 100644 --- a/packages/react-core/src/index.ts +++ b/packages/react-core/src/index.ts @@ -1,5 +1,4 @@ export * from './components'; -export * from './demos'; export * from './layouts'; export * from './helpers'; export * from './styles'; diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index e5bc1f1e5d6..4d49e84c0ba 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -22,7 +22,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "5.2.0", + "@patternfly/patternfly": "5.2.1", "@patternfly/react-charts": "^7.2.0", "@patternfly/react-code-editor": "^5.2.0", "@patternfly/react-core": "^5.2.0", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index b77ae907fd7..e7942baa455 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -32,7 +32,7 @@ "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@patternfly/patternfly": "5.2.0", + "@patternfly/patternfly": "5.2.1", "fs-extra": "^11.1.1", "glob": "^7.1.2", "rimraf": "^2.6.2", diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 2159bed45af..85bfcd57116 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -18,7 +18,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "5.2.0", + "@patternfly/patternfly": "5.2.1", "camel-case": "^3.0.0", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx new file mode 100644 index 00000000000..646d0ca3054 --- /dev/null +++ b/packages/react-table/src/demos/DashboardHeader.tsx @@ -0,0 +1,198 @@ +import React, { useState } from 'react'; +import { + Avatar, + Brand, + Button, + ButtonVariant, + Divider, + Dropdown, + DropdownGroup, + DropdownItem, + DropdownList, + Masthead, + MastheadToggle, + MastheadMain, + MastheadBrand, + MastheadContent, + MenuToggle, + Toolbar, + ToolbarContent, + ToolbarGroup, + ToolbarItem, + PageToggleButton +} from '@patternfly/react-core'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import imgAvatar from '@patternfly/react-table/src/demos/assets/avatarImg.svg'; +import pfLogo from '@patternfly/react-table/src/demos/assets/pf-logo.svg'; + +interface DashboardHeaderProps { + /** Render custom notification badge */ + notificationBadge?: React.ReactNode; +} + +export const DashboardHeader: React.FC = ({ notificationBadge }) => { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + + const kebabDropdownItems = ( + <> + + Settings + + + Help + + + ); + + const userDropdownItems = ( + <> + My profile + User management + Logout + + ); + + const onDropdownToggle = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + const onDropdownSelect = () => { + setIsDropdownOpen(false); + }; + + const onKebabDropdownToggle = () => { + setIsKebabDropdownOpen(!isKebabDropdownOpen); + }; + + const onKebabDropdownSelect = () => { + setIsKebabDropdownOpen(false); + }; + + const onFullKebabToggle = () => { + setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen); + }; + + const onFullKebabSelect = () => { + setIsFullKebabDropdownOpen(false); + }; + + return ( + + + + + + + + + + + + + + + + {notificationBadge ?? ( + +