Fix content of Panel rendered wrong at Docs-page (#7327)

Fix content of Panel rendered wrong at Docs-page

lib/ui/src/components/panel/panel.js

@@ -44,39 +44,41 @@ SafeTab.defaultProps = {
   children: null,
 };
 
-const AddonPanel = React.memo(({ panels, actions, selectedPanel, panelPosition }) => (
-  <Tabs
-    absolute
-    selected={selectedPanel}
-    actions={actions}
-    flex
-    tools={
-      <Fragment>
-        <DesktopOnlyIconButton
-          key="position"
-          onClick={actions.togglePosition}
-          title="Change orientation"
-        >
-          <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
-        </DesktopOnlyIconButton>
-        <DesktopOnlyIconButton
-          key="visibility"
-          onClick={actions.toggleVisibility}
-          title="Hide addons"
-        >
-          <Icons icon="close" />
-        </DesktopOnlyIconButton>
-      </Fragment>
-    }
-    id="storybook-panel-root"
-  >
-    {Object.entries(panels).map(([k, v]) => (
-      <SafeTab key={k} id={k} title={v.title}>
-        {v.render}
-      </SafeTab>
-    ))}
-  </Tabs>
-));
+const AddonPanel = React.memo(
+  ({ panels, actions, selectedPanel, panelPosition, absolute = true }) => (
+    <Tabs
+      absolute={absolute}
+      selected={selectedPanel}
+      actions={actions}
+      flex
+      tools={
+        <Fragment>
+          <DesktopOnlyIconButton
+            key="position"
+            onClick={actions.togglePosition}
+            title="Change orientation"
+          >
+            <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
+          </DesktopOnlyIconButton>
+          <DesktopOnlyIconButton
+            key="visibility"
+            onClick={actions.toggleVisibility}
+            title="Hide addons"
+          >
+            <Icons icon="close" />
+          </DesktopOnlyIconButton>
+        </Fragment>
+      }
+      id="storybook-panel-root"
+    >
+      {Object.entries(panels).map(([k, v]) => (
+        <SafeTab key={k} id={k} title={v.title}>
+          {v.render}
+        </SafeTab>
+      ))}
+    </Tabs>
+  )
+);
 AddonPanel.displayName = 'AddonPanel';
 AddonPanel.propTypes = {
   selectedPanel: PropTypes.string,
@@ -86,10 +88,12 @@ AddonPanel.propTypes = {
   }).isRequired,
   panels: PropTypes.shape({}).isRequired,
   panelPosition: PropTypes.oneOf(['bottom', 'right']),
+  absolute: PropTypes.bool,
 };
 AddonPanel.defaultProps = {
   selectedPanel: null,
   panelPosition: 'right',
+  absolute: true,
 };
 
 export default AddonPanel;

lib/ui/src/components/panel/panel.stories.js

@@ -37,6 +37,7 @@ storiesOf('UI|Panel', module)
   })
   .add('default', () => (
     <Panel
+      absolute={false}
       panels={panels}
       actions={{ onSelect, toggleVisibility, togglePosition }}
       selectedPanel="test2"