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

USWDS - Bug: Buttons in nested button groups have mismatched heights #5825

Open
2 tasks done
lpsinger opened this issue Mar 19, 2024 · 4 comments · May be fixed by #5885
Open
2 tasks done

USWDS - Bug: Buttons in nested button groups have mismatched heights #5825

lpsinger opened this issue Mar 19, 2024 · 4 comments · May be fixed by #5885
Assignees
@amyleadem
Labels
Package: Button Group Role: Dev Development/engineering skills needed Type: Bug A problem in the code
Milestone
uswds 3.8.1

Comments

@lpsinger
Copy link
Contributor

Describe the bug

Buttons in nested button groups have mismatched heights. We use button groups that contain buttons and segmented button groups in our USWDS site, https://gcn.nasa.gov.

This bug was introduced in USWDS 3.8.0.

Steps to reproduce the bug

Save the HTML in the "Related code" section to a file and open it in your browser.

Expected Behavior

Buttons should have equal heights, as in the USWDS 3.7.1 screen shot below.

Related code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script
      src="https://cdn.jsdelivr.net/npm/@uswds/[email protected]/dist/js/uswds.min.js"
      integrity="sha256-9nBQm/0+Y4ff0QkGywBPFB7Yp8BA6hcCw7YJBgqI9rM="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@uswds/[email protected]/dist/css/uswds.min.css"
      integrity="sha256-JPPhCvsnyRXrsY+Sms9v8JredBM6Zdweq8bcHEBp09U="
      crossorigin="anonymous"
    />
    <!-- <script
      src="https://cdn.jsdelivr.net/npm/@uswds/[email protected]/dist/js/uswds.min.js"
      integrity="sha256-t/niBrhFzTw5Q8BtSqImb5X3WE451khfo2zPd9DYXpU="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@uswds/[email protected]/dist/css/uswds.min.css"
      integrity="sha256-iszgb7UBBBxmQSLukBUB9DnzjuPCkW6je7g5/5JwBFk="
      crossorigin="anonymous"
    /> -->
  </head>
  <body>
    <ul class="usa-button-group">
      <li class="usa-button-group__item">
        <button class="usa-button" type="button">Foo</button>
      </li>
      <li class="usa-button-group__item">
        <ul class="usa-button-group usa-button-group--segmented">
          <li class="usa-button-group__item">
            <button class="usa-button" type="button">Bar</button>
          </li>
          <li class="usa-button-group__item">
            <button class="usa-button" type="button">Bat</button>
          </li>
        </ul>
      </li>
      <li class="usa-button-group__item">
        <button class="usa-button" type="button">Baz</button>
      </li>
    </ul>
  </body>
</html>

Screenshots

USWDS 3.7.1

Screenshot 2024-03-19 at 08 04 20

USWDS 3.8.0

Screenshot 2024-03-19 at 08 04 36

System setup

  • USWDS version: 3.8.0
  • Device: MacBook Pro
  • Operating system: macOS Sonoma 14.3.1
  • Browser: Safari Version 17.3.1 (19617.2.4.11.12)

Additional context

No response

Code of Conduct
@lpsinger lpsinger added Needs: Confirmation We need to confirm that this is an issue Type: Bug A problem in the code labels Mar 19, 2024
@github-actions github-actions bot added the Status: Triage We're triaging this issue and grooming if necessary label Mar 19, 2024
@lpsinger lpsinger changed the title USWDS - Bug: [YOUR TITLE] USWDS - Bug: Buttons in nested button groups have mismatched heights Mar 19, 2024
@lpsinger lpsinger mentioned this issue Mar 19, 2024
Merged
@amyleadem amyleadem added this to the uswds 3.9.0 milestone Apr 2, 2024
@amyleadem amyleadem modified the milestones: uswds 3.9.0, uswds 3.8.1 Apr 9, 2024
@amyleadem amyleadem added the Needs: Discussion We need to discuss an approach to this issue label Apr 9, 2024
@amyleadem
Copy link
Contributor

amyleadem commented Apr 10, 2024 •
edited

Thanks for submitting this issue, @lpsinger.

Confirming that the presentation of nested button groups did change with the introduction of 3.8.0. This change occurs in Chrome, Firefox, and Safari. I am marking this as "Needs:discussion" because we need to discuss the use case of nested button groups before we can classify the issue as a bug and move it to scheduling.

This screenshot captures a nested button group using the button group code from the component code accordion:

Image

<ul class="usa-button-group">
  <li class="usa-button-group__item">
    <a href="#" class="usa-button usa-button--outline">Back</a>
  </li>
  <li class="usa-button-group__item">
    <ul class="usa-button-group">
      <li class="usa-button-group__item">
        <a href="#" class="usa-button usa-button--outline">Back</a>
      </li>
      <li class="usa-button-group__item">
         <button type="button" class="usa-button">Continue</button>
      </li>
    </ul>  
  </li>
</ul>

@amyleadem amyleadem removed the Needs: Confirmation We need to confirm that this is an issue label Apr 10, 2024
@lpsinger
Copy link
Contributor Author

I am marking this as "Needs:discussion" because we need to discuss the use case of nested button groups before we can classify the issue as a bug and move it to scheduling.

We use nested button groups (generally a non-segmented group containing several segmented groups) in our site (https://gcn.nasa.gov/).

@amyleadem
Copy link
Contributor

@lpsinger Forgive me if I missed it on the page you sent, but curious if you can send a link to a page on your site that shows a nested button group. Seeing the pattern in action will help inform our discussion. Thanks!

@lpsinger
Copy link
Contributor Author

@lpsinger Forgive me if I missed it on the page you sent, but curious if you can send a link to a page on your site that shows a nested button group. Seeing the pattern in action will help inform our discussion. Thanks!

https://gcn.nasa.gov/circulars/36059

@amyleadem amyleadem added Added during Sprint and removed Status: Triage We're triaging this issue and grooming if necessary labels Apr 24, 2024
@amyleadem amyleadem linked a pull request Apr 24, 2024 that will close this issue
Open
@amyleadem amyleadem added Package: Button Group Role: Dev Development/engineering skills needed and removed Added during Sprint Needs: Discussion We need to discuss an approach to this issue labels Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@amyleadem amyleadem

Labels
Package: Button Group Role: Dev Development/engineering skills needed Type: Bug A problem in the code
Projects
USWDS Core Project Data
Status: Review
Milestone
uswds 3.8.1
Development

Successfully merging a pull request may close this issue.

USWDS - Button group: Fix margins on nested button groups uswds/uswds
4 participants
@lpsinger @mejiaj @mahoneycm @amyleadem