Skip to content

/ brave-ui

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to V4 of styled-components #401

Closed
wants to merge 4 commits into from
+998 −943
Closed

Update to V4 of styled-components #401

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5977dcb
v4 styled components
Mar 2, 2019
d478805
snapshot update
Mar 2, 2019
e033db0
Snapshot update
Mar 14, 2019
46d1d8c
rebase syntax
Mar 14, 2019
File filter...
Filter file types
Jump to…
Jump to file
Failed to load files.

Always

Just for now

Next

v4 styled components

  • Loading branch information
Ross Moody
Ross Moody committed Mar 2, 2019
commit 5977dcb8b5520385695ab74bd8dfd6a51d9fc4b5
195 package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

13 package.json
View file
Open in desktop
@@ -48,8 +48,9 @@
},
"dependencies": {
"@ctrl/tinycolor": "^2.2.1",
"@types/styled-components": "^4.1.10",
"emptykit.css": "^1.0.1",
"styled-components": "^3.2.5"
"styled-components": "^4.1.3"
},
"devDependencies": {
"@babel/core": "^7.1.6",
@@ -80,12 +81,12 @@
"cpr": "^3.0.1",
"csstype": "^2.5.5",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-adapter-react-16": "^1.10.0",
"enzyme-to-json": "^3.3.4",
"fs-extra": "^2.1.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.1.0",
"jest-styled-components": "^5.0.1",
"jest-styled-components": "^6.3.1",
"lerna": "^2.0.0",
"ncp": "^2.0.0",
"pre-commit": "^1.2.2",
@@ -94,7 +95,7 @@
"react-beautiful-dnd": "^10.0.3",
"react-dom": "^16.3.0",
"react-storybook-addon-chapters": "^2.1.5",
"react-test-renderer": "^16.3.0",
"react-test-renderer": "^16.8.3",
"rimraf": "^2.6.2",
"storybook-addon-styled-component-theme": "^1.1.1",
"stylelint": "^9.4.0",
@@ -105,8 +106,8 @@
"tslint": "^5.8.0",
"tslint-config-standard": "^7.0.0",
"tslint-react": "^3.2.0",
"typescript": "^3.0.1",
"typescript-plugin-styled-components": "0.0.6"
"typescript": "^3.3.1",
"typescript-plugin-styled-components": "1.2.0"
},
"peerDependencies": {
"react": "^16.0.0"
6 src/components/buttonsIndicators/button/style.ts
View file
Open in desktop
@@ -63,7 +63,7 @@ const getThemeColors = (p: ThemedStyledProps<Props>) => {
`
}

const StyledButton = styled<Props, 'button'>('button')`
const StyledButton = styled.button<Props>`
${getThemeColors}
--button-state-color: var(--button-main-color);
--icon-size: ${largeMediumSmall('18px', '16px', '14px')};
@@ -110,7 +110,7 @@ export const TertiaryButton = styled(StyledButton)`
color: var(--button-state-color);
`

export const StyledText = styled<Props, 'div'>('div')`
export const StyledText = styled.div<Props>`
/* min-height so that we get consistent height with / without an icon */
min-height: var(--icon-size);
display: flex;
@@ -122,7 +122,7 @@ export const StyledText = styled<Props, 'div'>('div')`
line-height: 1;
`

export const StyledIcon = styled<Props, 'div'>('div')`
export const StyledIcon = styled.div<Props>`
display: block;
line-height: 0;
height: var(--icon-size);
10 src/components/dataTables/table/style.ts
View file
Open in desktop
@@ -5,19 +5,19 @@
import styled, { css } from 'styled-components'
import { Cell, Row } from './index'

export const StyledNoContent = styled<{}, 'div'>('div')`
export const StyledNoContent = styled.div`
text-align: center;
padding: 30px 0;
color: #999ea2;
font-size: 14px;
`

export const StyledTable = styled<{}, 'table'>('table')`
export const StyledTable = styled.table`
width: 100%;
margin-bottom: 20px;
`

export const StyledTH = styled<Partial<Cell>, 'th'>('th')`
export const StyledTH = styled.th<Partial<Cell>>`
text-transform: uppercase;
text-align: left;
font-family: Poppins, sans-serif;
@@ -37,7 +37,7 @@ export const StyledTH = styled<Partial<Cell>, 'th'>('th')`
};
`

export const StyledTR = styled<Partial<Row>, 'tr'>('tr')`
export const StyledTR = styled.tr<Partial<Row>>`
${p => p.customStyle
? css`
${p.customStyle}
@@ -46,7 +46,7 @@ export const StyledTR = styled<Partial<Row>, 'tr'>('tr')`
};
`

export const StyledTD = styled<Partial<Cell>, 'td'>('td')`
export const StyledTD = styled.td<Partial<Cell>>`
font-family: Muli, sans-serif;
font-size: 14px;
font-weight: 500;
6 src/components/formControls/checkbox/style.ts
View file
Open in desktop
@@ -56,7 +56,7 @@ const getLabel = (p: Partial<StyleProps>) => {
`
}

export const StyledLabel = styled<Partial<StyleProps>, 'div'>('div')`
export const StyledLabel = styled.div<Partial<StyleProps>>`
font-family: Poppins, sans-serif;
line-height: 1.3;
display: flex;
@@ -67,7 +67,7 @@ export const StyledLabel = styled<Partial<StyleProps>, 'div'>('div')`
cursor: pointer;
`

export const StyledBox = styled<Partial<StyleProps>, 'span'>('span')`
export const StyledBox = styled.span<Partial<StyleProps>>`
border-radius: 2px;
text-align: center;
display: flex;
@@ -83,7 +83,7 @@ export const StyledBox = styled<Partial<StyleProps>, 'span'>('span')`
margin-right: var(--checkbox-box-spacing);
`

export const StyledText = styled<Partial<StyleProps>, 'span'>('span')`
export const StyledText = styled.span<Partial<StyleProps>>`
flex: 1;
padding-top: ${(p) => p.size === 'big' ? '2px' : '1px'};
letter-spacing: 0;
4 src/components/formControls/controlWrapper/style.ts
View file
Open in desktop
@@ -25,12 +25,12 @@ const getColor = (p: Partial<Props>) => {
`
}

export const StyledWrapper = styled<{}, 'div'>('div')`
export const StyledWrapper = styled.div`
width: 100%;
margin-bottom: 12px;
`

export const StyledLabel = styled<Partial<Props>, 'div'>('div')`
export const StyledLabel = styled.div<Partial<Props>>`
width: 100%;
font-family: Poppins, sans-serif;
line-height: normal;
6 src/components/formControls/input/style.ts
View file
Open in desktop
@@ -6,7 +6,7 @@ import styled from 'styled-components'
import theme from '../../../theme/brave-default'
import { InputProps } from './index'

export const InputComponent = styled<InputProps, 'div'>('div')`
export const InputComponent = styled.div<InputProps>`
background-color: #fff;
min-height: auto;
box-sizing: border-box;
@@ -20,15 +20,15 @@ export const InputComponent = styled<InputProps, 'div'>('div')`
}
`

export const StyledIcon = styled<{}, 'div'>('div')`
export const StyledIcon = styled.div`
display: inline-block;
vertical-align: middle;
width: 20px;
margin-right: 10px;
color: #D1D1DB;
`

export const StyledInput = styled<InputProps, 'input'>('input')`
export const StyledInput = styled.input<InputProps>`
display: inline-block;
vertical-align: middle;
min-height: auto;
10 src/components/formControls/radio/style.ts
View file
Open in desktop
@@ -47,7 +47,7 @@ const getThemeColors = (p: ThemedStyledProps<StyleProps>, selected: boolean | un
`
}

export const StyledLabel = styled<StyleProps, 'label'>('label')`
export const StyledLabel = styled.label<StyleProps>`
${p => getThemeSizes(p)}
line-height: 1.3;
display: flex;
@@ -56,12 +56,12 @@ export const StyledLabel = styled<StyleProps, 'label'>('label')`
cursor: pointer;
`

export const StyledInput = styled<{}, 'input'>('input')`
export const StyledInput = styled.input`
opacity: 0;
position: absolute;
`

export const StyledCircle = styled<StyleProps, 'span'>('span')`
export const StyledCircle = styled.span<StyleProps>`
${p => getThemeSizes(p)}
${p => getThemeColors(p, p.selected)}
text-align: center;
@@ -76,7 +76,7 @@ export const StyledCircle = styled<StyleProps, 'span'>('span')`
border-radius: 50%;
`

export const StyledFill = styled<StyleProps, 'div'>('div')`
export const StyledFill = styled.div<StyleProps>`
${p => getThemeSizes(p)}
${p => getThemeColors(p, p.selected)}
width: var(--radio-fill-size);
@@ -85,7 +85,7 @@ export const StyledFill = styled<StyleProps, 'div'>('div')`
background: var(--radio-fill-color);
`

export const StyledText = styled<StyleProps, 'span'>('span')`
export const StyledText = styled.span<StyleProps>`
flex: 1;
letter-spacing: 0;
display: flex;
28 src/components/formControls/select/style.ts
View file
Open in desktop
@@ -45,17 +45,17 @@ interface StyleProps extends Props {
showAllContents?: boolean
}

export const StyledWrapper = styled<StyleProps, 'div'>('div')`
export const StyledWrapper = styled.div<StyleProps>`
width: 100%;
`

export const StyledSelectWrapper = styled<StyleProps, 'div'>('div')`
export const StyledSelectWrapper = styled.div<StyleProps>`
position: relative;
outline: 0;
font-family: Muli, sans-serif;
`

export const StyledSelect = styled<StyleProps, 'div'>('div')`
export const StyledSelect = styled.div<StyleProps>`
border-radius: 3px;
font-size: 14px;
width: 100%;
@@ -67,23 +67,23 @@ export const StyledSelect = styled<StyleProps, 'div'>('div')`
border: var(--select-select-border);
`

export const StyledSelectArrow = styled<StyleProps, 'div'>('div')`
export const StyledSelectArrow = styled.div<StyleProps>`
margin-right: ${p => p.floating ? -9 : 15}px;
flex-basis: 33px;
flex-shrink: 0;
height: 11px;
margin-top: ${p => p.floating ? -5 : 0}px;
`

export const StyledSelectText = styled<StyleProps, 'div'>('div')`
export const StyledSelectText = styled.div<StyleProps>`
flex-grow: 1;
padding: ${p => p.floating ? 0 : '0 5px 0 13px'};
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`

export const StyledOptions = styled<StyleProps, 'div'>('div')`
export const StyledOptions = styled.div<StyleProps>`
position: absolute;
top: calc(100% + 4px);
left: 0;
@@ -98,7 +98,7 @@ export const StyledOptions = styled<StyleProps, 'div'>('div')`
padding: 9px 0;
`

export const StyledOption = styled<StyleProps, 'div'>('div')`
export const StyledOption = styled.div<StyleProps>`
font-size: 14px;
line-height: 36px;
color: #1b1d2f;
@@ -108,23 +108,23 @@ export const StyledOption = styled<StyleProps, 'div'>('div')`
background: ${p => p.selected ? '#e9f0ff' : '#fff'};
`

export const StyledOptionCheck = styled<StyleProps, 'div'>('div')`
export const StyledOptionCheck = styled.div<StyleProps>`
flex-basis: 11px;
flex-shrink: 0;
display: flex;
align-items: center;
color: #A1A8F2;
`

export const StyledOptionText = styled<StyleProps, 'div'>('div')`
export const StyledOptionText = styled.div<StyleProps>`
flex-grow: 1;
padding: 0 21px 0 6px;
overflow: hidden;
white-space: nowrap;
text-overflow: ${p => p.showAllContents ? 'initial' : 'ellipsis'};
`

export const StyledOptionsOverlay = styled<StyleProps, 'div'>('div')`
export const StyledOptionsOverlay = styled.div<StyleProps>`
display: flex;
position: fixed;
top: 0;
@@ -137,7 +137,7 @@ export const StyledOptionsOverlay = styled<StyleProps, 'div'>('div')`
justify-content: center;
`

export const StyledOptionsModal = styled<StyleProps, 'div'>('div')`
export const StyledOptionsModal = styled.div<StyleProps>`
border-radius: 7px;
background: ${p => p.theme.color.primaryBackground};
height: 30%;
@@ -162,7 +162,7 @@ export const StyledOptionsModal = styled<StyleProps, 'div'>('div')`
}
`

export const StyledSelectTitle = styled<StyleProps, 'span'>('span')`
export const StyledSelectTitle = styled.span<StyleProps>`
color: ${p => p.theme.color.defaultControlActive};
display: block;
font-size: 16px;
@@ -173,11 +173,11 @@ export const StyledSelectTitle = styled<StyleProps, 'span'>('span')`
text-align: left;
`

export const StyledModalContent = styled<StyleProps, 'div'>('div')`
export const StyledModalContent = styled.div<StyleProps>`
display: block;
`

export const StyledRadioOptions = styled<StyleProps, 'div'>('div')`
export const StyledRadioOptions = styled.div<StyleProps>`
display: block;
max-height: 250px;
overflow-y: scroll;
4 src/components/formControls/textarea/style.ts
View file
Open in desktop
@@ -19,11 +19,11 @@ const getBorder = (p: Props) => {
return color
}

export const StyledWrapper = styled<{}, 'div'>('div')`
export const StyledWrapper = styled.div`
width: 100%;
`

export const StyledArea = styled<Props, 'textarea'>('textarea')`
export const StyledArea = styled.textarea<Props>`
min-height: 140px;
box-sizing: border-box;
width: 100%;
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.