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

Cannot set width of VaTextInput #1712

Closed
2 of 6 tasks
rhasselle-oddball opened this issue Apr 27, 2023 · 4 comments · Fixed by department-of-veterans-affairs/component-library#707
Closed
2 of 6 tasks
Assignees
Labels
bug Something isn't working dst-engineering Issues that require work from Design System Team engineers platform-design-system-team va-text-input DS text-input component

Comments

@rhasselle-oddball
Copy link

rhasselle-oddball commented Apr 27, 2023

Bug Report

  • I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Some form input fields we would like smaller width. Here is an example:
This text field is applying 'usa-input-medium'
image

Slack thread: https://dsva.slack.com/archives/C01DBGX4P45/p1682110833661429?thread_ts=1681943660.853739&cid=C01DBGX4P45

Related ticket:
#1704

Workarounds:
We can target va-text-input::part(input), but sounds like we want a more built-in solution to this based on the slack thread above.

What I expected to happen

Text input should allow for variations or customization in width in a straight forward manner

Reproducing

  • Formation version:
  • Device: (e.g. iPhone 8, Macbook), windows 11
  • Browser: (e.g. Firefox, IE 11) chrome

Steps to reproduce:

  1. create a va-text-input or VaTextInput
  2. try to change width to a small size in the code

Classification

  • visual issue

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

  • This bug is blocking work currently in progress
  • This bug is affecting work currently in progress but we have a workaround
  • This bug is blocking work planned within the next few sprints
  • This bug is not blocking any work
  • Other

Details

@caw310 caw310 added the va-text-input DS text-input component label May 1, 2023
@jamigibbs
Copy link
Contributor

We should also look at making the width dynamic for va-number-input as well: https://dsva.slack.com/archives/C01DBGX4P45/p1684335127702679

@caw310
Copy link
Contributor

caw310 commented May 18, 2023

Reference text input variants in USWDS.
https://designsystem.digital.gov/components/text-input/

@caw310 caw310 added the dst-engineering Issues that require work from Design System Team engineers label May 18, 2023
@jamigibbs
Copy link
Contributor

jamigibbs commented May 18, 2023

A likely approach would be to add a prop for the following specific widths (2xs, xs, sm, md, lg, xl, 2xl):

https://designsystem.digital.gov/components/text-input/#component-variants-text-input

usa-input--[width]

Displays an input at a specific width. Accepts 2xs (4ex), xs (7ex), sm or small (10ex), md or medium (20ex), lg (30ex), xl (40ex), and 2xl (50ex).

@josephrlee
Copy link
Contributor

@jamigibbs, I know this is a closed issue, but can this width prop be added to the va-select component? It'd be helpful to have on the FSR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working dst-engineering Issues that require work from Design System Team engineers platform-design-system-team va-text-input DS text-input component
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants