From 6d549aa8d98b6da11764dafa047fa2ed5d7c3055 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Fri, 4 Aug 2023 12:27:20 +0300 Subject: [PATCH 1/9] enhance tabs --- packages/components/src/Tabs/TabPanel.tsx | 5 ++- packages/components/src/Tabs/Tabs.tsx | 52 +++++++++++++++-------- 2 files changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/components/src/Tabs/TabPanel.tsx b/packages/components/src/Tabs/TabPanel.tsx index 12cd0de1ae..9870b4619d 100644 --- a/packages/components/src/Tabs/TabPanel.tsx +++ b/packages/components/src/Tabs/TabPanel.tsx @@ -5,13 +5,14 @@ import { TabListState } from '@react-stately/tabs'; export interface TabPanelProps extends AriaTabPanelProps { state: TabListState; + className?: string; } -export const TabPanel = ({ state, ...props }: TabPanelProps) => { +export const TabPanel = ({ state, className, ...props }: TabPanelProps) => { const ref = useRef(null); const { tabPanelProps } = useTabPanel(props, state, ref); return ( -
+
{state.selectedItem?.props.children}
); diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 46613be16b..07aa4e2362 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -9,19 +9,14 @@ import { Tab } from './Tab'; import { TabPanel } from './TabPanel'; import { Item } from '@react-stately/collections'; import { TabContext } from './Context'; +import { ItemProps } from '@react-types/shared'; -interface TabsProps - extends Omit, 'orientation' | 'isDisabled'>, - GapSpaceProp { - size?: 'small' | 'medium' | 'large'; - disabled?: boolean; - variant?: string; -} -export const Tabs = ({ +export const Tabs: Tabs = ({ space = 2, size = 'medium', disabled, variant, + className, ...rest }: TabsProps) => { const ref = useRef(null); @@ -38,21 +33,42 @@ export const Tabs = ({ size, variant, }); - return ( -
- {[...state.collection].map(item => { - return ; - })} + {/* tabs container */} +
+
+ {[...state.collection].map(item => { + return ; + })} +
+
- ); }; Tabs.Item = Item; + +interface TabsProps + extends Omit, 'orientation' | 'isDisabled'>, + GapSpaceProp { + size?: 'small' | 'medium' | 'large'; + disabled?: boolean; + variant?: string; + className?: string; +} + +interface Tabs { + (props: TabsProps): JSX.Element; + // to add className to + Item: (props: ItemProps & { className?: string }) => JSX.Element; +} From 5c704c134b98b439da5aece4dedd2731e9550bf7 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Mon, 7 Aug 2023 11:50:29 +0300 Subject: [PATCH 2/9] Test styles added via theme --- packages/components/src/Tabs/Tabs.test.tsx | 45 ++++++++++------------ 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/packages/components/src/Tabs/Tabs.test.tsx b/packages/components/src/Tabs/Tabs.test.tsx index 06caf95c93..a55475f884 100644 --- a/packages/components/src/Tabs/Tabs.test.tsx +++ b/packages/components/src/Tabs/Tabs.test.tsx @@ -11,10 +11,7 @@ const theme: Theme = { tabs: cva('mb-[10px]'), tab: cva( [ - 'min-h-[40px]', - 'data-[hover]:text-tabs-tab-text data-[hover]:border-b-tabs-tab-hover data-[hover]:border-b-8 data-[hover]:border-solid', - ' disabled:text-tabs-tab-disabled', - ' selected:border-b-primary-600 selected:border-b-8 selected:border-solid ', + 'selected:border-red-500 selected:border-b-8 selected:border-solid ', ], { variants: { @@ -62,7 +59,7 @@ test('Supporting default size', () => { ); expect(screen.getByText('tab').className).toMatchInlineSnapshot( - `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed min-h-[40px] data-[hover]:text-tabs-tab-text data-[hover]:border-b-tabs-tab-hover data-[hover]:border-b-8 data-[hover]:border-solid disabled:text-tabs-tab-disabled selected:border-b-primary-600 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` + `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed selected:border-red-500 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` ); }); @@ -97,41 +94,41 @@ test('set defaultValue via props in tabs', () => { expect(screen.getByText('tab-2 content')).toBeVisible(); }); -test('cursor indicates interactivity', () => { +test('open tabpanel when its tab controller is clicked', () => { render( - - + + tab-1 content - + tab-2 content ); - const tabs = screen.getAllByRole('tab'); - expect(tabs[0].className).toMatchInlineSnapshot( - `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed min-h-[40px] data-[hover]:text-tabs-tab-text data-[hover]:border-b-tabs-tab-hover data-[hover]:border-b-8 data-[hover]:border-solid disabled:text-tabs-tab-disabled selected:border-b-primary-600 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` - ); - expect(tabs[1].className).toMatchInlineSnapshot( - `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed min-h-[40px] data-[hover]:text-tabs-tab-text data-[hover]:border-b-tabs-tab-hover data-[hover]:border-b-8 data-[hover]:border-solid disabled:text-tabs-tab-disabled selected:border-b-primary-600 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` + const tab = screen.getByText('tab2'); + fireEvent.click(tab); + expect(tab.className).toMatchInlineSnapshot( + `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed selected:border-red-500 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` ); + expect(screen.getByText('tab-2 content')).toBeVisible(); }); -test('open tabpanel when its tab controller is clicked', () => { +test('allows styling "focus" state via theme', () => { render( - - + + tab-1 content - + tab-2 content ); - const tab = screen.getByText('tab2'); - fireEvent.click(tab); - expect(tab.className).toMatchInlineSnapshot( - `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed min-h-[40px] data-[hover]:text-tabs-tab-text data-[hover]:border-b-tabs-tab-hover data-[hover]:border-b-8 data-[hover]:border-solid disabled:text-tabs-tab-disabled selected:border-b-primary-600 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` + const tabs = screen.getAllByRole('tab'); + expect(tabs[0].className).toMatchInlineSnapshot( + `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed selected:border-red-500 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` + ); + expect(tabs[1].className).toMatchInlineSnapshot( + `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed selected:border-red-500 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` ); - expect(screen.getByText('tab-2 content')).toBeVisible(); }); From d52c0419544cd2ce6e216d95442c77aebf6b5217 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Mon, 7 Aug 2023 12:15:35 +0300 Subject: [PATCH 3/9] moving classNames to tab panel --- packages/components/src/Tabs/TabPanel.tsx | 8 ++++---- packages/components/src/Tabs/Tabs.tsx | 6 +----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/components/src/Tabs/TabPanel.tsx b/packages/components/src/Tabs/TabPanel.tsx index 9870b4619d..560cf383f1 100644 --- a/packages/components/src/Tabs/TabPanel.tsx +++ b/packages/components/src/Tabs/TabPanel.tsx @@ -5,15 +5,15 @@ import { TabListState } from '@react-stately/tabs'; export interface TabPanelProps extends AriaTabPanelProps { state: TabListState; - className?: string; } -export const TabPanel = ({ state, className, ...props }: TabPanelProps) => { +export const TabPanel = ({ state, ...props }: TabPanelProps) => { const ref = useRef(null); const { tabPanelProps } = useTabPanel(props, state, ref); + const selectedItemProps = state.selectedItem?.props; return ( -
- {state.selectedItem?.props.children} +
+ {selectedItemProps?.children}
); }; diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 07aa4e2362..17ddbb99e5 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -46,11 +46,7 @@ export const Tabs: Tabs = ({ return ; })}
- + ); From 0e402d2b9309b4e3dcb0405bef1e6e918c73a695 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Tue, 8 Aug 2023 17:50:05 +0300 Subject: [PATCH 4/9] Add styles via theme --- packages/components/src/Tabs/Context.ts | 7 ++++++- packages/components/src/Tabs/TabPanel.tsx | 10 +++++++++- packages/components/src/Tabs/Tabs.tsx | 2 +- packages/system/src/types/theme.ts | 5 ++++- themes/theme-b2b/src/components/Tabs.styles.ts | 2 ++ 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/components/src/Tabs/Context.ts b/packages/components/src/Tabs/Context.ts index edf9deed5c..c70e6635e9 100644 --- a/packages/components/src/Tabs/Context.ts +++ b/packages/components/src/Tabs/Context.ts @@ -1,6 +1,11 @@ import { createContext, useContext } from 'react'; export const TabContext = createContext<{ - classNames: { tabs: string; tab: string }; + classNames: { + container: string; + tabs: string; + tab: string; + tabpanel: string; + }; }>({} as any); export const useTabContext = () => useContext(TabContext); diff --git a/packages/components/src/Tabs/TabPanel.tsx b/packages/components/src/Tabs/TabPanel.tsx index 560cf383f1..0558ca93b2 100644 --- a/packages/components/src/Tabs/TabPanel.tsx +++ b/packages/components/src/Tabs/TabPanel.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { useRef } from 'react'; import { AriaTabPanelProps, useTabPanel } from '@react-aria/tabs'; import { TabListState } from '@react-stately/tabs'; +import { useTabContext } from './Context'; +import { cn } from '@marigold/system'; export interface TabPanelProps extends AriaTabPanelProps { state: TabListState; @@ -11,8 +13,14 @@ export const TabPanel = ({ state, ...props }: TabPanelProps) => { const ref = useRef(null); const { tabPanelProps } = useTabPanel(props, state, ref); const selectedItemProps = state.selectedItem?.props; + const { classNames } = useTabContext(); + return ( -
+
{selectedItemProps?.children}
); diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 17ddbb99e5..890e39c4bd 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -36,7 +36,7 @@ export const Tabs: Tabs = ({ return ( {/* tabs container */} -
+
>; - Tabs?: Record<'tabs' | 'tab', ComponentStyleFunction>; + Tabs?: Record< + 'tabs' | 'container' | 'tabpanel' | 'tab', + ComponentStyleFunction + >; Underlay?: ComponentStyleFunction; Calendar?: Record< 'calendar' | 'calendarCell' | 'calendarControllers', diff --git a/themes/theme-b2b/src/components/Tabs.styles.ts b/themes/theme-b2b/src/components/Tabs.styles.ts index cba495cd9e..6dff76816d 100644 --- a/themes/theme-b2b/src/components/Tabs.styles.ts +++ b/themes/theme-b2b/src/components/Tabs.styles.ts @@ -1,7 +1,9 @@ import { ThemeComponent, cva } from '@marigold/system'; export const Tabs: ThemeComponent<'Tabs'> = { + container: cva(''), tabs: cva('mb-[10px]'), + tabpanel: cva(''), tab: cva( [ 'min-h-[40px]', From 9b94503a0eee2093d81d0d48e82fe632a6fb943a Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Wed, 9 Aug 2023 09:34:46 +0300 Subject: [PATCH 5/9] Fixing tests --- packages/components/src/Tabs/Tabs.test.tsx | 27 +++++++++++++++++++ .../src/Tabs/__snapshots__/Tabs.test.tsx.snap | 3 +++ .../theme-core/src/components/Tabs.styles.ts | 2 ++ 3 files changed, 32 insertions(+) create mode 100644 packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap diff --git a/packages/components/src/Tabs/Tabs.test.tsx b/packages/components/src/Tabs/Tabs.test.tsx index a55475f884..566c9c03ef 100644 --- a/packages/components/src/Tabs/Tabs.test.tsx +++ b/packages/components/src/Tabs/Tabs.test.tsx @@ -8,6 +8,8 @@ const theme: Theme = { name: 'tabs test', components: { Tabs: { + container: cva('flex'), + tabpanel: cva('border-3 border-solid border-red-400'), tabs: cva('mb-[10px]'), tab: cva( [ @@ -132,3 +134,28 @@ test('allows styling "focus" state via theme', () => { `"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed selected:border-red-500 selected:border-b-8 selected:border-solid px-2 pb-2 text-lg"` ); }); + +test('allow styling TabPanel & container via theme', () => { + render( + + + tab-1 content + + + tab-2 content + + + ); + const tabPanel = screen.getByText('tab-1 content'); + const container = screen.getByLabelText('tabs container'); + + expect(container.className).toMatchSnapshot('flex gap-2'); + + expect(tabPanel.className).toMatchInlineSnapshot( + `"bg-green-300 border-3 border-solid border-red-400"` + ); +}); diff --git a/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap new file mode 100644 index 0000000000..0b93110236 --- /dev/null +++ b/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`allow styling TabPanel & container via theme: flex gap-2 1`] = `"flex gap-2 mb-[10px]"`; diff --git a/themes/theme-core/src/components/Tabs.styles.ts b/themes/theme-core/src/components/Tabs.styles.ts index 59e86960cf..ae31e7b834 100644 --- a/themes/theme-core/src/components/Tabs.styles.ts +++ b/themes/theme-core/src/components/Tabs.styles.ts @@ -1,6 +1,8 @@ import { ThemeComponent, cva } from '@marigold/system'; export const Tabs: ThemeComponent<'Tabs'> = { + container: cva(''), + tabpanel: cva(''), tabs: cva('mb-[10px]'), tab: cva( [ From 1cf7c35fbc21f5f482e20c31318983d810857f89 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Fri, 11 Aug 2023 15:56:30 +0300 Subject: [PATCH 6/9] Remove styling via `className` over components --- packages/components/src/Tabs/TabPanel.tsx | 6 +---- packages/components/src/Tabs/Tabs.tsx | 33 ++++++++++------------- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/packages/components/src/Tabs/TabPanel.tsx b/packages/components/src/Tabs/TabPanel.tsx index 0558ca93b2..5cfb591d70 100644 --- a/packages/components/src/Tabs/TabPanel.tsx +++ b/packages/components/src/Tabs/TabPanel.tsx @@ -16,11 +16,7 @@ export const TabPanel = ({ state, ...props }: TabPanelProps) => { const { classNames } = useTabContext(); return ( -
+
{selectedItemProps?.children}
); diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx index 890e39c4bd..32f7effe69 100644 --- a/packages/components/src/Tabs/Tabs.tsx +++ b/packages/components/src/Tabs/Tabs.tsx @@ -9,14 +9,24 @@ import { Tab } from './Tab'; import { TabPanel } from './TabPanel'; import { Item } from '@react-stately/collections'; import { TabContext } from './Context'; -import { ItemProps } from '@react-types/shared'; -export const Tabs: Tabs = ({ +//props +// ---------------------- +interface TabsProps + extends Omit, 'orientation' | 'isDisabled'>, + GapSpaceProp { + size?: 'small' | 'medium' | 'large'; + disabled?: boolean; + variant?: string; +} + +// component +// ---------------------- +export const Tabs = ({ space = 2, size = 'medium', disabled, variant, - className, ...rest }: TabsProps) => { const ref = useRef(null); @@ -36,7 +46,7 @@ export const Tabs: Tabs = ({ return ( {/* tabs container */} -
+
, 'orientation' | 'isDisabled'>, - GapSpaceProp { - size?: 'small' | 'medium' | 'large'; - disabled?: boolean; - variant?: string; - className?: string; -} - -interface Tabs { - (props: TabsProps): JSX.Element; - // to add className to - Item: (props: ItemProps & { className?: string }) => JSX.Element; -} From e02e4c9f77814fa88c9e5de1affc5d6a3466babc Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Fri, 11 Aug 2023 15:57:14 +0300 Subject: [PATCH 7/9] Add changes From 20f818149b793e501376a02e48d86a7fda6c3cd4 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Fri, 11 Aug 2023 15:58:38 +0300 Subject: [PATCH 8/9] Fixing tests --- packages/components/src/Tabs/Tabs.test.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/components/src/Tabs/Tabs.test.tsx b/packages/components/src/Tabs/Tabs.test.tsx index 566c9c03ef..7c23703c46 100644 --- a/packages/components/src/Tabs/Tabs.test.tsx +++ b/packages/components/src/Tabs/Tabs.test.tsx @@ -137,12 +137,8 @@ test('allows styling "focus" state via theme', () => { test('allow styling TabPanel & container via theme', () => { render( - - + + tab-1 content @@ -156,6 +152,6 @@ test('allow styling TabPanel & container via theme', () => { expect(container.className).toMatchSnapshot('flex gap-2'); expect(tabPanel.className).toMatchInlineSnapshot( - `"bg-green-300 border-3 border-solid border-red-400"` + `"border-3 border-solid border-red-400"` ); }); From 18b229ba013ea3c35423713dd5e1fc29e5339583 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Wed, 16 Aug 2023 07:00:00 +0200 Subject: [PATCH 9/9] Create itchy-spies-greet.md --- .changeset/itchy-spies-greet.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/itchy-spies-greet.md diff --git a/.changeset/itchy-spies-greet.md b/.changeset/itchy-spies-greet.md new file mode 100644 index 0000000000..7680bcc052 --- /dev/null +++ b/.changeset/itchy-spies-greet.md @@ -0,0 +1,8 @@ +--- +"@marigold/components": minor +"@marigold/system": minor +"@marigold/theme-b2b": minor +"@marigold/theme-core": minor +--- + +[DST-111]: enhance styling tabs