ref(react19): Remove smart search bar default props (#83472)

getsentry · Jan 15, 2025 · 88b706f · 88b706f
1 parent c95fd96
commit 88b706f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 28 deletions.
diff --git a/static/app/components/deprecatedSmartSearchBar/actionButton.tsx b/static/app/components/deprecatedSmartSearchBar/actionButton.tsx
diff --git a/static/app/components/deprecatedSmartSearchBar/index.tsx b/static/app/components/deprecatedSmartSearchBar/index.tsx
@@ -8,6 +8,7 @@ import isEqual from 'lodash/isEqual';
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {fetchRecentSearches, saveRecentSearch} from 'sentry/actionCreators/savedSearches';
 import type {Client} from 'sentry/api';
+import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import type {
@@ -57,7 +58,6 @@ import withSentryRouter from 'sentry/utils/withSentryRouter';
 import type {MenuItemProps} from '../dropdownMenu';
 import {DropdownMenu} from '../dropdownMenu';
 
-import {ActionButton} from './actionButton';
 import SearchBarDatePicker from './searchBarDatePicker';
 import SearchDropdown from './searchDropdown';
 import SearchHotkeysListener from './searchHotkeysListener';
@@ -2116,7 +2116,10 @@ class DeprecatedSmartSearchBar extends Component<DefaultProps & Props, State> {
         <ActionsBar gap={0.5}>
           {query !== '' && !disabled && (
             <ActionButton
+              type="button"
               onClick={this.clearSearch}
+              borderless
+              size="zero"
               icon={<IconClose size="xs" />}
               title={t('Clear search')}
               aria-label={t('Clear search')}
@@ -2129,7 +2132,9 @@ class DeprecatedSmartSearchBar extends Component<DefaultProps & Props, State> {
               trigger={props => (
                 <ActionButton
                   {...props}
+                  type="button"
                   size="sm"
+                  borderless
                   aria-label={t('Show more')}
                   icon={<VerticalEllipsisIcon />}
                 />
@@ -2309,3 +2314,21 @@ const VerticalEllipsisIcon = styled(IconEllipsis)`
 const OverlowingActionsMenu = styled(DropdownMenu)`
   display: flex;
 `;
+
+const ActionButton = styled(Button)<{isActive?: boolean}>`
+  color: ${p => (p.isActive ? p.theme.linkColor : p.theme.subText)};
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  min-height: auto;
+
+  &,
+  &:hover,
+  &:focus {
+    background: transparent;
+  }
+
+  &:hover {
+    color: ${p => p.theme.gray400};
+  }
+`;