Skip to content

feat(ui)!: add collapsible groups, compact overlays and remove charts - #55

Merged
sdcorejs merged 2 commits into
mainfrom
feat/form-builder-group-collapse
Sep 11, 2026
Merged

feat(ui)!: add collapsible groups, compact overlays and remove charts#55
sdcorejs merged 2 commits into
mainfrom
feat/form-builder-group-collapse

Conversation

@sdcorejs

@sdcorejs sdcorejs commented Sep 11, 2026

Copy link
Copy Markdown
Owner

Adds per-group collapse controls and makes table menus and overlay spacing more compact. Popups used inside tables escape clipped containers. Chart rendering becomes the consumer's responsibility.

Changes:

  • Add optional form-builder group collapsible, matching sd-section; groups expose visibility conditions without disableWhen.
  • Expand/collapse individual Sidebar V3 groups, retaining state through search and rail toggles and opening the active route's ancestors.
  • Render hover-copy tooltips and query-builder add menus through CDK overlays with dismissal and cleanup.
  • Replace desktop table command/action children and overflow MatMenus with compact CDK menus; preserve callbacks, filtering, disabled items, keyboard navigation and native button focus.
  • Clip pill-tab hover effects, preserve the active fill and add 4px segmented-tab spacing.
  • Use white drawer/dialog/bottom-sheet headers and footers with 12px 16px padding; body padding is also 12px 16px on desktop and mobile.
  • Remove chart components, exports, Chart.js dependencies and Showcase entries. Synchronize all changes from canonical v19 to v20/v21/v22.

Breaking change: consumers using the removed chart components must remove Core UI chart imports and install/configure their chosen chart library. sd-org-chart remains available. Migration notes are included in CHANGELOG.md and README.npm.md.

Local validation:

  • Full canonical v19 unit suite: 5,372 passed.
  • Focused modal/drawer suite after the final padding adjustment: 115 passed; command/action menu regression suite: 12 passed on both Angular 19 and Angular 22, including disabled-item keyboard navigation.
  • Full v19 lint, v19 package build and Showcase build passed.
  • Repository script tests, Showcase example generator tests and four-line sync checks passed.
  • Browser checks confirmed desktop/mobile overlay padding, pill/segmented hover styling, compact menus, hidden/disabled items, Enter/Space/Escape and focus restoration.

Add collapsible form-builder groups and per-group Sidebar V3 expansion.
Move hover-copy/query-builder popups outside clipped containers and use
compact CDK menus for table command children and selection actions.
Refine pill/segmented tab hover styling and align drawer, modal and
bottom-sheet header, body and footer padding at 12px 16px.

Remove bundled chart components and Chart.js; update consumer migration
notes, Showcase examples and all four Angular-major workspaces.

BREAKING CHANGE: chart components and exports are removed. Consumers must
choose and configure their own chart library. sd-org-chart remains supported.

Verification: v19 full suite (5372 tests), focused overlay suite (115 tests),
menu regression suite (12 tests), full v19 lint, library and Showcase builds,
repository script tests and four-line sync checks passed. Browser checks
covered desktop/mobile padding, tab hover, menus, keyboard and focus.
Use CDK disabled state for command menu items so Angular 22 can focus disabled entries while suppressing pointer and keyboard activation. Preserve disabled styling and verify navigation to enabled actions across CDK versions.

Validated 12 command/action menu tests on both Angular 19 and Angular 22, scoped ESLint, and four-version synchronization.
@sdcorejs
sdcorejs merged commit 15a7b25 into main Sep 11, 2026
6 checks passed
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.

2 participants