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 27, 2024 · 03939b5 · 03939b5
1 parent fa6aefd
commit 03939b5
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 86 deletions.
diff --git a/app/components/CredentialCard.tsx b/app/components/CredentialCard.tsx
@@ -9,6 +9,7 @@ import { Form, useFetcher } from '@remix-run/react'
 import type { ModalRef } from '@trussworks/react-uswds'
 import {
   Button,
+  ButtonGroup,
   Grid,
   Icon,
   Modal,
@@ -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
+          <ButtonGroup>
+            <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>
+          </ButtonGroup>
         </div>
       </Grid>
       <Modal

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
@@ -72,8 +72,11 @@ export default function () {
   }`
   return (
     <>
-      <ButtonGroup>
-        <Link to={`/circulars${searchString}`} className="usa-button">
+      <ButtonGroup className="flex-wrap">
+        <Link
+          to={`/circulars${searchString}`}
+          className="usa-button flex-align-stretch"
+        >
           <div className="position-relative">
             <Icon.ArrowBack
               role="presentation"
@@ -118,7 +121,7 @@ export default function () {
         </ButtonGroup>
         {useSubmitterStatus() && (
           <Link
-            className="usa-button usa-button--outline"
+            className="usa-button usa-button--outline text-no-wrap"
             to={`/circulars/correction/${circularId}`}
           >
             Request Correction

diff --git a/app/routes/circulars._archive._index/DateSelectorMenu.tsx b/app/routes/circulars._archive._index/DateSelectorMenu.tsx
@@ -42,11 +42,14 @@ 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}>
-      <Button type="button" className={`${slimClasses} padding-x-2`}>
+      <Button
+        type="button"
+        className={`${slimClasses} text-no-wrap padding-x-2`}
+      >
         {(startDate && dateSelectorLabels[startDate]) ||
           (startDate && endDate && (
             <>

diff --git a/app/routes/circulars._archive._index/SortSelectorButton.tsx b/app/routes/circulars._archive._index/SortSelectorButton.tsx
@@ -31,11 +31,14 @@ 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}>
-      <Button type="button" className={`${slimClasses} padding-x-2`}>
+      <Button
+        type="button"
+        className={`${slimClasses} text-no-wrap padding-x-2`}
+      >
         Sort by{' '}
         {sortOptions[sort as keyof typeof sortOptions] ||
           sortOptions.circularID}

diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
@@ -197,6 +197,7 @@ export default function () {
           </Label>
           <TextInput
             autoFocus
+            className="minw-15"
             id="query"
             name="query"
             type="search"
@@ -223,10 +224,7 @@ 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>

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/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
  */

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@remix-run/css-bundle": "^2.8.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@trussworks/react-uswds": "github:lpsinger/react-uswds#dateFormat",
+    "@trussworks/react-uswds": "github:lpsinger/react-uswds#gcn",
     "@xmldom/xmldom": "^0.8.10",
     "aws-lambda-ses-forwarder": "github:lpsinger/aws-lambda-ses-forwarder#aws-sdk-v3",
     "classnames": "^2.5.1",
@@ -130,7 +130,7 @@
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^15.2.2",
     "lowlight": "^3.0.0",
-    "nasawds": "^4.0.2-beta.1",
+    "nasawds": "^4.0.63",
     "npm-run-all": "^4.1.5",
     "oidc-provider": "^8.4.3",
     "postcss-csso": "^6.0.1",