ref: move interactionStateLayer to components/core (#93798)

Author: TkDodo

static/app/components/arithmeticBuilder/token/function.tsx

@@ -16,7 +16,7 @@ import {TokenKind} from 'sentry/components/arithmeticBuilder/token';
 import {nextTokenKeyOfKind} from 'sentry/components/arithmeticBuilder/tokenizer';
 import type {FunctionArgument} from 'sentry/components/arithmeticBuilder/types';
 import type {SelectOptionWithKey} from 'sentry/components/core/compactSelect/types';
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {itemIsSection} from 'sentry/components/searchQueryBuilder/tokens/utils';
 import {useGridListItem} from 'sentry/components/tokenizedInput/grid/useGridListItem';
 import {focusTarget} from 'sentry/components/tokenizedInput/grid/utils';

static/app/components/core/button/index.tsx

@@ -1,10 +1,9 @@
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {Tooltip} from 'sentry/components/core/tooltip';
 // eslint-disable-next-line boundaries/element-types
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
-// eslint-disable-next-line boundaries/element-types
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 // eslint-disable-next-line boundaries/element-types
 import {space} from 'sentry/styles/space';

static/app/components/core/button/linkButton.tsx

@@ -1,10 +1,9 @@
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {Tooltip} from 'sentry/components/core/tooltip';
 // eslint-disable-next-line boundaries/element-types
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
-// eslint-disable-next-line boundaries/element-types
 import Link from 'sentry/components/links/link';
 // eslint-disable-next-line boundaries/element-types
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';

static/app/components/core/checkbox/index.tsx

@@ -2,7 +2,7 @@ import {useCallback} from 'react';
 import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import type {FormSize} from 'sentry/utils/theme';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 

static/app/components/interactionStateLayer.stories.tsx renamed to static/app/components/core/interactionStateLayer/index.stories.tsx

@@ -4,8 +4,7 @@ import styled from '@emotion/styled';
 import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
-import Panel from './panels/panel';
-import InteractionStateLayer from './interactionStateLayer';
+import InteractionStateLayer from './';
 
 export default Storybook.story('InteractionStateLayer', story => {
   story('Getting Started', () => {
@@ -47,7 +46,10 @@ export default Storybook.story('InteractionStateLayer', story => {
   });
 });
 
-const StyledPanel = styled(Panel)`
+const StyledPanel = styled('div')`
+  position: relative;
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
   padding: ${space(1)};
   max-width: 300px;
 `;

static/app/components/interactionStateLayer.tsx renamed to static/app/components/core/interactionStateLayer/index.tsx

@@ -23,6 +23,10 @@ const defaultProps = {
   hasSelectedBackground: true,
 };
 
+/**
+ * use core components with built-in interaction states
+ * @deprecated
+ */
 const InteractionStateLayer = styled(
   (props: StateLayerProps) => {
     // Prevent type checking of `rest` as it has hundreds of properties and is slow

static/app/components/core/menuListItem/index.tsx

@@ -6,6 +6,7 @@ import {css, type Theme, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {
   ChonkContentWrap,
   ChonkDetails,
@@ -17,7 +18,6 @@ import {
 } from 'sentry/components/core/menuListItem/index.chonk';
 import type {TooltipProps} from 'sentry/components/core/tooltip';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
 import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';

static/app/components/core/segmentedControl/index.tsx

@@ -11,9 +11,9 @@ import type {Node} from '@react-types/shared';
 import type {CollectionChildren} from '@react-types/shared/src/collections';
 import {LayoutGroup, motion} from 'framer-motion';
 
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import type {TooltipProps} from 'sentry/components/core/tooltip';
 import {Tooltip} from 'sentry/components/core/tooltip';
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import type {FormSize} from 'sentry/utils/theme';

static/app/components/core/tabs/tab.tsx

@@ -7,7 +7,7 @@ import {useObjectRef} from '@react-aria/utils';
 import type {TabListState} from '@react-stately/tabs';
 import type {Node, Orientation} from '@react-types/shared';
 
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import Link from 'sentry/components/links/link';
 import {space} from 'sentry/styles/space';
 import {isChonkTheme, withChonk} from 'sentry/utils/theme/withChonk';

static/app/components/dropdownAutoComplete/row.tsx

@@ -2,7 +2,7 @@ import {memo, useEffect, useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import type AutoComplete from 'sentry/components/autoComplete';
-import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
 import {space} from 'sentry/styles/space';
 
 import type {Item} from './types';