feat(widgets): add label styling options to button widget by amelia-c0n · Pull Request #41998 · appsmithorg/appsmith

amelia-c0n · 2026-07-15T16:04:10Z

Description

Adds a Label styles section to the Button widget property pane so users can customize the button label independently of the button color settings.

Font color — override label and icon color (labelTextColor)
Font size — S through 3XL presets (labelTextSize)
Emphasis — bold and/or italic (labelStyle)
Styles apply to the label text and icon, including the disabled state.

Fixes #15065

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

/ok-to-test tags="@tag.All"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/29582506952
Commit: 9fc952e
Cypress dashboard.
Tags: @tag.All
Spec:

Fri, 17 Jul 2026 14:14:30 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

Yes
No

Summary by CodeRabbit

New Features
- Added “Label styles” controls for buttons: label font color, font size, and emphasis (bold/italic).
- The label-area icon color now matches the configured label text color and updates correctly in the disabled state.
Security / Tests
- Hardened label styling inputs with validation to prevent CSS injection.
- Added tests covering safe color/font-size handling and ensuring malicious values don’t result in injected styles.

coderabbitai · 2026-07-15T16:04:56Z

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.

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

Walkthrough

The Button widget exposes configurable label text color, font size, and bold/italic styling. Values are validated, forwarded through the component stack, and applied to label text and icons while preserving disabled-state styling.

Changes

Button label customization

Layer / File(s)	Summary
Safe label style values `app/client/src/widgets/ButtonWidget/component/utils.tsx`, `app/client/src/widgets/ButtonWidget/component/index.test.tsx`	Color and font-size inputs are validated against CSS breakout payloads, with tests covering safe and unsafe values.
Component label styling `app/client/src/widgets/ButtonWidget/component/index.tsx`, `app/client/src/widgets/ButtonWidget/component/index.test.tsx`	Button props and styles support label color, size, bold, italic, conditional icon colors, disabled icon styling, and CSS-safety coverage.
Widget label configuration `app/client/src/widgets/ButtonWidget/widget/index.tsx`, `app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Basic_spec.js`	Property-pane controls, types, view wiring, and scoped color-picker interactions expose and validate button styling options.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PropertyPane
  participant ButtonWidget
  participant ButtonComponent
  participant StyledButton
  PropertyPane->>ButtonWidget: Configure label styling properties
  ButtonWidget->>ButtonComponent: Pass labelStyle, labelTextColor, labelTextSize
  ButtonComponent->>StyledButton: Forward label styling props
  StyledButton->>StyledButton: Validate and apply label and icon styles

Poem

Colors bloom where labels gleam,
Sizes shift like a UI dream.
Bold or italic, choice takes flight,
Safe values keep the CSS right.
Buttons now wear styles just right.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR implements the linked feature by adding button label color, font size, and emphasis controls as requested in `#15065`.
Out of Scope Changes check	✅ Passed	The changes stay focused on button label styling and related tests, with no clear unrelated additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title is concise and accurately summarizes the main change: adding label styling options to the button widget.
Description check	✅ Passed	The description includes the required sections, issue reference, automation tags, Cypress results, and communication choice.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/button-widget-label-styling

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

amelia-c0n · 2026-07-15T16:05:56Z

/build-deploy-preview skip-tests=true

github-actions · 2026-07-15T16:06:24Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/29431001505.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41998.
recreate: .
base-image-tag: .

github-actions · 2026-07-15T16:08:08Z

🔴🔴🔴 Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 2, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

You can view the dependency diff in the run log. Look for the check-cyclic-dependencies job in the run.

hacktron-app

1 issue found across 1 file

Severity	Count
	1

View full scan results

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/client/src/widgets/ButtonWidget/component/index.tsx (1)
138-138: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Use logical OR for a safer CSS fallback.

If labelTextSize is explicitly bound to an empty string (e.g., via JS evaluation), the nullish coalescing operator (??) will inject the empty string, resulting in an invalid CSS rule (font-size: ;). Using the logical OR operator (||) provides a safer fallback to "inherit".
♻️ Proposed refactor
-    font-size: ${labelTextSize ?? "inherit"};
+    font-size: ${labelTextSize || "inherit"};
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/client/src/widgets/ButtonWidget/component/index.tsx` at line 138, Update
the font-size interpolation in the ButtonWidget styling to use logical OR
instead of nullish coalescing, so empty labelTextSize values fall back to
"inherit" while preserving valid configured sizes.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/client/src/widgets/ButtonWidget/widget/index.tsx`:
- Around line 449-454: Update the regex in the validation configuration within
the ButtonWidget index to use grouped prefix matching, rejecting values
beginning with “<” or “{{” only. Replace the current character-class lookahead
while preserving the existing non-empty text requirement.

---

Nitpick comments:
In `@app/client/src/widgets/ButtonWidget/component/index.tsx`:
- Line 138: Update the font-size interpolation in the ButtonWidget styling to
use logical OR instead of nullish coalescing, so empty labelTextSize values fall
back to "inherit" while preserving valid configured sizes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 98d836e4-7bd4-4ea2-b296-995db8b1405a

📥 Commits

Reviewing files that changed from the base of the PR and between d2ec04c and 07c2656.

📒 Files selected for processing (2)

app/client/src/widgets/ButtonWidget/component/index.tsx
app/client/src/widgets/ButtonWidget/widget/index.tsx

github-actions · 2026-07-15T16:16:35Z

Deploy-Preview-URL: https://ce-41998.dp.appsmith.com

…back

amelia-c0n · 2026-07-16T13:23:16Z

/build-deploy-preview skip-tests=true

github-actions · 2026-07-16T13:23:51Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/29501986465.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41998.
recreate: .
base-image-tag: .

github-actions · 2026-07-16T13:35:29Z

Deploy-Preview-URL: https://ce-41998.dp.appsmith.com

…ntrol

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Basic_spec.js`:
- Around line 426-428: Extract the shared color-picker selector used near lines
426-428 and 615-617 of
app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Basic_spec.js
into a locator variable in Widgets.json, preferring a data-* locator where
available; update both sites to use that variable instead of inline CSS template
strings.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 73ee94bb-6c19-4268-8d72-732fcf9088d3

📥 Commits

Reviewing files that changed from the base of the PR and between f94ea6a and b1ac8b0.

📒 Files selected for processing (1)

app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Basic_spec.js

amelia-c0n · 2026-07-17T06:31:10Z

/build-deploy-preview skip-tests=true

github-actions · 2026-07-17T06:31:37Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/29560276310.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41998.
recreate: .
base-image-tag: .

github-actions · 2026-07-17T06:40:58Z

Deploy-Preview-URL: https://ce-41998.dp.appsmith.com

…r clicks

amelia-c0n · 2026-07-17T14:24:29Z

/build-deploy-preview skip-tests=true

github-actions · 2026-07-17T14:24:57Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/29587879042.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41998.
recreate: .
base-image-tag: .

github-actions · 2026-07-17T14:33:32Z

Deploy-Preview-URL: https://ce-41998.dp.appsmith.com

feat(widgets): add label styling options to button widget

07c2656

amelia-c0n self-assigned this Jul 15, 2026

amelia-c0n requested a review from a team as a code owner July 15, 2026 16:04

github-actions Bot added Enhancement New feature or request and removed Enhancement New feature or request labels Jul 15, 2026

github-actions Bot added the Enhancement New feature or request label Jul 15, 2026

github-actions Bot removed the Enhancement New feature or request label Jul 15, 2026

hacktron-app Bot reviewed Jul 15, 2026

View reviewed changes

Comment thread app/client/src/widgets/ButtonWidget/component/index.tsx Outdated

coderabbitai Bot reviewed Jul 15, 2026

View reviewed changes

Comment thread app/client/src/widgets/ButtonWidget/widget/index.tsx

fix: CSS Injection via Unsanitized Widget Style Properties

cffdc2e

github-actions Bot added Enhancement New feature or request and removed Enhancement New feature or request labels Jul 16, 2026

fix(ButtonWidget): tighten label color regex and empty font-size fall…

bf105af

…back

amelia-c0n removed Low An issue that is neither critical nor breaks a user flow Icon Button Widget Issues related to the icon button widget Menu Button Widget Issues related to Menu Button widget labels Jul 16, 2026

github-actions Bot added Icon Button Widget Issues related to the icon button widget JSON Form Issue / features related to the JSON form wiget Low An issue that is neither critical nor breaks a user flow Menu Button Widget Issues related to Menu Button widget labels Jul 16, 2026

amelia-c0n removed the Query Widgets & IDE Pod All issues related to Query, JS, Eval, Widgets & IDE label Jul 16, 2026

github-actions Bot added the Query Widgets & IDE Pod All issues related to Query, JS, Eval, Widgets & IDE label Jul 16, 2026

amelia-c0n added the ok-to-test Required label for CI label Jul 16, 2026

Merge branch 'release' into feat/button-widget-label-styling

f94ea6a

github-actions Bot removed the Enhancement New feature or request label Jul 16, 2026

fix(cypress): scope Theme_Basic button color picker to buttoncolor co…

b1ac8b0

…ntrol

github-actions Bot added the Enhancement New feature or request label Jul 16, 2026

coderabbitai Bot reviewed Jul 16, 2026

View reviewed changes

Comment thread app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Basic_spec.js Outdated

Merge branch 'release' into feat/button-widget-label-styling

79069ba

Amelia and others added 4 commits July 17, 2026 09:51

refactor(cypress): use buttonColor locator in Theme_Basic color picke…

3f0d25f

…r clicks

Merge branch 'release' into feat/button-widget-label-styling

9a859c2

Prevent italic glyph overhang from being clipped

4b12483

Merge branch 'release' into feat/button-widget-label-styling

9fc952e

amelia-c0n requested a review from subrata71 July 17, 2026 14:49

Uh oh!

Conversation

amelia-c0n commented Jul 15, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Automation

🔍 Cypress test results

Communication

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

amelia-c0n commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

hacktron-app Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

amelia-c0n commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 16, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amelia-c0n commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

amelia-c0n commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

github-actions Bot commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

amelia-c0n commented Jul 15, 2026 •

edited by github-actions Bot

Loading

coderabbitai Bot commented Jul 15, 2026 •

edited

Loading