GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 06:41:25 +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 = () => ( export const noTabs = () => (
<Consumer>
{({ api }: Combo) => {
return (
<Preview
{...previewProps}
api={{ ...api, getElements: () => ({}) }}
story={{ parameters: { previewTabs: { canvas: { hidden: true } } } }}
/>
);
}}
</Consumer>
);
export const withCanvasTab = () => (
<Consumer> <Consumer>
{({ api }: Combo) => { {({ api }: Combo) => {
return <Preview {...previewProps} api={{ ...api, getElements: () => ({}) }} />; 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 tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
const shouldScale = viewMode === 'story'; const shouldScale = viewMode === 'story';
const isToolshown = const { isToolshown } = options;
!(viewMode === 'docs' && tabs.filter((t) => !t.hidden).length < 2) && options.isToolshown;
const initialRender = useRef(true); const initialRender = useRef(true);
useEffect(() => { useEffect(() => {

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

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