From 8540f8697fd7a5ed2fcfc2cbd1d7559da87c5d2b Mon Sep 17 00:00:00 2001 From: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Date: Tue, 4 Jun 2024 16:59:47 +0200 Subject: [PATCH] add disabled state to Tabs (#569) * u * Create lemon-dogs-lie.md * f --- .changeset/lemon-dogs-lie.md | 5 +++++ packages/components/src/tabs/tabs.stories.tsx | 13 ++++++------ packages/components/src/tabs/tabs.tsx | 21 +++++++++++++++++-- 3 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 .changeset/lemon-dogs-lie.md diff --git a/.changeset/lemon-dogs-lie.md b/.changeset/lemon-dogs-lie.md new file mode 100644 index 00000000..6ef79138 --- /dev/null +++ b/.changeset/lemon-dogs-lie.md @@ -0,0 +1,5 @@ +--- +"@status-im/components": patch +--- + +draft: add disabled state to Tabs diff --git a/packages/components/src/tabs/tabs.stories.tsx b/packages/components/src/tabs/tabs.stories.tsx index e9aece45..1dc0522e 100644 --- a/packages/components/src/tabs/tabs.stories.tsx +++ b/packages/components/src/tabs/tabs.stories.tsx @@ -32,7 +32,7 @@ export const Grey: StoryObj = { Tab 2 - + Tab 3 @@ -64,7 +64,7 @@ export const GreyBlur: StoryObj = { Tab 2 - + Tab 3 @@ -96,7 +96,7 @@ export const DarkGrey: StoryObj = { Tab 2 - + Tab 3 @@ -132,7 +132,7 @@ export const DarkGreyBlur: StoryObj = { Tab 2 - + Tab 3 @@ -176,6 +176,7 @@ export const Icon: StoryObj = { type="icon" value="3" icon={} + disabled > Tab 3 @@ -208,7 +209,7 @@ export const Counter: StoryObj = { Tab 2 - + Tab 3 @@ -240,7 +241,7 @@ export const Step: StoryObj = { Tab 2 - + Tab 3 diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx index f58fbc43..8d016bc9 100644 --- a/packages/components/src/tabs/tabs.tsx +++ b/packages/components/src/tabs/tabs.tsx @@ -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) => { @@ -87,10 +96,11 @@ const TabsTrigger = (props: TriggerProps, ref: Ref) => { 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) => { 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, })