feat(ui): rebuild all tools pages on Carbon Design System web components
- @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
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user