From f26d8a5771e875f25ae9a5ba78593810ce967c6f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 6 Dec 2024 17:48:08 +0100 Subject: [PATCH 1/2] Tabs: add with links Storybook example --- .../src/tabs/stories/index.story.tsx | 129 +++++++++++++++++- 1 file changed, 128 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx index 5b2fd621bbb436..a3c3868055a13f 100644 --- a/packages/components/src/tabs/stories/index.story.tsx +++ b/packages/components/src/tabs/stories/index.story.tsx @@ -7,7 +7,12 @@ import type { Meta, StoryFn } from '@storybook/react'; * WordPress dependencies */ import { wordpress, more, link } from '@wordpress/icons'; -import { useState } from '@wordpress/element'; +import { + useState, + forwardRef, + createContext, + useContext, +} from '@wordpress/element'; /** * Internal dependencies @@ -492,3 +497,125 @@ const TabGetsRemovedTemplate: StoryFn< typeof Tabs > = ( props ) => { ); }; export const TabGetsRemoved = TabGetsRemovedTemplate.bind( {} ); + +const WITH_LINKS_PAGES = [ + { + title: 'Page 1', + url: 'page1', + }, + { + title: 'Page 2', + url: 'page2', + }, + { + title: 'Page 3', + url: 'page3', + }, +]; + +const SimpleRouterContext = createContext< { + currentPath: string | undefined; + goTo: ( path: string | undefined ) => void; +} >( { + currentPath: undefined, + goTo: () => {}, +} ); + +const SimpleRouter = ( { + children, + initialRoute = '/', +}: { + children: React.ReactNode; + initialRoute?: string; +} ) => { + const [ currentPath, setCurrentPath ] = useState< string | undefined >( + initialRoute + ); + + const goTo = ( path: string | undefined ) => { + setCurrentPath( path ); + }; + + return ( + + { children } + + ); +}; + +const SimpleRouterLink = forwardRef( + ( + { + to, + children, + onClick, + style, + ...restProps + }: { + to: string; + children?: React.ReactNode; + } & React.HTMLProps< HTMLAnchorElement >, + ref: React.ForwardedRef< HTMLAnchorElement > + ) => { + const { goTo } = useContext( SimpleRouterContext ); + + return ( + { + event.preventDefault(); + goTo( to ); + onClick?.( event ); + } } + style={ { + ...style, + textDecoration: 'none', + } } + { ...restProps } + > + { children } + + ); + } +); + +const WithLinksTabs = ( props: React.ComponentProps< typeof Tabs > ) => { + const { currentPath, goTo } = useContext( SimpleRouterContext ); + + return ( + { + goTo( newTabId ?? undefined ); + } } + { ...props } + > + + { WITH_LINKS_PAGES.map( ( page ) => ( + } + > + { page.title } + + ) ) } + + { WITH_LINKS_PAGES.map( ( page ) => ( + +

Selected tab: { page.title }

+
+ ) ) } +
+ ); +}; + +const WithLinksTemplate: StoryFn< typeof Tabs > = ( props ) => { + return ( + + + + ); +}; +export const WithLinks = WithLinksTemplate.bind( {} ); From 7b6d3e9cce7da16907612c1a1595d40cdb51a655 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 6 Dec 2024 17:48:27 +0100 Subject: [PATCH 2/2] Improve Tabs.Tab CSS reset styles --- packages/components/src/tabs/styles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index 717316227ddb3c..3b2bae1fe25346 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -151,9 +151,11 @@ export const StyledTabList = styled( Ariakit.TabList )` export const Tab = styled( Ariakit.Tab )` & { /* Resets */ + appearance: auto; border-radius: 0; background: transparent; border: none; + box-sizing: border-box; box-shadow: none; flex: 1 0 auto;