diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx index 1c5ee4e8480e..5f0c1fffb61f 100644 --- a/addons/a11y/src/components/A11YPanel.tsx +++ b/addons/a11y/src/components/A11YPanel.tsx @@ -34,15 +34,15 @@ const Icon = styled(Icons)( : {} ); -const Passes = styled.span(({ theme }) => ({ +const Passes = styled.span<{}>(({ theme }) => ({ color: theme.color.positive, })); -const Violations = styled.span(({ theme }) => ({ +const Violations = styled.span<{}>(({ theme }) => ({ color: theme.color.negative, })); -const Incomplete = styled.span(({ theme }) => ({ +const Incomplete = styled.span<{}>(({ theme }) => ({ color: theme.color.warning, })); diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx index a2b1c0576caf..ce713ec948a8 100644 --- a/addons/a11y/src/components/Report/Elements.tsx +++ b/addons/a11y/src/components/Report/Elements.tsx @@ -11,7 +11,7 @@ const Item = styled.li({ fontWeight: 600, }); -const ItemTitle = styled.span(({ theme }) => ({ +const ItemTitle = styled.span<{}>(({ theme }) => ({ borderBottom: `1px solid ${theme.appBorderColor}`, width: '100%', display: 'flex', diff --git a/addons/a11y/src/components/Report/HighlightToggle.tsx b/addons/a11y/src/components/Report/HighlightToggle.tsx index 260a4d859268..bb58a5afb289 100644 --- a/addons/a11y/src/components/Report/HighlightToggle.tsx +++ b/addons/a11y/src/components/Report/HighlightToggle.tsx @@ -31,7 +31,7 @@ enum CheckBoxStates { INDETERMINATE, } -const Checkbox = styled.input(({ disabled }) => ({ +const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({ cursor: disabled ? 'not-allowed' : 'pointer', })); diff --git a/addons/a11y/src/components/Report/Item.tsx b/addons/a11y/src/components/Report/Item.tsx index d1303153439f..9dce767928b1 100644 --- a/addons/a11y/src/components/Report/Item.tsx +++ b/addons/a11y/src/components/Report/Item.tsx @@ -10,7 +10,7 @@ import { Tags } from './Tags'; import { RuleType } from '../A11YPanel'; import HighlightToggle from './HighlightToggle'; -const Wrapper = styled.div(({ theme }) => ({ +const Wrapper = styled.div<{}>(({ theme }) => ({ display: 'flex', width: '100%', borderBottom: `1px solid ${theme.appBorderColor}`, @@ -30,7 +30,7 @@ const Icon = styled(Icons)(({ theme }) => ({ display: 'inline-flex', })); -const HeaderBar = styled.div(({ theme }) => ({ +const HeaderBar = styled.div<{}>(({ theme }) => ({ padding: theme.layoutMargin, paddingLeft: theme.layoutMargin - 3, background: 'none', diff --git a/addons/a11y/src/components/Report/Tags.tsx b/addons/a11y/src/components/Report/Tags.tsx index 559a31ee79fa..62968af6aa31 100644 --- a/addons/a11y/src/components/Report/Tags.tsx +++ b/addons/a11y/src/components/Report/Tags.tsx @@ -9,7 +9,7 @@ const Wrapper = styled.div({ margin: '12px 0', }); -const Item = styled.div(({ theme }) => ({ +const Item = styled.div<{}>(({ theme }) => ({ margin: '0 6px', padding: '5px', border: `1px solid ${theme.appBorderColor}`, diff --git a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap index 55b405353d8b..870f33c87f55 100644 --- a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap +++ b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap @@ -321,7 +321,7 @@ exports[`HighlightToggle component should match snapshot 1`] = ` } } > - + - + diff --git a/addons/a11y/src/components/Tabs.tsx b/addons/a11y/src/components/Tabs.tsx index c89a68ef1612..4ebeac7c4900 100644 --- a/addons/a11y/src/components/Tabs.tsx +++ b/addons/a11y/src/components/Tabs.tsx @@ -15,7 +15,7 @@ const Container = styled.div({ minHeight: '100%', }); -const HighlightToggleLabel = styled.label(({ theme }) => ({ +const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({ cursor: 'pointer', userSelect: 'none', marginBottom: '3px', @@ -77,7 +77,7 @@ const Item = styled.button( const TabsWrapper = styled.div({}); -const List = styled.div(({ theme }) => ({ +const List = styled.div<{}>(({ theme }) => ({ boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, background: 'rgba(0, 0, 0, .05)', display: 'flex', diff --git a/addons/actions/src/components/ActionLogger/style.tsx b/addons/actions/src/components/ActionLogger/style.tsx index 6fb7d0d34983..54abfbec1566 100644 --- a/addons/actions/src/components/ActionLogger/style.tsx +++ b/addons/actions/src/components/ActionLogger/style.tsx @@ -10,7 +10,7 @@ export const Action = styled.div({ alignItems: 'flex-start', }); -export const Counter = styled.div(({ theme }) => ({ +export const Counter = styled.div<{}>(({ theme }) => ({ backgroundColor: opacify(0.5, theme.appBorderColor), color: theme.color.inverseText, fontSize: theme.typography.size.s1, diff --git a/addons/events/src/components/Event.tsx b/addons/events/src/components/Event.tsx index fec6b93aae8f..6ccaba9d6bc1 100644 --- a/addons/events/src/components/Event.tsx +++ b/addons/events/src/components/Event.tsx @@ -17,7 +17,7 @@ interface StyledTextareaProps { const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (