fix(devui): clean up after fixing UI bugs (#728)

* fix(devui): clean up after fixing UI bugs

* Fix references to props

* Update snapshot

packages/devui/src/Container/styles/index.ts

@@ -6,8 +6,7 @@ export const MainContainerWrapper = styled.div`
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
-  flex-shrink: 1;
-  min-height: 0;
+  overflow: auto;
   background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
   color: ${(props) => props.theme.base07};
   font-size: 12px;
@@ -32,8 +31,7 @@ export const MainContainerWrapper = styled.div`
     flex-grow: 1;
     display: flex;
     flex-flow: column nowrap;
-    flex-shrink: 1;
-    min-height: 0;
+    overflow: auto;
 
     > div {
       flex-grow: 1;
@@ -46,6 +44,5 @@ export const ContainerWrapper = styled.div`
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
-  flex-shrink: 1;
-  min-height: 0;
+  overflow: auto;
 `;

packages/devui/src/Tabs/Tabs.tsx

@@ -15,12 +15,6 @@ export interface TabsProps<P> {
 }
 
 export default class Tabs<P> extends Component<TabsProps<P>> {
-  constructor(props: TabsProps<P>) {
-    super(props);
-    this.updateTabs(props);
-  }
-
-  tabsHeader?: ReactButtonElement[];
   SelectedComponent?: React.ComponentType<P>;
   selector?: () => P;
 
@@ -32,11 +26,11 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
     this.props.onClick(e.currentTarget.value);
   };
 
-  updateTabs(props: TabsProps<P>): void {
-    const tabs = props.tabs;
-    const selected = props.selected;
+  renderTabs() {
+    const tabs = this.props.tabs;
+    const selected = this.props.selected;
 
-    this.tabsHeader = tabs.map((tab, i) => {
+    return tabs.map((tab, i) => {
       let isSelected;
       const value = typeof tab.value !== 'undefined' ? tab.value : tab.name;
       if (value === selected) {
@@ -61,11 +55,9 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
   }
 
   render() {
-    this.updateTabs(nextProps);
-    
     const tabsHeader = (
       <TabsHeader
-        tabs={this.tabsHeader!}
+        tabs={this.renderTabs()}
         items={this.props.tabs}
         main={this.props.main}
         collapsible={this.props.collapsible}

packages/devui/tests/__snapshots__/Container.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly 1`] = `
 <div
-  class="sc-AxjAm jlQKkV"
+  class="sc-AxjAm eccWTt"
 >
   Text
 </div>