adebisi-fa
930af97f05
- @carbon/web-components v2.50.0 via the IBM CDN (version-pinned); @carbon/styles CSS + IBM Plex Sans for tokens/typography - landing: Carbon header + cds-tile tool cards - fingerprint wizard: Carbon-styled form controls, cds-progress-bar scan progress, cds-tag badges, cds-inline-notification replacing swal - cropper: cds-toast replacing toastr, cds-checkbox review reasons, cds-tag process badge; vue-croppa pad kept in the Carbon layout - Bootstrap 4, swal, toastr and jQuery removed from all pages - behavior frozen: same flows, endpoints, validation and copy
43 lines
1.7 KiB
Markdown
43 lines
1.7 KiB
Markdown
# Proposal: carbon-ui-redesign
|
|
|
|
## Why
|
|
|
|
The tools pages are styled with ad-hoc Bootstrap 4 overrides and ad-hoc dialogs
|
|
(swal/toastr). Adopting the Carbon Design System gives the two tools a single
|
|
professional design language (IBM Plex typography, Carbon components, Carbon
|
|
tokens) consistent with the wider YOUreka ecosystem.
|
|
|
|
## What Changes
|
|
|
|
- **BREAKING (visual only)**: All three surfaces — landing, `/fingerprint`
|
|
wizard, `/cropper` — are rebuilt on Carbon Design System web components
|
|
(`@carbon/web-components` v2.50.0 via the IBM CDN, version-pinned) with IBM
|
|
Plex Sans typography and Carbon tokens for layout/colors.
|
|
- Bootstrap 4, swal, toastr and jQuery are removed from the pages; errors and
|
|
confirmations surface as Carbon inline notifications and toasts.
|
|
- Form fields use Carbon-styled native controls (text input, select, checkbox,
|
|
textarea) so Vue state bindings are unchanged; buttons, tags, notifications,
|
|
toasts, progress bar and tiles are Carbon web components.
|
|
- **Behavior is frozen**: flows, endpoints, validation and copy stay exactly as
|
|
they are. The vue-croppa crop pad is kept (no Carbon equivalent), framed in a
|
|
Carbon tile/panel.
|
|
|
|
## Capabilities
|
|
|
|
### New Capabilities
|
|
|
|
(none)
|
|
|
|
### Modified Capabilities
|
|
|
|
- `tools-app`: adds a requirement that the tools UI is built on Carbon Design
|
|
System web components with Carbon notifications.
|
|
|
|
## Impact
|
|
|
|
- Pages and `style.css` rewritten; `app.js` files adapted (notification/toast
|
|
models replace swal/toastr calls; `Vue.config.ignoredElements` for cds-*).
|
|
- No server-side changes; no new npm dependencies; component JS + Plex font +
|
|
Carbon CSS delivered via CDN (IBM CDN for components, jsdelivr for
|
|
@carbon/styles, Google Fonts for Plex).
|