Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement copy action for input #1887

Open
17 tasks
JoCa96 opened this issue Sep 18, 2024 · 0 comments
Open
17 tasks

Implement copy action for input #1887

JoCa96 opened this issue Sep 18, 2024 · 0 comments
Assignees
Labels
dev Requires technical expertise

Comments

@JoCa96
Copy link
Collaborator

JoCa96 commented Sep 18, 2024

Copied from #573:

Depends on

Question

  • The success state of OnyxTextarea is not in figma anymore? should it be removed from this ticket?

Why?

The input should support copying the current value to the clipboard as well as a clear action and a valid state.
The select should support a valid state.

Design

Success state

  • is not the same as the "valid" state
  • is an optional feature
  • error state has higher priority
  • therefore must not have impact on validation
  • for now only support for inputs (text, select) and not for textarea

https://www.figma.com/design/EBi98T51T9fGfjrYYfsulg/onyx---Archive?node-id=3427-73120&t=WFV3kII28sKTTZft-4

Copy action

  • Independent of success state, doesn't trigger success state for input
  • shows an icon after copy, maybe a special "success copy" icon?
  • support for custom copy action?
  • combinable with success

https://www.figma.com/design/EBi98T51T9fGfjrYYfsulg/onyx---Archive?node-id=3427-72824&t=WFV3kII28sKTTZft-4

Acceptance criteria

For OnyxInput

  • a copy icon can be displayed that copies the current value to the clipboard
  • a clear icon can be displayed that clears the current value
  • the input supports a valid state
    • the info message tooltip is aligned with the state color
    • valid state is controlled by the projects (via a slot)

For OnyxSelect

  • the input supports a valid state
    • the info message tooltip is aligned with the state color
    • valid state is controlled by the projects (via a slot)

Definition of Done

  • covered by component tests
  • screenshot tests are updated
  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Set task to In Approval

Review

  • add link to deployed storybook
  • approved by designer @jannick-ux
  • approved by dev add dev tag

Implementation details

  • use the :valid pseudo CSS selector
  • event is emitted when copy icon is clicked
@JoCa96 JoCa96 self-assigned this Sep 18, 2024
@JoCa96 JoCa96 added the dev Requires technical expertise label Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dev Requires technical expertise
Projects
Status: New
Development

No branches or pull requests

1 participant