deps: braid-design-system 32.24.0 (#1172)

* deps: braid-design-system 32.24.0 * wip * Clean up * Fix up one --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Zac Brydon <[email protected]> Co-authored-by: Aaron Moat <[email protected]>
seek-oss · Sep 23, 2024 · b06ac3d · b06ac3d
1 parent 2923d6a
commit b06ac3d
Show file tree

Hide file tree

Showing 31 changed files with 320 additions and 202 deletions.
diff --git a/.changeset/breezy-eagles-perform.md b/.changeset/breezy-eagles-perform.md
@@ -0,0 +1,5 @@
+---
+'wingman-fe': patch
+---
+
+Remove deprecated `dividers` in Braid components
diff --git a/.eslintignore b/.eslintignore
@@ -4,6 +4,7 @@
 .prettierrc
 coverage/
 dist/
+pnpm-lock.yaml
 report/
 tsconfig.json
 # end managed by sku
diff --git a/.prettierignore b/.prettierignore
@@ -4,8 +4,7 @@
 .prettierrc
 coverage/
 dist/
+pnpm-lock.yaml
 report/
 tsconfig.json
 # end managed by sku
-
-pnpm-lock.yaml
diff --git a/fe/example/src/App/Sidebar.tsx b/fe/example/src/App/Sidebar.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Divider,
   Heading,
   IconEducation,
   IconHome,
@@ -65,18 +66,18 @@ const SidebarLink = ({ children, size, to }: SidebarLinkProps) => {
 
 export const Sidebar = () => (
   <Box className={styles.sidebar}>
-    <Stack dividers space="none">
+    <Stack space="none">
       <Box padding="gutter">
         <Heading level="3">🛩</Heading>
       </Box>
-
-      <Stack dividers space="none">
+      <Divider />
+      <Stack space="none">
         <Box paddingY="gutter">
           <SidebarLink to="/">
             <IconHome /> Home
           </SidebarLink>
         </Box>
-
+        <Divider />
         {/* TODO: rebuild from shared components. */}
         {/* <Box paddingY="gutter">
           <SidebarLink to="/positions">

diff --git a/fe/example/src/components/RichDropdown.tsx b/fe/example/src/components/RichDropdown.tsx
@@ -1,4 +1,4 @@
-import { Box, IconChevron, Stack } from 'braid-design-system';
+import { Box, Divider, IconChevron, Stack } from 'braid-design-system';
 import React, { type ReactNode, useState } from 'react';
 
 import * as styles from './RichDropdown.css';
@@ -55,11 +55,14 @@ export const RichDropdown = <T extends BaseT>({
   };
 
   return expanded ? (
-    <Stack dividers space="none">
-      {values.map((value) => (
-        <Item key={value.id} onClick={() => select(value)} value={value}>
-          {children}
-        </Item>
+    <Stack space="none">
+      {values.map((value, index) => (
+        <React.Fragment key={value.id}>
+          {index > 0 ? <Divider /> : null}
+          <Item onClick={() => select(value)} value={value}>
+            {children}
+          </Item>
+        </React.Fragment>
       ))}
     </Stack>
   ) : (

diff --git a/fe/example/src/pages/Admin/Admin.tsx b/fe/example/src/pages/Admin/Admin.tsx
@@ -1,4 +1,10 @@
-import { Box, ContentBlock, Heading, Stack } from 'braid-design-system';
+import {
+  Box,
+  ContentBlock,
+  Divider,
+  Heading,
+  Stack,
+} from 'braid-design-system';
 import React from 'react';
 
 import { ClientOnly } from '../../components/ClientOnly';
@@ -10,11 +16,11 @@ import { Version } from './Version';
 import { Webhook } from './Webhook';
 
 export const AdminPage = () => (
-  <Stack dividers space="none">
+  <Stack space="none">
     <Header>
       <Heading level="3">Admin</Heading>
     </Header>
-
+    <Divider />
     <ClientOnly>
       <ContentBlock width="large">
         <Box padding="gutter">

diff --git a/fe/example/src/pages/Admin/Attachments.tsx b/fe/example/src/pages/Admin/Attachments.tsx
@@ -1,4 +1,4 @@
-import { Card, Heading, List, Stack, Text } from 'braid-design-system';
+import { Card, Divider, Heading, List, Stack, Text } from 'braid-design-system';
 import React from 'react';
 
 import { useBrowserToken } from '../../../../lib/hooks';
@@ -16,9 +16,9 @@ export const Attachments = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Attachments</Heading>
-
+        <Divider />
         <List>
           <Text>
             <DownloadLink

diff --git a/fe/example/src/pages/Admin/User.tsx b/fe/example/src/pages/Admin/User.tsx
@@ -1,4 +1,11 @@
-import { Card, Checkbox, Heading, Stack, TextField } from 'braid-design-system';
+import {
+  Card,
+  Checkbox,
+  Divider,
+  Heading,
+  Stack,
+  TextField,
+} from 'braid-design-system';
 import React, { useState } from 'react';
 
 import { useClient } from '../../hooks/user';
@@ -10,9 +17,9 @@ export const User = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">User</Heading>
-
+        <Divider />
         <Stack space="large">
           <Checkbox
             checked={editMode}

diff --git a/fe/example/src/pages/Admin/Version.tsx b/fe/example/src/pages/Admin/Version.tsx
@@ -1,4 +1,11 @@
-import { Card, Heading, Loader, Stack, Text } from 'braid-design-system';
+import {
+  Card,
+  Divider,
+  Heading,
+  Loader,
+  Stack,
+  Text,
+} from 'braid-design-system';
 import React, { useEffect, useState } from 'react';
 
 import { querySeekGraph } from '../../api/seekGraph';
@@ -22,9 +29,9 @@ export const Version = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Version</Heading>
-
+        <Divider />
         <Text>{typeof version === 'undefined' ? <Loader /> : version}</Text>
       </Stack>
     </Card>

diff --git a/fe/example/src/pages/Admin/Webhook.tsx b/fe/example/src/pages/Admin/Webhook.tsx
@@ -2,6 +2,7 @@ import {
   Actions,
   Button,
   Card,
+  Divider,
   Heading,
   Stack,
   useToast,
@@ -57,9 +58,9 @@ export const Webhook = () => {
 
   return (
     <Card>
-      <Stack dividers space="large">
+      <Stack space="large">
         <Heading level="3">Webhook</Heading>
-
+        <Divider />
         <Stack space="medium">
           <Actions>
             <Button loading={loading} onClick={onClick}>

diff --git a/fe/example/src/pages/Ads/List.tsx b/fe/example/src/pages/Ads/List.tsx
@@ -7,6 +7,7 @@ import {
   Card,
   Column,
   Columns,
+  Divider,
   Heading,
   IconAdd,
   IconEdit,
@@ -58,14 +59,14 @@ export const AdList = ({ ads }: Props) => {
             onClick={() => setSelectedAdId(ad.id)}
           >
             {editAds[index] ? (
-              <Stack dividers space="none">
+              <Stack space="none">
                 <Card>
                   <Heading level="4">Edit ad</Heading>
                 </Card>
-
+                <Divider />
                 {/* TODO: avoid sharing the same local storage state */}
                 <NewAdForm initial={ad} />
-
+                <Divider />
                 <Card>
                   {/* TODO: actually do something */}
                   <Actions>
@@ -144,14 +145,14 @@ export const AdList = ({ ads }: Props) => {
         ))}
 
         {newAd ? (
-          <Stack dividers space="none">
+          <Stack space="none">
             <Card>
               <Heading level="4">New ad</Heading>
             </Card>
-
+            <Divider />
             {/* TODO: avoid sharing the same local storage state */}
             <NewAdForm />
-
+            <Divider />
             <Card>
               {/* TODO: actually do something */}
               <Actions>

diff --git a/fe/example/src/pages/Candidates/Detail.tsx b/fe/example/src/pages/Candidates/Detail.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   ContentBlock,
+  Divider,
   Heading,
   IconDocument,
   IconNote,
@@ -158,7 +159,7 @@ const CandidateDetails = () => {
   ];
 
   return (
-    <Stack dividers space="none">
+    <Stack space="none">
       <Header>
         <Heading level="3">
           <Breadcrumbs>
@@ -172,7 +173,7 @@ const CandidateDetails = () => {
           </Breadcrumbs>
         </Heading>
       </Header>
-
+      <Divider />
       <Box background="surface" padding="gutter">
         <Stack space="gutter">
           {preferences.devTools ? (
@@ -185,7 +186,7 @@ const CandidateDetails = () => {
           </Text>
         </Stack>
       </Box>
-
+      <Divider />
       <TabsProvider id="candidate">
         <Box background="surface">
           <Tabs gutter="gutter" label="Candidate" reserveHitArea>

diff --git a/fe/example/src/pages/Candidates/Detail/Attachment.tsx b/fe/example/src/pages/Candidates/Detail/Attachment.tsx
@@ -3,6 +3,7 @@ import {
   Box,
   Button,
   Card,
+  Divider,
   Heading,
   IconDownload,
   IconImage,
@@ -23,7 +24,7 @@ export const CandidateAttachment = ({ children: attachment }: Props) => {
 
   return (
     <Card key={attachment.id}>
-      <Stack dividers space="gutter">
+      <Stack space="gutter">
         <Box alignItems="center" display="flex" justifyContent="spaceBetween">
           <Heading level="4">{attachment.filename}</Heading>
           <Actions>
@@ -32,7 +33,7 @@ export const CandidateAttachment = ({ children: attachment }: Props) => {
             </Button>
           </Actions>
         </Box>
-
+        <Divider />
         <Box
           alignItems="center"
           background="neutralLight"

diff --git a/fe/example/src/pages/Candidates/Detail/Notes.tsx b/fe/example/src/pages/Candidates/Detail/Notes.tsx
@@ -2,6 +2,7 @@ import {
   Actions,
   Button,
   Card,
+  Divider,
   IconAdd,
   Inline,
   Stack,
@@ -41,17 +42,20 @@ export const CandidateNotes = ({ children: candidate }: Props) => {
 
       {candidate.notes.length ? (
         <Card>
-          <Stack dividers space="large">
+          <Stack space="large">
             {candidate.notes.map((note, index) => (
-              <Stack key={index} space="gutter">
-                <Inline space="small">
-                  <Text>
-                    <Strong>{note.author.formattedName}</Strong> ·{' '}
-                    <RelativeDate date={note.date} />
-                  </Text>
-                </Inline>
-                <Text>{note.text}</Text>
-              </Stack>
+              <React.Fragment key={index}>
+                {index > 0 ? <Divider /> : null}
+                <Stack space="gutter">
+                  <Inline space="small">
+                    <Text>
+                      <Strong>{note.author.formattedName}</Strong> ·{' '}
+                      <RelativeDate date={note.date} />
+                    </Text>
+                  </Inline>
+                  <Text>{note.text}</Text>
+                </Stack>
+              </React.Fragment>
             ))}
           </Stack>
         </Card>