Return to stable uswds and nasawds releases

- uswds/uswds#5825 has been fixed.
- https://github.com/lpsinger/react-uswds/tree/gcn is the same as
  trussworks/react-uswds#2726, but rebased.
- I had to update some CSS where we have heavily customized the
  appearance of some USWDS components.

Author: lpsinger

app/components/CredentialCard.tsx

@@ -19,6 +19,7 @@ import {
 import { useRef } from 'react'
 
 import TimeAgo from './TimeAgo'
+import { ToolbarButtonGroup } from './ToolbarButtonGroup'
 import type { RedactedClientCredential } from '~/routes/user.credentials/client_credentials.server'
 
 export default function CredentialCard({
@@ -54,33 +55,35 @@ export default function CredentialCard({
           </div>
         </div>
         <div className="tablet:grid-col flex-auto margin-y-auto">
-          <ModalToggleButton
-            opener
-            disabled={disabled}
-            modalRef={ref}
-            type="button"
-            className="usa-button--secondary"
-          >
-            <Icon.Delete
-              role="presentation"
-              className="bottom-aligned margin-right-05"
-            />
-            Delete
-          </ModalToggleButton>
-          <Form
-            method="GET"
-            action="/quickstart/alerts"
-            className="display-inline"
-          >
-            <input type="hidden" name="clientId" value={client_id} />
-            <Button disabled={disabled} type="submit">
-              Select
-              <Icon.ArrowForward
+          <ToolbarButtonGroup>
+            <ModalToggleButton
+              opener
+              disabled={disabled}
+              modalRef={ref}
+              type="button"
+              className="usa-button--secondary"
+            >
+              <Icon.Delete
                 role="presentation"
-                className="bottom-aligned margin-left-05"
+                className="bottom-aligned margin-right-05"
               />
-            </Button>
-          </Form>
+              Delete
+            </ModalToggleButton>
+            <Form
+              method="GET"
+              action="/quickstart/alerts"
+              className="display-inline"
+            >
+              <input type="hidden" name="clientId" value={client_id} />
+              <Button disabled={disabled} type="submit">
+                Select
+                <Icon.ArrowForward
+                  role="presentation"
+                  className="bottom-aligned margin-left-05"
+                />
+              </Button>
+            </Form>
+          </ToolbarButtonGroup>
         </div>
       </Grid>
       <Modal

app/components/ToolbarButtonGroup/index.module.scss

@@ -0,0 +1,3 @@
+.toolbar :global(.usa-button) {
+  text-wrap: nowrap;
+}

app/components/ToolbarButtonGroup/index.tsx

@@ -0,0 +1,28 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ButtonGroup } from '@trussworks/react-uswds'
+import classNames from 'classnames'
+
+import styles from './index.module.css'
+
+/**
+ * A segmented button group with some styling appropriate for toolbars.
+ *
+ * - Do not wrap the text within buttons.
+ */
+export function ToolbarButtonGroup({
+  className,
+  ...props
+}: Omit<Parameters<typeof ButtonGroup>[0], 'type'>) {
+  return (
+    <ButtonGroup
+      className={classNames(className, 'flex-auto', styles.toolbar)}
+      {...props}
+    />
+  )
+}

app/components/tabs/index.module.scss

@@ -7,6 +7,11 @@
  */
 
 .tabs {
+  &,
+  & :global(.usa-button-group.usa-button-group--segmented) {
+    align-items: end;
+  }
+
   :global(.usa-button-group__item) {
     :global(.usa-button) {
       box-shadow: 0px 0px 0px 0px;

app/img/checkbox-indeterminate.svg

@@ -18,6 +18,7 @@ import { MarkdownBody, PlainTextBody } from './Body'
 import { FrontMatter } from './FrontMatter'
 import DetailsDropdownButton from '~/components/DetailsDropdownButton'
 import DetailsDropdownContent from '~/components/DetailsDropdownContent'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import { origin } from '~/lib/env.server'
 import { getCanonicalUrlHeaders, pickHeaders } from '~/lib/headers.server'
 import { useSearchString } from '~/lib/utils'
@@ -72,8 +73,11 @@ export default function () {
   }`
   return (
     <>
-      <ButtonGroup>
-        <Link to={`/circulars${searchString}`} className="usa-button">
+      <ToolbarButtonGroup className="flex-wrap">
+        <Link
+          to={`/circulars${searchString}`}
+          className="usa-button flex-align-stretch"
+        >
           <div className="position-relative">
             <Icon.ArrowBack
               role="presentation"
@@ -135,7 +139,7 @@ export default function () {
             Edit
           </Link>
         )}
-      </ButtonGroup>
+      </ToolbarButtonGroup>
       <h1 className="margin-bottom-0">GCN Circular {circularId}</h1>
       <FrontMatter {...frontMatter} />
       <Body className="margin-y-2">{body}</Body>

app/routes/circulars.$circularId.($version)/route.tsx

@@ -42,7 +42,7 @@ function DateSelectorButton({
   endDate?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>

app/routes/circulars._archive._index/DateSelectorMenu.tsx

@@ -31,7 +31,7 @@ function SortButton({
   sort?: string
   expanded?: boolean
 } & Omit<Parameters<typeof ButtonGroup>[0], 'segmented' | 'children'>) {
-  const slimClasses = 'height-4 padding-y-0'
+  const slimClasses = 'padding-y-1'
 
   return (
     <ButtonGroup type="segmented" {...props}>

app/routes/circulars._archive._index/SortSelectorButton.tsx

@@ -17,7 +17,6 @@ import {
 import {
   Alert,
   Button,
-  ButtonGroup,
   Icon,
   Label,
   Select,
@@ -46,6 +45,7 @@ import CircularsIndex from './CircularsIndex'
 import { DateSelector } from './DateSelectorMenu'
 import { SortSelector } from './SortSelectorButton'
 import Hint from '~/components/Hint'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import { origin } from '~/lib/env.server'
 import { getFormDataString } from '~/lib/utils'
 import { postZendeskRequest } from '~/lib/zendesk.server'
@@ -185,7 +185,7 @@ export default function () {
           {requestedChangeCount > 1 ? 's' : ''}
         </Link>
       )}
-      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-300">
+      <ToolbarButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-300">
         <Form
           preventScrollReset
           className="display-inline-block usa-search usa-search--small"
@@ -197,6 +197,7 @@ export default function () {
           </Label>
           <TextInput
             autoFocus
+            className="minw-15"
             id="query"
             name="query"
             type="search"
@@ -223,14 +224,11 @@ export default function () {
         />
         {query && <SortSelector form={formId} defaultValue={sort} />}
         <Link to={`/circulars/new${searchString}`}>
-          <Button
-            type="button"
-            className="height-4 padding-top-0 padding-bottom-0"
-          >
+          <Button type="button" className="padding-y-1">
             <Icon.Edit role="presentation" /> New
           </Button>
         </Link>
-      </ButtonGroup>
+      </ToolbarButtonGroup>
       <Hint id="searchHint">
         Search for Circulars by submitter, subject, or body text (e.g. 'Fermi
         GRB'). <br />

app/routes/circulars._archive._index/route.tsx

@@ -44,7 +44,7 @@ import iconTable from '@gitlab/svgs/dist/sprite_icons/table.svg'
 function SlimButton({ className, ...props }: Parameters<typeof Button>[0]) {
   return (
     <Button
-      className={classNames(className, 'height-4 padding-y-0 padding-x-105')}
+      className={classNames(className, 'height-4 padding-y-1 padding-x-105')}
       {...props}
     />
   )