Update the header style - #17
Merged
Merged
Conversation
Styles: - Use Bootstrap's --bs-secondary-color for the placeholder so it matches native .form-control/.form-select placeholders in light and dark modes. - Replace the toggle's triangle caret with the Bootstrap 5.3 form-select chevron, rendered via a CSS mask so it inherits currentColor. It shows chevron-down when closed and rotates to chevron-up when open. - Draw the default checkmark and the checkbox selection indicator from the same masked SVG so they share the chevron's stroke width and rounded caps, and inherit the option's text color. - Add a standalone comparison page (docs/static/examples/comparison.html) showing the native select next to the selectpicker. Dependencies: - Update devDependencies to their latest compatible versions (Docusaurus 3.10.2, Playwright 1.62.1, sass 1.102.0, webpack 5.109.2, rollup 4.62.3, postcss 8.5.25, react 19.2.8, etc.) and bump the safe majors @rollup/plugin-terser 1.0.0 and cssnano 8.0.2. - This clears the previously flagged exploitable advisories (undici, webpack-dev-server, brace-expansion, js-yaml, shell-quote, svgo, ...). - ESLint is kept on ^9 because the flat config relies on core formatting rules removed in ESLint 10. - The only remaining audit findings are the build/docs-only transitive packages nanoid (<3.3.17 fix is ESM-only, incompatible with postcss) and image-size (<=2.0.2, no patched release). The published package is dependency-free, so consumers are unaffected. Verified: npm run build, npm run docs:build, and all 24 Playwright e2e tests pass. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Refresh package-lock to the latest in-range versions used by the docs toolchain and build (rollup 4.62.4, caniuse-api dedupe). All Docusaurus and docs dependencies were already updated to their latest compatible versions in the previous commit. Verified: npm run build, npm run docs:build, and the running docs dev server all succeed. The live /docs/examples page renders 50 selectpickers with no console errors, and the updated chevron/placeholder styles are served correctly. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…variables - Render the dropdown chevron at exactly 16px x 12px (mask-size 16px 12px) to mirror Bootstrap's `.form-select` `background-size`, instead of a 0.875rem `contain` box that scaled the icon slightly too large. - Parameterize the `bs-mask-icon` mixin with a mask-size argument so the chevron uses 16px 12px while selection ticks keep `contain`. - Convert remaining hardcoded colors to Bootstrap CSS variables so theme changes propagate: validation borders now use `--bs-form-invalid/valid-border-color` (falling back to danger/success), create-option/selected-item/focus states use `--bs-primary-rgb`, and the disabled option color uses `--bs-dropdown-link-disabled-color`. - Expand the comparison example with optgroups, a disabled option, and a divider to verify parity with native Bootstrap. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace the comparison example's "toggle dark mode" button with a proper
color mode selector (Light / Dark / Auto). "Auto" follows the OS
`prefers-color-scheme` and updates live when the system theme changes.
- Make the comparison discoverable from the docs:
- Add a "Comparison" navbar entry that opens the standalone page in a new
tab (uses `pathname://` so it isn't rewritten with a trailing slash).
- Add a "Native Bootstrap comparison" subsection under Styling and layout
with a live native-vs-selectpicker example and a new-tab link to the
full standalone page.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…on and tick The remove control on selected tags used a bold "×" text character inside a gray circular chip, which didn't match the stroke weight or feel of the chevron and selection checkmark. - Add a shared `$bs-x-svg` stroke-based X icon that reuses the same `$bs-icon-stroke-width` and rounded caps/joins as the chevron and tick. - Render `.bs-selected-item-remove` through the `bs-mask-icon` mixin so the X inherits `currentColor` (muted `--bs-secondary-color` by default, darkening to `--bs-body-color` on hover/focus) and stays theme-aware in light and dark. - Drop the now-unused `\u00d7` text node from the rendered markup. - Give the list-style remove an explicit icon size so the mask renders. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Drive the popover header color, background, and border from Bootstrap's card-cap variables so it stands out from the popover body and stays legible in both light and dark modes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The build bakes the package.json version into the dist banner, but the version bump ran after the build, so published files were stamped with the stale committed version. Bump before building and publish the built files. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Use --bs-popover-header-padding-y/-x variables (fallback 0.5rem/1rem) with !important so Bootstrap's .popover-header padding can't override it - Vendor Bootstrap and FontAwesome into docs so the examples work without CDN access; window.bootstrap now loads and the selectpicker menus render - Add scripts/copy-vendor-to-docs.js and run it during docs:prepare Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Update header padding assertion to 8px/16px (0.5rem/1rem) - Load Bootstrap from node_modules in the test harness so tests run without CDN access, matching the existing FontAwesome setup Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The header close used Bootstrap's heavier .btn-close background image, so the X looked larger than the selection tick and tag remove icons. Render it with the same masked stroke SVG at 0.75rem so the weight and size match. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Revert the custom .btn-close overrides and instead scale Bootstrap's close button with font-size (its dimensions are em-based). This keeps all of Bootstrap's own close-button styling intact while sizing the X to match the selection tick and other icons. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The .popover-header rules were global and overrode Bootstrap's own class for every popover on the page (needing !important to win). Scope them under .bootstrap-select so we no longer override Bootstrap's global class and avoid future conflicts. The padding keeps !important since the popover header padding variables are undefined in the dropdown-menu context. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request improves the documentation build and serving process by making the docs site self-contained, ensuring all third-party assets (like Bootstrap and FontAwesome) are served locally rather than from a CDN. This allows the documentation examples to work in offline or restricted environments, and also updates the visual styling of selectpicker headers for better consistency with Bootstrap. The most important changes are:
Documentation asset management:
scripts/copy-vendor-to-docs.jsto copy Bootstrap and FontAwesome assets fromnode_modulesinto thedocs/static/vendordirectory, making the docs site self-contained and removing reliance on external CDNs.docs:preparescript inpackage.jsonto run the new vendor copy script, ensuring vendor assets are always available before building or serving the docs.Docusaurus configuration updates:
docs/docusaurus.config.jsto reference Bootstrap and FontAwesome assets from the localvendordirectory instead of external CDNs, so the docs site loads all dependencies locally. [1] [2]Styling improvements:
sass/bootstrap-select.scssto use Bootstrap card variables for color, background, and border, improving appearance and legibility in both light and dark modes.Build process adjustment:
npm versionstep in the NPM release workflow to occur before the build step, ensuring the correct version is baked into built assets.