Merge pull request #579 from brave/styled-components-fixes

brave · Mar 11, 2021 · e2bf894 · e2bf894
2 parents 161da1d + 03e29c6
commit e2bf894
Show file tree

Hide file tree

Showing 21 changed files with 185 additions and 155 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "brave-ui",
   "main": "index.js",
   "sideEffects": false,
-  "version": "0.34.4",
+  "version": "0.39.0",
   "description": "List of reusable React components to empower your brave UI",
   "author": "Brave Software",
   "contributors": [

diff --git a/package/package.json b/package/package.json
@@ -2,7 +2,7 @@
   "name": "brave-ui",
   "main": "index.js",
   "sideEffects": false,
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "List of reusable React components to empower your brave UI",
   "author": "Brave Software",
   "contributors": [

diff --git a/src/components/buttonsIndicators/button/style.ts b/src/components/buttonsIndicators/button/style.ts
@@ -2,7 +2,7 @@
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import styled, { css, ThemedStyledProps } from '../../../theme'
+import styled, { css, StyledProps } from 'styled-components'
 import { Props } from './index'
 
 function largeMediumSmall (largeValue: any, mediumValue: any, smallValue: any, ctaValue?: any) {
@@ -20,7 +20,7 @@ function largeMediumSmall (largeValue: any, mediumValue: any, smallValue: any, c
   }
 }
 
-const getThemeColors = (p: ThemedStyledProps<Props>) => {
+const getThemeColors = (p: StyledProps<Props>) => {
   let mainColor
   let hoverColor
   let activeColor

diff --git a/src/old/contentToggleArrow/style.ts b/src/old/contentToggleArrow/style.ts
@@ -3,17 +3,21 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
-import { ContentToggleArrowState } from './index'
 
-const StyledContentToggleArrow = styled.div`
+type ContentArrowProps = {
+  open?: boolean
+  withSeparator?: boolean
+}
+
+const StyledContentToggleArrow = styled.div<ContentArrowProps>`
   box-sizing: border-box;
   width: fill-available;
   color: inherit;
   font-size: inherit;
   font-family: inherit;
 `
 
-const StyledContentToggleArrowControl = styled.div`
+const StyledContentToggleArrowControl = styled.div<ContentArrowProps>`
   box-sizing: border-box;
   position: relative;
   color: inherit;
@@ -22,7 +26,7 @@ const StyledContentToggleArrowControl = styled.div`
   user-select: none;
 
   &::after {
-    content: ${(s: ContentToggleArrowState) => s.open ? '"▼"' : '"▶"'};
+    content: ${(s: ContentArrowProps) => s.open ? '"▼"' : '"▶"'};
     font-size: 12px;
     display: flex;
     align-items: center;
@@ -41,13 +45,13 @@ const StyledContentToggleArrowSummary = styled.div`
   margin-left: 15px;
 `
 
-const StyledContentToggleArrowContent = styled.div`
+const StyledContentToggleArrowContent = styled.div<ContentArrowProps>`
   box-sizing: border-box;
   color: inherit;
   font-size: inherit;
   font-family: inherit;
-  overflow: ${(s: ContentToggleArrowState) => s.open ? 'auto' : 'hidden'};
-  height: ${(s: ContentToggleArrowState) => s.open ? 'fit-content' : '0'};
+  overflow: ${(s) => s.open ? 'auto' : 'hidden'};
+  height: ${(s) => s.open ? 'fit-content' : '0'};
   width: fill-available;
 `
 

diff --git a/src/old/dataBlock/index.tsx b/src/old/dataBlock/index.tsx
@@ -5,12 +5,13 @@ import {
   StyledDataItem,
   StyledDataItemCounter,
   StyledDataItemText,
-  StyledDataItemDescription
+  StyledDataItemDescription,
+  StyleProps,
+  ItemStyleProps
 } from './style'
 
-export interface DataProps {
+export type DataProps = StyleProps & {
   id?: string
-  asList?: boolean
   children?: React.ReactNode
 }
 
@@ -22,20 +23,13 @@ class DataBlock extends React.PureComponent<DataProps, {}> {
     )
   }
 }
-export interface DataItemTheme {
-  counterColor?: string
-  descriptionColor?: string
-  userSelect?: string
-}
 
-export interface DataItemProps {
+export type DataItemProps = ItemStyleProps & {
   id?: string
   counter?: string | number
   text?: string
   description?: string
-  size?: 'medium' | 'small'
   onClick?: (e: any) => void
-  customStyle?: DataItemTheme
 }
 
 class DataItem extends React.PureComponent<DataItemProps, {}> {

diff --git a/src/old/dataBlock/style.ts b/src/old/dataBlock/style.ts
@@ -3,14 +3,29 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
-import { DataProps, DataItemProps } from './index'
 import { setValueBasedOnSize, setTheme } from '../../helpers'
 
+type DataItemTheme = {
+  counterColor?: string
+  descriptionColor?: string
+  userSelect?: string
+}
+
+export type StyleProps = {
+  asList?: boolean
+}
+
+export type ItemStyleProps = {
+  size?: 'medium' | 'small'
+  customStyle?: DataItemTheme
+  asList?: boolean
+}
+
 // s/Data/data
 
-const StyledDataBlock = styled.ul`
+const StyledDataBlock = styled.ul<StyleProps>`
   box-sizing: border-box;
-  display: ${(p: DataProps) => !p.asList ? 'inline-block' : 'block'};
+  display: ${(p) => !p.asList ? 'inline-block' : 'block'};
   -webkit-font-smoothing: antialiased;
   font-weight: 400;
   margin: 0;
@@ -20,29 +35,29 @@ const StyledDataBlock = styled.ul`
   font-family: inherit;
 
   & > li {
-    display: ${(p: DataProps) => p.asList ? 'flex' : 'inline-block'};
-    align-items: ${(p: DataProps) => p.asList ? 'center' : null};
-    min-height: ${(p: DataProps) => p.asList ? '30px' : null};
-    margin-right: ${(p: DataProps) => p.asList ? '0' : '40px'};
-    margin-bottom: ${(p: DataProps) => p.asList ? '0' : '20px'};
+    display: ${(p) => p.asList ? 'flex' : 'inline-block'};
+    align-items: ${(p) => p.asList ? 'center' : null};
+    min-height: ${(p) => p.asList ? '30px' : null};
+    margin-right: ${(p) => p.asList ? '0' : '40px'};
+    margin-bottom: ${(p) => p.asList ? '0' : '20px'};
   }
 `
 
-const StyledDataItem = styled.li`
-  user-select: ${(p: DataItemProps) => setTheme(p.customStyle, 'userSelect') || 'auto'};
+const StyledDataItem = styled.li<ItemStyleProps>`
+  user-select: ${(p) => setTheme(p.customStyle, 'userSelect') || 'auto'};
   box-sizing: border-box;
   vertical-align: middle;
   list-style-type: none;
   font-size: inherit;
   font-family: inherit;
 `
 
-const StyledDataItemCounter = styled.span`
-  color: ${(p: DataItemProps) => setTheme(p.customStyle, 'counterColor') || 'inherit'};
-  font-size: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '44px', '26px', undefined)};
-  line-height: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '52px', '24px', undefined)};
-  width: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '7ch', '3ch', undefined)};
-  text-align: ${(p: DataItemProps) => p.size === 'small' ? 'right' : 'inherit'};
+const StyledDataItemCounter = styled.span<ItemStyleProps>`
+  color: ${(p) => setTheme(p.customStyle, 'counterColor') || 'inherit'};
+  font-size: ${(p) => setValueBasedOnSize(p.size, '44px', '26px', undefined)};
+  line-height: ${(p) => setValueBasedOnSize(p.size, '52px', '24px', undefined)};
+  width: ${(p) => setValueBasedOnSize(p.size, '7ch', '3ch', undefined)};
+  text-align: ${(p) => p.size === 'small' ? 'right' : 'inherit'};
   box-sizing: border-box;
   letter-spacing: -0.4px;
   font-family: inherit;
@@ -51,24 +66,24 @@ const StyledDataItemCounter = styled.span`
   overflow: hidden;
 `
 
-const StyledDataItemText = styled.span`
-  color: ${(p: DataItemProps) => setTheme(p.customStyle, 'counterColor') || 'inherit'};
-  font-size: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '20px', '13px', undefined)};
-  line-height: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '24px', '16px', undefined)};
-  margin-left: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '3px', '10px', undefined)};
+const StyledDataItemText = styled.span<ItemStyleProps>`
+  color: ${(p) => setTheme(p.customStyle, 'counterColor') || 'inherit'};
+  font-size: ${(p) => setValueBasedOnSize(p.size, '20px', '13px', undefined)};
+  line-height: ${(p) => setValueBasedOnSize(p.size, '24px', '16px', undefined)};
+  margin-left: ${(p) => setValueBasedOnSize(p.size, '3px', '10px', undefined)};
   box-sizing: border-box;
   display: inline;
   font-family: inherit;
   letter-spacing: 0;
 `
 
-const StyledDataItemDescription = styled.div`
+const StyledDataItemDescription = styled.div<ItemStyleProps>`
   box-sizing: border-box;
   font-size: 13px;
-  line-height: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '24px', '16px', undefined)};
+  line-height: ${(p) => setValueBasedOnSize(p.size, '24px', '16px', undefined)};
   font-family: inherit;
-  color: ${(p: DataItemProps) => setTheme(p.customStyle, 'descriptionColor') || 'inherit'};
-  margin-left: ${(p: DataItemProps) => setValueBasedOnSize(p.size, '3px', '1ch', undefined)};
+  color: ${(p) => setTheme(p.customStyle, 'descriptionColor') || 'inherit'};
+  margin-left: ${(p) => setValueBasedOnSize(p.size, '3px', '1ch', undefined)};
 `
 
 export {

diff --git a/src/old/headings/index.tsx b/src/old/headings/index.tsx
@@ -10,7 +10,8 @@ import {
   StyledH3,
   StyledH4,
   StyledH5,
-  StyledH6
+  StyledH6,
+  StyleProps
 } from './style'
 
 export interface TitleHeadingProps {
@@ -63,18 +64,10 @@ class FeatureHeading extends React.PureComponent<FeatureHeadingProps, {}> {
   }
 }
 
-export interface HeadingTheme {
-  color?: string
-  fontFamily?: string
-  fontWeight?: string
-  margin?: string
-}
-
-export interface HeadingProps {
+export type HeadingProps = StyleProps & {
   id?: string
   level?: 1 | 2 | 3 | 4 | 5 | 6
   text?: string
-  customStyle?: HeadingTheme
 }
 
 class Heading extends React.PureComponent<HeadingProps, {}> {

diff --git a/src/old/headings/style.ts b/src/old/headings/style.ts
@@ -3,12 +3,23 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled from 'styled-components'
-import { HeadingProps } from './index'
 import { setTheme } from '../../helpers'
+import { CustomStyleProps } from '..'
+
+interface HeadingTheme {
+  color?: string
+  fontFamily?: string
+  fontWeight?: string
+  margin?: string
+}
+
+export type StyleProps = {
+  customStyle?: HeadingTheme
+}
 
 // All feature-based text inherits from StyledSharedHeading
 // which excludes normal h1...h6 headings
-const StyledSharedHeading = styled.span`
+const StyledSharedHeading = styled.span<CustomStyleProps>`
   box-sizing: border-box;
   font-family: inherit;
   color: inherit;
@@ -46,35 +57,35 @@ const StyledFeatureHeading = styled(StyledSharedHeading.withComponent('h2'))`
   min-width: 160px;
 `
 
-const StyledH1 = styled.h1`
+const StyledH1 = styled.h1<StyleProps>`
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  color: ${(p: HeadingProps) => setTheme(p.customStyle, 'color')};
-  font-weight: ${(p: HeadingProps) => setTheme(p.customStyle, 'fontWeight') || '400'};
-  font-family: ${(p: HeadingProps) => setTheme(p.customStyle, 'fontFamily') || 'inherit'};
-  margin: ${(p: HeadingProps) => setTheme(p.customStyle, 'margin') || '14px 0 22px'};
-  font-size: ${(p: HeadingProps) => setTheme(p.customStyle, 'fontSize') || '30px'};
-  text-align: ${(p: HeadingProps) => setTheme(p.customStyle, 'textAlign') || 'left'};
-  line-height: ${(p: HeadingProps) => setTheme(p.customStyle, 'lineHeight') || '44px'};
+  color: ${(p) => setTheme(p.customStyle, 'color')};
+  font-weight: ${(p) => setTheme(p.customStyle, 'fontWeight') || '400'};
+  font-family: ${(p) => setTheme(p.customStyle, 'fontFamily') || 'inherit'};
+  margin: ${(p) => setTheme(p.customStyle, 'margin') || '14px 0 22px'};
+  font-size: ${(p) => setTheme(p.customStyle, 'fontSize') || '30px'};
+  text-align: ${(p) => setTheme(p.customStyle, 'textAlign') || 'left'};
+  line-height: ${(p) => setTheme(p.customStyle, 'lineHeight') || '44px'};
 `
 
-const StyledH2 = styled.h2`
+const StyledH2 = styled.h2<StyleProps>`
   /* TBD */
 `
 
-const StyledH3 = styled.h3`
+const StyledH3 = styled.h3<StyleProps>`
   /* TBD */
 `
 
-const StyledH4 = styled.h4`
+const StyledH4 = styled.h4<StyleProps>`
   /* TBD */
 `
 
-const StyledH5 = styled.h5`
+const StyledH5 = styled.h5<StyleProps>`
   /* TBD */
 `
 
-const StyledH6 = styled.h6`
+const StyledH6 = styled.h6<StyleProps>`
   /* TBD */
 `
 

diff --git a/src/old/index.ts b/src/old/index.ts
@@ -1,7 +1,8 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
+* License, v. 2.0. If a copy of the MPL was not distributed with this file,
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { CSSObject } from 'styled-components'
 import Anchor from './anchor'
 import BoxedContent from './boxedContent'
 import ContentToggleArrow from './contentToggleArrow'
@@ -17,10 +18,16 @@ import UnstyledButton from './unstyledButton'
 import { DataBlock, DataItem } from './dataBlock'
 import { TitleHeading, SectionHeading, FeatureHeading, Heading } from './headings'
 
+// Deprecated, do not use!
+type CustomStyleProps = {
+  customStyle?: CSSObject
+}
+
 export {
   Anchor,
   BoxedContent,
   ContentToggleArrow,
+  CustomStyleProps,
   DataBlock,
   DataItem,
   FeatureHeading,

diff --git a/src/old/mediaContent/style.ts b/src/old/mediaContent/style.ts
@@ -15,14 +15,14 @@ const StyledMediaContent = styled.div`
   color: inherit;
 `
 
-const StyledMedia = styled.img`
+const StyledMedia = styled.img<MediaContentProps>`
   width: ${(p: MediaContentProps) => setTheme(p.customStyle, 'width')};
   box-sizing: border-box;
   display: block;
   max-width: 100%;
 `
 
-const StyledMediaBody = styled.div`
+const StyledMediaBody = styled.div<MediaContentProps>`
   box-sizing: border-box;
   margin: ${(p: MediaContentProps) => setTheme(p.customStyle, 'margin')};
   font-weight: inherit;