feat(searchbar)!: remove top level subcomponents (#1687)

* feat(searchbar)!: remove top level subcomponents

* fix(searchbar): add missing styles

src/components/SearchBar/SearchBar.module.css

@@ -9,3 +9,56 @@
   display: flex;
   gap: var(--eds-size-1);
 }
+
+/**
+ * Button to trigger search in a Search Bar.
+ */
+.search-button {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  height: var(--eds-size-5);
+  box-sizing: content-box;
+  border: 0;
+}
+
+/**
+ * Search Input Field for gathering input text.
+ */
+.search-field {
+  flex: 1;
+  position: relative;
+}
+
+/**
+ * The Input component.
+ */
+.search-field > .search-field__input {
+  padding-left: 2.25rem;
+}
+.search-field__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+/**
+ * The search icon that overlays the Input.
+ */
+.search-field__icon {
+  color: var(--eds-theme-color-icon-neutral-default);
+  position: absolute;
+  top: 0.6875rem;
+  left: 0.625rem;
+}
+
+/**
+ * Focused variant of the Search Icon.
+ */
+.search-field__input:focus + .search-field__icon {
+  color: var(--eds-theme-color-icon-brand-primary);
+}
+
+/**
+ * Disabled variant of the Search Icon.
+ */
+.search-field__icon--disabled {
+  color: var(--eds-theme-color-icon-disabled);
+}

src/components/SearchBar/SearchBar.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'Components/SearchBar',
   component: SearchBar,
   parameters: {
-    badges: ['1.1', BADGE.BETA],
+    badges: ['1.1', BADGE.NEEDS_REVISION],
   },
   decorators: [
     (Story) => (

src/components/SearchBar/SearchBar.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
-import SearchButton from '../SearchButton';
-import SearchField from '../SearchField';
+import Button from '../Button';
+import Icon from '../Icon';
+import Input, { type InputProps } from '../Input';
 import styles from './SearchBar.module.css';
 
-export type Props = {
+type SearchBarProps = {
   /**
    * SearchBar subcomponents to be wrapped.
    */
@@ -16,14 +17,72 @@ export type Props = {
   className?: string;
 };
 
+type SearchButtonProps = {
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  /**
+   * Disables the button and prevents button use.
+   */
+  disabled?: boolean;
+  /**
+   * On click handler for component
+   */
+  onClick?: MouseEventHandler;
+};
+
+/**
+ * A search Input component styled for use with the SearchBar.
+ */
+const SearchField = ({ className, disabled, ...other }: InputProps) => {
+  const inputClassName = clsx(styles['search-field__input'], className);
+  const iconClassName = clsx(
+    styles['search-field__icon'],
+    disabled && styles['search-field__icon--disabled'],
+  );
+
+  return (
+    <div className={styles['search-field']}>
+      <Input
+        className={inputClassName}
+        disabled={disabled}
+        placeholder="Search"
+        type="search"
+        {...other}
+      />
+      <Icon
+        className={iconClassName}
+        name="search"
+        purpose="informative"
+        size="1.25rem"
+        title="search"
+      />
+    </div>
+  );
+};
+
+/**
+ * A button styled for use with the SearchBar.
+ */
+const SearchButton = ({ className, ...other }: SearchButtonProps) => {
+  const componentClassName = clsx(styles['search-button'], className);
+
+  return (
+    <Button className={componentClassName} variant="primary" {...other}>
+      Search
+    </Button>
+  );
+};
+
 /**
- * BETA: This component is still a work in progress and is subject to change.
+ * In Review: This component is in design review and is subject to change.
  *
  * `import {SearchBar} from "@chanzuckerberg/eds";`
  *
  * Input field and button used for searching through various data fields.
  */
-export const SearchBar = ({ children, className }: Props) => {
+export const SearchBar = ({ children, className }: SearchBarProps) => {
   const componentClassName = clsx(styles['search-bar'], className);
 
   return <div className={componentClassName}>{children}</div>;

src/index.ts

@@ -71,8 +71,6 @@ export { default as RadioInput } from './components/RadioInput';
 export { default as RadioLabel } from './components/RadioLabel';
 export { default as Score } from './components/Score';
 export { default as SearchBar } from './components/SearchBar';
-export { default as SearchButton } from './components/SearchButton';
-export { default as SearchField } from './components/SearchField';
 export { default as Section } from './components/Section';
 export { default as Select } from './components/Select';
 export { default as Skeleton } from './components/Skeleton';