From ed20ac12986ea3e5d34195f468686cd5c3332377 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Sun, 18 Mar 2018 11:13:08 +0200 Subject: [PATCH] fix: prefer extend of styled to make styles more predictable --- src/common-elements/dropdown.ts | 6 +++--- src/common-elements/fields.ts | 16 ++++++++-------- src/common-elements/panels.ts | 4 ++-- src/common-elements/tabs.ts | 2 +- src/components/Operation/Operation.tsx | 2 +- src/components/PayloadSamples/styled.elements.ts | 12 ++++++++++-- .../SecurityRequirement/SecuirityRequirement.tsx | 2 +- .../StickySidebar/StickyResponsiveSidebar.tsx | 10 ++++++++-- src/styled-components.ts | 1 + 9 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts index b122fd2c52..70fe654ad7 100644 --- a/src/common-elements/dropdown.ts +++ b/src/common-elements/dropdown.ts @@ -1,6 +1,6 @@ import Dropdown from 'react-dropdown'; -import styled, { withProps } from '../styled-components'; +import styled, { withProps, StyledComponentClass } from '../styled-components'; export interface DropdownOption { label: string; @@ -87,9 +87,9 @@ export const StyledDropdown = withProps(styled(Dropdown))` background-color: rgba(38, 50, 56, 0.12) } } -` as React.ComponentClass; +` as StyledComponentClass; -export const SimpleDropdown = styled(StyledDropdown)` +export const SimpleDropdown = StyledDropdown.extend` margin-left: 10px; text-transform: none; font-size: 0.929em; diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 0920fccea4..6d04d355db 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -12,20 +12,20 @@ export const FieldLabel = styled.span` line-height: 20px; `; -export const TypePrefix = styled(FieldLabel)` +export const TypePrefix = FieldLabel.extend` color: ${props => transparentize(0.4, props.theme.colors.text)}; `; -export const TypeName = styled(FieldLabel)` +export const TypeName = FieldLabel.extend` color: ${props => transparentize(0.8, props.theme.colors.text)}; `; -export const TypeTitle = styled(FieldLabel)` +export const TypeTitle = FieldLabel.extend` color: ${props => transparentize(0.5, props.theme.colors.text)}; `; export const TypeFormat = TypeName; -export const RequiredLabel = styled(FieldLabel.withComponent('div'))` +export const RequiredLabel = FieldLabel.withComponent('div').extend` color: #e53935; font-size: 11px; font-weight: normal; @@ -34,17 +34,17 @@ export const RequiredLabel = styled(FieldLabel.withComponent('div'))` font-weight: normal; `; -export const RecursiveLabel = styled(FieldLabel)` +export const RecursiveLabel = FieldLabel.extend` color: #dd9900; font-size: 13px; `; -export const NullableLabel = styled(FieldLabel)` +export const NullableLabel = FieldLabel.extend` color: #3195a6; font-size: 13px; `; -export const PatternLabel = styled(FieldLabel)` +export const PatternLabel = FieldLabel.extend` color: #3195a6; &::before, &::after { @@ -69,7 +69,7 @@ export const ExampleValue = styled.span` vertical-align: middle; `; -export const ConstraintItem = styled(FieldLabel)` +export const ConstraintItem = FieldLabel.extend` background-color: ${props => transparentize(0.85, props.theme.colors.main)}; color: ${props => transparentize(0.4, props.theme.colors.main)}; margin-right: 6px; diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index 4f66e09a63..91ac574e9a 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -20,11 +20,11 @@ export const RightPanel = styled.div` `}; `; -export const DarkRightPanel = styled(RightPanel)` +export const DarkRightPanel = RightPanel.extend` background-color: ${props => props.theme.rightPanel.backgroundColor}; `; -export const EmptyDarkRightPanel = styled(DarkRightPanel)` +export const EmptyDarkRightPanel = DarkRightPanel.extend` ${media.lessThan('medium')` padding: 0 `}; diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts index 3a286b464a..c52a0b6d51 100644 --- a/src/common-elements/tabs.ts +++ b/src/common-elements/tabs.ts @@ -60,7 +60,7 @@ export const Tabs = styled(ReactTabs)` } `; -export const SmallTabs = styled(Tabs)` +export const SmallTabs = Tabs.extend` > ul { display: block; > li { diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 7deef2ee82..060966d8b7 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -18,7 +18,7 @@ import { ResponseSamples } from '../ResponseSamples/ResponseSamples'; import { OperationModel as OperationType } from '../../services/models'; -const OperationRow = styled(Row)` +const OperationRow = Row.extend` backface-visibility: hidden; contain: content; diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts index aa7f3e43a1..31334f2835 100644 --- a/src/components/PayloadSamples/styled.elements.ts +++ b/src/components/PayloadSamples/styled.elements.ts @@ -1,6 +1,6 @@ import styled from '../../styled-components'; -import { SimpleDropdown } from '../../common-elements'; +import { StyledDropdown } from '../../common-elements'; export const MimeLabel = styled.div` border-bottom: 1px solid rgba(255, 255, 255, 0.9); @@ -9,14 +9,22 @@ export const MimeLabel = styled.div` color: rgba(255, 255, 255, 0.8); `; -export const InvertedSimpleDropdown = styled(SimpleDropdown)` +export const InvertedSimpleDropdown = StyledDropdown.extend` + margin-left: 10px; + text-transform: none; + font-size: 0.929em; border-bottom: 1px solid rgba(255, 255, 255, 0.9); margin: 0 0 10px 0; display: block; .Dropdown-control, .Dropdown-control:hover { + font-size: 1em; + border: none; + padding: 0 1.2em 0 0; + background: transparent; color: rgba(255, 255, 255, 0.9); + box-shadow: none; .Dropdown-arrow { border-top-color: rgba(255, 255, 255, 0.9); diff --git a/src/components/SecurityRequirement/SecuirityRequirement.tsx b/src/components/SecurityRequirement/SecuirityRequirement.tsx index a873431979..7919ba017a 100644 --- a/src/components/SecurityRequirement/SecuirityRequirement.tsx +++ b/src/components/SecurityRequirement/SecuirityRequirement.tsx @@ -42,7 +42,7 @@ const SecuritiesColumn = styled.td` width: ${props => props.theme.schemaView.defaultDetailsWidth}; `; -const AuthHeader = styled(UnderlinedHeader)` +const AuthHeader = UnderlinedHeader.extend` display: inline-block; `; diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx index 1d4a037ab0..51167b3608 100644 --- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx +++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx @@ -95,7 +95,13 @@ export class StickyResponsiveSidebar extends React.Component render() { const open = this.props.menu.sideBarOpened; - const height = `calc(100vh - ${top})`; + const style = options => { + const top = this.getScrollYOffset(options); + return { + top, + height: `calc(100vh - ${top})`, + }; + }; return ( @@ -104,7 +110,7 @@ export class StickyResponsiveSidebar extends React.Component { this.stickyElement = el; diff --git a/src/styled-components.ts b/src/styled-components.ts index b504ba4cfb..d29018447e 100644 --- a/src/styled-components.ts +++ b/src/styled-components.ts @@ -50,4 +50,5 @@ export const media = { }; export { css, injectGlobal, keyframes, ThemeProvider, withTheme, withProps }; +export { StyledComponentClass } from 'styled-components'; export default styled;