Skip to content

design improvements for rule creation tabs#3308

Merged
owenpearson merged 1 commit intomainfrom
channel-rule-tabs-design-review
Apr 9, 2026
Merged

design improvements for rule creation tabs#3308
owenpearson merged 1 commit intomainfrom
channel-rule-tabs-design-review

Conversation

@owenpearson
Copy link
Copy Markdown
Member

@owenpearson owenpearson commented Apr 2, 2026

  • use radix tabs for better accessibility and keyboard navigation
  • update styles based on design feedback

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 2, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 48402855-6ac5-45f9-989d-efc2340076f3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch channel-rule-tabs-design-review

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@owenpearson owenpearson added the review-app Create a Heroku review app label Apr 2, 2026
@ably-ci ably-ci temporarily deployed to ably-docs-channel-rule--tiswfa April 2, 2026 14:30 Inactive
@owenpearson owenpearson force-pushed the channel-rule-tabs-design-review branch from 00cecd7 to 80a5e18 Compare April 2, 2026 14:37
@ably-ci ably-ci temporarily deployed to ably-docs-channel-rule--tiswfa April 2, 2026 14:37 Inactive
@m-hulbert m-hulbert had a problem deploying to ably-docs-channel-rule--jzwco5 April 9, 2026 08:03 Failure
@m-hulbert m-hulbert temporarily deployed to ably-docs-channel-rule--jzwco5 April 9, 2026 08:12 Inactive
@owenpearson owenpearson requested a review from m-hulbert April 9, 2026 08:50
m-hulbert
m-hulbert reviewed Apr 9, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@m-hulbert m-hulbert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Owen - this is much tidier. Just 2 small comments.

Comment thread src/components/Layout/mdx/Tabs.tsx
<RadixTabs.Trigger
key={value}
value={value}
style={{ outline: 'none', borderTopLeftRadius: '6px', borderTopRightRadius: '6px' }}
Copy link
Copy Markdown
Contributor

@m-hulbert m-hulbert Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this outline: 'none' means that you don't get a focus state when keyboard tabbing.

Copy link
Copy Markdown
Member Author

@owenpearson owenpearson Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/components/Layout/mdx/Tabs.tsx
) : null;
export const Tab: React.FC<TabProps> = ({ children }) => {
// Tab is only used declaratively — Tabs reads its props and renders RadixTabs.Content.
// When used outside of Tabs, render nothing.
Copy link
Copy Markdown
Contributor

@m-hulbert m-hulbert Apr 9, 2026

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?

Copy link
Copy Markdown
Member Author

@owenpearson owenpearson Apr 9, 2026

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!

@owenpearson owenpearson force-pushed the channel-rule-tabs-design-review branch from 80a5e18 to 17b47f8 Compare April 9, 2026 12:26
@ably-ci ably-ci temporarily deployed to ably-docs-channel-rule--disrjn April 9, 2026 12:26 Inactive
m-hulbert
m-hulbert approved these changes Apr 9, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@m-hulbert m-hulbert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@owenpearson
design improvements for rule creation tabs
03c6f20 
- use radix tabs for better accessibility and keyboard navigation
- update styles based on design feedback
@owenpearson owenpearson force-pushed the channel-rule-tabs-design-review branch from 17b47f8 to 03c6f20 Compare April 9, 2026 16:39
@owenpearson owenpearson enabled auto-merge April 9, 2026 16:39
@ably-ci ably-ci temporarily deployed to ably-docs-channel-rule--disrjn April 9, 2026 16:40 Inactive
@owenpearson owenpearson merged commit 79989dd into main Apr 9, 2026
7 checks passed
@owenpearson owenpearson deleted the channel-rule-tabs-design-review branch April 9, 2026 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@m-hulbert m-hulbert m-hulbert approved these changes

Assignees

No one assigned

Labels

review-app Create a Heroku review app

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@owenpearson @m-hulbert @ably-ci