feat: migrate usages of LegacySearch to new Search (#2067)

mondaycom · Apr 18, 2024 · 3e8ac10 · 3e8ac10
1 parent 489a374
commit 3e8ac10
Show file tree

Hide file tree

Showing 19 changed files with 584 additions and 1,592 deletions.
diff --git a/packages/core/src/components/AttentionBox/__stories__/attentionBox.stories.js b/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">

diff --git a/packages/core/src/components/BaseInput/BaseInput.module.scss b/packages/core/src/components/BaseInput/BaseInput.module.scss
@@ -6,7 +6,6 @@
   position: relative;
   display: flex;
   align-items: center;
-  flex-shrink: 0;
   gap: var(--spacing-small);
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-medium) var(--spacing-xs);
@@ -22,15 +21,18 @@
   transition: border-color var(--motion-productive-medium) ease-in;
 
   &.small {
+    min-height: 32px;
     height: 32px;
     @include vibe-text(text2, normal);
   }
 
   &.medium {
+    min-height: 40px;
     height: 40px;
   }
 
   &.large {
+    min-height: 48px;
     height: 48px;
     padding-block: var(--spacing-small);
   }

diff --git a/packages/core/src/components/Chips/__stories__/chips.stories.js b/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} />

diff --git a/packages/core/src/components/Combobox/Combobox.module.scss b/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;

diff --git a/packages/core/src/components/Combobox/Combobox.tsx b/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