placeholder: cleanup placeholder API

static/app/components/activity/item/avatar.tsx

@@ -1,39 +1,31 @@
 import styled from '@emotion/styled';
 
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSentry} from 'sentry/icons';
 import type {AvatarUser} from 'sentry/types/user';
 
 type Props = {
   type: 'system' | 'user';
-  className?: string;
   size?: number;
   user?: AvatarUser;
 };
 
-export function ActivityAvatar({className, type, user, size = 38}: Props) {
+export function ActivityAvatar({type, user, size = 38}: Props) {
   if (user) {
-    return <UserAvatar user={user} size={size} className={className} />;
+    return <UserAvatar user={user} size={size} />;
   }
 
   if (type === 'system') {
     // Return Sentry avatar
     return (
-      <SystemAvatar className={className} size={size}>
+      <SystemAvatar size={size}>
         <StyledIconSentry size="md" />
       </SystemAvatar>
     );
   }
 
-  return (
-    <Placeholder
-      className={className}
-      width={`${size}px`}
-      height={`${size}px`}
-      shape="circle"
-    />
-  );
+  return <Placeholder width={`${size}px`} height={`${size}px`} shape="circle" />;
 }
 
 type SystemAvatarProps = {

static/app/components/activity/item/index.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {DateTime} from 'sentry/components/dateTime';
 import TimeSince from 'sentry/components/timeSince';
 import {space} from 'sentry/styles/space';
@@ -87,7 +89,9 @@ function ActivityItem({
       {id && <a id={id} />}
 
       {author && (
-        <StyledActivityAvatar type={author.type} user={author.user} size={avatarSize} />
+        <Container marginRight="md">
+          <ActivityAvatar type={author.type} user={author.user} size={avatarSize} />
+        </Container>
       )}
 
       <StyledActivityBubble {...bubbleProps}>
@@ -139,10 +143,6 @@ const ActivityBody = styled('div')`
   ${textStyles}
 `;
 
-const StyledActivityAvatar = styled(ActivityAvatar)`
-  margin-right: ${space(1)};
-`;
-
 const StyledTimeSince = styled(TimeSince)`
   color: ${p => p.theme.subText};
 `;

static/app/components/assigneeBadge.tsx

@@ -7,7 +7,7 @@ import {Tag} from 'sentry/components/core/badge';
 import {ExternalLink} from 'sentry/components/core/link';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -80,7 +80,7 @@ export function AssigneeBadge({
     <Fragment>
       <Placeholder
         shape="circle"
-        testId="unassigned-avatar"
+        data-test-id="unassigned-avatar"
         width={`${AVATAR_SIZE}px`}
         height={`${AVATAR_SIZE}px`}
       />

static/app/components/badge/groupPriority.tsx

@@ -16,7 +16,7 @@ import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {DropdownMenuFooter} from 'sentry/components/dropdownMenu/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChevron, IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/calendar/index.tsx

@@ -1,7 +1,7 @@
 import {lazy, Suspense} from 'react';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 
 import type {DatePickerProps} from './datePicker';
 import type {DateRangePickerProps} from './dateRangePicker';

static/app/components/charts/chartWidgetLoader.tsx

@@ -1,7 +1,8 @@
+import styled from '@emotion/styled';
 import {captureException} from '@sentry/core';
 import {useQuery} from '@tanstack/react-query';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
@@ -228,8 +229,13 @@ export function ChartWidgetLoader(props: Props) {
     // eslint-disable-next-line no-console
     console.error(error);
     captureException(error);
-    return <Placeholder height="100%" error={t('Error loading widget')} />;
+    return <ErrorPlaceholder height="100%">{t('Error loading widget')}</ErrorPlaceholder>;
   }
 
   return <Component {...props} chartRef={props.ref} />;
 }
+
+const ErrorPlaceholder = styled(Placeholder)`
+  color: ${p => p.theme.red200};
+  background-color: ${p => p.theme.red100};
+`;

static/app/components/charts/groupStatusChart.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import MarkLine from 'sentry/components/charts/components/markLine';
 import MiniBarChart from 'sentry/components/charts/miniBarChart';
 import {LazyRender} from 'sentry/components/lazyRender';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {TimeseriesValue} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';

static/app/components/core/avatar/actorAvatar.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import {useMemo} from 'react';
 import * as Sentry from '@sentry/react';
 
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {Actor} from 'sentry/types/core';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
@@ -85,8 +85,7 @@ function AsyncMemberAvatar({ref, userActor, ...props}: AsyncMemberAvatarProps) {
   const member = members.find(u => u.id === userActor.id);
 
   if (fetching) {
-    const size = `${props.size}px`;
-    return <Placeholder shape="circle" width={size} height={size} />;
+    return <Placeholder width={`${props.size}px`} height={`${props.size}px`} />;
   }
 
   if (!member) {

static/app/components/core/avatar/avatar.mdx

@@ -9,7 +9,7 @@ resources:
 import {Fragment, useEffect} from 'react';
 
 import {Flex} from 'sentry/components/core/layout';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import * as Storybook from 'sentry/stories';
 import {useMembers} from 'sentry/utils/useMembers';
 import {useUserTeams} from 'sentry/utils/useUserTeams';

static/app/components/core/layout/styles.tsx

@@ -107,6 +107,10 @@ function resolveRadius(sizeComponent: RadiusSize | undefined, theme: Theme) {
     return undefined;
   }
 
+  if (sizeComponent === 'full') {
+    return '100%';
+  }
+
   return isChonkTheme(theme) ? theme.radius[sizeComponent] : theme.borderRadius;
 }
 

static/app/components/eventOrGroupExtraDetails.tsx

@@ -14,7 +14,7 @@ import UnhandledTag from 'sentry/components/group/inboxBadges/unhandledTag';
 import IssueReplayCount from 'sentry/components/group/issueReplayCount';
 import IssueSeerBadge from 'sentry/components/group/issueSeerBadge';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconChat} from 'sentry/icons';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx

@@ -3,12 +3,14 @@ import styled from '@emotion/styled';
 import * as Sentry from '@sentry/react';
 import type {LocationDescriptor} from 'history';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {Link} from 'sentry/components/core/link';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {DifferentialFlamegraph} from 'sentry/components/profiling/flamegraph/differentialFlamegraph';
 import {DifferentialFlamegraphToolbar} from 'sentry/components/profiling/flamegraph/flamegraphToolbar/differentialFlamegraphToolbar';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -342,19 +344,15 @@ function DifferentialFlamegraphChangedFunctions(
             return (
               <DifferentialFlamegraphChangedFunctionContainer key={idx}>
                 <div>
-                  <Placeholder
-                    height="16px"
-                    width="66%"
-                    style={MARGIN_BOTTOM_PLACEHOLDER_STYLES}
-                  />
+                  <Container marginBottom="xs">
+                    {p => <Placeholder height="16px" width="66%" {...p} />}
+                  </Container>
                   <Placeholder height="16px" width="48%" />
                 </div>
                 <DifferentialFlamegraphChangedFunctionStats>
-                  <Placeholder
-                    height="16px"
-                    width="32px"
-                    style={RIGHT_ALIGN_PLACEHOLDER_STYLES}
-                  />
+                  <Container marginBottom="xs" marginLeft="auto" justifySelf="flex-end">
+                    {p => <Placeholder height="16px" width="32px" {...p} />}
+                  </Container>
                   <Placeholder height="16px" width="56px" />
                 </DifferentialFlamegraphChangedFunctionStats>
               </DifferentialFlamegraphChangedFunctionContainer>
@@ -436,16 +434,6 @@ const DifferentialFlamegraphFunctionColorIndicator = styled('div')`
   background-color: ${p => p.theme.green300};
 `;
 
-const RIGHT_ALIGN_PLACEHOLDER_STYLES: React.CSSProperties = {
-  marginBottom: '4px',
-  marginLeft: 'auto',
-  justifySelf: 'flex-end',
-};
-
-const MARGIN_BOTTOM_PLACEHOLDER_STYLES: React.CSSProperties = {
-  marginBottom: '4px',
-};
-
 const DifferentialFlamegraphChangedFunctionStats = styled('div')`
   text-align: right;
   flex-shrink: 0;

static/app/components/events/groupingInfo/groupingSummary.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
+import {Container} from '@sentry/scraps/layout';
+
 import {useEventGroupingInfo} from 'sentry/components/events/groupingInfo/useEventGroupingInfo';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
@@ -34,11 +36,9 @@ export function GroupInfoSummary({
 
   if (isPending && !hasPerformanceGrouping) {
     return (
-      <Placeholder
-        height="20px"
-        width="unset"
-        style={{flexGrow: 1, marginBottom: '20px'}}
-      />
+      <Container marginBottom="xl">
+        {props => <Placeholder height="20px" width="unset" flexGrow={1} {...props} />}
+      </Container>
     );
   }
 

static/app/components/events/interfaces/crashContent/exception/rawContent.tsx

@@ -3,7 +3,7 @@ import {Fragment} from 'react';
 import ClippedBox from 'sentry/components/clippedBox';
 import rawStacktraceContent from 'sentry/components/events/interfaces/crashContent/stackTrace/rawContent';
 import LoadingError from 'sentry/components/loadingError';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import type {Event, ExceptionType} from 'sentry/types/event';
 import type {PlatformKey, Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';

static/app/components/events/interfaces/frame/stacktraceLink.tsx

@@ -10,7 +10,7 @@ import {Text} from 'sentry/components/core/text';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {useStacktraceCoverage} from 'sentry/components/events/interfaces/frame/useStacktraceCoverage';
 import {hasFileExtension} from 'sentry/components/events/interfaces/frame/utils';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCopy, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event, Frame} from 'sentry/types/event';

static/app/components/feedback/feedbackItem/crashReportSection.tsx

@@ -5,7 +5,7 @@ import {Alert} from 'sentry/components/core/alert';
 import EventOrGroupExtraDetails from 'sentry/components/eventOrGroupExtraDetails';
 import EventOrGroupHeader from 'sentry/components/eventOrGroupHeader';
 import useFetchCrashReport from 'sentry/components/feedback/feedbackItem/useFetchCrashReport';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';

static/app/components/feedback/feedbackItem/feedbackItemLoader.tsx

@@ -7,7 +7,7 @@ import FeedbackItem from 'sentry/components/feedback/feedbackItem/feedbackItem';
 import useCurrentFeedbackId from 'sentry/components/feedback/useCurrentFeedbackId';
 import useCurrentFeedbackProject from 'sentry/components/feedback/useCurrentFeedbackProject';
 import useFetchFeedbackData from 'sentry/components/feedback/useFetchFeedbackData';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import useSentryAppComponentsData from 'sentry/stores/useSentryAppComponentsData';
 import {trackAnalytics} from 'sentry/utils/analytics';

static/app/components/feedback/feedbackItem/feedbackReplay.tsx

@@ -2,7 +2,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackItemSection from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
 import ReplayInlineCTAPanel from 'sentry/components/feedback/feedbackItem/replayInlineCTAPanel';
 import ReplaySection from 'sentry/components/feedback/feedbackItem/replaySection';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {replayPlatforms} from 'sentry/data/platformCategories';
 import {IconPlay} from 'sentry/icons';
 import {t} from 'sentry/locale';

static/app/components/feedback/feedbackItem/traceDataSection.tsx

@@ -1,7 +1,7 @@
 import {useEffect} from 'react';
 
 import FeedbackItemSection from 'sentry/components/feedback/feedbackItem/feedbackItemSection';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconSpan} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';

static/app/components/feedback/summaryCategories/feedbackCategories.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import useFeedbackCategories from 'sentry/components/feedback/list/useFeedbackCategories';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {MutableSearch} from 'sentry/components/searchSyntax/mutableSearch';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {decodeScalar} from 'sentry/utils/queryString';

static/app/components/feedback/summaryCategories/feedbackSummary.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import {Link} from 'sentry/components/core/link';
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import useFeedbackSummary from 'sentry/components/feedback/list/useFeedbackSummary';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t, tct} from 'sentry/locale';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';

static/app/components/group/externalIssuesList/index.tsx

@@ -15,7 +15,7 @@ import useExternalIssueData from 'sentry/components/group/externalIssuesList/use
 import PluginActions from 'sentry/components/group/pluginActions';
 import SentryAppExternalIssueActions from 'sentry/components/group/sentryAppExternalIssueActions';
 import IssueSyncListElement from 'sentry/components/issueSyncListElement';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import * as SidebarSection from 'sentry/components/sidebarSection';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';

static/app/components/group/externalIssuesList/streamlinedExternalIssueList.tsx

@@ -11,7 +11,7 @@ import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import type {ExternalIssueAction} from 'sentry/components/group/externalIssuesList/hooks/types';
 import useGroupExternalIssues from 'sentry/components/group/externalIssuesList/hooks/useGroupExternalIssues';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Event} from 'sentry/types/event';
@@ -75,7 +75,7 @@ export function StreamlinedExternalIssueList({
   });
 
   if (isLoading) {
-    return <Placeholder height="25px" testId="issue-tracking-loading" />;
+    return <Placeholder height="25px" data-test-id="issue-tracking-loading" />;
   }
 
   const hasLinkedIssuesOrIntegrations = integrations.length || linkedIssues.length;

static/app/components/group/groupSummary.tsx

@@ -6,7 +6,7 @@ import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {Text} from 'sentry/components/core/text';
 import {makeAutofixQueryKey} from 'sentry/components/events/autofix/useAutofix';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {
   IconChevron,
   IconDocs,

static/app/components/group/groupSummaryWithAutofix.tsx

@@ -16,7 +16,7 @@ import {
   hasPullRequest,
 } from 'sentry/components/events/autofix/utils';
 import {GroupSummary} from 'sentry/components/group/groupSummary';
-import Placeholder from 'sentry/components/placeholder';
+import {Placeholder} from 'sentry/components/placeholder';
 import {IconCode, IconFix, IconFocus} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';