Skip to content

Commit

Permalink
feat(TabsItem): add Tappable props (#6869)
Browse files Browse the repository at this point in the history
* feat(TabsItem): add Tappable props

* fix: pass only Tappable props

* fix: use prop default values

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

---------

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
  • Loading branch information
BlackySoul and inomdzhon authored May 6, 2024
1 parent 96ceb66 commit 0760683
Showing 1 changed file with 26 additions and 6 deletions.
32 changes: 26 additions & 6 deletions packages/vkui/src/components/TabsItem/TabsItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useDOM } from '../../lib/dom';
import { warnOnce } from '../../lib/warnOnce';
import { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';
import { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';
import { Tappable } from '../Tappable/Tappable';
import { Tappable, TappableProps } from '../Tappable/Tappable';
import { Headline } from '../Typography/Headline/Headline';
import { Subhead } from '../Typography/Subhead/Subhead';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
Expand All @@ -31,7 +31,17 @@ const fillModeClassNames = {

export interface TabsItemProps
extends HTMLAttributesWithRootRef<HTMLElement>,
AnchorHTMLAttributesOnly {
AnchorHTMLAttributesOnly,
Pick<
TappableProps,
| 'activeMode'
| 'hoverMode'
| 'hovered'
| 'activated'
| 'hasActive'
| 'hasHover'
| 'focusVisibleMode'
> {
/**
* Добавляет иконку слева.
*
Expand Down Expand Up @@ -72,6 +82,13 @@ export const TabsItem = ({
role = 'tab',
tabIndex: tabIndexProp,
getRootRef,
hoverMode = styles['TabsItem--hover'],
activeMode = '',
hovered,
activated,
hasHover,
hasActive = false,
focusVisibleMode = 'inside',
...restProps
}: TabsItemProps) => {
const { sizeY = 'none' } = useAdaptivity();
Expand Down Expand Up @@ -174,10 +191,13 @@ export const TabsItem = ({
layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
className,
)}
hoverMode={styles['TabsItem--hover']}
activeMode=""
focusVisibleMode="inside"
hasActive={false}
hoverMode={hoverMode}
activeMode={activeMode}
hasHover={hasHover}
hasActive={hasActive}
hovered={hovered}
activated={activated}
focusVisibleMode={focusVisibleMode}
role={role}
aria-selected={selected}
tabIndex={tabIndex}
Expand Down

0 comments on commit 0760683

Please sign in to comment.