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

va-button: adding independent chevron icon prop [WIP] #1058

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Dr-Pongo
Copy link

@Dr-Pongo Dr-Pongo commented Feb 15, 2024

Chromatic

https://va-button-icon-prop--60f9b557105290003b387cd5.chromatic.com


Configuring this pull request

  • Link to any related issues in the description so they can be cross-referenced.
  • Add the appropriate version patch label (major, minor, patch, or ignore-for-release).
    • See How to choose a version number for guidance.
    • Use ignore-for-release if files haven't been changed in a component library package. (ie. only Storybook files)
  • DST Only: Increment the /packages/core version number if this will be the last PR merged before a release.
  • Complete all sections below.
  • Delete this section once complete

Description

Test PR to see if this is a viable change that could benefit with button customization in the forms system by adding chevronLeft and chevronRight props to va-button which work with the existing back/continue prop functionality for displaying the left/right chevron icons in the button text. I'm not super hip with component library changes, so if there needs to be adjustments feel free to let me know!

Some background:
We use a number of custom pages and based on accessibility feedback it's beneficial to have custom text in the progression buttons that convey what page is coming up next. This has resulted in some extensive customization to get buttons like the following implemented and this change could help in a major way! This is mostly as a response to the feedback we received on some heavy styling changes we're looking to implement.

image

QA Checklist

  • Component maintains 1:1 parity with design mocks
  • Text is consistent with what's been provided in the mocks
  • Component behaves as expected across breakpoints
  • Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
  • Designer has signed off on changes (if applicable. If not applicable provide reason why)
  • Tab order and focus state work as expected
  • Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
  • New components are covered by e2e tests; updates to existing components are covered by existing test suite
  • Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

  • QA checklist has been completed
  • Screenshots have been attached that cover desktop and mobile screens

Definition of done

  • Documentation has been updated, if applicable
  • A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

@Dr-Pongo
Copy link
Author

@micahchiang from our discussion earlier!

CC: @amponce @OptionSelect @josephrlee

Copy link

@OptionSelect OptionSelect left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants