Skip to content

Remove Bootstrap styling dependency from ng-kit library - #150

Closed
pavankjadda wants to merge 1 commit into
mainfrom
feat/remove-bootstrap
Closed

pavankjadda wants to merge 1 commit into
mainfrom
feat/remove-bootstrap

Conversation

@pavankjadda

Copy link
Copy Markdown
Contributor

Summary

  • Bundle Bootstrap 5-style CSS for button directives and alerts in the library's ng-kit cascade layer. Existing button, alert, spinner, and dialog class names remain; the demo still imports Bootstrap 5 for its layout.
  • Render the library spinner as an indeterminate Angular Material progress spinner. Keep bootstrapSpinner as a deprecated, no-op input so existing bindings compile.
  • Replace Bootstrap-dependent dialog spacing with library CSS and update the demo documentation and tests.

Validation

  • pnpm run test: 114 passed.
  • pnpm run lint: 0 errors, 31 existing warnings.
  • pnpm run build and pnpm run build:demo: passed.
  • Playwright: 40 passed before the final class-name correction; the 10 alert, button, dialog, and home tests passed again afterward.
  • With the demo Bootstrap import temporarily disabled, checked button styling and loading animation, alert colors and dimensions, and dialog title typography. The import was restored.

Migration notes

  • The default spinner appearance changes from Bootstrap to Material. [bootstrapSpinner] is still accepted but has no effect.
  • Class names are unchanged. The bundled button CSS uses global names such as .btn, .btn-primary, and .gap-1, so those selectors can also affect unrelated elements using the same names.
  • In apps that use CSS layers, declare ng-kit before utility layers so utility rules retain precedence.
  • Without Bootstrap, alerts use Bootstrap 5's light color palette as a fallback. Apps need theme overrides for a different dark palette.

Migration: Spinner now renders an indeterminate Material progress spinner; bootstrapSpinner remains accepted but has no effect. Existing button, alert, and dialog class names remain. The library supplies CSS for these classes, so global button utility names can affect other elements. Apps using cascade layers should place ng-kit before utilities. Without Bootstrap, alert colors use the Bootstrap 5 light palette as fallback; dark mode needs app theme overrides.
@netlify

netlify Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for ng-kit ready!

Name Link
🔨 Latest commit 7a9266e
🔍 Latest deploy log https://app.netlify.com/projects/ng-kit/deploys/6ac85e4a0688f90008f36e30
😎 Deploy Preview https://deploy-preview-150--ng-kit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pavankjadda pavankjadda closed this Oct 9, 2026
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.

1 participant