From b63644b4d53aa77a8fc2c75be78b60c39ea46c6d Mon Sep 17 00:00:00 2001
From: Joseph Axisa <jax@looker.com>
Date: Fri, 15 Oct 2021 17:46:17 +0100
Subject: [PATCH] chore: use attrs instead of Object.assign with styled
 components (#861)

Co-authored-by: Luke Bowerman <lukebowerman@google.com>
---
 packages/code-editor/src/Markdown/common.tsx  | 39 +++++++-------
 .../components/MethodBadge/MethodBadge.tsx    | 53 ++++++++++---------
 .../run-it/src/components/common/common.tsx   | 16 +++---
 3 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/packages/code-editor/src/Markdown/common.tsx b/packages/code-editor/src/Markdown/common.tsx
index 02e3a695c..8e8e49385 100644
--- 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
index 83b659ab8..1ac120332 100644
--- 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
index 3ce6eae77..9820c08a2 100644
--- 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,
+}))``