Feature/copyable value component#86
Open
joshsadam wants to merge 12 commits into
Open
Conversation
joshsadam
force-pushed
the
feature/copyable-value-component
branch
from
c8bf58f to
d131fb8
Compare
Compact monospace chip for IDs and hashes with clipboard copy, icon feedback, and aria-live announcements for screen readers.
Drive icon feedback from semantic data-state and CSS instead of classList toggling. Extract clipboard logic, add private fields, and expose resetDelay as a Stimulus value.
Register pathogen_copyable_value in ViewHelper and add a Lookbook preview documenting keyboard, aria-live, and manual copy fallback.
Stack clipboard and checkmark icons and crossfade with a subtle scale pop. Replays on repeat copy; respects reduced motion.
Extract Pathogen::InlineCodeStyles and migrate Typography::Code to semantic PVC tokens so inline identifiers share one surface recipe across components.
Match hover, focus, touch target, and motion rules from the updated design contract. Add error state feedback and share the inline code surface with Typography::Code.
Replace raw heading and body markup with pathogen_heading, pathogen_supporting, pathogen_text, and pathogen_code while keeping semantic-token panels for surfaces.
…tions Removed unused CSS classes and optimized button styles for better alignment with design specifications. Updated hover states to improve user experience and ensure consistent styling across components.
Renamed size classes from size-4 to size-3.5 in CSS and updated corresponding references in the Ruby component. Adjusted test to verify new class usage, ensuring alignment with design specifications.
joshsadam
force-pushed
the
feature/copyable-value-component
branch
from
d131fb8 to
cf179ca
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Pathogen::CopyableValue ViewComponent for displaying short monospace values with an integrated copy-to-clipboard action, intended as a more generic replacement for IRIDA Next’s PuidComponent. It pairs the component with a Stimulus controller (Clipboard API + fallback), localized accessible labeling/announcements, and CSS-driven success/error feedback.
Changes:
- Added
Pathogen::CopyableValuecomponent + template, sharing a newInlineCodeStylessurface recipe withPathogen::Typography::Code. - Added
copyable_value_controllerStimulus controller and supporting CSS for icon crossfade and state styling. - Added Lookbook previews, i18n keys, helper registration, importmap pinning, and Ruby/JS test coverage.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| test/javascript/controllers/copyable_value_controller.test.js | Adds Vitest coverage for the new Stimulus controller’s success/error/reset behaviors. |
| test/components/previews/pathogen/copyable_value_preview/dense_list.html.erb | Adds a dense table-style preview demonstrating multiple copyable values. |
| test/components/previews/pathogen/copyable_value_preview/custom_message.html.erb | Adds a preview showing custom screen-reader feedback messaging. |
| test/components/previews/pathogen/copyable_value_preview/basic_usage.html.erb | Adds a basic usage preview for the new component. |
| test/components/previews/pathogen/copyable_value_preview/accessibility.html.erb | Adds an accessibility-focused preview (aria-label and aria-live behavior). |
| test/components/previews/pathogen/copyable_value_preview.rb | Registers the CopyableValue preview group and preview endpoints. |
| test/components/pathogen/typography/code_test.rb | Updates expectations for Code to use the new shared inline surface tokens. |
| test/components/pathogen/copyable_value_test.rb | Adds ViewComponent tests validating markup, aria attributes, controller wiring, and token usage. |
| lib/pathogen/view_helper.rb | Registers pathogen_copyable_value helper for rendering the component. |
| config/locales/fr.yml | Adds French translations for CopyableValue messages and aria-label text. |
| config/locales/en.yml | Adds English translations for CopyableValue messages and aria-label text. |
| config/importmap.rb | Pins the new copyable_value_controller for importmap usage. |
| app/lib/pathogen/inline_code_styles.rb | Introduces shared inline surface class recipe used by Code and CopyableValue. |
| app/components/pathogen/typography/code.rb | Switches Code to reuse the shared inline surface tokens and updates component docs. |
| app/components/pathogen/copyable_value.rb | Adds the new ViewComponent implementation and stimulus data wiring. |
| app/components/pathogen/copyable_value.html.erb | Adds the component template including icons, button, and aria-live region. |
| app/assets/stylesheets/pathogen.tailwind.css | Adds custom CSS for CopyableValue icon crossfade and state styling. |
| app/assets/stylesheets/pathogen_view_components.css | Updates the compiled Tailwind output to include new utilities and CopyableValue CSS. |
| app/assets/javascripts/pathogen_view_components/copyable_value_controller.js | Adds the controller that performs copy + fallback and state/announcement updates. |
| app/assets/javascripts/pathogen_view_components.js | Registers and exports the new controller as part of the bundled controller set. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Complete the basic usage preview sentence with a colon and document the execCommand fallback in the component class comment.
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.
What does this PR do and why?
Pathogen::CopyableValue— a compact inline monospace field with a copy button for IDs and short values to replace the PuidComponent in IRIDA Next with a more generic, cleaner version.aria-livefeedback, and an animated clipboard-to-checkmark crossfade.Screenshots or screen recordings
Light
Dark
In IRIDA Next (branch published after this is released)
Current Projects Dashboard:
Updated Projects Dashboard:
Current Project Page
Updated Project Page
How to set up and validate locally
bin/setup(or ensure deps are installed)pnpm run build:cssbin/test test/components/pathogen/copyable_value_test.rbpnpm test -- test/javascript/controllers/copyable_value_controller.test.jsPR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.