design improvements for rule creation tabs #3308
+53
−98
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,63 @@ | ||
| import React, { isValidElement, ReactNode } from 'react'; | ||
| import * as RadixTabs from '@radix-ui/react-tabs'; | ||
| import cn from '@ably/ui/core/utils/cn'; | ||
|
|
||
| interface TabProps { | ||
| value: string; | ||
| label: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| export const Tab: React.FC<TabProps> = () => { | ||
| // Tab is only used declaratively — Tabs reads its props and renders RadixTabs.Content. | ||
| // When used outside of Tabs, render nothing. | ||
| return null; | ||
| }; | ||
|
|
||
| interface TabsProps { | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| export const Tabs: React.FC<TabsProps> = ({ children }) => { | ||
| const tabs: { value: string; label: string }[] = []; | ||
| const contentByValue: Record<string, ReactNode> = {}; | ||
|
|
||
| React.Children.forEach(children, (child) => { | ||
| if (isValidElement<TabProps>(child) && child.props.value) { | ||
| tabs.push({ value: child.props.value, label: child.props.label ?? child.props.value }); | ||
| contentByValue[child.props.value] = child.props.children; | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <RadixTabs.Root | ||
| defaultValue={tabs[0]?.value} | ||
| className="my-5 border border-neutral-300 dark:border-neutral-800 rounded-lg overflow-hidden" | ||
| > | ||
| <RadixTabs.List className="flex gap-1 border-b border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-1100 px-2 pt-2"> | ||
| {tabs.map(({ value, label }) => ( | ||
| <RadixTabs.Trigger | ||
| key={value} | ||
| value={value} | ||
| style={{ outline: 'none', borderTopLeftRadius: '6px', borderTopRightRadius: '6px' }} | ||
|
Contributor
There was a problem hiding this comment. I think this
Member
Author
There was a problem hiding this comment. Thanks for the review, yeah this was feedback from design: the focus ring looks bad here so we decided to hide it. You can still navigate between the tabs using arrows keys and the focused tab is clearly visible so I don't think this is a real problem for accessibility. |
||
| className={cn( | ||
| 'px-4 py-2 ui-text-label3 transition-colors cursor-pointer', | ||
| 'border border-transparent', | ||
| 'text-neutral-700 dark:text-neutral-500 hover:text-neutral-1000 dark:hover:text-neutral-300', | ||
| 'data-[state=active]:bg-white data-[state=active]:dark:bg-neutral-1300 data-[state=active]:text-neutral-1300 data-[state=active]:dark:text-neutral-000', | ||
| 'data-[state=active]:border-neutral-300 data-[state=active]:dark:border-neutral-800', | ||
| 'data-[state=active]:border-b-white data-[state=active]:dark:border-b-neutral-1300 data-[state=active]:-mb-px', | ||
| )} | ||
| > | ||
| {label} | ||
| </RadixTabs.Trigger> | ||
| ))} | ||
| </RadixTabs.List> | ||
| {tabs.map(({ value }) => ( | ||
| <RadixTabs.Content key={value} value={value} className="px-5 pt-5 pb-2.5"> | ||
| {contentByValue[value]} | ||
| </RadixTabs.Content> | ||
| ))} | ||
| </RadixTabs.Root> | ||
| ); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this will render nothing now, and we should probably keep that behaviour when using them independently. WDYT?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah you're right, updated!