From c099bdb23a080b753f87cce560b40b7bed6e6ffa Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Mon, 23 Sep 2024 20:12:23 +0200 Subject: [PATCH] fix(Tabs): quick example of u-tabs --- packages/css/tabs.css | 82 +++++++++---------- packages/react/package.json | 1 + packages/react/src/components/Tabs/Tabs.tsx | 59 ++++++------- .../react/src/components/Tabs/TabsList.tsx | 27 ++---- .../react/src/components/Tabs/TabsPanel.tsx | 34 ++------ .../react/src/components/Tabs/TabsTab.tsx | 36 ++------ yarn.lock | 8 ++ 7 files changed, 99 insertions(+), 148 deletions(-) diff --git a/packages/css/tabs.css b/packages/css/tabs.css index 21fc16d5b6..cc58ec2a4b 100644 --- a/packages/css/tabs.css +++ b/packages/css/tabs.css @@ -27,53 +27,53 @@ flex-direction: row; border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color); position: relative; -} -.ds-tabs__tab { - display: flex; - flex-direction: row; - box-sizing: border-box; - gap: var(--ds-spacing-1); - justify-content: center; - text-align: center; - align-items: center; - padding: var(--dsc-tabs-tab-padding); - border: none; - border-radius: 0; - background-color: transparent; - cursor: pointer; - color: var(--dsc-tabs-tab-color); - position: relative; - font-family: inherit; + & > u-tab { + display: flex; + flex-direction: row; + box-sizing: border-box; + gap: var(--ds-spacing-1); + justify-content: center; + text-align: center; + align-items: center; + padding: var(--dsc-tabs-tab-padding); + border: none; + border-radius: 0; + background-color: transparent; + cursor: pointer; + color: var(--dsc-tabs-tab-color); + position: relative; + font-family: inherit; - &[aria-selected='true'] { - --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default); - --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle); - } + &[aria-selected='true'] { + --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default); + --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle); + } - @composes ds-focus from './utilities.css'; + @composes ds-focus from './utilities.css'; - /* We set z-index to make sure the active line does not bleed over the focus indicator */ - &:focus-visible { - z-index: 2; - } + /* We set z-index to make sure the active line does not bleed over the focus indicator */ + &:focus-visible { + z-index: 2; + } - &::after { - content: ''; - display: block; - height: 3px; - width: 100%; - border-radius: var(--dsc-border-radius-full); - background-color: var(--dsc-tabs__tab-bottom-border-color); - position: absolute; - bottom: 0; - left: 0; - } + &::after { + content: ''; + display: block; + height: 3px; + width: 100%; + border-radius: var(--dsc-border-radius-full); + background-color: var(--dsc-tabs__tab-bottom-border-color); + position: absolute; + bottom: 0; + left: 0; + } - @media (hover: hover) and (pointer: fine) { - &:hover:not([aria-selected='true']) { - --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle); - --dsc-tabs-tab-color: var(--ds-color-neutral-text-default); + @media (hover: hover) and (pointer: fine) { + &:hover:not([aria-selected='true']) { + --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle); + --dsc-tabs-tab-color: var(--ds-color-neutral-text-default); + } } } } diff --git a/packages/react/package.json b/packages/react/package.json index 116140d55e..4402797869 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -41,6 +41,7 @@ "@radix-ui/react-slot": "^1.1.0", "@tanstack/react-virtual": "^3.10.7", "@u-elements/u-details": "^0.0.5", + "@u-elements/u-tabs": "^0.0.7", "clsx": "^2.1.1" }, "devDependencies": { diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 129dfbf441..da6d5805f6 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -1,6 +1,8 @@ +import type { UHTMLTabsElement } from '@u-elements/u-tabs'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; -import { createContext, forwardRef, useState } from 'react'; +import { forwardRef, useState } from 'react'; +import '@u-elements/u-tabs'; export type TabsProps = { /** Controlled state for `Tabs` component. */ @@ -14,16 +16,7 @@ export type TabsProps = { * @default md */ size?: 'sm' | 'md' | 'lg'; -} & Omit, 'onChange' | 'value'>; - -export type ContextProps = { - value?: string; - defaultValue?: string; - onChange?: (value: string) => void; - size?: TabsProps['size']; -}; - -export const Context = createContext({}); +} & HTMLAttributes; /** * Display a group of tabs that can be toggled between. @@ -41,7 +34,7 @@ export const Context = createContext({}); * * ``` */ -export const Tabs = forwardRef(function Tabs( +export const Tabs = forwardRef(function Tabs( { size = 'md', value, defaultValue, className, onChange, ...rest }, ref, ) { @@ -50,29 +43,31 @@ export const Tabs = forwardRef(function Tabs( string | undefined >(defaultValue); - let onValueChange = onChange; + // let onValueChange = onChange; if (!isControlled) { - onValueChange = (newValue: string) => { - setUncontrolledValue(newValue); - onChange?.(newValue); - }; + // onValueChange = (newValue: string) => { + // setUncontrolledValue(newValue); + // onChange?.(newValue); + // }; value = uncontrolledValue; } + // onClick={() => tabs.onChange?.(value)} + // + // + return ( - -
- + ); }); diff --git a/packages/react/src/components/Tabs/TabsList.tsx b/packages/react/src/components/Tabs/TabsList.tsx index 821c97374a..ee7ef2cef9 100644 --- a/packages/react/src/components/Tabs/TabsList.tsx +++ b/packages/react/src/components/Tabs/TabsList.tsx @@ -1,12 +1,10 @@ +import type { UHTMLTabListElement } from '@u-elements/u-tabs'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; -import { forwardRef, useContext } from 'react'; +import { forwardRef } from 'react'; +import '@u-elements/u-tabs'; -import { RovingFocusRoot } from '../../utilities/RovingFocus'; - -import { Context } from './Tabs'; - -export type TabsListProps = HTMLAttributes; +export type TabsListProps = HTMLAttributes; /** * The container for all `Tab` components. @@ -18,21 +16,14 @@ export type TabsListProps = HTMLAttributes; * * ``` */ -export const TabsList = forwardRef( - function TabsList({ children, className, ...rest }, ref) { - const { value } = useContext(Context); - +export const TabsList = forwardRef( + function TabsList({ className, ...rest }, ref) { return ( - - {children} - + /> ); }, ); diff --git a/packages/react/src/components/Tabs/TabsPanel.tsx b/packages/react/src/components/Tabs/TabsPanel.tsx index 50230c37bd..50cff7b28b 100644 --- a/packages/react/src/components/Tabs/TabsPanel.tsx +++ b/packages/react/src/components/Tabs/TabsPanel.tsx @@ -1,15 +1,10 @@ +import type { UHTMLTabPanelElement } from '@u-elements/u-tabs'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; -import { forwardRef, useContext } from 'react'; +import { forwardRef } from 'react'; +import '@u-elements/u-tabs'; -import { Paragraph } from '../Typography'; - -import { Context } from './Tabs'; - -export type TabsPanelProps = { - /** When this value is selected as the current state, render this `TabsPanel` component*/ - value: string; -} & Omit, 'value'>; +export type TabsPanelProps = HTMLAttributes; /** * A single content item in a Tabs component. @@ -18,25 +13,10 @@ export type TabsPanelProps = { * content 1 * ``` */ -export const TabsPanel = forwardRef( - function TabsPanel({ children, value, className, ...rest }, ref) { - const { value: tabsValue, size } = useContext(Context); - const active = value === tabsValue; - +export const TabsPanel = forwardRef( + function TabsPanel({ className, ...rest }, ref) { return ( - <> - {active && ( - -
- {children} -
- - )} - + ); }, ); diff --git a/packages/react/src/components/Tabs/TabsTab.tsx b/packages/react/src/components/Tabs/TabsTab.tsx index adbe97248d..c296d01a71 100644 --- a/packages/react/src/components/Tabs/TabsTab.tsx +++ b/packages/react/src/components/Tabs/TabsTab.tsx @@ -1,41 +1,17 @@ +import type { UHTMLTabElement } from '@u-elements/u-tabs'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; -import { forwardRef, useContext, useId } from 'react'; +import { forwardRef } from 'react'; -import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem'; -import { Paragraph } from '../Typography'; -import { Context } from './Tabs'; - -export type TabsTabProps = { - /** Value that will be set in the `Tabs` components state when the tab is activated */ - value: string; -} & Omit, 'value'>; +export type TabsTabProps = HTMLAttributes; /** * A single item in a Tabs component. * @example * Tab 1 */ -export const TabsTab = forwardRef( - function TabsTab({ className, value, ...rest }, ref) { - const tabs = useContext(Context); - const buttonId = `tab-${useId()}`; - - return ( - - -