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

USWDS - Bug: buttons in a button group in a form display issue #5883

Open
2 tasks done
ajanickiv opened this issue Apr 24, 2024 · 0 comments
Open
2 tasks done

USWDS - Bug: buttons in a button group in a form display issue #5883

ajanickiv opened this issue Apr 24, 2024 · 0 comments
Labels
Needs: Confirmation We need to confirm that this is an issue Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code

Comments

@ajanickiv
Copy link

Describe the bug

When a button is inside a button group that inside a form, the button height becomes too tall.

Steps to reproduce the bug

  1. Create a form element with the usa-form class
  2. Add a button group as a child of the form element with the usa-button-group and usa-button-group__item classes
  3. View buttons

Expected Behavior

Buttons are the correct height for their content as in previous versions (less than 3.8.0)

Related code

<form class="usa-form">
    Form Content
    
    <ul class="usa-button-group">
       <li class="usa-button-group__item">
           <button
               type="button"
               class="usa-button usa-button--outline">
               Back
           </button>
       </li>
       <li class="usa-button-group__item">
           <button
               type="submit"
               class="usa-button">
               Continue
           </button>
       </li>
    </ul>
</form>

Screenshots

Issue

image

Expected

image

System setup

  • USWDS version: 3.8.0

Additional context

No response

Code of Conduct

@ajanickiv ajanickiv added Needs: Confirmation We need to confirm that this is an issue Type: Bug A problem in the code labels Apr 24, 2024
@github-actions github-actions bot added the Status: Triage We're triaging this issue and grooming if necessary label Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs: Confirmation We need to confirm that this is an issue Status: Triage We're triaging this issue and grooming if necessary Type: Bug A problem in the code
Projects
None yet
Development

No branches or pull requests

1 participant