Skip to content

Commit

Permalink
chore(canvas): Add padding to Groups
Browse files Browse the repository at this point in the history 
Currently, the groups are too narrow to the routes, this commits adds
padding to the groups.

It also updates `@patternfly/react-topology` to the 5.2.1 patch version
which stopped using the add-ons css classes from
`@patternfly/react-core`

relates: #767
  • Loading branch information
@lordrip
lordrip committed Feb 7, 2024
1 parent 91aafaa commit 7eb46bf
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 58 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"@patternfly/react-core": "5.2.0",
"@patternfly/react-icons": "5.2.0",
"@patternfly/react-table": "5.2.0",
"@patternfly/react-topology": "5.2.0",
"@patternfly/react-topology": "5.2.1",
"axios": "1.6.7",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"@patternfly/react-core": "5.2.0",
"@patternfly/react-icons": "5.2.0",
"@patternfly/react-table": "5.2.0",
"@patternfly/react-topology": "5.2.0",
"@patternfly/react-topology": "5.2.1",
"@types/uuid": "^9.0.2",
"ajv": "^8.12.0",
"ajv-formats": "^2.1.1",
Expand Down
76 changes: 38 additions & 38 deletions packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom In
</span>
Expand Down Expand Up @@ -164,7 +164,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom Out
</span>
Expand Down Expand Up @@ -200,7 +200,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Fit to Screen
</span>
Expand Down Expand Up @@ -236,7 +236,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Reset View
</span>
Expand Down Expand Up @@ -457,7 +457,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom In
</span>
Expand Down Expand Up @@ -493,7 +493,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom Out
</span>
Expand Down Expand Up @@ -529,7 +529,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Fit to Screen
</span>
Expand Down Expand Up @@ -565,7 +565,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Reset View
</span>
Expand Down Expand Up @@ -693,10 +693,10 @@ exports[`Canvas should render correctly 1`] = `
>
<rect
class="pf-topology__group__background"
height="150"
width="150"
x="-37.5"
y="-37.5"
height="195"
width="195"
x="-60"
y="-60"
/>
</g>
</g>
Expand Down Expand Up @@ -939,7 +939,7 @@ exports[`Canvas should render correctly 1`] = `
>
<g
class="pf-topology__group__label"
transform="translate(NaN, 136.5)"
transform="translate(NaN, 159)"
>
<rect
class="pf-topology__node__label__background"
Expand Down Expand Up @@ -1103,7 +1103,7 @@ exports[`Canvas should render correctly 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom In
</span>
Expand Down Expand Up @@ -1139,7 +1139,7 @@ exports[`Canvas should render correctly 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom Out
</span>
Expand Down Expand Up @@ -1175,7 +1175,7 @@ exports[`Canvas should render correctly 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Fit to Screen
</span>
Expand Down Expand Up @@ -1211,7 +1211,7 @@ exports[`Canvas should render correctly 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Reset View
</span>
Expand Down Expand Up @@ -1339,10 +1339,10 @@ exports[`Canvas should render correctly with more routes 1`] = `
>
<rect
class="pf-topology__group__background"
height="150"
width="150"
x="-37.5"
y="-37.5"
height="195"
width="195"
x="-60"
y="-60"
/>
</g>
</g>
Expand Down Expand Up @@ -1585,7 +1585,7 @@ exports[`Canvas should render correctly with more routes 1`] = `
>
<g
class="pf-topology__group__label"
transform="translate(NaN, 136.5)"
transform="translate(NaN, 159)"
>
<rect
class="pf-topology__node__label__background"
Expand Down Expand Up @@ -1749,7 +1749,7 @@ exports[`Canvas should render correctly with more routes 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom In
</span>
Expand Down Expand Up @@ -1785,7 +1785,7 @@ exports[`Canvas should render correctly with more routes 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom Out
</span>
Expand Down Expand Up @@ -1821,7 +1821,7 @@ exports[`Canvas should render correctly with more routes 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Fit to Screen
</span>
Expand Down Expand Up @@ -1857,7 +1857,7 @@ exports[`Canvas should render correctly with more routes 1`] = `
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Reset View
</span>
Expand Down Expand Up @@ -1985,10 +1985,10 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
>
<rect
class="pf-topology__group__background"
height="150"
width="150"
x="-37.5"
y="-37.5"
height="195"
width="195"
x="-60"
y="-60"
/>
</g>
</g>
Expand Down Expand Up @@ -2231,7 +2231,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
>
<g
class="pf-topology__group__label"
transform="translate(NaN, 136.5)"
transform="translate(NaN, 159)"
>
<rect
class="pf-topology__node__label__background"
Expand Down Expand Up @@ -2395,7 +2395,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom In
</span>
Expand Down Expand Up @@ -2431,7 +2431,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Zoom Out
</span>
Expand Down Expand Up @@ -2467,7 +2467,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Fit to Screen
</span>
Expand Down Expand Up @@ -2503,7 +2503,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Reset View
</span>
Expand Down Expand Up @@ -2537,7 +2537,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
</span>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Horizontal Layout
</span>
Expand Down Expand Up @@ -2571,7 +2571,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
</span>
</span>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Vertical Layout
</span>
Expand Down Expand Up @@ -2607,7 +2607,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
/>
</svg>
<span
class="pf-v5-u-screen-reader"
class="pf-v5-screen-reader"
>
Open Catalog
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Visualization/Canvas/canvas.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export class CanvasService {
children: options.children ?? [],
data: options.data,
style: {
padding: CanvasDefaults.DEFAULT_NODE_DIAMETER / 2,
padding: CanvasDefaults.DEFAULT_NODE_DIAMETER * 0.8,
},
};
}
Expand Down
12 changes: 0 additions & 12 deletions packages/ui/src/components/Visualization/Visualization.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,3 @@
.pf-v5-u-m-sm {
margin: var(--pf-v5-global--spacer--sm);
}

// Provide a screen reader class to hide elements
// This is a workaround since this class should be provided by the @patternfly/react-core package
.pf-v5-u-screen-reader {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
10 changes: 5 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2461,7 +2461,7 @@ __metadata:
"@patternfly/react-core": 5.2.0
"@patternfly/react-icons": 5.2.0
"@patternfly/react-table": 5.2.0
"@patternfly/react-topology": 5.2.0
"@patternfly/react-topology": 5.2.1
"@testing-library/dom": ^9.3.0
"@testing-library/jest-dom": ^6.0.0
"@testing-library/react": ^14.0.0
Expand Down Expand Up @@ -3348,9 +3348,9 @@ __metadata:
languageName: node
linkType: hard

"@patternfly/react-topology@npm:5.2.0":
version: 5.2.0
resolution: "@patternfly/react-topology@npm:5.2.0"
"@patternfly/react-topology@npm:5.2.1":
version: 5.2.1
resolution: "@patternfly/react-topology@npm:5.2.1"
dependencies:
"@patternfly/react-core": ^5.1.1
"@patternfly/react-icons": ^5.1.1
Expand All @@ -3372,7 +3372,7 @@ __metadata:
peerDependencies:
react: ^17 || ^18
react-dom: ^17 || ^18
checksum: 45e8534f9d37e3271c63eaeb2b70c743f3712690e09ecf4897735549a9c9581aa6a38325d1104bb888405eb0fcbf252b914e948f445098afcb198fd16b40588c
checksum: 91dd662a42a21b717cbce815f2305ec9957cc3a013f42591be9a7bac704eba7ff5eba2113736253255b4f8821380d32a0cf84eb04203068f048d66cf189c468b
languageName: node
linkType: hard

Expand Down

0 comments on commit 7eb46bf

Please sign in to comment.