status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add disabled state to Tabs (#569) 

* u

* Create lemon-dogs-lie.md

* f
This commit is contained in:
Jakub Kotula 2024-06-04 16:59:47 +02:00 committed by GitHub
parent 81059fc706
commit 8540f8697f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/lemon-dogs-lie.md Normal file
View File

@ -0,0 +1,5 @@
---
"@status-im/components": patch
---
draft: add disabled state to Tabs

13
packages/components/src/tabs/tabs.stories.tsx
View File

@ -32,7 +32,7 @@ export const Grey: StoryObj<TabsProps> = {
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
<Tabs.Trigger type="default" value="3" disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>
@ -64,7 +64,7 @@ export const GreyBlur: StoryObj<TabsProps> = {
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
<Tabs.Trigger type="default" value="3" disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>
@ -96,7 +96,7 @@ export const DarkGrey: StoryObj<TabsProps> = {
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
<Tabs.Trigger type="default" value="3" disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>
@ -132,7 +132,7 @@ export const DarkGreyBlur: StoryObj<TabsProps> = {
<Tabs.Trigger type="default" value="2">
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="default" value="3">
<Tabs.Trigger type="default" value="3" disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>
@ -176,6 +176,7 @@ export const Icon: StoryObj<TabsProps> = {
type="icon"
value="3"
icon={<PlaceholderIcon size={16} />}
disabled
>
Tab 3
</Tabs.Trigger>
@ -208,7 +209,7 @@ export const Counter: StoryObj<TabsProps> = {
<Tabs.Trigger type="counter" value="2" count={10}>
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="counter" value="3" count={100}>
<Tabs.Trigger type="counter" value="3" count={100} disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>
@ -240,7 +241,7 @@ export const Step: StoryObj<TabsProps> = {
<Tabs.Trigger type="step" value="2" step={10}>
Tab 2
</Tabs.Trigger>
<Tabs.Trigger type="step" value="3" step={999}>
<Tabs.Trigger type="step" value="3" step={999} disabled>
Tab 3
</Tabs.Trigger>
</Tabs.List>

21
packages/components/src/tabs/tabs.tsx
View File

@ -65,19 +65,28 @@ type TriggerProps =
type: 'default'
value: string
children: string
disabled?: boolean
}
| {
type: 'icon'
value: string
children: string
icon: React.ReactElement
disabled?: boolean
}
| {
type: 'counter'
value: string
children: string
count: number
disabled?: boolean
}
| { type: 'counter'; value: string; children: string; count: number }
| {
type: 'step'
value: string
children: string
step: number
disabled?: boolean
}
const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
@ -87,10 +96,11 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
const providedProps = props as TriggerProps & {
size: 24 | 32
'aria-selected': boolean
disabled: boolean
variant: Variants['variant']
}
const { size, 'aria-selected': selected, variant } = providedProps
const { size, 'aria-selected': selected, disabled, variant } = providedProps
const { color, pressableProps } = usePressableColors(
{
@ -112,6 +122,7 @@ const TabsTrigger = (props: TriggerProps, ref: Ref<View>) => {
size={size}
variant={variant}
active={selected}
disabled={disabled}
>
{props.type === 'icon' &&
cloneElement(props.icon, {
@ -230,6 +241,12 @@ const TriggerBase = styled(View, {
}
},
},
disabled: {
true: {
opacity: 0.3,
cursor: 'default',
},
},
} as const,
})