Conversation
packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts
Outdated
Show resolved
Hide resolved
yordan-st
force-pushed
the
barcode-widget
branch
from
b29d73e to
67fca75
Compare
- remove unnecessary context, use props instead - split config, make it more typed - add class and style to the widget - remove unnecessary hooks, use simple utils instead - update icons and tiles
- hide ean128 for qrcode - change code value to expression - add button position and card view config - implement layout, styling and icon
- static value consistency checks - dynamic value warnings and runtime error alert
- enable displayValue for addons - improve conditional visibility for certain configurations - improve descriptions
- added svg assets for barcode preview - add asset resolver for image sources - encapsulate svg logic into hook - cleaner main preview component
yordan-st
force-pushed
the
barcode-widget
branch
from
d40907a to
21331d1
Compare
yordan-st
force-pushed
the
barcode-widget
branch
from
21331d1 to
086c244
Compare
| return ( | ||
| <div className="barcode-renderer"> | ||
| <div className="alert alert-danger" role="alert"> | ||
| <strong>Barcode Error:</strong> {error} |
There was a problem hiding this comment.
I think the error messages (I see them in config/validation.ts) are more targeted to the developers, like EAN-13 requires 12 or 13 numeric digits (12 data digits + optional checksum).. So they make less sense for the end user, they are likely not in control of this even. So a more generic error would be better.
There was a problem hiding this comment.
I get what you mean, the end user will view it as well. But my intended purpose for the runtime messages is to intercept and show what exactly is wrong to developers testing their app with dynamic values.
Will make it so that
- users receive a generic alert
- developers see more specific error logs in the console
- developers get a SP warning, to double check the format and runtime value match
| return ( | ||
| <div className="barcode-renderer"> | ||
| {restProps.buttonPosition === "top" && downloadButton} | ||
| <div className="barcode-preview-barcode-container" style={{ height: displayHeight }}> |
There was a problem hiding this comment.
We want to have the same DOM structure and class names in both, preview and real world. Ideally, via react components reuse, but reuse can introduce additional complexity we don't always want, so it should be reasonable effort.
Bit having different classes defeats the purpose of design preview, we don't want to maintain two different stylesheets.
There was a problem hiding this comment.
Simplified it as much as possible, but we need additional DOM elements to preview how an overlay image would look like. So those are still in there.
- simplified preview DOM - removed redundant css classes - merged remaining preview styles into main stylesheet - renamed qr overlay property and css classes - updated tests error messages to check for new messages
2 participants
Pull request type
New feature (non-breaking change which adds functionality)\
Description