Browse Source

ref(emotion11): Fix more 'as' prop compatability (#25518)

Emotion 11 types the `as` prop, which conflicts with any HTMLElement
types `as` prop, so we either have to use the props from the emotion
StyledComponent, or remove the `as` type from any HTML props we're
spreading into a styled component
Evan Purkhiser 3 years ago
parent
commit
1c55f25d51

+ 1 - 1
static/app/components/group/sidebarSection.tsx

@@ -31,7 +31,7 @@ type Props = {
   title: React.ReactNode;
   children: React.ReactNode;
   secondary?: boolean;
-} & Omit<React.HTMLProps<HTMLHeadingElement>, 'title'>;
+} & Omit<React.ComponentProps<typeof Heading>, 'title'>;
 
 /**
  * Used to add a new section in Issue Details's sidebar.

+ 1 - 1
static/app/components/links/link.tsx

@@ -14,7 +14,7 @@ type Props = WithRouterProps & {
   to: ToLocationFunction | LocationDescriptor;
   // Styles applied to the component's root
   className?: string;
-} & Omit<AnchorProps, 'href' | 'target'>;
+} & Omit<AnchorProps, 'href' | 'target' | 'as' | 'css'>;
 
 /**
  * A context-aware version of Link (from react-router) that falls

+ 1 - 1
static/app/components/menuItem.tsx

@@ -145,7 +145,7 @@ class MenuItem extends React.Component<Props> {
         divider={divider}
         noAnchor={noAnchor}
         header={header}
-        {...omit(props, ['href', 'title', 'onSelect', 'eventKey', 'to'])}
+        {...omit(props, ['href', 'title', 'onSelect', 'eventKey', 'to', 'as'])}
       >
         {renderChildren}
       </MenuListItem>

+ 4 - 5
static/app/components/radio.tsx

@@ -7,9 +7,8 @@ import {Theme} from 'app/utils/theme';
 
 type Props = {radioSize?: 'small'};
 
-type CheckedProps = React.HTMLProps<HTMLInputElement> & {
-  theme: Theme;
-} & Props;
+type CheckedProps = Props &
+  Omit<React.HTMLProps<HTMLInputElement>, 'as'> & {theme: Theme};
 
 const checkedCss = (p: CheckedProps) => css`
   display: block;
@@ -21,7 +20,7 @@ const checkedCss = (p: CheckedProps) => css`
   opacity: ${p.disabled ? 0.4 : null};
 `;
 
-const Radio = styled('input')<{radioSize?: 'small'}>`
+const Radio = styled('input')<Props>`
   display: flex;
   padding: 0;
   width: ${p => (p.radioSize === 'small' ? '16px' : '1.5em')};
@@ -47,7 +46,7 @@ const Radio = styled('input')<{radioSize?: 'small'}>`
 
   &:checked:after {
     content: '';
-    ${checkedCss}
+    ${p => checkedCss(p)}
   }
 `;