fix: update copy text to include icon for better visibility#2482
fix: update copy text to include icon for better visibility#2482CommanderStorm merged 6 commits intomaplibre:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enhances the copy functionality visibility by adding a "⧉" (TWO JOINED SQUARES) Unicode icon to all "Click to copy" text throughout the UI. The change improves user experience by providing a visual indicator alongside the text instruction.
- Adds the "⧉" icon prefix to all "Click to copy" tooltip text
- Updates component files and corresponding test snapshots
- Maintains consistency across the TooltipCopyText and SpriteCanvas components
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
martin/martin-ui/src/components/ui/tooltip-copy-text.tsx |
Adds copy icon to the main reusable tooltip component's "Click to copy" text |
martin/martin-ui/src/components/sprite/SpriteCanvas.tsx |
Adds copy icon to both sprite canvas tooltip instances (preview and full view modes) |
martin/martin-ui/__tests__/components/catalogs/__snapshots__/sprite.test.tsx.snap |
Updates test snapshots to reflect the icon addition in rendered output |
| <div className="text-xs">{text}</div> | ||
| <br /> | ||
| <div className="text-sm">Click to copy</div> | ||
| <div className="text-sm">⧉ Click to copy</div> |
There was a problem hiding this comment.
The visual hierarchy appears inverted: the actual content (line 44, text-xs) is smaller than the instructional hint (line 46, text-sm). The primary content that the user wants to copy should be more prominent than the secondary "Click to copy" instruction. Consider making the content text larger (text-sm or text-base) and the instruction smaller (text-xs) with reduced opacity to establish proper visual hierarchy.
| </code> | ||
| <br /> | ||
| <span className="text-xs text-gray-500">Click to copy</span> | ||
| <span className="text-xs text-gray-500">⧉ Click to copy</span> |
There was a problem hiding this comment.
I'd like to have
Plus import { Copy } from 'lucide-react'; at the top
| <span className="text-xs text-gray-500">⧉ Click to copy</span> | |
| <span className="text-xs text-gray-500"><Copy /> Click to copy</span> |
There was a problem hiding this comment.
While it does look cleaner, do you really want to have a separate dependency and an image just for this? Unicode symbol is so much simpler
There was a problem hiding this comment.
P.S. This is totally up to you - feel free to drive it any way you feel is better if you feel strongly
There was a problem hiding this comment.
We are already using proper icons for all proper icons, I would like to not add a second class of icons.
CommanderStorm
left a comment
CommanderStorm
left a comment
There was a problem hiding this comment.
I also took the liberty to clean up the tests surounding this a bit
|
@CommanderStorm is this what you wanted? I got this by running 
I think the icon and the text should be smaller than the name of the label, and the icon might be best to be placed on the same line as the instruction text... Perhaps left align it too? Or what would be best? |
|
jikes.. |
|
defintively 100% intentional |
## 🤖 New release * `martin-tile-utils`: 0.6.8 -> 0.6.9 (✓ API compatible changes) * `mbtiles`: 0.15.0 -> 0.15.1 (✓ API compatible changes) * `martin-core`: 0.2.5 -> 0.2.6 (✓ API compatible changes) * `martin`: 1.2.0 -> 1.3.0 <details><summary><i><b>Changelog</b></i></summary><p> ## `mbtiles` <blockquote> ## [0.15.1](mbtiles-v0.15.0...mbtiles-v0.15.1) - 2026-01-27 ### Added - add MLT decoding support ([#2512](#2512)) - migrate our log library to tracing ([#2494](#2494)) ### Other - unignore `diff_and_patch_bsdiff` test with unique SQLite database names ([#2480](#2480)) - *(mbtiles)* remove the prefix-ism around how files are named for binary diff copy and simpify their naming ([#2478](#2478)) - *(mbtiles)* add assertion messages what we are checking to the copy tests ([#2477](#2477)) </blockquote> ## `martin-core` <blockquote> ## [0.2.6](martin-core-v0.2.5...martin-core-v0.2.6) - 2026-01-27 ### Added - migrate our log library to tracing ([#2494](#2494)) - *(martin-core)* Allow glyph ranges more than 0xFFFF ([#2438](#2438)) ### Fixed - *(perf)* Remove FontSources.masks as they were consuming large amounts of memory even when no font sources were set ([#2519](#2519)) - improve error message if no SVG sprite files are present ([#2516](#2516)) ### Other - move our imports to tracing ([#2500](#2500)) - *(deps)* shear our dependencys ([#2497](#2497)) </blockquote> ## `martin` <blockquote> ## [1.3.0](martin-v1.2.0...martin-v1.3.0) - 2026-01-27 ### Added - *(srv)* Add `route_prefix` configuration for native subpath support without the need of a reverse proxy override ([#2523](#2523)) - add MLT decoding support ([#2512](#2512)) - migrate our log library to tracing ([#2494](#2494)) - improve martin-cp progress output time estimate ([#2491](#2491)) - *(pg)* include ID column info for tables ([#2485](#2485)) - *(pg)* support PostgreSQL materialized views ([#2279](#2279)) - *(martin-core)* Allow glyph ranges more than 0xFFFF ([#2438](#2438)) ### Fixed - *(ui)* clipboard copy for http://0.0.0.0:3000 and unify implementations ([#2487](#2487)) - the `Copy` icon displaying nicely, next to the text and with enough padding ot all items ([#2483](#2483)) - update copy text to include icon for better visibility ([#2482](#2482)) - *(perf)* Remove FontSources.masks as they were consuming large amounts of memory even when no font sources were set ([#2519](#2519)) - improve error message if no SVG sprite files are present ([#2516](#2516)) ### Other - move our request logging to tracing ([#2508](#2508)) - move our imports to tracing ([#2500](#2500)) - *(deps)* shear our dependencys ([#2497](#2497)) - *(ui)* adjust margin for copy icon in URL component ([#2489](#2489)) - unignore `diff_and_patch_bsdiff` test with unique SQLite database names ([#2480](#2480)) - *(mbtiles)* remove the prefix-ism around how files are named for binary diff copy and simpify their naming ([#2478](#2478)) - *(mbtiles)* add assertion messages what we are checking to the copy tests ([#2477](#2477)) </blockquote> </p></details> --- This PR was generated with [release-plz](https://github.com/release-plz/release-plz/). --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This adds a
⧉ Click to copytext.My only concern (possibly todo in another PR) is that
Click to copytext is bigger than the label text. I'm not a designer, but it seems the label should be bigger and more pronounced than the command hint, which should be grayer and smaller.