From bd478996207ff59e4dd43c06da9711e14ecd09b4 Mon Sep 17 00:00:00 2001
From: Jin Lee <86632227+jinlee93@users.noreply.github.com>
Date: Wed, 12 Jul 2023 17:10:13 -0700
Subject: [PATCH] refactor(toolbar)!: remove component (#1683)

* refactor(toolbar)!: remove component

* refactor(toolbar)!: remove the subcomponents too

* fix: remove some padding
---
 .../CoursePlannerEdit/CoursePlannerEdit.tsx   |  34 ++--
 .../FeedbackOverview.module.css               |   4 -
 .../FeedbackOverview/FeedbackOverview.tsx     |  40 ++--
 src/components/DragDrop/DragDrop.stories.tsx  |  81 ++++----
 .../__snapshots__/DragDrop.test.ts.snap       |  72 +++-----
 src/components/Toolbar/Toolbar.module.css     |  62 -------
 src/components/Toolbar/Toolbar.stories.tsx    |  63 -------
 src/components/Toolbar/Toolbar.test.ts        |   6 -
 src/components/Toolbar/Toolbar.tsx            |  55 ------
 .../__snapshots__/Toolbar.test.ts.snap        | 173 ------------------
 src/components/Toolbar/index.ts               |   1 -
 src/components/ToolbarItem/ToolbarItem.tsx    |  45 -----
 src/components/ToolbarItem/index.ts           |   1 -
 src/index.ts                                  |   2 -
 14 files changed, 92 insertions(+), 547 deletions(-)
 delete mode 100755 src/components/Toolbar/Toolbar.module.css
 delete mode 100644 src/components/Toolbar/Toolbar.stories.tsx
 delete mode 100644 src/components/Toolbar/Toolbar.test.ts
 delete mode 100644 src/components/Toolbar/Toolbar.tsx
 delete mode 100644 src/components/Toolbar/__snapshots__/Toolbar.test.ts.snap
 delete mode 100644 src/components/Toolbar/index.ts
 delete mode 100644 src/components/ToolbarItem/ToolbarItem.tsx
 delete mode 100644 src/components/ToolbarItem/index.ts

diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
index 7a8041c93..784bfd81b 100644
--- a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
+++ b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -32,8 +32,6 @@ import {
   TableHeaderCell,
   TableRow,
   Text,
-  Toolbar,
-  ToolbarItem,
 } from '../../../src';
 
 import type { NewState } from '../../../src/components/DragDrop/DragDrop';
@@ -431,19 +429,17 @@ export const CoursePlannerEdit = () => {
       emptyContent: container1EmptyContent(),
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <ToolbarItem>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Available projects
-              </Heading>
-            </ToolbarItem>
-            <ToolbarItem align="right">
+          <div className="mb-4 flex items-center gap-4">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Available projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </ToolbarItem>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
@@ -452,19 +448,17 @@ export const CoursePlannerEdit = () => {
       emptyContent: container2EmptyContent(),
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <ToolbarItem>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Planned projects
-              </Heading>
-            </ToolbarItem>
-            <ToolbarItem align="right">
+          <div className="mb-4 flex items-center gap-4">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Planned projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </ToolbarItem>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
diff --git a/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css b/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css
index 9d7ce57f7..133f69f59 100644
--- a/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css
+++ b/.storybook/pages/FeedbackOverview/FeedbackOverview.module.css
@@ -1,9 +1,5 @@
 @import '../../../src/design-tokens/mixins.css';
 
-.feedback-overview__toolbar {
-  padding-bottom: var(--eds-size-2);
-}
-
 .feedback-overview__card-header {
   margin-bottom: var(--eds-size-1);
   font: var(--eds-theme-typography-title-md);
diff --git a/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx b/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx
index 8c42567a3..046e8a223 100644
--- a/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx
+++ b/.storybook/pages/FeedbackOverview/FeedbackOverview.tsx
@@ -14,8 +14,6 @@ import {
   Table,
   Text,
   TimelineNav,
-  Toolbar,
-  ToolbarItem,
 } from '../../../src';
 
 import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
@@ -208,16 +206,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
           <Tab title="Feedback">
             <TimelineNav activeIndex={activeIndex}>
               <TimelineNav.Panel title="Overview">
-                <Toolbar
-                  className={styles['feedback-overview__toolbar']}
-                  variant="bare"
-                >
-                  <ToolbarItem>
-                    <Heading as="h2" size="headline-md">
-                      Feedback Overview
-                    </Heading>
-                  </ToolbarItem>
-                  <ToolbarItem align="right">
+                <div className="flex items-center gap-4 pb-4">
+                  <Heading as="h2" size="headline-md">
+                    Feedback Overview
+                  </Heading>
+                  <div className="ml-auto">
                     <Button size="md" status="brand" variant="secondary">
                       <Icon
                         name="filter-list"
@@ -226,8 +219,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
                       />
                       Filters
                     </Button>
-                  </ToolbarItem>
-                </Toolbar>
+                  </div>
+                </div>
                 {isTable && (
                   <Table>
                     <Table.Header>
@@ -405,16 +398,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
                 }
                 variant="number"
               >
-                <Toolbar
-                  className={styles['feedback-overview__toolbar']}
-                  variant="bare"
-                >
-                  <ToolbarItem>
-                    <Heading as="h2" size="h3">
-                      Checkpoint Progress
-                    </Heading>
-                  </ToolbarItem>
-                  <ToolbarItem align="right">
+                <div className="flex items-center gap-4 pb-4">
+                  <Heading as="h2" size="h3">
+                    Checkpoint Progress
+                  </Heading>
+                  <div className="ml-auto">
                     <Button size="md" status="brand" variant="secondary">
                       <Icon
                         name="filter-list"
@@ -423,8 +411,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
                       />
                       Filters
                     </Button>
-                  </ToolbarItem>
-                </Toolbar>
+                  </div>
+                </div>
                 {isTable && (
                   <Table>
                     <Table.Header>
diff --git a/src/components/DragDrop/DragDrop.stories.tsx b/src/components/DragDrop/DragDrop.stories.tsx
index f40d1e2d9..666036a94 100644
--- a/src/components/DragDrop/DragDrop.stories.tsx
+++ b/src/components/DragDrop/DragDrop.stories.tsx
@@ -10,7 +10,6 @@ import {
   Heading,
   Icon,
   Text,
-  Toolbar,
 } from '../..';
 import styles from './DragDrop.stories.module.css';
 
@@ -91,11 +90,11 @@ export const Default: StoryObj<Args> = {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
           <DragDropContainerHeader>
-            <Toolbar>
+            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
-            </Toolbar>
+            </div>
           </DragDropContainerHeader>
         ),
       },
@@ -298,11 +297,11 @@ export const Default: StoryObj<Args> = {
         ),
         header: (
           <DragDropContainerHeader>
-            <Toolbar>
+            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
-            </Toolbar>
+            </div>
           </DragDropContainerHeader>
         ),
       },
@@ -365,11 +364,11 @@ export const HoveredHandle: StoryObj<Args> = {
         itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
         header: (
           <DragDropContainerHeader>
-            <Toolbar>
+            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Available Projects
               </Heading>
-            </Toolbar>
+            </div>
           </DragDropContainerHeader>
         ),
       },
@@ -492,11 +491,11 @@ export const HoveredHandle: StoryObj<Args> = {
         ),
         header: (
           <DragDropContainerHeader>
-            <Toolbar>
+            <div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
               <Heading as="h5" size="h5">
                 Selected Projects
               </Heading>
-            </Toolbar>
+            </div>
           </DragDropContainerHeader>
         ),
       },
@@ -520,19 +519,17 @@ const InteractiveDragDrop = () => {
       itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <Toolbar.Item>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Available projects
-              </Heading>
-            </Toolbar.Item>
-            <Toolbar.Item align="right">
+          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Available projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </Toolbar.Item>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
@@ -543,19 +540,17 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <Toolbar.Item>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Planned projects
-              </Heading>
-            </Toolbar.Item>
-            <Toolbar.Item align="right">
+          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Planned projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </Toolbar.Item>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
@@ -566,19 +561,17 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <Toolbar.Item>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Planned projects
-              </Heading>
-            </Toolbar.Item>
-            <Toolbar.Item align="right">
+          <div className="bg-neutral-subtle mb-4 flex items-center gap-4">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Planned projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </Toolbar.Item>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
@@ -589,19 +582,17 @@ const InteractiveDragDrop = () => {
       itemIds: [],
       header: (
         <DragDropContainerHeader>
-          <Toolbar className="!mb-4" variant="bare">
-            <Toolbar.Item>
-              <Heading as="h2" size="title-sm" variant="neutral-strong">
-                Planned projects
-              </Heading>
-            </Toolbar.Item>
-            <Toolbar.Item align="right">
+          <div className="bg-neutral-subtle mb-4 flex items-center gap-4 p-0">
+            <Heading as="h2" size="title-sm" variant="neutral-strong">
+              Planned projects
+            </Heading>
+            <div className="ml-auto">
               <Button variant="icon">
                 <Icon name="add" purpose="decorative" />
                 Add project
               </Button>
-            </Toolbar.Item>
-          </Toolbar>
+            </div>
+          </div>
         </DragDropContainerHeader>
       ),
     },
diff --git a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
index 14b236126..7f8fb1d7e 100644
--- a/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
+++ b/src/components/DragDrop/__snapshots__/DragDrop.test.ts.snap
@@ -17,7 +17,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar"
+            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -243,7 +243,7 @@ exports[`<DragDrop /> Default story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar"
+            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -474,7 +474,7 @@ exports[`<DragDrop /> HoveredHandle story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar"
+            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -700,7 +700,7 @@ exports[`<DragDrop /> HoveredHandle story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar"
+            class="bg-neutral-subtle flex items-center gap-4 px-4 py-2"
           >
             <h5
               class="heading heading--size-h5"
@@ -871,19 +871,15 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar toolbar--bare !mb-4"
+            class="bg-neutral-subtle mb-4 flex items-center gap-4"
           >
-            <div
-              class="toolbar__item"
+            <h2
+              class="heading heading--size-title-sm heading--neutral-strong"
             >
-              <h2
-                class="heading heading--size-title-sm heading--neutral-strong"
-              >
-                Available projects
-              </h2>
-            </div>
+              Available projects
+            </h2>
             <div
-              class="toolbar__item toolbar__item--align-right"
+              class="ml-auto"
             >
               <button
                 class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
@@ -1123,19 +1119,15 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar toolbar--bare !mb-4"
+            class="bg-neutral-subtle mb-4 flex items-center gap-4"
           >
-            <div
-              class="toolbar__item"
+            <h2
+              class="heading heading--size-title-sm heading--neutral-strong"
             >
-              <h2
-                class="heading heading--size-title-sm heading--neutral-strong"
-              >
-                Planned projects
-              </h2>
-            </div>
+              Planned projects
+            </h2>
             <div
-              class="toolbar__item toolbar__item--align-right"
+              class="ml-auto"
             >
               <button
                 class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
@@ -1174,19 +1166,15 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar toolbar--bare !mb-4"
+            class="bg-neutral-subtle mb-4 flex items-center gap-4"
           >
-            <div
-              class="toolbar__item"
+            <h2
+              class="heading heading--size-title-sm heading--neutral-strong"
             >
-              <h2
-                class="heading heading--size-title-sm heading--neutral-strong"
-              >
-                Planned projects
-              </h2>
-            </div>
+              Planned projects
+            </h2>
             <div
-              class="toolbar__item toolbar__item--align-right"
+              class="ml-auto"
             >
               <button
                 class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
@@ -1225,19 +1213,15 @@ exports[`<DragDrop /> Interactive story renders snapshot 1`] = `
       >
         <header>
           <div
-            class="toolbar toolbar--bare !mb-4"
+            class="bg-neutral-subtle mb-4 flex items-center gap-4 p-0"
           >
-            <div
-              class="toolbar__item"
+            <h2
+              class="heading heading--size-title-sm heading--neutral-strong"
             >
-              <h2
-                class="heading heading--size-title-sm heading--neutral-strong"
-              >
-                Planned projects
-              </h2>
-            </div>
+              Planned projects
+            </h2>
             <div
-              class="toolbar__item toolbar__item--align-right"
+              class="ml-auto"
             >
               <button
                 class="clickable-style clickable-style--lg clickable-style--icon clickable-style--brand button button--icon"
diff --git a/src/components/Toolbar/Toolbar.module.css b/src/components/Toolbar/Toolbar.module.css
deleted file mode 100755
index db4bb7a6c..000000000
--- a/src/components/Toolbar/Toolbar.module.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/*------------------------------------*\
-    # TOOLBAR
-\*------------------------------------*/
-
-/**
- * A toolbar is a container that houses form controls for uses things like filtering a data table.
- */
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--eds-size-2);
-  padding-top: var(--eds-size-1);
-  padding-right: var(--eds-size-2);
-  padding-bottom: var(--eds-size-1);
-  padding-left: var(--eds-size-2);
-  background-color: var(--eds-theme-color-background-neutral-subtle);
-}
-
-/**
- * Stripped-down toolbar without background color or padding 
- */
-.toolbar--bare {
-  background-color: transparent;
-  padding: 0;
-}
-
-/**
- * Veritcally aligns toolbar items to the top of the toolbar.
- */
-.toolbar--vertical-align-top {
-  align-items: flex-start;
-}
-
-/**
- * Veritcally aligns toolbar items to the bottom of the toolbar.
- */
-.toolbar--vertical-align-bottom {
-  align-items: flex-end;
-}
-
-/**
- * Center-aligned toolbar item
- */
-.toolbar__item--align-center {
-  /**
-   * Since the toolbar is set to display: flex, using margin: auto will
-   * push item away from other items.
-   */
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/**
- * Right-aligned toolbar item
- */
-.toolbar__item--align-right {
-  /**
-   * Since the toolbar is set to display: flex, using margin: auto will
-   * push item away from other items.
-   */
-  margin-left: auto;
-}
diff --git a/src/components/Toolbar/Toolbar.stories.tsx b/src/components/Toolbar/Toolbar.stories.tsx
deleted file mode 100644
index fd859e6f5..000000000
--- a/src/components/Toolbar/Toolbar.stories.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import React from 'react';
-
-import { Toolbar } from './Toolbar';
-import ToolbarItem from '../ToolbarItem';
-
-export default {
-  title: 'Components/Toolbar',
-  component: Toolbar,
-  subcomponents: { ToolbarItem },
-  parameters: {
-    badges: ['1.0'],
-    axe: {
-      skip: true,
-    },
-  },
-  args: {
-    children: (
-      <>
-        <Toolbar.Item>
-          <div className="fpo !m-0">Left</div>
-        </Toolbar.Item>
-        <Toolbar.Item>
-          <div className="fpo !m-0">Left</div>
-        </Toolbar.Item>
-        <Toolbar.Item>
-          <div className="fpo !m-0">Left</div>
-        </Toolbar.Item>
-        <Toolbar.Item align="right">
-          <div className="fpo !m-0">Right</div>
-        </Toolbar.Item>
-      </>
-    ),
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: null,
-      },
-    },
-  },
-} as Meta<Args>;
-
-type Args = React.ComponentProps<typeof Toolbar>;
-
-export const Default: StoryObj<Args> = {};
-export const Bare: StoryObj<Args> = {
-  args: {
-    variant: 'bare',
-  },
-};
-
-export const AlignTop: StoryObj<Args> = {
-  args: {
-    verticalAlign: 'top',
-  },
-};
-
-export const AlignBottom: StoryObj<Args> = {
-  args: {
-    verticalAlign: 'bottom',
-  },
-};
diff --git a/src/components/Toolbar/Toolbar.test.ts b/src/components/Toolbar/Toolbar.test.ts
deleted file mode 100644
index 8f1840ddc..000000000
--- a/src/components/Toolbar/Toolbar.test.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './Toolbar.stories';
-
-describe('<Toolbar />', () => {
-  generateSnapshots(stories);
-});
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
deleted file mode 100644
index a426c40c9..000000000
--- a/src/components/Toolbar/Toolbar.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import ToolbarItem from '../ToolbarItem';
-import styles from './Toolbar.module.css';
-
-export interface Props {
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children?: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-  /**
-   * Vertical align
-   * - **bottom** vertically aligns toolbar items to the bottom of toolbar
-   * - **top** vertically aligns toolbar items to the top of toolbar
-   */
-  variant?: 'bare';
-  /**
-   * Vertical align:
-   * - **bottom** vertically aligns t
-   */
-  verticalAlign?: 'bottom' | 'top';
-}
-
-/**
- * `import {Toolbar} from "@chanzuckerberg/eds";`
- *
- * A container that houses form controls for filtering a data table based on the conditional props passed through.
- */
-export const Toolbar = ({
-  className,
-  children,
-  variant,
-  verticalAlign,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    styles['toolbar'],
-    variant === 'bare' && styles['toolbar--bare'],
-    verticalAlign === 'bottom' && styles['toolbar--vertical-align-bottom'],
-    verticalAlign === 'top' && styles['toolbar--vertical-align-top'],
-    className,
-  );
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
-
-Toolbar.Item = ToolbarItem;
diff --git a/src/components/Toolbar/__snapshots__/Toolbar.test.ts.snap b/src/components/Toolbar/__snapshots__/Toolbar.test.ts.snap
deleted file mode 100644
index deff1c4eb..000000000
--- a/src/components/Toolbar/__snapshots__/Toolbar.test.ts.snap
+++ /dev/null
@@ -1,173 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Toolbar /> AlignBottom story renders snapshot 1`] = `
-<div
-  class="toolbar toolbar--vertical-align-bottom"
->
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item toolbar__item--align-right"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Right
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Toolbar /> AlignTop story renders snapshot 1`] = `
-<div
-  class="toolbar toolbar--vertical-align-top"
->
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item toolbar__item--align-right"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Right
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Toolbar /> Bare story renders snapshot 1`] = `
-<div
-  class="toolbar toolbar--bare"
->
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item toolbar__item--align-right"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Right
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Toolbar /> Default story renders snapshot 1`] = `
-<div
-  class="toolbar"
->
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Left
-    </div>
-  </div>
-  <div
-    class="toolbar__item toolbar__item--align-right"
-  >
-    <div
-      class="fpo !m-0"
-    >
-      Right
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Toolbar/index.ts b/src/components/Toolbar/index.ts
deleted file mode 100644
index 44fe9b3fa..000000000
--- a/src/components/Toolbar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Toolbar as default } from './Toolbar';
diff --git a/src/components/ToolbarItem/ToolbarItem.tsx b/src/components/ToolbarItem/ToolbarItem.tsx
deleted file mode 100644
index cd0f7777f..000000000
--- a/src/components/ToolbarItem/ToolbarItem.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import React from 'react';
-import styles from '../Toolbar/Toolbar.module.css';
-
-export interface Props {
-  /**
-   * Align variations:
-   * - **center** yields a ToolbarItem that appears centered within the Toolbar container
-   * - **right** yields a ToolbarItem that appears right-aligned within the Toolbar container
-   */
-  align?: 'center' | 'right';
-  /**
-   * Child node(s) that can be nested inside component
-   */
-  children: ReactNode;
-  /**
-   * CSS class names that can be appended to the component.
-   */
-  className?: string;
-}
-
-/**
- * `import {ToolbarItem} from "@chanzuckerberg/eds";`
- *
- * Used in the Toolbar component to filter the content based on alignment.
- */
-export const ToolbarItem = ({
-  align,
-  className,
-  children,
-  ...other
-}: Props) => {
-  const componentClassName = clsx(
-    'toolbar__item',
-    align === 'center' && styles['toolbar__item--align-center'],
-    align === 'right' && styles['toolbar__item--align-right'],
-    className,
-  );
-  return (
-    <div className={componentClassName} {...other}>
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/ToolbarItem/index.ts b/src/components/ToolbarItem/index.ts
deleted file mode 100644
index e7115632d..000000000
--- a/src/components/ToolbarItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ToolbarItem as default } from './ToolbarItem';
diff --git a/src/index.ts b/src/index.ts
index 8630dfeef..3883e1a7b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -93,8 +93,6 @@ export { default as TextareaField } from './components/TextareaField';
 export { default as TimelineNav } from './components/TimelineNav';
 export { default as Toast } from './components/Toast';
 export { default as Toggle } from './components/Toggle';
-export { default as Toolbar } from './components/Toolbar';
-export { default as ToolbarItem } from './components/ToolbarItem';
 export { default as Tooltip } from './components/Tooltip';
 
 /**