ref(emotion11): Correctly type prop spread styled components (#25507)

static/app/components/breadcrumbs.tsx

@@ -9,6 +9,12 @@ import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import {Theme} from 'app/utils/theme';
 
+const BreadcrumbList = styled('div')`
+  display: flex;
+  align-items: center;
+  padding: ${space(1)} 0;
+`;
+
 export type Crumb = {
   /**
    * Label of the crumb
@@ -33,7 +39,7 @@ export type Crumb = {
   key?: string;
 };
 
-type Props = React.HTMLAttributes<HTMLDivElement> & {
+type Props = React.ComponentPropsWithoutRef<typeof BreadcrumbList> & {
   /**
    * Array of crumbs that will be rendered
    */
@@ -97,12 +103,6 @@ const getBreadcrumbListItemStyles = (p: {theme: Theme}) => `
   }
 `;
 
-const BreadcrumbList = styled('div')`
-  display: flex;
-  align-items: center;
-  padding: ${space(1)} 0;
-`;
-
 type BreadcrumbLinkProps = {
   to: React.ComponentProps<typeof Link>['to'];
   preserveGlobalSelection?: boolean;

static/app/components/platformPicker.tsx

@@ -20,6 +20,13 @@ import EmptyMessage from 'app/views/settings/components/emptyMessage';
 
 const PLATFORM_CATEGORIES = [...categoryList, {id: 'all', name: t('All')}] as const;
 
+const PlatformList = styled('div')`
+  display: grid;
+  grid-gap: ${space(1)};
+  grid-template-columns: repeat(auto-fill, 112px);
+  margin-bottom: ${space(2)};
+`;
+
 type Category = typeof PLATFORM_CATEGORIES[number]['id'];
 
 type Props = {
@@ -27,7 +34,7 @@ type Props = {
   platform?: string | null;
   showOther?: boolean;
   listClassName?: string;
-  listProps?: React.HTMLProps<HTMLDivElement>;
+  listProps?: React.ComponentProps<typeof PlatformList>;
   noAutoFilter?: boolean;
   defaultCategory?: Category;
 };
@@ -208,13 +215,6 @@ const CategoryNav = styled(NavTabs)`
   }
 `;
 
-const PlatformList = styled('div')`
-  display: grid;
-  grid-gap: ${space(1)};
-  grid-template-columns: repeat(auto-fill, 112px);
-  margin-bottom: ${space(2)};
-`;
-
 const StyledPlatformIcon = styled(PlatformIcon)`
   margin: ${space(2)};
 `;

static/app/components/sidebar/sidebarPanel.tsx

@@ -6,11 +6,41 @@ import styled from '@emotion/styled';
 import {IconClose} from 'app/icons';
 import {slideInLeft} from 'app/styles/animations';
 import space from 'app/styles/space';
-import {Theme} from 'app/utils/theme';
 
 import {CommonSidebarProps} from './types';
 
-type Props = React.HTMLProps<HTMLDivElement> &
+type PositionProps = Pick<CommonSidebarProps, 'orientation' | 'collapsed'>;
+
+const PanelContainer = styled('div')<PositionProps>`
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: ${p => p.theme.zIndex.sidebarPanel};
+  background: ${p => p.theme.background};
+  color: ${p => p.theme.textColor};
+  border-right: 1px solid ${p => p.theme.border};
+  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.06);
+  text-align: left;
+  animation: 200ms ${slideInLeft};
+
+  ${p =>
+    p.orientation === 'top'
+      ? css`
+          top: ${p.theme.sidebar.mobileHeight};
+          left: 0;
+          right: 0;
+        `
+      : css`
+          width: 360px;
+          top: 0;
+          left: ${p.collapsed
+            ? p.theme.sidebar.collapsedWidth
+            : p.theme.sidebar.expandedWidth};
+        `};
+`;
+
+type Props = React.ComponentProps<typeof PanelContainer> &
   Pick<CommonSidebarProps, 'collapsed' | 'orientation' | 'hidePanel'> & {
     title?: string;
   };
@@ -80,39 +110,6 @@ class SidebarPanel extends React.Component<Props> {
 
 export default SidebarPanel;
 
-const getPositionForOrientation = (
-  p: Pick<CommonSidebarProps, 'orientation' | 'collapsed'> & {theme: Theme}
-) =>
-  p.orientation === 'top'
-    ? css`
-        top: ${p.theme.sidebar.mobileHeight};
-        left: 0;
-        right: 0;
-      `
-    : css`
-        width: 360px;
-        top: 0;
-        left: ${p.collapsed
-          ? p.theme.sidebar.collapsedWidth
-          : p.theme.sidebar.expandedWidth};
-      `;
-
-const PanelContainer = styled('div')`
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: ${p => p.theme.zIndex.sidebarPanel};
-  background: ${p => p.theme.background};
-  color: ${p => p.theme.textColor};
-  border-right: 1px solid ${p => p.theme.border};
-  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.06);
-  text-align: left;
-  animation: 200ms ${slideInLeft};
-
-  ${getPositionForOrientation};
-`;
-
 const SidebarPanelHeader = styled('div')`
   border-bottom: 1px solid ${p => p.theme.border};
   padding: ${space(3)};

static/app/views/settings/components/forms/controls/radioGroup.tsx

@@ -5,6 +5,14 @@ import styled from '@emotion/styled';
 import Radio from 'app/components/radio';
 import space from 'app/styles/space';
 
+const Container = styled('div')<{orientInline?: boolean}>`
+  display: grid;
+  grid-gap: ${p => space(p.orientInline ? 3 : 1)};
+  grid-auto-flow: ${p => (p.orientInline ? 'column' : 'row')};
+  grid-auto-rows: max-content;
+  grid-auto-columns: max-content;
+`;
+
 type RadioGroupProps<C extends string> = {
   label: string;
   disabled?: boolean;
@@ -21,7 +29,7 @@ type RadioGroupProps<C extends string> = {
 };
 
 type Props<C extends string> = RadioGroupProps<C> &
-  Omit<React.HTMLAttributes<HTMLDivElement>, keyof RadioGroupProps<C>>;
+  Omit<React.ComponentPropsWithoutRef<typeof Container>, keyof RadioGroupProps<C>>;
 
 const RadioGroup = <C extends string>({
   value,
@@ -83,14 +91,6 @@ export const RadioLineItem = styled('label', {shouldForwardProp})<{
   margin: 0;
 `;
 
-const Container = styled('div')<{orientInline?: boolean}>`
-  display: grid;
-  grid-gap: ${p => space(p.orientInline ? 3 : 1)};
-  grid-auto-flow: ${p => (p.orientInline ? 'column' : 'row')};
-  grid-auto-rows: max-content;
-  grid-auto-columns: max-content;
-`;
-
 const RadioLineText = styled('div', {shouldForwardProp})<{disabled?: boolean}>`
   opacity: ${p => (p.disabled ? 0.4 : null)};
 `;