Skip to content

Polish dialog styles and button variants#1920

Merged
kmcginnes merged 2 commits into
mainfrom
consistent-tab-styles
Jul 10, 2026
Merged

Polish dialog styles and button variants#1920
kmcginnes merged 2 commits into
mainfrom
consistent-tab-styles

Conversation

@kmcginnes

@kmcginnes kmcginnes commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

Description

Consistency pass across dialog footers, button variants, and the dialog overlay/scroll model.

Button changes:

  • New outline-danger variant for destructive secondary actions (red text, danger-subtle hover, outlined border)
  • outline and primary variants gain font-base for consistent weight

Dialog component changes:

  • DialogBody now scrolls independently — header and footer stay fixed (matching AlertDialog)
  • DialogOverlay lightened to 15% opacity and dialog content gets a stronger shadow for better separation
  • DialogFooter gains bg-muted/50 background with top border

Usage updates across all dialogs:

  • All secondary/default-variant buttons in dialog footers → outline
  • Done/Save/Close action buttons → primary
  • Reset to Default buttons → outline-danger
  • CreateConnection restructured to render DialogBody/DialogFooter itself (was previously wrapped externally)
  • Create Namespace dialog: added Cancel button, renamed Save to "Create Namespace", removed icon
  • Raw Response dialog: Close button → primary, Copy to Clipboard → outline

How to read

  1. packages/graph-explorer/src/components/Button/Button.tsx — the new outline-danger variant
  2. packages/graph-explorer/src/components/Dialog.tsx — flex-col layout, scrollable body, overlay/footer styling
  3. packages/graph-explorer/src/modules/CreateConnection/CreateConnection.tsx — restructured to own its DialogBody/DialogFooter
  4. packages/graph-explorer/src/modules/NodesStyling/NodeStyleDialog.tsx — variant updates and form flex fix
  5. Remaining files — same pattern: secondary → outline, add Cancel, etc.

Validation

  • pnpm checks passes (types, lint, format)
  • pnpm test passes — 31 dialog-rendering tests confirmed
  • Visual: dialogs now scroll body content with pinned header/footer at short viewports
  • Visual: overlay is lighter, footer has subtle background, buttons are visually consistent

Related Issues

Check List

  • I confirm that my contribution is made under the terms of the Apache 2.0 license.
  • I have verified pnpm checks passes with no errors.
  • I have verified pnpm test passes with no failures.
  • I have covered new added functionality with unit tests if necessary.
  • I have updated documentation if necessary.

kmcginnes added 2 commits July 9, 2026 19:21
Match bottom border width (border-y-2) between route buttons and sidebar tabs, and reduce sidebar tab font and icon size.
- Add outline-danger button variant for destructive secondary actions
- Use DialogFooter in CreateConnection (resolves #1152)
- Switch all dialog footer buttons from secondary to outline variant
- Make DialogBody scroll independently of header/footer (matching AlertDialog)
- Lighten the Dialog overlay opacity
- Use primary variant on Done/Save buttons, outline on Cancel/Close
- Add Cancel button to Create Namespace dialog
@kmcginnes kmcginnes force-pushed the consistent-tab-styles branch from 9998228 to 74a8236 Compare July 10, 2026 16:08
@kmcginnes kmcginnes marked this pull request as ready for review July 10, 2026 16:10
@kmcginnes kmcginnes merged commit fe7f6c2 into main Jul 10, 2026
6 checks passed
@kmcginnes kmcginnes deleted the consistent-tab-styles branch July 10, 2026 17:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clean up the node/edge style dialog: reset button, footer, and overlay Use DialogFooter in connection modal

1 participant