Merge branch 'main' into jax/headless-nav-toggle

looker-open-source · Oct 15, 2021 · 2e5d1e2 · 2e5d1e2
2 parents 387967a + b63644b
commit 2e5d1e2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 55 deletions.
diff --git a/packages/code-editor/src/Markdown/common.tsx b/packages/code-editor/src/Markdown/common.tsx
@@ -26,29 +26,28 @@
 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 = Object.assign(styled(Heading)``, {
-  defaultProps: {
-    mb: 'xsmall',
-    pt: 'xsmall',
-  },
-})
+export const MDHeading = styled(Heading).attrs(
+  ({ mb = 'xsmall', pt = 'xsmall' }: HeadingProps) => ({ mb, pt })
+)<HeadingProps>``
 
-export const MDParagraph = Object.assign(
-  styled(Paragraph)`
-    color: ${({ theme }) => theme.colors.text5};
-    max-width: 600px;
-  `,
-  {
-    defaultProps: {
-      mb: 'large',
-    },
-  }
-)
+export const MDParagraph = styled(Paragraph).attrs(
+  ({ mb = 'large' }: ParagraphProps) => ({
+    mb,
+  })
+)`
+  color: ${({ theme }) => theme.colors.text5};
+  max-width: 600px;
+`
 
 const OListInternal = styled.ol`
   max-width: 600px;
@@ -69,6 +68,6 @@ export const MDListItem = styled.li`
   margin-bottom: 4px;
 `
 
-export const MDTable = Object.assign(styled(Table)``, {
-  defaultProps: { mb: 'large' },
-})
+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,29 +98,30 @@ export const cssForIntent = (intent: ApixIntentNames) =>
     color: ${({ theme }) => generatePressed(theme.colors[intent])};
   `
 
-export const MethodBadge = Object.assign(
-  styled.div<MethodBadgeProps>`
-    ${typography}
-
-    ${({ 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};
-
-    /** 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}`};
-  `,
-  {
-    defaultProps: {
-      fontSize: 'xsmall',
-      fontWeight: 'semiBold',
-      minWidth: '2.5rem',
-    },
-  }
-)
+export const MethodBadge = styled.div.attrs(
+  ({
+    fontSize = 'xsmall',
+    fontWeight = 'semiBold',
+    minWidth = '2.5rem',
+  }: MethodBadgeProps) => ({
+    fontSize,
+    fontWeight,
+    minWidth,
+  })
+)<MethodBadgeProps>`
+  ${typography}
+
+  ${({ 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};
+
+  /** 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}`};
+`
diff --git a/packages/run-it/src/components/common/common.tsx b/packages/run-it/src/components/common/common.tsx
@@ -25,18 +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 = Object.assign(styled(Heading)``, {
-  defaultProps: {
-    mb: 'xsmall',
-    pt: 'xsmall',
-  },
-})
+export const RunItHeading = styled(Heading).attrs(
+  ({ mb = 'xsmall', pt = 'xsmall' }: HeadingProps) => ({ mb, pt })
+)``
 
-export const DarkSpan = Object.assign(styled(Span)``, {
-  color: 'text3',
-})
+export const DarkSpan = styled(Span).attrs(({ color = 'text3' }) => ({
+  color,
+}))``