From 32b01c12e478b1e0340680d2b48b29a1e1b91d64 Mon Sep 17 00:00:00 2001 From: tplevko Date: Wed, 11 Sep 2024 11:36:32 +0200 Subject: [PATCH] fix(1422) Config panel buttons overlay - add toggleGroup wrapping --- .../ui-tests/cypress/support/next-commands/design.ts | 2 +- .../ui/src/components/Visualization/Canvas/Canvas.tsx | 1 + .../Visualization/Canvas/Form/CanvasFormHeader.scss | 7 ++++++- .../Canvas/__snapshots__/Canvas.test.tsx.snap | 10 +++++----- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts index 4a7ee037b..2d2723046 100644 --- a/packages/ui-tests/cypress/support/next-commands/design.ts +++ b/packages/ui-tests/cypress/support/next-commands/design.ts @@ -13,7 +13,7 @@ Cypress.Commands.add('toggleExpandGroup', (groupName: string, groupIndex?: numbe }); Cypress.Commands.add('closeStepConfigurationTab', () => { - cy.get('[data-testid="close-side-bar"]').click(); + cy.get('[data-testid="close-side-bar"]').click({ force: true }); cy.get('.pf-topology-resizable-side-bar').should('not.exist'); }); diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx index 289e998f3..6d965c2ba 100644 --- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx +++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx @@ -211,6 +211,7 @@ export const Canvas: FunctionComponent> = ({ enti return ( { setSidebarWidth(width); }} diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss index a97bd29ee..9f9da58b4 100644 --- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss +++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.scss @@ -16,17 +16,22 @@ .form-tabs { display: flex; + flex-wrap: wrap; margin-bottom: 15px; /* stylelint-disable-next-line selector-class-pattern */ .pf-v5-c-toggle-group__item { display: flex; - width: 20%; + flex: content; + min-width: 33%; } button { flex: 1; justify-content: center; font-weight: bold; + + --pf-v5-c-toggle-group__button--PaddingRight: 0.25rem; + --pf-v5-c-toggle-group__button--PaddingLeft: 0.25rem; } } diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap index d6767883a..b192ea62a 100644 --- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap +++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap @@ -275,7 +275,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f class="pf-v5-c-drawer__panel pf-m-resizable" hidden="" id="topology-resize-panel" - style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" + style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" /> @@ -625,7 +625,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en class="pf-v5-c-drawer__panel pf-m-resizable" hidden="" id="topology-resize-panel" - style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" + style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" /> @@ -1376,7 +1376,7 @@ exports[`Canvas should render correctly 1`] = ` class="pf-v5-c-drawer__panel pf-m-resizable" hidden="" id="topology-resize-panel" - style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" + style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" /> @@ -2127,7 +2127,7 @@ exports[`Canvas should render correctly with more routes 1`] = ` class="pf-v5-c-drawer__panel pf-m-resizable" hidden="" id="topology-resize-panel" - style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" + style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" /> @@ -2982,7 +2982,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p class="pf-v5-c-drawer__panel pf-m-resizable" hidden="" id="topology-resize-panel" - style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 150px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" + style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;" />