[Button] Improve readability of permission-disabled buttons by vivekmaurya001 · Pull Request #1862 · layer5io/sistent

vivekmaurya001 · 2026-10-07T08:04:01Z

Notes for Reviewers

This PR fixes #1805
removed extra fading and maded disabled button text darker

Before
Screencast from 2026-10-09 11-54-11.webm
After
Screencast from 2026-10-09 11-53-31.webm

Signed commits

Yes, I signed my commits.

Summary by CodeRabbit

Bug Fixes
- Permission-restricted buttons remain disabled and use the theme’s default text color in light mode; existing dark-mode colors and caller-provided styles are retained.
- Carousel navigation buttons are hidden when scrolling in their direction is unavailable.
Accessibility
- Carousel navigation buttons now have accessible labels, and catalog design names can receive keyboard focus.
Style
- Catalog design names can wrap to two lines, with overflow indicated by an ellipsis. Hovering or focusing a name reveals its pattern name.
Documentation
- Updated design guidance and the security vulnerability reporting contact.

coderabbitai · 2026-10-07T08:04:24Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Last reviewed commit: 89be399

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 8df34e92-b288-4f24-99f9-5d88c3d0747c

📥 Commits

Reviewing files that changed from the base of the PR and between cea1654 and 89be399.

📒 Files selected for processing: 1

src/base/Button/Button.tsx

🚧 Files skipped from review as they are similar to previous changes: 1

src/base/Button/Button.tsx

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

When a button lacks its required permission, it remains disabled. In light mode, it applies a disabled text color from theme.palette.text.default and combines this conditional style with caller-provided sx styles. In dark mode, the conditional style adds no override.

Changes: Permission-denied button styling

Layer / File(s)	Summary
Disabled text color `src/base/Button/Button.tsx`	The permission-denied button applies a light-mode text color override to its disabled state. The conditional style is combined with caller-provided `sx` input.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: maanvi212006

Merge Risk: ⚪ Minimal · up to 89be3

This change improves disabled-button text readability in light mode. No actionable merge-blocking risk was identified.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Linked Issues check		Issue `#1805` requires readable text contrast in light mode for the Native Button Gating demo. In `src/base/Button/Button.tsx`, the permission-denied button applies `theme.palette.text.default` to `.Mui…
Out of Scope Changes check		The whole-PR diff changes only `src/base/Button/Button.tsx`. The change is limited to the permission-denied button style and preserves caller-provided `sx` values. The change directly supports issue #…
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly describes the main change: improving readability for buttons disabled by permission requirements.

Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.}

Maanvi212006

Can you attach a short screen recording or before/after screenshots of the whole permissions page in light and dark mode, including Export Design / Manage Roles buttons ? Removing the shield's opacity affects them too, and the goal is that the native button looks identical to those.

Maanvi212006

Also, please add sign-off to the commit. You can follow the steps on this page to do so.

vivekmaurya001 · 2026-10-09T06:42:29Z

@Maanvi212006 please check, I have removed affects on others and included the video

Maanvi212006

looks good! the text is readable in light now in light mode.

resolve the DCO failure
open an issue to apply the same fix to "Create Workspace" and "Manage Organizations (Needs AnyOf)" button on this page.

leecalcote

Thanks @vivekmaurya001 for picking up #1805, the before/after recordings make the improvement easy to see, and merging the caller's sx (array or object) rather than overwriting it is careful work.

Things to address:

The DCO check is failing. Could you sign off your commits (git commit --amend -s or git rebase --signoff) and force-push?
The override only applies in light mode. If dark mode has the same readability issue, it would be nice to handle both, otherwise a short comment explaining why dark mode is excluded helps future readers (inline note).
The title could be more descriptive, for example [Button] Improve readability of permission-disabled buttons.
There is an outstanding changes-requested review; please make sure those points are addressed too.

leecalcote · 2026-10-13T16:05:13Z

+        disabled
+        sx={[
+          (theme) =>
+            theme.palette.mode === 'light'


Is dark mode intentionally left unchanged? If disabled text is also hard to read there, using a single token that works in both modes (rather than branching on palette.mode) would keep the two themes in parity. If light-only is intentional, a one-line comment here would help.

@leecalcote dark mode texts are readable hence currently i have maded changes related to light mode specifically

Signed-off-by: vivekmaurya001 <vm8118134@gmail.com>

vivekmaurya001 · 2026-10-15T14:14:05Z

@Maanvi212006 @leecalcote I have resolved DCO issue and added an inline comment explaining that this fix targets the light-mode issue reported in #1805 and preserves existing dark-mode styling.

vivekmaurya001 · 2026-10-15T16:32:53Z

@Maanvi212006 I created another similar PR for this page.

Maanvi212006 · 2026-10-15T16:57:30Z

Tracked in #1869

Maanvi212006 reviewed Oct 8, 2026

View reviewed changes

Maanvi212006 requested changes Oct 8, 2026

View reviewed changes

Maanvi212006 reviewed Oct 10, 2026

View reviewed changes

leecalcote reviewed Oct 13, 2026

View reviewed changes

vivekmaurya001 force-pushed the visibility-text branch 2 times, most recently from df453df to f87024f Compare October 15, 2026 13:11

vivekmaurya001 added 3 commits October 15, 2026 18:50

removed opacity and updated shading

e5b096e

Signed-off-by: vivekmaurya001 <vm8118134@gmail.com>

updated other effects

44a2b20

Signed-off-by: vivekmaurya001 <vm8118134@gmail.com>

signed commit Signed-off-by: vivek maurya <vm8118134@gmail.com>

cea1654

Signed-off-by: vivekmaurya001 <vm8118134@gmail.com>

vivekmaurya001 force-pushed the visibility-text branch from f87024f to cea1654 Compare October 15, 2026 13:20

change is limited to light mode redability; dark mode is redable

89be399

Signed-off-by: vivekmaurya001 <vm8118134@gmail.com>

vivekmaurya001 changed the title ~~removed opacity and updated shading~~ [Button] Improve readability of permission-disabled buttons Oct 15, 2026

Maanvi212006 closed this Oct 15, 2026

Navigation Menu

Repository navigation

[Button] Improve readability of permission-disabled buttons - #1862

[Button] Improve readability of permission-disabled buttons#1862
vivekmaurya001 wants to merge 4 commits into
layer5io:masterfrom
vivekmaurya001:visibility-text

vivekmaurya001 commented Oct 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 7, 2026 •

edited

Loading

Reviews paused

Uh oh!

Maanvi212006 left a comment

Uh oh!

Maanvi212006 left a comment

Uh oh!

vivekmaurya001 commented Oct 9, 2026

Uh oh!

Maanvi212006 left a comment •

edited

Loading

Uh oh!

leecalcote left a comment

Uh oh!

leecalcote Oct 13, 2026

Uh oh!

vivekmaurya001 Oct 15, 2026

Uh oh!

vivekmaurya001 commented Oct 15, 2026 •

edited

Loading

Uh oh!

vivekmaurya001 commented Oct 15, 2026 •

edited

Loading

Uh oh!

Maanvi212006 commented Oct 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

vivekmaurya001 commented Oct 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Uh oh!

Maanvi212006 left a comment

Choose a reason for hiding this comment

Uh oh!

Maanvi212006 left a comment

Choose a reason for hiding this comment

Uh oh!

vivekmaurya001 commented Oct 9, 2026

Uh oh!

Maanvi212006 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leecalcote left a comment

Choose a reason for hiding this comment

Uh oh!

leecalcote Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

vivekmaurya001 Oct 15, 2026

Choose a reason for hiding this comment

Uh oh!

vivekmaurya001 commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vivekmaurya001 commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Maanvi212006 commented Oct 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vivekmaurya001 commented Oct 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 7, 2026 •

edited

Loading

Maanvi212006 left a comment •

edited

Loading

vivekmaurya001 commented Oct 15, 2026 •

edited

Loading

vivekmaurya001 commented Oct 15, 2026 •

edited

Loading