diff --git a/components/CounterLabel/style.scss b/components/CounterLabel/style.scss index 6864cf1..a2881f8 100644 --- a/components/CounterLabel/style.scss +++ b/components/CounterLabel/style.scss @@ -9,13 +9,10 @@ pointer-events: none; box-sizing: border-box; padding: 0 var(--spacing-xs); - min-width: 20px; + min-width: 16px; display: inline-flex; align-items: center; justify-content: center; - flex-flow: row; - flex: none; - height: auto; &.variant-neutral { --color: var(--fg-neutral); @@ -39,7 +36,10 @@ } span { - font: var(--t-body-xxs-600); + font-size: var(--body-micro-11, 11px); + font-style: normal; + font-weight: var(--font-weight-medium-500, 500); + line-height: var(--line-height-sm-14, 14px); color: inherit; text-align: center; } diff --git a/components/Tabs/Tab.tsx b/components/Tabs/Tab.tsx index 0c6e6d9..54e8fae 100644 --- a/components/Tabs/Tab.tsx +++ b/components/Tabs/Tab.tsx @@ -1,7 +1,9 @@ import clsx from 'clsx'; +import { ThemeVariable } from '../../types'; +import { Icon } from '../Icon'; import type { TabProps } from './types'; -export const Tab = ({ onClick, title, active }: TabProps) => { +export const Tab = ({ onClick, title, active, icon }: TabProps) => { return (
{ onClick={onClick} >
-

{title}

+
+ {icon && } + {title} +
); }; diff --git a/components/Tabs/style.scss b/components/Tabs/style.scss index ee34130..06c1eb7 100644 --- a/components/Tabs/style.scss +++ b/components/Tabs/style.scss @@ -49,6 +49,10 @@ font: var(--t-body-sm-500); color: var(--color); text-align: center; + display: flex; + align-items: center; + justify-content: center; + column-gap: var(--spacing-xs); @include animate(color); } diff --git a/components/Tabs/types.ts b/components/Tabs/types.ts index c98a821..2182118 100644 --- a/components/Tabs/types.ts +++ b/components/Tabs/types.ts @@ -1,3 +1,5 @@ +import type { IconKindValue } from '../Icon'; + export type TabProps = TabsItem; export interface TabsItem { @@ -5,6 +7,7 @@ export interface TabsItem { active?: boolean; hidden?: boolean; onClick: () => void; + icon?: IconKindValue; } export interface TabsProps {