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.
lpsinger · May 31, 2024 · c4e1554 · c4e1554
1 parent 8791d85
commit c4e1554
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 93 deletions.
diff --git a/app/components/CredentialCard.tsx b/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

diff --git a/app/components/ToolbarButtonGroup/index.module.scss b/app/components/ToolbarButtonGroup/index.module.scss
@@ -0,0 +1,3 @@
+.toolbar :global(.usa-button) {
+  text-wrap: nowrap;
+}
diff --git a/app/components/ToolbarButtonGroup/index.tsx b/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}
+    />
+  )
+}
diff --git a/app/components/tabs/index.module.scss b/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;

diff --git a/app/img/checkbox-indeterminate.svg b/app/img/checkbox-indeterminate.svg
diff --git a/app/routes/circulars.$circularId.($version)/route.tsx b/app/routes/circulars.$circularId.($version)/route.tsx
@@ -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>

diff --git a/app/routes/circulars._archive._index/DateSelectorMenu.tsx b/app/routes/circulars._archive._index/DateSelectorMenu.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}>

diff --git a/app/routes/circulars._archive._index/SortSelectorButton.tsx b/app/routes/circulars._archive._index/SortSelectorButton.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}>

diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.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 />

diff --git a/app/routes/circulars.edit.$circularId/RichEditor/index.tsx b/app/routes/circulars.edit.$circularId/RichEditor/index.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}
     />
   )

diff --git a/app/routes/circulars.moderation._index.tsx b/app/routes/circulars.moderation._index.tsx
@@ -8,7 +8,7 @@
 import type { SEOHandle } from '@nasa-gcn/remix-seo'
 import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node'
 import { Form, Link, useLoaderData } from '@remix-run/react'
-import { Button, ButtonGroup, Checkbox, Grid } from '@trussworks/react-uswds'
+import { Button, Checkbox, Grid } from '@trussworks/react-uswds'
 import { useState } from 'react'
 
 import { getUser } from './_auth/user.server'
@@ -22,6 +22,7 @@ import {
   moderatorGroup,
 } from './circulars/circulars.server'
 import SegmentedCards from '~/components/SegmentedCards'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 import type { BreadcrumbHandle } from '~/root/Title'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -74,14 +75,14 @@ export default function () {
     <>
       <h2>Pending Corrections</h2>
       <Form method="POST">
-        <ButtonGroup>
+        <ToolbarButtonGroup>
           <Link to="/circulars" className="usa-button usa-button--outline">
             Back
           </Link>
           <Button type="submit" secondary disabled={selectedCount === 0}>
             Delete Selected
           </Button>
-        </ButtonGroup>
+        </ToolbarButtonGroup>
         <SegmentedCards>
           {changeRequests.map((correction) => (
             <CircularChangeRequestRow

diff --git a/app/routes/user.email._index/EmailNotificationCard.tsx b/app/routes/user.email._index/EmailNotificationCard.tsx
@@ -2,7 +2,6 @@ import { Form, useFetcher } from '@remix-run/react'
 import type { ModalRef } from '@trussworks/react-uswds'
 import {
   Button,
-  ButtonGroup,
   Grid,
   Icon,
   Modal,
@@ -14,6 +13,7 @@ import { useEffect, useRef } from 'react'
 
 import type { EmailNotificationVM } from '../user.email/email_notices.server'
 import TimeAgo from '~/components/TimeAgo'
+import { ToolbarButtonGroup } from '~/components/ToolbarButtonGroup'
 
 export default function EmailNotificationCard({
   uuid,
@@ -60,7 +60,7 @@ export default function EmailNotificationCard({
             </div>
           </div>
           <div className="tablet:grid-col flex-auto">
-            <ButtonGroup>
+            <ToolbarButtonGroup>
               <testFetcher.Form method="POST">
                 <input type="hidden" name="recipient" value={recipient} />
                 <input type="hidden" name="intent" value="sendTest" />
@@ -95,7 +95,7 @@ export default function EmailNotificationCard({
                 />
                 Delete
               </ModalToggleButton>
-            </ButtonGroup>
+            </ToolbarButtonGroup>
           </div>
         </Grid>
         <Grid row className="width-full">

diff --git a/app/theme.scss b/app/theme.scss
@@ -283,31 +283,6 @@ input.react-tags__combobox-input:focus {
   font-weight: bold;
 }
 
-/*
- * Indeterminate checkboxes.
- * FIXME: remove if/when https://github.com/uswds/uswds/pull/5549 is merged
- */
-
-.usa-checkbox__input:indeterminate {
-  &:not(:disabled) {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: #0050d8;
-      box-shadow: 0 0 0 2px #0050d8;
-    }
-  }
-  &:disabled {
-    @include format-input {
-      @include add-background-svg('checkbox-indeterminate', '~/img');
-      background-size: 75%;
-      background-position: center;
-      background-color: rgba(27, 27, 27, 0.3);
-    }
-  }
-}
-
 /*
  * Hero formatting
  */