feat: migrate usages of LegacySearch to new Search

packages/core/src/components/AttentionBox/__stories__/attentionBox.stories.js

@@ -5,7 +5,7 @@ import { createComponentTemplate, StoryDescription } from "vibe-storybook-compon
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { Info, Invite, ThumbsUp } from "../../Icon/Icons";
 import Icon from "../../Icon/Icon";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import Avatar from "../../Avatar/Avatar";
 import person from "./assets/person.png";
 import Flex from "../../Flex/Flex";
@@ -159,7 +159,7 @@ export const AttentionBoxInsideADialogCombobox = {
 
     return (
       <DialogContentContainer className="monday-storybook-attention-box_search-bar">
-        <LegacySearch placeholder="Search by name, role, team, or email" />
+        <Search placeholder="Search by name, role, team, or email" />
         <div className="monday-storybook-attention-box_lable">Suggested people</div>
         <div className="monday-storybook-attention-box_search">
           <div className="monday-storybook-attention-box_inline-container">

packages/core/src/components/Chips/__stories__/chips.stories.js

@@ -4,7 +4,7 @@ import Chips from "../Chips";
 import Text from "../../Text/Text";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import Avatar from "../../Avatar/Avatar";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { Email } from "../../Icon/Icons";
@@ -187,7 +187,7 @@ export const ColorfulChipsForDifferentContent = {
       <div className={styles.item}>
         <Chips label="January" color={Chips.colors.POSITIVE} />
       </div>
-      <LegacySearch />
+      <Search />
       <div className={styles.item}>
         <Chips label="August" readOnly color={Chips.colors.LIPSTICK} />
       </div>
@@ -206,7 +206,7 @@ export const ColorfulChipsForDifferentContent = {
 export const ChipsInAPersonPickerComboBox = {
   render: () => (
     <DialogContentContainer className={styles.searchBar}>
-      <LegacySearch placeholder="Search names, positions, or a team" />
+      <Search placeholder="Search names, positions, or a team" />
       <Flex align={Flex.align.CENTER} justify={Flex.justify.CENTER}>
         <Chips label="Esther Schanler" leftAvatar={person1} />
         <Chips label="Rotem Dekel" leftAvatar={rotem} />

packages/core/src/components/Combobox/Combobox.module.scss

@@ -39,10 +39,6 @@
   z-index: 12;
 }
 
-.comboboxSearch {
-  flex: 0 0 auto;
-}
-
 .comboboxNoResults {
   margin-top: var(--spacing-small);
   flex: 1 1 auto;

packages/core/src/components/Combobox/Combobox.tsx

@@ -6,7 +6,7 @@ import { isFunction, noop as NOOP } from "lodash-es";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import useMergeRef from "../../hooks/useMergeRef";
-import LegacySearch from "../LegacySearch/LegacySearch";
+import Search from "../Search/Search";
 import { BASE_SIZES } from "../../constants";
 import Button from "../Button/Button";
 import Text from "../Text/Text";
@@ -283,21 +283,20 @@ const Combobox: React.FC<ComboboxProps> & {
         ellipsis={false}
       >
         <div className={styles.comboboxList} style={{ maxHeight: optionsListHeight }} role="listbox">
-          <LegacySearch
+          <Search
             ref={inputRef}
             value={filterValue}
-            wrapperClassName={cx(styles.comboboxSearchWrapper, searchWrapperClassName)}
-            className={styles.comboboxSearch}
+            className={cx(styles.comboboxSearchWrapper, searchWrapperClassName)}
             inputAriaLabel={searchInputAriaLabel}
-            activeDescendant={visualFocusItemId}
+            currentAriaResultId={visualFocusItemId}
             id="combobox-search"
             placeholder={placeholder}
             size={size}
             disabled={disabled}
             onChange={onChangeCallback}
             autoFocus={autoFocus}
             loading={loading}
-            iconName={searchIcon}
+            searchIconName={searchIcon}
           />
           {stickyCategories && <StickyCategoryHeader label={activeCategoryLabel} />}
           <ComboboxItems

packages/core/src/components/Heading/__stories__/Heading.stories.js

@@ -6,7 +6,7 @@ import { ONE_LINE_ELLIPSIS_TEST_ID, OVERFLOW_TITLE_CONTAINER_ID } from "../__tes
 import { headingOverflowSuite } from "../__tests__/Heading.interactions";
 import Divider from "../../Divider/Divider";
 import Text from "../../Text/Text";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import Checkbox from "../../Checkbox/Checkbox";
 import Button from "../../Button/Button";
 import { Custom } from "../../Icon/Icons";
@@ -156,7 +156,7 @@ export const BuiltInPageHeaderNotEditable = {
       </Heading>
       <Divider className={styles.pageDivider} />
       <Flex align={Flex.align.CENTER} gap={Flex.gaps.SMALL} aria-labelledby="my-work-id">
-        <LegacySearch wrapperClassName={styles.pageHeaderSearch} placeholder="Search" />
+        <Search className={styles.pageHeaderSearch} placeholder="Search" />
         <Checkbox label="Hide done items" checked />
         <Button leftIcon={Custom} kind={Button.kinds.TERTIARY}>
           Customize

packages/core/src/components/Icon/__stories__/IconsList.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { iconsMetaData } from "monday-ui-style/src/Icons/iconsMetaData";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import * as allIcons from "../Icons";
 import Flex from "../../Flex/Flex";
 import styles from "./Icon.stories.module.scss";
@@ -18,7 +18,7 @@ export default function IconsList() {
 
   return (
     <section className={styles.wrapper}>
-      <LegacySearch value={query} onChange={setQuery} placeholder="Search for icons" wrapperClassName={styles.search} />
+      <Search value={query} onChange={setQuery} placeholder="Search for icons" className={styles.search} />
       <div className={styles.grid}>
         {iconsMetaData
           .filter((icon: IconMeta) => {

packages/core/src/components/LegacyHeading/__stories__/LegacyHeading.stories.tsx

@@ -1,7 +1,7 @@
 import Heading from "../LegacyHeading";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import Divider from "../../Divider/Divider";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import Checkbox from "../../Checkbox/Checkbox";
 import Button from "../../Button/Button";
 import Flex from "../../Flex/Flex";
@@ -127,7 +127,7 @@ export const NotEditableHeaderOfAPage = {
       <Heading type={Heading.types.h1} value="My Work" id="my-work-id" />
       <Divider />
       <Flex align={Flex.align.CENTER} gap={Flex.gaps.SMALL} aria-labelledby="my-work-id">
-        <LegacySearch wrapperClassName={styles["page-header_search"]} placeholder="Search" />
+        <Search className={styles["page-header_search"]} placeholder="Search" />
         <Checkbox label="Hide done items" checked />
         <Button leftIcon={Custom} kind={Button.kinds.TERTIARY}>
           Customize

packages/core/src/components/LegacySearch/__stories__/LegacySearch.stories.tsx

@@ -1,21 +1,21 @@
 import { createComponentTemplate } from "vibe-storybook-components";
-import LegacySearch from "../LegacySearch";
+import Search from "../LegacySearch";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import Combobox from "../../Combobox/Combobox";
 import "./LegacySearch.stories.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: LegacySearch,
+  component: Search,
   enumPropNamesArray: ["type", "size"],
   iconPropNamesArray: ["secondaryIconName", "iconName"]
 });
 
-const searchTemplate = createComponentTemplate(LegacySearch);
+const searchTemplate = createComponentTemplate(Search);
 
 export default {
   title: "Inputs/LegacySearch [deprecated]",
-  component: LegacySearch,
+  component: Search,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
 };
@@ -33,9 +33,9 @@ export const Overview = {
 export const Sizes = {
   render: () => (
     <div className="monday-storybook-search_box">
-      <LegacySearch placeholder="Small" size={LegacySearch.sizes.SMALL} />
-      <LegacySearch placeholder="Medium" />
-      <LegacySearch placeholder="Large" size={LegacySearch.sizes.LARGE} />
+      <Search placeholder="Small" size={Search.sizes.SMALL} />
+      <Search placeholder="Medium" />
+      <Search placeholder="Large" size={Search.sizes.LARGE} />
     </div>
   ),
 

packages/core/src/components/Menu/Menu/__stories__/Menu.stories.helpers.tsx

@@ -1,5 +1,8 @@
 import { StorybookLink, Tip } from "vibe-storybook-components";
-import { DialogContentContainer, Menu, MenuItem, Search } from "../../../index";
+import DialogContentContainer from "../../../DialogContentContainer/DialogContentContainer";
+import Menu from "../../../Menu/Menu/Menu";
+import MenuItem from "../../../Menu/MenuItem/MenuItem";
+import Search from "../../../Search/Search";
 import { Calendar, Filter, Wand } from "../../../Icon/Icons";
 import styles from "./Menu.stories.module.scss";
 import React from "react";
@@ -26,7 +29,7 @@ export const ComponentRuleSimpleActions = () => (
 
 export const ComponentRuleWithSearch = () => (
   <DialogContentContainer>
-    <Search size={Search.sizes.SMALL} className={styles["component-rule-search"]} />
+    <Search size="small" className={styles["component-rule-search"]} />
     <Menu>
       <MenuItem title="Item 1" icon={Calendar} />
       <MenuItem title="Item 2" icon={Wand} />

packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.stories.js

@@ -1,22 +1,10 @@
 import { ResizableBox } from "react-resizable";
-import {
-  Activity,
-  Alert,
-  API,
-  Bolt,
-  Broom,
-  CloseSmall,
-  Group,
-  Moon,
-  Search as SearchIcon,
-  Sun,
-  Open
-} from "../../Icon/Icons";
+import { Activity, Alert, API, Bolt, Broom, Group, Moon, Sun, Open } from "../../Icon/Icons";
 import ResponsiveList from "../ResponsiveList";
 import Menu from "../../Menu/Menu/Menu";
 import MenuItem from "../../Menu/MenuItem/MenuItem";
 import SplitButton from "../../SplitButton/SplitButton";
-import LegacySearch from "../../LegacySearch/LegacySearch";
+import Search from "../../Search/Search";
 import Button from "../../Button/Button";
 import Icon from "../../Icon/Icon";
 import "./ResponsiveList.stories.scss";
@@ -71,22 +59,9 @@ const componentTemplate = responseListProps => {
         <div
           className="responsive-lst-search"
           // eslint-disable-next-line
-          responsiveListPlaceholder={
-            <LegacySearch
-              id="search-icon-inside"
-              size={LegacySearch.sizes.MEDIUM}
-              placeholder="search for content"
-              iconName={SearchIcon}
-              secondaryIconName={CloseSmall}
-            />
-          }
+          responsiveListPlaceholder={<Search id="search-icon-inside" size="medium" placeholder="search for content" />}
         >
-          <LegacySearch
-            size={LegacySearch.sizes.MEDIUM}
-            placeholder="search for content"
-            iconName={SearchIcon}
-            secondaryIconName={CloseSmall}
-          />
+          <Search size="medium" placeholder="search for content" />
         </div>
         <Button kind={Button.kinds.TERTIARY} marginLeft>
           <Icon icon={Broom} ignoreFocusStyle className="responsive-icon-margin" />

packages/core/src/hooks/useActiveDescendantListFocus/__stories__/useActiveDescendantListFocus.stories.js

@@ -2,7 +2,8 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import { useCallback, useRef } from "react";
 import cx from "classnames";
-import { Flex, Search } from "../../../components";
+import Flex from "../../../components/Flex/Flex";
+import Search from "../../../components/Search/Search";
 import useActiveDescendantListFocus from "../index";
 import UseActiveDescendantListFocus from "./hooksDummyComponents/UseActiveDescendantListFocus";
 import { overviewInteractionSuite } from "../__tests__/useActiveDescendantListFocus.interactions";
@@ -38,7 +39,7 @@ export const Overview = {
         <Search
           ref={focusedElementRef}
           role={focusedElementProps.role}
-          activeDescendant={focusedElementProps["aria-activedescendant"]}
+          currentAriaResultId={focusedElementProps["aria-activedescendant"]}
         />
         <ul>
           <li

packages/core/src/storybook/components/related-components/descriptions/search-description.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { RelatedComponent } from "vibe-storybook-components";
-import LegacySearch from "../../../../components/LegacySearch/LegacySearch";
+import Search from "../../../../components/Search/Search";
 
 export const SearchDescription = () => {
   const component = useMemo(() => {
@@ -9,7 +9,7 @@ export const SearchDescription = () => {
     };
     return (
       <div style={style}>
-        <LegacySearch placeholder="Placeholder text here" size={LegacySearch.sizes.LARGE} />
+        <Search placeholder="Placeholder text here" size="large" />
       </div>
     );
   }, []);

packages/core/src/storybook/stand-alone-documentaion/catalog/Catalog/Catalog.stories.templates.tsx

@@ -4,7 +4,7 @@ import { RelatedComponents } from "vibe-storybook-components";
 import { DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP } from "../../../components/related-components/component-description-map";
 import Search from "../../../../components/Search/Search";
 import { CatalogEmptyState } from "../EmptyState/Catalog.stories.EmptyState";
-import styles from "./Catalog.stories.templates.module.scss";
+import Flex from "../../../../components/Flex/Flex";
 
 const RELATED_COMPONENT_NAMES = Array.from(DESCRIPTION_COMPONENTS_WITHOUT_GENERAL_DESCRIPTION_MAP.keys())
   .map(name => name.toLowerCase())
@@ -17,13 +17,13 @@ export const CatalogTemplate = () => {
   );
 
   return (
-    <div className={styles.container}>
-      <Search placeholder="Search by component name..." value={query} onChange={setQuery} className={styles.search} />
+    <Flex direction={Flex.directions.COLUMN} gap={Flex.gaps.LARGE} align={Flex.align.STRETCH} style={{ width: "100%" }}>
+      <Search placeholder="Search by component name..." value={query} onChange={setQuery} />
       <RelatedComponentsDecorator
         componentsNames={componentsToDisplay}
         linkTarget={RelatedComponents.linkTargets.PARENT}
       />
       {componentsToDisplay.length === 0 && <CatalogEmptyState />}
-    </div>
+    </Flex>
   );
 };