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.

Sign up for GitHub

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

Jump to bottom

Implement green checkmark on OnyxInput #2143

Closed
13 tasks done
MajaZarkova opened this issue Nov 25, 2024 · 0 comments
Closed
13 tasks done

Implement green checkmark on OnyxInput #2143

MajaZarkova opened this issue Nov 25, 2024 · 0 comments
Assignees
@ChristianBusshoff
Labels
dev Requires technical expertise
Milestone
Inputs

Comments

@MajaZarkova
Copy link
Contributor

MajaZarkova commented Nov 25, 2024 •
edited by larsrickert
Loading

Why?

There are cases where it is necessary to communicate an explicit success state for an FormElement:

  • To highlight the validity of important inputs (E.g., a password input on sign-up)
  • To show validity after an asynchronous validation (E.g. Chosen username is available).
  • To show the successful execution of an action related to the input (E.g., Value copied to the clipboard)

Design

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

Acceptance criteria

  • when successMessage is shown, a green checkmark symbol is shown on the right

Reference implementations

Applicable ARIA Pattern

Definition of Done

  • The following component requirements are implemented:
    • skeleton
    • density
    • example usage added to apps/demo-app/src/views/HomeView.vue
  • covered by tests
    • functional tests (Playwright or unit test)
    • visual tests (Playwright screenshots)
  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval
@MajaZarkova MajaZarkova added this to onyx Nov 25, 2024
@MajaZarkova MajaZarkova converted this from a draft issue Nov 25, 2024
@MajaZarkova MajaZarkova self-assigned this Nov 25, 2024
@MajaZarkova MajaZarkova mentioned this issue Nov 25, 2024
Closed
13 tasks
@mj-hof mj-hof added this to the Inputs milestone Nov 27, 2024
@mj-hof mj-hof added dev Requires technical expertise 0-refinement All issues that can or need to be estimated in our next refinement labels Nov 27, 2024
@mj-hof mj-hof moved this from New to Backlog in onyx Nov 27, 2024
@MajaZarkova MajaZarkova changed the title Implement green checkmark on OnyxInput Implement green checkmark on OnyxInput and OnyxTextarea Nov 27, 2024
@MajaZarkova MajaZarkova changed the title Implement green checkmark on OnyxInput and OnyxTextarea Implement green checkmark on OnyxInput Nov 27, 2024
@mj-hof mj-hof moved this from Backlog to Ready in onyx Nov 27, 2024
@mj-hof mj-hof removed the 0-refinement All issues that can or need to be estimated in our next refinement label Nov 27, 2024
@ChristianBusshoff ChristianBusshoff moved this from Ready to In Progress in onyx Nov 29, 2024
@larsrickert larsrickert mentioned this issue Dec 5, 2024
Merged
ChristianBusshoff pushed a commit that referenced this issue Dec 5, 2024
@larsrickert
refactor(OnyxInput): use CSS implementation for clear and success icon (
95768b7 
#2252)

PR feedback for #2143.

Changes:

- CSS implementation for show/hide clear and success icon when focused
- translate label for clear button
- make clear icon also accessible via keyboard + add focus styles

@ChristianBusshoff Please take a look :)
ChristianBusshoff pushed a commit that referenced this issue Dec 6, 2024
@larsrickert @ChristianBusshoff
refactor(OnyxInput): use CSS implementation for clear and success icon (
f79d30f 
#2252)

PR feedback for #2143.

Changes:

- CSS implementation for show/hide clear and success icon when focused
- translate label for clear button
- make clear icon also accessible via keyboard + add focus styles

@ChristianBusshoff Please take a look :)
@ChristianBusshoff ChristianBusshoff moved this from In Progress to In Approval in onyx Dec 6, 2024
@ChristianBusshoff ChristianBusshoff moved this from In Approval to Done in onyx Dec 6, 2024
@mj-hof mj-hof closed this as completed Dec 11, 2024
@larsrickert larsrickert mentioned this issue Dec 16, 2024
Merged
1 task
larsrickert added a commit that referenced this issue Dec 16, 2024
@larsrickert
fix(OnyxInput): prevent keyboard focus on clear icon (#2337)
d8fe4ca 
Relates to #2143 

As discussed with Jannick, the clear icon is no longer focusable via
keyboard to not interrupt the users tab order when multiple form
elements are used.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ChristianBusshoff ChristianBusshoff

Labels
dev Requires technical expertise
Projects
onyx
Status: Done
Milestone
Inputs
Development

No branches or pull requests
3 participants
@MajaZarkova @mj-hof @ChristianBusshoff