GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14790 from Tomastomaslol/issue-14598-tabs-controlling-appearance-of-the-toolbar

Browse Source 
UI: Fix tab display when there is only one tab
This commit is contained in:
Michael Shilman 2021-05-11 13:36:16 +08:00 committed by GitHub
commit a843373715
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/ui/src/components/preview/preview.stories.tsx
View File

@ -37,6 +37,20 @@ export default {
};
export const noTabs = () => (
<Consumer>
{({ api }: Combo) => {
return (
<Preview
{...previewProps}
api={{ ...api, getElements: () => ({}) }}
story={{ parameters: { previewTabs: { canvas: { hidden: true } } } }}
/>
);
}}
</Consumer>
);
export const withCanvasTab = () => (
<Consumer>
{({ api }: Combo) => {
return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />;

3
lib/ui/src/components/preview/preview.tsx
View File

@ -146,8 +146,7 @@ const Preview = React.memo<PreviewProps>((props) => {
const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
const shouldScale = viewMode === 'story';
const isToolshown =
!(viewMode === 'docs' && tabs.filter((t) => !t.hidden).length < 2) && options.isToolshown;
const { isToolshown } = options;
const initialRender = useRef(true);
useEffect(() => {

3
lib/ui/src/components/preview/toolbar.tsx
View File

@ -181,8 +181,7 @@ export function filterTools(
path: State['path'];
}
) {
const tabsTool = createTabsTool(tabs);
const toolsLeft = [tabs.filter((p) => !p.hidden).length > 1 ? tabsTool : null, ...tools];
const toolsLeft = [tabs.filter((p) => !p.hidden).length >= 1 && createTabsTool(tabs), ...tools];
const toolsRight = [...toolsExtra];
const filter = (item: Partial<Addon>) =>