NMS-19981: PrimeVue migration: Replace Feather icons, completely remove Feather#8636
Open
synqotik wants to merge 25 commits into
Open
NMS-19981: PrimeVue migration: Replace Feather icons, completely remove Feather#8636synqotik wants to merge 25 commits into
synqotik wants to merge 25 commits into
Conversation
Generate local template-only SFCs for all 262 @featherds/icon glyphs into src/components/icons/<category>/<Name>.vue (SVG geometry copied verbatim via a one-time render-to-string generator, scripts/generate-icons.mjs), plus a self-contained OnmsIcon wrapper (depends only on vue) replacing FeatherIcon with the same :icon/flex/title API. No app code wired to these yet.
Rewrite all @featherds/icon imports across src to the local vendored icons + OnmsIcon wrapper (<FeatherIcon> -> <OnmsIcon>; deep icon imports -> @/components/icons/<cat>/<Name>.vue). Rename the .feather-icon CSS class to .onms-icon in the 5 consuming components; retype icon components from typeof FeatherIcon/DefineComponent to vue Component in Menu/utils.ts and UserSelfServiceMenuItem.vue; convert SideMenu's PrimeIcons toggle/submenu chevron to OnmsIcon (ChevronLeft/ChevronRight); rename 5 test stubs; ignore scripts/ in eslint. No @featherds/icon imports remain in src. The package stays in package.json: other still-present @featherds/* packages (@featherds/input-helper source) import it transitively and rely on it being hoisted; it will be removed when those packages are dropped later in Phase 6.
Replace @featherds/styles/mixins/typography with local, self-contained src/styles/_onms-typography.scss (all 15 typography mixins as onms-*, Feather metrics inlined, Inter/OpenSans literals, color via var(--p-text-color)). Repoint all 54 consumers (both @import and @use forms) and rename @include sites to onms-. Other @featherds/styles imports remain for later Phase 6 steps.
Replace the remaining feather-row/feather-col-12 (Home, UsageStatistics) with onms-row/onms-col-12, and feather-container (ProvisionDConfig) with a new .onms-container in onms-grid.scss (max-width 75rem + 1.5rem padding, matching FeatherDS). Remove the now-unused @featherds/styles/lib/grid import from App.vue. No responsive/offset variants were in use.
Replace @featherds/styles/mixins/elevation with local self-contained src/styles/_onms-elevation.scss: parameterized onms-elevation($level) with the Material box-shadow ramp inlined as literals (levels 0-4; app uses 1/2) and the elevated surface via var(--p-content-background). Rewrite the 9 @include sites (incl. one namespaced @use) and remove the dead elevation import from 7 files that imported but never used it.
Define SORT (enum; asc/desc/none values preserved), ISelectItemType and
IAutocompleteItemType (loose index-signature interfaces) locally in
src/types/index.ts, and repoint all imports from @featherds/{table,select,
autocomplete} to @/types (8 SORT + 13 ISelectItemType + 6 IAutocompleteItemType
sites). @featherds/select and @featherds/autocomplete now have no source usage;
@featherds/table remains only via its table SCSS (separate cleanup).
Add src/styles/_onms-table.scss with onms-table()/onms-table-condensed() mixins (the only two the app used) copied verbatim from @featherds/table, typography via onms-typography and border/text tokens mapped to --p-*. Rewrite the 4 @include consumers (GraphDataTable, Map alarm/node grids, MarkerClusterPopupContent) and remove the dead @use import from 4 files (NodeAdvancedFiltersDrawer, 3 SnmpConfig tabs). @featherds/table now has no source usage.
- Search box: reposition top-left (was hidden under the fixed menu bar), add a magnifying-glass icon + a translucent light panel/padding, white input. - Show Severity: drop the '>=' from the label, force dark-on-white so it reads over the always-light map in dark mode, translucent panel/padding. - Push Leaflet zoom/layer controls below the fixed menu bar; drop the layers control's expanded list below its icon so it no longer overlaps Show Severity. - Stop the map + controls shifting up on first click: disable Leaflet keyboard focus and drop the container tabindex (the browser was scrolling the focus-target container into view from under the fixed menu bar).
…scroll-transform hack)
…), fix double scroll
…+ useOutsideClick; drop 40 @featherds packages
…yle files off Feather tokens
…add primary-text-on-surface
…erds/styles; FeatherDS fully removed from UI
…e, opennms-styles rename) + fix SPA content top-offset below fixed menubar
synqotik
marked this pull request as ready for review
July 16, 2026 01:17
Contributor
Author
|
Note, smoke tests passed in a previous build, latest build did not change any code. |
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
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.
Final major step in FeatherDS -> PrimeVue migration. This completely replaces Feather with either PrimeVue or just our own vendored components/styles.
See the Jira ticket for a few screenshots. For the most part, should not notice any difference from before.
After this PR, this epic should be complete, other than any remaining bugs/issues found during actual testing.
Continue to use the Feather icons, since PrimeVue doesn't have full replacements for all of them, plus we'd like to remain vendor-neutral. Since we can freely use Feather, they have been imported into this project under
ui/src/components/icons.Replace all uses of any Feather components, in some cases created
Onmscommon components, in other cases just needed inline markup.Replaced all Feather styles, colors, CSS, mixins, types, etc. Replaced Feather grid with
onms-grid. Replaced Feathertablewithonms-table.Add
onms-SCSS token layer, rewire any--feather-*into--onms-*, convert Feather severity colors toonmsCompletely remove all
@featherdspackagesLots of fixes to get correct or improved behavior from PrimeVue or else vendored components/styles
Various GeoMap fixes to ensure everything works properly, popups always display fully, things are aligned, Alarms/Nodes tables scroll properly, etc.
Remove any dead code
Updated docs as much as possible to remove Feather references. Some are kept in to note behaviors which we kept
External References