Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Demo and package components fixes #8

Merged
merged 2 commits into from
May 14, 2024
Merged

Demo and package components fixes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ab27aa
Demo and package components fixes
jeff-phillips-18 May 14, 2024
44b8579
Add toolbar gap workaround
jenny-s51 May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions packages/demo-app-ts/src/App.test.tsx
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions packages/demo-app-ts/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,9 @@ class App extends React.Component<{}, AppState> {
const htmlElement = document.getElementsByTagName('html')[0];
if (htmlElement) {
if (isDarkTheme) {
htmlElement.classList.add('pf-v5-theme-dark');
htmlElement.classList.add('pf-v6-theme-dark');
} else {
htmlElement.classList.remove('pf-v5-theme-dark');
htmlElement.classList.remove('pf-v6-theme-dark');
}
}
};
Expand Down Expand Up @@ -123,6 +123,7 @@ class App extends React.Component<{}, AppState> {
<ToolbarGroup align={{ default: 'alignRight' }}>
<ToolbarItem style={{ marginRight: '10px' }}>
<Radio
className="pf-v6-u-mt-sm"
id="light-theme"
aria-label="Light theme"
label={`Light theme`}
Expand All @@ -133,6 +134,7 @@ class App extends React.Component<{}, AppState> {
</ToolbarItem>
<ToolbarItem>
<Radio
className="pf-v6-u-mt-sm"
id="dark-theme"
label="Dark theme"
aria-label="Dark theme"
Expand Down
55 changes: 31 additions & 24 deletions packages/demo-app-ts/src/Demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
.pf-ri__topology-demo-page .pf-v6-c-page__main-container, .pf-ri__topology-demo-page .pf-v6-c-page__main {
height: 100%;
}
.pf-ri__topology-demo {
height: 100%;
display: flex;
Expand All @@ -6,71 +9,75 @@
}

.pf-ri__topology-demo .pf-topology-visualization-surface {
border: 1px solid var(--pf-v5-global--BorderColor--100);
border: 1px solid var(--pf-v6-global--BorderColor--100);
border-top: none;
}

.pf-ri__topology-demo .pf-v5-c-tab-content {
.pf-ri__topology-demo .pf-v6-c-tab-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.pf-ri__topology-demo .pf-v5-c-tab-content:focus {
.pf-ri__topology-demo .pf-v6-c-tab-content:focus {
outline: none;
}

.pf-ri__topology-demo .pf-v5-c-toolbar {
--pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: 0;
--pf-v5-c-toolbar--PaddingBottom: 0;
.pf-ri__topology-demo .pf-v6-c-toolbar {
--pf-v6-c-toolbar__expandable-content--lg--PaddingBottom: 0;
--pf-v6-c-toolbar--PaddingBottom: 0;
}
.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-l-flex {
--pf-v5-l-flex--FlexWrap: no-wrap;
.pf-ri__topology-demo .pf-v6-c-toolbar__content.pf-m-hidden {
display: none;
}

.pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-l-flex {
jenny-s51 marked this conversation as resolved.
Show resolved Hide resolved
--pf-v6-l-flex--FlexWrap: no-wrap;
}
.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-c-form-control {
.pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-c-form-control {
width: 70px;
}
.pf-ri-topology-context-menu {
z-index: 1050;
}

.pf-ri-topology-context-menu__kebab-wrapper.pf-v5-c-dropdown__menu-item {
.pf-ri-topology-context-menu__kebab-wrapper.pf-v6-c-dropdown__menu-item {
padding: 0;
}
.pf-ri__topology-demo__package-input {
width: 75px;
}

.pf-ri-topology__node__background {
fill: var(--pf-v5-global--palette--black-400);
fill: var(--pf-v6-global--palette--black-400);
stroke-width: 1px;
stroke: var(--pf-v5-global--palette--black-1000);
stroke: var(--pf-v6-global--palette--black-1000);
}

.pf-ri-topology__node__background.pf-m-selected {
fill: var(--pf-v5-global--active-color--100);
fill: var(--pf-v6-global--active-color--100);
}

.pf-ri-topology__node__background.pf-m-hover {
fill: var(--pf-v5-global--palette--green-300);
fill: var(--pf-v6-global--palette--green-300);
}

.pf-ri-topology__node__background.pf-m-drop-target {
fill: var(--pf-v5-global--palette--light-blue-200);
fill: var(--pf-v6-global--palette--light-blue-200);
}

.pf-v5-c-page__main-section#\/topology-demo-page-section,
.pf-v5-c-page__main-section#\/topology-pipelines-demo-page-section,
.pf-v5-c-page__main-section#\/topology-pipelines-groups-demo-page-section {
--pf-v5-c-page__main-section--PaddingTop: 0;
--pf-v5-c-page__main-section--PaddingRight: 0;
--pf-v5-c-page__main-section--PaddingLeft: 0;
--pf-v5-c-page__main-section--PaddingBottom: 0;
.pf-v6-c-page__main-section#\/topology-demo-page-section,
.pf-v6-c-page__main-section#\/topology-pipelines-demo-page-section,
.pf-v6-c-page__main-section#\/topology-pipelines-groups-demo-page-section {
--pf-v6-c-page__main-section--PaddingTop: 0;
--pf-v6-c-page__main-section--PaddingRight: 0;
--pf-v6-c-page__main-section--PaddingLeft: 0;
--pf-v6-c-page__main-section--PaddingBottom: 0;
}

.topology-demo-badge > rect {
fill: var(--pf-v5-global--palette--red-100);
fill: var(--pf-v6-global--palette--red-100);
}
.topology-demo-badge > text {
fill: var(--pf-v5-global--palette--gold-100);
fill: var(--pf-v6-global--palette--gold-100);
}
1 change: 0 additions & 1 deletion packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ const OptionsContextBar: React.FC = observer(() => {
onOpenChange={(isOpen) => setNodeOptionsOpen(isOpen)}
onSelect={() => {}}
isOpen={nodeOptionsOpen}
placeholder="Node options"
toggle={nodeOptionsToggle}
>
<SelectList>
Expand Down
2 changes: 1 addition & 1 deletion packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
const layoutDropdown = (
<Split>
<SplitItem>
<label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout:</label>
<label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout:</label>
</SplitItem>
<SplitItem>
<Dropdown
Expand Down
2 changes: 1 addition & 1 deletion packages/demo-app-ts/src/demos/topologyPackageDemo/listeners.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Controller, EventListener, isNode, Node } from '@patternfly/react-topology';

let positionTimer: NodeJS.Timer;
let positionTimer: NodeJS.Timeout;

export const graphPositionChangeListener: EventListener = ({ graph }): void => {
const scale = graph.getScale();
Expand Down
2 changes: 1 addition & 1 deletion packages/demo-app-ts/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" class="pf-ri__topology-demo-page"></div>
</body>
</html>
8 changes: 5 additions & 3 deletions packages/demo-app-ts/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import '@patternfly/react-core/dist/styles/base.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import '@patternfly/react-core/dist/styles/base.css';
import './index.css';
import App from './App';
import '@patternfly/patternfly/patternfly-theme-dark.css';
import '@patternfly/patternfly/patternfly-addons.css';

ReactDOM.render(<App />, document.getElementById('root'));
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
2 changes: 1 addition & 1 deletion packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export const LayoutsDemo: React.FC = () => {
const layoutDropdown = (
<Split>
<SplitItem>
<label className="pf-v5-u-display-inline-block pf-v5-u-mr-md pf-v5-u-mt-sm">Layout</label>
<label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout</label>
</SplitItem>
<SplitItem>
<Dropdown
Expand Down
10 changes: 5 additions & 5 deletions packages/module/patternfly-docs/content/examples/topology-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
.ws-extensions-t-sidebar,
.ws-extensions-t-toolbar {
height: 600px;
border: 1px solid var(--pf-v5-global--palette--black-900);
border: 1px solid var(--pf-v6-global--palette--black-900);
padding: 0;
margin: var(--pf-v5-global--spacer--md);
margin: var(--pf-v6-global--spacer--md);
}

@media (min-width: 768px) {
Expand All @@ -33,15 +33,15 @@
.pf-theme-dark .ws-extensions-t-selection,
.pf-theme-dark .ws-extensions-t-sidebar,
.pf-theme-dark .ws-extensions-t-toolbar {
border: 1px solid var(--pf-v5-global--palette--black-100);
border: 1px solid var(--pf-v6-global--palette--black-100);
}

.ws-extensions-t-topology .pf-v5-l-stack {
.ws-extensions-t-topology .pf-v6-l-stack {
margin: -9px;
width: calc(100% + 18px);
}

.ws-extensions-t-topology .pf-topology-view__project-toolbar .pf-v5-c-dropdown>button {
.ws-extensions-t-topology .pf-topology-view__project-toolbar .pf-v6-c-dropdown>button {
justify-content: space-between;
width: 150px;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/module/patternfly-docs/content/examples/topology-pipelines-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.ws-react-t-pipelines {
height: 300px;
border: 1px solid var(--pf-v5-global--palette--black-900);
border: 1px solid var(--pf-v6-global--palette--black-900);
padding: 0;
margin: var(--pf-v5-global--spacer--md);
margin: var(--pf-v6-global--spacer--md);
}
2 changes: 1 addition & 1 deletion packages/module/src/behavior/withContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const withContextMenu = <E extends TopologyElement>(
container?: Element | null | undefined | (() => Element),
className?: string,
atPoint: boolean = true,
waitElement: React.ReactElement = <Spinner className="pf-v5-u-mx-md" size="md" />
waitElement: React.ReactElement = <Spinner className="pf-v6-u-mx-md" size="md" />
) => <P extends WithContextMenuProps>(WrappedComponent: React.ComponentType<P>) => {
const Component: React.FunctionComponent<Omit<P, keyof WithContextMenuProps>> = props => {
const element = React.useContext(ElementContext);
Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ export const TopologyControlBar: React.FunctionComponent<TopologyControlBarProps
>
{button.icon}
{(button.ariaLabel || button.tooltip) && (
<span className="pf-v5-screen-reader">{button.ariaLabel || button.tooltip}</span>
<span className="pf-v6-screen-reader">{button.ariaLabel || button.tooltip}</span>
)}
</Button>
);
Expand Down
8 changes: 4 additions & 4 deletions packages/module/src/components/TopologyView/__tests__/TopologyView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ describe('TopologyView', () => {

const topologyViewHtml = screen.getByTestId('test-id').outerHTML;

expect(topologyViewHtml).toContain('pf-v5-c-drawer');
expect(topologyViewHtml).not.toContain('pf-v5-c-drawer pf-m-expanded');
expect(topologyViewHtml).toContain('pf-v6-c-drawer');
expect(topologyViewHtml).not.toContain('pf-v6-c-drawer pf-m-expanded');
});
test('should display topology w/ open resizable sidebar correctly', () => {
render(
Expand All @@ -104,7 +104,7 @@ describe('TopologyView', () => {

const topologyViewHtml = screen.getByTestId('test-id').outerHTML;

expect(topologyViewHtml).toContain('pf-v5-c-drawer');
expect(topologyViewHtml).toContain('pf-v5-c-drawer pf-m-expanded');
expect(topologyViewHtml).toContain('pf-v6-c-drawer');
expect(topologyViewHtml).toContain('pf-v6-c-drawer pf-m-expanded');
});
});
8 changes: 4 additions & 4 deletions packages/module/src/components/VisualizationSurface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
state
}: VisualizationSurfaceProps) => {
const controller = useVisualizationController();
const timerId = React.useRef<NodeJS.Timer>();
const timerId = React.useRef<NodeJS.Timeout>();

const debounceMeasure = React.useCallback((func: (contentRect: ContentRect) => void, delay?: number) => {
return (contentRect: ContentRect) => {
if (!timerId.current) {
func(contentRect)
}
clearTimeout(timerId.current as any)
clearTimeout(timerId.current)

timerId.current = setTimeout(() => func(contentRect), delay)
}
Expand All @@ -57,7 +57,7 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =
);

// dispose of onMeasure
React.useEffect(() => () => clearTimeout(timerId.current as any), [onMeasure]);
React.useEffect(() => () => clearTimeout(timerId.current), [onMeasure]);

if (!controller.hasGraph()) {
return null;
Expand All @@ -67,7 +67,7 @@ const VisualizationSurface: React.FunctionComponent<VisualizationSurfaceProps> =

return (
<ReactMeasure client onResize={onMeasure}>
{({ measureRef }: { measureRef: React.LegacyRef<any> }) => (
{({ measureRef }: { measureRef: React.LegacyRef<HTMLDivElement> }) => (
// render an outer div because react-measure doesn't seem to fire events properly on svg resize
<div data-test-id="topology" className={css(styles.topologyVisualizationSurface)} ref={measureRef}>
<svg className={css(styles.topologyVisualizationSurfaceSvg)} onContextMenu={stopEvent}>
Expand Down
2 changes: 1 addition & 1 deletion packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
<div
ref={subMenuRef}
role="presentation"
className="pf-v5-c-dropdown pf-m-expanded"
className="pf-v6-c-dropdown pf-m-expanded"
onMouseLeave={(e) => {
// only close the sub menu if the mouse does not enter the item
if (!nodeRef.current || !nodeRef.current.contains(e.relatedTarget as Node)) {
Expand Down
24 changes: 12 additions & 12 deletions packages/module/src/css/topology-controlbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
.pf-topology-control-bar {
position: absolute;
bottom: var(--pf-v5-global--spacer--md);
left: var(--pf-v5-global--spacer--xl);
bottom: var(--pf-v6-global--spacer--md);
left: var(--pf-v6-global--spacer--xl);
}
.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary {
margin-right: var(--pf-v5-global--spacer--xs);
margin-top: var(--pf-v5-global--spacer--xs);
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary {
margin-right: var(--pf-v6-global--spacer--xs);
margin-top: var(--pf-v6-global--spacer--xs);
border: none;
border-radius: var(--pf-v5-global--BorderRadius--sm);
box-shadow: var(--pf-v5-global--BoxShadow--sm);
border-radius: var(--pf-v6-global--BorderRadius--sm);
box-shadow: var(--pf-v6-global--BoxShadow--sm);
}
.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:not(.pf-m-disabled) {
background-color: var(--pf-v5-global--BackgroundColor--100);
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:not(.pf-m-disabled) {
background-color: var(--pf-v6-global--BackgroundColor--100);
}
.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:after {
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:after {
display: none;
}
.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:hover {
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:hover {
border: none;
box-shadow: var(--pf-v5-global--BoxShadow--md);
box-shadow: var(--pf-v6-global--BoxShadow--md);
}
Loading
Loading