ref(ui): Adjust spacing on idBadge based on avatarSize

Author: evanpurkhiser

static/app/components/idBadge/badgeDisplayName.tsx

@@ -1,8 +1,6 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {space} from 'sentry/styles/space';
-
 const BadgeDisplayName = styled('span')<{hideOverflow?: string | boolean}>`
   ${p =>
     p.hideOverflow &&
@@ -12,7 +10,6 @@ const BadgeDisplayName = styled('span')<{hideOverflow?: string | boolean}>`
         ? p.hideOverflow
         : p.theme.settings.maxCrumbWidth};
     `};
-  padding: ${space(0.25)} 0;
 `;
 
 export default BadgeDisplayName;

static/app/components/idBadge/baseBadge.tsx

@@ -2,7 +2,7 @@ import {memo} from 'react';
 import styled from '@emotion/styled';
 
 import Avatar from 'sentry/components/avatar';
-import {space} from 'sentry/styles/space';
+import {space, ValidSize} from 'sentry/styles/space';
 import type {Actor, AvatarProject, AvatarUser, Organization, Team} from 'sentry/types';
 
 export interface BaseBadgeProps {
@@ -38,35 +38,40 @@ export const BaseBadge = memo(
     project,
     actor,
     className,
-  }: AllBaseBadgeProps) => (
-    <Wrapper className={className}>
-      {!hideAvatar && (
-        <Avatar
-          {...avatarProps}
-          size={avatarSize}
-          team={team}
-          user={user}
-          organization={organization}
-          project={project}
-          actor={actor}
-        />
-      )}
+  }: AllBaseBadgeProps) => {
+    // Space items appropriatley depending on avatar size
+    const wrapperGap: ValidSize = avatarSize <= 14 ? 0.5 : avatarSize <= 20 ? 0.75 : 1;
 
-      {(!hideName || !!description) && (
-        <DisplayNameAndDescription>
-          {!hideName && (
-            <DisplayName data-test-id="badge-display-name">{displayName}</DisplayName>
-          )}
-          {!!description && <Description>{description}</Description>}
-        </DisplayNameAndDescription>
-      )}
-    </Wrapper>
-  )
+    return (
+      <Wrapper className={className} gap={wrapperGap}>
+        {!hideAvatar && (
+          <Avatar
+            {...avatarProps}
+            size={avatarSize}
+            team={team}
+            user={user}
+            organization={organization}
+            project={project}
+            actor={actor}
+          />
+        )}
+
+        {(!hideName || !!description) && (
+          <DisplayNameAndDescription>
+            {!hideName && (
+              <DisplayName data-test-id="badge-display-name">{displayName}</DisplayName>
+            )}
+            {!!description && <Description>{description}</Description>}
+          </DisplayNameAndDescription>
+        )}
+      </Wrapper>
+    );
+  }
 );
 
-const Wrapper = styled('div')`
+const Wrapper = styled('div')<{gap: ValidSize}>`
   display: flex;
-  gap: ${space(1)};
+  gap: ${p => space(p.gap)};
   align-items: center;
   flex-shrink: 0;
 `;

static/app/components/idBadge/index.stories.tsx

@@ -6,11 +6,29 @@ import useProjects from 'sentry/utils/useProjects';
 import {useTeams} from 'sentry/utils/useTeams';
 import {useUser} from 'sentry/utils/useUser';
 
+import Matrix, {PropMatrix} from '../stories/matrix';
 import SideBySide from '../stories/sideBySide';
 
+import {OrganizationBadgeProps} from './organizationBadge';
 import IdBadge from '.';
 
 export default storyBook(IdBadge, story => {
+  story('Props', () => {
+    const org = useOrganization();
+
+    const propMatrix: PropMatrix<OrganizationBadgeProps> = {
+      avatarSize: [12, 16, 24],
+    };
+
+    return (
+      <Matrix<OrganizationBadgeProps>
+        render={props => <IdBadge {...props} organization={org} />}
+        propMatrix={propMatrix}
+        selectedProps={['avatarSize']}
+      />
+    );
+  });
+
   story('Organization', () => {
     const org = useOrganization();
     return <IdBadge organization={org} />;