[va-text-input] Add z-index to input field and symbol

[josephrlee]

Chromatic

https://currency-symbol-fix--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

This pull request makes a minor update to the styling of the va-text-input component to improve element stacking order. Specifically, it adds z-index values to ensure that the #symbol and #inputField elements layer correctly.

• Styling adjustments:
  • Added z-index: 2 to #symbol and z-index: 1 to #inputField in va-text-input.scss to control their stacking order.

Related tickets and links

Slack thread

#5346

Closes

Screenshots

Current	Updated

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

• Engineering: platform-design-system-fe
• Accessibility: platform-design-system-a11y
• Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

• The PR has the minor label
• The component matches the Figma designs.
• All properties, custom events, and utility functions have e2e and/or unit tests
• A new Storybook page has been added for the component
• Tested in all VA breakpoints.
• Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR
• Accessibility has approved the PR

🌱 New Component Variation Added

• The PR has the minor label
• The variation matches its Figma design.
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• A new story has been added to the component's existing Storybook page
• Any Chromatic UI snapshot changes have been accepted by a design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR

🐞 Component Fix

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any markup changes are evaluated for impact on vets-website.
  • Will any vets-website tests fail from the change?
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

♿️ Component Fix - Accessibility

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR
• Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

• The PR has the major label
• vets-website and content-build have been evaluated to determine the impact of the breaking change
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Tested in vets-website using Verdaccio
• Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

• The PR has the minor label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

📖 Storybook Update

• The PR has the ignore-for-release label
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

🎨 CSS-Library Update

• The PR has the css-library label
• vets-website and content-build have been checked to determine the impact of any breaking changes
• Engineering has approved the PR

[amyleadem]

Thanks for this contribution, @josephrlee!

After digging into this issue a little bit, I noticed that it was likely related to the the addition of a z-index to global focus styles in focusable.css. If I remove that z-index, it fixes the issue in input prefix/suffix. I'm wondering if instead of adding z-index definitions in this component, if we can just strip the global z-index in focusable.css.

@jamigibbs, I see that the focusable.css z-index was added with the sidenav component. do you remember why that was added there? I am having trouble seeing the change in the side nav when I remove it. Can we scope that focusable.css z-index change to be more targeted to side nav (or removed entirely)? Then we wouldn't have to continue manipulating z-index across components.

[josephrlee]

Thanks @amyleadem , I'll let you and @jamigibbs decide on the best route here then!

[jamigibbs]

@jamigibbs, I see that the focusable.css z-index was added with the sidenav component. do you remember why that was added there? I am having trouble seeing the change in the side nav when I remove it. Can we scope that focusable.css z-index change to be more targeted to side nav (or removed entirely)? Then we wouldn't have to continue manipulating z-index across components.

@amyleadem The z-index fixed an overlay issue where the yellow focus border was sitting behind the submenu's left border. It can be tested in this Storybook story. Perhaps we can just bring those styles into the va-sidenav component and remove the z-index from the global styles?

z-index: 2

No z-index