diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx index 53a36433..007efcb8 100755 --- a/packages/demo-app-ts/src/App.tsx +++ b/packages/demo-app-ts/src/App.tsx @@ -27,6 +27,7 @@ import imgBrand from './assets/images/imgBrand.svg'; import imgAvatar from './assets/images/imgAvatar.svg'; import Demos from './Demos'; import './App.css'; +import { BarsIcon } from '@patternfly/react-icons'; interface AppState { activeItem: number | string; @@ -118,45 +119,52 @@ class App extends React.Component<{}, AppState> { const { isNavOpen, activeItem, isDarkTheme } = this.state; const AppToolbar = ( - - - - checked && this.onThemeSelect(false)} - /> - - - checked && this.onThemeSelect(true)} - /> - + + + + + checked && this.onThemeSelect(false)} + /> + + + checked && this.onThemeSelect(true)} + /> + + - + ); const AppHeader = ( - this.setState({ isNavOpen: !isNavOpen })}> + this.setState({ isNavOpen: !isNavOpen })} + > - + {AppToolbar} diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md index 909fcf3e..5149fae1 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyLayouts.md +++ b/packages/module/patternfly-docs/content/examples/TopologyLayouts.md @@ -36,51 +36,56 @@ import { } from '@patternfly/react-topology'; import { ToolbarItem } from '@patternfly/react-core'; import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition as DropdownPositionDeprecated, - DropdownToggle as DropdownToggleDeprecated, - Select, - SelectOption, - SelectVariant -} from '@patternfly/react-core/deprecated'; + Dropdown, + DropdownItem, + DropdownList, +} from '@patternfly/react-core'; import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon'; import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; import './topology-example.css'; ### Layouts + Layouts will help to position the nodes on the graph in some manner as defined by the chosen layout. There are many algorithms for positioning nodes based on many factors (side of nodes, distance between nodes, edges, etc). Patternfy react-topology provides some layouts that you can choose to customize your topology graph with: -##### Force: +##### Force + This layout is built on top of the d3-force layout provided by [d3/d3-force](https://github.com/d3/d3-force). -##### Dagre: +##### Dagre + This layout is built on top of the dagrejs dagre layout provided by [dagrejs/dagre](https://github.com/dagrejs/dagre). -##### Cola: +##### Cola + This layout is built on top of the WebCola layout provided by [tgdwyer/WebCola](://github.com/tgdwyer/WebCola). This layout uses `force simulation` by default, but can be turned off by setting the options `layoutOnDrag` flag to false. -##### ColaGroups: +##### ColaGroups + This layout uses the Cola layout recursively on each group such that the group's children locations are set before setting the group's location relative to other groups/nodes at its level. -##### Grid: +##### Grid + This is a basic grid layout. It orders the nodes in a grid making the grid as `square` as possible. Grid layout works well to distribute nodes without taking into consideration edges -##### Concentric: +##### Concentric + Concentric layouts have better results focused on high connectivity. It places the nodes in a circular pattern. -##### BreadthFirst: +##### BreadthFirst + This layout uses a breadth first algorithm to place the nodes. A BreadthFirst layout may help in these cases, providing a natural "levels" approach that can be combined with other algorithms to help users to identify the dependencies between elements. Note: this first version currently doesn't manage the overflow of a row ### Examples + ```ts file='./TopologyLayoutsDemo.tsx' ``` diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx index cec67cdf..ed3ca9a2 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx +++ b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx @@ -1,15 +1,14 @@ import * as React from 'react'; import { - Split, - SplitItem, - ToolbarItem + Dropdown, + DropdownItem, + DropdownList, + MenuToggle, + MenuToggleElement, + Split, + SplitItem, + ToolbarItem } from '@patternfly/react-core'; -import { - Dropdown as DropdownDeprecated, - DropdownItem as DropdownItemDeprecated, - DropdownPosition as DropdownPositionDeprecated, - DropdownToggle as DropdownToggleDeprecated -} from '@patternfly/react-core/deprecated'; // eslint-disable-next-line patternfly-react/import-tokens-icons import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons'; import { @@ -263,57 +262,61 @@ export const LayoutsDemo: React.FC = () => { - setLayoutDropdownOpen(!layoutDropdownOpen)}>{layout}} + ) => ( + setLayoutDropdownOpen(!layoutDropdownOpen)}> + {layout} + + )} isOpen={layoutDropdownOpen} - dropdownItems={[ - + + { updateLayout('Force'); }} > Force - , - + { updateLayout('Dagre'); }} > Dagre - , - + { updateLayout('Cola'); }} > Cola - , - + { updateLayout('ColaGroups'); }} > ColaGroups - , - updateLayout('ColaNoForce')}> + + updateLayout('ColaNoForce')}> ColaNoForce - , - updateLayout('Grid')}> + + updateLayout('Grid')}> Grid - , - updateLayout('Concentric')}> + + updateLayout('Concentric')}> Concentric - , - updateLayout('BreadthFirst')}> + + updateLayout('BreadthFirst')}> BreadthFirst - - ]} - /> + + + ); diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md index f9ac7aba..3bb87155 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyToolbar.md +++ b/packages/module/patternfly-docs/content/examples/TopologyToolbar.md @@ -27,12 +27,13 @@ import { VisualizationProvider, VisualizationSurface } from '@patternfly/react-topology'; -import { ToolbarItem } from '@patternfly/react-core'; import { - Select as SelectDeprecated, - SelectOption as SelectOptionDeprecated, - SelectVariant as SelectVariantDeprecated -} from '@patternfly/react-core/deprecated'; + MenuToggle, + Select, + SelectList, + SelectOption, + ToolbarItem +} from '@patternfly/react-core'; import Icon1 from '@patternfly/react-icons/dist/esm/icons/regions-icon'; import Icon2 from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; diff --git a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx index 4aa27fa1..41947d27 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx +++ b/packages/module/patternfly-docs/content/examples/TopologyToolbarDemo.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import { - ToolbarItem + MenuToggle, + MenuToggleElement, + Select, + SelectList, + SelectOption, + ToolbarItem } from '@patternfly/react-core'; -import { - Select as SelectDeprecated, - SelectOption as SelectOptionDeprecated, - SelectVariant as SelectVariantDeprecated -} from '@patternfly/react-core/deprecated'; -// eslint-disable-next-line patternfly-react/import-tokens-icons import { RegionsIcon as Icon1, FolderOpenIcon as Icon2 } from '@patternfly/react-icons'; import { ColaLayout, @@ -187,7 +186,7 @@ interface CustomNodeProps { const CustomNode: React.FC = observer(({ element }) => { const data = element.getData(); const Icon = data.isAlternate ? Icon2 : Icon1; - const badgeColors = BadgeColors.find(badgeColor => badgeColor.name === data.badge); + const badgeColors = BadgeColors.find((badgeColor) => badgeColor.name === data.badge); const { viewOptions } = element.getController().getState(); return ( @@ -267,39 +266,50 @@ export const ToolbarDemo: React.FC = () => { const contextToolbar = ( - - setViewOptions(prev => ({ ...prev, showLabels: !prev.showLabels }))} - /> - setViewOptions(prev => ({ ...prev, showBadges: !prev.showBadges }))} - /> - setViewOptions(prev => ({ ...prev, showStatusBackground: !prev.showStatusBackground }))} - /> - setViewOptions(prev => ({ ...prev, showDecorators: !prev.showDecorators }))} - /> - - } - onToggle={() => setViewOptionsOpen(prev => !prev)} - onSelect={() => {}} - isCheckboxSelectionBadgeHidden + );