Type fixes

looker-open-source · Oct 15, 2021 · b3be12e · b3be12e
1 parent fdeda34
commit b3be12e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/packages/code-editor/src/Markdown/common.tsx b/packages/code-editor/src/Markdown/common.tsx
@@ -26,18 +26,25 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Paragraph, Table, Heading } from '@looker/components'
+import type {
+  HeadingProps,
+  ParagraphProps,
+  TableProps,
+} from '@looker/components'
 
 /**
  * Common styled components used by DocMarkdown
  */
 
 export const MDHeading = styled(Heading).attrs(
-  ({ mb = 'xsmall', pt = 'xsmall' }) => ({ mb, pt })
-)``
+  ({ mb = 'xsmall', pt = 'xsmall' }: HeadingProps) => ({ mb, pt })
+)<HeadingProps>``
 
-export const MDParagraph = styled(Paragraph).attrs(({ mb = 'large' }) => ({
-  mb,
-}))`
+export const MDParagraph = styled(Paragraph).attrs(
+  ({ mb = 'large' }: ParagraphProps) => ({
+    mb,
+  })
+)`
   color: ${({ theme }) => theme.colors.text5};
   max-width: 600px;
 `
@@ -61,4 +68,6 @@ export const MDListItem = styled.li`
   margin-bottom: 4px;
 `
 
-export const MDTable = styled(Table).attrs(({ mb = 'large' }) => ({ mb }))``
+export const MDTable = styled(Table).attrs(({ mb = 'large' }: TableProps) => ({
+  mb,
+}))``
diff --git a/packages/run-it/src/components/MethodBadge/MethodBadge.tsx b/packages/run-it/src/components/MethodBadge/MethodBadge.tsx
@@ -98,26 +98,30 @@ export const cssForIntent = (intent: ApixIntentNames) =>
     color: ${({ theme }) => generatePressed(theme.colors[intent])};
   `
 
-export const MethodBadge = styled.div<MethodBadgeProps>.attrs(
-  ({ fontSize = 'xsmall', fontWeight = 'semibold', minWidth = '2.5rem' }) => ({
+export const MethodBadge = styled.div.attrs(
+  ({
+    fontSize = 'xsmall',
+    fontWeight = 'semiBold',
+    minWidth = '2.5rem',
+  }: MethodBadgeProps) => ({
     fontSize,
     fontWeight,
     minWidth,
   })
-)`
-    ${typography}
+)<MethodBadgeProps>`
+  ${typography}
 
-    ${({ type }) => cssForIntent(pickBadgeIntent(type))};
+  ${({ type }) => cssForIntent(pickBadgeIntent(type))};
 
-    background: ${({ type, titleStatus, theme: { colors } }) =>
-      titleStatus ? colors.ui1 : intentUIBlend(pickBadgeIntent(type), 1)};
-    border: 1px solid transparent;
-    border-radius: ${({ theme: { radii } }) => radii.medium};
+  background: ${({ type, titleStatus, theme: { colors } }) =>
+    titleStatus ? colors.ui1 : intentUIBlend(pickBadgeIntent(type), 1)};
+  border: 1px solid transparent;
+  border-radius: ${({ theme: { radii } }) => radii.medium};
 
-    /** NOTE: This is below minimum accessibility threshold font-size */
-    ${({ compact }) => compact && `font-size: 9px;`}
+  /** NOTE: This is below minimum accessibility threshold font-size */
+  ${({ compact }) => compact && `font-size: 9px;`}
 
-    min-width: ${({ minWidth }) => minWidth};
-    padding: ${({ compact, theme: { space } }) =>
-      `${space.xxsmall} ${compact ? space.none : space.xsmall}`};
-  `
+  min-width: ${({ minWidth }) => minWidth};
+  padding: ${({ compact, theme: { space } }) =>
+    `${space.xxsmall} ${compact ? space.none : space.xsmall}`};
+`
diff --git a/packages/run-it/src/components/common/common.tsx b/packages/run-it/src/components/common/common.tsx
@@ -25,13 +25,16 @@
  */
 import styled from 'styled-components'
 import { Heading, Span } from '@looker/components'
+import type { HeadingProps } from '@looker/components'
 
 /**
  * Common styled components to be used across the whole library
  */
 
 export const RunItHeading = styled(Heading).attrs(
-  ({ mb = 'xsmall', pt = 'xsmall' }) => ({ mb, pt })
+  ({ mb = 'xsmall', pt = 'xsmall' }: HeadingProps) => ({ mb, pt })
 )``
 
-export const DarkSpan = styled(Span).attrs(({ color = 'text3' }) => ({ color }))
+export const DarkSpan = styled(Span).attrs(({ color = 'text3' }) => ({
+  color,
+}))``