archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

Fix/1531 (#1545)

Browse Source 
* fix(tabs): title prop was being passed to html element

* chore(tabs): changeset
This commit is contained in:
Junior Garcia 2023-09-01 17:44:46 -03:00 committed by GitHub
parent a9e324b351
commit 09fe1d3141
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/big-moose-switch.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/tabs": patch
---
Fix #1531 title props filtered, titleValue prop added to pass the title to the HTML element.

11
apps/docs/content/docs/components/tabs.mdx
View File

@ -13,7 +13,7 @@ Tabs organize content into multiple sections and allow users to navigate between
---
<CarbonAd/>
<CarbonAd />
## Import
@ -157,10 +157,11 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
### Tab Props
| Attribute | Type | Description | Default |
| ---------- | ----------- | ----------------------- | ------- |
| children\* | `ReactNode` | The content of the tab. | - |
| title | `ReactNode` | The title of the tab. | - |
| Attribute | Type | Description | Default |
| ---------- | ----------- | ------------------------------------------------------------------------------------------ | ------- |
| children\* | `ReactNode` | The content of the tab. | - |
| title | `ReactNode` | The title of the tab. | - |
| titleValue | `string` | A string representation of the item's contents. Use this when the `title` is not readable. | - |
#### Motion Props

7
packages/components/tabs/src/base/tab-item-base.ts
View File

@ -1,6 +1,6 @@
import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
import {ReactNode} from "react";
interface Props<T extends object = {}> extends Omit<ItemProps<"div", T>, "children" | "title"> {
interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "children" | "title"> {
/**
* The content of the component.
*/
@ -9,6 +9,11 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"div", T>, "childr
* The title of the component.
*/
title?: ReactNode | null;
/**
* A string representation of the item's contents. Use this when the title is not readable.
* This will be used as native `title` attribute.
* */
titleValue?: string;
}
export type TabItemProps<T extends object = {}> = Props<T>;

8
packages/components/tabs/src/tab.tsx
View File

@ -1,4 +1,6 @@
import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
import {forwardRef} from "@nextui-org/system";
import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
import {clsx, dataAttr} from "@nextui-org/shared-utils";
import {chain, mergeProps} from "@react-aria/utils";
@ -12,7 +14,7 @@ import {useIsMounted} from "@nextui-org/use-is-mounted";
import {ValuesType} from "./use-tabs";
export interface TabItemProps<T = object> extends HTMLNextUIProps<"button"> {
export interface TabItemProps<T extends object = object> extends BaseTabItemProps<T> {
item: Node<T>;
state: ValuesType["state"];
slots: ValuesType["slots"];
@ -106,9 +108,11 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
: {},
filterDOMProps(otherProps, {
enabled: shouldFilterDOMProps,
omitPropNames: new Set(["title"]),
}),
)}
className={slots.tab?.({class: tabStyles})}
title={otherProps?.titleValue}
type={Component === "button" ? "button" : undefined}
onClick={handleClick}
>

16
packages/components/tabs/stories/tabs.stories.tsx
View File

@ -89,12 +89,16 @@ const WithIconsTemplate = (args: TabsProps) => (
tab: "text-lg",
}}
>
<Tab key="align-left" title={<AlignLeftBoldIcon />} />
<Tab key="align-vertically" title={<AlignVerticallyBoldIcon />} />
<Tab key="align-right" title={<AlignRightBoldIcon />} />
<Tab key="align-top" title={<AlignTopBoldIcon />} />
<Tab key="align-horizontally" title={<AlignHorizontallyBoldIcon />} />
<Tab key="align-bottom" title={<AlignBottomBoldIcon />} />
<Tab key="align-left" title={<AlignLeftBoldIcon />} titleValue="Align left" />
<Tab key="align-vertically" title={<AlignVerticallyBoldIcon />} titleValue="Align vertically" />
<Tab key="align-right" title={<AlignRightBoldIcon />} titleValue="Align right" />
<Tab key="align-top" title={<AlignTopBoldIcon />} titleValue="Align top" />
<Tab
key="align-horizontally"
title={<AlignHorizontallyBoldIcon />}
titleValue="Align horizontally"
/>
<Tab key="align-bottom" title={<AlignBottomBoldIcon />} titleValue="Align bottom" />
</Tabs>
);