fix: prefer extend of styled to make styles more predictable

Author: RomanHotsiy

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<DropdownProps>(styled(Dropdown))`
       background-color: rgba(38, 50, 56, 0.12)
     }
   }
-` as React.ComponentClass<DropdownProps>;
+` as StyledComponentClass<any, DropdownProps>;
 
-export const SimpleDropdown = styled(StyledDropdown)`
+export const SimpleDropdown = StyledDropdown.extend`
   margin-left: 10px;
   text-transform: none;
   font-size: 0.929em;

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;

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
   `};

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 {

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;
 

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);

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;
 `;
 

src/components/StickySidebar/StickyResponsiveSidebar.tsx

@@ -95,7 +95,13 @@ export class StickyResponsiveSidebar extends React.Component<StickySidebarProps>
   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 (
       <OptionsContext.Consumer>
@@ -104,7 +110,7 @@ export class StickyResponsiveSidebar extends React.Component<StickySidebarProps>
             <StyledStickySidebar
               open={open}
               className={this.props.className}
-              style={{ top: this.getScrollYOffset(options), height }}
+              style={style(options)}
               // tslint:disable-next-line
               innerRef={el => {
                 this.stickyElement = el;

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;