refactor(Viz-Sidebar): Change panels style to flat and add rounded ed…

…ges.
KaotoIO · Sep 13, 2024 · c3cf5e0 · c3cf5e0
1 parent 24f0fb1
commit c3cf5e0
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 7 deletions.
diff --git a/packages/ui/src/components/Form/CustomAutoFields.tsx b/packages/ui/src/components/Form/CustomAutoFields.tsx
@@ -69,7 +69,7 @@ export function CustomAutoFields({
           groupName={CatalogKind.Processor + ' ' + groupName}
           isGroupExpanded={isGroupExpanded}
         >
-          <Card className="nest-field-card">
+          <Card isFlat className="nest-field-card">
             <CardBody className="nest-field-card-body">
               {groupFields.map((field) => (
                 <AutoField key={field} name={field} />

diff --git a/packages/ui/src/components/Form/customField/CustomNestField.scss b/packages/ui/src/components/Form/customField/CustomNestField.scss
@@ -1,4 +1,6 @@
 .custom-nest-field {
+  border-radius: 15px;
+
   /* stylelint-disable-next-line selector-class-pattern */
   .pf-v5-c-card__body {
     display: grid;

diff --git a/packages/ui/src/components/Form/customField/CustomNestField.tsx b/packages/ui/src/components/Form/customField/CustomNestField.tsx
@@ -56,7 +56,7 @@ export const CustomNestField = connectField(
     if (propertiesArray.common.length === 0 && Object.keys(propertiesArray.groups).length === 0) return null;
 
     return (
-      <Card className="custom-nest-field" data-testid={'nest-field'} {...filterDOMProps(props)}>
+      <Card isFlat className="custom-nest-field" data-testid={'nest-field'} {...filterDOMProps(props)}>
         <CardHeader>
           <CardTitle>{label}</CardTitle>
         </CardHeader>

diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.scss b/packages/ui/src/components/Visualization/Canvas/Canvas.scss
@@ -0,0 +1,6 @@
+#topology-resize-panel {
+  /* stylelint-disable-next-line selector-class-pattern */
+  .pf-v5-c-drawer__splitter::after {
+    border: none;
+  }
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -36,6 +36,7 @@ import { CanvasDefaults } from './canvas.defaults';
 import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models';
 import { ControllerService } from './controller.service';
 import { FlowService } from './flow.service';
+import './Canvas.scss';
 
 interface CanvasProps {
   contextToolbar?: ReactNode;

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss
@@ -3,3 +3,7 @@
   position: absolute;
   height: 100%;
 }
+/* stylelint-disable-next-line selector-class-pattern */
+.pf-v5-c-drawer__splitter pf-m-vertical {
+  border: none;
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss
@@ -1,5 +1,6 @@
 .canvas-form {
   height: 100%;
+  border-radius: 15px;
 
   &__body {
     overflow: auto;

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
@@ -43,7 +43,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, o
 
   return (
     <ErrorBoundary key={selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
-      <Card className="canvas-form">
+      <Card isFlat className="canvas-form">
         <CardHeader>
           <CanvasFormHeader nodeId={selectedNode.id} title={title} onClose={onCloseFn} nodeIcon={vizNode?.data?.icon} />
         </CardHeader>

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`CanvasForm should render 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-1"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"
@@ -286,7 +286,7 @@ exports[`CanvasForm should render 1`] = `
 exports[`CanvasForm should render nothing if no schema and no definition is available 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-4"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"
@@ -551,7 +551,7 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
 exports[`CanvasForm should render nothing if no schema is available 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-2"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"

diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CanvasSideBar displays selected node information 1`] = `
     role="dialog"
   >
     <div
-      class="pf-v5-c-card canvas-form"
+      class="pf-v5-c-card pf-m-flat canvas-form"
       data-ouia-component-id="OUIA-Generated-Card-1"
       data-ouia-component-type="PF5/Card"
       data-ouia-safe="true"